Feature: Add custom ratio settings

src/html/settings.html

@@ -69,6 +69,19 @@
 								<input id="GridColumns" type="number" min="1">
 							</td>
 						</tr>
+						<tr>
+							<td><span>Ratio Auto :</span></td>
+							<td>
+								<input id="GridRatioAuto" type="checkbox">
+							</td>
+						</tr>
+						<tr>
+							<td><span>Ratio (Y,X) :</span></td>
+							<td>
+								<input id="GridRatioY" type="number" min="1">
+								<input id="GridRatioX" type="number" min="1">
+							</td>
+						</tr>
 						<tr>
 							<td><span>Margins :</span></td>
 							<td><input id="GridMargins" type="number" min="0"></td>

src/js/background.js

@@ -111,6 +111,9 @@ app.Settings.init = function(callback){ // Load settings and nodes
 						margin: 10,
 						rows: 4,
 						columns: 5,
+						ratioAuto: true,
+						ratioX: 5,
+						ratioY: 4,
 						backNode: true,
 						backIcon: 'url(/img/back.png)',
 						backIconMode: 3,
@@ -200,6 +203,11 @@ app.Settings.init = function(callback){ // Load settings and nodes
 		}
 		if(data.version == 4){ // Upgrade Data Version
 			if(!data.settings.grid.cells.snapshotDelay) data.settings.grid.cells.snapshotDelay = 2000;
+			if(!data.settings.grid.ratioX){
+				data.settings.grid.ratioAuto = true;
+				data.settings.grid.ratioX = data.settings.grid.columns;
+				data.settings.grid.ratioY = data.settings.grid.rows;
+			}
 			//app.Settings.save();			
 		}
 		app.settings = data.settings;
@@ -301,7 +309,7 @@ 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 = previewWidth / app.settings.grid.columns * app.settings.grid.rows;
+								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');
@@ -368,7 +376,7 @@ app.SiteInfos.fromFrame = function(url, callback){ // Retrieve infos from an ifr
 	}
 
 	var previewWidth = 1200; // Need to be linked to settings
-	var previewHeight = previewWidth / app.settings.grid.columns * app.settings.grid.rows;
+	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();

src/js/dial.js

@@ -415,8 +415,8 @@ dial.updateGridLayout = function(){
 		var cellHeight = fullHeight / app.settings.grid.rows;
 		var linkWidth = 0;
 		var linkHeight = 0;
-		if(cellWidth <= cellHeight * app.settings.grid.columns / app.settings.grid.rows) cellHeight = cellWidth / app.settings.grid.columns * app.settings.grid.rows;
+		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.rows * app.settings.grid.columns;
+		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,9 @@ app.init = function(){
 		BackgroundPreview.style.backgroundSize = '100% 100%';
 		GridRoot.value = app.settings.grid.root;
 		GridRows.value = app.settings.grid.rows;
+		GridRatioAuto.checked = app.settings.grid.ratioAuto;
+		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;
@@ -70,6 +73,7 @@ app.init = function(){
 		GridCellsTitleBackgroundColorHover.value = app.settings.grid.cells.titleBackgroundColorHover;
 		GridCellsTitleBackgroundTransparentHover.checked = (app.settings.grid.cells.titleBackgroundColorHover == null);
 		GridCellsSnapshotDelay.value = app.settings.grid.cells.snapshotDelay;
+		GridRatioAuto.onchange();		
 	});
 
 	BtnOk.onclick = function(){
@@ -83,6 +87,9 @@ app.init = function(){
 		app.settings.grid.rows = +(GridRows.value);
 		app.settings.grid.margin = +(GridMargins.value);
 		app.settings.grid.columns = +(GridColumns.value);
+		app.settings.grid.ratioAuto = GridRatioAuto.checked;
+		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;
@@ -160,6 +167,28 @@ 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;
+		}
+	}
+
+	GridRatioAuto.onchange = function(){
+		if(GridRatioAuto.checked){
+			GridRatioX.value = GridColumns.value;
+			GridRatioY.value = GridRows.value;
+		}
+		GridRatioX.disabled = GridRatioAuto.checked;
+		GridRatioY.disabled = GridRatioAuto.checked;
+	}
+
 	GridBackImageReset.onclick = function(){
 		GridBackImage = 'url(/img/back.png)';
 		GridBackPreview.style.backgroundImage = GridBackImage;