-
Notifications
You must be signed in to change notification settings - Fork 5
/
color-picker.ts
54 lines (45 loc) · 1.64 KB
/
color-picker.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import query from '../utilities/query';
import ready from '../utilities/ready';
/**
* Invoke Scroll-To-Top Button
* @param {*} element
*/
function invokeColorPicker(element)
{
const defaultScheme = window['newshub'].defaultScheme;
function onLoad() {
query('[data-newshub-toggle="color-picker"]').map((el: HTMLInputElement) => {
let style = localStorage.getItem('newshub-color-scheme') || defaultScheme;
if(style === 'light') {
el.checked = false;
} else {
el.checked = true;
}
});
}
onLoad();
element.addEventListener('change', (event) => {
let style = localStorage.getItem('newshub-color-scheme') || defaultScheme;
let newStyle = style === 'light'? 'dark': 'light';
localStorage.setItem('newshub-color-scheme', newStyle);
// Set Styling for a smooth change
let styling = document.createElement('style');
styling.innerText = '*,*::before,*::after{ transition: all 0.25s ease 0ms !important; }';
document.head.appendChild(styling);
// Change Class Names
document.body.classList.remove(style);
document.body.classList.add(newStyle);
// Remove Styling
setTimeout(() => styling.remove(), 500);
onLoad();
// Trigger Event
const customEvent = new CustomEvent('newshub:scheme', { detail: { prev: style, now: newStyle } });
document.dispatchEvent(customEvent);
});
}
// Export Ready Handler
export default () => {
ready(() => {
query('[data-newshub-toggle="color-picker"]').map(el => invokeColorPicker(el));
})
};