From 07dfa858e82859ad59c520495f443d5bcca3ae8b Mon Sep 17 00:00:00 2001
From: MatMoul <matmoul@gmail.com>
Date: Sat, 11 Nov 2017 00:44:56 +0100
Subject: [PATCH] Feature: Add stretch mode for background

---
 src/html/settings.html | 11 +++++++++++
 src/js/background.js   |  2 ++
 src/js/dial.js         | 22 +++++++++++++++++++++-
 src/js/settings.js     |  3 ++-
 4 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/html/settings.html b/src/html/settings.html
index ad9b2a2..3ee25e4 100644
--- a/src/html/settings.html
+++ b/src/html/settings.html
@@ -36,6 +36,17 @@
 							<td><span>Background Color :</span></td>
 							<td><input id="BackgroundColor" type="color"></td>
 						</tr>
+						<tr>
+							<td><span>Background Mode :</span></td>
+							<td>
+								<select id="BackgroundMode">
+									<option value="0">Stretch</option>
+									<option value="1">Cover</option>
+									<option value="2">Contain</option>
+									<option value="3">Center</option>
+								</select>
+							</td>
+						</tr>
 						<tr>
 							<td><span>Background Image :</span></td>
 							<td>
diff --git a/src/js/background.js b/src/js/background.js
index 87f8cd1..fedbdf7 100644
--- a/src/js/background.js
+++ b/src/js/background.js
@@ -106,6 +106,7 @@ app.Settings.init = function(callback){ // Load settings and nodes
 				settings: {
 					backgroundColor: '#3c4048',
 					backgroundImage: null,
+					backgroundMode: 0,
 					grid: {
 						margin: 10,
 						rows: 4,
@@ -178,6 +179,7 @@ app.Settings.init = function(callback){ // Load settings and nodes
 				app.Settings.save();
 			});
 		}
+		if(!data.settings.backgroundMode) data.settings.backgroundMode = 0;
 		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;
diff --git a/src/js/dial.js b/src/js/dial.js
index b7645af..068c34b 100644
--- a/src/js/dial.js
+++ b/src/js/dial.js
@@ -253,7 +253,27 @@ dial.initStyles = function(){
 	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 + '; background-repeat: no-repeat; background-size: 100% 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){
+		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;
diff --git a/src/js/settings.js b/src/js/settings.js
index d347e89..fbe1511 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -21,6 +21,7 @@ app.init = function(){
 		app.settings = settings;
 		BackgroundColor.value = app.settings.backgroundColor;
 		BackgroundImage = app.settings.backgroundImage;
+		BackgroundMode.value = app.settings.backgroundMode;
 		BackgroundPreview.style.backgroundColor = app.settings.backgroundColor;
 		BackgroundPreview.style.backgroundImage = app.settings.backgroundImage;
 		BackgroundPreview.style.backgroundRepeat = 'no-repeat';
@@ -75,6 +76,7 @@ app.init = function(){
 	BtnApply.onclick = function(){
 		app.settings.backgroundColor = BackgroundColor.value;
 		app.settings.backgroundImage = BackgroundImage;
+		app.settings.backgroundMode = +(BackgroundMode.value);
 		app.settings.grid.rows = +(GridRows.value);
 		app.settings.grid.margin = +(GridMargins.value);
 		app.settings.grid.columns = +(GridColumns.value);
@@ -83,7 +85,6 @@ app.init = function(){
 		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);
 		app.settings.grid.cells.opacity = +(GridCellsOpacity.value) / 100;
 		app.settings.grid.cells.opacityHover = +(GridCellsOpacityHover.value) / 100;
 		app.settings.grid.cells.borderSize = +(GridCellsBorderSize.value);