From 92b328cee0ba43c88c50a745e20e119f54f2ca31 Mon Sep 17 00:00:00 2001
From: MatMoul <matmoul@gmail.com>
Date: Fri, 6 Oct 2017 21:07:49 +0200
Subject: [PATCH] Add folder and back icon settings

---
 TODO                   |  1 -
 src/html/settings.html | 16 +++++++++++++++
 src/js/background.js   | 11 +++++++---
 src/js/dial.js         |  4 ++--
 src/js/settings.js     | 46 ++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 72 insertions(+), 6 deletions(-)

diff --git a/TODO b/TODO
index 256528e..4aa31db 100644
--- a/TODO
+++ b/TODO
@@ -1,4 +1,3 @@
-Add custom icon settings (back and folder)
 Add custom image (thumbnails)
 Add custom background color settings (node)
 Create style for popup
diff --git a/src/html/settings.html b/src/html/settings.html
index 0055d8e..d325308 100644
--- a/src/html/settings.html
+++ b/src/html/settings.html
@@ -62,6 +62,22 @@
 							<td><input id="GridMargins" type="number"></td>
 						</tr>
 					</table>
+					<table>
+						<tr>
+							<td>
+								<div>Back :</div>
+								<button id="GridBackImageReset">Reset</button>
+								<input id="GridBackImageFile" type="file" style="width:220px;">
+								<div id="GridBackPreview" style="width: 220px; height: 150px; border: 1px solid #000000"></div>
+							</td>
+							<td>
+								<div>Folder :</div>
+								<button id="GridFolderImageReset">Reset</button>
+								<input id="GridFolderImageFile" type="file" style="width:220px;">
+								<div id="GridFolderPreview" style="width: 220px; height: 150px; border: 1px solid #000000"></div>
+							</td>
+						</tr>
+					</table>
 				</div>
 				<div class="hidden">
 					<table>
diff --git a/src/js/background.js b/src/js/background.js
index 64db6a8..915908c 100644
--- a/src/js/background.js
+++ b/src/js/background.js
@@ -35,14 +35,19 @@ core.Settings.load = function(callback){ // Load settings
 				titleColor: '#ffffff',
 				titleColorHover: '#33ccff',
 				backPanel: true,
-				backIcon: 'img/back.png',
-				folderIcon: 'img/folder.png',
-				loadingIcon: 'img/throbber.gif'
+				backIcon: '/img/back.png',
+				folderIcon: '/img/folder.png',
+				loadingIcon: '/img/throbber.gif'
 			},
 			root: 'Quick Dial',
 			node: {}
 		}
 	}).then(function(obj){
+		if(obj.grid.cells.backIcon == 'img/back.png'){
+			obj.grid.cells.backIcon = 'url(/img/back.png)';
+			obj.grid.cells.folderIcon = 'url(/img/folder.png)';
+			obj.grid.cells.loadingIcon = 'url(/img/throbber.gif)';
+		}
 		app.settings = obj;
 		if(callback) callback();
 	});
diff --git a/src/js/dial.js b/src/js/dial.js
index 9adf0f8..67a0cec 100644
--- a/src/js/dial.js
+++ b/src/js/dial.js
@@ -101,8 +101,8 @@ dial.initStyles = function(){
 	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;
 	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;
 	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.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: ' + app.settings.grid.cells.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;
 }
diff --git a/src/js/settings.js b/src/js/settings.js
index 9b120ec..daf9939 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,6 +14,14 @@ window.onload = function(){
 		GridRows.value = app.settings.grid.rows;
 		GridMargins.value = app.settings.grid.margin;
 		GridColumns.value = app.settings.grid.columns;
+		GridBackImage = app.settings.grid.cells.backIcon;
+		GridBackPreview.style.backgroundImage = app.settings.grid.cells.backIcon;
+		GridBackPreview.style.backgroundRepeat = 'no-repeat';
+		GridBackPreview.style.backgroundPosition = '50% 50%';
+		GridFolderImage = app.settings.grid.cells.folderIcon;
+		GridFolderPreview.style.backgroundImage = app.settings.grid.cells.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;
 		GridCellsBorderRadius.value = app.settings.grid.cells.borderRadius;
@@ -35,6 +45,8 @@ window.onload = function(){
 		app.settings.grid.rows = +(GridRows.value);
 		app.settings.grid.margin = +(GridMargins.value);
 		app.settings.grid.columns = +(GridColumns.value);
+		app.settings.grid.cells.backIcon = GridBackImage;
+		app.settings.grid.cells.folderIcon = GridFolderImage;
 		app.settings.grid.cells.margin = +(GridCellsMargins.value);
 		//app.settings.grid.cells.marginHover = +(GridCellsMarginsHover.value);
 		app.settings.grid.cells.marginHover = +(GridCellsMargins.value);
@@ -89,4 +101,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