wip on #22

moved text out of vue components into l10n messages file
alpheios-project · Feb 15, 2018 · 5de0195 · 5de0195
1 parent 2db97db
commit 5de0195
Show file tree

Hide file tree

Showing 7 changed files with 317 additions and 101 deletions.
diff --git a/dist/content.js b/dist/content.js
diff --git a/src/content/content-ui-controller.js b/src/content/content-ui-controller.js
@@ -341,6 +341,7 @@ export default class ContentUIController {
           classes: {
             [this.irregularBaseFontSizeClassName]: this.irregularBaseFontSize
           },
+          l10n: this.l10n,
           notification: {
             visible: false,
             important: false,

diff --git a/src/content/vue-components/inflections.vue b/src/content/vue-components/inflections.vue
@@ -1,11 +1,11 @@
 <template>
     <div>
-        <div v-show="! isEnabled">Inflection data is unavailable.</div>
-        <div v-show="isEnabled && ! isContentAvailable">Lookup a word to show inflections...</div>
+        <div v-show="! isEnabled">{{messages.PLACEHOLDER_INFLECT_UNAVAILABLE}}</div>
+        <div v-show="isEnabled && ! isContentAvailable">{{messages.PLACEHOLDER_INFLECT}}</div>
         <div v-show="isContentAvailable">
             <h3 class="alpheios-inflections__title">{{selectedView.title}}</h3>
             <div v-show="partsOfSpeech.length > 1">
-              <label class="uk-form-label">Part of speech:</label>
+              <label class="uk-form-label">{{messages.LABEL_INFLECT_SELECT_POFS}}</label>
               <select v-model="partOfSpeechSelector" class="uk-select alpheios-inflections__view-selector">
                 <option v-for="partOfSpeech in partsOfSpeech">{{partOfSpeech}}</option>
               </select>
@@ -56,6 +56,10 @@
       locale: {
         type: String,
         required: true
+      },
+      messages: {
+        type: Object,
+        required: true
       }
     },
 
@@ -78,14 +82,14 @@
           hideEmptyCols: {
             contentHidden: true,
             text: '',
-            shownText: 'Hide empty columns',
-            hiddenText: 'Show empty columns'
+            shownText: this.messages.LABEL_INFLECT_HIDEEMPTY,
+            hiddenText: this.messages.LABEL_INFLECT_SHOWEMPTY
           },
           hideNoSuffixGroups: {
             noSuffMatchHidden: true,
             text: '',
-            shownText: 'Collapse',
-            hiddenText: 'Full Table'
+            shownText: this.messages.LABEL_INFLECT_COLLAPSE,
+            hiddenText: this.messages.LABEL_INFLECT_SHOWFULL
           }
         }
       }

diff --git a/src/content/vue-components/info.vue b/src/content/vue-components/info.vue
@@ -1,15 +1,16 @@
 <template>
   <div class="alpheios-info uk-margin">
     <div class="alpheios-info__versiontext">{{ data.manifest.name }} {{ data.manifest.version }}</div>
+    <div class="alpheios-info__currentlanguage">{{ messages.LABEL_INFO_CURRENTLANGUAGE }} {{ data.languageName }}</div>
     <div class="alpheios-info__helptext">
-      <h3>Getting Started</h3>
-      <p>Activate on a page with Latin, Ancient Greek, Arabic or Persian text.</p>
-      <p>Double-click on a word to retrieve morphology and short definitions.</p>
-      <p>Alpheios will try to detect the language of the word from the page markup. If it cannot it will use the default language (currently using <b>{{ data.languageName }}</b>). </p>
-      <p>Click the Settings wheel to change the default language, default dictionaries or to disable the popup (set UI Type to 'panel').</p>
-      <p>Use the arrow at the top of this panel to move it from the right to left of your browser window.</p>
-      <p>You can reopen this panel at any time by selecting 'Info' from the Alpheios Reading Tools option in your browser's context menu.</p>
-      <p>Deactivate Alpheios by clicking the toolbar icon or choosing 'Deactivate' from the Alpheios Reading Tools option in your browser's context menu.</p>
+      <h3>{{ messages.TEXT_INFO_GETTINGSTARTED }}</h3>
+      <p>{{ messages.TEXT_INFO_ACTIVATE }}</p>
+      <p>{{ messages.TEXT_INFO_CLICK }}</p>
+      <p>{{ messages.TEXT_INFO_LANGDETECT }}</p>
+      <p>{{ messages.TEXT_INFO_SETTINGS }}</p>
+      <p>{{ messages.TEXT_INFO_ARROW }}</p>
+      <p>{{ messages.TEXT_INFO_REOPEN }}</p>
+      <p>{{ messages.TEXT_INFO_DEACTIVATE }}</p>
     </div>
   </div>
 </template>
