Version 0.0.4

TODO

@@ -1,4 +1,6 @@
-Config Page
+Add node settings popup
+Add custom image (thumbnails)
+Create style for popup
+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

makerelease

@@ -0,0 +1,48 @@
+#!/bin/bash
+
+if [ "$1" == "" ]; then
+	echo "Error: No version provided"
+	echo "./makerelease 0.0.1"
+	exit 1
+fi
+
+ssh -T git@github.com
+if [ ! "$?" = "1" ]; then
+  echo "No Github ssh key loaded exiting..."
+  exit 1
+fi
+
+clear
+branch=$(git rev-parse --abbrev-ref HEAD)
+read -p "Current branch is $branch. Continue ? (y/N)" choice
+case "$choice" in 
+  n|N|'' )
+    echo "Cancel !"
+    exit 1
+  ;;
+  y|Y ) echo "Make release...";;
+  * )
+    echo "Cancel !"
+    exit 1
+  ;;
+esac
+
+
+
+# Ready to update :
+
+version=$1
+
+sed -i "/\"version\":/c\ \ \"version\": \"$version\"," src/manifest.json
+
+git commit -a -m "Version $version"
+git push
+
+git checkout master
+git merge develop
+git push
+
+git tag -a "v$version" -m "Version $version"
+git push --tags
+
+git checkout $branch

src/html/settings.html

@@ -61,6 +61,26 @@
 							<td><span>Margins :</span></td>
 							<td><input id="GridMargins" type="number"></td>
 						</tr>
+						<tr>
+							<td><span>Back Button :</span></td>
+							<td><input id="GridBackNode" type="checkbox"></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">
@@ -76,12 +96,22 @@
 							<td><input id="GridCellsMarginsHover" type="number" style="display: none;"></td>
 						</tr>
 						<tr>
-							<td><span>Border Radius:</span></td>
+							<td><span>Border Radius :</span></td>
 							<td><input id="GridCellsBorderRadius" type="number"></td>
 							<td><input id="GridCellsBorderRadiusHover" type="number"></td>
 						</tr>
 						<tr>
-							<td><span>Border Color:</span></td>
+							<td><span>Background Transparent :</span></td>
+							<td><input id="GridCellsBackgroundTransparent" type="checkbox"></td>
+							<td><input id="GridCellsBackgroundTransparentHover" type="checkbox"></td>
+						</tr>
+						<tr>
+							<td><span>Background Color :</span></td>
+							<td><input id="GridCellsBackgroundColor" type="color"></td>
+							<td><input id="GridCellsBackgroundColorHover" type="color"></td>
+						</tr>
+						<tr>
+							<td><span>Border Color :</span></td>
 							<td><input id="GridCellsBorderColor" type="color"></td>
 							<td><input id="GridCellsBorderColorHover" type="color"></td>
 						</tr>
@@ -101,10 +131,20 @@
 							<td></td>
 						</tr>
 						<tr>
-							<td><span>Title Color:</span></td>
+							<td><span>Title Text Color :</span></td>
 							<td><input id="GridCellsTitleColor" type="color"></td>
 							<td><input id="GridCellsTitleColorHover" type="color"></td>
 						</tr>
+						<tr>
+							<td><span>Title Background Transparent :</span></td>
+							<td><input id="GridCellsTitleBackgroundTransparent" type="checkbox"></td>
+							<td><input id="GridCellsTitleBackgroundTransparentHover" type="checkbox"></td>
+						</tr>
+						<tr>
+							<td><span>Title Background Color :</span></td>
+							<td><input id="GridCellsTitleBackgroundColor" type="color"></td>
+							<td><input id="GridCellsTitleBackgroundColorHover" type="color"></td>
+						</tr>
 					</table>
 				</div>
 			</div>

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: {}
+			node: { children: [] }
 		}
 	}).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();
 	});
