Moved more stuff to TypeScript.

assets/typescript/BackgroundAttachment.ts

@@ -0,0 +1,7 @@
+enum BackgroundAttachment {
+    None = 0,
+    Cover,
+    Stretch,
+    Tile,
+    Contain,
+}

assets/typescript/Colour.ts

@@ -0,0 +1,77 @@
+class Colour {
+    public static readonly INHERIT: number = 0x40000000;
+    public static readonly READABILITY_THRESHOLD: number = 186;
+    public static readonly LUMINANCE_WEIGHT_RED: number = 0.299;
+    public static readonly LUMINANCE_WEIGHT_GREEN: number = 0.587;
+    public static readonly LUMINANCE_WEIGHT_BLUE: number = 0.114;
+
+    public raw: number;
+
+    public constructor(rawColour: number = 0)
+    {
+        this.raw = rawColour === null ? Colour.INHERIT : rawColour;
+    }
+
+    public static none(): Colour {
+        return new Colour(Colour.INHERIT);
+    }
+
+    public get inherit(): boolean {
+        return (this.raw & Colour.INHERIT) > 0;
+    }
+
+    public set inherit(inherit: boolean) {
+        if (inherit) {
+            this.raw |= Colour.INHERIT;
+        } else {
+            this.raw &= ~Colour.INHERIT;
+        }
+    }
+
+    public get red(): number {
+        return (this.raw >> 16) & 0xFF;
+    }
+
+    public set red(red: number) {
+        red = red & 0xFF;
+        this.raw &= ~0xFF0000;
+        this.raw |= red << 16;
+    }
+
+    public get green(): number {
+        return (this.raw >> 8) & 0xFF;
+    }
+
+    public set green(green: number) {
+        green = green & 0xFF;
+        this.raw &= ~0xFF00;
+        this.raw |= green << 8;
+    }
+
+    public get blue(): number {
+        return this.raw & 0xFF;
+    }
+
+    public set blue(blue: number) {
+        blue = blue & 0xFF;
+        this.raw &= ~0xFF;
+        this.raw |= blue;
+    }
+
+    public get luminance(): number {
+        return Colour.LUMINANCE_WEIGHT_RED * this.red
+            + Colour.LUMINANCE_WEIGHT_GREEN * this.green
+            + Colour.LUMINANCE_WEIGHT_BLUE * this.blue;
+    }
+
+    public get hex(): string
+    {
+        let hex: string = (this.raw & 0xFFFFFF).toString(16);
+
+        if (hex.length < 6)
+            for (let i = 0; i < 6 - hex.length; i++)
+                hex = '0' + hex;
+
+        return '#' + hex;
+    }
+}

assets/typescript/CurrentUserInfo.ts

