adjusted scroll down detection zone

README.md

@@ -4,8 +4,8 @@ Search Firefox tabs and get a list or automatic direct to the searched tab.
 # Download
 https://addons.mozilla.org/en-US/firefox/addon/tab-search-and-manage/
 
-# Version: 1.3.11
+# Version: 1.3.13
-* Css change for control 1
+* adjusted scroll down detection zone
 
 
 ***Note:

src/manifest.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 2,
     "name": "Tab Search and Manage",
-    "version": "1.3.11",
+    "version": "1.3.13",
     "description": "This plugin can search, drag-n-drop ordering, and (un)hide all or some tabs.",
 
   "applications": {

src/scripts/dragContainersSetup.js

@@ -1,5 +1,6 @@
-var count  = 2; toMoveID = 0, newIndex = 0;;
+let count      = 2; toMoveID = 0, newIndex = 0;;
-var insert = "";
+let insert     = "";
+let isDragging = false;
 
 var drake = dragula({
         direction: 'horizontal',        // X axis is considered when determining where an element would be dropped
@@ -9,6 +10,7 @@ var drake = dragula({
         removeOnSpill: false,           // spilling will `.remove` the element, if this is true
         ignoreInputTextSelection: true  // allows users to select input text, see details below
     }).on('drag', function (el) {
+        isDragging   = true;
         toMoveID     = parseInt(el.getAttribute("tabID"));
         el.className = el.className.replace('ex-moved', '');
     }).on('drop', function (el, container) {
@@ -21,6 +23,7 @@ var drake = dragula({
             }
         }
 
+        isDragging   = false;
         tabsAction.move(toMoveID, {index: newIndex}).then();
         el.className += ' ex-moved';
     }).on('over', function (el, container) {
@@ -29,5 +32,20 @@ var drake = dragula({
         container.className = container.className.replace('ex-over', '');
 });
 
+
+drake.on("cancel", (el, container, source) => {
+    isDragging   = false;
+    el.scrollIntoView();
+
+    let i = 0;
+    while( (el = el.previousSibling) != null ) {
+        i++;
+    }
+
+    if (i < (container.children.length - 6)) {
+        container.scrollBy(0, -100); // Go up 100px
+    }
+});
+
 // Connect to pre created containers
 drake.containers.push(document.querySelector('#listZone'));

src/scripts/eventListeners.js

@@ -6,6 +6,19 @@ window.onload = async () => {
     getTabs();
 }
 
+document.addEventListener("mousemove", (e) => {
+    if (isDragging) {
+        const elm = document.getElementById("listZone");
+        if (e.pageY > 520) {
+            console.log("scrolling down...");
+            elm.scrollBy(0, 50);  // Scroll 50px downwards
+        } else if (e.pageY < 100) {
+            console.log("scrolling up...");
+            elm.scrollBy(0, -50); // Scroll 50px upwards
+        }
+    }
+});
+
 
 // Set click events for tab blocks
 document.addEventListener("click", (e) => {
@@ -158,8 +171,8 @@ function setOldElm(target) {
 
 function scrollToView(time = 400) {
     setTimeout(function () {
-        // Go to selected and 100px up
+        const elm = document.getElementById("listZone");
         oldElm.scrollIntoView();
-        window.scrollBy(0, -100);
+        elm.scrollBy(0, -100); // Scroll 100px upwards
     }, time);
 }