Rework typescript to use modules

web UI now uses modules, and relies less on bodge to make things work. Also fixes an issue where invites where "failed to send to xx" appeared in invite form.
2020-10-22 17:50:40 +01:00
parent 2d6b1717db
commit 301f502052
29 changed files with 988 additions and 846 deletions
@@ -0,0 +1,87 @@
+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");
+    }
+};