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

New version plus look.

This commit is contained in:
Maxim Stewart 2018-04-20 01:06:32 -05:00
parent f576e96a64
commit f0a93ebf47
14 changed files with 250 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
bin/amo/tab_search-1.1.5-an+fx.xpi Normal file
View File

Binary file not shown.

BIN
src/backgrounds/bg1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

1
src/css/dragula.min.css vendored Normal file
View File

@ -0,0 +1 @@
.gu-mirror{position:fixed!important;margin:0!important;z-index:9999!important;opacity:.8;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter:alpha(opacity=80)}.gu-hide{display:none!important}.gu-unselectable{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.gu-transit{opacity:.2;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter:alpha(opacity=20)}

112
src/css/tabsSearch.css
View File

@ -1,51 +1,87 @@
body {
background: rgb(255,255,255);
width: 18em;
html, body {
overflow-x: hidden;
min-height: 2.5em;
}
#listZone { padding-top: 2.5em; }
#toFind {
position: fixed;
top: 0.5em;
z-index: 100;
width: 90%;
background: rgb(255,255,255);
color: rgb(0,0,0);
border-style: solid;
border-color: rgb(0, 0, 0);
text-align: center;
padding: 0.5em;
}
.box:hover { background-color: #3EA724; }
.box {
#masterContainer, div[id*="listZone"], .block {
display: block;
cursor: pointer;
background-color: #444444;
border-radius: 5px;
padding: 20px;
width: 120px;
height: 120px;
overflow: hidden;
margin: 0 auto;
padding: 1em;
}
#masterContainer {
background-image: url("../backgrounds/bg1.jpg");
background-repeat: repeat;
width: 710px;
height: auto;
}
#controls {
position: fixed;
top: 0;
background: rgba(255,255,255, 1);
margin-left: 1.5em;
}
#searchBar, #errorZone {
width: 630px;
background: rgb(255,255,255);
color: rgba(9,107,120, 0.85);
border-color: rgba(9,107,120, 0.85);
text-align: center;
}
#searchBar {
border-style: solid;
padding: 0.5em;
font-size: 2em;
}
#errorZone {
color: red;
border-style: dotted;
margin-top: 2em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
#listZone {
background-color: rgba(9,107,120, 0.85);
float: left;
width: 630px;
height: auto;
margin: 1.5em;
}
.block {
display: block;
background-color: rgba(158, 181, 219, 0.53);
color: rgba(255,255,255,1);
float: left;
width: 125px;
height: 125px;
clear: right;
overflow: hidden;
margin: 1.5em;
}
.block:hover {
cursor: pointer;
background-color: rgba(255, 255, 255, 0.8);
color: rgba(64,64,64, 0.84);
}
.thumbImg {
clear: left;
width: 64px;
height: 64px;
margin-left: auto;
margin-right: auto;
}
.title {
float: left;
clear: left;
height: 55px;
max-width: 120px;
overflow: hidden;
color: #ffffff;
.closeImg {
background-color: rgba(79, 186, 70, 1);
width: 16px;
height: 16px;
float: right;
padding: .5em;
}
.closeImg:hover {
background-color: rgba(255, 0, 0, 1);
}

BIN
src/icons/tab.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/icons/x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

12
src/manifest.json
View File

@ -1,12 +1,13 @@
{
"manifest_version": 2,
"name": "Tab Search",
"version": "1.1.0",
"version": "1.1.5",
"description": "Search Tabs and switch to them quickly.",
"applications": {
"gecko": {
"id": "tabsSearch@itdominator.com"
"id": "tabsSearch@itdominator.com",
"strict_min_version": "55.0"
}
},
@ -15,8 +16,12 @@
"96": "icons/tabsSearch_96.png"
},
"web_accessible_resources": [
"icons/*.png",
"backgrounds/*.jpg"
],
"permissions": [
"activeTab",
"tabs"
],
@ -25,5 +30,4 @@
"default_title": "Tab Search",
"default_popup": "pages/tabsSearch.html"
}
}