@@ -136,7 +156,36 @@ core.SiteInfos.fromNewTab = function(url, callback){  // Retrieve infos from a n
 						setTimeout(function(){
 							browser.tabs.captureVisibleTab().then(function(img){
 								browser.tabs.remove(tab.id);
-								if(callback) callback( { url: tab.url, title: tab.title, icon: tab.favIconUrl, screenshot: img } );
+								
+								var imgObj = new Image;
+								imgObj.src = img;
+
+								var previewWidth = 1200; // Need to be linked to settings
+								var previewHeight = 710; // Need to be linked to settings
+
+								var canvas = document.createElement('canvas');
+								canvas.style.width = previewWidth.toString() + 'px';
+								canvas.style.height = previewHeight.toString() + 'px';
+								canvas.width = previewWidth / 2;
+								canvas.height = previewHeight / 2;
+
+								var ctx = canvas.getContext('2d');
+								ctx.clearRect(0, 0, previewWidth, previewHeight);
+								ctx.save();
+								ctx.scale(0.5, 0.5);
+								setTimeout(function(){
+									if(tab.height * previewWidth / previewHeight >= tab.width){
+										// Cut the bottom of the page
+										ctx.drawImage(imgObj, 0, 0, tab.width, tab.width / previewWidth * previewHeight, 0, 0, previewWidth, previewHeight);
+									} else {
+										// Stretch or cutting right part of the page ? actualy Stretch
+										ctx.drawImage(imgObj, 0, 0, tab.width, tab.height, 0, 0, previewWidth, previewHeight);
+										//ctx.drawImage(imgObj, 0, 0, tab.height / previewHeight * previewWidth, tab.height, 0, 0, previewWidth, previewHeight);
+									}
+									ctx.restore();
+									img = canvas.toDataURL();
+									if(callback) callback( { url: tab.url, title: tab.title, icon: tab.favIconUrl, screenshot: img } );
+								}, 1);
 							}, function(){
 								browser.tabs.remove(tab.id);
 								if(callback) callback();
@@ -401,36 +450,16 @@ core.GridNodes.refreshNode = function(gridNode, callback){ // Refresh content of
 	});
 }
 core.GridNodes.capturePage = function(gridNode, callback){
-	browser.tabs.create({url: gridNode.url, active: false}).then(function(tab){
-		browser.tabs.update(tab.id, {muted: true}).then(function(){}, function(){});
-		function whaitLoaded(){
-			browser.tabs.get(tab.id).then(function(tab){
-				if(tab.status == 'loading'){
-					setTimeout(whaitLoaded, 300);
-				} else{
-					browser.tabs.update(tab.id, {active: true}).then(function(){
-						setTimeout(function(){
-							browser.tabs.captureVisibleTab().then(function(img){
-								browser.tabs.remove(tab.id);
-								gridNode.title = tab.title
-								gridNode.image = img;
-								core.GridNodes.saveNode(gridNode);
-								if(callback) callback();
-							}, function(){
-								browser.tabs.remove(tab.id);
-								if(callback) callback();
-							});
-						}, 300);
-					}, function(){
-						if(callback) callback();
-					});
-				}
-			}, function(){});
-			
-		}
-		setTimeout(whaitLoaded, 1000);
-	}, function(){
-		if(callback) callback();
+	if(gridNode.__isLoading == true) return;
+	gridNode.__isLoading = true;
+	core.SiteInfos.fromNewTab(gridNode.url, function(infos){
+		if(infos){
+			gridNode.title = infos.title;
+			gridNode.image = infos.screenshot;
+			delete gridNode.__isLoading;
+			core.GridNodes.saveNode(gridNode);
+		} else delete gridNode.__isLoading;
+		if(callback) callback(infos);
 	});
 }
 

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;
 }
@@ -196,7 +201,10 @@ dial.initGrid = function(name, settings, container){
 			link.onmousedown = function(){ dial._selectedItem = this; };
 			
 			function dragstart_handler(ev) {
-				ev.dataTransfer.setData("text/plain", ev.target.parentElement.getAttribute('gridindex'));
+				var index = (dial.page - 1) * (app.settings.grid.rows * app.settings.grid.columns) + +(ev.target.parentElement.getAttribute('gridindex'));
+				if(settings.backNode && dial.path) index -= dial.page;
+				console.log(index);
+				ev.dataTransfer.setData("text/plain", index);
 			 }
 			 function dragover_handler(ev) {
 				ev.preventDefault();
@@ -208,14 +216,11 @@ dial.initGrid = function(name, settings, container){
 				var StartIndex = ev.dataTransfer.getData("text");
 				var EndIndex = 0;
 				if(ev.target.tagName == 'DIV'){
-					EndIndex = ev.target.parentElement.parentElement.getAttribute('gridindex')
+					EndIndex = (dial.page - 1) * (app.settings.grid.rows * app.settings.grid.columns) + +(ev.target.parentElement.parentElement.getAttribute('gridindex'));
 				} else{
-					EndIndex = ev.target.getAttribute('gridindex');
-				}
-				if(settings.cells.backPanel && dial.path){
-					StartIndex-=1;
-					EndIndex-=1;
+					EndIndex =(dial.page - 1) * (app.settings.grid.rows * app.settings.grid.columns) + +(ev.target.getAttribute('gridindex'));
 				}
+				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;

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]);
+	}
+	
 }

src/manifest.json

@@ -2,7 +2,7 @@
 
   "manifest_version": 2,
   "name": "Quick Dial",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "author": "MatMoul",
   "homepage_url": "https://github.com/MatMoul/quickdial-webext",
   "developer": {