[feature] randomly select background image from list of URLs

Author: jpenilla

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%;

src/index.html

@@ -1094,8 +1094,10 @@ <h1 class="menu-item-header-text">Image</h1>
 </div>
 <divclass="form-indent">
 <divclass="input-wrap">
-<inputid="control-background-image-url" class="control-background-image-url" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="https://" tabindex="-1">
+<textareaid="control-background-image-url" class="control-background-image-url mb-0" spellcheck="false" placeholder="https://..." tabindex="-1"></textarea>
 </div>
+<pclass="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>
 <pclass="control-background-image-url-helper form-helper small">Unsplash can be used for random images, eg:</p>
 <pclass="control-background-image-url-helper form-helper small"><i>https://source.unsplash.com/random/1920x1080/?night,day,sky</i></p>
 <pclass="control-background-image-url-helper form-helper small">Change parameters after <i>.../ramdom/</i> for more options. Loading times may vary.</p>

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+")");
 }elseif(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)){
+varallUrls=state.get().background.image.url.split(/\s+/);
+varrandomUrl=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()");

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){
 returnobject.element.value;
 },
+textarea: function(object){
+returnobject.element.value;
+},
 number: function(object){
 returnparseInt(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){
+varnewValue=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(){
 }));
 }
 };
-varsupportedType=["checkbox","radio","text","number","range","color"];
+varsupportedType=["checkbox","radio","text","number","range","color","textarea"];
 _allControl.forEach(function(arrayItem,index){
 if(supportedType.includes(arrayItem.element.type)){
 setValue[arrayItem.type](arrayItem);