insertClass renamed to formatKey and moved to 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="insertClass(language.pressEnter)">
+            v-html="language.formatKey(language.pressEnter)">
           </a>
         </div>
 
@@ -71,7 +71,6 @@
   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'
 
@@ -80,9 +79,6 @@
     components: {
       FlowForm
     },
-    mixins: [
-      InsertClass
-    ],
     data() {
       return {
         submitted: false,

examples/quiz/Example.vue

@@ -49,7 +49,7 @@
             class="f-enter-desc"
             href="#"
             v-on:click.prevent="onQuizSubmit()"
-            v-html="insertClass(language.pressEnter)">
+            v-html="language.formatKey(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>
@@ -70,7 +70,6 @@
   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,9 +78,6 @@
     components: {
       FlowForm
     },
-    mixins: [
-      InsertClass
-    ],
     data() {
       return {
         submitted: false,

src/components/FlowForm.vue

@@ -44,7 +44,7 @@
               href="#"
               v-on:click.prevent="submit()"
               v-if="!submitted"
-              v-html="insertClass(language.pressEnter)">
+              v-html="language.formatKey(language.pressEnter)">
              </a>
           </slot>
         </div>
@@ -125,7 +125,6 @@
 
   import FlowFormQuestion from './Question.vue'
   import LanguageModel from '../models/LanguageModel'
-  import { InsertClass } from '../mixins/InsertClass'
 
   export default {
     name: 'FlowForm',
@@ -139,9 +138,6 @@
         default: () => new LanguageModel()
       }
     },
-    mixins: [
-      InsertClass
-    ],
     data() {
       return {
         completed: false,

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 || insertClass(language.longTextHelpText)"></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.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="insertClass(language.pressEnter)">
+          v-html="language.formatKey(language.pressEnter)">
         </a>
       </div>
 
@@ -96,7 +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',
@@ -126,8 +126,7 @@
       }
     },
     mixins: [
-      IsMobile,
-      InsertClass
+      IsMobile
     ],
     data() {
       return {

src/components/QuestionTypes/BaseType.vue

@@ -10,7 +10,6 @@
   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',
@@ -22,7 +21,6 @@
     },
     mixins: [
       IsMobile,
-      InsertClass
     ],
     data() {
       return {

src/mixins/InsertClass.js

@@ -31,4 +31,16 @@ export default class LanguageModel {
 
     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>'
+        }
+      }
+      return stringArr.join(" ")
+    } 
+}
+