Implemented formatString method in LanguageModel class

Author: EkaterinaVu

examples/questionnaire/Example.vue

@@ -51,7 +51,7 @@
           <a class="f-enter-desc"
             href="#"
             v-on:click.prevent="onSendData()"
-            v-html="language.pressEnter">
+            v-html="language.formatString(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.pressEnter">
+            v-html="language.formatString(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/assets/css/common.css

@@ -176,7 +176,7 @@ svg.logo {
   margin-bottom: 20px;
 }
 
-.f-language-key {
+.f-uppercase {
   text-transform: uppercase;
 }
 
@@ -402,7 +402,7 @@ span.f-sub {
   margin-top: 6px;
 }
 
-span.f-sub span:not(.f-language-key) {
+span.f-sub span:not(.f-uppercase) {
   margin-right: .4rem;
 }
 

src/components/FlowForm.vue

@@ -44,7 +44,7 @@
               href="#"
               v-on:click.prevent="submit()"
               v-if="!submitted"
-              v-html="language.pressEnter">
+              v-html="language.formatString(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.longTextHelpText"></span>
+            <span class="f-help" v-if="question.type === QuestionType.LongText && !isMobile" v-html="question.helpText || language.formatString(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.pressEnter">
+          v-html="language.formatString(language.pressEnter)">
         </a>
       </div>
 

src/models/LanguageModel.js

@@ -8,14 +8,16 @@
 
 export default class LanguageModel {
   constructor(options) {
+    this.enterKey = 'Enter', 
+    this.shiftKey = 'Shift',
     this.ok = 'OK'
     this.continue = 'Continue'
-    this.pressEnter = 'Press :key(Enter)';
+    this.pressEnter = 'Press :enterKey';
     this.multipleChoiceHelpText = 'Choose as many as you like'
     this.otherPrompt = 'Other'
     this.placeholder = 'Type your answer here...'
     this.submitText = 'Submit'
-    this.longTextHelpText = ':key(Shift) + :key(Enter) to make a line break.'
+    this.longTextHelpText = ':shiftKey + :enterKey to make a line break.'
     this.prev = 'Prev'
     this.next = 'Next'
     this.percentCompleted = ':percent% completed'
@@ -32,18 +34,19 @@ export default class LanguageModel {
 
 
     Object.assign(this, options || {})
-
-     // 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>'
-          }
-      }
-        this[property] = stringArr.join(" ")
-    });
   } 
+  /**
+   * Inserts a new CSS class into the language model string to format the :string
+   * Use it in the component v-html directive: v-html="language.formatString(language.languageString)"
+   */
+  formatString(string) {
+    return string.replace(/:(\w+)/g, (match, word) => {
+      if (this[word]) {
+        return '<span class="f-uppercase">' + this[word] + '</span>'
+      }
+      return match
+    })
+  }
 }
 
+