@@ -20,6 +21,10 @@
       data: {
         type: Object,
         required: true
+      },
+      messages: {
+        type: Object,
+        required: true
       }
     }
   }
@@ -42,7 +47,15 @@
 
   .alpheios-info .alpheios-info__versiontext {
     font-size: 0.675*$alpheios-base-font-size;
-    margin-bottom: 1em;
+  }
+
+  .alpheios-info__currentlanguage {
+    font-size: 0.675*$alpheios-base-font-size;
+    font-weight: bold;
+  }
+
+  .alpheios-info__helptext {
+    margin-top: 1em;
   }
 
 </style>
diff --git a/src/content/vue-components/panel.vue b/src/content/vue-components/panel.vue
@@ -13,54 +13,54 @@
                 <span class="alpheios-panel__header-text"
                       v-show="data.status.languageName && data.verboseMode">({{data.status.languageName}})</span>
             </div>
-            <span @click="setPosition('left')" v-show="attachToLeftVisible" title="Move Panel to Left"
+            <span @click="setPosition('left')" v-show="attachToLeftVisible" :title="data.l10n.messages.TOOLTIP_MOVE_PANEL_LEFT"
                   class="alpheios-panel__header-action-btn alpheios-panel__header-action-btn--narrow">
                 <attach-left-icon></attach-left-icon>
             </span>
-            <span @click="setPosition('right')" v-show="attachToRightVisible" title="Move Panel to Right"
+            <span @click="setPosition('right')" v-show="attachToRightVisible" :title="data.l10n.messages.TOOLTIP_MOVE_PANEL_RIGHT"
                   class="alpheios-panel__header-action-btn alpheios-panel__header-action-btn--narrow">
                 <attach-right-icon></attach-right-icon>
             </span>
-            <span @click="close" class="alpheios-panel__header-action-btn" title="Close Panel">
+            <span @click="close" class="alpheios-panel__header-action-btn" :title="data.l10n.messages.TOOLTIP_CLOSE_PANEL">
                 <close-icon></close-icon>
             </span>
         </div>
 
         <div :id="navbarID" class="alpheios-panel__nav">
             <div v-bind:class="{ active: data.tabs.info }" @click="changeTab('info')"
-                 class="alpheios-panel__nav-btn" title="Help">
+                 class="alpheios-panel__nav-btn" :title="data.l10n.messages.TOOLTIP_HELP">
                 <info-icon class="icon"></info-icon>
             </div>
 
             <div :class="{ active: data.tabs.definitions }" @click="changeTab('definitions')"
-                 class="alpheios-panel__nav-btn" title="Definitions">
+                 class="alpheios-panel__nav-btn" :title="data.l10n.messages.TOOLTIP_DEFINITIONS">
                 <definitions-icon class="icon"></definitions-icon>
             </div>
 
             <div v-bind:class="{ active: data.tabs.inflections }" @click="changeTab('inflections')"
-                 class="alpheios-panel__nav-btn" title="Inflection Tables">
+                 class="alpheios-panel__nav-btn" :title="data.l10n.messages.TOOLTIP_INFLECT">
                 <inflections-icon class="icon"></inflections-icon>
             </div>
 
             <div v-bind:class="{ active: data.tabs.grammar }" @click="changeTab('grammar')"
-              class="alpheios-panel__nav-btn alpheios-panel__nav-btn--short" title="Grammar">
+              class="alpheios-panel__nav-btn alpheios-panel__nav-btn--short" :title="data.l10n.messages.TOOLTIP_GRAMMAR">
                 <grammar-icon class="icon"></grammar-icon>
             </div>
 
             <div v-bind:class="{ active: data.tabs.options }" @click="changeTab('options')"
-                 class="alpheios-panel__nav-btn" title="Options">
+                 class="alpheios-panel__nav-btn" :title="data.l10n.messages.TOOLTIP_OPTIONS">
                 <options-icon class="icon"></options-icon>
             </div>
 
             <div v-show="data.verboseMode" v-bind:class="{ active: data.tabs.status }" @click="changeTab('status')"
-                 class="alpheios-panel__nav-btn" title="Status Messages">
+                 class="alpheios-panel__nav-btn" :title="data.l10n.messages.TOOLTIP_STATUS">
                 <status-icon class="icon"></status-icon>
             </div>
         </div>
         <div class="alpheios-panel__content">
             <div v-show="data.tabs.definitions" class="alpheios-panel__tab-panel">
                 <div v-show="data.shortDefinitions.length < 1 && data.fullDefinitions.length < 1">
