@@ -24,11 +24,13 @@
+
+ 
+
- ![]()
- ![]()
diff --git a/src/scripts/dragContainersSetup.js b/src/scripts/dragContainersSetup.js
index b92cbaa..ae623bc 100644
--- a/src/scripts/dragContainersSetup.js
+++ b/src/scripts/dragContainersSetup.js
@@ -1,8 +1,14 @@
-var count = 2; toMoveID = 0, newIndex = 0;;
+var count = 2; toMoveID = 0, newIndex = 0;;
var insert = "";
-var drake = dragula()
- .on('drag', function (el) {
+var drake = dragula({
+ direction: 'horizontal', // X axis is considered when determining where an element would be dropped
+ copy: false, // elements are moved by default, not copied
+ copySortSource: false, // elements in copy-source containers can be reordered
+ revertOnSpill: true, // spilling will put the element back where it was dragged from, if this is true
+ 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) {
toMoveID = parseInt(el.getAttribute("tabID"));
el.className = el.className.replace('ex-moved', '');
}).on('drop', function (el, container) {
diff --git a/src/scripts/eventListeners.js b/src/scripts/eventListeners.js
index eb02487..3e3b82f 100644
--- a/src/scripts/eventListeners.js
+++ b/src/scripts/eventListeners.js
@@ -10,7 +10,9 @@ document.addEventListener("click", (e) => {
var id = 0;
if (targetID == "closeBttn") {
- closeBttnAction(target, targetID, parentElm, id);
+ if (hoverTarget) {
+ closeBttnAction(hoverTarget, hoverTarget.id);
+ }
} else if (targetID == "iconElm") {
setNewTabAction(target, targetID, parentElm, id);
} else if (targetID == "goTop") {
@@ -22,7 +24,9 @@ document.addEventListener("click", (e) => {
} else if (targetID == "newTab") {
createTab();
} else if (targetID == "hideTgglBttn") {
- hideSelectedTabAction(target, targetID, parentElm, id);
+ if (hoverTarget) {
+ hideSelectedTabAction(hoverTarget, hoverTarget.id);
+ }
} else if (targetID == "hideAllBttn") {
showHideTabsAction(0)
} else if (targetID == "showAllBttn") {
@@ -32,21 +36,24 @@ document.addEventListener("click", (e) => {
}
});
-function closeBttnAction(target, targetID, parentElm, id) {
- if (parentElm == oldElm) {
- var index = Array.from(parentElm.parentElement.children).indexOf(parentElm);
+function closeBttnAction(target, targetID) {
+ parentElm = target.parentElement;
+
+ if (target == oldElm) {
+ var index = Array.from(parentElm.children).indexOf(target);
(index - 1 < 0) ? index++ : index-- ; // Check what index to chose
- var newElm = parentElm.parentElement.children[index];
+ var newElm = parentElm.children[index];
id = parseInt(newElm.getAttribute("tabID"));
browser.tabs.update(id, { active: true });
setOldElm(newElm);
}
- id = parseInt(parentElm.getAttribute("tabID"));
+ id = parseInt(target.getAttribute("tabID"));
browser.tabs.remove(id);
-
- parentElm.parentElement.removeChild(parentElm);
+ parentElm.removeChild(target);
+ hoverTarget = undefined;
+ document.getElementById("tabControls").style.display = "none";
}
function setNewTabAction(target, targetID, parentElm, id) {
@@ -55,21 +62,23 @@ function setNewTabAction(target, targetID, parentElm, id) {
browser.windows.update(tab.windowId, {focused: true});
browser.tabs.update(id, { active: true });
},id);
-
setOldElm(target);
+ document.getElementById("tabControls").querySelector("#hideTgglBttn").src = "../icons/eyeOpen.png";
}
-function hideSelectedTabAction(target, targetID, parentElm, id) {
- id = parseInt(parentElm.getAttribute("tabID"));
+function hideSelectedTabAction(target, targetID) {
+ parentElm = target.parentElement;
+ id = parseInt(target.getAttribute("tabID"));
+ control = document.getElementById("tabControls").querySelector("#hideTgglBttn");
if (id != oldElm.getAttribute("tabID")) {
- if (target.src.includes("eyeClosed.png")) {
- parentElm.setAttribute("class", "block");
- target.src = "../icons/eyeOpen.png"
+ if (control.src.includes("eyeClosed.png")) {
+ target.setAttribute("class", "block");
+ control.src = "../icons/eyeOpen.png";
unhideSelectedTab(id);
} else {
- parentElm.setAttribute("class", "block hiddenBGColor");
- target.src = "../icons/eyeClosed.png"
+ target.setAttribute("class", "block hiddenBGColor");
+ control.src = "../icons/eyeClosed.png";
hideSelectedTab(id);
}
}
@@ -87,7 +96,6 @@ function setSearchModeAction(target, targetID, parentElm, id) {
}
function setOldElm(target) {
- target.querySelectorAll(".hiderImg")[0].src = "../icons/eyeOpen.png";
oldElm.setAttribute("class", "block");
oldElm = target;
target.setAttribute("class", "block block-focused");
diff --git a/src/scripts/generateView.js b/src/scripts/generateView.js
index 17f1e3d..3cc31d4 100644
--- a/src/scripts/generateView.js
+++ b/src/scripts/generateView.js
@@ -5,11 +5,12 @@ const errHandler = document.getElementById("errorZone");
const listZone = document.getElementById("listZone");
const notFoundText = document.createTextNode("Search not found...");
const tabImg = browser.extension.getURL("icons/tab.png");
-var oldElm = "";
-var currentWinId = undefined;
-var newWinId = undefined;
-var focusedWinID = undefined;
-var windowIndex = 0;
+let hoverTarget = undefined
+let oldElm = undefined;
+let currentWinId = undefined;
+let newWinId = undefined;
+let focusedWinID = undefined;
+let windowIndex = 0;
function logTabs(tabs) {
windowIndex = 0;
@@ -71,19 +72,20 @@ function createContainer(tab) {
spanTag.setAttribute("tabID", tab.id);
spanTag.title = tab.title;
- closeImgTag.src = "../icons/x.png";
- if (!tab.hidden) {
+ if (!tab.hidden)
spanTag.className = "block";
- hidnStImgTag.src = "../icons/eyeOpen.png";
- } else {
+ else
spanTag.className = "block hiddenBGColor";
- hidnStImgTag.src = "../icons/eyeClosed.png";
- }
spanTag.style.backgroundImage = "url(" + tab.favIconUrl + ")";
icoImgTag.src = tab.favIconUrl;
icoImgTag.onerror = function() { spanTag.style.backgroundImage = "url(" + tabImg + ")"; }
+
+ spanTag.addEventListener("mouseenter", function (eve) {
+ moveTabControlTo(eve.target);
+ });
+
pTag.appendChild(iconText);
listZone.appendChild(clone);
}
@@ -95,6 +97,21 @@ function createTab() {
})
}
+function moveTabControlTo(elm) {
+ let tabControls = document.getElementById("tabControls");
+ let rect = elm.getBoundingClientRect();
+ tabControls.style.left = (rect.left - 46) + "px";
+ tabControls.style.top = rect.top + "px";
+ hoverTarget = elm;
+
+ if (elm.className == "block hiddenBGColor")
+ document.getElementById("tabControls").querySelector("#hideTgglBttn").src = "../icons/eyeClosed.png";
+ else
+ document.getElementById("tabControls").querySelector("#hideTgglBttn").src = "../icons/eyeOpen.png";
+
+ document.getElementById("tabControls").style.display = "";
+}
+
function onError(error) { console.log(`Error: ${error}`); }
function getTabs() {
diff --git a/src/scripts/showHideLogic.js b/src/scripts/showHideLogic.js
index df651b6..e1ad770 100644
--- a/src/scripts/showHideLogic.js
+++ b/src/scripts/showHideLogic.js
@@ -40,21 +40,24 @@ function showHideTabsAction(doType) {
}
}, doType);
- var imgs = document.querySelectorAll(".hiderImg");
if (doType == 0) {
- for (var i = 0; i < imgs.length; i++) {
- imgs[i].parentElement.setAttribute("class", "block hiddenBGColor");
- imgs[i].src = "../icons/eyeClosed.png";
+ let tabs = document.querySelectorAll(".block");
+ for (var i = 0; i < tabs.length; i++) {
+ tabs[i].setAttribute("class", "block hiddenBGColor");
}
-
- oldElm.querySelectorAll(".hiderImg")[0].src = "../icons/eyeOpen.png";
oldElm.setAttribute("class", "block block-focused");
} else {
- for (var i = 0; i < imgs.length; i++) {
- imgs[i].parentElement.setAttribute("class", "block");
- imgs[i].src = "../icons/eyeOpen.png";
+ let tabs = document.querySelectorAll(".hiddenBGColor");
+ for (var i = 0; i < tabs.length; i++) {
+ tabs[i].setAttribute("class", "block");
}
-
oldElm.setAttribute("class", "block block-focused");
}
+
+ if (hoverTarget) {
+ if (hoverTarget.className == "block hiddenBGColor")
+ document.getElementById("tabControls").querySelector("#hideTgglBttn").src = "../icons/eyeClosed.png";
+ else
+ document.getElementById("tabControls").querySelector("#hideTgglBttn").src = "../icons/eyeOpen.png";
+ }
}