From 8b7e59ca500d9d9447fbb03686d297a7f4c90279 Mon Sep 17 00:00:00 2001 From: Benji Hooper Date: Fri, 16 Apr 2021 17:51:17 +0100 Subject: [PATCH] Make some background colors and text colors configurable through new `style` configuration object --- config.json | 12 +++++- css/main.css | 3 +- js/autocomplete.js | 13 +++++- js/main.js | 100 ++++++++++++++++++++++++++++++++++++--------- scss/main.scss | 1 + 5 files changed, 107 insertions(+), 22 deletions(-) diff --git a/config.json b/config.json index 66eae52..4c6370c 100644 --- a/config.json +++ b/config.json @@ -47,5 +47,15 @@ "location": "Pune India", "unit": "cel" }, - "settingsIcon": false + "settingsIcon": false, + "style": { + "backgroundColor": "#212121", + "messageColor": "#fff", + "dateColor": "#d9d9d9", + "searchColor": "#fff", + "searchBackgroundColor": "#2e2e2e", + "squareColor": "#9e9e9e", + "squareBackgroundColor": "#2e2e2e" + }, + "backgroundColor": "#212121" } diff --git a/css/main.css b/css/main.css index f422c0d..a311190 100644 --- a/css/main.css +++ b/css/main.css @@ -72,7 +72,8 @@ body { font-size: 18px; color: #fff; box-sizing: border-box; - z-index: -1; } + z-index: -1; + cursor: pointer; } .main #search-bar .autocomplete-items-container .autocomplete-item:hover { background: #3b3b3b; } .main #search-bar .autocomplete-items-container .autocomplete-active { diff --git a/js/autocomplete.js b/js/autocomplete.js index f2e7a67..110170c 100644 --- a/js/autocomplete.js +++ b/js/autocomplete.js @@ -1,4 +1,4 @@ -function autocomplete(inp, passedValues) { +function autocomplete(inp, passedValues, style) { var currentFocus; /*execute a function when someone writes in the text field:*/ @@ -18,6 +18,9 @@ function autocomplete(inp, passedValues) { parentContainer.setAttribute("id", this.id + "-autocomplete-list"); parentContainer.style.paddingBottom = "1rem"; + if(style["searchBackgroundColor"]) { + parentContainer.style.backgroundColor = style["searchBackgroundColor"]; + } /*for each item in the array...*/ Object.keys(passedValues).forEach((el, i, arr) => { @@ -30,6 +33,14 @@ function autocomplete(inp, passedValues) { // Add the url as an attribute item.setAttribute('url', passedValues[el]); + if(style["searchBackgroundColor"]) { + item.style.backgroundColor = style["searchBackgroundColor"]; + } + + if(style["searchColor"]) { + item.style.color = style["searchColor"]; + } + /*make the matching letters bold:*/ item.innerHTML = "" + arr[i].substr(0, val.length) + ""; item.innerHTML += arr[i].substr(val.length); diff --git a/js/main.js b/js/main.js index 7865467..fe2e136 100644 --- a/js/main.js +++ b/js/main.js @@ -135,7 +135,7 @@ function handleMessage(userName) { * Else, add the username before the message. */ var builtMsg = buildMsg() - builtMsg == "" ? + builtMsg == "" ? builtMsg = `Hello ${userName}` : builtMsg = `Hey ${userName}, ${builtMsg}!` return builtMsg; } @@ -146,13 +146,13 @@ function updateTime() { */ currentDate = new Date() options = { - day: 'numeric', - month: 'short', - hour: 'numeric', - minute: 'numeric', - hour12: disable24Hour, - timeZone: timeZ - } + day: 'numeric', + month: 'short', + hour: 'numeric', + minute: 'numeric', + hour12: disable24Hour, + timeZone: timeZ + } finalDate = currentDate.toLocaleString(undefined, options) document.getElementById(dateId).textContent = finalDate } @@ -173,7 +173,7 @@ function updateWeather(weatherConfig) { userLocation = weatherConfig["location"].replace(/\ /g, ",") passedUnit = weatherConfig["unit"] unit = validWeatherUnit.includes(passedUnit.substring(0, 3)) ? - passedUnit : "cel" + passedUnit : "cel" fetchUrl = apiUrl + `?q=${userLocation}&appid=${appId}&units=metric` @@ -184,7 +184,7 @@ function updateWeather(weatherConfig) { weatherType = jsonData["weather"][0]["main"] temp = !unit.includes("cel") ? - getFahrenheit(temp) + "°F" : temp + "°C" + getFahrenheit(temp) + "°F" : temp + "°C" weatherText = temp + ", " + indexUppercase(weatherType) document.getElementById(weatherId).innerHTML = weatherText }) @@ -216,13 +216,13 @@ function parseAndCreate(jsonData) { if (jsonData["settingsIcon"]) enableCog(); // If the user has not passed any custom message - if (Object.keys(jsonData).includes("message") && + if (Object.keys(jsonData).includes("message") && typeof(jsonData["message"]) == "string" && jsonData["message"] != "") builtMsg = jsonData["message"] else builtMsg = this.handleMessage(this.userName); - + document.getElementById(messageId).textContent = builtMsg // Check if 24 hour is disabled disable24Hour = jsonData["disable24Hour"] @@ -252,14 +252,51 @@ function parseAndCreate(jsonData) { sqrs = jsonData["squares"] - // Extract the quicklinks from the sqrs - extractQuickLinks(sqrs); - sqrs.forEach((element, index) => { sqr = createSqr(element, index) document.getElementById(otherContentId).appendChild(sqr) }) - + + // Apply styling if present + if (jsonData["style"]) { + styleData = jsonData["style"] + if (styleData["backgroundColor"]) { + document.body.style.backgroundColor = styleData["backgroundColor"] + } + if (styleData["messageColor"]) { + document.getElementById(messageId).style.color = styleData["messageColor"] + } + if (styleData["dateColor"]) { + document.getElementById(dateId).style.color = styleData["dateColor"] + } + if (styleData["searchColor"]) { + document.getElementById(searchBarId).style.color = styleData["searchColor"] + } + if (styleData["searchBackgroundColor"]) { + document.getElementById(searchBarId).style.backgroundColor = styleData["searchBackgroundColor"] + autocompleteBackgroundColor = styleData["searchBackgroundColor"] + } + if (styleData["searchPlaceholderColor"]) { + document.getElementById(searchBarId).classList.add(createPlaceholderStyleClass(styleData["searchPlaceholderColor"])); + } + if (styleData["squareBackgroundColor"]) { + elements = document.getElementsByClassName("sqr") + var i; + for (i = 0; i < elements.length; i++) { + elements[i].style.backgroundColor = styleData["squareBackgroundColor"] + } + } + if (styleData["squareColor"]) { + elements = document.querySelectorAll(".sqr a") + var i; + for (i = 0; i < elements.length; i++) { + elements[i].style.color = styleData["squareColor"] + } + } + } + + // Extract the quicklinks from the sqrs + extractQuickLinks(sqrs, jsonData["style"]); } function createSqr(sqrData, index) { @@ -294,7 +331,7 @@ function createSqr(sqrData, index) { links.forEach(element => { aName = element["name"] aHref = element["url"] - + a = document.createElement("a") attrHref = document.createAttribute("href") attrHref.value = aHref @@ -403,8 +440,33 @@ function createClass(color) { return newClassName; } +function createPlaceholderStyleClass(color) { + /** + * Create a new class with for placeholder styling. + * + * This is pretty much a continuation of what has done preivously + * in the createClass function. + */ + var style = document.createElement('style'); + const newClassName = `bg-${Math.random().toString(36).substring(7)}`; + style.type = 'text/css'; + style.innerHTML = `::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ + color: ${color} !important; + opacity: 1; /* Firefox */ + } + + :-ms-input-placeholder { /* Internet Explorer 10-11 */ + color: ${color} !important; + } + + ::-ms-input-placeholder { /* Microsoft Edge */color: ${color} !important;}`; + document.getElementsByTagName('head')[0].appendChild(style); -function extractQuickLinks(passedSqrs) { + return newClassName; +} + + +function extractQuickLinks(passedSqrs, style) { /** * Extract the quicklinks passed in the config * @@ -417,7 +479,7 @@ function extractQuickLinks(passedSqrs) { }); // Start the autocomplete - autocomplete(document.getElementById("search-bar-input"), this.validQuickLinks); + autocomplete(document.getElementById("search-bar-input"), this.validQuickLinks, style); } // Listen to key click diff --git a/scss/main.scss b/scss/main.scss index fc5a529..8e38378 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -108,6 +108,7 @@ body { color: $foreground; box-sizing: border-box; z-index: -1; + cursor: pointer; &:hover { background: lighten($background, 10);