fix left and right mobile button labels (responsive, labels, multilingual)

jamesmisson · jamesmisson · commit eed7477c3447 · 2025-03-14T15:06:32.000Z
diff --git a/src/content-handlers/iiif/BaseConfig.ts b/src/content-handlers/iiif/BaseConfig.ts
@@ -208,6 +208,8 @@ export type FooterPanelContent = {
   moreInfo: string;
   openLeftPanel: string;
   closeLeftPanel: string;
+  openRightPanel: string;
+  closeRightPanel: string;
   open: string;
   share: string;
 };
diff --git a/src/content-handlers/iiif/extensions/uv-aleph-extension/config/config.json b/src/content-handlers/iiif/extensions/uv-aleph-extension/config/config.json
@@ -112,6 +112,8 @@
         "moreInfo": "More Information",
         "openLeftPanel": "$openLeftPanel",
         "closeLeftPanel": "$closeLeftPanel",
+        "openRightPanel": "$openRightPanel",
+        "closeRightPanel": "$closeRightPanel",
         "open": "Open",
         "share": "Share"
       }
diff --git a/src/content-handlers/iiif/extensions/uv-av-extension/config/config.json b/src/content-handlers/iiif/extensions/uv-av-extension/config/config.json
@@ -140,7 +140,9 @@
         "open": "$open",
         "share": "$share",
         "openLeftPanel": "$openLeftPanel",
