itdominator/Tab-Search-and-Manage
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Changed out tab control scheme.

Browse Source
This commit is contained in:
Maxim Stewart 2019-05-04 18:12:22 -05:00
parent 4bf57abfd0
commit 997aaa7f14
8 changed files with 101 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -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.3
Updating for Firefox AMO
# Version: 1.3.4
Changed out tab control scheme.
***Note:
To get tab hiding functionality, you must go to <b>about:config</b> and search for <b>extensions.webextensions.tabhide.enabled</b>. Set it to <b>true</b> by double clicking it. Then tabs can be shown or hidden via the eyes.

22
src/css/tabsSearch.css
View File

@ -18,13 +18,23 @@ html, body { overflow-x: hidden; }
margin-left: 1.4em;
}
#udArrows {
#tabControls {
position: fixed;
z-index: 120;
height: 128px;
padding: 0em 0.4em 0.4em 0.4em;
width: auto;
background-color: rgba(9,107,120, 0.85);
color: rgb(255,255,255);
}
#bottomControls {
position: fixed;
bottom: 0;
margin-left: 25%;
}
#udArrows input {
#bottomControls input {
font-size: 2em;
background-color: rgba(79, 186, 70, 1);
color: rgba(255,255,255,1);
@ -33,7 +43,7 @@ html, body { overflow-x: hidden; }
padding: 0.1em;
}
#udArrows input:hover {
#bottomControls input:hover {
background-color: rgba(152, 152, 152, 1);
color: rgba(0,0,0,1);
cursor: pointer;
@ -41,6 +51,7 @@ html, body { overflow-x: hidden; }
}
#searchBar, #errorZone {
z-index: 888;
width: 630px;
background: rgb(255,255,255);
color: rgba(9,107,120, 0.85);
@ -100,16 +111,17 @@ html, body { overflow-x: hidden; }
}
.closeImg, .hiderImg {
padding: 0.5em;
padding: 0.2em;
width: 28px;
height: 28px;
clear: both;
float: left;
}
.pTagTitleText {
background-color: rgba(63, 63, 63, 0.64);
line-height: 1.5em;
margin-top: 2em;
margin-top: 4.5em;
height: 3em;
overflow: hidden;
text-overflow: ellipsis;

2
src/manifest.json
View File

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

8
src/pages/tabsSearch.html
View File

@ -14,7 +14,7 @@
<div id="listZone" class="container"></div>
<div id="errorZone" style="display: none;"></div>
<div id="udArrows">
<div id="bottomControls">
<input type="image" id="goTop" title="To Top" src="../icons/up-arrow.png" />
<input type="image" id="showAllBttn" title="Unhide All Tabs" src="../icons/eyeOpen.png" />
<input type="image" id="goToTab" title="Scroll Current Tab To View" src="../icons/go2-arrow.png" />
@ -24,11 +24,13 @@
<input type="image" id="goBottom" title="To Bottom" src="../icons/down-arrow.png"/>
</div>
<div id="tabControls" style="display: none;">
<img id="closeBttn" class="closeImg" src="../icons/x.png" />
<img id="hideTgglBttn" class="hiderImg" src="../icons/eyeOpen.png" />
</div>
<template id="tabContainerTemplate">
<div title="" id="iconElm" class="">
<img id="closeBttn" class="closeImg" src="" />
<img id="hideTgglBttn" class="hiderImg" src="" />
<p class="pTagTitleText" ></p>
</div>
</template>

12
src/scripts/dragContainersSetup.js
View File

@ -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) {

44
src/scripts/eventListeners.js
View File

@ -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");

39
src/scripts/generateView.js
View File

@ -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() {

23
src/scripts/showHideLogic.js
View File

@ -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";
}
}