Merge branch 'master' into dev

ails-lab · Dec 9, 2024 · f63f6c1 · f63f6c1
2 parents 73cb17f + 390cbb0
commit f63f6c1
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 16 deletions.
diff --git a/src/locales/en/app.json b/src/locales/en/app.json
@@ -49,6 +49,7 @@
   "preview"             : "Preview",
   "multilingual"        : "Multilingual",
   "optional"            : "Optional",
+  "instructions"        : "CAMPAIGN INSTRUCTIONS",
 
   "description"         : "DESCRIPTION",
   "return-campaign"     : "RETURN TO CAMPAIGN",

diff --git a/src/locales/en/item.json b/src/locales/en/item.json
@@ -28,6 +28,10 @@
   "meta": "ITEM METADATA",
   "title": "TITLE",
   "description": "DESCRIPTION",
+  "object": "OBJECT",
+  "country": "COUNTRY",
+  "city": "CITY",
+  "date": "DATE",
   "provider": "PROVIDER",
   "creator": "CREATOR",
   "rights": "RIGHTS",
@@ -42,9 +46,13 @@
   "material": "MATERIAL (MEDIUM)",
   "see-it": "See it in ",
   "europeana": "Europeana",
+  "asksa": "ASKSA",
   "exit": "EXIT",
   "fullscreen": "FULLSCREEN",
+  "tagging": "TAGGING",
+  "tagging-disclaimer": "Start typing your keyword and select the appropriate term from the list",
   "sub-tagging": "PROPERTY TAGGING",
+  "sub-tagging-disclaimer": "Start typing your keyword and select the appropriate term from the list. Then select a property to tag and a text fragment from the value.",
   "bias-tagging": "BIAS IN THE METADATA",
   "subtagging-disclaimer": "Hover on the labels of the list to display the context of each annotation",
   "image-tagging": "IMAGE COMPARISON",
@@ -59,7 +67,7 @@
   "poll-info": "Is the following composer depicted in the photograph?",
   "yes": "Yes",
   "no": "No",
-  "geotagging": "GEOTAGGING",
+  "geotagging": "GEO TAGGING",
   "geotagging-info": "Add geographical information about the picture (e.g. countries,locations and landmarks).",
   "toastr-inactive": "The campaign is NOT active",
   "toastr-login": "You must log in before starting contributing",
@@ -70,9 +78,9 @@
   "toastr-restricted": "You can not annotate. This campaign is private.",
   "toastr-feedback-registered": "Your feedback has been registered",
   "toggle-publish": "Click to toggle Publish state",
-  "usertagging": "COMMENTING",
-  "usertagging-info": "Leave your feedback on the item.",
-  "usertagging-textarea": "Start typing your feedback here...",
+  "usertagging": "FREE TEXT TAGGING",
+  "usertagging-info": "Provide some free text information",
+  "usertagging-textarea": "Start typing your text here...",
   "usertagging-submit": "Add",
   "zoom-disclaimer": "Use your mouse wheel to zoom in & out of the image"
 }
