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

@@ -46,5 +46,6 @@
   "weatherConf": {
     "location": "Pune India",
     "unit": "cel"
-  }
+  },
+  "settingsIcon": false
 }

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;

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);
+        }
+    }
 }

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) {

scss/main.scss

@@ -260,6 +260,7 @@ body {
     bottom: 25px;
     right: 25px;
     transition: 2s ease-in;
+    display: none;
     
     &:hover .cog {
         fill: white;