Version 0.1.10

TODO

@@ -1,5 +0,0 @@
-Create style for popup
-Add a visual hint for multipage
-Need a best solution to update folder and bookmark when it are updated from Firefox
-Improve screenshot result
-Add favicon support

src/html/settings.html

@@ -69,6 +69,13 @@
 								<input id="GridColumns" type="number" min="1">
 							</td>
 						</tr>
+						<tr>
+							<td><span>Ratio (X/Y) :</span></td>
+							<td>
+								<input id="GridRatioX" type="number" min="1">
+								<input id="GridRatioY" type="number" min="1">
+							</td>
+						</tr>
 						<tr>
 							<td><span>Margins :</span></td>
 							<td><input id="GridMargins" type="number" min="0"></td>
@@ -194,6 +201,10 @@
 							<td><input id="GridCellsTitleBackgroundColor" type="color"></td>
 							<td><input id="GridCellsTitleBackgroundColorHover" type="color"></td>
 						</tr>
+						<tr>
+							<td><span>Snapshot Delay :</span></td>
+							<td colspan="2"><input id="GridCellsSnapshotDelay" type="number" min="300" max="10000"></td>
+						</tr>
 					</table>
 				</div>
 			</div>

src/js/background.js

@@ -111,6 +111,8 @@ app.Settings.init = function(callback){ // Load settings and nodes
 						margin: 10,
 						rows: 4,
 						columns: 5,
+						ratioX: 4,
+						ratioY: 3,
 						backNode: true,
 						backIcon: 'url(/img/back.png)',
 						backIconMode: 3,
@@ -144,7 +146,8 @@ app.Settings.init = function(callback){ // Load settings and nodes
 							titleBorderSize: 1,
 							titleBorderSizeHover: 1,
 							previewWidth: 1200,
-							previewHeight: 710
+							previewHeight: 710,
+							snapshotDelay: 2000
 						},
 						root: 'Quick Dial',
 					}
@@ -197,6 +200,19 @@ app.Settings.init = function(callback){ // Load settings and nodes
 			data.settings.grid.cells.titleBorderSizeHover = data.settings.grid.cells.titleBorderSize;
 			app.Settings.save();
 		}
+		if(data.version == 4){ // Upgrade Data Version
+			if(!data.settings.grid.cells.snapshotDelay) data.settings.grid.cells.snapshotDelay = 2000;
+			if(data.settings.grid.ratioAuto == true || data.settings.grid.ratioAuto == false){
+				delete data.settings.grid.ratioAuto;
+				data.settings.grid.ratioX = 4;
+				data.settings.grid.ratioY = 3;
+			}
+			if(!data.settings.grid.ratioX){
+				data.settings.grid.ratioX = 4;
+				data.settings.grid.ratioY = 3;
+			}
+			//app.Settings.save();
+		}
 		app.settings = data.settings;
 		app.node = data.node;
 		if(callback) callback();
@@ -296,7 +312,8 @@ app.SiteInfos.fromNewTab = function(url, callback){  // Retrieve infos from a ne
 								imgObj.src = img;
 
 								var previewWidth = 1200; // Need to be linked to settings
-								var previewHeight = 710; // Need to be linked to settings
+								var previewHeight = previewWidth / app.settings.grid.ratioX * app.settings.grid.ratioY;
+								if(app.settings.grid.title == true) previewHeight -= app.settings.grid.titleHeight;
 
 								var canvas = document.createElement('canvas');
 								canvas.style.width = previewWidth.toString() + 'px';
@@ -325,7 +342,7 @@ app.SiteInfos.fromNewTab = function(url, callback){  // Retrieve infos from a ne
 								browser.tabs.remove(tab.id);
 								if(callback) callback();
 							});
-						}, 500);
+						}, app.settings.grid.cells.snapshotDelay);
 					}, function(){ if(callback) callback(); });
 				}
 			}, function(){ if(callback) callback(); });
@@ -362,7 +379,8 @@ app.SiteInfos.fromFrame = function(url, callback){ // Retrieve infos from an ifr
 	}
 
 	var previewWidth = 1200; // Need to be linked to settings
-	var previewHeight = 710; // Need to be linked to settings
+	var previewHeight = previewWidth / app.settings.grid.ratioX * app.settings.grid.ratioY;
+	if(app.settings.grid.title == true) previewHeight -= app.settings.grid.titleHeight;
 	var iframe;
 	var xmlHttp = new XMLHttpRequest();
 	xmlHttp.timeout = 10000
@@ -372,7 +390,7 @@ app.SiteInfos.fromFrame = function(url, callback){ // Retrieve infos from an ifr
 		iframe.width = previewWidth
 		iframe.height = previewHeight
 		iframe.style.position = 'absolute';
-		//iframe.style.visibility = 'hidden';
+		iframe.scrolling = 'no';
 		var content = xmlHttp.responseText.replace('<head>', '<head><base href="' + url + '">');
 		iframe.onload = function(){ pageLoaded(); }
 		document.body.appendChild(iframe);
@@ -524,24 +542,25 @@ app.GridNodes.updateNode = function(gridNode, value, callback){
 			gridNode.url = value.url;
 			app.GridNodes.refreshNode(gridNode, function(){
 				browser.runtime.sendMessage({ cmd: app.Messages.Commands.gridNodesLoaded });
+				app.GridNodes.saveNode(gridNode);
 				var data = { title: gridNode.title };
-				if(gridNode.imageMode) data.imageMode = gridNode.imageMode;
-				if(gridNode.type == app.GridNodes.GridNodeType.bookmark) data.url = gridNode.url;
+				//if(gridNode.imageMode) data.imageMode = gridNode.imageMode;
+				//if(gridNode.type == app.GridNodes.GridNodeType.bookmark) data.url = gridNode.url;
+				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 });
+			app.GridNodes.saveNode(gridNode);
 			var data = { title: gridNode.title };
-			if(gridNode.imageMode) data.imageMode = gridNode.imageMode;
+			//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);
 		}
 	}
 	if(callback) callback(gridNode);