diff --git a/src/modules/Record.js b/src/modules/Record.js
@@ -268,7 +268,8 @@ export class Record {
       this.meta.date = data.descriptiveData.dates[0].free;
     }
     if (data.descriptiveData.isRelatedTo) {
-      this.meta.relatedTo = data.descriptiveData.isRelatedTo.uri;
+      this.meta.relatedToUri = data.descriptiveData.isRelatedTo.uri;
+      this.meta.relatedToLabel = decodeURIComponent(new URL(data.descriptiveData.isRelatedTo.uri).pathname.split('/').pop());
     }
     if (data.descriptiveData.isShownAt) {
       this.meta.isShownAt = data.descriptiveData.isShownAt;

diff --git a/src/widgets/item-view/item-dataview.html b/src/widgets/item-view/item-dataview.html
@@ -61,6 +61,22 @@
         </div>
         <!-- right-->
         <div class="right">
+          <div if.bind="campaign.instructions.length" class="campaign-instructions wrap mb-5" id="campaign-instructions">
+            <div class="instructions-wrapper">
+              <div class="header">
+                <div class="header-left">
+                  <i class="fa fa-info-circle me-2" aria-hidden="true"></i>
+                  <span t="app:instructions">INSTRUCTIONS</span>
+                </div>
+                <div class="header-right">
+                  <a click.delegate="toggleInstructions()">
+                    <i class="fa fa-chevron-down chevron" aria-hidden="true"></i>
+                  </a>
+                </div>
+              </div>
+              <div class="infobar" innerHtml.bind="campaign.instructions"></div>
+            </div>
+          </div>
           <compose view-model="widgets/tagitem/tagitem" if.bind="hasMotivation('Tagging')"
             model.bind="{'campaign': campaign, 'recId': recId, 'motivation': 'Tagging'}">
           </compose>

diff --git a/src/widgets/item-view/item-dataview.js b/src/widgets/item-view/item-dataview.js
@@ -26,6 +26,10 @@ export class ItemDataView {
     this.metadataView = '';
   }
 
+  attached() {
+    this.updateUI();
+  }
+
   activate(params) {
     this.loc = params.loc;
     this.campaign = params.campaign;
@@ -35,6 +39,7 @@ export class ItemDataView {
     this.collectionTitle = params.collectionTitle;
     this.imageErrorCounter = 0;
     this.noImageStyle = '';
+    this.instructionsCollapsed = JSON.parse(localStorage.getItem('campaignInstructionsCollapsed')) || false;
 
     this.recId = this.record.dbId;
     this.showMedia();
@@ -57,6 +62,25 @@ export class ItemDataView {
   get isLiked() { return this.recordServices.isLiked(this.record.externalId);	}
   get campaignIsCensored() { return censoredCampaigns.includes(this.campaign.username) }
 
+  toggleInstructions() {
+    this.instructionsCollapsed = !this.instructionsCollapsed;
+    localStorage.setItem('campaignInstructionsCollapsed', JSON.stringify(this.instructionsCollapsed));
+    this.updateUI();
+  }
+
+  updateUI() {
+    const infobar = document.querySelector('.infobar');
+    const chevron = document.querySelector('.chevron');
+
+    if (this.instructionsCollapsed) {
+      infobar.classList.remove('expanded');
+      chevron.classList.remove('rotated');
+    } else {
+      infobar.classList.add('expanded');
+      chevron.classList.add('rotated');
+    }
+  }
+
   hasMotivation(name) {
     return !!this.campaign.motivation.includes(name);
   }

diff --git a/src/widgets/metadata/meta-asksa.html b/src/widgets/metadata/meta-asksa.html
@@ -9,25 +9,25 @@
           <div class="lbl" t="item:title">TITLE</div>
           <div class="val" innerHtml.bind="record.meta.title"></div>
         </li>
-        <li class="meta-description col-12" if.bind="record.meta.isRelatedTo.length">
-          <div class="lbl" t="item:description">RELATED TO</div>
-          <a class="val" href.bind="record.meta.isRelatedTo" target="_blank">${record.meta.isRelatedTo.split("/")[-2]}</a>
+        <li class="meta-description col-12" if.bind="record.meta.relatedToUri.length">
+          <div class="lbl" t="item:object">OBJECT</div>
+          <a class="val" href.bind="record.meta.relatedToUri" target="_blank">${record.meta.relatedToLabel}</a>
         </li>
         <li class="col-sm-6" if.bind="record.meta.country.length">
-          <div class="lbl">COUNTRY</div>
+          <div class="lbl" t="item:country">COUNTRY</div>
           <div class="val">${record.meta.country}</div>
         </li>
         <li class="col-sm-6" if.bind="record.meta.city.length">
-          <div class="lbl">CITY</div>
+          <div class="lbl" t="item:city">CITY</div>
           <div class="val">${record.meta.city}</div>
         </li>
         <li class="col-sm-6" if.bind="record.meta.date.length">
-          <div class="lbl">DATE</div>
+          <div class="lbl" t="item:date">DATE</div>
           <div class="val">${record.meta.date}</div>
         </li>
         <li class="col-sm-2" if.bind="record.meta.isShownAt">
           <div class="val" t="[prepend]item:see-it">
-            <a href.bind="record.meta.isShownAt" target="_blank">ASKSA</a>
+            <a href.bind="record.meta.isShownAt" target="_blank" t="item:asksa">ASKSA</a>
           </div>
         </li>
       </ul>

diff --git a/src/widgets/tagitem/tagitem.html b/src/widgets/tagitem/tagitem.html
@@ -3,10 +3,10 @@
   <div class="tag-item">
     <!-- infobar-->
     <div class="wrap">
-      <div class="heading green" t="app:tags">TAGS</div>
-      <div class="infobar" innerHtml.bind="campaign.instructions"></div>
+      <div class="heading green" t="item:tagging">TAGGING</div>
+      <div class="infobar" t="item:tagging-disclaimer"></div>
     </div>
-    <div class="wrap pt-4" repeat.for="tagType of tagTypes">
+    <div class="wrap" repeat.for="tagType of tagTypes">
       <div if.bind="tagType.length > 0" class="heading">${tagType}</div>
       <div class="searchbox" if.bind="campaign.status == 'active' && userHasAccessInCampaign()">
         <input id.bind="'annotationInput-'+$index" autocomplete="off" value.bind="tagPrefix[tagType]"

diff --git a/src/widgets/tagsub/tagsub.html b/src/widgets/tagsub/tagsub.html
@@ -7,7 +7,7 @@
       <div if.bind="campaign.username.includes('debias')" class="heading green" t="item:bias-tagging">BIAS IN THE METADATA</div>
       <div else class="heading green" t="item:sub-tagging">PROPERTY TAGGING</div>
       <!-- info-->
-      <div class="infobar" innerHtml.bind="campaign.instructions"></div>
+      <div class="infobar" t="item:sub-tagging-disclaimer"></div>
       <!-- searchbox-->
       <div class="searchbox" if.bind="campaign.status == 'active' && userHasAccessInCampaign()">
         <input

diff --git a/styles/styles.less b/styles/styles.less
@@ -8741,3 +8741,35 @@ section#nav-arrows {
     }
   }
 }
+
+.campaign-instructions {
+  .instructions-wrapper {
+    border: 1px @main-color solid;
+    border-radius: 0.5rem;
+    padding: 1rem;
+    .header {
+      background-color: white;
+      color: @main-color;
+      font-weight: bold;
+      display: flex;
+      justify-content: space-between;
+      .chevron {
+        cursor: pointer;
+        transition: transform 0.3s ease;
+        &.rotated {
+          transform: rotate(180deg);
+        }
+      }
+    }
+    .infobar {
+      transition: max-height 0.3s ease, opacity 0.3s ease;
+      max-height: 0;
+      opacity: 0;
+      overflow: hidden;
+      &.expanded {
+        max-height: fit-content;
+        opacity: 1;
+      }
+    }
+  }
+}