mirror of
https://github.com/hrfee/jfa-go.git
synced 2024-12-23 01:20:11 +00:00
80 lines
2.6 KiB
TypeScript
80 lines
2.6 KiB
TypeScript
|
// Used for animation on theme change
|
||
|
const whichTransitionEvent = (): string => {
|
||
|
const el = document.createElement('fakeElement');
|
||
|
const transitions = {
|
||
|
'transition': 'transitionend',
|
||
|
'OTransition': 'oTransitionEnd',
|
||
|
'MozTransition': 'transitionend',
|
||
|
'WebkitTransition': 'webkitTransitionEnd'
|
||
|
};
|
||
|
for (const t in transitions) {
|
||
|
if (el.style[t] !== undefined) {
|
||
|
return transitions[t];
|
||
|
}
|
||
|
}
|
||
|
return '';
|
||
|
};
|
||
|
|
||
|
var transitionEndEvent = whichTransitionEvent();
|
||
|
|
||
|
// Toggles between light and dark themes
|
||
|
const _toggleCSS = (): void => {
|
||
|
const els: NodeListOf<HTMLLinkElement> = document.querySelectorAll('link[rel="stylesheet"][type="text/css"]');
|
||
|
let cssEl = 0;
|
||
|
let remove = false;
|
||
|
if (els.length != 1) {
|
||
|
cssEl = 1;
|
||
|
remove = true
|
||
|
}
|
||
|
let href: string = "bs" + bsVersion;
|
||
|
if (!els[cssEl].href.includes(href + "-jf")) {
|
||
|
href += "-jf";
|
||
|
}
|
||
|
href += ".css";
|
||
|
let newEl = els[cssEl].cloneNode(true) as HTMLLinkElement;
|
||
|
newEl.href = href;
|
||
|
els[cssEl].parentNode.insertBefore(newEl, els[cssEl].nextSibling);
|
||
|
if (remove) {
|
||
|
els[0].remove();
|
||
|
}
|
||
|
document.cookie = "css=" + href;
|
||
|
}
|
||
|
|
||
|
// Toggles between light and dark themes, but runs animation if window small enough.
|
||
|
var buttonWidth = 0;
|
||
|
const toggleCSS = (el: HTMLElement): void => {
|
||
|
const switchToColor = window.getComputedStyle(document.body, null).backgroundColor;
|
||
|
// Max page width for animation to take place
|
||
|
let maxWidth = 1500;
|
||
|
if (window.innerWidth < maxWidth) {
|
||
|
// Calculate minimum radius to cover screen
|
||
|
const radius = Math.sqrt(Math.pow(window.innerWidth, 2) + Math.pow(window.innerHeight, 2));
|
||
|
const currentRadius = el.getBoundingClientRect().width / 2;
|
||
|
const scale = radius / currentRadius;
|
||
|
buttonWidth = +window.getComputedStyle(el, null).width;
|
||
|
document.body.classList.remove('smooth-transition');
|
||
|
el.style.transform = `scale(${scale})`;
|
||
|
el.style.color = switchToColor;
|
||
|
el.addEventListener(transitionEndEvent, function (): void {
|
||
|
if (this.style.transform.length != 0) {
|
||
|
_toggleCSS();
|
||
|
this.style.removeProperty('transform');
|
||
|
document.body.classList.add('smooth-transition');
|
||
|
}
|
||
|
}, false);
|
||
|
} else {
|
||
|
_toggleCSS();
|
||
|
el.style.color = switchToColor;
|
||
|
}
|
||
|
};
|
||
|
|
||
|
const rotateButton = (el: HTMLElement): void => {
|
||
|
if (el.classList.contains("rotated")) {
|
||
|
rmAttr(el, "rotated")
|
||
|
addAttr(el, "not-rotated");
|
||
|
} else {
|
||
|
rmAttr(el, "not-rotated");
|
||
|
addAttr(el, "rotated");
|
||
|
}
|
||
|
};
|