add multi touch gesture to enable/disable drag&drop

 in order to handle scrolling issue on ios devices (which is forced hidden)

README.md

@@ -94,11 +94,6 @@ Html
 - [ ] copy/move to a folder (modal, treeview)
 - [ ] transfer items between adapters
 
-### Known Issues
-- [x] Viewport height issue on mobile browsers (fixed)
-- [ ] Scrolling issue on ios devices (forced hidden scrollbar)
-- [x] Default storage naming error if not 'local' exists (fixed)
-
 ### Dependencies
  - [Vue3](https://vuejs.org/)
  - [Cropperjs](https://github.com/fengyuanchen/cropperjs)  : JavaScript image cropper

dist/en.4dabcb3e.js → dist/en.7a04810c.js

@@ -61,7 +61,9 @@ const e = `{
   "No search result found." : "No search result found.",
   "Are you sure you want to move these files?" : "Are you sure you want to move these files?",
   "File Size": "File Size",
-  "Last Modified": "Last Modified"
+  "Last Modified": "Last Modified",
+  "Drag&Drop: on": "Drag&Drop: on",
+  "Drag&Drop: off": "Drag&Drop: off"
 }
 `;
 export {

dist/ru.743f06d0.js → dist/ru.8dbff4f2.js

@@ -61,7 +61,9 @@ const e = `{
   "No search result found.": "\u041D\u0438\u0447\u0435\u0433\u043E \u043D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E",
   "Are you sure you want to move these files?": "\u0412\u044B \u0443\u0432\u0435\u0440\u0435\u043D\u044B, \u0447\u0442\u043E \u0445\u043E\u0442\u0438\u0442\u0435 \u043F\u0435\u0440\u0435\u043C\u0435\u0441\u0442\u0438\u0442\u044C \u044D\u0442\u0438 \u0444\u0430\u0439\u043B\u044B?",
   "File Size": "\u0420\u0430\u0437\u043C\u0435\u0440 \u0444\u0430\u0439\u043B\u0430",
-  "Last Modified": "\u041F\u043E\u0441\u043B\u0435\u0434\u043D\u0435\u0435 \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u0435"
+  "Last Modified": "\u041F\u043E\u0441\u043B\u0435\u0434\u043D\u0435\u0435 \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u0435",
+  "Drag&Drop: on": "Drag&Drop: on",
+  "Drag&Drop: off": "Drag&Drop: off"
 }
 `;
 export {

dist/tr.f45cbe8b.js → dist/tr.818dacaf.js

@@ -61,7 +61,9 @@ const e = `{
   "No search result found." : "Arama sonucu bulunamad\u0131.",
   "Are you sure you want to move these files?" : "Bu dosyalar\u0131 ta\u015F\u0131mak istedi\u011Finize emin misiniz?",
   "File Size": "Dosya Boyutu",
-  "Last Modified": "Son De\u011Fi\u015Fiklik"
+  "Last Modified": "Son De\u011Fi\u015Fiklik",
+  "Drag&Drop: on": "S\xFCr\xFCkle&B\u0131rak: etkin",
+  "Drag&Drop: off": "S\xFCr\xFCkle&B\u0131rak: devre d\u0131\u015F\u0131"
 }
 `;
 export {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuefinder",
-  "version": "1.1.14",
+  "version": "1.1.15",
   "description": "Vuefinder is a file manager component for vuejs.",
   "type": "module",
   "files": [

src/assets/css/index.css

@@ -25,16 +25,16 @@
 /* Track */
 
 .vf-selector-area::-webkit-scrollbar-track-piece{
-  @apply bg-gray-100 dark:bg-slate-900;
+  @apply bg-gray-100 dark:bg-slate-900/50;
 }
 /* Handle */
 .vf-selector-area::-webkit-scrollbar-thumb {
-  @apply bg-gray-200 dark:bg-slate-700;
+  @apply bg-gray-300 dark:bg-slate-700;
 }
 
 /* Handle on hover */
 .vf-selector-area::-webkit-scrollbar-thumb:hover {
-  @apply bg-gray-300 dark:bg-slate-600;
+  @apply bg-gray-400 dark:bg-slate-600;
 }
 
 .vf-selector-area::-webkit-scrollbar-corner {

src/components/Explorer.vue

@@ -29,6 +29,7 @@
     </div>
 
     <div
+        @touchstart="handleTouchStart"
         @contextmenu.self.prevent="emitter.emit('vf-contextmenu-show',{event: $event, area: selectorArea, items: getSelectedItems()})"
         :class="fullScreen ? '' : 'resize-y'"
         class="h-full w-full text-xs vf-selector-area min-h-[150px] overflow-auto p-1 z-0"
@@ -190,6 +191,24 @@ const clearTimeOut = () => {
   }
 }
 
+// on ios devices scrollbars are hidden as system level.
+// to be able to scroll, 2 finger tap needed.
+// this is the easiest way that I can think of.
+const dragAndDrop = ref(true);
+const handleTouchStart = (event) => {
+  if (event.touches.length > 1) {
+    if (!dragAndDrop.value) {
+      ds.value.start();
+      emitter.emit('vf-toast-push', {label: t('Drag&Drop: on')});
+      emitter.emit('vf-explorer-update');
+    } else {
+      ds.value.stop();
+      emitter.emit('vf-toast-push', {label: t('Drag&Drop: off')});
+    }
+    dragAndDrop.value = !dragAndDrop.value;
+  }
+};
+
 const delayedOpenItem = ($event) => {
   touchTimeOut = setTimeout(() =>  {
     const cmEvent = new MouseEvent("contextmenu", {
@@ -198,7 +217,7 @@ const delayedOpenItem = ($event) => {
         view: window,
         button: 2,
         buttons: 0,
-        clientX: $event.target.getBoundingClientRect().x  ,
+        clientX: $event.target.getBoundingClientRect().x,
         clientY: $event.target.getBoundingClientRect().y
     });
     $event.target.dispatchEvent(cmEvent);

src/locales/en.json

@@ -61,5 +61,7 @@
   "No search result found." : "No search result found.",
   "Are you sure you want to move these files?" : "Are you sure you want to move these files?",
   "File Size": "File Size",
-  "Last Modified": "Last Modified"
+  "Last Modified": "Last Modified",
+  "Drag&Drop: on": "Drag&Drop: on",
+  "Drag&Drop: off": "Drag&Drop: off"
 }

src/locales/ru.json

@@ -61,5 +61,7 @@
   "No search result found.": "Ничего не найдено",
   "Are you sure you want to move these files?": "Вы уверены, что хотите переместить эти файлы?",
   "File Size": "Размер файла",
-  "Last Modified": "Последнее изменение"
+  "Last Modified": "Последнее изменение",
+  "Drag&Drop: on": "Drag&Drop: on",
+  "Drag&Drop: off": "Drag&Drop: off"
 }

src/locales/tr.json

@@ -61,5 +61,7 @@
   "No search result found." : "Arama sonucu bulunamadı.",
   "Are you sure you want to move these files?" : "Bu dosyaları taşımak istediğinize emin misiniz?",
   "File Size": "Dosya Boyutu",
-  "Last Modified": "Son Değişiklik"
+  "Last Modified": "Son Değişiklik",
+  "Drag&Drop: on": "Sürükle&Bırak: etkin",
+  "Drag&Drop: off": "Sürükle&Bırak: devre dışı"
 }