insertClass method implemented as a mixin

Author: EkaterinaVu

examples/questionnaire/Example.vue

@@ -71,6 +71,7 @@
   import FlowForm from '../../src/components/FlowForm.vue'
   import QuestionModel, { QuestionType, ChoiceOption } from '../../src/models/QuestionModel'
   import LanguageModel from '../../src/models/LanguageModel'
+  import { InsertClass } from '../../src/mixins/InsertClass'
   // If using the npm package, use the following line instead of the ones above.
   // import FlowForm, { QuestionModel, QuestionType, ChoiceOption, LanguageModel } from '@ditdot-dev/vue-flow-form'
 
@@ -79,6 +80,9 @@
     components: {
       FlowForm
     },
+    mixins: [
+      InsertClass
+    ],
     data() {
       return {
         submitted: false,
@@ -290,20 +294,6 @@
         })
 
         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(" ")
       }
     },
   }

examples/quiz/Example.vue

@@ -70,6 +70,7 @@
   import FlowForm from '../../src/components/FlowForm.vue'
   import QuestionModel, { QuestionType, ChoiceOption} from '../../src/models/QuestionModel'
   import LanguageModel from '../../src/models/LanguageModel'
+  import { InsertClass } from '../../src/mixins/InsertClass'
   // If using the npm package, use the following line instead of the ones above.
   // import FlowForm, { QuestionModel, QuestionType, ChoiceOption, LanguageModel } from '@ditdot-dev/vue-flow-form'
 
@@ -78,6 +79,9 @@
     components: {
       FlowForm
     },
+    mixins: [
+      InsertClass
+    ],
     data() {
       return {
         submitted: false,
@@ -331,20 +335,6 @@
         
         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(" ")
       }
     },
   }

src/assets/css/common.css

@@ -402,7 +402,7 @@ span.f-sub {
   margin-top: 6px;
 }
 
-span.f-sub span{
+span.f-sub span:not(.f-language-key) {
   margin-right: .4rem;
 }
 

src/components/FlowForm.vue

@@ -125,6 +125,7 @@
 
   import FlowFormQuestion from './Question.vue'
   import LanguageModel from '../models/LanguageModel'
+  import { InsertClass } from '../mixins/InsertClass'
 
   export default {
     name: 'FlowForm',
@@ -138,6 +139,9 @@
         default: () => new LanguageModel()
       }
     },
+    mixins: [
+      InsertClass
+    ],
     data() {
       return {
         completed: false,
@@ -468,19 +472,6 @@
       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

@@ -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">{{ question.helpText || language.longTextHelpText }}</span>
+            <span class="f-help" v-if="question.type === QuestionType.LongText && !isMobile" v-html="question.helpText || insertClass(language.longTextHelpText)"></span>
 
             <span class="f-help" v-if="question.multiple">{{ question.helpText || language.multipleChoiceHelpText }}</span>
           </span>
@@ -96,6 +96,7 @@
   import FlowFormTextType from './QuestionTypes/TextType.vue'
   import FlowFormUrlType from './QuestionTypes/UrlType.vue'
   import { IsMobile } from '../mixins/IsMobile'
+  import { InsertClass } from '../mixins/InsertClass'
 
   export default {
     name: 'FlowFormQuestion',
@@ -125,7 +126,8 @@
       }
     },
     mixins: [
-      IsMobile
+      IsMobile,
+      InsertClass
     ],
     data() {
       return {
@@ -224,19 +226,6 @@
         }
 
         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/components/QuestionTypes/BaseType.vue

@@ -10,6 +10,7 @@
   import QuestionModel, { QuestionType } from '../../models/QuestionModel'
   import LanguageModel from '../../models/LanguageModel'
   import { IsMobile } from '../../mixins/IsMobile'
+  import { InsertClass } from '../../mixins/InsertClass'
 
   export default {
     name: 'FlowFormBaseType',
@@ -20,7 +21,8 @@
       value: [String, Array]
     },
     mixins: [
-      IsMobile
+      IsMobile,
+      InsertClass
     ],
     data() {
       return {

src/mixins/InsertClass.js

@@ -0,0 +1,21 @@
+/*
+  Copyright (c) 2020 - present, DITDOT Ltd. - MIT Licence
+  https://github.com/ditdot-dev/vue-flow-form
+  https://www.ditdot.hr/en
+*/
+
+ // Mixin that inserts a new CSS class into the language model string to format the :key  
+export const InsertClass = {
+    methods: {
+        insertClass(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>'
+                }
+            }
+            return stringArr.join(" ")
+        } 
+    }
+}

src/models/LanguageModel.js

@@ -10,12 +10,12 @@ export default class LanguageModel {
   constructor(options) {
     this.ok = 'OK'
     this.continue = 'Continue'
-    this.pressEnter = 'Press :enter'
+    this.pressEnter = 'Press :key(Enter)';
     this.multipleChoiceHelpText = 'Choose as many as you like'
     this.otherPrompt = 'Other'
     this.placeholder = 'Type your answer here...'
     this.submitText = 'Submit'
-    this.longTextHelpText = 'SHIFT + ENTER to make a line break.'
+    this.longTextHelpText = ':key(Shift) + :key(Enter) to make a line break.'
     this.prev = 'Prev'
     this.next = 'Next'
     this.percentCompleted = ':percent% completed'