Changeset 36145

Timestamp:

2022-04-14T17:13:54+12:00 (2 years ago)

Author:

davidb

Message:

Added support for TK Labels

Location:

main/trunk/greenstone3/web/interfaces/default

Files:

• js/utility_scripts.js (modified) (1 diff)
• style/core.css (modified) (2 diffs)
• transform/layouts/header.xsl (modified) (2 diffs)

main/trunk/greenstone3/web/interfaces/default/js/utility_scripts.js

@@ -166 +166 @@
     $.ajax(url);
 }
+
+var tkMetadataSetStatus = "needs-to-be-loaded";
+var tkMetadataElements = null;
+
+
+function addTKLabelToImage(labelName, definition, name, comment) {
+   // lists of tkLabels and their corresponding codes, in order
+   let tkLabels = ["Attribution","Clan","Family","MultipleCommunities","CommunityVoice","Creative","Verified","NonVerified","Seasonal","WomenGeneral","MenGeneral",
+      "MenRestricted","WomenRestricted","CulturallySensitive","SecretSacred","OpenToCommercialization","NonCommercial","CommunityUseOnly","Outreach","OpenToCollaboration"];
+   let tkCodes = ["tk_a","tk_cl","tk_f","tk_mc","tk_cv","tk_cr","tk_v","tk_nv","tk_s","tk_wg","tk_mg","tk_mr","tk_wr","tk_cs","tk_ss","tk_oc","tk_nc","tk_co","tk_o","tk_cb"];
+   for (let i = 0; i < tkLabels.length; i++) {
+      if (labelName == tkLabels[i]) {
+         let labeldiv = document.querySelectorAll(".tklabels img");
+         for (image of labeldiv) {
+            let labelCode = image.src.substr(image.src.lastIndexOf("/") + 1).replace(".png", ""); // get tk label code from image file name
+            if (labelCode == tkCodes[i]) {
+               image.title = "TK " + name + ": " + definition + " Click for more details."; // set tooltip
+               if (image.parentElement.parentElement.parentElement.classList[0] != "tocSectionTitle") { // disable onclick event in favourites section
+                  image.addEventListener("click", function(e) {
+                     let currPopup = document.getElementsByClassName("tkPopup")[0];
+                     if (currPopup == undefined || (currPopup != undefined && currPopup.id != labelCode)) { 
+                        let popup = document.createElement("div");
+                        popup.classList.add("tkPopup");
+                        popup.id = labelCode;
+                        let popupText = document.createElement("span");
+                        let heading = "<h1>Traditional Knowledge Label:<br><h2>" + name + "</h2></h1>";
+                        let moreInformation = "<br> For more information about TK Labels, <a href='https://localcontexts.org/labels/traditional-knowledge-labels/' target='_blank'>click here.</a>";
+                        popupText.innerHTML = heading + comment + moreInformation;
+                        let closeButton = document.createElement("span");
+                        closeButton.innerHTML = "&#215;";
+                        closeButton.id = "tkCloseButton";
+                        closeButton.title = "Click to close window."
+                        closeButton.addEventListener("click", function(e) {
+                           closeButton.parentElement.remove();
+                        });
+                        popup.appendChild(closeButton);
+                        popup.appendChild(popupText);
+                        e.target.parentElement.appendChild(popup);
+                     }
+                     if (currPopup) currPopup.remove(); // remove existing popup div
+                  });
+               }
+            }
+         }
+      }
+   }
+}
+
+function addTKLabelsToImages(lang) {
+   if (tkMetadataElements == null) {
+      console.error("ajax call not yet loaded tk label metadata set");
+   } else {
+      for (label of tkMetadataElements) { // for each tklabel element in tk.mds
+         let tkLabelName = label.attributes.name.value; // Element name=""
+         let attributes = label.querySelectorAll("[code=" + lang + "] Attribute"); // gets attributes for selected language
+         let tkName = attributes[0].textContent; // name="label"
+         let tkDefinition = attributes[1].textContent; // name="definition"
+         let tkComment = attributes[2].textContent; // name="comment"
+         addTKLabelToImage(tkLabelName, tkDefinition, tkName, tkComment);       
+      }  
+   }
+}
+
+function loadTKMetadataSet(lang) {
+   tkMetadataSetStatus = "loading";
+   $.ajax({
+      url: gs.variables["tkMetadataURL"],
+      success: function(xml) {
+         tkMetadataSetStatus = "loaded";
+         let parser = new DOMParser();
+         let tkmds = parser.parseFromString(xml, "text/xml");
+         tkMetadataElements = tkmds.querySelectorAll("Element");
+         if (document.readyState === "complete") {
+            addTKLabelsToImages(lang);
+         } else {
+            window.onload = function() {
+               addTKLabelsToImages(lang);
+            }
+         }
+      },
+      error: function() {
+         tkMetadataSetStatus = "no-metadata-set-for-this-collection";
+         console.log("No TK Label Metadata-set found for this collection");
+      }
+   });
+};
+
+

