Added user config for nojs links and dark mode, minor styling updates

app/routes.py

@@ -49,7 +49,8 @@ def send_request(curl_url, ua):
 
 @app.route('/', methods=['GET'])
 def index():
-    return render_template('index.html')
+    bg = '#000' if 'dark' in user_config and user_config['dark'] else '#fff'
+    return render_template('index.html', bg=bg)
 
 
 @app.route('/search', methods=['GET'])
@@ -92,9 +93,12 @@ def search():
     get_body = send_request(SEARCH_URL + full_query, get_ua(user_agent))
 
     # Aesthetic only re-skinning
+    dark_mode = 'dark' in user_config and user_config['dark']
     get_body = get_body.replace('>G<', '>Sh<')
     pattern = re.compile('4285f4|ea4335|fbcc05|34a853|fbbc05', re.IGNORECASE)
     get_body = pattern.sub('685e79', get_body)
+    if dark_mode:
+        get_body = get_body.replace('fff', '000').replace('202124', 'ddd').replace('1967D2', '3b85ea')
 
     soup = BeautifulSoup(get_body, 'html.parser')
 
@@ -141,6 +145,12 @@ def search():
                 a.append(BeautifulSoup('<br><hr><br>', 'html.parser'))
                 a.append(nojs_link)
 
+    # Set up dark mode if active
+    if dark_mode:
+        soup.find('html')['style'] = 'scrollbar-color: #333 #111;'
+        for input_element in soup.findAll('input'):
+            input_element['style'] = 'color:#fff;'
+
     # Ensure no extra scripts passed through
     try:
         for script in soup('script'):

app/static/css/main.css

