From f07ac800307a7962d55dd4409ea228b69a50cf48 Mon Sep 17 00:00:00 2001
From: Deepjyoti Barman <deep.barman30@gmail.com>
Date: Thu, 17 Sep 2020 11:41:06 +0530
Subject: [PATCH] Make the settings button optional

The settings button will now be optional and will be enabled through the
config. If it is disabled, it will not be shown in the page.

By default, it is disabled, since adding it might ruin the look of the
startpage for a lot of users.
---
 config.json    |  3 ++-
 css/main.css   |  3 ++-
 js/main.js     | 32 ++++++++++++++++++++++++++++++++
 js/settings.js | 37 +++++++++++++++++++------------------
 scss/main.scss |  1 +
 5 files changed, 56 insertions(+), 20 deletions(-)

diff --git a/config.json b/config.json
index 62becec..66eae52 100644
--- a/config.json
+++ b/config.json
@@ -46,5 +46,6 @@
   "weatherConf": {
     "location": "Pune India",
     "unit": "cel"
-  }
+  },
+  "settingsIcon": false
 }
diff --git a/css/main.css b/css/main.css
index 5d4d7bf..984cdc2 100644
--- a/css/main.css
+++ b/css/main.css
@@ -159,7 +159,8 @@ body {
   position: absolute;
   bottom: 25px;
   right: 25px;
-  transition: 2s ease-in; }
+  transition: 2s ease-in;
+  display: none; }
   #settings-cog:hover .cog {
     fill: white;
     stroke: white;
diff --git a/js/main.js b/js/main.js
index a2e9876..171c39e 100644
--- a/js/main.js
+++ b/js/main.js
@@ -212,6 +212,9 @@ function parseAndCreate(jsonData) {
      */
     this.userName = jsonData["user"]
 
+    // Enable the settings button if it is enabled
+    if (jsonData["settingsIcon"]) enableCog();
+
     // If the user has not passed any custom message
     if (Object.keys(jsonData).includes("message") && 
             typeof(jsonData["message"]) == "string" &&
@@ -400,4 +403,33 @@ function listenForSettings() {
         if (event.ctrlKey && event.which == 188)
             showSettings();
     }
+}
+
+// Handle the settings cog
+
+function enableCog() {
+    /**
+     * Enable the settings cog.
+     * 
+     * It will be disabled by default, however, if the user
+     * wishes to enable it through the config, it will be shown.
+     * 
+     * Once shown, we need to add some event listeners to it as
+     * well so it works the right way.
+     */
+    settingsCogElement = document.getElementById("settings-cog");
+
+    // Unhide it
+    settingsCogElement.style.display = "block";
+
+    // Add event listener
+    settingsCogElement.onclick = function() {
+        editor = showSettings()
+
+        // Add an onclick listener to hide settings if the button is clicked
+        // again.
+        settingsCogElement.onclick = () => {
+            hideSettings(editor);
+        }
+    }
 }
\ No newline at end of file
diff --git a/js/settings.js b/js/settings.js
index 7936538..c049d1e 100644
--- a/js/settings.js
+++ b/js/settings.js
@@ -14,10 +14,6 @@ jsonContainer = "jsoneditor"
 // Detect browser
 BROWSER = detectBrowser()
 
-document.getElementById('settings-cog').onclick = function() {
-  showSettings()
-}
-
 function showSettings() {
     modalEl = document.getElementById(modalId)
     closeBtn = document.getElementsByClassName(closeId)[0]
@@ -33,21 +29,26 @@ function showSettings() {
     loadJson(editor)
 
     closeBtn.onclick = () => {
-        modalEl.style.display = "none"
-        // Get the updated JSON
-        updatedJson = editor.get()
-        BROWSER.storage.sync.set(updatedJson)
-        document.getElementById(jsonContainer).innerHTML = ""
-        location.reload()
-    }
-    document.getElementById('settings-cog').onclick = () => {
-        modalEl.style.display = "none"
-        // Get the updated JSON
-        updatedJson = editor.get()
-        BROWSER.storage.sync.set(updatedJson)
-        document.getElementById(jsonContainer).innerHTML = ""
-        location.reload()
+        hideSettings(editor);
     }
+
+    return editor
+}
+
+function hideSettings(editor) {
+    /**
+     * Hide the settings.
+     * 
+     * This function is to be called when the settings window
+     * is supposed to be hidden, This will automatically
+     * handle saving the updated settings to the localstorage.
+     */
+    modalEl.style.display = "none"
+    // Get the updated JSON
+    updatedJson = editor.get()
+    BROWSER.storage.sync.set(updatedJson)
+    document.getElementById(jsonContainer).innerHTML = ""
+    location.reload()
 }
 
 async function loadJson(editor) {
diff --git a/scss/main.scss b/scss/main.scss
index 96fd6b8..fbd8ab9 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -260,6 +260,7 @@ body {
     bottom: 25px;
     right: 25px;
     transition: 2s ease-in;
+    display: none;
     
     &:hover .cog {
         fill: white;