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 <dan@coffeecode.net>

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 f913856..69f4398 100644 (file)
--- 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;