From 7c56617072b68c54389d5903e49568046707c724 Mon Sep 17 00:00:00 2001
From: Weidi Deng <weidi_deng@icloud.com>
Date: Fri, 11 Dec 2020 15:29:34 +0800
Subject: [PATCH] fix multiple selection added esc clear

---
 frontend/src/views/Share.vue | 43 +++++++++++++++++++++++++++++++++---
 1 file changed, 40 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/Share.vue b/frontend/src/views/Share.vue
index b6d07a5f..6c7b3db9 100644
--- a/frontend/src/views/Share.vue
+++ b/frontend/src/views/Share.vue
@@ -33,6 +33,12 @@
           <div class="share__box__element share__box__center">
             <qrcode-vue :value="fullLink" size="200" level="M"></qrcode-vue>
           </div>
+          <div v-if="file.isDir" class="share__box__element share__box__center">
+            <label>
+              <input type="checkbox" v-model="multiple">
+              {{ $t('buttons.selectMultiple') }}
+            </label>
+          </div>
       </div>
       <div v-if="file.isDir" class="share__box share__box__items">
         <div class="share__box__header" v-if="file.isDir">
@@ -42,7 +48,8 @@
           <div class="item" v-for="(item) in file.items.slice(0, this.showLimit)" :key="base64(item.name)"
                :aria-selected="selected.includes(item.name)"
                @click="click(item.name)"
-               @dblclick="dbclick(item.name)"
+               @dblclick="dblclick(item.name)"
+               @touchstart="touchstart(item.name)"
           >
             <div>
               <i class="material-icons">{{ item.isDir ? 'folder' : (item.type==='image') ? 'insert_photo' : 'insert_drive_file' }}</i>
@@ -79,6 +86,8 @@ export default {
     notFound: false,
     file: null,
     showLimit: 500,
+    multiple: false,
+    touches: 0,
     selected: [],
     firstSelected: -1
   }),
@@ -88,6 +97,12 @@ export default {
   created: function () {
     this.fetchData()
   },
+  mounted () {
+    window.addEventListener('keydown', this.keyEvent)
+  },
+  beforeDestroy () {
+    window.removeEventListener('keydown', this.keyEvent)
+  },
   computed: {
     hasSelected: function () {
       return this.selected.length > 0
@@ -163,6 +178,8 @@ export default {
     fetchData: async function () {
       this.loaded = false
       this.notFound = false
+      this.multiple = false
+      this.touches = 0
       this.selected = []
       this.firstSelected = -1
       try {
@@ -216,12 +233,32 @@ export default {
         return
       }
 
-      if (!event.ctrlKey && !this.hasSelected) this.resetSelected()
+      if (!event.ctrlKey && !event.metaKey && !this.multiple) this.resetSelected()
       if (this.firstSelected === -1) this.firstSelected = index
       this.addSelected(name)
     },
-    dbclick: function (name) {
+    dblclick: function (name) {
       this.$router.push({path: `/share/${this.hash}${name}`})
+    },
+    touchstart (name) {
+      setTimeout(() => {
+        this.touches = 0
+      }, 300)
+
+      this.touches++
+      if (this.touches > 1) {
+        this.dblclick(name)
+      }
+    },
+    keyEvent (event) {
+      // Esc!
+      if (event.keyCode === 27) {
+        // If we're on a listing, unselect all
+        // files and folders.
+        if (this.hasSelected) {
+          this.resetSelected()
+        }
+      }
     }
   }
 }