From 20d66912208a937c031524916475d132bac335c9 Mon Sep 17 00:00:00 2001
From: Kuldeep M <crudetoaster@gmail.com>
Date: Mon, 7 Jan 2019 14:42:14 +0000
Subject: [PATCH] [feature] adding random accent colour

---
 index.html    |  7 +++++++
 js/control.js | 14 +++++++++++---
 js/helper.js  |  7 ++++++-
 js/state.js   |  9 ++++++---
 js/theme.js   | 18 +++++++++++++++++-
 js/update.js  | 13 +++++++++++++
 js/version.js |  2 +-
 7 files changed, 61 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index 95e595b8..39d3621c 100644
--- a/index.html
+++ b/index.html
@@ -252,6 +252,13 @@
               <label for="control-link-sort-letter"><span class="label-icon"></span>Letter</label>
             </div>
           </div>
+          <div class="menu-item">
+            <h1 class="menu-header">Theme</h1>
+            <div class="checkbox-wrap">
+              <input id="control-layout-theme-random" class="control-layout-theme-random" type="checkbox" tabindex="1">
+              <label for="control-layout-theme-random"><span class="label-icon"></span>Random Accent colour on load/refresh</label>
+            </div>
+          </div>
         </div>
         <div class="menu-content-area menu-content-area-layout is-hidden">
           <div class="menu-item">
diff --git a/js/control.js b/js/control.js
index d50d608a..63d21706 100644
--- a/js/control.js
+++ b/js/control.js
@@ -202,12 +202,20 @@ var control = (function() {
     }, false);
     helper.e(".control-layout-theme").addEventListener("change", function() {
       state.change({
-        path: "layout.theme",
+        path: "layout.theme.current",
         value: helper.hexToRgb(this.value)
       });
       theme.render();
       data.save();
     }, false);
+    helper.e(".control-layout-theme-random").addEventListener("change", function() {
+      state.change({
+        path: "layout.theme.random",
+        value: this.checked
+      });
+      theme.render();
+      data.save();
+    }, false);
     helper.e(".control-link-new-tab").addEventListener("change", function() {
       state.change({
         path: "link.newTab",
@@ -227,7 +235,6 @@ var control = (function() {
         data.save();
       }, false);
     });
-
     helper.eA("input[name='control-link-sort']").forEach(function(arrayItem, index) {
       arrayItem.addEventListener("change", function() {
         state.change({
@@ -470,7 +477,8 @@ var control = (function() {
 
   var update = function() {
     helper.e(".control-edit").checked = state.get().edit.active;
-    helper.e(".control-layout-theme").value = helper.rgbToHex(state.get().layout.theme);
+    helper.e(".control-layout-theme").value = helper.rgbToHex(state.get().layout.theme.current);
+    helper.e(".control-layout-theme-random").checked = state.get().layout.theme.random;
     helper.e(".control-link-new-tab").value = state.get().link.style.newTab;
     helper.e(".control-link-style-" + state.get().link.style).checked = true;
     helper.e(".control-link-sort-" + state.get().link.sort).checked = true;
diff --git a/js/helper.js b/js/helper.js
index 7b882fe0..a297c069 100644
--- a/js/helper.js
+++ b/js/helper.js
@@ -296,6 +296,10 @@ var helper = (function() {
     });
   };
 
+  var randomNumber = function(min, max) {
+    return Math.floor(Math.random() * (max - min + 1) + min);
+  };
+
   // exposed methods
   return {
     e: e,
@@ -314,7 +318,8 @@ var helper = (function() {
     makeNode: makeNode,
     setObject: setObject,
     getObject: getObject,
-    makeObject: makeObject
+    makeObject: makeObject,
+    randomNumber: randomNumber
   };
 
 })();
diff --git a/js/state.js b/js/state.js
index 7245ecb8..2c54aceb 100644
--- a/js/state.js
+++ b/js/state.js
@@ -64,9 +64,12 @@ var state = (function() {
       container: "wide",
       scrollPastEnd: true,
       theme: {
-        r: 0,
-        g: 255,
-        b: 0,
+        current: {
+          r: 0,
+          g: 255,
+          b: 0,
+        },
+        random: false
       },
     },
     edit: {
diff --git a/js/theme.js b/js/theme.js
index 57139a18..8ba56a4a 100644
--- a/js/theme.js
+++ b/js/theme.js
@@ -2,17 +2,33 @@ var theme = (function() {
 
   var render = function() {
     var html = helper.e("html");
-    var color = state.get().layout.theme;
+    var color = state.get().layout.theme.current;
     html.style.setProperty("--accent", color.r + ", " + color.g + ", " + color.b);
   };
 
+  var random = function() {
+    if (state.get().layout.theme.random) {
+      var randomColor = {
+        r: helper.randomNumber(0, 255),
+        g: helper.randomNumber(0, 255),
+        b: helper.randomNumber(0, 255)
+      };
+      state.change({
+        path: "layout.theme.current",
+        value: randomColor
+      });
+    };
+  };
+
   var init = function() {
+    random();
     render();
   };
 
   // exposed methods
   return {
     init: init,
+    random: random,
     render: render
   };
 
diff --git a/js/update.js b/js/update.js
index df8edee9..df904e46 100644
--- a/js/update.js
+++ b/js/update.js
@@ -23,6 +23,15 @@ var update = (function() {
     return data;
   };
 
+  var _update_210 = function(data) {
+    data.state.layout.theme = {
+      current: data.state.layout.theme,
+      random: false
+    };
+    data.version = 2.10;
+    return data;
+  };
+
   // var _update_300 = function(data) {
   //   data.version = 3.00;
   //   return data;
@@ -37,6 +46,10 @@ var update = (function() {
       console.log("\trunning update", 2.00);
       data = _update_200(data);
     };
+    if (data.version < 2.10) {
+      console.log("\trunning update", 2.10);
+      data = _update_210(data);
+    };
     // if (data.version < 3.00) {
     //   console.log("\t# running update", 3.00);
     //   data = _update_300(data);
diff --git a/js/version.js b/js/version.js
index 9d42a0fe..a2e13ee5 100644
--- a/js/version.js
+++ b/js/version.js
@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "2.0.0";
+  var current = "2.1.0";
 
   var get = function() {
     var number = current.split(".");