src/js/dial.js

@@ -288,10 +288,13 @@ dial.initStyles = function(){
 	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;
+	else dial.styles.grid.linkPanelHover.backgroundColor = 'transparent';
 	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: ' + app.settings.grid.cells.titleBorderSize + 'px solid ' + app.settings.grid.cells.borderColor + '; }')].style;
 	if(app.settings.grid.cells.titleBackgroundColor) dial.styles.grid.linkTitle.backgroundColor = app.settings.grid.cells.titleBackgroundColor;
+	else dial.styles.grid.linkTitle.backgroundColor = 'transparent';
 	dial.styles.grid.linkTitleHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a:hover>div:last-child { font-size: ' + app.settings.grid.cells.titleFontSizeHover + 'pt; color: ' + app.settings.grid.cells.titleColorHover + '; border-top-width: ' + app.settings.grid.cells.titleBorderSizeHover + 'px; 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;
+	else dial.styles.grid.linkTitleHover.backgroundColor = 'transparent';
 	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: ' + app.settings.grid.backIcon + '; }')].style;
 	applyImageMode(app.settings.grid.backIconMode, dial.styles.grid.linkBack);
@@ -412,8 +415,8 @@ dial.updateGridLayout = function(){
 		var cellHeight = fullHeight / app.settings.grid.rows;
 		var linkWidth = 0;
 		var linkHeight = 0;
-		if(cellWidth <= cellHeight * 4 / 3) cellHeight = cellWidth / 4 * 3;
-		else cellWidth = cellHeight / 3 * 4;
+		if(cellWidth <= cellHeight * app.settings.grid.ratioX / app.settings.grid.ratioY) cellHeight = cellWidth / app.settings.grid.ratioX * app.settings.grid.ratioY;
+		else cellWidth = cellHeight / app.settings.grid.ratioY * app.settings.grid.ratioX;
 		linkWidth = cellWidth - 2 * (cellsMargin + 1) - 2 * borderSize;
 		linkHeight = cellHeight - 2 * (cellsMargin + 1) - 2 * borderSize - titleBorderSize;
 		return {

src/js/settings.js

@@ -28,6 +28,8 @@ app.init = function(){
 		BackgroundPreview.style.backgroundSize = '100% 100%';
 		GridRoot.value = app.settings.grid.root;
 		GridRows.value = app.settings.grid.rows;
+		GridRatioX.value = app.settings.grid.ratioX;
+		GridRatioY.value = app.settings.grid.ratioY;
 		GridMargins.value = app.settings.grid.margin;
 		GridColumns.value = app.settings.grid.columns;
 		GridBackNode.checked = app.settings.grid.backNode;
@@ -69,6 +71,7 @@ app.init = function(){
 		GridCellsTitleBackgroundColor.value = app.settings.grid.cells.titleBackgroundColor;
 		GridCellsTitleBackgroundColorHover.value = app.settings.grid.cells.titleBackgroundColorHover;
 		GridCellsTitleBackgroundTransparentHover.checked = (app.settings.grid.cells.titleBackgroundColorHover == null);
+		GridCellsSnapshotDelay.value = app.settings.grid.cells.snapshotDelay;
 	});
 
 	BtnOk.onclick = function(){
@@ -82,6 +85,8 @@ app.init = function(){
 		app.settings.grid.rows = +(GridRows.value);
 		app.settings.grid.margin = +(GridMargins.value);
 		app.settings.grid.columns = +(GridColumns.value);
+		app.settings.grid.ratioX = GridRatioX.value;
+		app.settings.grid.ratioY = GridRatioY.value;
 		app.settings.grid.backNode = GridBackNode.checked;
 		app.settings.grid.backIconMode = +(GridBackMode.value);
 		app.settings.grid.backIcon = GridBackImage;
@@ -115,6 +120,7 @@ app.init = function(){
 		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.settings.grid.cells.snapshotDelay = GridCellsSnapshotDelay.value;
 		app.settings.grid.root = GridRoot.value;
 		browser.runtime.sendMessage( { cmd: app.Messages.Commands.setSettings, settings: app.settings } );
 	}
@@ -158,6 +164,19 @@ app.init = function(){
 		fileReader.readAsDataURL(BackgroundImageFile.files[0]);
 	}
 
+	GridRows.onchange = function(){
+		if(GridRatioAuto.checked){
+			GridRatioX.value = GridColumns.value;
+			GridRatioY.value = GridRows.value;
+		}
+	}
+	GridColumns.onchange = function(){
+		if(GridRatioAuto.checked){
+			GridRatioX.value = GridColumns.value;
+			GridRatioY.value = GridRows.value;
+		}
+	}
+
 	GridBackImageReset.onclick = function(){
 		GridBackImage = 'url(/img/back.png)';
 		GridBackPreview.style.backgroundImage = GridBackImage;

src/manifest.json

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