main/trunk/greenstone3/web/interfaces/default/style/core.css

@@ -723 +723 @@
 }
 
+.tocTextCell img {/* tklabel icon size & margin reduction */
+    width: 3em !important; 
+    margin-right: 0.2em !important;
+    margin-top: 0.2em !important;
+}
+
 .tableOfContentsContainer {
     padding:1px;
@@ -1281 +1287 @@
     margin: 0 auto;
 }
+
+/* Styling for TK Label related items */
+
+.tkPopup {
+    position: relative;
+    border: 1px solid darkgrey;
+    border-radius: 0.2em;
+    background: lightgrey;
+    margin: 0.2em;
+    padding: 0.8em;
+    font-size: 16px;
+    animation: fadein 0.4s;
+    box-shadow: 0px 5px 8px rgba(0,0,0,0.1);
+}
+
+.tkPopup a {
+    color: black;   
+    text-decoration: none;
+    border-bottom: 2px solid transparent;
+    transition: 0.2s ease;
+}
+
+.tkPopup a:hover {
+    color: black;   
+    border-color: black;
+    /* text-decoration: underline; */
+}
+
+.tkPopup h1 {
+    font-size: 22px;
+    margin-top: 0.2em;
+    margin-bottom: 0;
+    text-align: center;
+}
+
+.tkPopup h2 {
+    font-size: 20px;
+    color: rgb(24, 88, 7);
+    margin-top: 0.4em;
+    text-align: center;
+}
+
+.tklabels img { 
+    width: 3em; 
+    margin-right: 0.3em; 
+    margin-top: 0.3em;
+    cursor: pointer; 
+    opacity: 0.8; 
+    transition: 0.2s ease;
+}
+
+.tklabels img:hover { 
+    opacity: 1;
+}
+
+#tkCloseButton {
+    position: absolute;
+    font-weight: bold;
+    color: darkred;
+    font-size: 26px;
+    right: 0.5em;
+    top: 0.4em;
+    cursor: pointer;
+    transition: 0.1s ease;
+}
+
+#tkCloseButton:hover {
+    text-shadow: 0 0 5px rgba(139,0,0,0.5);
+}
+
+@keyframes fadein {
+    from {
+        opacity:0;
+    }
+    to {
+        opacity: 1;
+    }
+}

main/trunk/greenstone3/web/interfaces/default/transform/layouts/header.xsl

@@ -720 +720 @@
        no search indexes, which is why the extra test for the presence of an index/fq-something is necessary. -->
   <xsl:template name="quick-search-area">
+
+    <gsf:variable name="tkMetadataURL"><xsl:value-of select="$library_name"/>/sites/<xsl:value-of select="$site_name"/>/collect/<xsl:value-of select="$collNameChecked"/>/metadata/tk.mds</gsf:variable>
+
     <xsl:if test="/page/pageResponse/collection[@name=$collNameChecked]/serviceList/service[@type='query']">
       <xsl:variable name="subaction" select="/page/pageRequest/@subaction"/>
@@ -859 +862 @@
     </gsf:choose-metadata>
   </xsl:template>
