From 151583a520d004c98fbf6f1dfb90709a4d342fdf Mon Sep 17 00:00:00 2001
From: dennis <dennis@ditdot.hr>
Date: Wed, 9 Sep 2020 20:41:40 +0200
Subject: [PATCH 1/2] Allow for multiline LongTextType on mobile devices

---
 src/components/FlowForm.vue                   | 13 ------
 src/components/Question.vue                   | 26 ++++++-----
 src/components/QuestionTypes/BaseType.vue     | 44 ++++++++++++++-----
 src/components/QuestionTypes/LongTextType.vue | 27 +++++++++++-
 src/components/QuestionTypes/PhoneType.vue    |  2 +
 .../QuestionTypes/SectionBreakType.vue        |  6 +++
 src/components/QuestionTypes/TextType.vue     |  2 +
 src/mixins/IsMobile.js                        |  7 +++
 8 files changed, 93 insertions(+), 34 deletions(-)
 create mode 100644 src/mixins/IsMobile.js

diff --git a/src/components/FlowForm.vue b/src/components/FlowForm.vue
index a340552a..ff781da4 100644
--- a/src/components/FlowForm.vue
+++ b/src/components/FlowForm.vue
@@ -148,7 +148,6 @@
       window.addEventListener('beforeunload', this.onBeforeUnload)
 
       this.setQuestions()
-      this.focusActiveQuestion()
     },
     beforeDestroy() {
       document.removeEventListener('keyup', this.onKeyListener, true)
@@ -394,8 +393,6 @@
 
         if (this.activeQuestionIndex > 0) {
           --this.activeQuestionIndex
-
-          this.focusActiveQuestion()
         }
 
         this.reverse = true
@@ -414,16 +411,6 @@
         this.reverse = false
       },
 
-      focusActiveQuestion() {
-        this.$nextTick(() => {
-          const q = this.activeQuestionComponent()
-
-          if (q) {
-            q.focusField()
-          }
-        })
-      },
-
       /**
        * Removes focus from the currently focused DOM element.
        */
diff --git a/src/components/Question.vue b/src/components/Question.vue
index bd23b9bc..2d9e8434 100644
--- a/src/components/Question.vue
+++ b/src/components/Question.vue
@@ -1,8 +1,8 @@
 // Single question template and logic
 
 <template>
-  <div class="animate q-form" v-bind:class="mainClasses">
-    <div class="q-inner" ref="qinner">
+  <div class="animate q-form" v-bind:class="mainClasses" ref="qanimate">
+    <div class="q-inner">
       <div v-bind:class="{'section-wrap': question.type === QuestionType.SectionBreak}">
         <div v-bind:class="{'fh2': question.type !== QuestionType.SectionBreak}">
           <span class="f-title" v-if="question.tagline">{{ question.tagline }}</span>
@@ -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">{{ question.helpText || language.longTextHelpText }}</span>
+            <span class="f-help" v-if="question.type === QuestionType.LongText && !isMobile">{{ question.helpText || language.longTextHelpText }}</span>
 
             <span class="f-help" v-if="question.multiple">{{ question.helpText || language.multipleChoiceHelpText }}</span>
           </span>
@@ -91,6 +91,7 @@
   import FlowFormSectionBreakType from './QuestionTypes/SectionBreakType.vue'
   import FlowFormTextType from './QuestionTypes/TextType.vue'
   import FlowFormUrlType from './QuestionTypes/UrlType.vue'
+  import { IsMobile } from '../mixins/IsMobile'
 
   export default {
     name: 'FlowFormQuestion',
@@ -119,6 +120,9 @@
         default: false
       }
     },
