+
+
+
+
+
+
+
-
diff --git a/src/scripts/dragContainersSetup.js b/src/scripts/dragContainersSetup.js
index 513a435..b92cbaa 100644
--- a/src/scripts/dragContainersSetup.js
+++ b/src/scripts/dragContainersSetup.js
@@ -15,7 +15,7 @@ var drake = dragula()
}
}
- browser.tabs.move(toMoveID, {index: newIndex}).then();
+ tabsAction.move(toMoveID, {index: newIndex}).then();
el.className += ' ex-moved';
}).on('over', function (el, container) {
container.className += ' ex-over';
diff --git a/src/scripts/eventListeners.js b/src/scripts/eventListeners.js
index 0d27020..4430f6f 100644
--- a/src/scripts/eventListeners.js
+++ b/src/scripts/eventListeners.js
@@ -1,30 +1,37 @@
// Set click events
document.addEventListener("click", (e) => {
- var target = e.target;
- var targetID = target.id;
+ var target = e.target;
+ var targetID = target.id;
var parentElm = target.parentElement;
+ var id = 0;
if (targetID == "closeBttn") {
- var id = parseInt(parentElm.getAttribute("tabID"));
+ id = parseInt(parentElm.getAttribute("tabID"));
- browser.tabs.remove(id).then(function () {
- console.log("Removed tab..." + id)
- }, onError);
+ browser.tabs.remove(id);
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"));
- }
+ if (targetID == "faveIcon")
+ target = parentElm.parentElement;
- browser.tabs.update(id, { active: true }).then(function () {
- console.log("Selected tab..." + id)
- }, onError);
+ oldElm.setAttribute("class", "block");
+ oldElm = target;
+ target.setAttribute("class", "block block-focused");
+
+ id = parseInt(target.getAttribute("tabID"));
+ browser.tabs.update(id, { active: true });
+ } else if (targetID == "goTop") {
+ window.scrollTo(0,0);
+ } else if (targetID == "goBottom") {
+ window.scrollTo(0,document.body.scrollHeight);
+ } else if (targetID == "goToTab") {
+ // Go to selected and 100px up
+ oldElm.scrollIntoView();
+ window.scrollBy(0, -100);
}
});
-document.getElementById("searchBar").onkeypress = function(e){
+document.getElementById("searchBar").onkeypress = function () {
searchTabs();
}
diff --git a/src/scripts/generateView.js b/src/scripts/generateView.js
index 137aa5c..2d592a3 100644
--- a/src/scripts/generateView.js
+++ b/src/scripts/generateView.js
@@ -1,50 +1,89 @@
-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...");
-
+const tabsAction = browser.tabs;
+const searchBar = document.getElementById("searchBar");
+const errHandler = document.getElementById("errorZone");
+const listZone = document.getElementById("listZone");
+const notFoundText = document.createTextNode("Search not found...");
+var oldElm = "";
+var plusTag = ""
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);
+ addPlusContainer();
+ // Set poped-out-window position and 100px up from selected elm
+ oldElm.scrollIntoView();
+ window.scrollBy(0, -100);
}
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");
+ 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";
+ spanTag.setAttribute("tabID", tab.id);
+ spanTag.title = tab.title;
+ spanTag.id = "iconElm";
+ spanTag.className = "block";
+ closeImgTag.id = "closeBttn";
closeImgTag.className = "closeImg";
- closeImgTag.src = "../icons/x.png";
-
- icoImgTag.id = "faveIcon";
- icoImgTag.className = "thumbImg";
- icoImgTag.onerror = function() { icoImgTag.src = "../icons/tab.png"; }
- icoImgTag.src = tab.favIconUrl;
+ closeImgTag.src = "../icons/x.png";
+ icoImgTag.id = "faveIcon";
+ icoImgTag.className = "thumbImg";
+ icoImgTag.onerror = function() { icoImgTag.src = "../icons/tab.png"; }
+ icoImgTag.src = tab.favIconUrl;
centerTag.appendChild(icoImgTag);
spanTag.appendChild(closeImgTag);
spanTag.appendChild(centerTag);
spanTag.appendChild(iconText);
listZone.appendChild(spanTag);
+
+ // Set oldElm so eventListeners.js has starting ref
+ if (tab.active == true) {
+ spanTag.className = "block block-focused";
+ if (oldElm) {
+ oldElm.setAttribute("class", "block");
+ }
+ oldElm = spanTag;
+ }
}
+function addPlusContainer() {
+ var spanTag = document.createElement("SPAN");
+ var centerTag = document.createElement("CENTER");
+ var icoImgTag = document.createElement("IMG");
+
+ spanTag .addEventListener("click", createTab);
+ spanTag.title = "Open a new tab...";
+ spanTag.className = "block";
+ icoImgTag.style = "width: 100%; height:auto";
+ icoImgTag.src = "../icons/plus.png";
+
+ centerTag.appendChild(icoImgTag);
+ spanTag.appendChild(centerTag);
+ listZone.appendChild(spanTag);
+ plusTag = spanTag;
+}
+
+function createTab() {
+ tabsAction.create({})
+ .then(function (tab) {
+ createContainer(tab);
+ }).then(function () {
+ listZone.appendChild(plusTag);
+ });
+}
function onError(error) { console.log(`Error: ${error}`); }
-function getAllTabs() { tabQuery.then(logTabs, onError); }
-getAllTabs();
+function getTabs(tabs) {
+ // Get current tab and then list of tabs
+ tabsAction.query({currentWindow: true})
+ .then(logTabs, onError);
+}
+getTabs();
diff --git a/src/scripts/searchTabs.js b/src/scripts/searchTabs.js
index f10fc8a..2c156ce 100644
--- a/src/scripts/searchTabs.js
+++ b/src/scripts/searchTabs.js
@@ -35,4 +35,8 @@ function clearNodes(targetNode) {
}
function loadSelTab(id) { browser.tabs.update(id, { active: true }); }
-function searchTabs() { tabQuery.then(findTabs, onError); }
+
+function searchTabs() {
+ tabsAction.query({currentWindow: true})
+ .then(findTabs, onError);
+}