From 73152dedd0e92cb942928f4f24cbcbd9c6a24e1f Mon Sep 17 00:00:00 2001
From: MatMoul <matmoul@gmail.com>
Date: Sat, 14 Oct 2017 23:11:33 +0200
Subject: [PATCH] Feature: Add settings to set custom image on nodes

---
 src/html/properties.html |  4 ++--
 src/js/background.js     |  2 +-
 src/js/properties.js     | 49 +++++++++++++++++++++++++++++++++++-----
 3 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/src/html/properties.html b/src/html/properties.html
index 5e734bb..87747b8 100644
--- a/src/html/properties.html
+++ b/src/html/properties.html
@@ -43,10 +43,10 @@
 						<tr>
 							<td><span>Image :</span></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="ImageCapture">Capture</button>
-								<input class="hidden" id="ImageFile" type="file" style="width:180px;">
+								<input id="ImageFile" type="file" style="width:180px;">
 							</td>
 						</tr>
 						<tr>
diff --git a/src/js/background.js b/src/js/background.js
index 81e01be..d19fd42 100644
--- a/src/js/background.js
+++ b/src/js/background.js
@@ -452,7 +452,7 @@ app.GridNodes.updateNode = function(gridNode, value, callback){
 			gridNode.url = value.url;
 			delete gridNode.image;
 		}
-		//gridNode.image = infos.screenshot;
+		if(value.image) gridNode.image = value.image;
 		app.GridNodes.saveNode(gridNode);
 	}
 	if(callback) callback(gridNode);
diff --git a/src/js/properties.js b/src/js/properties.js
index e499adf..339a62b 100644
--- a/src/js/properties.js
+++ b/src/js/properties.js
@@ -1,5 +1,7 @@
 var app = {};
 
+var Image = null;
+
 document.addEventListener("DOMContentLoaded", function(event) {
 	app.init();
 });
@@ -15,15 +17,50 @@ app.init = function(){
 			switch(node.type){
 				case app.GridNodes.GridNodeType.folder:
 					Url.parentNode.parentNode.style.display = 'none';
-					if(node.image) ImagePreview.style.backgroundImage = 'url(' + node.image + ')';
-					else ImagePreview.style.backgroundImage = app.settings.grid.folderIcon;
+					if(node.image) Image = node.image;
+					else Image = app.settings.grid.folderIcon;
+					ImagePreview.style.backgroundImage = Image;
 					break;
 				case app.GridNodes.GridNodeType.bookmark:
-					ImageReset.style.display = 'none';
 					Url.value = node.url;
-					ImagePreview.style.backgroundImage = 'url(' + node.image + ')';
+					Image = 'url(' + node.image + ')';
+					ImagePreview.style.backgroundImage = Image;
 					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(){
 		switch(app.node.type){
 			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;
 			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;
 		}
 	}