-        "closeLeftPanel": "$closeLeftPanel"
+        "closeLeftPanel": "$closeLeftPanel",
+        "openRightPanel": "$openRightPanel",
+        "closeRightPanel": "$closeRightPanel"
       }
     },
     "genericDialogue": {
diff --git a/src/content-handlers/iiif/extensions/uv-default-extension/config/config.json b/src/content-handlers/iiif/extensions/uv-default-extension/config/config.json
@@ -136,7 +136,9 @@
         "open": "$open",
         "share": "$share",
         "openLeftPanel": "$openLeftPanel",
-        "closeLeftPanel": "$closeLeftPanel"
+        "closeLeftPanel": "$closeLeftPanel",
+        "openRightPanel": "$openRightPanel",
+        "closeRightPanel": "$closeRightPanel"
       }
     },
     "genericDialogue": {
diff --git a/src/content-handlers/iiif/extensions/uv-ebook-extension/config/config.json b/src/content-handlers/iiif/extensions/uv-ebook-extension/config/config.json
@@ -109,7 +109,9 @@
         "open": "$open",
         "share": "$share",
         "openLeftPanel": "$openLeftPanel",
-        "closeLeftPanel": "$closeLeftPanel"
+        "closeLeftPanel": "$closeLeftPanel",
+        "openRightPanel": "$openRightPanel",
+        "closeRightPanel": "$closeRightPanel"
       }
     },
     "genericDialogue": {
diff --git a/src/content-handlers/iiif/extensions/uv-mediaelement-extension/config/config.json b/src/content-handlers/iiif/extensions/uv-mediaelement-extension/config/config.json
@@ -110,7 +110,9 @@
         "open": "$open",
         "share": "$share",
         "openLeftPanel": "$openLeftPanel",
-        "closeLeftPanel": "$closeLeftPanel"
+        "closeLeftPanel": "$closeLeftPanel",
+        "openRightPanel": "$openRightPanel",
+        "closeRightPanel": "$closeRightPanel"
       }
     },
     "genericDialogue": {
diff --git a/src/content-handlers/iiif/extensions/uv-model-viewer-extension/config/config.json b/src/content-handlers/iiif/extensions/uv-model-viewer-extension/config/config.json
@@ -123,7 +123,9 @@
         "open": "$open",
         "share": "$share",
         "openLeftPanel": "$openLeftPanel",
-        "closeLeftPanel": "$closeLeftPanel"
+        "closeLeftPanel": "$closeLeftPanel",
+        "openRightPanel": "$openRightPanel",
+        "closeRightPanel": "$closeRightPanel"
       }
     },
     "genericDialogue": {
diff --git a/src/content-handlers/iiif/extensions/uv-openseadragon-extension/config/Config.ts b/src/content-handlers/iiif/extensions/uv-openseadragon-extension/config/Config.ts
@@ -198,6 +198,8 @@ type MobileFooterPanelContent = FooterPanelContent & {
   moreInfo: string;
   openLeftPanel: string;
   closeLeftPanel: string;
+  openRightPanel: string;
+  closeRightPanel: string;
   zoomIn: string;
   zoomOut: string;
 };
diff --git a/src/content-handlers/iiif/extensions/uv-openseadragon-extension/config/config.json b/src/content-handlers/iiif/extensions/uv-openseadragon-extension/config/config.json
@@ -189,7 +189,9 @@
         "open": "$open",
         "share": "$share",
         "openLeftPanel": "$openLeftPanel",
-        "closeLeftPanel": "$closeLeftPanel"
+        "closeLeftPanel": "$closeLeftPanel",
+        "openRightPanel": "$openRightPanel",
+        "closeRightPanel": "$closeRightPanel"
       }
     },
     "genericDialogue": {
@@ -430,7 +432,9 @@
         "open": "$open",
         "share": "$share",
         "openLeftPanel": "$openLeftPanel",
-        "closeLeftPanel": "$closeLeftPanel"
+        "closeLeftPanel": "$closeLeftPanel",
+        "openRightPanel": "$openRightPanel",
+        "closeRightPanel": "$closeRightPanel"
       }
     },
     "settingsDialogue": {
@@ -546,7 +550,9 @@
         "open": "$open",
         "share": "$share",
         "openLeftPanel": "$openLeftPanel",
-        "closeLeftPanel": "$closeLeftPanel"
+        "closeLeftPanel": "$closeLeftPanel",
+        "openRightPanel": "$openRightPanel",
+        "closeRightPanel": "$closeRightPanel"
       }
     },
     "restrictedDialogue": {
diff --git a/src/content-handlers/iiif/extensions/uv-pdf-extension/config/config.json b/src/content-handlers/iiif/extensions/uv-pdf-extension/config/config.json
@@ -85,7 +85,9 @@
         "open": "$open",
         "share": "$share",
         "openLeftPanel": "$openLeftPanel",
-        "closeLeftPanel": "$closeLeftPanel"
+        "closeLeftPanel": "$closeLeftPanel",
+        "openRightPanel": "$openRightPanel",
+        "closeRightPanel": "$closeRightPanel"
       }
     },
     "genericDialogue": {
diff --git a/src/content-handlers/iiif/modules/uv-shared-module/BaseExpandPanel.ts b/src/content-handlers/iiif/modules/uv-shared-module/BaseExpandPanel.ts
@@ -46,7 +46,6 @@ export class BaseExpandPanel<T extends ExpandPanel> extends BaseView<T> {
     this.$collapseButton = $(
       '<button role="button" class="collapseButton" tabindex="0"></button>'
     );
-    this.$collapseButton.prop("title", this.content.collapse);
     this.$top.append(this.$collapseButton);
 
     this.$closed = $('<div class="closed"></div>');
diff --git a/src/content-handlers/iiif/modules/uv-shared-module/FooterPanel.ts b/src/content-handlers/iiif/modules/uv-shared-module/FooterPanel.ts
@@ -120,21 +120,24 @@ export class FooterPanel<
     this.$mainOptions.append(this.$fullScreenBtn);
 
     this.$moreInfoButton = $(`
-      <button class="moreInfo btn imageBtn" title="${this.content.moreInfo}">
+      <button class="moreInfo btn imageBtn" title="${$('.mainPanel.rightPanelOpen').length !==0 ? this.content.closeRightPanel : this.content.openRightPanel}">
         <i class="uv-icon uv-icon-more-info" aria-hidden="true"></i>
-        <span class="sr-only">${this.content.moreInfo}</span>
+        <span class="sr-only">${$('.mainPanel.rightPanelOpen').length !==0 ? this.content.closeRightPanel : this.content.openRightPanel}</span>
       </button>
     `);
     this.$rightOptions.append(this.$moreInfoButton);
 
     this.$toggleLeftPanelButton = $(`
-      <button class="toggleLeftPanelButton btn imageBtn" title="${this.content.openLeftPanel}">
+      <button class="toggleLeftPanelButton btn imageBtn" title="${$('.mainPanel.leftPanelOpen').length !==0 ? this.content.closeLeftPanel : this.content.openLeftPanel}">
         <i class="uv-icon uv-icon-toggle-left-panel" aria-hidden="true"></i>
-        <span class="sr-only">${this.content.openLeftPanel}</span>
+        <span class="sr-only">${$('.mainPanel.leftPanelOpen').length !==0 ? this.content.closeLeftPanel : this.content.openLeftPanel}</span>
       </button>
     `);
     this.$leftOptions.append(this.$toggleLeftPanelButton);
 
+    if ($('.leftPanel').css('display') === 'none') {
+      this.$toggleLeftPanelButton.hide();
+    }
 
     this.$openButton.onPressed(() => {
       this.extensionHost.publish(IIIFEvents.OPEN);
@@ -174,18 +177,23 @@ export class FooterPanel<
         IIIFEvents.TOGGLE_RIGHT_PANEL,
         this.$moreInfoButton
       );
+      const newLabel = $('.mainPanel.rightPanelOpen').length !==0 ? this.content.closeRightPanel : this.content.openRightPanel
+      this.$moreInfoButton.attr("title", newLabel);
+      this.$moreInfoButton.find('.sr-only').text(newLabel);
     });
 
     this.$toggleLeftPanelButton.onPressed(() => {
-      console.log(this.extension.getSettings().leftPanelOpen);
       this.extensionHost.publish(
         IIIFEvents.TOGGLE_LEFT_PANEL,
         this.$moreInfoButton
       );
-      console.log(this.extension.getSettings().leftPanelOpen);
-      this.$toggleLeftPanelButton.attr("title", this.extension.getSettings().leftPanelOpen ? this.content.openLeftPanel : this.content.closeLeftPanel);
+      const newLabel = $('.mainPanel.leftPanelOpen').length !==0 ? this.content.closeLeftPanel : this.content.openLeftPanel
+      this.$toggleLeftPanelButton.attr("title", newLabel);
+      this.$toggleLeftPanelButton.find('.sr-only').text(newLabel);
     });
 
+
+
     this.onAccessibleClick(
       this.$fullScreenBtn,
       (e) => {
diff --git a/src/content-handlers/iiif/modules/uv-shared-module/LeftPanel.ts b/src/content-handlers/iiif/modules/uv-shared-module/LeftPanel.ts
@@ -82,6 +82,7 @@ export class LeftPanel<
     }
 
     super.toggle(autoToggled);
+    
   }
 
   expandFull(): void {
diff --git a/src/locales/cy-GB.json b/src/locales/cy-GB.json
@@ -42,8 +42,10 @@
   "$feedback": "Adborth",
   "$fullScreen": "Sgrin lawn",
   "$moreInfo": "Mwy o Wybodaeth",
-  "$openLeftPanel": "Agor panel chwith",
-  "$closeLeftPanel": "Cau'r panel chwith",
+  "$openLeftPanel": "Agor panel llywio",
+  "$closeLeftPanel": "Cau'r panel llywio",
+  "$openRightPanel": "Agor Mwy o Wybodaeth",
+  "$closeRightPanel": "Cau'r Mwy o Wybodaeth",
   "$open": "Agor",
   "$share": "Rhannu",
   "$emptyValue": "rhowch rif",
diff --git a/src/locales/en-GB.json b/src/locales/en-GB.json
@@ -42,8 +42,10 @@
   "$feedback": "Feedback",
   "$fullScreen": "Full Screen",
   "$moreInfo": "More Information",
-  "$openLeftPanel": "Open Left Panel",
-  "$closeLeftPanel": "Close Left Panel",
+  "$openLeftPanel": "Open Navigation Panel",
+  "$closeLeftPanel": "Close Navigation Panel",
+  "$openRightPanel": "Open More Information",
+  "$closeRightPanel": "Close More Information",
   "$open": "Open",
   "$share": "Share",
   "$emptyValue": "please enter a value.",
diff --git a/src/locales/fr-FR.json b/src/locales/fr-FR.json
@@ -42,8 +42,10 @@
   "$feedback": "Commentaire",
   "$fullScreen": "Affichage en plein écran",
   "$moreInfo": "Informations",
-  "$openLeftPanel": "Ouvrir le panneau à gauche",
-  "$closeLeftPanel": "Fermer le panneau à gauche",
+  "$openLeftPanel": "Ouvrir Informations",
+  "$closeLeftPanel": "Fermer Informations",
+  "$openRightPanel": "Ouvrir le panneau de navigation",
+  "$closeRightPanel": "Fermer le panneau de navigation",
   "$open": "Ouvrir",
   "$share": "Partager",
   "$emptyValue": "veuillez saisir une valeur.",
diff --git a/src/locales/pl-PL.json b/src/locales/pl-PL.json
@@ -42,8 +42,10 @@
   "$feedback": "Feedback",
   "$fullScreen": "Pełny ekran",
   "$moreInfo": "Więcej informacji",
-  "$openLeftPanel": "Otwórz lewy panel",
-  "$closeLeftPanel": "Zamknij lewy panel",
+  "$openLeftPanel": "Otwórz menu nawigacji",
+  "$closeLeftPanel": "Zamknij menu nawigacji",
+  "$openRightPanel": "Otwórz więcej informacji",
+  "$closeRightPanel": "Zamknij więcej informacji",
   "$open": "Otwórz",
   "$share": "Udostępnij",
   "$emptyValue": "proszę wprowadzić wartość.",
diff --git a/src/locales/sv-SE.json b/src/locales/sv-SE.json
@@ -42,8 +42,10 @@
   "$feedback": "Feedback",
   "$fullScreen": "Helskärm",
   "$moreInfo": "Mer information",
-  "$openLeftPanel": "Öppna vänster panel",
-  "$closeLeftPanel": "Stäng vänster panel",
+  "$openLeftPanel": "Öppna navigationspanel",
+  "$closeLeftPanel": "Stäng navigationspanel",
+  "$openRightPanel": "Öppna mer information",
+  "$closeRightPanel": "Stäng mer information",
   "$open": "Öppna",
   "$share": "Dela",
   "$emptyValue": "ange ett värde.",

Original file line number	Diff line number	Diff line change
`@@ -112,6 +112,8 @@`
`112`	`112`	`"moreInfo": "More Information",`
`113`	`113`	`"openLeftPanel": "$openLeftPanel",`
`114`	`114`	`"closeLeftPanel": "$closeLeftPanel",`
	`115`	`+ "openRightPanel": "$openRightPanel",`
	`116`	`+ "closeRightPanel": "$closeRightPanel",`
`115`	`117`	`"open": "Open",`
`116`	`118`	`"share": "Share"`
`117`	`119`	`}`