From 42abeb4987ee3f7a7f8b62591aa6c8099607c58b Mon Sep 17 00:00:00 2001
From: Jason <jasonpenilla2@me.com>
Date: Sat, 31 Aug 2019 08:24:40 -0700
Subject: [PATCH] [feature] randomly select background image from list of URLs

---
 src/css/form.css     |  2 +-
 src/index.html       |  4 +++-
 src/js/background.js |  8 +++++++-
 src/js/control.js    | 26 ++++++++++++++++++++++++--
 4 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/css/form.css b/src/css/form.css
index 6a8bd922..6df4e430 100755
--- a/src/css/form.css
+++ b/src/css/form.css
@@ -7,7 +7,7 @@ textarea {
   font-size: 1em;
   font-family: var(--font-regular);
   line-height: 2em;
-  height: 5em;
+  height: 10em;
   min-height: 2.5em;
   min-width: 0;
   width: 100%;
diff --git a/src/index.html b/src/index.html
index f3f7fd09..24418db4 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1094,8 +1094,10 @@
                 </div>
                 <div class="form-indent">
                   <div class="input-wrap">
-                    <input id="control-background-image-url" class="control-background-image-url" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="https://" tabindex="-1">
+                    <textarea id="control-background-image-url" class="control-background-image-url mb-0" spellcheck="false" placeholder="https://..." tabindex="-1"></textarea>
                   </div>
+                  <p class="control-background-image-url-helper form-helper small">Add one or more URLs separate by a space or on a new lines. If more than one is entered a random background image will be used on load.</p>
+                  <hr>
                   <p class="control-background-image-url-helper form-helper small">Unsplash can be used for random images, eg:</p>
                   <p class="control-background-image-url-helper form-helper small"><i>https://source.unsplash.com/random/1920x1080/?night,day,sky</i></p>
                   <p class="control-background-image-url-helper form-helper small">Change parameters after <i>.../ramdom/</i> for more options. Loading times may vary.</p>
diff --git a/src/js/background.js b/src/js/background.js
index 8c9cccf0..171bdff0 100644
--- a/src/js/background.js
+++ b/src/js/background.js
@@ -84,7 +84,13 @@ var background = (function() {
       if (state.get().background.image.from == "file") {
         html.style.setProperty("--background-image", "url(" + state.get().background.image.file.data + ")");
       } else if (state.get().background.image.from == "url") {
-        html.style.setProperty("--background-image", "url(" + state.get().background.image.url + ")");
+        if (/\s+/g.test(state.get().background.image.url)) {
+          var allUrls = state.get().background.image.url.split(/\s+/);
+          var randomUrl = allUrls[Math.floor(Math.random() * allUrls.length)];
+          html.style.setProperty("--background-image", "url(" + randomUrl + ")");
+        } else {
+          html.style.setProperty("--background-image", "url(" + state.get().background.image.url + ")");
+        };
       };
     } else {
       html.style.setProperty("--background-image", "url()");
diff --git a/src/js/control.js b/src/js/control.js
index ff902c4f..14006afd 100644
--- a/src/js/control.js
+++ b/src/js/control.js
@@ -2199,7 +2199,7 @@ var control = (function() {
   }, {
     element: helper.e(".control-background-image-url"),
     path: "background.image.url",
-    type: "text",
+    type: "textarea",
     func: function() {
       background.render.image();
     }
@@ -2282,6 +2282,7 @@ var control = (function() {
       checkbox: "change",
       radio: "change",
       text: "input",
+      textarea: "input",
       number: "input",
       range: "input",
       color: "change",
@@ -2297,6 +2298,9 @@ var control = (function() {
       text: function(object) {
         return object.element.value;
       },
+      textarea: function(object) {
+        return object.element.value;
+      },
       number: function(object) {
         return parseInt(object.element.value, 10);
       },
@@ -2354,6 +2358,12 @@ var control = (function() {
           if (object.func) {
             object.func();
           };
+        },
+        textarea: function(object, event) {
+          changeValue(object);
+          if (object.func) {
+            object.func();
+          };
         }
       };
       object.element.addEventListener(eventType[object.type], function(event) {
@@ -3134,6 +3144,18 @@ var control = (function() {
         };
         object.element.value = newValue;
       },
+      textarea: function(object) {
+        var newValue = helper.getObject({
+          object: state.get(),
+          path: object.path
+        });
+        if (object.valueMod) {
+          object.valueMod.slice().reverse().forEach(function(arrayItem, index) {
+            newValue = valueMod[arrayItem](newValue, object.element);
+          });
+        };
+        object.element.value = newValue;
+      },
       number: function(object) {
         object.element.value = helper.getObject({
           object: state.get(),
@@ -3159,7 +3181,7 @@ var control = (function() {
         }));
       }
     };
-    var supportedType = ["checkbox", "radio", "text", "number", "range", "color"];
+    var supportedType = ["checkbox", "radio", "text", "number", "range", "color", "textarea"];
     _allControl.forEach(function(arrayItem, index) {
       if (supportedType.includes(arrayItem.element.type)) {
         setValue[arrayItem.type](arrayItem);