+    mixins: [
+      IsMobile
+    ],
     data() {
       return {
         QuestionType: QuestionType,
@@ -129,33 +133,35 @@
       this.focusField()
       this.dataValue = this.question.answer
 
-      this.$refs.qinner.addEventListener('transitionend', this.onTransitionEnd)
+      this.$refs.qanimate.addEventListener('animationend', this.onAnimationEnd)
     },
     beforeDestroy() {
-      this.$refs.qinner.removeEventListener('transitionend', this.onTransitionEnd)
+      this.$refs.qanimate.removeEventListener('animationend', this.onAnimationEnd)
     },
     methods: {
       /**
        * Autofocus the input box of the current question
        */
       focusField() {
-        let el = this.$refs.questionComponent
+        const el = this.$refs.questionComponent
         
         el && el.focus()
       },
 
-      onTransitionEnd() {
-        this.enterPressed = false
+      onAnimationEnd() {
+        this.focusField()
       },
 
       /**
        * Emits "answer" event and calls "onEnter" method on Enter press
        */ 
-      onEnter() {
+      onEnter($event) {
         const q = this.$refs.questionComponent
 
         if (q) {
-          this.$emit('answer', q)
+          if (!q.focused) {
+            this.$emit('answer', q)
+          }
           q.onEnter()
         }
       },
diff --git a/src/components/QuestionTypes/BaseType.vue b/src/components/QuestionTypes/BaseType.vue
index c93f747a..040454e9 100644
--- a/src/components/QuestionTypes/BaseType.vue
+++ b/src/components/QuestionTypes/BaseType.vue
@@ -8,6 +8,7 @@
 
   import QuestionModel, { QuestionType } from '../../models/QuestionModel'
   import LanguageModel from '../../models/LanguageModel'
+  import { IsMobile } from '../../mixins/IsMobile'
 
   export default {
     name: 'FlowFormBaseType',
@@ -17,6 +18,9 @@
       active: Boolean,
       value: [String, Array]
     },
+    mixins: [
+      IsMobile
+    ],
     data() {
       return {
         dirty: false,
@@ -24,7 +28,8 @@
         answer: null,
         enterPressed: false,
         allowedChars: null,
-        alwaysAllowedKeys: ['ArrowLeft', 'ArrowRight', 'Delete', 'Backspace']
+        alwaysAllowedKeys: ['ArrowLeft', 'ArrowRight', 'Delete', 'Backspace'],
+        focused: false
       }
     },
     mounted() {
@@ -52,6 +57,15 @@
         return el
       },
 
+      setFocus() {
+        this.focused = true
+      },
+
+      // eslint-disable-next-line no-unused-vars
+      unsetFocus($event) {
+        this.focused = false
+      },
+
       focus() {
         const el = this.getElement()
 
@@ -68,11 +82,17 @@
         this.enterPressed = false
         clearTimeout(this.timeoutId)
 
-        if ($event && this.allowedChars !== null) {
-          // Check if the entered character is allowed.
-          // We always allow keys from the alwaysAllowedKeys array.
-          if (this.alwaysAllowedKeys.indexOf($event.key) === -1 && this.allowedChars.indexOf($event.key) === -1) {
-            $event.preventDefault()
+        if ($event) {
+          if ($event.key === 'Enter') {
+            this.unsetFocus()
+          }
+
+          if (this.allowedChars !== null) {
+            // Check if the entered character is allowed.
+            // We always allow keys from the alwaysAllowedKeys array.
+            if (this.alwaysAllowedKeys.indexOf($event.key) === -1 && this.allowedChars.indexOf($event.key) === -1) {
+              $event.preventDefault()
+            }
           }
         }
       },
@@ -86,11 +106,11 @@
       },
 
       onEnter() {
-        this.enterPressed = true
+        this._onEnter()
+      },
 
-        if (this.question.type === QuestionType.SectionBreak) {
-          this.dirty = true
-        }
+      _onEnter() {
+        this.enterPressed = true
 
         this.dataValue = this.fixAnswer(this.dataValue)
         this.setAnswer(this.dataValue)
@@ -133,6 +153,10 @@
       }
     },
     computed: {
+      editingFinished() {
+        return true
+      },
+
       placeholder() {
         return this.question.placeholder || this.language.placeholder
       },
diff --git a/src/components/QuestionTypes/LongTextType.vue b/src/components/QuestionTypes/LongTextType.vue
index 7ba7a462..e0e7e0cc 100644
--- a/src/components/QuestionTypes/LongTextType.vue
+++ b/src/components/QuestionTypes/LongTextType.vue
@@ -7,9 +7,11 @@
       v-bind:required="question.required"
       v-on:keydown.native="onKeyDown"
       v-on:keyup.native="onChange"
-      v-on:keydown.enter.exact.prevent.native
+      v-on:keydown.enter.exact.native="onEnterDown"
       v-on:keyup.enter.exact.prevent.native="onEnter"
       v-on:keyup.tab.prevent.native="onEnter"
+      v-on:focus.native="setFocus"
+      v-on:blur.native="unsetFocus"
       v-bind:placeholder="placeholder"
     />
   </span>
@@ -41,6 +43,29 @@
     methods: {
       onResizeListener() {
         this.$refs.input.resize()
+      },
+
+      unsetFocus($event) {
+        if ($event || !this.isMobile) {
+          this.focused = false
+        }
+      },
+
+      onEnterDown($event) {
+        if (!this.isMobile) {
+          $event.preventDefault()
+        }
+      },
+
+      onEnter() {
+        if (!this.isMobile) {
+          this._onEnter()
+        }
+      }
+    },
+    computed: {
+      editingFinished() {
+        return !this.isMobile
       }
     }
   }
diff --git a/src/components/QuestionTypes/PhoneType.vue b/src/components/QuestionTypes/PhoneType.vue
index c60c22a5..cc0459ac 100644
--- a/src/components/QuestionTypes/PhoneType.vue
+++ b/src/components/QuestionTypes/PhoneType.vue
@@ -8,6 +8,8 @@
     v-bind:placeholder="placeholder"
     v-on:keydown.native="onKeyDown"
     v-on:keyup.native="onChange"
+    v-on:focus.native="setFocus"
+    v-on:blur.native="unsetFocus"
     v-on:keyup.native.enter.prevent="onEnter"
     v-on:keyup.native.tab.prevent="onEnter"
   />
diff --git a/src/components/QuestionTypes/SectionBreakType.vue b/src/components/QuestionTypes/SectionBreakType.vue
index b35f6c9c..3d1aee22 100644
--- a/src/components/QuestionTypes/SectionBreakType.vue
+++ b/src/components/QuestionTypes/SectionBreakType.vue
@@ -18,6 +18,12 @@
     extends: BaseType,
     name: QuestionType.SectionBreak,
     methods: {
+      onEnter() {
+        this.dirty = true
+
+        this._onEnter()
+      },
+
       isValid() {
         return true
       }
diff --git a/src/components/QuestionTypes/TextType.vue b/src/components/QuestionTypes/TextType.vue
index f22ea94e..cd07b2ba 100644
--- a/src/components/QuestionTypes/TextType.vue
+++ b/src/components/QuestionTypes/TextType.vue
@@ -8,6 +8,8 @@
     v-on:keyup="onChange"
     v-on:keyup.enter.prevent="onEnter"
     v-on:keyup.tab.prevent="onEnter"
+    v-on:focus="setFocus"
+    v-on:blur="unsetFocus"
     v-bind:placeholder="placeholder"
   />
 </template>
diff --git a/src/mixins/IsMobile.js b/src/mixins/IsMobile.js
new file mode 100644
index 00000000..0dca3f2d
--- /dev/null
+++ b/src/mixins/IsMobile.js
@@ -0,0 +1,7 @@
+export const IsMobile = {
+  data() {
+    return {
+      isMobile: !!navigator.userAgent.match(/android|iphone|ipad|ipod/i)
+    }
+  }
+}
\ No newline at end of file

From 406c7a53930673089aef6aec8b27a4ecdaaccdd3 Mon Sep 17 00:00:00 2001
From: dennis <dennis@ditdot.hr>
Date: Thu, 10 Sep 2020 12:16:23 +0200
Subject: [PATCH 2/2] Don't show "press enter" text on LongTextType for mobile
 devices

---
 src/components/Question.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Question.vue b/src/components/Question.vue
index 2d9e8434..0753a59e 100644
--- a/src/components/Question.vue
+++ b/src/components/Question.vue
@@ -65,7 +65,7 @@
           <span v-else>{{ language.ok }}</span>
         </div>
 
-        <span class="f-enter-desc">{{ language.pressEnter }}</span>
+        <span class="f-enter-desc" v-if="question.type !== QuestionType.LongText || !isMobile">{{ language.pressEnter }}</span>
       </a>
 
       <div v-if="showInvalid()" class="f-invalid" role="alert" aria-live="assertive">{{ language.invalidPrompt }}</div>