18
src/pages/tabsSearch.html
View File

@ -2,14 +2,24 @@
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../css/dragula.min.css">
<link rel="stylesheet" href="../css/tabsSearch.css"/>
</head>
<body>
<body id="masterContainer">
<div id="controls">
<input id="searchBar" type="text" placeholder="Search tabs..." value="" autofocus />
</div>
<div id="listZone" class="container">
</div>
<input id="toFind" type="text" placeholder="Search tabs..." value=""/>
<div id="listZone"></div>
<div id="errorZone" style="display: none;"></div>
<script src="../scripts/tabsSearch.js"></script>
<script src="../scripts/libs/dragula.min.js" charset="utf-8"></script>
<script src="../scripts/dragContainersSetup.js" charset="utf-8"></script>
<script src="../scripts/generateView.js"></script>
<script src="../scripts/searchTabs.js"></script>
<script src="../scripts/eventListeners.js" charset="utf-8"></script>
</body>
</html>

27
src/scripts/dragContainersSetup.js Normal file
View File

@ -0,0 +1,27 @@
var count = 2; toMoveID = 0, newIndex = 0;;
var insert = "";
var drake = dragula()
.on('drag', function (el) {
toMoveID = parseInt(el.getAttribute("tabID"));
el.className = el.className.replace('ex-moved', '');
}).on('drop', function (el, container) {
var subCont = document.getElementById("listZone");
var size = subCont.children.length;
for (var i = 0; i < size; i++) {
if (subCont.children[i].getAttribute("tabID") == toMoveID) {
newIndex = i;
}
}
browser.tabs.move(toMoveID, {index: newIndex}).then();
el.className += ' ex-moved';
}).on('over', function (el, container) {
container.className += ' ex-over';
}).on('out', function (el, container) {
container.className = container.className.replace('ex-over', '');
});
// Connect to pre created containers
drake.containers.push(document.querySelector('#listZone'));

30
src/scripts/eventListeners.js Normal file
View File

@ -0,0 +1,30 @@
// Set click events
document.addEventListener("click", (e) => {
var target = e.target;
var targetID = target.id;
var parentElm = target.parentElement;
if (targetID == "closeBttn") {
var id = parseInt(parentElm.getAttribute("tabID"));
browser.tabs.remove(id).then(function () {
console.log("Removed tab..." + id)
}, onError);
parentElm.parentElement.removeChild(parentElm);
} else if (targetID == "iconElm" || targetID == "faveIcon") {
if (targetID == "faveIcon") {
var id = parseInt(parentElm.parentElement.getAttribute("tabID"));
} else {
var id = parseInt(target.getAttribute("tabID"));
}
browser.tabs.update(id, { active: true }).then(function () {
console.log("Selected tab..." + id)
}, onError);
}
});
document.getElementById("searchBar").onkeypress = function(e){
searchTabs();
}

53
src/scripts/generateView.js Normal file
View File

@ -0,0 +1,53 @@
const tabQuery = browser.tabs.query({currentWindow: true});
const searchBar = document.getElementById("searchBar");
const errHandler = document.getElementById("errorZone");
const listZone = document.getElementById("listZone");
const notFoundText = document.createTextNode("Search not found...");
function logTabs(tabs) {
// tab.url requires the `tabs` permission
for (let tab of tabs) {
createContainer(tab);
}
// Set window position to bottom of list
window.scrollTo(0,document.body.scrollHeight);
}
function createContainer(tab) {
var id = tab.id;
var spanTag = document.createElement("SPAN");
var iconText = document.createTextNode(tab.title);
var centerTag = document.createElement("CENTER");
var closeImgTag = document.createElement("IMG");
var icoImgTag = document.createElement("IMG");
spanTag.title = tab.title;
spanTag.id = "iconElm";
spanTag.className = "block";
spanTag.setAttribute("tabID",tab.id);
closeImgTag.id = "closeBttn";
closeImgTag.className = "closeImg";
closeImgTag.src = "../icons/x.png";
icoImgTag.id = "faveIcon";
icoImgTag.className = "thumbImg";
if (tab.favIconUrl == null || tab.favIconUrl == "") {
icoImgTag.src = "../icons/tab.png";
} else {
icoImgTag.src = tab.favIconUrl;
}
centerTag.appendChild(icoImgTag);
spanTag.appendChild(closeImgTag);
spanTag.appendChild(centerTag);
spanTag.appendChild(iconText);
listZone.appendChild(spanTag);
}
function onError(error) { console.log(`Error: ${error}`); }
function getAllTabs() { tabQuery.then(logTabs, onError); }
getAllTabs();

