From 4a9f9868ef96d6b7f7ce11ab00919510ef8c55a5 Mon Sep 17 00:00:00 2001 From: Dan Scott Date: Fri, 11 Aug 2017 10:24:29 -0400 Subject: [PATCH] Wikidata cards for multiple performers Refactor a bit more to support generating wikidata cards for multiple performers. Add the performer's label at the top of the box to disambiguate boxes from one another. Currently breaks toggling as the hardcoded single DOM ID hack has been exposed! Signed-off-by: Dan Scott --- .../web/js/ui/default/opac/wikidata_music_card.js | 36 +++++++++++++++------- 1 file changed, 25 insertions(+), 11 deletions(-) diff --git a/Open-ILS/web/js/ui/default/opac/wikidata_music_card.js b/Open-ILS/web/js/ui/default/opac/wikidata_music_card.js index f9138561c9..69f4398635 100644 --- a/Open-ILS/web/js/ui/default/opac/wikidata_music_card.js +++ b/Open-ILS/web/js/ui/default/opac/wikidata_music_card.js @@ -15,7 +15,6 @@ * * Current limitations: * * Only activated for musical recordings, to avoid ambiguous results - * * Only activated for the first performer in the list * * Hard-coded for English * * To use this in your catalogue, you will need to modify a few of the @@ -23,15 +22,28 @@ * locations for inserting the clickable note icon and the infocard. */ var icon_node; - var entity_name; var note; var wd; /* Ensure this is a musical recording */ if (document.getElementById('canvas_main').getAttribute('typeof').indexOf('MusicAlbum') > -1) { /* Performer's name - used to find a matching item in wikidata */ - var performer_node = document.querySelector('span[resource="#schemacontrib1"] span[property="name"]'); - entity_name = performer_node.textContent.trim(); + var performer_nodes = document.querySelectorAll('span[resource^="#schemacontrib"]'); + for (var node of performer_nodes) { + /* Insert clickable icon here */ + icon_node = node.querySelector('span[property="description"]'); + if (icon_node) { + note = document.createElement('span'); + note.class = 'wikidata'; + note.innerText = ' ♪'; + note.addEventListener('click', perform, { once: true }); + icon_node.insertBefore(note, null); + } + } + } + + function getContribName(node) { + var entity_name = node.querySelector('span[property="name"]').textContent.trim(); var lastchar = entity_name[entity_name.length - 1]; if (lastchar === '.' || lastchar === ',') { entity_name = entity_name.slice(0, -1); @@ -40,16 +52,11 @@ if (inverse.length === 2) { entity_name = inverse[1].trim() + " " + inverse[0].trim(); } - /* Insert clickable icon here */ - icon_node = document.querySelector('span[resource="#schemacontrib1"] span[property="description"]'); - note = document.createElement('span'); - note.class = 'wikidata'; - note.innerText = ' ♪'; - note.addEventListener('click', perform, { once: true }); - icon_node.insertBefore(note, null); + return entity_name; } function perform(e) { + var entity_name = getContribName(this.parentNode.parentNode); findPerformer(icon_node, entity_name); e.preventDefault(); e.stopPropagation(); @@ -129,6 +136,8 @@ musician.style.border = 'thin blue solid'; musician.style.overflow = 'hidden'; + addWDValue('itemLabel', null, null, false); + if (r.hasOwnProperty('image')) { var img = document.createElement('img'); img.src = r.image.value.replace('http:', 'https:'); @@ -153,6 +162,11 @@ value = r[property].value; var valueDiv = document.createElement('div'); var labelText = value; + if (!propertyLabel && !label && !isLink) { + var strong = document.createElement('strong'); + valueDiv.appendChild(strong); + strong.innerText = labelText; + } if (propertyLabel) { var valueLabel = document.createElement('label'); valueLabel.innerText = propertyLabel; -- 2.11.0