m/quickdial-webext
1
0
Fork 0
mirror of https://github.com/MatMoul/quickdial-webext.git synced 2025-12-15 16:33:13 +00:00
Code Releases Activity

Compare commits

base: m:v0.0.2
Branches Tags
m:develop m:master
m:v0.1.20 m:v0.1.19 m:v0.1.18 m:v0.1.17 m:v0.1.16 m:v0.1.15 m:v0.1.14 m:v0.1.5-2 m:v0.1.5-1 m:v0.1.13 m:v0.1.12 m:v0.1.11 m:v0.1.10 m:v0.1.9 m:v0.1.8 m:v0.1.7 m:v0.1.6 m:v0.1.5 m:v0.1.4 m:v0.1.3 m:v0.1.2 m:v0.1.1 m:v0.1.0 m:v0.0.4 m:v0.0.3 m:v0.0.2 m:v0.0.1
..
compare: m:v0.1.1
Branches Tags
m:develop m:master
m:v0.1.20 m:v0.1.19 m:v0.1.18 m:v0.1.17 m:v0.1.16 m:v0.1.15 m:v0.1.14 m:v0.1.5-2 m:v0.1.5-1 m:v0.1.13 m:v0.1.12 m:v0.1.11 m:v0.1.10 m:v0.1.9 m:v0.1.8 m:v0.1.7 m:v0.1.6 m:v0.1.5 m:v0.1.4 m:v0.1.3 m:v0.1.2 m:v0.1.1 m:v0.1.0 m:v0.0.4 m:v0.0.3 m:v0.0.2 m:v0.0.1

21 Commits
v0.0.2 ... v0.1.1

Author SHA1 Message Date
MatMoul
d6ee45da30 Version 0.1.1 2017-10-14 17:20:59 +02:00
MatMoul
45a5bd5d44 Bug: Sync from bookmark is disabed 2017-10-14 17:13:57 +02:00
MatMoul
55521d2d53 Improvement: Speed start 2017-10-14 16:51:39 +02:00
MatMoul
1dd5409dd0 Version 0.1.0 2017-10-14 12:57:14 +02:00
MatMoul
039c3566ea Bug reported by Scienmind and Acid Crash: Private Window and Contextual Identities don't work 2017-10-14 12:44:56 +02:00
MatMoul
1413464149 Update screenshot 2017-10-08 19:10:46 +02:00
MatMoul
df70de57cc Version 0.0.4 2017-10-08 18:30:27 +02:00
MatMoul
7fa21dac36 Update TODO 2017-10-08 18:29:41 +02:00
MatMoul
0027ff18fc Update Screenshot 2017-10-08 18:27:26 +02:00
MatMoul
733887fbcb Bug reported by Acid Crash: Capture from new tab dont preserve ratio 2017-10-08 18:24:14 +02:00
MatMoul
15c1836e28 Bug reported by Zambala: Need to restart firefox after installing webext 2017-10-08 15:54:06 +02:00
MatMoul
245e8ff1a2 Merge branch 'develop' 2017-10-06 23:31:54 +02:00
MatMoul
6450b5ad86 Version 0.0.3 2017-10-06 23:31:50 +02:00
MatMoul
38aafe2bf5 Data version 2017-10-06 23:05:06 +02:00
MatMoul
4348e38b3a Add back node option 2017-10-06 22:46:15 +02:00
MatMoul
32f96816dd Update TODO 2017-10-06 22:32:13 +02:00
MatMoul
6c3fd78250 Add custom background color settings (node) 2017-10-06 22:17:01 +02:00
MatMoul
4faf78eb84 Add folder and back icon settings 2017-10-06 21:15:20 +02:00
MatMoul
92b328cee0 Add folder and back icon settings 2017-10-06 21:07:49 +02:00
MatMoul
a079a43e69 Update TODO 2017-10-06 20:17:11 +02:00
MatMoul
5f69e9f7cb Update TODO 2017-10-06 20:15:58 +02:00
9 changed files with 572 additions and 346 deletions
Expand all files Collapse all files

6
TODO
View File

@@ -1,4 +1,6 @@
Config Page Add node settings popup
Add custom image (thumbnails)
Create style for popup
Need a best solution to update folder and bookmark when it are updated from Firefox
Improve screenshot result Improve screenshot result
Add favicon support Add favicon support
Need a solution to update folder and bookmark when it are updated from Firefox

BIN
screenshots/settings_cells.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 203 KiB

After

Width:  |  Height:  |  Size: 143 KiB

BIN
screenshots/settings_grid.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 197 KiB

After

Width:  |  Height:  |  Size: 242 KiB

2
src/dial
View File

@@ -1 +1 @@
<!DOCTYPE html><html><head id="head"><meta charset="utf-8" /><link rel="shortcut icon" type="image/png" href="img/24.png" /><title id="title"></title><script type="text/javascript" src="js/dial.js"></script></head><body id="body"></body></html> <!DOCTYPE html><html><head><meta charset="utf-8" /><link rel="shortcut icon" type="image/png" href="img/24.png" /><script type="text/javascript" src="js/dial.js"></script></head><body></body></html>

46
src/html/settings.html
View File

@@ -61,6 +61,26 @@
<td><span>Margins :</span></td> <td><span>Margins :</span></td>
<td><input id="GridMargins" type="number"></td> <td><input id="GridMargins" type="number"></td>
</tr> </tr>
<tr>
<td><span>Back Button :</span></td>
<td><input id="GridBackNode" type="checkbox"></td>
</tr>
</table>
<table>
<tr>
<td>
<div>Back :</div>
<button id="GridBackImageReset">Reset</button>
<input id="GridBackImageFile" type="file" style="width:220px;">
<div id="GridBackPreview" style="width: 220px; height: 150px; border: 1px solid #000000"></div>
</td>
<td>
<div>Folder :</div>
<button id="GridFolderImageReset">Reset</button>
<input id="GridFolderImageFile" type="file" style="width:220px;">
<div id="GridFolderPreview" style="width: 220px; height: 150px; border: 1px solid #000000"></div>
</td>
</tr>
</table> </table>
</div> </div>
<div class="hidden"> <div class="hidden">
@@ -76,12 +96,22 @@
<td><input id="GridCellsMarginsHover" type="number" style="display: none;"></td> <td><input id="GridCellsMarginsHover" type="number" style="display: none;"></td>
</tr> </tr>
<tr> <tr>
<td><span>Border Radius:</span></td> <td><span>Border Radius :</span></td>
<td><input id="GridCellsBorderRadius" type="number"></td> <td><input id="GridCellsBorderRadius" type="number"></td>
<td><input id="GridCellsBorderRadiusHover" type="number"></td> <td><input id="GridCellsBorderRadiusHover" type="number"></td>
</tr> </tr>
<tr> <tr>
<td><span>Border Color:</span></td> <td><span>Background Transparent :</span></td>
<td><input id="GridCellsBackgroundTransparent" type="checkbox"></td>
<td><input id="GridCellsBackgroundTransparentHover" type="checkbox"></td>
</tr>
<tr>
<td><span>Background Color :</span></td>
<td><input id="GridCellsBackgroundColor" type="color"></td>
<td><input id="GridCellsBackgroundColorHover" type="color"></td>
</tr>
<tr>
<td><span>Border Color :</span></td>
<td><input id="GridCellsBorderColor" type="color"></td> <td><input id="GridCellsBorderColor" type="color"></td>
<td><input id="GridCellsBorderColorHover" type="color"></td> <td><input id="GridCellsBorderColorHover" type="color"></td>
</tr> </tr>
@@ -101,10 +131,20 @@
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td><span>Title Color:</span></td> <td><span>Title Text Color :</span></td>
<td><input id="GridCellsTitleColor" type="color"></td> <td><input id="GridCellsTitleColor" type="color"></td>
<td><input id="GridCellsTitleColorHover" type="color"></td> <td><input id="GridCellsTitleColorHover" type="color"></td>
</tr> </tr>
<tr>
<td><span>Title Background Transparent :</span></td>
<td><input id="GridCellsTitleBackgroundTransparent" type="checkbox"></td>
<td><input id="GridCellsTitleBackgroundTransparentHover" type="checkbox"></td>
</tr>
<tr>
<td><span>Title Background Color :</span></td>
<td><input id="GridCellsTitleBackgroundColor" type="color"></td>
<td><input id="GridCellsTitleBackgroundColorHover" type="color"></td>
</tr>
</table> </table>
</div> </div>
</div> </div>

364
src/js/background.js
View File

