Feature: Add stretch mode for back and folder icon

src/html/settings.html

@@ -82,12 +82,28 @@
 						<tr>
 							<td>
 								<div>Back :</div>
+								<div>
+									<select id="GridBackMode">
+										<option value="0">Stretch</option>
+										<option value="1">Cover</option>
+										<option value="2">Contain</option>
+										<option value="3">Center</option>
+									</select>
+								</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>
+								<div>
+									<select id="GridFolderMode">
+										<option value="0">Stretch</option>
+										<option value="1">Cover</option>
+										<option value="2">Contain</option>
+										<option value="3">Center</option>
+									</select>
+								</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>

src/js/background.js

@@ -113,7 +113,9 @@ app.Settings.init = function(callback){ // Load settings and nodes
 						columns: 5,
 						backNode: true,
 						backIcon: 'url(/img/back.png)',
+						backIconMode: 3,
 						folderIcon: 'url(/img/folder.png)',
+						folderIconMode: 2,
 						loadingIcon: 'url(/img/throbber.gif)',
 						cells: {
 							margin: 4,
@@ -180,6 +182,8 @@ app.Settings.init = function(callback){ // Load settings and nodes
 			});
 		}
 		if(!data.settings.backgroundMode) data.settings.backgroundMode = 0;
+		if(!data.settings.grid.backIconMode) data.settings.grid.backIconMode = 3;
+		if(!data.settings.grid.folderIconMode) data.settings.grid.folderIconMode = 2;
 		if(!data.settings.grid.cells.opacity) data.settings.grid.cells.opacity = 1;
 		if(!data.settings.grid.cells.opacityHover) data.settings.grid.cells.opacityHover = 1;
 		if(!data.settings.grid.cells.borderSize) data.settings.grid.cells.borderSize = 1;

src/js/dial.js

@@ -248,32 +248,36 @@ dial.initMenus = function(){
 	document.body.appendChild(dial.ItemMenu);
 }
 dial.initStyles = function(){
+	function applyImageMode(imageMode, target){
+		switch(imageMode){
+			case 0:
+				target.backgroundRepeat = 'no-repeat';
+				target.backgroundSize = '100% 100%';
+				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.backgroundPosition = 'center';
+				break;
+		}
+	}
+
 	var oldStyle = dial.Style;
 	dial.Style = document.createElement('style'), StyleSheet;
 	document.head.appendChild(dial.Style);
 	dial.styles = {};
 	dial.styles.html = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('html { height: 100%; }')].style;
 	dial.styles.body = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('body { user-select: none; -moz-user-select: none; display: flex;	width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: ' + app.settings.backgroundColor + '; background-image: ' + app.settings.backgroundImage + '; }')].style;
-	switch(app.settings.backgroundMode){
+	applyImageMode(app.settings.backgroundMode, dial.styles.body);
-		case 0:
-			dial.styles.body.backgroundRepeat = 'no-repeat';
-			dial.styles.body.backgroundSize = '100% 100%';
-			break;
-		case 1:
-			dial.styles.body.backgroundRepeat = 'no-repeat';
-			dial.styles.body.backgroundSize = 'cover';
-			dial.styles.body.backgroundPosition = 'center';
-			break;
-		case 2:
-			dial.styles.body.backgroundRepeat = 'no-repeat';
-			dial.styles.body.backgroundSize = 'contain';
-			dial.styles.body.backgroundPosition = 'center';
-			break;
-		case 3:
-			dial.styles.body.backgroundRepeat = 'no-repeat';
-			dial.styles.body.backgroundPosition = 'center';
-			break;
-	}
 	dial.styles.grid = {};
 	dial.styles.grid.grid = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid { border-collapse: collapse; margin: auto; }')].style;
 	dial.styles.grid.cell = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td { margin: 0px; padding: 0px; }')].style;
@@ -289,8 +293,10 @@ dial.initStyles = function(){
 	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;
 	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 + '; background-repeat: no-repeat; background-position: center center; }')].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);
 	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;
+	applyImageMode(app.settings.grid.folderIconMode, dial.styles.grid.linkFolder);
 	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;
 	if(oldStyle) document.head.removeChild(oldStyle);

src/js/settings.js

@@ -31,10 +31,12 @@ app.init = function(){
 		GridMargins.value = app.settings.grid.margin;
 		GridColumns.value = app.settings.grid.columns;
 		GridBackNode.checked = app.settings.grid.backNode;
+		GridBackMode.value = app.settings.grid.backIconMode;
 		GridBackImage = app.settings.grid.backIcon;
 		GridBackPreview.style.backgroundImage = app.settings.grid.backIcon;
 		GridBackPreview.style.backgroundRepeat = 'no-repeat';
 		GridBackPreview.style.backgroundPosition = '50% 50%';
+		GridFolderMode.value = app.settings.grid.folderIconMode;
 		GridFolderImage = app.settings.grid.folderIcon;
 		GridFolderPreview.style.backgroundImage = app.settings.grid.folderIcon;
 		GridFolderPreview.style.backgroundRepeat = 'no-repeat';
@@ -81,7 +83,9 @@ app.init = function(){
 		app.settings.grid.margin = +(GridMargins.value);
 		app.settings.grid.columns = +(GridColumns.value);
 		app.settings.grid.backNode = GridBackNode.checked;
+		app.settings.grid.backIconMode = +(GridBackMode.value);
 		app.settings.grid.backIcon = GridBackImage;
+		app.settings.grid.folderIconMode = +(GridFolderMode.value);
 		app.settings.grid.folderIcon = GridFolderImage;
 		app.settings.grid.cells.margin = +(GridCellsMargins.value);
 		app.settings.grid.cells.marginHover = +(GridCellsMarginsHover.value);