@@ -1,4 +1,4 @@
-export default interface CurrentUserInfo {
+interface CurrentUserInfo {
     user_id: number;
     username: string;
     user_background_settings: number;

assets/typescript/Support.ts

@@ -0,0 +1,6 @@
+// Collection class for support checks.
+class Support {
+    public static get sidewaysText(): boolean {
+        return CSS.supports('writing-mode', 'sideways-lr');
+    }
+}

assets/typescript/misuzu.ts

@@ -1,22 +1,67 @@
-import CurrentUserInfo from 'CurrentUserInfo';
+/// <reference path="CurrentUserInfo.ts" />
+/// <reference path="Colour.ts" />
+/// <reference path="Support.ts" />
 
 declare const timeago: any;
 declare const hljs: any;
 
+let userInfo: CurrentUserInfo;
+let loginFormAvatarTimeout: number = 0;
+
 // Initialisation process.
 window.addEventListener('load', () => {
-    console.log('a sardine grows from the soil');
-
     timeago().render(document.querySelectorAll('time'));
     hljs.initHighlighting();
 
     const userInfoElement: HTMLDivElement = document.getElementById('user-info') as HTMLDivElement;
 
-    // if userInfo isn't defined, just stop the initialisation process for now
+    if (userInfoElement) {
-    if (!userInfoElement)
+        userInfo = JSON.parse(userInfoElement.textContent) as CurrentUserInfo;
-        return;
 
-    const userInfo: CurrentUserInfo = JSON.parse(userInfoElement.textContent) as CurrentUserInfo;
+        const colour: Colour = new Colour(userInfo.user_colour);
 
-    console.log(userInfo);
+        console.log(`You are ${userInfo.username} with user id ${userInfo.user_id} and colour ${colour.hex}.`);
+    }
+
+    const changelogChangeAction: HTMLDivElement = document.querySelector('.changelog__change__action') as HTMLDivElement;
+
+    if (changelogChangeAction && !Support.sidewaysText) {
+        changelogChangeAction.title = "This is supposed to be sideways, but your browser doesn't support that.";
+    }
+
+    const loginForm: HTMLFormElement = document.getElementById('msz-login-form') as HTMLFormElement;
+
+    if (loginForm) {
+        const loginAvatar: HTMLElement = document.getElementById('login-avatar'),
+            loginUsername: HTMLInputElement = document.getElementById('login-username') as HTMLInputElement;
+
+        // Initial bump, in case anything is prefilled.
+        loginFormUpdateAvatar(loginAvatar, loginUsername, true);
+
+        loginUsername.addEventListener('keyup', () => loginFormUpdateAvatar(loginAvatar, loginUsername));
+    }
 });
+
+function loginFormUpdateAvatar(avatarElement: HTMLElement, usernameElement: HTMLInputElement, force: boolean = false): void {
+    if (!force) {
+        if (loginFormAvatarTimeout)
+            return;
+
+        loginFormAvatarTimeout = setTimeout(() => {
+            loginFormUpdateAvatar(avatarElement, usernameElement, true);
+            clearTimeout(loginFormAvatarTimeout);
+            loginFormAvatarTimeout = 0;
+        }, 750);
+        return;
+    }
+
+    const xhr: XMLHttpRequest = new XMLHttpRequest;
+    xhr.addEventListener('readystatechange', () => {
+        if (xhr.readyState !== 4)
+            return;
+
+        avatarElement.style.backgroundImage = `url('/profile.php?m=avatar&u=${xhr.responseText}')`;
+    });
+    xhr.open('GET', `/auth.php?m=get_user&u=${encodeURI(usernameElement.value)}`);
+    xhr.send();
+}

templates/auth/macros.twig

@@ -3,7 +3,7 @@
 
     {% from '_layout/input.twig' import input_hidden, input_csrf, input_text %}
 
-    <form class="container auth" method="post" action="/auth.php">
+    <form class="container auth" method="post" action="/auth.php" id="msz-login-form">
         {{ input_hidden('auth[mode]', 'login') }}
         {{ input_csrf('login') }}
 
@@ -29,44 +29,4 @@
             <button class="input__button">Login</button>
         </div>
     </form>
-
-    <script>
-        let avatarTimeout = 0;
-
-        function updateLoginAvatar(avatar, username, force) {
-            if (!force) {
-                if (avatarTimeout)
-                    return;
-                console.log(avatarTimeout);
-
-                avatarTimeout = setTimeout(() => {
-                    updateLoginAvatar(avatar, username, true);
-                    clearTimeout(avatarTimeout);
-                    avatarTimeout = 0;
-                }, 750);
-                return;
-            }
-
-            const request = new XMLHttpRequest;
-            request.addEventListener('readystatechange', () => {
-                if (request.readyState !== 4)
-                    return;
-
-                avatar.style.backgroundImage = 'url(\'/profile.php?u=%d&m=avatar\')'.replace('%d', request.responseText);
-            });
-            request.open('GET', '/auth.php?m=get_user&u=' + encodeURI(username.value));
-            request.send();
-        }
-
-        window.addEventListener('load', () => {
-            const avatar = document.getElementById('login-avatar'),
-                username = document.getElementById('login-username');
-
-            updateLoginAvatar(avatar, username, true); // in case there's anything prefilled
-
-            username.addEventListener('keyup', function (ev) {
-                updateLoginAvatar(avatar, username);
-            });
-        });
-    </script>
 {% endmacro %}

templates/changelog/change.twig

@@ -89,13 +89,6 @@
         </div>
     </div>
 
-    <script>
-        window.addEventListener('load', () => {
-            if (!CSS.supports('writing-mode', 'sideways-lr'))
-                document.getElementsByClassName('changelog__change__action')[0].title = 'This is supposed to be sideways, but your browser doesn\'t support that.';
-        });
-    </script>
-
     {% if comments is defined %}
         <div class="container">
             {{ container_title('Comments for ' ~ change.change_date) }}