fixed card's note input and recording

web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.vue

@@ -75,7 +75,7 @@
         </section>
         <section class="tool note">
           <span
-            v-if="note_nid"
+            v-if="note_id"
             class="btn mdi mdi-note"
             v-touch.prevent.stop="onTapTool"
           />
@@ -85,7 +85,7 @@
             v-touch.prevent.stop="onTapTool"
           />
           <div class="tool-content">
-            <textarea spellcheck="false" v-model="note" name="note"/>
+            <textarea spellcheck="false" v-model="note" name="note" @input="onNoteInput"/>
           </div>
         </section>
         <section class="tool print">
@@ -358,7 +358,7 @@ export default {
       loadingFlag: false,
       lightbox_index: null,
       note: "",
-      note_nid: null
+      note_id: null
     }
   },
   computed: {
@@ -382,15 +382,17 @@ export default {
   created () {
     console.log('modale item', this.item)
     this.loadMaterial()
+    this.note_id = this.item.note_id
     this.debouncedSaveNote = _debounce(this.saveNote, 500)
   },
-  watch: {
-    // whenever question changes, this function will run
-    note: function (n, o) {
-      console.log("note watcher: note", n)
-      this.debouncedSaveNote()
-    }
-  },
+  // watch: {
+  //   // whenever question changes, this function will run
+  //   // TODO: on mobile, this is called only on white caractere key
+  //   note: function (n, o) {
+  //     console.log("note watcher: note", n)
+  //     this.debouncedSaveNote()
+  //   }
+  // },
   methods: {
     ...mapActions({
       // refreshItem: 'Search/refreshItem',
@@ -478,7 +480,16 @@ export default {
     },
     onSwipeCard (e) {
       console.log('onSwipeCard', e)
+      switch(e){
+        case 'top':
+          break
+        case 'bottom':
+          break
+        case 'left':
+        case 'right':
           this.$modal.hide(`modal-${this.item.id}`)
+          break
+      }
     },
     prettyFileSize(bytes){
       return prettyBytes(parseInt(bytes))
@@ -486,9 +497,14 @@ export default {
     shortUrl(url){
       return url.replace(/^http:\/\//, '').replace(/^www\./, '')
     },
+    onNoteInput(e){
+      console.log('onNoteInput', e, this.note)
+      this.note  = e.target.value
+      this.debouncedSaveNote()
+    },
     saveNote(){
-      console.log("saveNote", this.note)
-      if (this.note_nid) {
+      console.log("saveNote", this.note_id, this.note)
+      if (this.note_id) {
         this.updateNote()
       } else {
         this.createNote()
@@ -504,7 +520,7 @@ export default {
           "X-CSRF-Token": this.csrf_token
         }
       }
-      REST.patch(`/node/${this.note_nid}?_format=json`, params, config)
+      REST.patch(`/node/${this.note_id}?_format=json`, params, config)
         .then(({ data }) => {
           console.log('updateNote REST data', data)
         })
@@ -527,13 +543,13 @@ export default {
       REST.post('/node?_format=json', params, config)
         .then(({ data }) => {
           console.log('createNote REST data', data)
-          this.note_nid = data.nid[0].value
+          this.note_id = data.nid[0].value
           // call search results refresh of the item to display that note is now existing for this item
           // this.refreshItem({id: this.item.id})
           // no needs to refresh the entire item via searchresults
           // plus if we are in article, there is not searchresults
-          // instead call the callbackfunction from teh parent to add directly the note id
-          this.addNoteId(this.note_nid)
+          // instead call the callbackfunction from the parent to add directly the note id
+          this.addNoteId(this.note_id)
         })
         .catch(error => {
           console.warn('Issue with createNote', error)
@@ -548,7 +564,11 @@ export default {
       e.target.parentNode.classList.add('tapped')
     },
     onTapCard (e) {
-      console.log('ontapCard', e)
+      console.log('ontapCard', e.target.tagName)
+      // in case we tap on note's textarea
+      if(e.target.tagName == "TEXTAREA"){
+        return;
+      }
       let tools = this.$refs['tools'].querySelectorAll('section.tool')
       // console.log()
       tools.forEach((item, i) => {