mirror of https://github.com/hrfee/jfa-go
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.8 KiB
88 lines
2.8 KiB
import { rmAttr, addAttr } from "../modules/common.js";
|
|
|
|
interface aWindow extends Window {
|
|
rotateButton(el: HTMLElement): void;
|
|
}
|
|
|
|
declare var window: aWindow;
|
|
|
|
// 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" + window.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.
|
|
window.buttonWidth = 0;
|
|
export 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;
|
|
window.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;
|
|
}
|
|
};
|
|
|
|
window.rotateButton = (el: HTMLElement): void => {
|
|
if (el.classList.contains("rotated")) {
|
|
rmAttr(el, "rotated")
|
|
addAttr(el, "not-rotated");
|
|
} else {
|
|
rmAttr(el, "not-rotated");
|
|
addAttr(el, "rotated");
|
|
}
|
|
};
|