diff --git a/src/html/properties.html b/src/html/properties.html index 26cd695..2e2ad6f 100644 --- a/src/html/properties.html +++ b/src/html/properties.html @@ -44,6 +44,13 @@ Image : + diff --git a/src/js/background.js b/src/js/background.js index 0c04bd5..55048ff 100644 --- a/src/js/background.js +++ b/src/js/background.js @@ -502,17 +502,33 @@ app.GridNodes.updateNode = function(gridNode, value, callback){ if(value.titleLocked!=null) gridNode.titleLocked = value.titleLocked; if(value.image) gridNode.image = value.image; else delete gridNode.image; - if(gridNode.type == app.GridNodes.GridNodeType.bookmark) gridNode.url = value.url; - app.GridNodes.refreshNode(gridNode, function(){ + if(value.imageMode || value.imageMode == 0) { + if(value.imageMode == -1) delete gridNode.imageMode; + else gridNode.imageMode = value.imageMode; + } + if(gridNode.type == app.GridNodes.GridNodeType.bookmark && value.url && gridNode.url != value.url){ + gridNode.url = value.url; + app.GridNodes.refreshNode(gridNode, function(){ + browser.runtime.sendMessage({ cmd: app.Messages.Commands.gridNodesLoaded }); + var data = { title: gridNode.title }; + if(gridNode.imageMode) data.imageMode = gridNode.imageMode; + if(gridNode.type == app.GridNodes.GridNodeType.bookmark) data.url = gridNode.url; + browser.bookmarks.onChanged.removeListener(app.Bookmarks._onChanged); + browser.bookmarks.update(gridNode.id, data).then(function(){ + browser.bookmarks.onChanged.addListener(app.Bookmarks._onChanged); + }); + app.GridNodes.saveNode(gridNode); + }); + } else { browser.runtime.sendMessage({ cmd: app.Messages.Commands.gridNodesLoaded }); var data = { title: gridNode.title }; - if(gridNode.type == app.GridNodes.GridNodeType.bookmark) data.url = gridNode.url; + if(gridNode.imageMode) data.imageMode = gridNode.imageMode; browser.bookmarks.onChanged.removeListener(app.Bookmarks._onChanged); browser.bookmarks.update(gridNode.id, data).then(function(){ browser.bookmarks.onChanged.addListener(app.Bookmarks._onChanged); }); - }); - app.GridNodes.saveNode(gridNode); + app.GridNodes.saveNode(gridNode); + } } if(callback) callback(gridNode); } diff --git a/src/js/dial.js b/src/js/dial.js index dda69d7..6d20daf 100644 --- a/src/js/dial.js +++ b/src/js/dial.js @@ -417,6 +417,35 @@ dial.updateGridLayout = function(){ else dial.styles.grid.linkPanelHover.height = values.linkHeight.toString() + 'px'; }; dial.populateGrid = function(){ + function applyImageMode(imageMode, target){ + switch(imageMode){ + case -1: + target.backgroundRepeat = ''; + target.backgroundSize = ''; + target.backgroundPosition = ''; + break; + case 0: + target.backgroundRepeat = 'no-repeat'; + target.backgroundSize = '100% 100%'; + target.backgroundPosition = ''; + break; + case 1: + target.backgroundRepeat = 'no-repeat'; + target.backgroundSize = 'cover'; + target.backgroundPosition = 'center'; + break; + case 2: + target.backgroundRepeat = 'no-repeat'; + target.backgroundSize = 'contain'; + target.backgroundPosition = 'center'; + break; + case 3: + target.backgroundRepeat = 'no-repeat'; + target.backgroundSize = 'auto auto'; + target.backgroundPosition = 'center'; + break; + } + } populateEmpty = function(link){ link.Node = null; link.className = 'Empty'; @@ -437,6 +466,8 @@ dial.populateGrid = function(){ populateFolder = function(link, node){ link.Node = node; link.className = 'Folder'; + if(node.imageMode || node.imageMode == 0) applyImageMode(node.imageMode, link.childNodes[0].style); + else applyImageMode(-1, link.childNodes[0].style); if(node.image){ if(node.image.indexOf('url(')>=0) link.childNodes[0].style.backgroundImage = node.image; else link.childNodes[0].style.backgroundImage = 'url(' + node.image + ')'; @@ -449,6 +480,8 @@ dial.populateGrid = function(){ } populateBookmark = function(link, node){ link.Node = node; + if(node.imageMode || node.imageMode == 0) applyImageMode(node.imageMode, link.childNodes[0].style); + else applyImageMode(-1, link.childNodes[0].style); if(node.image){ link.className = 'Bookmark'; if(node.image.indexOf('url(')>=0) link.childNodes[0].style.backgroundImage = node.image; diff --git a/src/js/properties.js b/src/js/properties.js index d205788..cfcd6bc 100644 --- a/src/js/properties.js +++ b/src/js/properties.js @@ -19,6 +19,8 @@ app.init = function(){ app.Messages.getNodeByID(new URL(window.location).searchParams.get('id'), function(node){ app.node = node; Title.value = node.title; + if(node.imageMode == 0) ImageMode.value = 0; + else if(node.imageMode) ImageMode.value = node.imageMode; ImagePreview.style.backgroundRepeat = 'no-repeat'; ImagePreview.style.backgroundSize = '100% 100%'; switch(node.type){ @@ -97,10 +99,10 @@ app.init = function(){ BtnApply.onclick = function(){ switch(app.node.type){ case app.GridNodes.GridNodeType.folder: - app.Messages.updateNode(app.node.id, { title: Title.value, image: Image }) + app.Messages.updateNode(app.node.id, { title: Title.value, image: Image, imageMode: +(ImageMode.value) }) break; case app.GridNodes.GridNodeType.bookmark: - app.Messages.updateNode(app.node.id, { title: Title.value, titleLocked: TitleLocked.checked, url: Url.value, image: Image }) + app.Messages.updateNode(app.node.id, { title: Title.value, titleLocked: TitleLocked.checked, url: Url.value, image: Image, imageMode: +(ImageMode.value) }) break; } }