@@ -2,54 +2,169 @@ var core = {}; // Main app object in background.js
var app = {}; // Shared app object with pages var app = {}; // Shared app object with pages
core.init = function(){ // Init module core.init = function(){ // Init module
core.Settings.load(function(){ core.Settings.init(function(){
core.GridNodes.sync(app.settings.grid.node, app.settings.grid.root, function(){ // Sync bookmarks with stored data core.Messages.init();
core.ContextMenus.initMenu(); browser.runtime.sendMessage({ cmd: core.Messages.Commands.settingsChanged });
core.GridNodes.sync(core.node, core.settings.grid.root, function(){
browser.runtime.sendMessage({ cmd: core.Messages.Commands.gridNodesLoaded });
core.Bookmarks.initListener(); core.Bookmarks.initListener();
}); });
}); });
} };
core.Messages = {}; // Messages helper object
core.Messages.Commands = {
getSettings: 0,
setSettings: 1,
getNode: 2,
setNodeIndex: 3,
createBookmark: 4,
createFolder: 5,
deleteNode: 6,
refreshNode: 7,
capturePage: 8,
settingsChanged: 100,
gridNodesLoaded: 101
};
core.Messages.init = function(){ // Init Messages Listeners
browser.runtime.onMessage.addListener(function(request, sender, sendResponse){
console.log(request.cmd);
switch(request.cmd){
case core.Messages.Commands.getSettings:
sendResponse(core.settings);
break;
case core.Messages.Commands.setSettings:
core.settings = request.settings;
core.Settings.save();
sendResponse(core.settings);
browser.runtime.sendMessage( { cmd: core.Messages.Commands.settingsChanged } );
browser.runtime.sendMessage( { cmd: core.Messages.Commands.gridNodesLoaded } );
break;
case core.Messages.Commands.getNode:
sendResponse(core.GridNodes.getNode(core.node, request.path.substr(1)));
break;
case core.Messages.Commands.setNodeIndex:
core.GridNodes.setNodeIndex(core.GridNodes.getNode(core.node, request.path.substr(1)), request.index, request.newIndex, function(){
browser.runtime.sendMessage( { cmd: core.Messages.Commands.gridNodesLoaded } );
});
break;
case core.Messages.Commands.createBookmark:
core.GridNodes.createBookmark(core.GridNodes.getNode(core.node, request.path.substr(1)), request.url, request.title, function(){
browser.runtime.sendMessage( { cmd: core.Messages.Commands.gridNodesLoaded } );
});
break;
case core.Messages.Commands.createFolder:
core.GridNodes.createFolder(core.GridNodes.getNode(core.node, request.path.substr(1)), request.name, function(){
browser.runtime.sendMessage( { cmd: core.Messages.Commands.gridNodesLoaded } );
});
break;
case core.Messages.Commands.deleteNode:
core.GridNodes.deleteNode(core.GridNodes.getNode(core.node, request.path.substr(1)), request.id, function(){
browser.runtime.sendMessage( { cmd: core.Messages.Commands.gridNodesLoaded } );
});
break;
case core.Messages.Commands.refreshNode:
core.GridNodes.refreshNode(core.GridNodes.getChildNode(core.GridNodes.getNode(core.node, request.path.substr(1)), request.id), function(){
browser.runtime.sendMessage( { cmd: core.Messages.Commands.gridNodesLoaded } );
});
break;
case core.Messages.Commands.capturePage:
core.GridNodes.capturePage(core.GridNodes.getChildNode(core.GridNodes.getNode(core.node, request.path.substr(1)), request.id), function(){
browser.runtime.sendMessage( { cmd: core.Messages.Commands.gridNodesLoaded } );
});
break;
}
});
};
core.Settings = {}; // Settings helper object core.Settings = {}; // Settings helper object
core.Settings.load = function(callback){ // Load settings core.Settings.init = function(callback){ // Load settings and nodes
browser.storage.local.get({ browser.storage.local.get().then(function(data){
backgroundColor: '#3c4048', if(Object.keys(data).length == 0) {
backgroundImage: null, data = {
grid: { version: 3,
margin: 10, settings: {
rows: 4, backgroundColor: '#3c4048',
columns: 5, backgroundImage: null,
cells: { grid: {
margin: 4, margin: 10,
marginHover: 4, rows: 4,
ratioX: 4, columns: 5,
ratioY: 3, backNode: true,
borderColor: '#333333', backIcon: 'url(/img/back.png)',
borderColorHover: '#a9a9a9', folderIcon: 'url(/img/folder.png)',
borderRadius: 4, loadingIcon: 'url(/img/throbber.gif)',
borderRadiusHover: 4, cells: {
title: true, margin: 4,
titleHeight: 16, marginHover: 4,
titleFontSize: 10, backgroundColor: null,
titleFont: 'Arial, Verdana, Sans-serif', backgroundColorHover: null,
titleColor: '#ffffff', borderColor: '#333333',
titleColorHover: '#33ccff', borderColorHover: '#a9a9a9',
backPanel: true, borderRadius: 4,
backIcon: 'img/back.png', borderRadiusHover: 4,
folderIcon: 'img/folder.png', title: true,
loadingIcon: 'img/throbber.gif' titleHeight: 16,
}, titleFontSize: 10,
root: 'Quick Dial', titleFont: 'Arial, Verdana, Sans-serif',
node: {} titleColor: '#ffffff',
titleColorHover: '#33ccff',
titleBackgroundColor: null,
titleBackgroundColorHover: null,
previewWidth: 1200,
previewHeight: 710
},
root: 'Quick Dial',
}
},
node: { children: [] }
}
} }
}).then(function(obj){ if(!data.version){ // Upgrade Data Version
app.settings = obj; data.version = 2;
data.grid.backNode = true;
data.grid.backIcon = 'url(/img/back.png)';
data.grid.folderIcon = 'url(/img/folder.png)';
data.grid.loadingIcon = 'url(/img/throbber.gif)';
data.grid.cells.backgroundColor = null;
data.grid.cells.backgroundColorHover = null;
data.grid.cells.titleBackgroundColor = null;
data.grid.cells.titleBackgroundColorHover = null;
delete data.grid.cells.backIcon;
delete data.grid.cells.folderIcon;
delete data.grid.cells.loadingIcon;
delete data.grid.cells.backPanel;
}
if(data.version == 2){ // Upgrade Data Version
var oldData = data;
data = {};
data.version = 3;
data.settings = oldData;
data.node = oldData.grid.node;
delete data.settings.version;
delete data.settings.grid.node;
core.settings = data.settings;
core.node = data.node;
browser.storage.local.clear().then(function(){
core.Settings.save();
});
}
core.settings = data.settings;
core.node = data.node;
if(callback) callback(); if(callback) callback();
}); }, function(){ console.log('Error loading data'); });
} };
core.Settings.save = function(){ // Save settings core.Settings.update = function(settings, callback){ // Save new settings
browser.storage.local.set(app.settings); core.settings = settings;
browser.runtime.sendMessage({ command: 'SettingsChanged' }); core.Settings.save(callback);
};
core.Settings.save = function(callback){ // Save settings
var data = { version: 3 };
data.settings = core.settings;
data.node = core.node;
browser.storage.local.set(data).then(function(){
if(callback) callback();
}, function(){ console.log('Error saving settings'); });
} }
core.init(); core.init();
@@ -63,16 +178,16 @@ core.ContextMenus.initMenu = function(){ // (Called from core.init) Init context
documentUrlPatterns: [ 'http://*/*', 'https://*/*', 'file://*/*' ] documentUrlPatterns: [ 'http://*/*', 'https://*/*', 'file://*/*' ]
}, function(){}); }, function(){});
browser.contextMenus.onClicked.addListener(function(info, tab) { // Context menu click event browser.contextMenus.onClicked.addListener(function(info, tab) { // Context menu click event
if (info.menuItemId == "AddToQuickDial") //if (info.menuItemId == "AddToQuickDial")
core.GridNodes.createBookmark(app.settings.grid.node, info.pageUrl, tab.title, function(){}); //core.GridNodes.createBookmark(app.settings.grid.node, info.pageUrl, tab.title, function(){});
}); });
} }
core.Bookmarks = {} // Bookmarks helper object core.Bookmarks = {} // Bookmarks helper object
core.Bookmarks._onCreated = function(){ core.GridNodes.sync(app.settings.grid.node, app.settings.grid.root); } core.Bookmarks._onCreated = function(){ core.GridNodes.sync(core.node, core.settings.grid.root, function(){ browser.runtime.sendMessage({ cmd: core.Messages.Commands.gridNodesLoaded }); }); }
core.Bookmarks._onChanged = function(){ core.GridNodes.sync(app.settings.grid.node, app.settings.grid.root); } core.Bookmarks._onChanged = function(){ core.GridNodes.sync(core.node, core.settings.grid.root, function(){ browser.runtime.sendMessage({ cmd: core.Messages.Commands.gridNodesLoaded }); }); }
core.Bookmarks._onMoved = function(){ core.GridNodes.sync(app.settings.grid.node, app.settings.grid.root); } core.Bookmarks._onMoved = function(){ core.GridNodes.sync(core.node, core.settings.grid.root, function(){ browser.runtime.sendMessage({ cmd: core.Messages.Commands.gridNodesLoaded }); }); }
core.Bookmarks._onRemoved = function(){ core.GridNodes.sync(app.settings.grid.node, app.settings.grid.root); } core.Bookmarks._onRemoved = function(){ core.GridNodes.sync(core.node, core.settings.grid.root, function(){ browser.runtime.sendMessage({ cmd: core.Messages.Commands.gridNodesLoaded }); }); }
core.Bookmarks.initListener = function(){ // (Called from core.init) (/!\ Need filter to root tree only) Init listener of bookmarks core.Bookmarks.initListener = function(){ // (Called from core.init) (/!\ Need filter to root tree only) Init listener of bookmarks
browser.bookmarks.onCreated.addListener(core.Bookmarks._onCreated); browser.bookmarks.onCreated.addListener(core.Bookmarks._onCreated);
//browser.bookmarks.onChanged.addListener(core.Bookmarks._onChanged); //browser.bookmarks.onChanged.addListener(core.Bookmarks._onChanged);
@@ -102,30 +217,7 @@ core.Bookmarks.load = function(rootPath, callback){ // Load root bookmark and cr
} }
core.SiteInfos = {} // Siteinfos helper object core.SiteInfos = {} // Siteinfos helper object
core.SiteInfos.fromTab = function(callback){ // Retrieve infos from current tab. callback( { url, title, icon, screenshot } || error: callback() ) core.SiteInfos.fromNewTab = function(url, callback){ // Retrieve infos from a new tab. callback( { url, title, icon, screenshot } || error: callback() )
browser.tabs.getCurrent().then(function(tab){
function whaitLoaded(){
browser.tabs.get(tab.id).then(function(tab){
if(tab.status == 'loading') setTimeout(whaitLoaded, 300);
else {
browser.tabs.update(tab.id, {active: true}).then(function(){
setTimeout(function(){
browser.tabs.captureVisibleTab().then(function(img){
browser.tabs.remove(tab.id);
if(callback) callback( { url: tab.url, title: tab.title, icon: tab.favIconUrl, screenshot: img } );
}, function(){
browser.tabs.remove(tab.id);
if(callback) callback();
});
}, 300);
}, function(){ if(callback) callback(); });
}
}, function(){ if(callback) callback(); });
}
setTimeout(whaitLoaded, 300);
}, function(){ if(callback) callback(); });
}
core.SiteInfos.fromNewTab1 = function(url, callback){ // Retrieve infos from a new tab. callback( { url, title, icon, screenshot } || error: callback() )
browser.tabs.create({url: url, active: false}).then(function(tab){ browser.tabs.create({url: url, active: false}).then(function(tab){
browser.tabs.update(tab.id, {muted: true}).then(); browser.tabs.update(tab.id, {muted: true}).then();
function whaitLoaded(){ function whaitLoaded(){
@@ -133,38 +225,44 @@ core.SiteInfos.fromNewTab1 = function(url, callback){ // Retrieve infos from a
if(tab.status == 'loading') setTimeout(whaitLoaded, 300); if(tab.status == 'loading') setTimeout(whaitLoaded, 300);
else { else {
browser.tabs.update(tab.id, {active: true}).then(function(){ browser.tabs.update(tab.id, {active: true}).then(function(){
console.log('Hello');
setTimeout(function(){ setTimeout(function(){
browser.tabs.captureVisibleTab().then(function(img){ browser.tabs.captureVisibleTab().then(function(img){
browser.tabs.remove(tab.id); browser.tabs.remove(tab.id);
var previewWidth = 1200; // Need to be linked to settings
var previewHeight = 710; // Need to be linked to settings
var imgObj = new Image; var imgObj = new Image;
imgObj.src = img; imgObj.src = img;
var previewWidth = 1200; // Need to be linked to settings
var previewHeight = 710; // Need to be linked to settings
var canvas = document.createElement('canvas'); var canvas = document.createElement('canvas');
canvas.style.width = previewWidth.toString() + 'px'; canvas.style.width = previewWidth.toString() + 'px';
canvas.style.height = previewHeight.toString() + 'px'; canvas.style.height = previewHeight.toString() + 'px';
canvas.width = previewWidth / 2; canvas.width = previewWidth / 2;
canvas.height = previewHeight / 2; canvas.height = previewHeight / 2;
var ctx = canvas.getContext('2d'); var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, previewWidth, previewHeight); ctx.clearRect(0, 0, previewWidth, previewHeight);
ctx.save(); ctx.save();
ctx.scale(0.5, 0.5); ctx.scale(0.5, 0.5);
//ctx.drawImage(img, 0, 0, previewWidth, previewHeight, 'rgb(255, 255, 255)'); setTimeout(function(){
console.log(img); if(tab.height * previewWidth / previewHeight >= tab.width){
ctx.drawImage(imgObj, 0, 0, 0, 0, 'rgb(255, 255, 255)'); // Cut the bottom of the page
ctx.restore(); ctx.drawImage(imgObj, 0, 0, tab.width, tab.width / previewWidth * previewHeight, 0, 0, previewWidth, previewHeight);
img = canvas.toDataURL(); } else {
// Stretch or cutting right part of the page ? actualy Stretch
ctx.drawImage(imgObj, 0, 0, tab.width, tab.height, 0, 0, previewWidth, previewHeight);
if(callback) callback( { url: tab.url, title: tab.title, icon: tab.favIconUrl, screenshot: img } ); //ctx.drawImage(imgObj, 0, 0, tab.height / previewHeight * previewWidth, tab.height, 0, 0, previewWidth, previewHeight);
}
ctx.restore();
img = canvas.toDataURL();
if(callback) callback( { url: tab.url, title: tab.title, icon: tab.favIconUrl, screenshot: img } );
}, 100);
}, function(){ }, function(){
browser.tabs.remove(tab.id); browser.tabs.remove(tab.id);
if(callback) callback(); if(callback) callback();
}); });
}, 300); }, 500);
}, function(){ if(callback) callback(); }); }, function(){ if(callback) callback(); });
} }
}, function(){ if(callback) callback(); }); }, function(){ if(callback) callback(); });
@@ -222,25 +320,12 @@ core.SiteInfos.fromFrame = function(url, callback){ // Retrieve infos from an if
xmlHttp.onerror = function(){ if(callback) callback(); } xmlHttp.onerror = function(){ if(callback) callback(); }
xmlHttp.ontimeout = function(){ if(callback) callback(); } xmlHttp.ontimeout = function(){ if(callback) callback(); }
xmlHttp.send(); xmlHttp.send();
} }
core.SiteInfos.fromWS = function(url, callback){ // Retrieve infos from a Web Service. callback( { url, title, (/!\ Not handled now)icon, screenshot } || error: callback() ) core.SiteInfos.fromWS = function(url, callback){ // Retrieve infos from a Web Service. callback( { url, title, (/!\ Not handled now)icon, screenshot } || error: callback() )
console.log('Not implemented'); console.log('Not implemented');
return core.SiteInfos.fromFrame(url, callback); return core.SiteInfos.fromFrame(url, callback);
} }
/*
core.GridNodes.GridNode = function(){
this.id = null; // 0
//this.lastUpdate = new Date(0);
this.type = core.GridNodes.GridNodeType.empty;
//this.path = '';
this.title = null; // ''
this.icon = null; // ''
this.image = null; // ''
this.url = null; // ''
this.children = null; // []
}
*/
core.GridNodes = {}; // GridNodes helper object core.GridNodes = {}; // GridNodes helper object
core.GridNodes.GridNodeType = { // GridNodeType core.GridNodes.GridNodeType = { // GridNodeType
back: -1, back: -1,
@@ -307,9 +392,8 @@ core.GridNodes.sync = function(gridNode, rootPath, callback){ // Sync GridNodes
if(callback) callback(); if(callback) callback();
}); });
} }
core.GridNodes.save = function(){ // Save GridNode core.GridNodes.save = function(callback){ // Save GridNodes
browser.storage.local.set(app.settings); core.Settings.save(callback);
browser.runtime.sendMessage({ command: 'GridNodesSaved'});
} }
core.GridNodes.getNode = function(gridNode, path){ // Return GridNode from RootGridNode path core.GridNodes.getNode = function(gridNode, path){ // Return GridNode from RootGridNode path
if(path.length == 0 || path == '/') return gridNode; if(path.length == 0 || path == '/') return gridNode;
@@ -322,9 +406,8 @@ core.GridNodes.getChildNode = function(gridNode, id){ // Return child node by ID
for(var child of gridNode.children) if(child.id == id) return child; for(var child of gridNode.children) if(child.id == id) return child;
return null; return null;
} }
core.GridNodes.saveNode = function(gridNode){ // Save GridNode core.GridNodes.saveNode = function(gridNode, callback){ // Save GridNode
browser.storage.local.set(app.settings); core.Settings.save(callback);
browser.runtime.sendMessage({ command: 'GridNodeSaved', gridNode: gridNode });
} }
core.GridNodes.setNodeIndex = function(gridNode, index, newIndex, callback){ // Set Child GridNodeIndex. callback(gridNode, node1, node2) core.GridNodes.setNodeIndex = function(gridNode, index, newIndex, callback){ // Set Child GridNodeIndex. callback(gridNode, node1, node2)
while(newIndex>=gridNode.children.length) while(newIndex>=gridNode.children.length)
@@ -340,15 +423,16 @@ core.GridNodes.setNodeIndex = function(gridNode, index, newIndex, callback){ //
core.GridNodes.saveNode(gridNode); core.GridNodes.saveNode(gridNode);
if(callback) callback(gridNode, node1, node2); if(callback) callback(gridNode, node1, node2);
} }
core.GridNodes.createFolder = function(gridNode, name, callback){ // Create a new folder in a GridNode. callback(gridNode, newGridNode) core.GridNodes.createBookmark = function(gridNode, url, title, callback){ // Create a new Bookmark in a GridNode. callback(gridNode, newGridNode)
browser.bookmarks.onCreated.removeListener(core.Bookmarks._onCreated); browser.bookmarks.onCreated.removeListener(core.Bookmarks._onCreated);
browser.bookmarks.create({ browser.bookmarks.create({
parentId: gridNode.id, parentId: gridNode.id,
title: name title: title || url,
url: url
}).then(function(bookmarkItem){ }).then(function(bookmarkItem){
if(!gridNode) return; // ??? Why this method are called a second time with gridNode = null ??? if(!gridNode) return; // ??? Why this method are called a second time with gridNode = null ???
browser.bookmarks.onCreated.addListener(core.Bookmarks._onCreated); browser.bookmarks.onCreated.addListener(core.Bookmarks._onCreated);
var newGridNode = { id: bookmarkItem.id, type: core.GridNodes.GridNodeType.folder, title: name, children: [] }; var newGridNode = { id: bookmarkItem.id, type: core.GridNodes.GridNodeType.bookmark, url: url, title };
var EmptyCellFound = false; var EmptyCellFound = false;
for(var i=0; i<gridNode.children.length; i++){ for(var i=0; i<gridNode.children.length; i++){
if(gridNode.children[i].type == core.GridNodes.GridNodeType.empty){ if(gridNode.children[i].type == core.GridNodes.GridNodeType.empty){
@@ -364,16 +448,15 @@ core.GridNodes.createFolder = function(gridNode, name, callback){ // Create a ne
browser.bookmarks.onCreated.addListener(core.Bookmarks._onCreated); browser.bookmarks.onCreated.addListener(core.Bookmarks._onCreated);
}); });
} }
core.GridNodes.createBookmark = function(gridNode, url, title, callback){ // Create a new Bookmark in a GridNode. callback(gridNode, newGridNode) core.GridNodes.createFolder = function(gridNode, name, callback){ // Create a new folder in a GridNode. callback(gridNode, newGridNode)
browser.bookmarks.onCreated.removeListener(core.Bookmarks._onCreated); browser.bookmarks.onCreated.removeListener(core.Bookmarks._onCreated);
browser.bookmarks.create({ browser.bookmarks.create({
parentId: gridNode.id, parentId: gridNode.id,
title: title || url, title: name
url: url
}).then(function(bookmarkItem){ }).then(function(bookmarkItem){
if(!gridNode) return; // ??? Why this method are called a second time with gridNode = null ??? if(!gridNode) return; // ??? Why this method are called a second time with gridNode = null ???
browser.bookmarks.onCreated.addListener(core.Bookmarks._onCreated); browser.bookmarks.onCreated.addListener(core.Bookmarks._onCreated);
var newGridNode = { id: bookmarkItem.id, type: core.GridNodes.GridNodeType.bookmark, url: url, title }; var newGridNode = { id: bookmarkItem.id, type: core.GridNodes.GridNodeType.folder, title: name, children: [] };
var EmptyCellFound = false; var EmptyCellFound = false;
for(var i=0; i<gridNode.children.length; i++){ for(var i=0; i<gridNode.children.length; i++){
if(gridNode.children[i].type == core.GridNodes.GridNodeType.empty){ if(gridNode.children[i].type == core.GridNodes.GridNodeType.empty){
@@ -417,53 +500,26 @@ core.GridNodes.refreshNode = function(gridNode, callback){ // Refresh content of
if(infos){ if(infos){
gridNode.title = infos.title; gridNode.title = infos.title;
gridNode.image = infos.screenshot; gridNode.image = infos.screenshot;
delete gridNode.__isLoading; } else {
core.GridNodes.saveNode(gridNode); gridNode.image = '0';
} else delete gridNode.__isLoading; }
delete gridNode.__isLoading;
core.GridNodes.saveNode(gridNode);
if(callback) callback(infos); if(callback) callback(infos);
}); });
} }
core.GridNodes.capturePage = function(gridNode, callback){ core.GridNodes.capturePage = function(gridNode, callback){
browser.tabs.create({url: gridNode.url, active: false}).then(function(tab){ if(gridNode.__isLoading == true) return;
browser.tabs.update(tab.id, {muted: true}).then(function(){}, function(){}); gridNode.__isLoading = true;
function whaitLoaded(){ core.SiteInfos.fromNewTab(gridNode.url, function(infos){
browser.tabs.get(tab.id).then(function(tab){ if(infos){
if(tab.status == 'loading'){ gridNode.title = infos.title;
setTimeout(whaitLoaded, 300); gridNode.image = infos.screenshot;
} else{ } else {
browser.tabs.update(tab.id, {active: true}).then(function(){ gridNode.image = '0';
setTimeout(function(){
browser.tabs.captureVisibleTab().then(function(img){
browser.tabs.remove(tab.id);
gridNode.title = tab.title
gridNode.image = img;
core.GridNodes.saveNode(gridNode);
if(callback) callback();
}, function(){
browser.tabs.remove(tab.id);
if(callback) callback();
});
}, 300);
}, function(){
if(callback) callback();
});
}
}, function(){});
} }
setTimeout(whaitLoaded, 1000); delete gridNode.__isLoading;
}, function(){ core.GridNodes.saveNode(gridNode);
if(callback) callback(); if(callback) callback(infos);
}); });
} }
// Public members
app.GridNodeType = core.GridNodes.GridNodeType;
app.refreshNode = core.GridNodes.refreshNode;
app.getNode = core.GridNodes.getNode;
app.createFolder = core.GridNodes.createFolder;
app.createBookmark = core.GridNodes.createBookmark;
app.deleteNode = core.GridNodes.deleteNode;
app.setNodeIndex = core.GridNodes.setNodeIndex;
app.capturePage = core.GridNodes.capturePage;
app.saveSettings = core.Settings.save;

395
src/js/dial.js
View File

@@ -1,113 +1,135 @@
var app = {} var utils = {};
var dial = { var app = {};
styles: {}, var dial = {
page: 1, page: 1,
maxpage: 1 maxpage: 1
}; };
window.onload = function(){
function initPage(){ document.addEventListener("DOMContentLoaded", function(event) {
browser.runtime.getBackgroundPage().then(function(page){ app.init();
if(page.app.settings){ dial.init();
app = page.app; });
dial.initUI();
browser.runtime.onMessage.addListener(function(request, sender, sendResponse){
switch(request.command){
case 'SettingsChanged':
if(app.settings){
dial.Head.removeChild(dial.Style);
dial.Body.removeChild(dial.Grid);
dial.initStyles();
dial.Grid = dial.initGrid('Grid', app.settings.grid, dial.Body);
var url = new URL(window.location);
dial.path = url.searchParams.get('path');
if(url.searchParams.get('path')) {
dial.Node = app.getNode(app.settings.grid.node, dial.path + '/');
} else {
dial.Node = app.getNode(app.settings.grid.node, '/');
}
dial.Title.innerText = dial.Node.title;
dial.populateGrid(dial.Grid, app.settings.grid, dial.Node);
}
break;
case 'GridNodesSaved':
if(app.settings) dial.populateGrid(dial.Grid, app.settings.grid, dial.Node);
break;
case 'GridNodeSaved':
// request.gridNode
if(app.settings) dial.populateGrid(dial.Grid, app.settings.grid, dial.Node);
break;
}
});
} else{
setTimeout(initPage, 100);
}
}, function(){});
}
initPage();
}
window.onresize = function(){ window.onresize = function(){
if(app && app.settings) dial.updateGridLayout(dial.Grid, app.settings.grid, dial.styles.grid); if(app && app.settings) dial.updateGridLayout();
} }
window.onwheel = function(ev){ window.onwheel = function(ev){
if(app && app.settings){ if(app && app.settings){
if(ev.deltaY > 0){ if(ev.deltaY > 0){
if(dial.page < dial.maxpage){ if(dial.page < dial.maxpage){
dial.page += 1; dial.page += 1;
dial.populateGrid(dial.Grid, app.settings.grid, dial.Node); dial.populateGrid();
} }
} else if(ev.deltaY < 0){ } else if(ev.deltaY < 0){
if(dial.page > 1){ if(dial.page > 1){
dial.page -= 1; dial.page -= 1;
dial.populateGrid(dial.Grid, app.settings.grid, dial.Node); dial.populateGrid();
} }
} }
} }
} }
dial.initUI = function(){
dial.Head = document.getElementById('head'); utils.getPath = function(){
dial.Title = document.getElementById('title'); var path = new URL(window.location).searchParams.get('path');
dial.Body = document.getElementById('body'); if(path) return path + '/';
dial.Body.setAttribute('contextmenu', 'page'); else return '/';
dial.Body.setAttribute('contextmenu', 'page'); };
app.init = function(){
app.Messages.getSettings(function(settings){
if(settings && settings.grid) app.Settings._changed(settings);
dial.path = utils.getPath();
app.Messages.getNode(dial.path, app.GridNodes._changed);
app.Messages.init();
});
};
app.Messages = {};
app.Messages.Commands = {
getSettings: 0,
setSettings: 1,
getNode: 2,
setNodeIndex: 3,
createBookmark: 4,
createFolder: 5,
deleteNode: 6,
refreshNode: 7,
capturePage: 8,
settingsChanged: 100,
gridNodesLoaded: 101
};
app.Messages.init = function(){
browser.runtime.onMessage.addListener(function(request, sender, sendResponse){
switch(request.cmd){
case app.Messages.Commands.settingsChanged:
app.Messages.getSettings(app.Settings._changed);
break;
case app.Messages.Commands.gridNodesLoaded:
app.Messages.getNode(dial.path, app.GridNodes._changed);
break;
}
});
};
app.Messages.getSettings = function(callback){
browser.runtime.sendMessage({ cmd: app.Messages.Commands.getSettings }).then(callback, callback);
};
app.Messages.getNode = function(path, callback){
browser.runtime.sendMessage({ cmd: app.Messages.Commands.getNode, path: path }).then(callback);
};
app.Messages.setNodeIndex = function(index, newIndex, callback){
browser.runtime.sendMessage({ cmd: app.Messages.Commands.setNodeIndex, path: dial.path, index: index, newIndex: newIndex }).then(callback);
};
app.Messages.createBookmark = function(url, callback){
browser.runtime.sendMessage({ cmd: app.Messages.Commands.createBookmark, path: dial.path, url: url, title: url }).then(callback);
};
app.Messages.createFolder = function(name, callback){
browser.runtime.sendMessage({ cmd: app.Messages.Commands.createFolder, path: dial.path, name: name }).then(callback);
};
app.Messages.deleteNode = function(id, callback){
browser.runtime.sendMessage({ cmd: app.Messages.Commands.deleteNode, path: dial.path, id: id }).then(callback);
};
app.Messages.refreshNode = function(id, callback){
browser.runtime.sendMessage({ cmd: app.Messages.Commands.refreshNode, path: dial.path, id: id }).then(callback);
}
app.Messages.capturePage = function(id, callback){
browser.runtime.sendMessage({ cmd: app.Messages.Commands.capturePage, path: dial.path, id: id }).then(callback);
}
app.Settings = {};
app.Settings._changed = function(settings){
app.settings = settings;
dial.initStyles(); dial.initStyles();
dial.initGrid();
};
app.GridNodes = {};
app.GridNodes.GridNodeType = { // GridNodeType
back: -1,
empty: 0,
folder: 1,
bookmark: 2
}
app.GridNodes._changed = function(node){
app.node = node;
dial.Title.innerText = app.node.title;
dial.populateGrid();
};
dial.init = function(){
dial.initMenus(); dial.initMenus();
dial.Grid = dial.initGrid('Grid', app.settings.grid, dial.Body); dial.Title = document.createElement('title');
var url = new URL(window.location); document.head.appendChild(dial.Title);
dial.path = url.searchParams.get('path'); };
if(url.searchParams.get('path')) {
dial.Node = app.getNode(app.settings.grid.node, dial.path + '/');
} else {
dial.Node = app.getNode(app.settings.grid.node, '/');
}
dial.Title.innerText = dial.Node.title;
dial.populateGrid(dial.Grid, app.settings.grid, dial.Node);
}
dial.initStyles = function(){
dial.Style = document.createElement('style'), StyleSheet;
document.head.appendChild(dial.Style);
dial.styles.html = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('html { height: 100%; }')].style;
dial.styles.body = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('body { user-select: none; -moz-user-select: none; display: flex; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: ' + app.settings.backgroundColor + '; background-image: ' + app.settings.backgroundImage + '; background-repeat: no-repeat; background-size: 100% 100%; }')].style;
dial.styles.grid = {};
dial.styles.grid.grid = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid { border-collapse: collapse; margin: auto; }')].style;
dial.styles.grid.cell = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td { margin: 0px; padding: 0px; }')].style;
dial.styles.grid.link = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a { display: block; outline: none; overflow: hidden; text-decoration: none; margin: ' + app.settings.grid.cells.margin + 'px; border: 1px solid ' + app.settings.grid.cells.borderColor + '; border-radius: ' + app.settings.grid.cells.borderRadius + 'px; }')].style;
//dial.styles.grid.linkHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a:hover { border-color: ' + app.settings.grid.cells.borderColorHover + '; border-radius: ' + app.settings.grid.cells.borderRadiusHover + 'px; }')].style;
dial.styles.grid.linkHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a:hover { border-color: ' + app.settings.grid.cells.borderColorHover + '; margin: ' + app.settings.grid.cells.marginHover + 'px; border-radius: ' + app.settings.grid.cells.borderRadiusHover + 'px; }')].style;
dial.styles.grid.linkPanel = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a>div:first-child { background-repeat: no-repeat; }')].style;
dial.styles.grid.linkTitle = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a>div:last-child { height: ' + app.settings.grid.cells.titleHeight + 'px; font-size: ' + app.settings.grid.cells.titleFontSize + 'pt; font-family: ' + app.settings.grid.cells.titleFont + 'pt; text-align: center; overflow: hidden; color: ' + app.settings.grid.cells.titleColor + '; border-top: 1px solid ' + app.settings.grid.cells.borderColor + '; }')].style;
dial.styles.grid.linkTitleHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a:hover>div:last-child { color: ' + app.settings.grid.cells.titleColorHover + '; border-top-color: ' + app.settings.grid.cells.borderColorHover + ' }')].style;
dial.styles.grid.linkEmpty = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Empty { display: none; }')].style;
dial.styles.grid.linkBack = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Back :first-child { background-image: url("' + app.settings.grid.cells.backIcon + '"); background-repeat: no-repeat; background-position: center center; }')].style;
dial.styles.grid.linkFolder = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Folder :first-child { background-image: url("' + app.settings.grid.cells.folderIcon + '"); background-repeat: no-repeat; background-size: 100% 100%; }')].style;
dial.styles.grid.linkBookmark = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Bookmark :first-child { background-repeat: no-repeat; background-size: 100% 100%; }')].style;
dial.styles.grid.linkBookmarkLoading = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.BookmarkLoading :first-child { background-image: url("' + app.settings.grid.cells.loadingIcon + '"); background-repeat: no-repeat; background-position: center center; }')].style;
}
dial.initMenus = function(){ dial.initMenus = function(){
document.body.setAttribute('contextmenu', 'page');
dial.PageMenu = document.createElement('menu'); dial.PageMenu = document.createElement('menu');
dial.PageMenu.type = 'context'; dial.PageMenu.type = 'context';
dial.PageMenu.id = 'page' dial.PageMenu.id = 'page'
@@ -128,7 +150,7 @@ dial.initMenus = function(){
dial.PageMenuNew.appendChild(dial.PageMenuCreateFolder); dial.PageMenuNew.appendChild(dial.PageMenuCreateFolder);
dial.PageMenu.appendChild(document.createElement('hr')); dial.PageMenu.appendChild(document.createElement('hr'));
dial.PageMenu.appendChild(dial.PageMenuSettings); dial.PageMenu.appendChild(dial.PageMenuSettings);
dial.Body.appendChild(dial.PageMenu); document.body.appendChild(dial.PageMenu);
dial.ItemMenu = document.createElement('menu'); dial.ItemMenu = document.createElement('menu');
dial.ItemMenu.type = 'context'; dial.ItemMenu.type = 'context';
@@ -150,11 +172,15 @@ dial.initMenus = function(){
*/ */
dial.ItemMenuRefresh = document.createElement('menuitem'); dial.ItemMenuRefresh = document.createElement('menuitem');
dial.ItemMenuRefresh.label = browser.i18n.getMessage("menuRefreshItem"); dial.ItemMenuRefresh.label = browser.i18n.getMessage("menuRefreshItem");
dial.ItemMenuRefresh.onclick = dial.refreshNode; dial.ItemMenuRefresh.onclick = function(){
dial.refreshNode(dial._selectedItem);
};
dial.ItemMenuCapture = document.createElement('menuitem'); dial.ItemMenuCapture = document.createElement('menuitem');
dial.ItemMenuCapture.label = browser.i18n.getMessage("menuCapturePage"); dial.ItemMenuCapture.label = browser.i18n.getMessage("menuCapturePage");
dial.ItemMenuCapture.onclick = dial.capturePage; dial.ItemMenuCapture.onclick = function(){
dial.capturePage(dial._selectedItem);
};
dial.ItemMenuDelete = document.createElement('menuitem'); dial.ItemMenuDelete = document.createElement('menuitem');
dial.ItemMenuDelete.label = browser.i18n.getMessage("menuDeleteItem"); dial.ItemMenuDelete.label = browser.i18n.getMessage("menuDeleteItem");
@@ -174,31 +200,59 @@ dial.initMenus = function(){
dial.ItemMenu.appendChild(dial.ItemMenuDelete); dial.ItemMenu.appendChild(dial.ItemMenuDelete);
dial.ItemMenu.appendChild(document.createElement('hr')); dial.ItemMenu.appendChild(document.createElement('hr'));
dial.ItemMenu.appendChild(dial.ItemMenuSettings); dial.ItemMenu.appendChild(dial.ItemMenuSettings);
dial.Body.appendChild(dial.ItemMenu); document.body.appendChild(dial.ItemMenu);
} }
dial.initStyles = function(){
dial.initGrid = function(name, settings, container){ if(dial.Style) document.head.removeChild(dial.Style);
dial.Style = document.createElement('style'), StyleSheet;
document.head.appendChild(dial.Style);
dial.styles = {};
dial.styles.html = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('html { height: 100%; }')].style;
dial.styles.body = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('body { user-select: none; -moz-user-select: none; display: flex; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: ' + app.settings.backgroundColor + '; background-image: ' + app.settings.backgroundImage + '; background-repeat: no-repeat; background-size: 100% 100%; }')].style;
dial.styles.grid = {};
dial.styles.grid.grid = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid { border-collapse: collapse; margin: auto; }')].style;
dial.styles.grid.cell = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td { margin: 0px; padding: 0px; }')].style;
dial.styles.grid.link = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a { display: block; outline: none; overflow: hidden; text-decoration: none; margin: ' + app.settings.grid.cells.margin + 'px; border: 1px solid ' + app.settings.grid.cells.borderColor + '; border-radius: ' + app.settings.grid.cells.borderRadius + 'px; }')].style;
//dial.styles.grid.linkHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a:hover { border-color: ' + app.settings.grid.cells.borderColorHover + '; border-radius: ' + app.settings.grid.cells.borderRadiusHover + 'px; }')].style;
dial.styles.grid.linkHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a:hover { border-color: ' + app.settings.grid.cells.borderColorHover + '; margin: ' + app.settings.grid.cells.marginHover + 'px; border-radius: ' + app.settings.grid.cells.borderRadiusHover + 'px; }')].style;
dial.styles.grid.linkPanel = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a>div:first-child { background-repeat: no-repeat; }')].style;
if(app.settings.grid.cells.backgroundColor) dial.styles.grid.linkPanel.backgroundColor = app.settings.grid.cells.backgroundColor;
dial.styles.grid.linkPanelHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a:hover>div:first-child { }')].style;
if(app.settings.grid.cells.backgroundColorHover) dial.styles.grid.linkPanelHover.backgroundColor = app.settings.grid.cells.backgroundColorHover;
dial.styles.grid.linkTitle = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a>div:last-child { height: ' + app.settings.grid.cells.titleHeight + 'px; font-size: ' + app.settings.grid.cells.titleFontSize + 'pt; font-family: ' + app.settings.grid.cells.titleFont + 'pt; text-align: center; overflow: hidden; color: ' + app.settings.grid.cells.titleColor + '; border-top: 1px solid ' + app.settings.grid.cells.borderColor + '; }')].style;
if(app.settings.grid.cells.titleBackgroundColor) dial.styles.grid.linkTitle.backgroundColor = app.settings.grid.cells.titleBackgroundColor;
dial.styles.grid.linkTitleHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a:hover>div:last-child { color: ' + app.settings.grid.cells.titleColorHover + '; border-top-color: ' + app.settings.grid.cells.borderColorHover + ' }')].style;
if(app.settings.grid.cells.titleBackgroundColorHover) dial.styles.grid.linkTitleHover.backgroundColor = app.settings.grid.cells.titleBackgroundColorHover;
dial.styles.grid.linkEmpty = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Empty { display: none; }')].style;
dial.styles.grid.linkBack = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Back :first-child { background-image: ' + app.settings.grid.backIcon + '; background-repeat: no-repeat; background-position: center center; }')].style;
dial.styles.grid.linkFolder = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Folder :first-child { background-image: ' + app.settings.grid.folderIcon + '; background-repeat: no-repeat; background-size: 100% 100%; }')].style;
dial.styles.grid.linkBookmark = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Bookmark :first-child { background-repeat: no-repeat; background-size: 100% 100%; }')].style;
dial.styles.grid.linkBookmarkLoading = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.BookmarkLoading :first-child { background-image: url("' + app.settings.grid.cells.loadingIcon + '"); background-repeat: no-repeat; background-position: center center; }')].style;
};
dial.initGrid = function(){
if(dial.Grid) document.body.removeChild(dial.Grid);
dial.Grid = document.createElement('table');
var grid = document.createElement('table'); var grid = document.createElement('table');
grid.className = name; dial.Grid.className = 'Grid';
grid.getLink = function(index){ dial.Grid.getLink = function(index){
var num_columns = grid.rows[0].cells.length; var num_columns = dial.Grid.rows[0].cells.length;
return grid.rows[Math.floor(index/num_columns)].cells[index % num_columns].childNodes[0]; return dial.Grid.rows[Math.floor(index/num_columns)].cells[index % num_columns].childNodes[0];
} }
for(var i=0; i<settings.rows; i++){ for(var i=0; i<app.settings.grid.rows; i++){
var row = grid.insertRow(); var row = dial.Grid.insertRow();
for(var j=0; j<settings.columns; j++){ for(var j=0; j<app.settings.grid.columns; j++){
var cell = row.insertCell(); var cell = row.insertCell();
var link = document.createElement('a'); var link = document.createElement('a');
cell.setAttribute('gridindex', (i * settings.columns + j)); cell.setAttribute('gridindex', (i * app.settings.grid.columns + j));
cell.appendChild(link); cell.appendChild(link);
link.className = 'Empty';
link.appendChild(document.createElement('div')); link.appendChild(document.createElement('div'));
link.appendChild(document.createElement('div')); link.appendChild(document.createElement('div'));
link.onmousedown = function(){ dial._selectedItem = this; }; link.onmousedown = function(){ dial._selectedItem = this; };
function dragstart_handler(ev) { function dragstart_handler(ev) {
var index = (dial.page - 1) * (app.settings.grid.rows * app.settings.grid.columns) + +(ev.target.parentElement.getAttribute('gridindex')); var index = (dial.page - 1) * (app.settings.grid.rows * app.settings.grid.columns) + +(ev.target.parentElement.getAttribute('gridindex'));
if(settings.cells.backPanel && dial.path) index -= dial.page; if(app.settings.grid.backNode && dial.path != '/') index -= dial.page;
console.log(index);
ev.dataTransfer.setData("text/plain", index); ev.dataTransfer.setData("text/plain", index);
} }
function dragover_handler(ev) { function dragover_handler(ev) {
@@ -213,44 +267,41 @@ dial.initGrid = function(name, settings, container){
if(ev.target.tagName == 'DIV'){ if(ev.target.tagName == 'DIV'){
EndIndex = (dial.page - 1) * (app.settings.grid.rows * app.settings.grid.columns) + +(ev.target.parentElement.parentElement.getAttribute('gridindex')); EndIndex = (dial.page - 1) * (app.settings.grid.rows * app.settings.grid.columns) + +(ev.target.parentElement.parentElement.getAttribute('gridindex'));
} else{ } else{
EndIndex =(dial.page - 1) * (app.settings.grid.rows * app.settings.grid.columns) + +(ev.target.getAttribute('gridindex')); EndIndex = (dial.page - 1) * (app.settings.grid.rows * app.settings.grid.columns) + +(ev.target.getAttribute('gridindex'));
} }
if(settings.cells.backPanel && dial.path) EndIndex -= dial.page; if(app.settings.grid.backNode && dial.path != '/') EndIndex -= dial.page;
app.setNodeIndex(dial.Node, StartIndex, EndIndex); app.Messages.setNodeIndex(StartIndex, EndIndex);
} }
link.draggable = true; link.draggable = true;
link.ondragstart = dragstart_handler; link.ondragstart = dragstart_handler;
cell.ondragover = dragover_handler; cell.ondragover = dragover_handler;
cell.ondrop = drop_handler; cell.ondrop = drop_handler;
} }
} }
container.appendChild(grid); document.body.appendChild(dial.Grid);
dial.updateGridLayout(grid, settings, dial.styles.grid); dial.updateGridLayout();
return grid; return dial.Grid;
} };
dial.updateGridLayout = function(){
dial.updateGridLayout = function(grid, settings, styles){ var fullWidth = dial.Grid.parentElement.offsetWidth - 2 * app.settings.grid.margin;
var fullWidth = grid.parentElement.offsetWidth - 2 * settings.margin; var fullHeight = dial.Grid.parentElement.offsetHeight - 2 * app.settings.grid.margin;
var fullHeight = grid.parentElement.offsetHeight - 2 * settings.margin; var linkWidth = fullWidth / app.settings.grid.columns;
var linkWidth = fullWidth / settings.columns; var linkHeight = fullHeight / app.settings.grid.rows;
var linkHeight = fullHeight / settings.rows; if(linkWidth <= linkHeight * 4 / 3) linkHeight = linkWidth / 4 * 3;
if(linkWidth <= linkHeight * settings.cells.ratioX / settings.cells.ratioY) linkHeight = linkWidth / settings.cells.ratioX * settings.cells.ratioY; else linkWidth = linkHeight / 3 * 4;
else linkWidth = linkHeight / settings.cells.ratioY * settings.cells.ratioX;
styles.cell.width = linkWidth.toString() + 'px'; dial.styles.grid.cell.width = linkWidth.toString() + 'px';
styles.cell.height = linkHeight.toString() + 'px'; dial.styles.grid.cell.height = linkHeight.toString() + 'px';
linkWidth = linkWidth - 2 * (settings.cells.margin + 1); linkWidth = linkWidth - 2 * (app.settings.grid.cells.margin + 1);
linkHeight = linkHeight - 2 * (settings.cells.margin + 1); linkHeight = linkHeight - 2 * (app.settings.grid.cells.margin + 1);
styles.link.width = linkWidth.toString() + 'px'; dial.styles.grid.link.width = linkWidth.toString() + 'px';
styles.link.height = linkHeight.toString() + 'px'; dial.styles.grid.link.height = linkHeight.toString() + 'px';
if(settings.cells.title) styles.linkPanel.height = (linkHeight - settings.cells.titleHeight - 1).toString() + 'px'; if(app.settings.grid.cells.title) dial.styles.grid.linkPanel.height = (linkHeight - app.settings.grid.cells.titleHeight - 1).toString() + 'px';
else styles.linkPanel.height = linkHeight.toString() + 'px'; else dial.styles.grid.linkPanel.height = linkHeight.toString() + 'px';
} };
dial.populateGrid = function(){
dial.populateGrid = function(grid, settings, node){
populateEmpty = function(link){ populateEmpty = function(link){
link.Node = null; link.Node = null;
link.className = 'Empty'; link.className = 'Empty';
@@ -273,7 +324,7 @@ dial.populateGrid = function(grid, settings, node){
link.className = 'Folder'; link.className = 'Folder';
link.childNodes[0].style.backgroundImage = ''; link.childNodes[0].style.backgroundImage = '';
link.childNodes[1].innerText = node.title; link.childNodes[1].innerText = node.title;
if(dial.path) link.href = '?path=' + dial.path + '/' + node.title; if(dial.path) link.href = '?path=' + dial.path + node.title;
else link.href = '?path=' + node.title; else link.href = '?path=' + node.title;
link.onclick = null; link.onclick = null;
link.setAttribute('contextmenu', 'item'); link.setAttribute('contextmenu', 'item');
@@ -286,11 +337,7 @@ dial.populateGrid = function(grid, settings, node){
} else { } else {
link.className = 'BookmarkLoading'; link.className = 'BookmarkLoading';
link.childNodes[0].style.backgroundImage = ''; link.childNodes[0].style.backgroundImage = '';
app.refreshNode(node, function(){ dial.refreshNode(link);
link.className = 'Bookmark';
link.childNodes[0].style.backgroundImage = 'url(' + node.image + ')';
link.childNodes[1].innerText = node.title;
});
} }
link.childNodes[1].innerText = node.title; link.childNodes[1].innerText = node.title;
link.href = node.url; link.href = node.url;
@@ -300,69 +347,59 @@ dial.populateGrid = function(grid, settings, node){
var iBase = 0; var iBase = 0;
var linkItem = 0; var linkItem = 0;
var allCells = settings.rows * settings.columns; var allCells = app.settings.grid.rows * app.settings.grid.columns;
var maxCells = allCells; var maxCells = allCells;
if(settings.cells.backPanel && dial.path){ if(app.settings.grid.backNode && dial.path != '/'){
populateBack(grid.getLink(linkItem)); populateBack(dial.Grid.getLink(linkItem));
linkItem++; linkItem++;
maxCells -= 1; maxCells -= 1;
} }
dial.maxpage = Math.floor(node.children.length / maxCells); dial.maxpage = Math.floor(app.node.children.length / maxCells);
if(dial.maxpage != node.children.length / maxCells) dial.maxpage += 1; if(dial.maxpage != app.node.children.length / maxCells) dial.maxpage += 1;
if(dial.page > dial.maxpage) dial.page = dial.maxpage; if(dial.page > dial.maxpage) dial.page = dial.maxpage;
if(dial.page > 1) iBase = (dial.page -1) * maxCells; if(dial.page > 1) iBase = (dial.page -1) * maxCells;
for(var i = iBase; i<node.children.length && i<maxCells + iBase; i++) { for(var i = iBase; i<app.node.children.length && i<maxCells + iBase; i++) {
switch(node.children[i].type){ switch(app.node.children[i].type){
case app.GridNodeType.empty: case app.GridNodes.GridNodeType.empty:
populateEmpty(grid.getLink(linkItem)); populateEmpty(dial.Grid.getLink(linkItem));
break; break;
case app.GridNodeType.folder: case app.GridNodes.GridNodeType.folder:
populateFolder(grid.getLink(linkItem), node.children[i]); populateFolder(dial.Grid.getLink(linkItem), app.node.children[i]);
break; break;
case app.GridNodeType.bookmark: case app.GridNodes.GridNodeType.bookmark:
populateBookmark(grid.getLink(linkItem), node.children[i]); populateBookmark(dial.Grid.getLink(linkItem), app.node.children[i]);
break; break;
} }
linkItem++; linkItem++;
} }
while(linkItem<allCells){ while(linkItem<allCells){
populateEmpty(grid.getLink(linkItem)); populateEmpty(dial.Grid.getLink(linkItem));
linkItem++; linkItem++;
} }
} };
dial.createBookmark = function(){ dial.createBookmark = function(){
var url = prompt(browser.i18n.getMessage("AddBookmarkPrompt"), 'https://'); var url = prompt(browser.i18n.getMessage("AddBookmarkPrompt"), 'https://');
if(url) app.createBookmark(dial.Node, url); if(url) app.Messages.createBookmark(url);
}; };
dial.createFolder = function(){ dial.createFolder = function(){
var name = prompt(browser.i18n.getMessage("AddFolderPrompt"), 'New Folder'); var name = prompt(browser.i18n.getMessage("AddFolderPrompt"), 'New Folder');
if(name) app.createFolder(dial.Node, name); if(name) app.Messages.createFolder(name);
}; };
dial.refreshNode = function(){
if(dial._selectedItem.Node.type == app.GridNodeType.bookmark){
var link = dial._selectedItem;
link.className = 'BookmarkLoading';
link.childNodes[0].style.backgroundImage = '';
app.refreshNode(link.Node, function(){
link.className = 'Bookmark';
link.childNodes[0].style.backgroundImage = 'url(' + link.Node.image + ')';
link.childNodes[1].innerText = link.Node.title;
});
}
}
dial.deleteNode = function(){ dial.deleteNode = function(){
if(confirm(browser.i18n.getMessage("deleteItemConfimation", dial._selectedItem.Node.title))) if(confirm(browser.i18n.getMessage("deleteItemConfimation", dial._selectedItem.Node.title)))
app.deleteNode(dial.Node, dial._selectedItem.Node.id); app.Messages.deleteNode(dial._selectedItem.Node.id);
}
dial.refreshNode = function(selectedItem){
selectedItem.className = 'BookmarkLoading';
selectedItem.childNodes[0].style.backgroundImage = app.settings.grid.loadingIcon;
app.Messages.refreshNode(selectedItem.Node.id);
}
dial.capturePage = function(selectedItem){
selectedItem.className = 'BookmarkLoading';
selectedItem.childNodes[0].style.backgroundImage = app.settings.grid.loadingIcon;
app.Messages.capturePage(selectedItem.Node.id);
} }
dial.capturePage = function(){
if(dial._selectedItem.Node.type == app.GridNodeType.bookmark)
app.capturePage(dial._selectedItem.Node);
}
@@ -394,20 +431,20 @@ dial.PopupPanel = function(width, height, modal){ // PopupPanel Object
this._contextMenuHandler = function(e){ e.preventDefault(); } this._contextMenuHandler = function(e){ e.preventDefault(); }
this.popup = function(){ this.popup = function(){
window.addEventListener('contextmenu', this._contextMenuHandler, false); window.addEventListener('contextmenu', this._contextMenuHandler, false);
dial.Body.appendChild(this.modal); document.body.appendChild(this.modal);
dial.Body.appendChild(this.panelContainer); document.body.appendChild(this.panelContainer);
} }
this.close = function(){ this.close = function(){
dial.Body.removeChild(this.modal); document.body.removeChild(this.modal);
dial.Body.removeChild(this.panelContainer); document.body.removeChild(this.panelContainer);
window.removeEventListener('contextmenu', this._contextMenuHandler, false); window.removeEventListener('contextmenu', this._contextMenuHandler, false);
} }
} else { } else {
this.popup = function(){ this.popup = function(){
dial.Body.appendChild(this.panelContainer); document.body.appendChild(this.panelContainer);
} }
this.close = function(){ this.close = function(){
dialBody.removeChild(this.panelContainer); document.body.removeChild(this.panelContainer);
} }
} }
} }

103
src/js/settings.js
View File

@@ -1,8 +1,12 @@
var BackgroundImage = null; var app = {};
window.onload = function(){ var BackgroundImage = null;
browser.runtime.getBackgroundPage().then(function(page){ var GridBackImage = null;
app = page.app; var GridFolderImage = null;
app.init = function(){
app.Messages.getSettings(function(settings){
app.settings = settings;
BackgroundColor.value = app.settings.backgroundColor; BackgroundColor.value = app.settings.backgroundColor;
BackgroundImage = app.settings.backgroundImage; BackgroundImage = app.settings.backgroundImage;
BackgroundPreview.style.backgroundColor = app.settings.backgroundColor; BackgroundPreview.style.backgroundColor = app.settings.backgroundColor;
@@ -12,8 +16,21 @@ window.onload = function(){
GridRows.value = app.settings.grid.rows; GridRows.value = app.settings.grid.rows;
GridMargins.value = app.settings.grid.margin; GridMargins.value = app.settings.grid.margin;
GridColumns.value = app.settings.grid.columns; GridColumns.value = app.settings.grid.columns;
GridBackNode.checked = app.settings.grid.backNode;
GridBackImage = app.settings.grid.backIcon;
GridBackPreview.style.backgroundImage = app.settings.grid.backIcon;
GridBackPreview.style.backgroundRepeat = 'no-repeat';
GridBackPreview.style.backgroundPosition = '50% 50%';
GridFolderImage = app.settings.grid.folderIcon;
GridFolderPreview.style.backgroundImage = app.settings.grid.folderIcon;
GridFolderPreview.style.backgroundRepeat = 'no-repeat';
GridFolderPreview.style.backgroundSize = '100% 100%';
GridCellsMargins.value = app.settings.grid.cells.margin; GridCellsMargins.value = app.settings.grid.cells.margin;
GridCellsMarginsHover.value = app.settings.grid.cells.marginHover; GridCellsMarginsHover.value = app.settings.grid.cells.marginHover;
GridCellsBackgroundTransparent.checked = (app.settings.grid.cells.backgroundColor == null);
GridCellsBackgroundColor.value = app.settings.grid.cells.backgroundColor;
GridCellsBackgroundTransparentHover.checked = (app.settings.grid.cells.backgroundColorHover == null);
GridCellsBackgroundColorHover.value = app.settings.grid.cells.backgroundColorHover;
GridCellsBorderRadius.value = app.settings.grid.cells.borderRadius; GridCellsBorderRadius.value = app.settings.grid.cells.borderRadius;
GridCellsBorderRadiusHover.value = app.settings.grid.cells.borderRadiusHover; GridCellsBorderRadiusHover.value = app.settings.grid.cells.borderRadiusHover;
GridCellsBorderColor.value = app.settings.grid.cells.borderColor; GridCellsBorderColor.value = app.settings.grid.cells.borderColor;
@@ -23,6 +40,10 @@ window.onload = function(){
GridCellsTitleFontSize.value = app.settings.grid.cells.titleFontSize; GridCellsTitleFontSize.value = app.settings.grid.cells.titleFontSize;
GridCellsTitleColor.value = app.settings.grid.cells.titleColor; GridCellsTitleColor.value = app.settings.grid.cells.titleColor;
GridCellsTitleColorHover.value = app.settings.grid.cells.titleColorHover; GridCellsTitleColorHover.value = app.settings.grid.cells.titleColorHover;
GridCellsTitleBackgroundTransparent.checked = (app.settings.grid.cells.titleBackgroundColor == null);
GridCellsTitleBackgroundColor.value = app.settings.grid.cells.titleBackgroundColor;
GridCellsTitleBackgroundColorHover.value = app.settings.grid.cells.titleBackgroundColorHover;
GridCellsTitleBackgroundTransparentHover.checked = (app.settings.grid.cells.titleBackgroundColorHover == null);
}); });
BtnOk.onclick = function(){ BtnOk.onclick = function(){
@@ -35,9 +56,16 @@ window.onload = function(){
app.settings.grid.rows = +(GridRows.value); app.settings.grid.rows = +(GridRows.value);
app.settings.grid.margin = +(GridMargins.value); app.settings.grid.margin = +(GridMargins.value);
app.settings.grid.columns = +(GridColumns.value); app.settings.grid.columns = +(GridColumns.value);
app.settings.grid.backNode = GridBackNode.checked;
app.settings.grid.backIcon = GridBackImage;
app.settings.grid.folderIcon = GridFolderImage;
app.settings.grid.cells.margin = +(GridCellsMargins.value); app.settings.grid.cells.margin = +(GridCellsMargins.value);
//app.settings.grid.cells.marginHover = +(GridCellsMarginsHover.value); //app.settings.grid.cells.marginHover = +(GridCellsMarginsHover.value);
app.settings.grid.cells.marginHover = +(GridCellsMargins.value); app.settings.grid.cells.marginHover = +(GridCellsMargins.value);
if(GridCellsBackgroundTransparent.checked == true) app.settings.grid.cells.backgroundColor = null;
else app.settings.grid.cells.backgroundColor = GridCellsBackgroundColor.value;
if(GridCellsBackgroundTransparentHover.checked == true) app.settings.grid.cells.backgroundColorHover = null;
else app.settings.grid.cells.backgroundColorHover = GridCellsBackgroundColorHover.value;
app.settings.grid.cells.borderRadius = +(GridCellsBorderRadius.value); app.settings.grid.cells.borderRadius = +(GridCellsBorderRadius.value);
app.settings.grid.cells.borderRadiusHover = +(GridCellsBorderRadiusHover.value); app.settings.grid.cells.borderRadiusHover = +(GridCellsBorderRadiusHover.value);
app.settings.grid.cells.borderColor = GridCellsBorderColor.value; app.settings.grid.cells.borderColor = GridCellsBorderColor.value;
@@ -47,7 +75,11 @@ window.onload = function(){
app.settings.grid.cells.titleFontSize = GridCellsTitleFontSize.value; app.settings.grid.cells.titleFontSize = GridCellsTitleFontSize.value;
app.settings.grid.cells.titleColor = GridCellsTitleColor.value; app.settings.grid.cells.titleColor = GridCellsTitleColor.value;
app.settings.grid.cells.titleColorHover = GridCellsTitleColorHover.value; app.settings.grid.cells.titleColorHover = GridCellsTitleColorHover.value;
app.saveSettings(); if(GridCellsTitleBackgroundTransparent.checked == true) app.settings.grid.cells.titleBackgroundColor = null;
else app.settings.grid.cells.titleBackgroundColor = GridCellsTitleBackgroundColor.value;
if(GridCellsTitleBackgroundTransparentHover.checked == true) app.settings.grid.cells.titleBackgroundColorHover = null;
else app.settings.grid.cells.titleBackgroundColorHover = GridCellsTitleBackgroundColorHover.value;
browser.runtime.sendMessage( { cmd: app.Messages.Commands.setSettings, settings: app.settings } );
} }
BtnCancel.onclick = function(){ BtnCancel.onclick = function(){
window.frameElement.popup.close(); window.frameElement.popup.close();
@@ -89,4 +121,63 @@ window.onload = function(){
fileReader.readAsDataURL(BackgroundImageFile.files[0]); fileReader.readAsDataURL(BackgroundImageFile.files[0]);
} }
} GridBackImageReset.onclick = function(){
GridBackImage = 'url(/img/back.png)';
GridBackPreview.style.backgroundImage = GridBackImage;
}
GridBackImageFile.onclick = function(){
this.value = null;
}
GridBackImageFile.onchange = function(){
var fileReader = new FileReader();
fileReader.onload = function(e){
GridBackImage = 'url(' + e.target.result + ')';
GridBackImageFile.value = null;
GridBackPreview.style.backgroundImage = GridBackImage;
}
fileReader.readAsDataURL(GridBackImageFile.files[0]);
}
GridFolderImageReset.onclick = function(){
GridFolderImage = 'url(/img/folder.png)';
GridFolderPreview.style.backgroundImage = GridFolderImage;
}
GridFolderImageFile.onclick = function(){
this.value = null;
}
GridFolderImageFile.onchange = function(){
var fileReader = new FileReader();
fileReader.onload = function(e){
GridFolderImage = 'url(' + e.target.result + ')';
GridFolderImageFile.value = null;
GridFolderPreview.style.backgroundImage = GridFolderImage;
}
fileReader.readAsDataURL(GridFolderImageFile.files[0]);
}
};
app.Messages = {};
app.Messages.Commands = {
getSettings: 0,
setSettings: 1,
getNode: 2,
setNodeIndex: 3,
createBookmark: 4,
createFolder: 5,
deleteNode: 6,
refreshNode: 7,
capturePage: 8,
settingsChanged: 100,
gridNodesLoaded: 101
};
app.Messages.getSettings = function(callback){
browser.runtime.sendMessage({ cmd: app.Messages.Commands.getSettings }).then(callback);
};
window.onload = function(){
app.init();
};

2
src/manifest.json
View File

@@ -2,7 +2,7 @@
"manifest_version": 2, "manifest_version": 2,
"name": "Quick Dial", "name": "Quick Dial",
"version": "0.0.2", "version": "0.1.1",
"author": "MatMoul", "author": "MatMoul",
"homepage_url": "https://github.com/MatMoul/quickdial-webext", "homepage_url": "https://github.com/MatMoul/quickdial-webext",
"developer": { "developer": {