String formatting moved to the class constructor

Author: EkaterinaVu

examples/questionnaire/Example.vue

@@ -51,7 +51,7 @@
           <a class="f-enter-desc"
             href="#"
             v-on:click.prevent="onSendData()"
-            v-html="language.formatKey(language.pressEnter)">
+            v-html="language.pressEnter">
           </a>
         </div>
 

examples/quiz/Example.vue

@@ -49,7 +49,7 @@
             class="f-enter-desc"
             href="#"
             v-on:click.prevent="onQuizSubmit()"
-            v-html="language.formatKey(language.pressEnter)">
+            v-html="language.pressEnter">
           </a>
         </div>
         <p class="text-success" v-if="submitted && score < 4">"You scored {{ score }} out of {{ total }}. There's a lot of room for improvement."</p>

src/components/FlowForm.vue

@@ -44,7 +44,7 @@
               href="#"
               v-on:click.prevent="submit()"
               v-if="!submitted"
-              v-html="language.formatKey(language.pressEnter)">
+              v-html="language.pressEnter">
              </a>
           </slot>
         </div>

src/components/Question.vue

@@ -31,7 +31,7 @@
           <span class="f-sub" v-if="question.subtitle || question.type === QuestionType.LongText || question.multiple">
             <span v-if="question.subtitle">{{ question.subtitle }}</span>
 
-            <span class="f-help" v-if="question.type === QuestionType.LongText && !isMobile" v-html="question.helpText || language.formatKey(language.longTextHelpText)"></span>
+            <span class="f-help" v-if="question.type === QuestionType.LongText && !isMobile" v-html="question.helpText || language.longTextHelpText"></span>
 
             <span class="f-help" v-if="question.multiple">{{ question.helpText || language.multipleChoiceHelpText }}</span>
           </span>
@@ -67,7 +67,7 @@
           href="#"
           v-if="question.type !== QuestionType.LongText || !isMobile"
           v-on:click.prevent="onEnter"
-          v-html="language.formatKey(language.pressEnter)">
+          v-html="language.pressEnter">
         </a>
       </div>
 

src/models/LanguageModel.js

@@ -29,18 +29,21 @@ export default class LanguageModel {
     this.ariaMultipleChoice = 'Press :letter to select'
     this.ariaTypeAnswer = 'Type your answer here'
 
+
+
     Object.assign(this, options || {})
-  }
-   // Inserts a new CSS class into the language model string to format the :key  
-    formatKey(value) {
-      if (!value) return ''
-      let stringArr = value.toString().split(" ")
-      for (let i = 0; i < stringArr.length; i++) {
-        if (stringArr[i].slice(0,4) === ":key") {
-          stringArr[i] = '<span class="f-language-key">' + stringArr[i].substring(5, stringArr[i].length - 1) + '</span>'
-        }
+
+     // Inserts a new CSS class into the language model string to format the :key 
+    Object.keys(this).forEach(property => {
+        if (!this[property]) return ''
+        let stringArr = this[property].toString().split(" ")
+        for (let i = 0; i < stringArr.length; i++) {
+          if (stringArr[i].slice(0, 4) === ":key") {
+            stringArr[i] = '<span class="f-language-key">' + stringArr[i].substring(5, stringArr[i].length - 1) + '</span>'
+          }
       }
-      return stringArr.join(" ")
-    } 
+        this[property] = stringArr.join(" ")
+    });
+  } 
 }