initial commit
This commit is contained in:
222
scripts/roastmonday_common.js
Normal file
222
scripts/roastmonday_common.js
Normal file
@ -0,0 +1,222 @@
|
||||
/*
|
||||
* JS doesn't support directly declaring objects
|
||||
* with '--' and '-' in their properties.
|
||||
*
|
||||
* Well technically it deos using bracket-notation like this:
|
||||
* foo['--bar'] =42;
|
||||
* But that's not that much better.
|
||||
*
|
||||
* So instead this JSON.parse is used.
|
||||
*/
|
||||
|
||||
window.themes = JSON.parse('{\
|
||||
"white": {\
|
||||
"--main-highlight-color": "#EF940B",\
|
||||
"--main-bg-color": "white", \
|
||||
"--secondary-bg-color": "white", \
|
||||
"--main-text-color": "black",\
|
||||
"--main-link-color": "#106BF4",\
|
||||
"--shadow-color": "#888",\
|
||||
"--gray-light": "#cacaca",\
|
||||
"--gray-medium": "#e0e0e0",\
|
||||
"--gray-dark": "#4c4c4c",\
|
||||
"--red": "red",\
|
||||
"--green": "green"\
|
||||
},\
|
||||
"black": {\
|
||||
"--main-highlight-color": "#EE6E1F",\
|
||||
"--main-link-color": "#1191e0",\
|
||||
"--main-bg-color": "black",\
|
||||
"--secondary-bg-color": "black", \
|
||||
"--main-text-color": "white",\
|
||||
"--shadow-color": "#777",\
|
||||
"--gray-light": "#4c4c4c",\
|
||||
"--gray-medium": "#333",\
|
||||
"--gray-dark": "#cacaca",\
|
||||
"--red": "#ef0000",\
|
||||
"--green": "#00ab00"\
|
||||
},\
|
||||
"ash": {\
|
||||
"--main-highlight-color": "#EE6E1F",\
|
||||
"--main-link-color": "#1191e0",\
|
||||
"--main-bg-color": "#333",\
|
||||
"--secondary-bg-color": "#333", \
|
||||
"--main-text-color": "#d0d0d0",\
|
||||
"--shadow-color": "#656565",\
|
||||
"--gray-light": "#4c4c4c",\
|
||||
"--gray-medium": "#3b3b3b",\
|
||||
"--gray-dark": "#cacaca",\
|
||||
"--red": "#e4053e",\
|
||||
"--green": "#04c446"\
|
||||
},\
|
||||
"midnight": {\
|
||||
"--main-highlight-color": "#1caff6",\
|
||||
"--main-link-color": "#1caff6",\
|
||||
"--main-bg-color": "#111",\
|
||||
"--secondary-bg-color": "#045d89", \
|
||||
"--main-text-color": "#d0d0d0",\
|
||||
"--shadow-color": "#656565",\
|
||||
"--gray-light": "#3f3f3f",\
|
||||
"--gray-medium": "#3b3b3b",\
|
||||
"--gray-dark": "#cacaca",\
|
||||
"--red": "#f72900",\
|
||||
"--green": "#82dd00"\
|
||||
}\
|
||||
}');
|
||||
window.IS_TOUCH_DEVICE = false;
|
||||
window.addEventListener('touchstart', function() {
|
||||
window.IS_TOUCH_DEVICE = true;
|
||||
});
|
||||
|
||||
window.queries = getQueries();
|
||||
setTheme(queries.theme);
|
||||
if (queries.debugTouch) {
|
||||
IS_TOUCH_DEVICE = true;
|
||||
console.log("Touch device mode set");
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
displayThemeChooser();
|
||||
});
|
||||
|
||||
function setTheme(t, save = true, element = null) {
|
||||
let themeName = 'white';
|
||||
if (!!t && (t in themes)) {
|
||||
themeName = t;
|
||||
} else {
|
||||
const ls = localStorage.getItem('theme');
|
||||
if (!!ls && (ls in themes)) {
|
||||
themeName = ls;
|
||||
} else {
|
||||
save = false;
|
||||
// Use default. Switch to ash if dark mode and don't save
|
||||
if (matchMedia("(prefers-color-scheme: dark)")) {
|
||||
themeName = 'ash';
|
||||
}
|
||||
}
|
||||
}
|
||||
if (save) {
|
||||
localStorage.setItem('theme', themeName);
|
||||
}
|
||||
const theme = themes[themeName];
|
||||
const doc = element || document.querySelector(':root');
|
||||
Object.keys(theme).forEach(varName => {
|
||||
doc.style.setProperty(varName, theme[varName]);
|
||||
});
|
||||
}
|
||||
|
||||
function displayThemeChooser() {
|
||||
const wrapper = document.getElementById('themeChooser');
|
||||
if (!wrapper) {
|
||||
return;
|
||||
}
|
||||
const themeNames = Object.keys(themes);
|
||||
if (themeNames.length < 2) {
|
||||
return;
|
||||
}
|
||||
const list = document.createElement('ul');
|
||||
list.classList.add('theme-chooser-list');
|
||||
themeNames.forEach(t => {
|
||||
const link = document.createElement('a');
|
||||
link.style.position = 'relative';
|
||||
link.href = `?theme=${t}`;
|
||||
link.onclick = function (e) {
|
||||
const t = this.href.split('theme=')[1];
|
||||
e.preventDefault();
|
||||
if (!IS_TOUCH_DEVICE) {
|
||||
setTheme(t);
|
||||
return;
|
||||
}
|
||||
const callout = document.querySelector('.theme-preview');
|
||||
if (callout && callout.getAttribute('currentTheme') == t) {
|
||||
// Clicked on already seelcted theme - apply!
|
||||
callout.style.display = "none";
|
||||
document.querySelector('.themelist').style.filter = '';
|
||||
try {
|
||||
let d = document.querySelector('.dimmer').remove();
|
||||
} catch (err) {
|
||||
// Do nothing
|
||||
}
|
||||
setTheme(t);
|
||||
return;
|
||||
} else {
|
||||
const rect = list.getBoundingClientRect();
|
||||
setTheme(t, false, callout);
|
||||
callout.setAttribute('currentTheme', t);
|
||||
callout.style.display = "inherit";
|
||||
callout.style.bottom = document.querySelector('.theme-chooser-list').getBoundingClientRect().top + "px";
|
||||
console.log(callout, callout.style);
|
||||
document.querySelector('.themelist').style.filter = 'blur(5px)';
|
||||
if (!document.querySelector('.dimmer')) {
|
||||
let dimmer = document.createElement('div');
|
||||
dimmer.classList.add('dimmer');
|
||||
document.body.appendChild(dimmer);
|
||||
}
|
||||
}
|
||||
};
|
||||
link.onmouseenter = function (e) {
|
||||
if (!IS_TOUCH_DEVICE) {
|
||||
const t = this.href.split('theme=')[1];
|
||||
setTheme(t, false);
|
||||
}
|
||||
};
|
||||
link.onmouseleave = function (e) {
|
||||
if (!IS_TOUCH_DEVICE) {
|
||||
setTheme(null, false);
|
||||
}
|
||||
};
|
||||
const container = document.createElement('li');
|
||||
container.classList.add('theme-chooser-list-item');
|
||||
const textContainer = document.createElement('span');
|
||||
link.appendChild(container);
|
||||
textContainer.innerText = t;
|
||||
container.appendChild(textContainer);
|
||||
list.appendChild(link);
|
||||
});
|
||||
wrapper.appendChild(list);
|
||||
}
|
||||
|
||||
function getQueries() {
|
||||
const query = window.location.search.substring(1);
|
||||
const vars = query.split('&');
|
||||
const queries = {};
|
||||
vars.forEach(v => {
|
||||
const pair = v.split('=');
|
||||
if (pair.length > 1) {
|
||||
queries[pair[0]] = decodeURIComponent(pair[1]);
|
||||
} else {
|
||||
queries[pair[0]] = null;
|
||||
}
|
||||
});
|
||||
return queries;
|
||||
}
|
||||
function get(url) {
|
||||
// Return a new promise.
|
||||
return new Promise(function(resolve, reject) {
|
||||
// Do the usual XHR stuff
|
||||
let req = new XMLHttpRequest();
|
||||
req.open('GET', url);
|
||||
|
||||
req.onload = function() {
|
||||
// This is called even on 404 etc
|
||||
// so check the status
|
||||
if (req.status == 200) {
|
||||
// Resolve the promise with the response text
|
||||
resolve(req.response);
|
||||
}
|
||||
else {
|
||||
// Otherwise reject with the status text
|
||||
// which will hopefully be a meaningful error
|
||||
reject(Error(req.statusText));
|
||||
}
|
||||
};
|
||||
|
||||
// Handle network errors
|
||||
req.onerror = function() {
|
||||
reject(Error('Network Error'));
|
||||
};
|
||||
|
||||
// Make the request
|
||||
req.send();
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user