From 5bfc4d9a749bf4e7ac5582d7862db364dc48a7ea Mon Sep 17 00:00:00 2001 From: Ben Busby Date: Wed, 8 Apr 2020 12:47:21 -0600 Subject: [PATCH] Added user config for nojs links and dark mode, minor styling updates --- app/routes.py | 12 +++++++- app/static/css/main.css | 52 ++++++++++++++++++++++++++++++-- app/static/js/controller.js | 60 ++++++++++++++++++++++++++++++------- app/templates/index.html | 24 +++++++++++---- 4 files changed, 128 insertions(+), 20 deletions(-) diff --git a/app/routes.py b/app/routes.py index 136d6c9..03fa69f 100644 --- a/app/routes.py +++ b/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('

', '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'): diff --git a/app/static/css/main.css b/app/static/css/main.css index f3472bd..eeb1fc3 100644 --- a/app/static/css/main.css +++ b/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; +} \ No newline at end of file diff --git a/app/static/js/controller.js b/app/static/js/controller.js index 758fbc0..aa51e6e 100644 --- a/app/static/js/controller.js +++ b/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(); - xhr.open("GET", "/static/config.json"); - xhr.onload = function() { - if (xhr.readyState === 4 && xhr.status !== 200) { + let xhrGET = new XMLHttpRequest(); + xhrGET.open("GET", "/static/config.json"); + xhrGET.onload = function() { + 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(); - xhr.open("POST", "/config"); - xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); - xhr.send(JSON.stringify(configSettings)); + let xhrPOST = new XMLHttpRequest(); + xhrPOST.open("POST", "/config"); + xhrPOST.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); + 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(); }); diff --git a/app/templates/index.html b/app/templates/index.html index 695a4c4..e195fc5 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -7,7 +7,7 @@ - +
@@ -15,10 +15,24 @@

-
- - - + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ +