Feature: Add stretch mode to each tiles

src/html/properties.html

@@ -44,6 +44,13 @@
 						<tr>
 							<td><span>Image :</span></td>
 							<td colspan="2">
+								<select id="ImageMode">
+									<option value="-1">Default</option>
+									<option value="0">Stretch</option>
+									<option value="1">Cover</option>
+									<option value="2">Contain</option>
+									<option value="3">Center</option>
+								</select>
 								<button id="ImageReset">Reset</button>
 								<button id="ImageDefault">Default</button>
 								<button class="hidden" id="ImageRefresh">Refresh</button>

src/js/background.js

@@ -502,18 +502,34 @@ app.GridNodes.updateNode = function(gridNode, value, callback){
 		if(value.titleLocked!=null) gridNode.titleLocked = value.titleLocked;
 		if(value.image) gridNode.image = value.image;
 		else delete gridNode.image;
-		if(gridNode.type == app.GridNodes.GridNodeType.bookmark) gridNode.url = value.url;
+		if(value.imageMode || value.imageMode == 0) {
+			if(value.imageMode == -1) delete gridNode.imageMode;
+			else gridNode.imageMode = value.imageMode;
+		}
+		if(gridNode.type == app.GridNodes.GridNodeType.bookmark && value.url && gridNode.url != value.url){
+			gridNode.url = value.url;
 			app.GridNodes.refreshNode(gridNode, function(){
 				browser.runtime.sendMessage({ cmd: app.Messages.Commands.gridNodesLoaded });
 				var data = { title: gridNode.title };
+				if(gridNode.imageMode) data.imageMode = gridNode.imageMode;
 				if(gridNode.type == app.GridNodes.GridNodeType.bookmark) 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 });
+			var data = { title: gridNode.title };
+			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);
 }
 app.GridNodes.getChildNode = function(gridNode, id){ // Return child node by ID

src/js/dial.js

@@ -417,6 +417,35 @@ dial.updateGridLayout = function(){
 	else dial.styles.grid.linkPanelHover.height = values.linkHeight.toString() + 'px';
 };
 dial.populateGrid = function(){
+	function applyImageMode(imageMode, target){
+		switch(imageMode){
+			case -1:
+				target.backgroundRepeat = '';
+				target.backgroundSize = '';
+				target.backgroundPosition = '';
+				break;
+			case 0:
+				target.backgroundRepeat = 'no-repeat';
+				target.backgroundSize = '100% 100%';
+				target.backgroundPosition = '';
+				break;
+			case 1:
+				target.backgroundRepeat = 'no-repeat';
+				target.backgroundSize = 'cover';
+				target.backgroundPosition = 'center';
+				break;
+			case 2:
+				target.backgroundRepeat = 'no-repeat';
+				target.backgroundSize = 'contain';
+				target.backgroundPosition = 'center';
+				break;
+			case 3:
+				target.backgroundRepeat = 'no-repeat';
+				target.backgroundSize = 'auto auto';
+				target.backgroundPosition = 'center';
+				break;
+		}
+	}
 	populateEmpty = function(link){
 		link.Node = null;
 		link.className = 'Empty';
@@ -437,6 +466,8 @@ dial.populateGrid = function(){
 	populateFolder = function(link, node){
 		link.Node = node;
 		link.className = 'Folder';
+		if(node.imageMode || node.imageMode == 0) applyImageMode(node.imageMode, link.childNodes[0].style);
+		else applyImageMode(-1, link.childNodes[0].style);
 		if(node.image){
 			if(node.image.indexOf('url(')>=0) link.childNodes[0].style.backgroundImage = node.image;
 			else link.childNodes[0].style.backgroundImage = 'url(' + node.image + ')';
@@ -449,6 +480,8 @@ dial.populateGrid = function(){
 	}
 	populateBookmark = function(link, node){
 		link.Node = node;
+		if(node.imageMode || node.imageMode == 0) applyImageMode(node.imageMode, link.childNodes[0].style);
+		else applyImageMode(-1, link.childNodes[0].style);
 		if(node.image){
 			link.className = 'Bookmark';
 			if(node.image.indexOf('url(')>=0) link.childNodes[0].style.backgroundImage = node.image;

src/js/properties.js

@@ -19,6 +19,8 @@ app.init = function(){
 		app.Messages.getNodeByID(new URL(window.location).searchParams.get('id'), function(node){
 			app.node = node;
 			Title.value = node.title;
+			if(node.imageMode == 0) ImageMode.value = 0;
+			else if(node.imageMode) ImageMode.value = node.imageMode;
 			ImagePreview.style.backgroundRepeat = 'no-repeat';
 			ImagePreview.style.backgroundSize = '100% 100%';
 			switch(node.type){
@@ -97,10 +99,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, image: Image })
+				app.Messages.updateNode(app.node.id, { title: Title.value, image: Image, imageMode: +(ImageMode.value) })
 				break;
 			case app.GridNodes.GridNodeType.bookmark:
-				app.Messages.updateNode(app.node.id, { title: Title.value, titleLocked: TitleLocked.checked, url: Url.value, image: Image })
+				app.Messages.updateNode(app.node.id, { title: Title.value, titleLocked: TitleLocked.checked, url: Url.value, image: Image, imageMode: +(ImageMode.value) })
 				break;
 		}
 	}