@@ -1,7 +1,6 @@
 @import url(https://fonts.googleapis.com/css?family=Open+Sans);
 
 body {
-    background: #fff;
     font-family: 'Open Sans', sans-serif;
 }
 
@@ -32,12 +31,12 @@ body {
     border: 3px solid #685e79;
     padding: 5px;
     height: 40px;
-    border-radius: 10px;
     outline: none;
     font-size: 24px;
     color: #685e79;
     border-radius: 10px 10px 0 0;
     max-width: 600px;
+    background: rgba(0,0,0,0);
 }
 
 #search-bar:focus{
@@ -51,7 +50,6 @@ body {
     background: #685e79;
     text-align: center;
     color: #fff;
-    border-radius: 10px;
     cursor: pointer;
     font-size: 20px;
     align-content: center;
@@ -61,3 +59,51 @@ body {
     max-width: 600px;
 }
 
+.config-div {
+    padding: 5px;
+}
+
+.collapsible {
+    background-color: rgba(0,0,0,0);
+    color: #685e79;
+    cursor: pointer;
+    padding: 18px;
+    width: 100%;
+    border: none;
+    text-align: left;
+    outline: none;
+    font-size: 15px;
+    border-radius: 10px 10px 0 0;
+}
+
+.active {
+    background-color: #685e79;
+    color: white;
+}
+
+.collapsible:after {
+    content: '\002B';
+    color: #685e79;
+    font-weight: bold;
+    float: right;
+    margin-left: 5px;
+}
+
+.active:after {
+    content: "\2212";
+    color: white;
+}
+
+.content {
+    padding: 0 18px;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.2s ease-out;
+    background-color: #685e79;
+    color: white;
+    border-radius: 0 0 10px 10px;
+}
+
+.open {
+    padding-bottom: 20px;
+}

app/static/js/controller.js

@@ -1,4 +1,7 @@
 document.addEventListener("DOMContentLoaded", function() {
+    setTimeout(function() {
+        document.getElementById("main").style.display = "block";
+    }, 100);
 
     // Setup search field
     const searchBar = document.getElementById("search-bar");
@@ -20,33 +23,68 @@ document.addEventListener("DOMContentLoaded", function() {
     };
 
     // Setup shoogle config
+    const collapsible = document.getElementById("config-collapsible");
+    collapsible.addEventListener("click", function() {
+        this.classList.toggle("active");
+        let content = this.nextElementSibling;
+        if (content.style.maxHeight) {
+            content.style.maxHeight = null;
+        } else {
+            content.style.maxHeight = content.scrollHeight + "px";
+        }
+
+        content.classList.toggle("open");
+    });
+
     const saveConfig = document.getElementById("config-submit");
     const nearConfig = document.getElementById("config-near");
+    const noJSConfig = document.getElementById("config-nojs");
+    const darkConfig = document.getElementById("config-dark");
 
     // Request existing config info
-    var xhr = new XMLHttpRequest();
+    let xhrGET = new XMLHttpRequest();
-    xhr.open("GET", "/static/config.json");
+    xhrGET.open("GET", "/static/config.json");
-    xhr.onload = function() {
+    xhrGET.onload = function() {
-        if (xhr.readyState === 4 && xhr.status !== 200) {
+        if (xhrGET.readyState === 4 && xhrGET.status !== 200) {
             alert("Error loading Shoogle config");
             return;
         }
 
         // Allow for updating/saving config values
-        let configSettings = JSON.parse(xhr.responseText);
+        let configSettings = JSON.parse(xhrGET.responseText);
 
-        nearConfig.value = configSettings["near"];
+        nearConfig.value = configSettings["near"] ? configSettings["near"] : "";
         nearConfig.addEventListener("keyup", function(event) {
             configSettings["near"] = nearConfig.value;
         });
 
+        noJSConfig.checked = !!configSettings["nojs"];
+        noJSConfig.addEventListener("change", function() {
+           configSettings["nojs"] = noJSConfig.checked ? 1 : 0;
+        });
+
+        darkConfig.checked = !!configSettings["dark"];
+        darkConfig.addEventListener("change", function() {
+           configSettings["dark"] = darkConfig.checked ? 1 : 0;
+        });
+
         saveConfig.onclick = function() {
-            var xhr = new XMLHttpRequest();
+            let xhrPOST = new XMLHttpRequest();
-            xhr.open("POST", "/config");
+            xhrPOST.open("POST", "/config");
-            xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+            xhrPOST.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
-            xhr.send(JSON.stringify(configSettings));
+            xhrPOST.send(JSON.stringify(configSettings));
+            xhrPOST.onload = function() {
+                if (xhrGET.readyState === 4 && xhrPOST.status !== 200) {
+                    alert("Failure to save config file");
+                    return;
+                }
+
+                if (confirm("Configuration saved. Reload now?")) {
+                    window.location.reload();
+                }
+            }
         }
     };
-    xhr.send();
+    xhrGET.send();
 
 });

app/templates/index.html

@@ -7,7 +7,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="stylesheet" href="/static/css/main.css">
     </head>
-    <body>
+    <body id="main" style="display: none; background-color: {{ bg }}">
         <div class="search-container">
             <img class="logo" src="/static/img/logo.png">
             <div class="search-fields">
@@ -15,10 +15,24 @@
                 <button type="submit" id="search-submit">Search</button>
             </div>
             <br/>
-            <div class="config-fields">
+            <button id="config-collapsible" class="collapsible">Configuration</button>
-                <label for="config-near">Near: </label>
+            <div class="content">
-                <input type="text" name="config-near" id="config-near" placeholder="City Name">
+                <div class="config-fields">
-                <button type="submit" id="config-submit">Save</button>
+                <div class="config-div">
+                    <label for="config-near">Near: </label>
+                    <input type="text" name="config-near" id="config-near" placeholder="City Name">
+                </div>
+                <div class="config-div">
+                    <label for="config-nojs">Show NoJS Links: </label>
+                    <input type="checkbox" name="config-nojs" id="config-nojs">
+                </div>
+                <div class="config-div">
+                    <label for="config-dark">Dark Mode: </label>
+                    <input type="checkbox" name="config-dark" id="config-dark">
+                </div>
+                <div class="config-div">
+                    <button type="submit" id="config-submit">Save</button>
+                </div>
             </div>
         </div>
     </body>