kawa/startpage-onedark
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add theming ability for various aspects of the startpage

Browse Source 
Add support for theming varisou aspects of the page all from the
config.

Thanks to @benjih for the PR.
This commit is contained in:
Deepjyoti Barman
2021-04-24 19:27:31 +05:30
parent dc818bd2b5 3661f92c15
commit 8cad9b0d21
5 changed files with 138 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
config.json
View File

@@ -47,5 +47,17 @@
"location": "Pune India",
"unit": "cel"
},
"settingsIcon": false
"settingsIcon": false,
"style": {
"backgroundColor": "#212121",
"messageColor": "#fff",
"dateColor": "#d9d9d9",
"lineColor": "#fff",
"weatherColor": "#d9d9d9",
"searchColor": "#fff",
"searchBackgroundColor": "#2e2e2e",
"squareColor": "#9e9e9e",
"squareBackgroundColor": "#2e2e2e",
"autocompleteHighlightBackgroundColor": "#3B3B3B"
}
}

3
css/main.css
View File

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

13
js/autocomplete.js
View File

@@ -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 = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
item.innerHTML += arr[i].substr(val.length);

129
js/main.js
View File

@@ -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) + "&deg;F" : temp + "&deg;C"
getFahrenheit(temp) + "&deg;F" : temp + "&deg;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,60 @@ 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["lineColor"]) {
document.getElementById(lineId).style.color = styleData["lineColor"]
}
if (styleData["weatherColor"]) {
document.getElementById(weatherId).style.color = styleData["weatherColor"]
}
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["autocompleteHighlightBackgroundColor"]) {
addAutocompleteStyleClass(styleData["autocompleteHighlightBackgroundColor"]);
}
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 +340,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 +449,53 @@ 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 addAutocompleteStyleClass(color) {
/**
* Add some colors for the autocomplete classes in order to
* keep. We need to add styles for :hover property so it is
* easier to just inject some CSS.
*/
var style = document.createElement("style");
style.type = "text/css";
style.innerHTML = `
.autocomplete-item:hover {
background: ${color} !important;
}
.autocomplete-active {
background: ${color} !important;
}
`;
document.getElementsByTagName('head')[0].appendChild(style);
}
function extractQuickLinks(passedSqrs, style) {
/**
* Extract the quicklinks passed in the config
*
@@ -417,7 +508,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

1
scss/main.scss
View File

@@ -108,6 +108,7 @@ body {
color: $foreground;
box-sizing: border-box;
z-index: -1;
cursor: pointer;
&:hover {
background: lighten($background, 10);