mirror of
https://github.com/hrfee/jfa-go.git
synced 2024-11-14 14:20:11 +00:00
Harvey Tindall
32b8ed4aa2
i wanted to split up the web ui components into multiple files, and figured it'd be a good chance to try out typescript. run make typescript to compile everything in ts/ and put it in data/static/. This is less of a rewrite and more of a refactoring, most of it still works the same but bits have been cleaned up too. Remaining javascript found in setup.js and form.html
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");
|
|
}
|
|
};
|