-                  Lookup a word to show definitions...</div>
+                  {{data.l10n.messages.PLACEHOLDER_DEFINITIONS}}</div>
                 <div class="alpheios-panel__contentitem" v-for="definition in data.shortDefinitions">
                     <shortdef :definition="definition"></shortdef>
                 </div>
@@ -69,7 +69,7 @@
             <div v-show="inflectionsTabVisible" :id="inflectionsPanelID" class="alpheios-panel__tab-panel">
                 <inflections class="alpheios-panel-inflections"
                              :data="data.inflectionComponentData" :locale="data.settings.locale.currentValue"
-                             @contentwidth="setContentWidth">
+                             :messages="data.l10n.messages" @contentwidth="setContentWidth">
                 </inflections>
             </div>
             <div v-show="data.tabs.grammar" class="alpheios-panel__tab-panel
@@ -96,7 +96,7 @@
                   v-for="languageSetting in data.resourceSettings.lexicons"></setting>
             </div>
             <div v-show="data.tabs.info" class="alpheios-panel__tab-panel">
-                <info :data="data.infoComponentData"></info>
+                <info :data="data.infoComponentData" :messages="data.l10n.messages"></info>
             </div>
         </div>
         <div class="alpheios-panel__notifications uk-text-small" :class="notificationClasses"

diff --git a/src/content/vue-components/popup.vue b/src/content/vue-components/popup.vue
@@ -1,7 +1,7 @@
 <template>
     <div ref="popup" class="alpheios-popup auk" v-bind:class="data.classes" :style="{left: positionLeftDm, top: positionTopDm, width: widthDm, height: heightDm}"
          v-show="visible" :data-notification-visible="data.notification.visible">
-        <span class="alpheios-popup__close-btn" @click="closePopup">
+        <span class="alpheios-popup__close-btn" @click="closePopup" :title="data.l10n.messages.TOOLTIP_POPUP_CLOSE">
             <close-icon></close-icon>
         </span>
         <div class="alpheios-popup__header">
@@ -11,27 +11,27 @@
             </div>
             <div class="uk-button-group alpheios-popup__button-area">
                 <button @click="showPanelTab('inflections')" v-show="data.inflDataReady"
-                        class="uk-button uk-button-primary uk-button-small alpheios-popup__more-btn">Inflect
+                        class="uk-button uk-button-primary uk-button-small alpheios-popup__more-btn">{{data.l10n.messages.LABEL_POPUP_INFLECT}}
                 </button>
                 <button @click="showPanelTab('definitions')" v-show="data.defDataReady"
-                        class="uk-button uk-button-primary uk-button-small alpheios-popup__more-btn">Define
+                        class="uk-button uk-button-primary uk-button-small alpheios-popup__more-btn">{{data.l10n.messages.LABEL_POPUP_DEFINE}}
                 </button>
                 <button @click="showPanelTab('options')"
-                        class="uk-button uk-button-primary uk-button-small alpheios-popup__more-btn">Options
+                        class="uk-button uk-button-primary uk-button-small alpheios-popup__more-btn">{{data.l10n.messages.LABEL_POPUP_OPTIONS}}
                 </button>
             </div>
         </div>
         <div v-show="!morphDataReady"
              class="alpheios-popup__morph-cont alpheios-popup__definitions--placeholder uk-text-small">
-            No lexical data is available yet
+            {{data.l10n.messages.PLACEHOLDER_POPUP_DATA}}
         </div>
         <div v-show="morphDataReady" :id="lexicalDataContainerID" class="alpheios-popup__morph-cont uk-text-small">
             <morph :id="morphComponentID" :lexemes="lexemes" :definitions="definitions"
                    :linkedfeatures="linkedfeatures">
             </morph>
 
             <div class="alpheios-popup__morph-cont-providers" v-if="showProviders">
-                <div class="alpheios-popup__morph-cont-providers-header">Credits:</div>
+                <div class="alpheios-popup__morph-cont-providers-header">{{data.l10n.messages.LABEL_POPUP_CREDITS}}</div>
                 <div class="alpheios-popup__morph-cont-providers-source" v-for="p in data.providers">
                     {{ p.toString() }}
                 </div>
@@ -138,7 +138,7 @@
         }
       },
       providersLinkText: function() {
-        return this.data.showProviders ? 'Hide Credits' : 'Credits'
+        return this.data.showProviders ? this.data.l10n.messages.LABEL_POPUP_HIDECREDITS : this.data.l10n.messages.LABEL_POPUP_SHOWCREDITS
       },
       showProviders: function() {
         return this.data.showProviders