+
+<xsl:template name="choose-tklabels">
+    <script type="text/javascript">
+            <xsl:text disable-output-escaping="yes">
+                $(document).ready(function() {
+                    if (tkMetadataSetStatus == "needs-to-be-loaded") {
+                        loadTKMetadataSet("</xsl:text><xsl:value-of select="$lang"/><xsl:text disable-output-escaping="yes">");
+                    }
+                })
+            </xsl:text>
+        </script>
+
+    <div class="tklabels">
+        <gsf:switch>
+        <gsf:metadata name="tk.Attribution"/>
+        <gsf:when test="equals" test-value="true">
+            <gsf:icon file="tklabels/tk_a.png"/>
+        </gsf:when>
+        </gsf:switch>
+        <gsf:switch>
+        <gsf:metadata name="tk.Clan"/>
+        <gsf:when test="equals" test-value="true">
+            <gsf:icon file="tklabels/tk_cl.png"/>
+        </gsf:when>
+        </gsf:switch>
+        <gsf:switch>
+        <gsf:metadata name="tk.Family"/>
+        <gsf:when test="equals" test-value="true">
+            <gsf:icon file="tklabels/tk_f.png"/>
+        </gsf:when>
+        </gsf:switch>
+        <gsf:switch>
+        <gsf:metadata name="tk.MultipleCommunities"/>
+        <gsf:when test="equals" test-value="true">
+            <gsf:icon file="tklabels/tk_mc.png"/>
+        </gsf:when>
+        </gsf:switch>
+        <gsf:switch>
+        <gsf:metadata name="tk.CommunityVoice"/>
+        <gsf:when test="equals" test-value="true">
+            <gsf:icon file="tklabels/tk_cv.png"/>
+        </gsf:when>
+        </gsf:switch>
+        <gsf:switch>
+        <gsf:metadata name="tk.Creative"/>
+        <gsf:when test="equals" test-value="true">
+            <gsf:icon file="tklabels/tk_cr.png"/>
+        </gsf:when>
+        </gsf:switch>
+        <gsf:switch>
+        <gsf:metadata name="tk.Verified"/>
+        <gsf:when test="equals" test-value="true">
+            <gsf:icon file="tklabels/tk_v.png"/>
+        </gsf:when>
+        </gsf:switch>
+        <gsf:switch>
+        <gsf:metadata name="tk.NonVerified"/>
+        <gsf:when test="equals" test-value="true">
+            <gsf:icon file="tklabels/tk_nv.png"/>
+        </gsf:when>
+        </gsf:switch>
+        <gsf:switch>
+        <gsf:metadata name="tk.Seasonal"/>
+        <gsf:when test="equals" test-value="true">
+            <gsf:icon file="tklabels/tk_s.png"/>
+        </gsf:when>
+        </gsf:switch>
+        <gsf:switch>
+        <gsf:metadata name="tk.WomenGeneral"/>
+        <gsf:when test="equals" test-value="true">
+            <gsf:icon file="tklabels/tk_wg.png"/>
+        </gsf:when>
+        </gsf:switch>
+        <gsf:switch>
+        <gsf:metadata name="tk.MenGeneral"/>
+        <gsf:when test="equals" test-value="true">
+            <gsf:icon file="tklabels/tk_mg.png"/>
+        </gsf:when>
+        </gsf:switch>
+        <gsf:switch>
+        <gsf:metadata name="tk.MenRestricted"/>
+        <gsf:when test="equals" test-value="true">
+            <gsf:icon file="tklabels/tk_mr.png"/>
+        </gsf:when>
+        </gsf:switch>
+        <gsf:switch>
+        <gsf:metadata name="tk.WomenRestricted"/>
+        <gsf:when test="equals" test-value="true">
+            <gsf:icon file="tklabels/tk_wr.png"/>
+        </gsf:when>
+        </gsf:switch>
+        <gsf:switch>
+        <gsf:metadata name="tk.CulturallySensitive"/>
+        <gsf:when test="equals" test-value="true">
+            <gsf:icon file="tklabels/tk_cs.png"/>
+        </gsf:when>
+        </gsf:switch>
+        <gsf:switch>
+        <gsf:metadata name="tk.SecretSacred"/>
+        <gsf:when test="equals" test-value="true">
+            <gsf:icon file="tklabels/tk_ss.png"/>
+        </gsf:when>
+        </gsf:switch>
+        <gsf:switch>
+        <gsf:metadata name="tk.OpenToCommercialization"/>
+        <gsf:when test="equals" test-value="true">
+            <gsf:icon file="tklabels/tk_oc.png"/>
+        </gsf:when>
+        </gsf:switch>
+        <gsf:switch>
+        <gsf:metadata name="tk.NonCommercial"/>
+        <gsf:when test="equals" test-value="true">
+            <gsf:icon file="tklabels/tk_nc.png"/>
+        </gsf:when>
+        </gsf:switch>
+        <gsf:switch>
+        <gsf:metadata name="tk.CommunityUseOnly"/>
+        <gsf:when test="equals" test-value="true">
+            <gsf:icon file="tklabels/tk_co.png"/>
+        </gsf:when>
+        </gsf:switch>
+        <gsf:switch>
+        <gsf:metadata name="tk.Outreach"/>
+        <gsf:when test="equals" test-value="true">
+            <gsf:icon file="tklabels/tk_o.png"/>
+        </gsf:when>
+        </gsf:switch>
+        <gsf:switch>
+        <gsf:metadata name="tk.OpenToCollaboration"/>
+        <gsf:when test="equals" test-value="true">
+            <gsf:icon file="tklabels/tk_cb.png"/>
+        </gsf:when>
+        </gsf:switch>
+    </div>
+    </xsl:template>
+
+    <xsl:template name="choose-tklabels-small">
+        <style> 
+        .tklabels img { 
+            width: 2em; 
+        }
+        </style>
+        <xsl:call-template name="choose-tklabels"/>
+    </xsl:template>
+
 </xsl:stylesheet>