feat: make 'item' label in Header configurable

examples/ahiqar-arabic-karshuni-local.html

@@ -159,11 +159,12 @@
         "next_item": "Next Sheet",
         "previous_item": "Previous Sheet",
         "next_manifest": "Next Manuscript",
-        "previous_manifest": "Previous Manuscript"
+        "previous_manifest": "Previous Manuscript",
+        "item": "Sheet"
       },
     }
   });
 });
 </script>
 </body>
-</html>
+</html>

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">{{ getItemLabel() }} {{ item.n }}</span>
+          <span v-if="item">{{ getItemLabel(configStore.config) }} {{ item.n }}</span>
         </h2>
       </template>
       <template v-else>
@@ -32,7 +32,7 @@
           <span
             v-if="item"
             class="t-align-middle"
-          >{{ getItemLabel() }} {{ item.n }}</span>
+          >{{ getItemLabel(configStore.config) }} {{ item.n }}</span>
         </h1>
       </template>
     </template>
@@ -50,7 +50,9 @@ 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';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n()
 
 export interface Props {
   item: Item
@@ -63,13 +65,33 @@ withDefaults(defineProps<Props>(), {
 const configStore = useConfigStore()
 const contentStore = useContentsStore()
 
+const itemLabelKey = 'item'
+
 
 const collectionTitle = computed<string | null>(() => contentStore.collectionTitle);
-const manifestTitle = computed<string | undefined>(() => contentStore.manifest?.label  );
+const manifestTitle = computed<string | undefined>(() => contentStore.manifest?.label);
+
+
 
+function isItemLabelInConfig(config) {
+  const lang = config['lang']
+  const translations = config.translations[lang]
+  const numberKeys = Object.keys(translations).length
 
-function getItemLabel() {
-  const navButtonsLabels = getNavButtonsLabels(configStore.config)
-  return navButtonsLabels[0].split(' ')[1] 
+  if(numberKeys > 0) {
+    for (const key in translations) {
+      if(key === itemLabelKey) return true
+    }
+  }
+  return false
 }
-</script>
+
+function getItemLabel(config) {
+  const lang = config['lang']
+  if(isItemLabelInConfig(config)) {
+    return config['translations'][lang][itemLabelKey]
+  }
+  return t('item')
+}
+
+</script>

src/utils/translations.js

@@ -16,7 +16,7 @@ export function areNavButtonsLabelsInConfig(config) {
 }
 
 
-export function getNavButtonsLabels(config, navButtonsDefaultTextArray) {
+export function getNavButtonsLabels(config) {
     const lang = config['lang']
 
     if (areNavButtonsLabelsInConfig(config)) {
@@ -28,4 +28,4 @@ export function getNavButtonsLabels(config, navButtonsDefaultTextArray) {
       const t = i18n[lang]
       return [t['next_item'], t['previous_item'], t['next_manifest'], t['previous_manifest']]
     }
-}
+}