1
0
mirror of https://github.com/MatMoul/quickdial-webext.git synced 2024-12-23 23:46:11 +00:00

Feature: Add settings to set custom image on nodes

This commit is contained in:
MatMoul 2017-10-14 23:11:33 +02:00
parent 0f956667a0
commit 73152dedd0
3 changed files with 46 additions and 9 deletions

View File

@ -43,10 +43,10 @@
<tr> <tr>
<td><span>Image :</span></td> <td><span>Image :</span></td>
<td> <td>
<button class="hidden" id="ImageReset">Reset</button> <button id="ImageReset">Reset</button>
<button class="hidden" id="ImageRefresh">Refresh</button> <button class="hidden" id="ImageRefresh">Refresh</button>
<button class="hidden" id="ImageCapture">Capture</button> <button class="hidden" id="ImageCapture">Capture</button>
<input class="hidden" id="ImageFile" type="file" style="width:180px;"> <input id="ImageFile" type="file" style="width:180px;">
</td> </td>
</tr> </tr>
<tr> <tr>

View File

@ -452,7 +452,7 @@ app.GridNodes.updateNode = function(gridNode, value, callback){
gridNode.url = value.url; gridNode.url = value.url;
delete gridNode.image; delete gridNode.image;
} }
//gridNode.image = infos.screenshot; if(value.image) gridNode.image = value.image;
app.GridNodes.saveNode(gridNode); app.GridNodes.saveNode(gridNode);
} }
if(callback) callback(gridNode); if(callback) callback(gridNode);

View File

@ -1,5 +1,7 @@
var app = {}; var app = {};
var Image = null;
document.addEventListener("DOMContentLoaded", function(event) { document.addEventListener("DOMContentLoaded", function(event) {
app.init(); app.init();
}); });
@ -15,15 +17,50 @@ app.init = function(){
switch(node.type){ switch(node.type){
case app.GridNodes.GridNodeType.folder: case app.GridNodes.GridNodeType.folder:
Url.parentNode.parentNode.style.display = 'none'; Url.parentNode.parentNode.style.display = 'none';
if(node.image) ImagePreview.style.backgroundImage = 'url(' + node.image + ')'; if(node.image) Image = node.image;
else ImagePreview.style.backgroundImage = app.settings.grid.folderIcon; else Image = app.settings.grid.folderIcon;
ImagePreview.style.backgroundImage = Image;
break; break;
case app.GridNodes.GridNodeType.bookmark: case app.GridNodes.GridNodeType.bookmark:
ImageReset.style.display = 'none';
Url.value = node.url; Url.value = node.url;
ImagePreview.style.backgroundImage = 'url(' + node.image + ')'; Image = 'url(' + node.image + ')';
ImagePreview.style.backgroundImage = Image;
break; break;
} }
ImageReset.onclick = function(){
switch(node.type){
case app.GridNodes.GridNodeType.folder:
if(node.image){
Image = node.image;
ImagePreview.style.backgroundImage = 'url(' + Image + ')';
} else {
Image = null;
ImagePreview.style.backgroundImage = app.settings.grid.folderIcon;
}
break;
case app.GridNodes.GridNodeType.bookmark:
Image = node.image;
ImagePreview.style.backgroundImage = 'url(' + Image + ')';
break;
}
};
ImageFile.onclick = function(){
this.value = null;
}
ImageFile.onchange = function(){
var fileReader = new FileReader();
fileReader.onload = function(e){
Image = e.target.result;
ImageFile.value = null;
ImagePreview.style.backgroundImage = 'url(' + Image + ')';
}
fileReader.readAsDataURL(ImageFile.files[0]);
}
}); });
}); });
@ -35,10 +72,10 @@ app.init = function(){
BtnApply.onclick = function(){ BtnApply.onclick = function(){
switch(app.node.type){ switch(app.node.type){
case app.GridNodes.GridNodeType.folder: case app.GridNodes.GridNodeType.folder:
app.Messages.updateNode(app.node.id, { title: Title.value }) app.Messages.updateNode(app.node.id, { title: Title.value, image: Image })
break; break;
case app.GridNodes.GridNodeType.bookmark: case app.GridNodes.GridNodeType.bookmark:
app.Messages.updateNode(app.node.id, { title: Title.value, url: Url.value }) app.Messages.updateNode(app.node.id, { title: Title.value, url: Url.value, image: Image })
break; break;
} }
} }