diff --git a/TODO b/TODO index 00adff5..01b92a0 100644 --- a/TODO +++ b/TODO @@ -1,4 +1,7 @@ -Config Page +Add node settings popup +Add custom image (thumbnails) +Create style for popup +Preserve ratio on capture in a new tab +Need a best solution to update folder and bookmark when it are updated from Firefox Improve screenshot result -Add favicon support -Need a solution to update folder and bookmark when it are updated from Firefox \ No newline at end of file +Add favicon support \ No newline at end of file diff --git a/src/html/settings.html b/src/html/settings.html index 0055d8e..2ae5b62 100644 --- a/src/html/settings.html +++ b/src/html/settings.html @@ -61,6 +61,26 @@ Margins : + + Back Button : + + + + + + + +
+
Back :
+ + +
+ 		+
Folder :
+ + +
+
diff --git a/src/js/background.js b/src/js/background.js index dd7cf5b..3b62b17 100644 --- a/src/js/background.js +++ b/src/js/background.js @@ -13,17 +13,24 @@ core.init = function(){ // Init module 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, @@ -34,15 +41,28 @@ core.Settings.load = function(callback){ // Load settings titleFont: 'Arial, Verdana, Sans-serif', titleColor: '#ffffff', titleColorHover: '#33ccff', - backPanel: true, - backIcon: 'img/back.png', - folderIcon: 'img/folder.png', - loadingIcon: 'img/throbber.gif' + titleBackgroundColor: null, + titleBackgroundColorHover: null }, root: 'Quick Dial', node: {} } }).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; + } app.settings = obj; if(callback) callback(); }); diff --git a/src/js/dial.js b/src/js/dial.js index 9adf0f8..c8f939f 100644 --- a/src/js/dial.js +++ b/src/js/dial.js @@ -98,11 +98,16 @@ dial.initStyles = function(){ //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: 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.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; } @@ -197,7 +202,7 @@ dial.initGrid = function(name, settings, container){ function dragstart_handler(ev) { 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(settings.backNode && dial.path) index -= dial.page; console.log(index); ev.dataTransfer.setData("text/plain", index); } @@ -215,7 +220,7 @@ dial.initGrid = function(name, settings, container){ } else{ 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(settings.backNode && dial.path) EndIndex -= dial.page; app.setNodeIndex(dial.Node, StartIndex, EndIndex); } link.draggable = true; @@ -302,7 +307,7 @@ dial.populateGrid = function(grid, settings, node){ var linkItem = 0; var allCells = settings.rows * settings.columns; var maxCells = allCells; - if(settings.cells.backPanel && dial.path){ + if(settings.backNode && dial.path){ populateBack(grid.getLink(linkItem)); linkItem++; maxCells -= 1; diff --git a/src/js/settings.js b/src/js/settings.js index 9b120ec..f39ed89 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -1,4 +1,6 @@ var BackgroundImage = null; +var GridBackImage = null; +var GridFolderImage = null; window.onload = function(){ browser.runtime.getBackgroundPage().then(function(page){ @@ -12,8 +14,21 @@ window.onload = function(){ GridRows.value = app.settings.grid.rows; GridMargins.value = app.settings.grid.margin; 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; 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; GridCellsBorderRadiusHover.value = app.settings.grid.cells.borderRadiusHover; GridCellsBorderColor.value = app.settings.grid.cells.borderColor; @@ -23,6 +38,10 @@ window.onload = function(){ GridCellsTitleFontSize.value = app.settings.grid.cells.titleFontSize; GridCellsTitleColor.value = app.settings.grid.cells.titleColor; 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(){ @@ -35,9 +54,16 @@ window.onload = function(){ app.settings.grid.rows = +(GridRows.value); app.settings.grid.margin = +(GridMargins.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.marginHover = +(GridCellsMarginsHover.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.borderRadiusHover = +(GridCellsBorderRadiusHover.value); app.settings.grid.cells.borderColor = GridCellsBorderColor.value; @@ -47,6 +73,10 @@ window.onload = function(){ app.settings.grid.cells.titleFontSize = GridCellsTitleFontSize.value; app.settings.grid.cells.titleColor = GridCellsTitleColor.value; app.settings.grid.cells.titleColorHover = GridCellsTitleColorHover.value; + 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; app.saveSettings(); } BtnCancel.onclick = function(){ @@ -89,4 +119,38 @@ window.onload = function(){ 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]); + } + } \ No newline at end of file diff --git a/src/manifest.json b/src/manifest.json index 2cc89c6..15c809a 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -2,7 +2,7 @@ "manifest_version": 2, "name": "Quick Dial", - "version": "0.0.2", + "version": "0.0.3", "author": "MatMoul", "homepage_url": "https://github.com/MatMoul/quickdial-webext", "developer": {