Merge pull request #105 from ditdot-dev/insert-class

Insert class

Author: phre1

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="language.formatString(language.pressEnter)">
+          </a>
         </div>
 
         <p class="text-success" v-if="submitted">Submitted succesfully.</p>
@@ -291,7 +292,7 @@
 
         return data
       }
-    }
+    },
   }
 </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="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>
         <p class="text-success" v-else-if="submitted && score < 7">"You scored {{ score }} out of {{ total }}. Not bad at all!"</p>
@@ -331,7 +332,7 @@
         this.submitted = true
         this.calculateScore()
       }
-    }
+    },
   }
 </script>
 

src/assets/css/common.css

@@ -176,6 +176,10 @@ svg.logo {
   margin-bottom: 20px;
 }
 
+.f-uppercase {
+  text-transform: uppercase;
+}
+
 /*v-form*/
 .v-form {
   margin-top: 26vh;
@@ -399,7 +403,7 @@ span.f-sub {
   margin-top: 6px;
 }
 
-span.f-sub span{
+span.f-sub span:not(.f-uppercase) {
   margin-right: .4rem;
 }
 

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="language.formatString(language.pressEnter)">
+             </a>
           </slot>
         </div>
       </div>
@@ -466,7 +467,7 @@
        */
       blurFocus() {
         document.activeElement && document.activeElement.blur && document.activeElement.blur()
-      }
+      },
     }
   }
 </script>

src/components/Question.vue

@@ -31,7 +31,7 @@
           <span class="f-sub" v-if="question.subtitle || question.type === QuestionType.LongText || question.type === QuestionType.MultipleChoice">
             <span v-if="question.subtitle">{{ question.subtitle }}</span>
 
-            <span class="f-help" v-if="question.type === QuestionType.LongText && !isMobile">{{ 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.type === QuestionType.MultipleChoice && question.multiple">{{ question.helpText || language.multipleChoiceHelpText }}</span>
             <span class="f-help" v-else-if="question.type === QuestionType.MultipleChoice">{{ question.helpText || language.multipleChoiceHelpTextSingle }}</span>
@@ -67,8 +67,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="language.formatString(language.pressEnter)">
+        </a>
       </div>
 
       <div v-if="showInvalid()" class="f-invalid" role="alert" aria-live="assertive">{{ language.invalidPrompt }}</div>
@@ -96,6 +97,7 @@
   import FlowFormTextType from './QuestionTypes/TextType.vue'
   import FlowFormUrlType from './QuestionTypes/UrlType.vue'
   import { IsMobile } from '../mixins/IsMobile'
+  
 
   export default {
     name: 'FlowFormQuestion',

src/components/QuestionTypes/BaseType.vue

@@ -20,7 +20,7 @@
       value: [String, Array]
     },
     mixins: [
-      IsMobile
+      IsMobile,
     ],
     data() {
       return {

src/models/LanguageModel.js

@@ -8,15 +8,17 @@
 
 export default class LanguageModel {
   constructor(options) {
+    this.enterKey = 'Enter'
+    this.shiftKey = 'Shift'
     this.ok = 'OK'
     this.continue = 'Continue'
-    this.pressEnter = 'Press ENTER'
+    this.pressEnter = 'Press :enterKey'
     this.multipleChoiceHelpText = 'Choose as many as you like'
     this.multipleChoiceHelpTextSingle = 'Choose only one answer'
     this.otherPrompt = 'Other'
     this.placeholder = 'Type your answer here...'
     this.submitText = 'Submit'
-    this.longTextHelpText = 'SHIFT + 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,4 +34,20 @@ export default class LanguageModel {
 
     Object.assign(this, options || {})
   }
-}
+
+  /**
+   * Inserts a new CSS class into the language model string to format the :string
+   * Use it in a component's 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
+    })
+  }
+}
+
+