1
src/scripts/libs/dragula.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

38
src/scripts/searchTabs.js Normal file
View File

@ -0,0 +1,38 @@
function findTabs(tabs) {
var selection = [];
clearNodes(listZone);
if (searchBar.value != "") {
for (let tab of tabs) {
var title = tab.title;
if (title.toLowerCase().includes(searchBar.value.toLowerCase())) {
selection.push(tab);
}
}
if (selection.length > 1) {
for (let sel of selection) {
createContainer(sel)
}
errHandler.style.display = "none";
clearNodes(errHandler);
} else {
if (selection[0] != undefined) {
errHandler.style.display = "none";
clearNodes(errHandler);
loadSelTab(selection[0].id);
} else {
errHandler.style.display = "block";
errHandler.appendChild(notFoundText);
}
}
} else { logTabs(tabs); }
}
function clearNodes(targetNode) {
while (targetNode.firstChild) {
targetNode.removeChild(targetNode.firstChild);
}
}
function loadSelTab(id) { browser.tabs.update(id, { active: true }); }
function searchTabs() { tabQuery.then(findTabs, onError); }

81
src/scripts/tabsSearch.js
View File

@ -1,81 +0,0 @@
const toFind = document.getElementById("toFind");
const tabQuery = browser.tabs.query({currentWindow: true});
const errHandler = document.getElementById("errorZone");
const listZone = document.getElementById("listZone");
const notFoundText = document.createTextNode("Search not found...");
document.getElementById("toFind").onkeypress = function(e){
searchTabs();
}
document.addEventListener("click", (e) => {
if (e.target.id != "toFind" && e.target.id != "listZone" ) {
if (e.target.tagName == "IMG") {
var parent = e.target.parentNode;
loadSelTab(parseInt(parent.id));
} else {
loadSelTab(parseInt(e.target.id));
}
}
});
function logTabs(tabs) {
var selection = [];
clearNodes(listZone);
if (toFind.value != "") {
for (let tab of tabs) {
var title = tab.title;
if (title.toLowerCase().includes(toFind.value.toLowerCase())) {
selection.push(tab);
}
}
if (selection.length > 1) {
for (let sel of selection) {
icon = document.createElement("DIV");
thumbnail = document.createElement("IMG");
title = document.createElement("P");
lineBreak = document.createElement("BR");
titleText = document.createTextNode(sel.title);
icon.id = sel.id;
icon.className = "box";
thumbnail.className = "thumbImg";
thumbnail.src = sel.favIconUrl;
title.className = "title";
icon.appendChild(thumbnail);
icon.appendChild(title);
title.appendChild(titleText);
listZone.appendChild(icon);
listZone.appendChild(lineBreak);
}
errHandler.style.display = "none";
clearNodes(errHandler);
} else {
if (selection[0] != undefined) {
errHandler.style.display = "none";
clearNodes(errHandler);
loadSelTab(selection[0].id);
} else {
errHandler.style.display = "block";
errHandler.appendChild(notFoundText);
}
}
}
}
function loadSelTab(id) {
browser.tabs.update(id, {
active: true
});
}
function clearNodes(targetNode) {
while (targetNode.firstChild) {
targetNode.removeChild(targetNode.firstChild);
}
}
function searchTabs() { tabQuery.then(logTabs, onError); }
function onError(error) { console.log(`Error: ${error}`); }