Feat Nav buttons text configurable + add tests

examples/ahiqar-arabic-karshuni-local.html

@@ -152,8 +152,13 @@
     ],
     "translations": {
       "en": {
-        "contents_and_metadata": "Contents & Metadata"
-      }
+        "contents_and_metadata": "Contents & Metadata",
+        "next_item": "Next Sheet",
+        "previous_item": "Previous Sheet",
+        "next_manifest": "Next Manuscript",
+        "previous_manifest": "Previous Manuscript"
+      },
+
     }
   });
 });

examples/gfl-local.html

@@ -162,7 +162,14 @@
         }
       ],
       translations: {
-        Edition_license: 'Editionslizenz'
+        de: {
+          Edition_license: 'Editionslizenz',
+          next_item : "Nächste Seite",
+          previous_item: "Vorherige Seite",
+          next_manifest: "Nächstes Dokument",
+          previous_manifest: "Vorheriges Dokument"
+        }
+
       }
     });
 });

src/components/header/NavBar.vue

@@ -29,10 +29,11 @@ import { useI18n } from 'vue-i18n';
 import { useConfigStore } from '@/stores/config';
 import { useContentsStore } from '@/stores/contents';
 import BaseButton from '@/components/base/BaseButton.vue';
+import { getNavButtonsLabels } from '@/utils/translations'
 
 const configStore = useConfigStore();
 const contentStore = useContentsStore();
-const { t } = useI18n();
+
 
 const manifest = computed<Manifest>(() => contentStore.manifest);
 const manifests = computed<Manifest[]>(() => contentStore.manifests);
@@ -48,6 +49,8 @@ const hasPrev = computed<boolean>(() => {
 
   return true;
 });
