,
- // since it contains other metadata;
- //console.time('build');
- rawResultsLen = rawResults.length;
- for (i = 0; i < rawResultsLen; i++) {
- results.push(options.id ? rawResults[i].item[options.id] : rawResults[i].item);
- }
-
- //console.timeEnd('build');
-
- //console.timeEnd('total');
-
- return results;
- }
- }
-
- //Export to Common JS Loader
- if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
- if (typeof module.setExports === 'function') {
- module.setExports(Fuse);
- } else {
- module.exports = Fuse;
- }
- } else {
- window.Fuse = Fuse;
- }
-
-})();
\ No newline at end of file
diff --git a/init.html b/init.html
index 476f5a5..166ff8a 100755
--- a/init.html
+++ b/init.html
@@ -1,2 +1,2 @@
-
+
diff --git a/manifest.json b/manifest.json
index 68af568..df8cee9 100755
--- a/manifest.json
+++ b/manifest.json
@@ -2,9 +2,10 @@
"manifest_version": 2,
"name": "Better Bookmark",
- "description": "Easily add bookmarks to any category. Includes spotlight-like search with mouse/keyboard support. Default key: cmd+b (win:ctrl+b)",
+ "description":
+ "Easily add bookmarks to any category. Includes spotlight-like search with mouse/keyboard support. Default key: cmd+b (win:ctrl+b)",
"version": "1.5.0",
- "author": "Szymon Pilkowski",
+ "author": "Szymon Pilkowski, Dmitry Galakhov",
"homepage_url": "https://github.com/galakhov/chrome-better-bookmark",
"default_locale": "en",
@@ -29,7 +30,6 @@
},
"commands": {
"_execute_browser_action": {
-
"suggested_key": {
"default": "Ctrl+B",
"windows": "Ctrl+B",
@@ -40,9 +40,5 @@
}
},
- "permissions": [
- "bookmarks",
- "tabs",
- "contextMenus"
- ]
+ "permissions": ["bookmarks", "tabs", "contextMenus"]
}
diff --git a/selectCategory.js b/selectCategory.js
index 4ba2f2c..eed48ad 100755
--- a/selectCategory.js
+++ b/selectCategory.js
@@ -9,33 +9,32 @@ var UP_KEYCODE = 38;
var CONFIRM_KEYCODE = 13;
function filterRecursively(nodeArray, childrenProperty, filterFn, results) {
-
results = results || [];
- nodeArray.forEach( function( node ) {
+ nodeArray.forEach(function(node) {
if (filterFn(node)) {
- results.push( node );
+ results.push(node);
}
if (node.children) {
- filterRecursively(node.children, childrenProperty, filterFn, results);
+ filterRecursively(node.children, childrenProperty, filterFn, results);
}
});
return results;
-
-};
+}
function setFullPathRecursively(el, node, titles) {
-
var currentNode = node;
- var getParentNode = chrome.bookmarks.get(currentNode.parentId, function( parentNode ) {
+ var getParentNode = chrome.bookmarks.get(currentNode.parentId, function(
+ parentNode
+ ) {
if (parentNode[0] && parentNode[0].parentId > 0) {
titles.unshift(parentNode[0].title);
currentNode = parentNode[0];
setFullPathRecursively(el, currentNode, titles);
} else {
- setTimeout( function() {
+ setTimeout(function() {
el.setAttribute("data-tooltip", titles.join(" > "));
}, 0);
}
@@ -43,14 +42,13 @@ function setFullPathRecursively(el, node, titles) {
}
function createUiElement(node) {
-
var el = document.createElement("div");
el.setAttribute("data-id", node.id);
el.setAttribute("data-count", node.children.length);
el.setAttribute("data-title", node.title);
el.setAttribute("data-parent-id", node.parentId);
el.classList.add("bookmark");
- var getParentNode = chrome.bookmarks.get(node.parentId, function( parentNode ) {
+ var getParentNode = chrome.bookmarks.get(node.parentId, function(parentNode) {
if (parentNode[0] && parentNode[0].parentId > 0) {
setFullPathRecursively(el, node, []);
}
@@ -64,135 +62,123 @@ function createUiElement(node) {
}
function appendRadioButtonParentSelector(el, parentId) {
- var theInput = document.createElement("input");
- theInput.setAttribute('type', "radio");
- theInput.setAttribute('name', "parent-id");
- theInput.setAttribute('class', "bookmark__parent-id-selector");
- theInput.setAttribute('value', parentId);
- // if radio button was clicked grab the value of the parent and pass it over
- theInput.addEventListener("click", function(e) {
- var parentSelected = this.parentNode;
- if (parentSelected != null) {
- var dirName = parentSelected.getAttribute('data-tooltip');
- if (dirName != null) {
- dirName += " > ";
- } else {
- dirName = '';
- }
- dirName += parentSelected.getElementsByTagName("span")[0].textContent;
-
- var output = document.querySelector('.bookmark__parent-output header');
- if (output != null) {
- output.innerHTML = "" + chrome.i18n.getMessage("parentdir") + ":
";
- output.innerHTML += "" + dirName + "
";
- if (!output.parentNode.classList.contains('visible')) {
- output.parentNode.classList.add('visible');
- }
- var hiddenInput = document.querySelector('.bookmark__parent-hidden');
- hiddenInput.setAttribute("value", parentSelected.getAttribute('data-id'));
-
+ var theInput = document.createElement("input");
+ theInput.setAttribute("type", "radio");
+ theInput.setAttribute("name", "parent-id");
+ theInput.setAttribute("class", "bookmark__parent-id-selector");
+ theInput.setAttribute("value", parentId);
+ // if radio button was clicked grab the value of the parent and pass it over
+ theInput.addEventListener("click", function(e) {
+ var parentSelected = this.parentNode;
+ if (parentSelected != null) {
+ var dirName = parentSelected.getAttribute("data-tooltip");
+ if (dirName != null) {
+ dirName += " > ";
+ } else {
+ dirName = "";
+ }
+ dirName += parentSelected.getElementsByTagName("span")[0].textContent;
+
+ var output = document.querySelector(".bookmark__parent-output header");
+ if (output != null) {
+ output.innerHTML =
+ "" +
+ chrome.i18n.getMessage("parentdir") +
+ ":
";
+ output.innerHTML += "" + dirName + "
";
+ if (!output.parentNode.classList.contains("visible")) {
+ output.parentNode.classList.add("visible");
}
+ var hiddenInput = document.querySelector(".bookmark__parent-hidden");
+ hiddenInput.setAttribute(
+ "value",
+ parentSelected.getAttribute("data-id")
+ );
}
- });
- el.appendChild(theInput);
-
- return el;
-}
-
-function handleChangeOfParentSelector() {
+ }
+ });
+ el.appendChild(theInput);
+ return el;
}
function triggerClick(element) {
-
- if (element.nodeName.toLowerCase() === 'span') {
- element = element.parentNode;
+ if (element.nodeName.toLowerCase() === "span") {
+ element = element.parentNode;
}
var categoryId = element.getAttribute("data-id");
var newCategoryTitle;
if (categoryId == "NEW") {
-
newCategoryTitle = element.getAttribute("data-title");
- var checkedElId = document.querySelector('.bookmark__parent-hidden');
- var selectedParentId = selectedParentId != null ? checkedElId.value : null;
- chrome.bookmarks.create({
- 'parentId': selectedParentId,
- 'title': newCategoryTitle
- }, function(res) {
- processBookmark(res.id);
- })
+ var checkedElId = document.querySelector(".bookmark__parent-hidden");
+ var selectedParentId = checkedElId.value != "" ? checkedElId.value : null;
+ chrome.bookmarks.create(
+ {
+ parentId: selectedParentId,
+ title: newCategoryTitle
+ },
+ function(res) {
+ processBookmark(res.id);
+ }
+ );
} else {
processBookmark(categoryId);
}
-
}
function processBookmark(categoryId) {
-
getCurrentUrlData(function(url, title) {
-
if (title && categoryId && url) {
addBookmarkToCategory(categoryId, title, url);
window.close();
}
-
});
-
}
function addBookmarkToCategory(categoryId, title, url) {
-
chrome.bookmarks.create({
- 'parentId': categoryId,
- 'title': title,
- 'url': url
+ parentId: categoryId,
+ title: title,
+ url: url
});
-
}
function getCurrentUrlData(callbackFn) {
-
- chrome.tabs.query({'active': true, 'currentWindow': true}, function (tabs) {
- callbackFn(tabs[0].url, tabs[0].title)
+ chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
+ callbackFn(tabs[0].url, tabs[0].title);
});
-
}
-function createUiFromNodes( categoryNodes ) {
-
+function createUiFromNodes(categoryNodes) {
var categoryUiElements = [];
currentNodeCount = categoryNodes.length;
- categoryNodes.forEach( function( node ) {
- categoryUiElements.push( createUiElement(node) );
- })
-
- categoryUiElements.forEach( function( element ) {
- wrapper.appendChild( element );
+ categoryNodes.forEach(function(node) {
+ categoryUiElements.push(createUiElement(node));
});
-};
+ categoryUiElements.forEach(function(element) {
+ wrapper.appendChild(element);
+ });
+}
function resetUi() {
-
wrapper.innerHTML = "";
-
-};
+}
function focusItem(index) {
-
- if (focusedElement) focusedElement.classList.remove("focus");
+ if (focusedElement) {
+ focusedElement.classList.remove("focus");
+ }
focusedElement = wrapper.childNodes[index];
focusedElement.classList.add("focus");
focusedElement.scrollIntoView(false);
-
}
function addCreateCategoryButton(categoryName) {
-
var el = document.createElement("div");
el.setAttribute("data-id", "NEW");
el.setAttribute("data-title", categoryName);
@@ -201,50 +187,55 @@ function addCreateCategoryButton(categoryName) {
el.setAttribute("data-tooltip-position", "bottom"); // set position of the tooltip
el.classList.add("create");
el.setAttribute("data-tooltip", chrome.i18n.getMessage("caption"));
- el.innerHTML = "" + chrome.i18n.getMessage("new") + ": " + categoryName + " ";
+ el.innerHTML =
+ "" + chrome.i18n.getMessage("new") + ": " + categoryName + " ";
wrapper.appendChild(el);
currentNodeCount = currentNodeCount + 1;
-
}
function addHiddenOutput() {
- // add hidden element to output a parent directory later
- var output = document.createElement("div");
- output.setAttribute("class", "bookmark__parent-output");
- var header = document.createElement("header");
- output.appendChild(header);
- var input = document.createElement("input");
- input.setAttribute("type", "hidden");
- input.setAttribute("name", "parentid");
- input.setAttribute("class", "bookmark__parent-hidden");
- output.appendChild(input);
-
- return output;
+ // add hidden element to output a parent directory later
+ var output = document.createElement("div");
+ output.setAttribute("class", "bookmark__parent-output");
+ var header = document.createElement("header");
+ output.appendChild(header);
+ var input = document.createElement("input");
+ input.setAttribute("type", "hidden");
+ input.setAttribute("name", "parentid");
+ input.setAttribute("class", "bookmark__parent-hidden");
+ output.appendChild(input);
+
+ return output;
}
function createInitialTree() {
-
- chrome.bookmarks.getTree( function(t) {
-
+ chrome.bookmarks.getTree(function(t) {
wrapper = document.getElementById("wrapper");
var options = {
- keys: ['title'],
- threshold: 0.4
- }
+ shouldSort: true,
+ threshold: 0.4,
+ location: 0,
+ distance: 100,
+ maxPatternLength: 150,
+ minMatchCharLength: 2,
+ keys: ["title"]
+ };
categoryNodes = filterRecursively(t, "children", function(node) {
return !node.url && node.id > 0; // include folders only
}).sort(function(a, b) {
return b.dateGroupModified - a.dateGroupModified;
- })
+ });
- createUiFromNodes( categoryNodes );
+ createUiFromNodes(categoryNodes);
wrapper.style.width = wrapper.clientWidth + "px";
- if (currentNodeCount > 0) focusItem(0);
+ if (currentNodeCount > 0) {
+ focusItem(0);
+ }
fuzzySearch = new Fuse(categoryNodes, options);
@@ -253,14 +244,11 @@ function createInitialTree() {
wrapper.addEventListener("click", function(e) {
triggerClick(e.target);
- })
-
+ });
});
-
}
(function() {
-
var searchElement = document.getElementById("search");
var text = "";
var newNodes;
@@ -269,48 +257,51 @@ function createInitialTree() {
createInitialTree();
searchElement.addEventListener("keydown", function(e) {
-
if (e.keyCode == UP_KEYCODE) {
e.preventDefault();
index = index - 1;
- if (index < 0) index = currentNodeCount - 1;
+ if (index < 0) {
+ index = currentNodeCount - 1;
+ }
focusItem(index);
-
} else if (e.keyCode == DOWN_KEYCODE) {
e.preventDefault();
index = index + 1;
- if (index >= currentNodeCount) index = 0;
+ if (index >= currentNodeCount) {
+ index = 0;
+ }
focusItem(index);
-
} else if (e.keyCode == CONFIRM_KEYCODE) {
- if (currentNodeCount > 0) triggerClick(focusedElement);
-
+ if (currentNodeCount > 0) {
+ triggerClick(focusedElement);
+ }
} else {
// to get updated input value, we need to schedule it to the next tick
- setTimeout( function() {
+ setTimeout(function() {
text = document.getElementById("search").value;
if (text.length) {
newNodes = fuzzySearch.search(text);
resetUi();
createUiFromNodes(newNodes);
- if (newNodes.length) focusItem(0);
+ if (newNodes.length) {
+ focusItem(0);
+ }
if (!newNodes.length || text !== newNodes[0].title) {
addCreateCategoryButton(text);
}
-
} else {
resetUi();
createUiFromNodes(categoryNodes);
- if (currentNodeCount > 0) focusItem(0);
+ if (currentNodeCount > 0) {
+ focusItem(0);
+ }
}
index = 0;
}, 0);
}
-
- })
+ });
searchElement.focus();
-
})();
From ee9b3919f60b64d75853f55fe5fe1b6754230629 Mon Sep 17 00:00:00 2001
From: "D. Galakhov"
Date: Sun, 4 Nov 2018 12:31:37 +0100
Subject: [PATCH 08/36] Overview of child folders in a chosen folder if there
are any (the sub tree feature).
---
README.md | 3 +-
background.html | 39 ++++++++++++-
selectCategory.js | 139 ++++++++++++++++++++++++++++++++++------------
3 files changed, 143 insertions(+), 38 deletions(-)
diff --git a/README.md b/README.md
index d81d2e3..395e5be 100755
--- a/README.md
+++ b/README.md
@@ -1,7 +1,8 @@
# This fork is heavily optimised for people who sticks to the hierarchical folder structure in their bookmarks
- Better-Bookmark-Button extension is now equipped with captions showing up the full path to the current hovered category.
-- Now you can also choose the parent directory for the new folder that is being created (in the original version all folders were put into the "Other Bookmarks" first).
+- Now you can also choose the parent directory for the new folder that is being created (in the original version all folders were put into the "Other Bookmarks" with flat structure first).
+- Another new feature helps you to get a quick overview of child folders (to see the sub tree) in a chosen directory.
- Fuse.js library updated to v3.3.0 and max amount of characters for the search pattern is set to 150, therefore, "Pattern length is too long" error shouldn't now block the search (or bitapRegexSearch will be used instead).
# chrome-better-bookmark
diff --git a/background.html b/background.html
index 4fc9890..7b86024 100755
--- a/background.html
+++ b/background.html
@@ -88,6 +88,43 @@
overflow: auto;
}
+ .bookmark__parent-output footer {
+ margin-bottom: 10px;
+ }
+
+ .bookmark__parent-output footer .bookmark i {
+ font-style: normal;
+ float: left;
+ margin-top: 3px;
+ margin-left: 3px;
+ }
+
+ .bookmark__parent-output footer .bookmark__title {
+ margin-left: 5px;
+ padding: 2px 6px;
+ }
+
+ .bookmark__parent-output footer li .bookmark__title {
+ width: 70%;
+ }
+
+ .bookmark__parent-output footer .bookmark__parent-id-selector {
+ float: left;
+ margin-top: 5px;
+ margin-left: 4px;
+ width: 12px;
+ }
+
+ .bookmark__parent-output footer ul {
+ list-style-type: none;
+ margin-left: 10px;
+ padding-left: 0px
+ }
+
+ .bookmark__parent-output footer ul li {
+ margin-left: 5px;
+ }
+
/* thanks to: https://stackoverflow.com/questions/1055581/how-do-i-add */
[data-tooltip] {
/* display: inline-block; */
@@ -158,7 +195,7 @@
/* Dynamic horizontal centering for the tooltip */
[data-tooltip-position="top"]:after,
[data-tooltip-position="bottom"]:after {
- left: 95%;
+ left: 92%;
margin-left: -6px;
}
/* Dynamic vertical centering for the tooltip */
diff --git a/selectCategory.js b/selectCategory.js
index eed48ad..6622920 100755
--- a/selectCategory.js
+++ b/selectCategory.js
@@ -41,26 +41,113 @@ function setFullPathRecursively(el, node, titles) {
});
}
-function createUiElement(node) {
+function createUiElement(node, captions = true) {
var el = document.createElement("div");
el.setAttribute("data-id", node.id);
el.setAttribute("data-count", node.children.length);
el.setAttribute("data-title", node.title);
el.setAttribute("data-parent-id", node.parentId);
el.classList.add("bookmark");
- var getParentNode = chrome.bookmarks.get(node.parentId, function(parentNode) {
- if (parentNode[0] && parentNode[0].parentId > 0) {
- setFullPathRecursively(el, node, []);
- }
- });
+ if (captions) {
+ var getParentNode = chrome.bookmarks.get(node.parentId, function(
+ parentNode
+ ) {
+ if (parentNode[0] && parentNode[0].parentId > 0) {
+ setFullPathRecursively(el, node, []);
+ }
+ });
+ }
// TODO: get position of the tooltip from the extension options and pass it over here
el.setAttribute("data-tooltip-position", "bottom"); // position of the tooltip
el.innerHTML = "" + node.title + " ";
el = appendRadioButtonParentSelector(el, node.parentId);
-
return el;
}
+function showFullPathOfParentDir(parentSelected) {
+ if (parentSelected != null) {
+ var dirName = parentSelected.getAttribute("data-tooltip");
+ if (dirName != null) {
+ dirName += " > ";
+ } else {
+ dirName = "";
+ }
+ dirName += parentSelected.getElementsByTagName("span")[0].textContent;
+
+ var output = document.querySelector(".bookmark__parent-output header");
+ if (output != null) {
+ output.innerHTML =
+ "" + chrome.i18n.getMessage("parentdir") + ":
";
+ output.innerHTML += "" + dirName + "
";
+ if (!output.parentNode.classList.contains("visible")) {
+ output.parentNode.classList.add("visible");
+ }
+ var hiddenInput = document.querySelector(".bookmark__parent-hidden");
+ hiddenInput.setAttribute("value", parentSelected.getAttribute("data-id"));
+ }
+ }
+}
+
+function showTreeOfSelectedNode(parentNodeId) {
+ chrome.bookmarks.getSubTree(parentNodeId, drawTree);
+}
+
+function getDirectoriesInChildren(categoryNodes) {
+ return filterRecursively(categoryNodes, "children", function(node) {
+ return !node.url && node.id > 0;
+ });
+}
+
+function drawTree(categoryNodes) {
+ if (categoryNodes[0] && categoryNodes[0].children.length > 0) {
+ var footer = document.querySelector(".bookmark__parent-output footer");
+ while (footer.firstChild) {
+ // remove the previously generated tree first
+ footer.removeChild(footer.firstChild);
+ }
+ footer.removeEventListener("click", handleAddBookmark);
+
+ var categoryChildren = getDirectoriesInChildren(categoryNodes[0].children);
+ var elementsWithUi = [];
+ categoryChildren.forEach(function(node) {
+ elementsWithUi.push(createUiElement(node, false));
+ });
+
+ if (categoryChildren.length > 0) {
+ // if there are children: i.e. subdirectories
+ var footerUl = document.createElement("ul");
+ var rootNodeId = categoryNodes[0].id;
+ var secondParent, currentNodeParentId, newEl, firstLevel;
+ secondParent = rootNodeId;
+ elementsWithUi.forEach(function(element) {
+ // make a tree
+ currentNodeParentId = element.getAttribute("data-parent-id");
+ if (currentNodeParentId !== rootNodeId) {
+ var footerUlLi = document.createElement("li");
+ if (currentNodeParentId === secondParent && firstLevel === true) {
+ // append another element (indented of two levels)
+ newEl = document.createElement("i");
+ newEl.innerHTML = " ↳";
+ element.insertBefore(newEl, element.firstChild);
+ } else {
+ firstLevel = true;
+ secondParent = element.getAttribute("data-id");
+ }
+ // append a list element (indented of one level)
+ footerUlLi.appendChild(element);
+ footerUl.appendChild(footerUlLi);
+ } else {
+ // append a root element without a list wrapper
+ footerUl.appendChild(element);
+ firstLevel = false;
+ }
+ });
+ footer.appendChild(footerUl);
+ footer.addEventListener("click", handleAddBookmark);
+ }
+ }
+}
+
function appendRadioButtonParentSelector(el, parentId) {
var theInput = document.createElement("input");
theInput.setAttribute("type", "radio");
@@ -70,38 +157,18 @@ function appendRadioButtonParentSelector(el, parentId) {
// if radio button was clicked grab the value of the parent and pass it over
theInput.addEventListener("click", function(e) {
var parentSelected = this.parentNode;
- if (parentSelected != null) {
- var dirName = parentSelected.getAttribute("data-tooltip");
- if (dirName != null) {
- dirName += " > ";
- } else {
- dirName = "";
- }
- dirName += parentSelected.getElementsByTagName("span")[0].textContent;
-
- var output = document.querySelector(".bookmark__parent-output header");
- if (output != null) {
- output.innerHTML =
- "" +
- chrome.i18n.getMessage("parentdir") +
- ":
";
- output.innerHTML += "" + dirName + "
";
- if (!output.parentNode.classList.contains("visible")) {
- output.parentNode.classList.add("visible");
- }
- var hiddenInput = document.querySelector(".bookmark__parent-hidden");
- hiddenInput.setAttribute(
- "value",
- parentSelected.getAttribute("data-id")
- );
- }
- }
+ showFullPathOfParentDir(parentSelected);
+ showTreeOfSelectedNode(parentSelected.getAttribute("data-id"));
});
el.appendChild(theInput);
return el;
}
+function handleAddBookmark(e) {
+ triggerClick(e.target);
+}
+
function triggerClick(element) {
if (element.nodeName.toLowerCase() === "span") {
element = element.parentNode;
@@ -205,6 +272,8 @@ function addHiddenOutput() {
input.setAttribute("name", "parentid");
input.setAttribute("class", "bookmark__parent-hidden");
output.appendChild(input);
+ var footer = document.createElement("footer");
+ output.appendChild(footer);
return output;
}
@@ -242,9 +311,7 @@ function createInitialTree() {
var hiddenOutput = addHiddenOutput();
wrapper.parentNode.insertBefore(hiddenOutput, wrapper);
- wrapper.addEventListener("click", function(e) {
- triggerClick(e.target);
- });
+ wrapper.addEventListener("click", handleAddBookmark);
});
}
From 98fa60d7c4ab096a8f18ff272e18ee1f05ab4d5b Mon Sep 17 00:00:00 2001
From: "D. Galakhov"
Date: Mon, 12 Nov 2018 15:34:07 +0100
Subject: [PATCH 09/36] minor fixes
---
selectCategory.js | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/selectCategory.js b/selectCategory.js
index 6622920..c351ad7 100755
--- a/selectCategory.js
+++ b/selectCategory.js
@@ -89,7 +89,9 @@ function showFullPathOfParentDir(parentSelected) {
}
function showTreeOfSelectedNode(parentNodeId) {
- chrome.bookmarks.getSubTree(parentNodeId, drawTree);
+ if (parentNodeId) {
+ chrome.bookmarks.getSubTree(parentNodeId, drawTree);
+ }
}
function getDirectoriesInChildren(categoryNodes) {
From ea455d40681cbcb75fe64d887c3fcf01e5a91d3b Mon Sep 17 00:00:00 2001
From: Dmitri
Date: Mon, 12 Nov 2018 16:03:55 +0100
Subject: [PATCH 10/36] Update README.md
Screenshot added.
---
README.md | 2 ++
1 file changed, 2 insertions(+)
diff --git a/README.md b/README.md
index 395e5be..0f93ee2 100755
--- a/README.md
+++ b/README.md
@@ -5,6 +5,8 @@
- Another new feature helps you to get a quick overview of child folders (to see the sub tree) in a chosen directory.
- Fuse.js library updated to v3.3.0 and max amount of characters for the search pattern is set to 150, therefore, "Pattern length is too long" error shouldn't now block the search (or bitapRegexSearch will be used instead).
+
+
# chrome-better-bookmark
Chrome Extension that lets you easily add bookmarks to any category. Includes spotlight-like weighted search (http://fusejs.io) with mouse/keyboard support.
From a705b9d36715dee44449305fddf3b3ce8b227ad4 Mon Sep 17 00:00:00 2001
From: Dmitri
Date: Mon, 12 Nov 2018 16:08:10 +0100
Subject: [PATCH 11/36] Update README.md
Screenshot updated.
---
README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/README.md b/README.md
index 0f93ee2..964d6d2 100755
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
- Another new feature helps you to get a quick overview of child folders (to see the sub tree) in a chosen directory.
- Fuse.js library updated to v3.3.0 and max amount of characters for the search pattern is set to 150, therefore, "Pattern length is too long" error shouldn't now block the search (or bitapRegexSearch will be used instead).
-
+
# chrome-better-bookmark
From e9e4513e470f002f6e3692dee54a807a4a3467f0 Mon Sep 17 00:00:00 2001
From: "D. Galakhov"
Date: Thu, 15 Nov 2018 01:35:26 +0100
Subject: [PATCH 12/36] UI has been improved.
---
README.md | 2 +
_locales/en/messages.json | 40 ++++++++++++------
background.html | 69 ++++++++++++++++++++++++++++++-
selectCategory.js | 87 ++++++++++++++++++++++++++++++++++-----
4 files changed, 174 insertions(+), 24 deletions(-)
diff --git a/README.md b/README.md
index 395e5be..83a1f2f 100755
--- a/README.md
+++ b/README.md
@@ -3,6 +3,7 @@
- Better-Bookmark-Button extension is now equipped with captions showing up the full path to the current hovered category.
- Now you can also choose the parent directory for the new folder that is being created (in the original version all folders were put into the "Other Bookmarks" with flat structure first).
- Another new feature helps you to get a quick overview of child folders (to see the sub tree) in a chosen directory.
+- UI has been improved a bit. Icons, breadcrumb and descriptions were added, input fields and text blocks were moved to key positions.
- Fuse.js library updated to v3.3.0 and max amount of characters for the search pattern is set to 150, therefore, "Pattern length is too long" error shouldn't now block the search (or bitapRegexSearch will be used instead).
# chrome-better-bookmark
@@ -17,6 +18,7 @@ Chrome allows you to set your own key binding for every extension. See https://g
# TODO
+- Change parent directory (go up) by clicking on one of directories in a breadcrumb
- Add options (font size and style, focus style, key bindings, sorting options)
- Add position of the tooltip into extension options
- TBD: icon should be greyed out by default, highlighted if the page is already bookmarked
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 02a7083..3334dac 100755
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -1,14 +1,30 @@
{
- "new": {
- "message": "add new directory in that parent ↗",
- "description": "New category text"
- },
- "caption": {
- "message": "Creates new directory in a chosen parent directory from the list above",
- "description": "Caption to show on mouse over"
- },
- "parentdir": {
- "message": "This parent directory is chosen",
- "description": "Chosen parent directory"
- }
+ "new": {
+ "message":
+ "Look for a folder by entering its name above. Not found? Type in the desired name and click on it below to create a new folder.",
+ "description": "New category text"
+ },
+ "chooseparent": {
+ "message":
+ "By clicking on any radio button from below you place your new folder to a chosen one",
+ "description": "Choose parent category text"
+ },
+ "iconup": {
+ "message": "↑",
+ "description": "Parent category icon up"
+ },
+ "icondown": {
+ "message": "↓",
+ "description": "Parent category icon down"
+ },
+ "caption": {
+ "message":
+ "Create new directory in a chosen parent directory from the list below",
+ "description": "Caption to show on mouse over"
+ },
+ "anotherparentdir": {
+ "message":
+ "You can now save to any listed sub folder if its name is more appropriate or make it to a parent",
+ "description": "Chosen parent directory"
+ }
}
diff --git a/background.html b/background.html
index 7b86024..ea41a6d 100755
--- a/background.html
+++ b/background.html
@@ -8,7 +8,7 @@
border: 1px solid #ccc;
width: 100%;
padding: 4px;
- margin: 0 0 10px 0;
+ margin: 0;
}
span, p {
@@ -38,12 +38,24 @@
border-top-color: transparent;
}
- span:hover, .focus {
+ span:hover, .focus,
+ .bookmark__parent-create-dir-name,
+ .bookmark__parent-chosen b {
color: #000;
border-radius: 5px;
background: #C5ECFC;
}
+ .bookmark__parent-create-dir-name {
+ margin-bottom: 5px;
+ padding: 2px 10px 0;
+ }
+
+ .bookmark__parent-chosen b {
+ padding: 2px 10px;
+ display: inline-block;
+ }
+
span:first-child {
border-top-color: transparent;
}
@@ -70,18 +82,71 @@
height: 12px;
}
+ .bookmark__parent-create {
+ cursor: default;
+ border-bottom: 1px solid #ccc;
+ }
+
+ .bookmark__parent-create-wrapper-desc {
+ padding-bottom: 0px;
+ margin-top: 7px;
+ }
+
+ .bookmark__parent-create-wrapper-desc p {
+ font-size: 14px;
+ margin-bottom: 4px;
+ padding-right: 0;
+ color: #999;
+ }
+
+ .bookmark__parent-create-dir-caption {
+ text-align: right;
+ padding: 4px 0 0;
+ }
+
+ .bookmark__parent-create-icon {
+ float: left;
+ cursor: default;
+ padding: 0 3px 0 0px;
+ font-size: 18px;
+ }
+
+ .bookmark__parent-text {
+ margin-bottom: 0;
+ color: #999;
+ }
+
+ .icon-right {
+ float: right;
+ padding: 2px 17px 0 8px;
+ }
+
+ .bookmark__parent-create-dir-name {
+ font-weight: bold;
+ }
+
.bookmark__parent-output {
max-width: 98%;
-webkit-transition: opacity 0.5s ease-out;
opacity: 0;
height: 0;
overflow: hidden;
+ border-bottom: 1px solid #ccc;
+ margin-bottom: 12px;
+ }
+
+ .bookmark__parent-output header {
+ padding-top: 12px;
}
.bookmark__parent-hidden {
}
+ .bookmark__parent-output .bookmark__parent-create-icon {
+ padding-left: 12px;
+ }
+
.visible {
height: auto;
opacity: 1;
diff --git a/selectCategory.js b/selectCategory.js
index c351ad7..3488288 100755
--- a/selectCategory.js
+++ b/selectCategory.js
@@ -3,6 +3,7 @@ var wrapper;
var focusedElement;
var fuzzySearch;
var currentNodeCount = 0;
+var parentClicked = false;
var DOWN_KEYCODE = 40;
var UP_KEYCODE = 38;
@@ -76,9 +77,15 @@ function showFullPathOfParentDir(parentSelected) {
var output = document.querySelector(".bookmark__parent-output header");
if (output != null) {
+ // TODO: change parent directory by clicking on one dir in a breadcrumb
output.innerHTML =
- "" + chrome.i18n.getMessage("parentdir") + ":
";
- output.innerHTML += "" + dirName + "
";
+ "" +
+ dirName +
+ "
" +
+ chrome.i18n.getMessage("icondown") +
+ " " +
+ chrome.i18n.getMessage("anotherparentdir") +
+ "
";
if (!output.parentNode.classList.contains("visible")) {
output.parentNode.classList.add("visible");
}
@@ -158,6 +165,7 @@ function appendRadioButtonParentSelector(el, parentId) {
theInput.setAttribute("value", parentId);
// if radio button was clicked grab the value of the parent and pass it over
theInput.addEventListener("click", function(e) {
+ parentClicked = true;
var parentSelected = this.parentNode;
showFullPathOfParentDir(parentSelected);
showTreeOfSelectedNode(parentSelected.getAttribute("data-id"));
@@ -173,8 +181,13 @@ function handleAddBookmark(e) {
function triggerClick(element) {
if (element.nodeName.toLowerCase() === "span") {
+ // clicked on .bookmark__parent-create-dir-name span
element = element.parentNode;
}
+ // else if (element.nodeName.toLowerCase() === "p") {
+ // // clicked on p.bookmark__parent-create-dir-name
+ // element = element.parentNode;
+ // }
var categoryId = element.getAttribute("data-id");
var newCategoryTitle;
@@ -235,6 +248,17 @@ function createUiFromNodes(categoryNodes) {
}
function resetUi() {
+ var newDirInputWrapper = document.querySelector(
+ ".bookmark__parent-create-wrapper"
+ );
+ var newDirInput = newDirInputWrapper.querySelector(
+ ".bookmark__parent-create"
+ );
+ if (newDirInput) {
+ // remove existing input field before the next update (see addCreateCategoryButton)
+ newDirInputWrapper.removeChild(newDirInput);
+ }
+ // update the folders in the whole tree according to the entered search string
wrapper.innerHTML = "";
}
@@ -248,18 +272,17 @@ function focusItem(index) {
}
function addCreateCategoryButton(categoryName) {
+ // TODO: create options
+ // TODO: parse the position of the tooltip from extension's options
var el = document.createElement("div");
el.setAttribute("data-id", "NEW");
el.setAttribute("data-title", categoryName);
- // TODO: create options
- // TODO: parse the position of the tooltip from extension's options
el.setAttribute("data-tooltip-position", "bottom"); // set position of the tooltip
- el.classList.add("create");
+ el.classList.add("bookmark__parent-create");
el.setAttribute("data-tooltip", chrome.i18n.getMessage("caption"));
el.innerHTML =
- "" + chrome.i18n.getMessage("new") + ": " + categoryName + " ";
-
- wrapper.appendChild(el);
+ "" + categoryName + "