================================================
FILE: newtab.js
================================================
'use strict';
// render a single bookmark node
function render(node, target) {
if (node.description == 'separator') return;
var li = document.createElement('li');
var a = document.createElement('a');
var url = node.url;
if (url)
a.href = url;
else
a.tabIndex = 0;
var text = node.title || node.name || '';
if (!text && node.title === null) text = node.url || '';
a.innerText = text;
if (node.tooltip) a.title = node.tooltip;
setClass(a, node);
a.insertBefore(getIcon(node), a.firstChild);
if (node.action) {
a.onclick = function(event) {
return node.action(event);
};
} else if (url) {
var newtab = getConfig('newtab');
if (newtab == 1) {
// new foreground tab
a.target = '_blank';
} else if (newtab == 2) {
// new background tab
a.onclick = function(e) {
openLink(node, newtab);
return false;
};
}
// fix opening chrome:// and file:/// urls
var urlStart = url.substring(0, 6);
if (urlStart === 'chrome' || urlStart === 'file:/'){
a.onclick = function(e) {
openLink(node, newtab || (e.ctrlKey ? 2 : 0));
return false;
};
a.onauxclick = function(e) {
if (e.button == 1) {
openLink(node, 2);
return false;
}
}
}
} else if (!node.children)
a.style.pointerEvents = 'none';
li.appendChild(a);
// folder
if (node.children) {
// render children
if (a.open || getConfig('remember_open') && localStorage.getItem('open.' + node.id)) {
setClass(a, node, true);
a.open = true;
getChildrenFunction(node)(function(result) {
renderAll(result, li);
});
}
// click handlers
addFolderHandlers(node, a);
enableDragFolder(node, a);
} else if (node.id == 'apps')
enableDragFolder(node, a);
target.appendChild(li);
return li;
}
// render an array of bookmark nodes
function renderAll(nodes, target, toplevel) {
var ul = document.createElement('ul');
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
// skip extensions and duplicated child folders
if (toplevel || !coords[node.id])
render(node, ul);
}
if (ul.childNodes.length === 0)
render({ id: 'empty', title: '< Empty >' }, ul);
if (toplevel)
target.appendChild(ul);
else {
// wrap child ul for animation
var wrap = document.createElement('div');
wrap.appendChild(ul);
target.appendChild(wrap);
}
updateTooltips();
return ul;
}
// render column with given index
function renderColumn(index, target) {
var ids = columns[index];
if (ids.length == 1 && !getConfig('show_root'))
getChildrenFunction({id: ids[0]})(function(result) {
renderAll(result, target);
addColumnHandlers(index, target);
});
else if (ids.length > 0) {
var i = 0;
var nodes = [];
// get all nodes for column
var callback = function(result) {
for (var j = 0; j < result.length; j++)
nodes.push(result[j]);
i++;
if (i < ids.length)
getSubTree(ids[i], callback);
else {
// render node list
renderAll(nodes, target, true);
addColumnHandlers(index, target);
}
};
getSubTree(ids[i], callback);
}
}
// render all columns to main div
function renderColumns() {
// clear main div
var target = document.getElementById('main');
while (target.hasChildNodes())
target.removeChild(target.lastChild);
// render columns
for (var i = 0; i < columns.length; i++) {
var column = document.createElement('div');
column.className = 'column';
column.style.width = (1 / columns.length) * 100 + '%';
// enable drag and drop
enableDragColumn(i, column);
target.appendChild(column);
renderColumn(i, column);
}
enableDragDrop();
}
// enables click and context menu for given folder
function addFolderHandlers(node, a) {
// click handler
a.onclick = function() {
toggle(node, a, getChildrenFunction(node));
return false;
};
// context menu handler
var items = getMenuItems(node);
// column layout items
if (!getConfig('lock')) {
items.push(null);// spacer
items.push({
label: 'Create new column',
action: function() {
addColumn([node.id]);
}
});
if (coords[node.id]) {
var pos = coords[node.id];
if (pos.y > 0)
items.push({
label: 'Move folder up',
action: function() {
addRow(node.id, pos.x, pos.y - 1);
}
});
if (pos.y < columns[pos.x].length - 1)
items.push({
label: 'Move folder down',
action: function() {
addRow(node.id, pos.x, pos.y + 2);
}
});
if (pos.x > 0)
items.push({
label: 'Move folder left',
action: function() {
addRow(node.id, pos.x - 1);
}
});
if (pos.x < columns.length - 1)
items.push({
label: 'Move folder right',
action: function() {
addRow(node.id, pos.x + 1);
}
});
if (root.indexOf(node.id) < 0)
items.push({
label: 'Remove folder',
action: function() {
removeRow(pos.x, pos.y);
}
});
}
}
a.oncontextmenu = function(event) {
renderMenu(items, event.pageX, event.pageY);
return false;
};
}
// enables context menu for given column
function addColumnHandlers(index, ul) {
var items = [];
var ids = columns[index];
// single folder items
if (ids.length == 1)
items = getMenuItems({id: ids[0]});
// column layout items
if (!getConfig('lock') && columns.length > 1) {
items.push(null);// spacer
if (index > 0)
items.push({
label: 'Move column left',
action: function() {
addColumn(ids, index - 1);
}
});
if (index < columns.length - 1)
items.push({
label: 'Move column right',
action: function() {
addColumn(ids, index + 2);
}
});
items.push({
label: 'Remove column',
action: function() {
removeColumn(index);
}
});
if (ids.length == 1) {
if (index > 0)
items.push({
label: 'Move folder left',
action: function() {
addRow(ids[0], index - 1);
}
});
if (index < columns.length - 1)
items.push({
label: 'Move folder right',
action: function() {
addRow(ids[0], index + 1);
}
});
}
}
if (items.length > 0)
ul.oncontextmenu = function(event) {
if (event.target.tagName == 'A' || event.target.parentNode.tagName == 'A')
return true;
renderMenu(items, event.pageX, event.pageY);
return false;
};
}
// gets context menu items for given node
function getMenuItems(node) {
var items = [];
items.push({
label: 'Open all links in folder',
action: function() {
openLinks(node);
}
});
if (node.id == 'closed')
items.push({
label: 'Clear browsing data',
action: function() {
openLink({ url: 'chrome://settings/clearBrowserData' }, 1);
}
});
if (node.id == 'devices')
items.push({
label: 'History',
action: function() {
openLink({ url: 'chrome://history' }, 1);
}
});
if (Number(node.id))
items.push({
label: 'Edit bookmarks',
action: function() {
openLink({ url: 'chrome://bookmarks/?id=' + node.id }, 1);
}
});
return items;
}
// wraps click handler for menu items
function onMenuClick(item) {
return function() {
item.action();
return false;
};
}
// renders a popup menu at given coordinates
function renderMenu(items, x, y) {
var ul = document.createElement('ul');
ul.className = 'menu';
for (var i = 0; i < items.length; i++) {
var li = document.createElement('li');
if (items[i]) {
var a = document.createElement('a');
a.innerText = items[i].label;
a.tabIndex = 0;
a.onclick = onMenuClick(items[i]);
li.appendChild(a);
} else if (i > 0 && i < items.length - 1)
li.appendChild(document.createElement('hr'));
else
continue;
ul.appendChild(li);
}
document.body.appendChild(ul);
ul.style.left = Math.max(Math.min(x, window.innerWidth + window.scrollX - ul.clientWidth), 0) + 'px';
ul.style.top = Math.max(Math.min(y, window.innerHeight + window.scrollY - ul.clientHeight), 0) + 'px';
ul.onmousedown = function(event) {
event.stopPropagation();
return true;
};
setTimeout(function() {
document.onclick = function() {
closeMenu(ul);
return true;
};
document.onmousedown = function() {
closeMenu(ul);
return true;
};
document.oncontextmenu = function() {
closeMenu(ul);
return true;
};
document.onkeydown = function(event) {
if (event.keyCode == 27)
closeMenu(ul);
return true;
};
}, 20);
return ul;
}
// removes the given popup menu
function closeMenu(ul) {
document.body.removeChild(ul);
document.onclick = null;
document.onmousedown = null;
document.oncontextmenu = null;
document.onkeydown = null;
}
var dragIds;
// enable drag and drop of column
function enableDragColumn(id, column) {
if (getConfig('lock'))
return;
column.draggable = true;
column.ondragstart = function(event) {
dragIds = columns[id];
event.dataTransfer.effectAllowed = 'move';
this.classList.add('dragstart');
};
column.ondragend = function(event) {
dragIds = null;
this.classList.remove('dragstart');
clearDropTarget();
};
}
var dropTarget;
// enable drag and drop of folder
function enableDragFolder(node, a) {
if (getConfig('lock'))
return;
a.draggable = true;
a.ondragstart = function(event) {
dragIds = [node.id];
event.stopPropagation();
event.dataTransfer.effectAllowed = 'move copy';
this.classList.add('dragstart');
};
a.ondragend = function(event) {
dragIds = null;
this.classList.remove('dragstart');
clearDropTarget();
};
}
// init drag and drop handlers
function enableDragDrop() {
var main = document.getElementById('main');
if (getConfig('lock')) {
main.ondragover = null;
main.ondragleave = null;
main.ondrop = null;
return;
}
main.ondragover = function(event) {
event.preventDefault();
event.dataTransfer.dropEffect = 'move';
// highlight drop target
var target = getDropTarget(event);
if (target) {
clearDropTarget();
dropTarget = target;
var bordercss = 'solid 2px ' + getConfig('font_color');
if (target.tagName == 'LI' || target.tagName == 'UL') {
if (isAbove(event.pageY, target)) {
target.style.borderBottom = bordercss;
target.style.margin = '0 0 -2px 0';
} else {
target.style.borderTop = bordercss;
target.style.margin = '-2px 0 0 0';
}
} else if (target.className == 'column') {
if (event.pageX - target.offsetLeft > target.clientWidth / 2) {
target.style.borderRight = bordercss;
target.style.margin = '0';
} else {
target.style.borderLeft = bordercss;
target.style.margin = '0 2px 0 -2px';
}
}
}
return false;
};
main.ondragleave = function(event) {
clearDropTarget();
};
main.ondrop = function(event) {
event.stopPropagation();
var target = getDropTarget(event);
if (!target)
return false;
// calculate drop coordinates
var x = getDropX(target, event);
var y = getDropY(target, event);
if (dragIds.length == 1 && y != null)
addRow(dragIds[0], x, y);
else {
if (event.pageX - target.offsetLeft > target.clientWidth / 2)
x++;
addColumn(dragIds, x);
}
return false;
};
}
// gets proper drop target element
function getDropTarget(event) {
if (!dragIds)
return null;
var target = event.target;
if (target && (target.tagName == 'A' || target.parentNode.tagName == 'A') && dragIds.length == 1) {
// get parent folder until toplevel
while (target &&
target.parentNode.parentNode &&
target.parentNode.parentNode.className != 'column') {
// target should be LI
target = target.parentNode;
}
// if single-folder column, get the UL
if (target && target.tagName == 'LI' &&
columns[getDropX(target, event)].length == 1)
target = target.parentNode;
// target should be LI or UL by here...
} else
while (target && target.className != 'column')
target = target.parentNode;// target column
return target;
}
// gets x coordinate of drop target
function getDropX(target, event) {
var x = null;
while (target && target.className != 'column')
target = target.parentNode;
if (target) {
x = 0;
for (; target.previousSibling; x++)
target = target.previousSibling;
}
return x;
}
// gets y coordinate of drop target
function getDropY(target, event) {
var y = null;
if (target.tagName == 'LI') {
y = 0;
if (isAbove(event.pageY, target))
y++;
for (; target.previousSibling; y++)
target = target.previousSibling;
} else if (target.tagName == 'UL') {
y = 0;
if (isAbove(event.pageY, target))
y++;
}
return y;
}
// returns true if y position is above target element midpoint
function isAbove(pageY, target) {
return pageY - window.scrollY - target.getBoundingClientRect().top > target.clientHeight / 2;
}
// clears droptarget styles
function clearDropTarget() {
if (dropTarget) {
dropTarget.style.border = null;
dropTarget.style.margin = null;
}
dropTarget = null;
}
var tooltipTimeout = null;
// adds tootlips to truncated text
function updateTooltips() {
if (tooltipTimeout) clearTimeout(tooltipTimeout);
tooltipTimeout = setTimeout(function() {
tooltipTimeout = null;
var elements = document.querySelectorAll('#main li a');
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
if (element.clientWidth + 1 < element.scrollWidth) {
element.title = element.title || element.textContent;
} else if (element.title === element.textContent) {
element.title = '';
}
}
}, 100);
}
// gets function that returns children of node
function getChildrenFunction(node) {
switch(node.id) {
case 'top':
return function(callback) {
if (chrome.topSites)
chrome.topSites.get(function(result) {
callback(result.slice(0, getConfig('number_top')));
});
else
callback([]);
};
case 'recent':
return function(callback) {
chrome.bookmarks.getRecent(getConfig('number_recent'), function(result) {
callback(result);
});
};
case 'closed':
return function(callback) {
getClosed(function(result) {
callback(result);
});
};
case 'devices':
return function(callback) {
getDevices(function(result) {
callback(result);
});
};
default:
if (node.children)
return function(callback) {
callback(node.children);
};
else
return function(callback) {
chrome.bookmarks.getSubTree(node.id, function(result) {
if (result)
callback(result[0].children);
else {
// remove missing bookmark locations
if (coords[node.id])
removeRow(coords[node.id].x, coords[node.id].y);
}
});
};
}
}
// gets the subtree for given id
function getSubTree(id, callback) {
switch(id) {
case 'top':
callback([{ title: 'Most visited', id: 'top', children: true}]);
break;
case 'apps':
callback([{ title: 'Apps', id: 'apps', url: 'chrome://apps' }]);
break;
case 'recent':
callback([{ title: 'Recent bookmarks', id: 'recent', children: true }]);
break;
case 'closed':
callback([{ title: 'Recently closed', id: 'closed', children: true }]);
break;
case 'devices':
callback([{ title: 'Other devices', id: 'devices', children: true }]);
break;
default:
chrome.bookmarks.getSubTree(id, function(result) {
if (result)
callback(result);
else {
// remove missing bookmark locations
if (coords[id])
removeRow(coords[id].x, coords[id].y);
}
});
}
}
// sets css classes for node
function setClass(target, node, isopen) {
if (node.className)
target.classList.add(node.className);
if (node.children)
target.classList.add('folder');
if (isopen)
target.classList.add('open');
else
target.classList.remove('open');
switch(node.id) {
case 'top':
case 'apps':
case 'recent':
case 'closed':
case 'devices':
case 'empty':
target.classList.add(node.id);
}
}
// gets best icon for a node
function getIcon(node) {
var url = null,
url2x = null;
if (node.icons) {
var size;
for (var i in node.icons) {
var iconInfo = node.icons[i];
if (iconInfo.url && (!size || (iconInfo.size < size && iconInfo.size > 15))) {
url = iconInfo.url;
if (iconInfo.size > 31) url2x = iconInfo.url;
size = iconInfo.size;
}
}
} else if (node.icon) {
url = node.icon;
} else if (node.url) {
url = `/_favicon/?pageUrl=${encodeURIComponent(node.url)}&size=16`;
url2x = `/_favicon/?pageUrl=${encodeURIComponent(node.url)}&size=32`;
}
var icon = document.createElement(url ? 'img' : 'div');
icon.className = 'icon';
icon.src = url;
if (url2x) icon.srcset = url2x + ' 2x';
icon.alt = ' ';
return icon;
}
// toggle folder open state
function toggle(node, a) {
var isopen = a.open;
setClass(a, node, !isopen);
a.open = !isopen;
if (isopen) {
// close folder
localStorage.removeItem('open.' + node.id);
if (a.nextSibling){
// auto-close child folders
if (getConfig('auto_close')) {
var children = (a.nextSibling.tagName == 'DIV' ? a.nextSibling.firstChild : a.nextSibling).children;
for (var i=0; i