New version plus look.
This commit is contained in:
parent
f576e96a64
commit
f0a93ebf47
Binary file not shown.
Binary file not shown.
After Width: | Height: | Size: 5.9 KiB |
|
@ -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)}
|
|
@ -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; }
|
||||
#masterContainer, div[id*="listZone"], .block {
|
||||
display: block;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
#toFind {
|
||||
#masterContainer {
|
||||
background-image: url("../backgrounds/bg1.jpg");
|
||||
background-repeat: repeat;
|
||||
width: 710px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#controls {
|
||||
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;
|
||||
top: 0;
|
||||
background: rgba(255,255,255, 1);
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
|
||||
.box:hover { background-color: #3EA724; }
|
||||
.box {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
background-color: #444444;
|
||||
border-radius: 5px;
|
||||
padding: 20px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
#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);
|
||||
}
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
After Width: | Height: | Size: 1.1 KiB |
|
@ -1,12 +1,13 @@
|
|||
{
|
||||
"manifest_version": 2,
|
||||
"name": "Tab Search",
|
||||
"version": "1.1.0",
|
||||
"description": "Search Tabs and switch to them quickly.",
|
||||
"manifest_version": 2,
|
||||
"name": "Tab Search",
|
||||
"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,15 +16,18 @@
|
|||
"96": "icons/tabsSearch_96.png"
|
||||
},
|
||||
|
||||
"web_accessible_resources": [
|
||||
"icons/*.png",
|
||||
"backgrounds/*.jpg"
|
||||
],
|
||||
|
||||
"permissions": [
|
||||
"activeTab",
|
||||
"tabs"
|
||||
],
|
||||
|
||||
"browser_action": {
|
||||
"default_icon": "icons/tabsSearch_48.png",
|
||||
"default_title": "Tab Search",
|
||||
"default_popup": "pages/tabsSearch.html"
|
||||
"default_icon": "icons/tabsSearch_48.png",
|
||||
"default_title": "Tab Search",
|
||||
"default_popup": "pages/tabsSearch.html"
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -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">
|
||||
|
||||
<input id="toFind" type="text" placeholder="Search tabs..." value=""/>
|
||||
<div id="listZone"></div>
|
||||
<div id="errorZone" style="display: none;"></div>
|
||||
<div id="controls">
|
||||
<input id="searchBar" type="text" placeholder="Search tabs..." value="" autofocus />
|
||||
</div>
|
||||
|
||||
<script src="../scripts/tabsSearch.js"></script>
|
||||
<div id="listZone" class="container">
|
||||
</div>
|
||||
|
||||
<div id="errorZone" style="display: none;"></div>
|
||||
|
||||
<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>
|
||||
|
|
|
@ -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'));
|
|
@ -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();
|
||||
}
|
|
@ -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();
|
File diff suppressed because one or more lines are too long
|
@ -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); }
|
|
@ -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}`); }
|
Loading…
Reference in New Issue