diff --git a/src/dial b/src/dial index 6075aef..7181c96 100644 --- a/src/dial +++ b/src/dial @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/js/background.js b/src/js/background.js index f809d97..ecd6126 100644 --- a/src/js/background.js +++ b/src/js/background.js @@ -2,74 +2,155 @@ var core = {}; // Main app object in background.js var app = {}; // Shared app object with pages core.init = function(){ // Init module - core.Settings.load(function(){ - core.GridNodes.sync(app.settings.grid.node, app.settings.grid.root, function(){ // Sync bookmarks with stored data - core.ContextMenus.initMenu(); + core.Settings.init(function(){ + core.GridNodes.sync(core.node, core.settings.grid.root, function(){ + core.Messages.init(); + browser.runtime.sendMessage({ cmd: 'SettingsChanged' }); + browser.runtime.sendMessage({ cmd: 'GridNodesLoaded' }); core.Bookmarks.initListener(); }); }); -} +}; + +core.Messages = {}; // Messages helper object +core.Messages.init = function(){ // Init Messages Listeners + browser.runtime.onMessage.addListener(function(request, sender, sendResponse){ + switch(request.cmd){ + case 'GetSettings': + sendResponse(core.settings); + break; + case 'SetSettings': + core.settings = request.settings; + core.Settings.save(); + sendResponse(core.settings); + browser.runtime.sendMessage( { cmd: 'SettingsChanged' } ); + browser.runtime.sendMessage( { cmd: 'GridNodesLoaded' } ); + break; + case 'GetNode': + sendResponse(core.GridNodes.getNode(core.node, request.path.substr(1))); + break; + case 'SetNodeIndex': + core.GridNodes.setNodeIndex(core.GridNodes.getNode(core.node, request.path.substr(1)), request.index, request.newIndex, function(){ + browser.runtime.sendMessage( { cmd: 'GridNodesLoaded' } ); + }); + break; + case 'CreateBookmark': + core.GridNodes.createBookmark(core.GridNodes.getNode(core.node, request.path.substr(1)), request.url, request.title, function(){ + browser.runtime.sendMessage( { cmd: 'GridNodesLoaded' } ); + }); + break; + case 'CreateFolder': + core.GridNodes.createFolder(core.GridNodes.getNode(core.node, request.path.substr(1)), request.name, function(){ + browser.runtime.sendMessage( { cmd: 'GridNodesLoaded' } ); + }); + break; + case 'DeleteNode': + core.GridNodes.deleteNode(core.GridNodes.getNode(core.node, request.path.substr(1)), request.id, function(){ + browser.runtime.sendMessage( { cmd: 'GridNodesLoaded' } ); + }); + break; + case 'RefreshNode': + core.GridNodes.refreshNode(core.GridNodes.getChildNode(core.GridNodes.getNode(core.node, request.path.substr(1)), request.id), function(){ + browser.runtime.sendMessage( { cmd: 'GridNodesLoaded' } ); + }); + break; + case 'CapturePage': + core.GridNodes.capturePage(core.GridNodes.getChildNode(core.GridNodes.getNode(core.node, request.path.substr(1)), request.id), function(){ + browser.runtime.sendMessage( { cmd: 'GridNodesLoaded' } ); + }); + break; + } + }); +}; core.Settings = {}; // Settings helper object -core.Settings.load = function(callback){ // Load settings - browser.storage.local.get({ - version: 2, - backgroundColor: '#3c4048', - backgroundImage: null, - grid: { - margin: 10, - rows: 4, - columns: 5, - backNode: true, - backIcon: 'url(/img/back.png)', - folderIcon: 'url(/img/folder.png)', - loadingIcon: 'url(/img/throbber.gif)', - cells: { - margin: 4, - marginHover: 4, - ratioX: 4, - ratioY: 3, - backgroundColor: null, - backgroundColorHover: null, - borderColor: '#333333', - borderColorHover: '#a9a9a9', - borderRadius: 4, - borderRadiusHover: 4, - title: true, - titleHeight: 16, - titleFontSize: 10, - titleFont: 'Arial, Verdana, Sans-serif', - titleColor: '#ffffff', - titleColorHover: '#33ccff', - titleBackgroundColor: null, - titleBackgroundColorHover: null - }, - root: 'Quick Dial', - node: { children: [] } +core.Settings.init = function(callback){ // Load settings and nodes + browser.storage.local.get().then(function(data){ + if(Object.keys(data).length == 0) { + data = { + version: 3, + settings: { + backgroundColor: '#3c4048', + backgroundImage: null, + grid: { + margin: 10, + rows: 4, + columns: 5, + backNode: true, + backIcon: 'url(/img/back.png)', + folderIcon: 'url(/img/folder.png)', + loadingIcon: 'url(/img/throbber.gif)', + cells: { + margin: 4, + marginHover: 4, + backgroundColor: null, + backgroundColorHover: null, + borderColor: '#333333', + borderColorHover: '#a9a9a9', + borderRadius: 4, + borderRadiusHover: 4, + title: true, + titleHeight: 16, + titleFontSize: 10, + titleFont: 'Arial, Verdana, Sans-serif', + titleColor: '#ffffff', + titleColorHover: '#33ccff', + titleBackgroundColor: null, + titleBackgroundColorHover: null, + previewWidth: 1200, + previewHeight: 710 + }, + root: 'Quick Dial', + } + }, + node: { children: [] } + } } - }).then(function(obj){ - if(obj.grid.cells.backIcon){ // Upgrade Data Version - obj.version = 2; - obj.grid.backNode = true; - obj.grid.backIcon = 'url(/img/back.png)'; - obj.grid.folderIcon = 'url(/img/folder.png)'; - obj.grid.loadingIcon = 'url(/img/throbber.gif)'; - obj.grid.cells.backgroundColor = null; - obj.grid.cells.backgroundColorHover = null; - obj.grid.cells.titleBackgroundColor = null; - obj.grid.cells.titleBackgroundColorHover = null; - delete obj.grid.cells.backIcon; - delete obj.grid.cells.folderIcon; - delete obj.grid.cells.loadingIcon; - delete obj.grid.cells.backPanel; + if(!data.version){ // Upgrade Data Version + 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; } - app.settings = obj; + 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(); - }); -} -core.Settings.save = function(){ // Save settings - browser.storage.local.set(app.settings); - browser.runtime.sendMessage({ command: 'SettingsChanged' }); + }, function(){ console.log('Error loading data'); }); +}; +core.Settings.update = function(settings, callback){ // Save new settings + core.settings = settings; + 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(); @@ -83,19 +164,26 @@ core.ContextMenus.initMenu = function(){ // (Called from core.init) Init context documentUrlPatterns: [ 'http://*/*', 'https://*/*', 'file://*/*' ] }, function(){}); browser.contextMenus.onClicked.addListener(function(info, tab) { // Context menu click event - if (info.menuItemId == "AddToQuickDial") - core.GridNodes.createBookmark(app.settings.grid.node, info.pageUrl, tab.title, function(){}); + //if (info.menuItemId == "AddToQuickDial") + //core.GridNodes.createBookmark(app.settings.grid.node, info.pageUrl, tab.title, function(){}); }); } core.Bookmarks = {} // Bookmarks helper object -core.Bookmarks._onCreated = function(){ core.GridNodes.sync(app.settings.grid.node, app.settings.grid.root); } -core.Bookmarks._onChanged = function(){ core.GridNodes.sync(app.settings.grid.node, app.settings.grid.root); } -core.Bookmarks._onMoved = function(){ core.GridNodes.sync(app.settings.grid.node, app.settings.grid.root); } -core.Bookmarks._onRemoved = function(){ core.GridNodes.sync(app.settings.grid.node, app.settings.grid.root); } +core.Bookmarks._onCreated = function(){ } +core.Bookmarks._onChanged = function(){ } +core.Bookmarks._onMoved = function(){ } +core.Bookmarks._onRemoved = function(){ } +/* +core.Bookmarks._onCreated = function(){ core.GridNodes.sync(core.settings.grid.node, core.settings.grid.root); } +core.Bookmarks._onChanged = function(){ core.GridNodes.sync(core.settings.grid.node, core.settings.grid.root); } +core.Bookmarks._onMoved = function(){ core.GridNodes.sync(core.settings.grid.node, core.settings.grid.root); } +core.Bookmarks._onRemoved = function(){ core.GridNodes.sync(core.settings.grid.node, core.settings.grid.root); } +*/ +// --------- 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.onChanged.addListener(core.Bookmarks._onChanged); + browser.bookmarks.onChanged.addListener(core.Bookmarks._onChanged); browser.bookmarks.onMoved.addListener(core.Bookmarks._onMoved); browser.bookmarks.onRemoved.addListener(core.Bookmarks._onRemoved); } @@ -122,29 +210,6 @@ core.Bookmarks.load = function(rootPath, callback){ // Load root bookmark and cr } core.SiteInfos = {} // Siteinfos helper object -core.SiteInfos.fromTab = function(callback){ // Retrieve infos from current 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.fromNewTab = 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.update(tab.id, {muted: true}).then(); @@ -185,12 +250,12 @@ core.SiteInfos.fromNewTab = function(url, callback){ // Retrieve infos from a n ctx.restore(); img = canvas.toDataURL(); if(callback) callback( { url: tab.url, title: tab.title, icon: tab.favIconUrl, screenshot: img } ); - }, 1); + }, 100); }, function(){ browser.tabs.remove(tab.id); if(callback) callback(); }); - }, 300); + }, 500); }, function(){ if(callback) callback(); }); } }, function(){ if(callback) callback(); }); @@ -248,25 +313,12 @@ core.SiteInfos.fromFrame = function(url, callback){ // Retrieve infos from an if xmlHttp.onerror = function(){ if(callback) callback(); } xmlHttp.ontimeout = function(){ if(callback) callback(); } 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'); 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.GridNodeType = { // GridNodeType back: -1, @@ -333,9 +385,8 @@ core.GridNodes.sync = function(gridNode, rootPath, callback){ // Sync GridNodes if(callback) callback(); }); } -core.GridNodes.save = function(){ // Save GridNode - browser.storage.local.set(app.settings); - browser.runtime.sendMessage({ command: 'GridNodesSaved'}); +core.GridNodes.save = function(callback){ // Save GridNodes + core.Settings.save(callback); } core.GridNodes.getNode = function(gridNode, path){ // Return GridNode from RootGridNode path if(path.length == 0 || path == '/') return gridNode; @@ -348,9 +399,8 @@ core.GridNodes.getChildNode = function(gridNode, id){ // Return child node by ID for(var child of gridNode.children) if(child.id == id) return child; return null; } -core.GridNodes.saveNode = function(gridNode){ // Save GridNode - browser.storage.local.set(app.settings); - browser.runtime.sendMessage({ command: 'GridNodeSaved', gridNode: gridNode }); +core.GridNodes.saveNode = function(gridNode, callback){ // Save GridNode + core.Settings.save(callback); } core.GridNodes.setNodeIndex = function(gridNode, index, newIndex, callback){ // Set Child GridNodeIndex. callback(gridNode, node1, node2) while(newIndex>=gridNode.children.length) @@ -366,15 +416,16 @@ core.GridNodes.setNodeIndex = function(gridNode, index, newIndex, callback){ // core.GridNodes.saveNode(gridNode); 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.create({ parentId: gridNode.id, - title: name + title: title || url, + url: url }).then(function(bookmarkItem){ if(!gridNode) return; // ??? Why this method are called a second time with gridNode = null ??? 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; for(var i=0; i 0){ if(dial.page < dial.maxpage){ dial.page += 1; - dial.populateGrid(dial.Grid, app.settings.grid, dial.Node); + dial.populateGrid(); } } else if(ev.deltaY < 0){ if(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'); - dial.Title = document.getElementById('title'); - dial.Body = document.getElementById('body'); - dial.Body.setAttribute('contextmenu', 'page'); - dial.Body.setAttribute('contextmenu', 'page'); + +utils.getPath = function(){ + var path = new URL(window.location).searchParams.get('path'); + if(path) return path + '/'; + else return '/'; +}; + + + +app.init = function(){ + dial.path = utils.getPath(); + app.Messages.getSettings(app.Settings._changed); + app.Messages.getNode(dial.path, app.GridNodes._changed); + app.Messages.init(); +}; + +app.Messages = {}; +app.Messages.init = function(){ + browser.runtime.onMessage.addListener(function(request, sender, sendResponse){ + switch(request.cmd){ + case 'SettingsChanged': + app.Messages.getSettings(app.Settings._changed); + break; + case 'GridNodesLoaded': + app.Messages.getNode(dial.path, app.GridNodes._changed); + break; + } + }); +}; +app.Messages.getSettings = function(callback){ + browser.runtime.sendMessage({ cmd: 'GetSettings' }).then(callback); +}; +app.Messages.getNode = function(path, callback){ + browser.runtime.sendMessage({ cmd: 'GetNode', path: path }).then(callback); +}; +app.Messages.setNodeIndex = function(index, newIndex, callback){ + browser.runtime.sendMessage({ cmd: 'SetNodeIndex', path: dial.path, index: index, newIndex: newIndex }).then(callback); +}; +app.Messages.createBookmark = function(url, callback){ + browser.runtime.sendMessage({ cmd: 'CreateBookmark', path: dial.path, url: url, title: url }).then(callback); +}; +app.Messages.createFolder = function(name, callback){ + browser.runtime.sendMessage({ cmd: 'CreateFolder', path: dial.path, name: name }).then(callback); +}; +app.Messages.deleteNode = function(id, callback){ + browser.runtime.sendMessage({ cmd: 'DeleteNode', path: dial.path, id: id }).then(callback); +}; +app.Messages.refreshNode = function(id, callback){ + browser.runtime.sendMessage({ cmd: 'RefreshNode', path: dial.path, id: id }).then(callback); +} +app.Messages.capturePage = function(id, callback){ + browser.runtime.sendMessage({ cmd: 'CapturePage', path: dial.path, id: id }).then(callback); +} + +app.Settings = {}; +app.Settings._changed = function(settings){ + app.settings = settings; 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.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); -} - -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; - 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.Title = document.createElement('title'); + document.head.appendChild(dial.Title); +}; dial.initMenus = function(){ + document.body.setAttribute('contextmenu', 'page'); dial.PageMenu = document.createElement('menu'); dial.PageMenu.type = 'context'; dial.PageMenu.id = 'page' @@ -133,7 +134,7 @@ dial.initMenus = function(){ dial.PageMenuNew.appendChild(dial.PageMenuCreateFolder); dial.PageMenu.appendChild(document.createElement('hr')); dial.PageMenu.appendChild(dial.PageMenuSettings); - dial.Body.appendChild(dial.PageMenu); + document.body.appendChild(dial.PageMenu); dial.ItemMenu = document.createElement('menu'); dial.ItemMenu.type = 'context'; @@ -155,11 +156,15 @@ dial.initMenus = function(){ */ dial.ItemMenuRefresh = document.createElement('menuitem'); 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.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.label = browser.i18n.getMessage("menuDeleteItem"); @@ -179,31 +184,59 @@ dial.initMenus = function(){ dial.ItemMenu.appendChild(dial.ItemMenuDelete); dial.ItemMenu.appendChild(document.createElement('hr')); dial.ItemMenu.appendChild(dial.ItemMenuSettings); - dial.Body.appendChild(dial.ItemMenu); + document.body.appendChild(dial.ItemMenu); } - -dial.initGrid = function(name, settings, container){ +dial.initStyles = function(){ + 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'); - grid.className = name; - grid.getLink = function(index){ - var num_columns = grid.rows[0].cells.length; - return grid.rows[Math.floor(index/num_columns)].cells[index % num_columns].childNodes[0]; + dial.Grid.className = 'Grid'; + dial.Grid.getLink = function(index){ + var num_columns = dial.Grid.rows[0].cells.length; + return dial.Grid.rows[Math.floor(index/num_columns)].cells[index % num_columns].childNodes[0]; } - for(var i=0; i dial.maxpage) dial.page = dial.maxpage; if(dial.page > 1) iBase = (dial.page -1) * maxCells; - for(var i = iBase; i