Added language model string modifier

Author: EkaterinaVu

examples/questionnaire/Example.vue

@@ -46,12 +46,13 @@
             v-on:click.prevent="onSendData()"
             aria-label="Press to submit"
           >
-              <span>{{ language.submitText }}</span>
+            <span>{{ language.submitText }}</span>
           </button>
           <a class="f-enter-desc"
             href="#"
-            v-on:click.prevent="onSendData()">
-           {{ language.pressEnter }}</a>
+            v-on:click.prevent="onSendData()"
+            v-html="insertClass(language.pressEnter)">
+          </a>
         </div>
 
         <p class="text-success" v-if="submitted">Submitted succesfully.</p>
@@ -289,8 +290,22 @@
         })
 
         return data
+      },
+
+      /**
+       * Inserts new class into the language model string 
+       */
+      insertClass(value) {
+        if (!value) return ''
+        let stringArr  = value.toString().split(" ")
+        for (let i=0; i < stringArr.length; i++){
+          if (stringArr[i][0]=== ":" && stringArr[i].length > 1){
+            stringArr[i] = '<span class="f-language-key">' + stringArr[i].substring(1) + '</span>'
+          }
+        }
+        return stringArr.join(" ")
       }
-    }
+    },
   }
 </script>
 

examples/quiz/Example.vue

@@ -48,8 +48,9 @@
           <a 
             class="f-enter-desc"
             href="#"
-            v-on:click.prevent="onQuizSubmit()">
-            {{ language.pressEnter }}</a>
+            v-on:click.prevent="onQuizSubmit()"
+            v-html="insertClass(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>
         <p class="text-success" v-else-if="submitted && score < 7">"You scored {{ score }} out of {{ total }}. Not bad at all!"</p>
@@ -330,8 +331,22 @@
         
         this.submitted = true
         this.calculateScore()
+      },
+
+      /**
+       * Inserts new class into the language model string 
+       */
+      insertClass(value) {
+        if (!value) return ''
+        let stringArr  = value.toString().split(" ")
+        for (let i=0; i < stringArr.length; i++){
+          if (stringArr[i][0]=== ":" && stringArr[i].length > 1){
+            stringArr[i] = '<span class="f-language-key">' + stringArr[i].substring(1) + '</span>'
+          }
+        }
+        return stringArr.join(" ")
       }
-    }
+    },
   }
 </script>
 

src/assets/css/common.css

@@ -176,6 +176,10 @@ svg.logo {
   margin-bottom: 20px;
 }
 
+.f-language-key {
+  text-transform: uppercase;
+}
+
 /*v-form*/
 .v-form {
   margin-top: 26vh;

src/components/FlowForm.vue

@@ -43,8 +43,9 @@
               class="f-enter-desc"
               href="#"
               v-on:click.prevent="submit()"
-              v-if="!submitted">
-             {{ language.pressEnter }}</a>
+              v-if="!submitted"
+              v-html="insertClass(language.pressEnter)">
+             </a>
           </slot>
         </div>
       </div>
@@ -466,7 +467,20 @@
        */
       blurFocus() {
         document.activeElement && document.activeElement.blur && document.activeElement.blur()
-      }
+      },
+      /**
+       * Inserts new class into the language model string 
+       */
+      insertClass(value) {
+        if (!value) return ''
+        let stringArr  = value.toString().split(" ")
+        for (let i=0; i < stringArr.length; i++){
+          if (stringArr[i][0] === ":" && stringArr[i].length > 1){
+            stringArr[i] = '<span class="f-language-key">' + stringArr[i].substring(1) + '</span>'
+          }
+        }
+        return stringArr.join(" ")
+      },
     }
   }
 </script>

src/components/Question.vue

@@ -66,8 +66,9 @@
           class="f-enter-desc"
           href="#"
           v-if="question.type !== QuestionType.LongText || !isMobile"
-          v-on:click.prevent="onEnter">
-          {{ language.pressEnter }}</a>
+          v-on:click.prevent="onEnter"
+          v-html="insertClass(language.pressEnter)">
+        </a>
       </div>
 
       <div v-if="showInvalid()" class="f-invalid" role="alert" aria-live="assertive">{{ language.invalidPrompt }}</div>
@@ -223,6 +224,19 @@
         }
 
         return q.showInvalid()
+      },
+      /**
+       * Inserts new class into the language model string 
+       */
+      insertClass(value) {
+        if (!value) return ''
+        let stringArr  = value.toString().split(" ")
+        for (let i=0; i < stringArr.length; i++){
+          if (stringArr[i][0] === ":" && stringArr[i].length > 1){
+            stringArr[i] = '<span class="f-language-key">' + stringArr[i].substring(1) + '</span>'
+          }
+        }
+        return stringArr.join(" ")
       }
     },
     computed: {

src/models/LanguageModel.js

@@ -10,7 +10,7 @@ export default class LanguageModel {
   constructor(options) {
     this.ok = 'OK'
     this.continue = 'Continue'
-    this.pressEnter = 'Press ENTER'
+    this.pressEnter = 'Press :enter'
     this.multipleChoiceHelpText = 'Choose as many as you like'
     this.otherPrompt = 'Other'
     this.placeholder = 'Type your answer here...'