+
+
 const hasNext = computed<boolean>(() => {
   const nextIndex = itemIndex.value + 1;
   if (nextIndex > manifest.value.sequence.length - 1) {
@@ -57,16 +60,19 @@ const hasNext = computed<boolean>(() => {
   }
   return true;
 });
-const labels = computed<Labels>(() => configStore.config.labels || {
-  manifest: 'manifest',
-  item: 'item',
-});
-const nextButtonLabel = computed<string>(() => (itemIndex.value === manifest.value.sequence.length - 1
-  ? `${t('next')} ${t(labels.value.manifest ? labels.value.manifest : 'Manuscript')}`
-  : `${t('next')} ${t(labels.value.item)}`));
+
+
+const [nextPageLabel, previousPageLabel, nextDocumentLabel, previousDocumentLabel]: string[] = getNavButtonsLabels(configStore.config)
+
+const nextButtonLabel = computed<string>(() => ( 
+itemIndex.value === manifest.value.sequence.length - 1
+  ? `${nextDocumentLabel}`
+  : `${nextPageLabel}`));
+
+
 const prevButtonLabel = computed<string>(() => (itemIndex.value === 0
-  ? `${t('prev')} ${t(labels.value.manifest ? labels.value.manifest : 'Manuscript')}`
-  : `${t('prev')} ${t(labels.value.item)}`));
+  ? `${previousDocumentLabel}`
+  : `${previousPageLabel}`));
 
 function prev() {
   const prevIndex = itemIndex.value - 1;

src/components/header/TitleBar.vue

@@ -18,7 +18,7 @@
             class="t-px-2 text-gray-500 dark:text-gray-300"
             name="chevronRight"
           />
-          <span v-if="item">{{ labels.item }} {{ item.n }}</span>
+          <span v-if="item">{{ getItemLabel() }} {{ item.n }}</span>
         </h2>
       </template>
       <template v-else>
@@ -32,7 +32,7 @@
           <span
             v-if="item"
             class="t-align-middle"
-          >{{ labels.item }} {{ item.n }}</span>
+          >{{ getItemLabel() }} {{ item.n }}</span>
         </h1>
       </template>
     </template>
@@ -50,7 +50,7 @@ import { computed } from 'vue';
 import { useConfigStore } from '@/stores/config';
 import { useContentsStore } from '@/stores/contents'
 import BaseIcon from '@/components/base/BaseIcon.vue';
-
+import { getNavButtonsLabels } from '@/utils/translations';
 
 export interface Props {
   item: Item
@@ -63,10 +63,13 @@ withDefaults(defineProps<Props>(), {
 const configStore = useConfigStore()
 const contentStore = useContentsStore()
 
+
 const collectionTitle = computed<string | null>(() => contentStore.collectionTitle);
 const manifestTitle = computed<string | undefined>(() => contentStore.manifest?.label  );
-const labels = computed<Labels>(() => configStore.config.labels || {
-  manifest: 'manifest',
-  item: 'item',
-});
+
+
+function getItemLabel() {
+  const navButtonsLabels = getNavButtonsLabels(configStore.config)
+  return navButtonsLabels[0].split(' ')[1] 
+}
 </script>

src/i18n/de/index.js

@@ -59,11 +59,9 @@ export default {
   Letter: 'Brief',
   License: 'Lizenz',
   Location: 'Aktueller Aufbewahrungsort',
-  Manuscript: 'Manuskript',
   metadata: 'Metadaten',
   Motif: 'Motive',
   search_hit_list: 'Trefferanzeige',
-  next: 'Nächste',
   no_annotations_in_view: 'Die aktuelle Ansicht enthält keine Annotationen.',
   no_comments_in_view: 'Die aktuelle Ansicht enthält keine Kommentare',
   no_entrypoint_available: 'Keine URL zum Einstieg gefunden. Bitte überprüfen Sie Ihre Konfiguration.',
@@ -74,11 +72,14 @@ export default {
   zoom_in: 'Vergrössern',
   zoom_out: 'Verkleinern',
   'Place of origin': 'Herkunftsort',
-  prev: 'Vorherige',
   project_info: 'Projekt Informationen',
   reset: 'Zurücksetzen',
   search: 'Suche',
-  Sheet: 'Seite',
+  item: 'Seite',
+  next_item: 'Nächste Seite',
+  previous_item: 'Vorherige Seite',
+  next_manifest: 'Nächstes Dokument',
+  previous_manifest: 'Vorheriges Dokument',
   show: 'Zeige',
   show_hide_panels: 'Panels ein-/ausblenden',
   tabs: 'Reiter',
@@ -104,7 +105,6 @@ export default {
   server_error: 'Server Fehler',
   other: 'Sonstiges',
   subtitle: 'Untertitel',
-  manifest: 'Manifest',
   more_annotations: 'Weitere',
   undefined_role: 'Undefinierte Rolle',
   not_found: 'Nicht gefunden',

src/i18n/en/index.js

@@ -65,7 +65,10 @@ export default {
   metadata: 'Metadata',
   Motif: 'Motifs',
   search_hit_list: 'Search hit list',
-  next: 'Next',
+  next_item: 'Next Item',
+  previous_item: 'Previous Item',
+  next_manifest: 'Next Manifest',
+  previous_manifest: 'Previous Manifest',
   no_annotations_in_view: 'The current view has no annotations to display.',
   no_comments_in_view:
     'The current view does not contain any comments to display',
@@ -78,11 +81,11 @@ export default {
   zoom_in: 'Zoom in',
   zoom_out: 'Zoom out',
   'Place of origin': 'Place of origin',
-  prev: 'Previous',
   project_info: 'Project Info',
   reset: 'Reset',
   search: 'Search',
-  Sheet: 'Sheet',
+  item: 'Item',
+  sheet: 'Sheet',
   show: 'Show',
   show_hide_panels: 'Show/Hide Panels',
   tabs: 'Tabs',
@@ -108,7 +111,6 @@ export default {
   server_error: 'Server error',
   other: 'Other',
   subtitle: 'Subtitle',
-  manifest: 'Manifest',
   also_selected: 'Also selected',
   undefined_role: 'Undefined role',
   not_found: 'Not found',

src/utils/translations.js

@@ -0,0 +1,31 @@
+
+import i18n from '@/i18n'
+
+// variables are named according to the general concept of ie (item = sheet, item);  (manifest = document, manuscript)
+const navButtonsDefaultTextArray = ['next_item', 'previous_item', 'next_manifest', 'previous_manifest']
+
+export function areNavButtonsLabelsInConfig(config) {
+    const lang = config['lang']
+    const translations = config.translations[lang]
+
+    for (let i = 0; i < navButtonsDefaultTextArray.length; i++) {
+      if(!(navButtonsDefaultTextArray[i] in translations)) return false
+    }
+
+    return true
+}
+
+
+export function getNavButtonsLabels(config, navButtonsDefaultTextArray) {
+    const lang = config['lang']
+
+    if (areNavButtonsLabelsInConfig(config)) {
+      const translations = config.translations[lang]
+      return [translations['next_item'], translations['previous_item'], translations['next_manifest'], translations['previous_manifest']]
+    }
+    else {
+      // the following way of accessing translations (i.e next_item) is on square brackets, because we use 18n on a js file and not a vue component
+      const t = i18n[lang]
+      return [t['next_item'], t['previous_item'], t['next_manifest'], t['previous_manifest']]
+    }
+}

tests/cypress/e2e/content.cy.js

@@ -130,7 +130,7 @@ describe('Content - Multiple Tabs', () => {
     // Decreasing font size
     cy
       .get(selectors.panel3)
-      .get('.actions>div:first-child button[title="Decrease"]')
+      .find('.actions>div:first-child button[title="Decrease"]')
       .click();
 
     cy.get('#text-content div')
@@ -142,7 +142,7 @@ describe('Content - Multiple Tabs', () => {
     // Increasing font size
     cy
       .get(selectors.panel3)
-      .get('.actions>div:first-child button[title="Increase"]')
+      .find('.actions>div:first-child button[title="Increase"]')
       .click() // 18px
       .click() // 20px
       .click() // 22px
@@ -160,7 +160,7 @@ describe('Content - Multiple Tabs', () => {
     // Increasing font size
     cy
       .get(selectors.panel3)
-      .get('.actions>div:first-child button[title="Decrease"]')
+      .find('.actions>div:first-child button[title="Decrease"]')
       .click() // 14px
       .should('be.disabled');
 

tests/cypress/e2e/header.cy.js

@@ -99,3 +99,4 @@ describe('Header - Item and Manifest changing', () => {
       .should('include', 'tido=m7_i1');
   });
 });
+

tests/cypress/e2e/translations.cy.js

@@ -0,0 +1,38 @@
+
+import { commonSelectors, ahiqarSelectors, gflSelectors } from '../support/globals';
+
+const selectors = {
+    ...commonSelectors,
+    ...ahiqarSelectors,
+  }
+
+describe('Translations', () => {
+    describe('Header Nav buttons text configurable', () => {
+
+        it('should show the nav buttons text in german', () => {
+           /// GFL Projekt
+
+          cy.visit('/gfl-local.html?tido=i0')
+            .get(selectors.nextButton)
+            .contains('Nächste Seite')
+
+            .get(selectors.prevButton)
+            .contains('Vorheriges Dokument')
+
+          cy.visit('/gfl-local.html?tido=i1')
+            .get(selectors.nextButton)
+            .contains('Nächstes Dokument')
+
+            .get(selectors.prevButton)
+            .contains('Vorherige Seite')
+         })
+      })
+
+        it('should show the nav buttons text in english', () => {
+          cy.visit('/ahiqar-arabic-karshuni-local.html?tido=m0_i0')
+             .get(selectors.nextButton)
+             .contains('Next Sheet')
+            .get(selectors.prevButton)
+            .contains('Previous Manuscript')
+        })
+  })

tests/cypress/support/globals.js

@@ -17,4 +17,15 @@ export default {
   },
   ahiqarApiBaseUrl: 'http://localhost:8181/ahiqar',
   gflApiBaseUrl: 'http://localhost:8181/gfl',
+  ahiqarSelectors: {
+    list: '.panels-wrapper > .panel:nth-child(4) div[role="tablist"] .annotations-list',
+    listItem: '.panels-wrapper > .panel:nth-child(4) [role="tablist"] .annotations-list .item',
+    listOfSecondTab: '.panels-wrapper > .panel:nth-child(4) [role="tabpanel"]:nth-child(2) .annotations-list',
+    tab: '.panels-wrapper > .panel:nth-child(4) [role="tablist"] [data-pc-section="nav"] [data-pc-name="tabpanel"]',
+    text: '.panels-wrapper > .panel:nth-child(3) #text-content',
+    annotationPanelActionCheckbox: '.panel-header .actions > div:first-child #panel-check-action',
+  },
+  gflSelectors: {
+    listItem: '.panels-wrapper > .panel:nth-child(3) [role="tablist"] .annotations-list .item',
+  }
 };