fwtoolkit 0.1.0-alpha.6 → 0.1.0-beta.1

package/src/settings.ts

@@ -1,7 +1,12 @@
-// @ts-nocheck
-let _settings = null
+export interface Settings {
+    apiUrl: (url: string) => string
+    getCsrfToken: () => string
+    [key: string]: unknown
+}
+
+let _settings: Settings | null = null
 
-export function initSettings(rawSettings) {
+export function initSettings(rawSettings: Settings): void {
     if (_settings) {
         throw new Error("Settings already initialized")
     }
@@ -9,7 +14,7 @@ export function initSettings(rawSettings) {
     _settings = Object.freeze({...rawSettings})
 }
 
-export function getSettings() {
+export function getSettings(): Settings {
     if (!_settings) {
         throw new Error(
             "App settings not initialized. Call initSettings() first."

package/src/user.ts

@@ -1,7 +1,6 @@
-// @ts-nocheck
 import {post} from "./network.js"
 
-export const setLanguage = (_config, language) =>
+export const setLanguage = (_config: unknown, language: string): Promise<unknown> =>
     post("/api/i18n/setlang/", {language}).then(() => {
         // We delete the network cache as this contains the JS
         // translations.
@@ -13,9 +12,9 @@ export const setLanguage = (_config, language) =>
         })
     })
 
-const COLOR_CACHE = {}
+const COLOR_CACHE: Record<string, string> = {}
 
-const userColor = string => {
+const userColor = (string: string): string => {
     // Source https://gist.github.com/0x263b/2bdd90886c2036a1ad5bcf06d6e6fb37
     if (string.length === 0) {
         return "rgb(0,0,0)"
@@ -35,8 +34,14 @@ const userColor = string => {
     return COLOR_CACHE[string]
 }
 
+interface AvatarUser {
+    username?: string
+    name?: string
+    avatar?: string
+}
+
 /** A template for the default round avatar view. */
-export const avatarTemplate = ({user}) => {
+export const avatarTemplate = ({user}: {user: AvatarUser}): string => {
     const name = user.username || user.name || "A"
     if (user.avatar) {
         return `<img class="fw-avatar" src="${user.avatar}" alt="${name}">`

package/src/w3c-keyname.d.ts

@@ -0,0 +1,3 @@
+declare module "w3c-keyname" {
+    export function keyName(event: KeyboardEvent): string
+}

package/src/worker.ts

@@ -1,7 +1,6 @@
-// @ts-nocheck
 /* allows cross domain web workers */
 /* Taken from https://benohead.com/cross-domain-cross-browser-web-workers/ */
-export const makeWorker = workerUrl => {
+export const makeWorker = (workerUrl: string): Worker => {
     const a = document.createElement("a")
     a.href = workerUrl // turn into absolute URL if needed.
     const blob = new Blob([`importScripts("${a.href}")`], {

package/src/ws.ts

@@ -1,7 +1,67 @@
-// @ts-nocheck
+export interface WebSocketMessage {
+    type?: string
+    s?: number
+    c?: number
+    base?: string
+    from?: number
+    [key: string]: unknown
+}
+
+export type GetMessage = () => WebSocketMessage | false
+
+export interface WebSocketConnectorOptions {
+    base?: string
+    path?: string
+    appLoaded?: () => boolean
+    anythingToSend?: () => boolean
+    messagesElement?: () => HTMLElement | false | null
+    initialMessage?: () => WebSocketMessage
+    resubScribed?: () => void
+    restartMessage?: () => WebSocketMessage
+    warningNotAllSent?: string
+    infoDisconnected?: string
+    receiveData?: (data: WebSocketMessage) => void
+    failedAuth?: () => void
+}
+
+interface MessageTracker {
+    server: number
+    client: number
+    lastTen: WebSocketMessage[]
+}
+
 /* Sets up communicating with server (retrieving document, saving, collaboration, etc.).
  */
 export class WebSocketConnector {
+    base: string
+    path: string
+    appLoaded: () => boolean
+    anythingToSend: () => boolean
+    messagesElement: () => HTMLElement | false | null
+    initialMessage: () => WebSocketMessage
+    resubScribed: () => void
+    restartMessage: () => WebSocketMessage
+    warningNotAllSent: string
+    infoDisconnected: string
+    receiveData: (data: WebSocketMessage) => void
+    failedAuth: () => void
+
+    messages: MessageTracker
+    messagesToSend: GetMessage[]
+    oldMessages: GetMessage[]
+
+    online: boolean
+    connected: boolean
+    connectionCount: number
+    recentlySent: boolean
+    listeners: Record<string, (event: Event) => void>
+
+    ws: WebSocket | undefined
+
+    //heartbeat
+    pingTimer: number | false
+    pongTimer: number | false
+
     constructor({
         base = "", // needs to be specified
         path = "", // needs to be specified
@@ -13,11 +73,11 @@ export class WebSocketConnector {
         restartMessage = () => ({type: "restart"}), // Too many messages have been lost and we need to restart
         warningNotAllSent = gettext("Warning! Some data is unsaved"), // Info to show while disconnected WITH unsaved data
         infoDisconnected = gettext("Disconnected. Attempting to reconnect..."), // Info to show while disconnected WITHOUT unsaved data
-        receiveData = _data => {},
+        receiveData = () => {},
         failedAuth = () => {
             window.location.href = "/"
         }
-    }) {
+    }: WebSocketConnectorOptions = {}) {
         this.base = base
         this.path = path
         this.appLoaded = appLoaded
@@ -48,31 +108,32 @@ export class WebSocketConnector {
         //heartbeat
         this.pingTimer = false
         this.pongTimer = false
+
+        this.messages = {
+            server: 0,
+            client: 0,
+            lastTen: []
+        }
     }
 
-    init() {
+    init(): void {
         this.createWSConnection()
 
         // Close the socket manually for now when the connection is lost. Sometimes the socket isn't closed on disconnection.
-        this.listeners.onOffline = _event => this.ws.close()
+        this.listeners.onOffline = () => this.ws!.close()
         window.addEventListener("offline", this.listeners.onOffline)
     }
 
-    goOffline() {
+    goOffline(): void {
         // Simulate offline mode due to lack of ways of doing this in Chrome/Firefox
         // https://bugzilla.mozilla.org/show_bug.cgi?id=1421357
         // https://bugs.chromium.org/p/chromium/issues/detail?id=423246
         this.online = false
         this.connected = false
-        this.ws.close()
+        this.ws!.close()
     }
 
-    goOnline() {
-        // Reconnect from offline mode
-        this.online = true
-    }
-
-    close() {
+    close(): void {
         if (this.ws) {
             this.ws.onclose = () => {}
             this.ws.close()
@@ -80,14 +141,14 @@ export class WebSocketConnector {
         window.removeEventListener("offline", this.listeners.onOffline)
     }
 
-    createWSConnection() {
+    createWSConnection(): void {
         // Messages object used to ensure that data is received in right order.
         this.messages = {
             server: 0,
             client: 0,
             lastTen: []
         }
-        let url
+        let url: string
         if (this.online) {
             if (this.base.startsWith("/")) {
                 url = this.base + this.path
@@ -113,7 +174,7 @@ export class WebSocketConnector {
         this.ws.onclose = () => this.onclose()
     }
 
-    waitForWS() {
+    waitForWS(): Promise<void> {
         return new Promise((resolve, reject) => {
             const checkState = () => {
                 if (!this.ws) {
@@ -138,22 +199,22 @@ export class WebSocketConnector {
         })
     }
 
-    onmessage(event) {
-        const data = JSON.parse(event.data)
+    onmessage(event: MessageEvent): void {
+        const data = JSON.parse(event.data) as WebSocketMessage
         const expectedServer = this.messages.server + 1
         if (data.type === "request_resend") {
-            this.resend_messages(data.from)
+            this.resend_messages(data.from!)
         } else if (data.type === "pong") {
             this.heartbeat()
-        } else if (data.s < expectedServer) {
+        } else if ((data.s as number) < expectedServer) {
             // Receive a message already received at least once. Ignore.
             return
-        } else if (data.s > expectedServer) {
+        } else if ((data.s as number) > expectedServer) {
             // Messages from the server have been lost.
             // Request resend.
             this.waitForWS()
                 .then(() =>
-                    this.ws.send(
+                    this.ws!.send(
                         JSON.stringify({
                             type: "request_resend",
                             from: this.messages.server
@@ -167,27 +228,27 @@ export class WebSocketConnector {
             this.messages.server = expectedServer
             if (data.c === this.messages.client) {
                 this.receive(data)
-            } else if (data.c < this.messages.client) {
+            } else if ((data.c as number) < this.messages.client) {
                 // We have received all server messages, but the server seems
                 // to have missed some of the client's messages. They could
                 // have been sent simultaneously.
                 // The server wins over the client in this case.
                 this.waitForWS().then(() => {
-                    const clientDifference = this.messages.client - data.c
-                    this.messages.client = data.c
+                    const clientDifference = this.messages.client - (data.c as number)
+                    this.messages.client = data.c as number
                     if (clientDifference > this.messages.lastTen.length) {
                         // We cannot fix the situation
                         this.send(this.restartMessage)
                         return
                     }
-                    this.messages["lastTen"]
+                    this.messages.lastTen
                         .slice(0 - clientDifference)
                         .forEach(data => {
                             this.messages.client += 1
                             data.c = this.messages.client
                             data.s = this.messages.server
 
-                            this.ws.send(JSON.stringify(data))
+                            this.ws!.send(JSON.stringify(data))
                         })
                     this.receive(data)
                 })
@@ -195,7 +256,7 @@ export class WebSocketConnector {
         }
     }
 
-    onclose() {
+    onclose(): void {
         this.connected = false
         window.setTimeout(() => {
             this.createWSConnection()
@@ -215,7 +276,7 @@ export class WebSocketConnector {
         }
     }
 
-    open() {
+    open(): void {
         const messagesElement = this.messagesElement()
         if (messagesElement) {
             messagesElement.innerHTML = ""
@@ -230,19 +291,19 @@ export class WebSocketConnector {
         this.send(() => message)
     }
 
-    subscribed() {
+    subscribed(): void {
         if (this.connectionCount > 1) {
             this.resubScribed()
         }
         while (this.oldMessages.length > 0) {
-            this.send(this.oldMessages.shift())
+            this.send(this.oldMessages.shift()!)
         }
     }
 
     /** Sends data to server or keeps it in a list if currently offline. */
-    send(getData, timer = 80) {
-        if (this.connected && this.ws.readyState !== this.ws.OPEN) {
-            this.ws.close()
+    send(getData: GetMessage, timer = 80): void {
+        if (this.connected && this.ws!.readyState !== this.ws!.OPEN) {
+            this.ws!.close()
             return
         }
         if (this.connected && !this.recentlySent) {
@@ -255,11 +316,11 @@ export class WebSocketConnector {
             data.c = this.messages.client
             data.s = this.messages.server
             this.messages.lastTen.push(data)
-            this.messages.lastTen = this.messages["lastTen"].slice(-10)
+            this.messages.lastTen = this.messages.lastTen.slice(-10)
 
             this.waitForWS()
                 .then(() => {
-                    this.ws.send(JSON.stringify(data))
+                    this.ws!.send(JSON.stringify(data))
                     this.setRecentlySentTimer(timer)
                 })
                 .catch(() => {
@@ -275,20 +336,20 @@ export class WebSocketConnector {
         }
     }
 
-    setRecentlySentTimer(timer) {
+    setRecentlySentTimer(timer: number): void {
         this.recentlySent = true
         window.setTimeout(() => {
             this.recentlySent = false
             const oldMessages = this.messagesToSend
             this.messagesToSend = []
             while (oldMessages.length > 0) {
-                const getData = oldMessages.shift()
+                const getData = oldMessages.shift()!
                 this.send(getData, Math.min(timer * 1.2, 10000))
             }
         }, timer)
     }
 
-    resend_messages(from) {
+    resend_messages(from: number): Promise<void> {
         return this.waitForWS()
             .then(() => {
                 const toSend = this.messages.client - from
@@ -302,7 +363,7 @@ export class WebSocketConnector {
                     this.messages.client += 1
                     data.c = this.messages.client
                     data.s = this.messages.server
-                    this.ws.send(JSON.stringify(data))
+                    this.ws!.send(JSON.stringify(data))
                 })
             })
             .catch(() => {
@@ -311,10 +372,10 @@ export class WebSocketConnector {
             })
     }
 
-    receive(data) {
+    receive(data: WebSocketMessage): void {
         switch (data.type) {
             case "redirect":
-                this.base = data.base
+                this.base = data.base as string
                 break
             case "welcome":
                 this.open()
@@ -332,15 +393,19 @@ export class WebSocketConnector {
         }
     }
 
-    heartbeat() {
-        clearTimeout(this.pingTimer)
-        clearTimeout(this.pongTimer)
-        this.pingTimer = setTimeout(() => {
+    heartbeat(): void {
+        if (this.pingTimer !== false) {
+            clearTimeout(this.pingTimer)
+        }
+        if (this.pongTimer !== false) {
+            clearTimeout(this.pongTimer)
+        }
+        this.pingTimer = window.setTimeout(() => {
             // Don't send ping if WebSocket is not open
-            if (this.ws.readyState === this.ws.OPEN) {
-                this.ws.send('{"type": "ping"}')
-                this.pongTimer = setTimeout(() => {
-                    this.listeners.onOffline()
+            if (this.ws!.readyState === this.ws!.OPEN) {
+                this.ws!.send('{"type": "ping"}')
+                this.pongTimer = window.setTimeout(() => {
+                    this.listeners.onOffline(new Event("offline"))
                 }, 10000)
             }
         }, 60000)

package/css/ui_dialogs.css

@@ -1,144 +0,0 @@
-.ui-widget-overlay {
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgb(var(--overlay-color));
-    z-index: 100;
-    backdrop-filter: blur(2px);
-}
-
-.ui-widget-overlay.no-blur {
-    backdrop-filter: none;
-}
-
-.ui-dialog {
-    position: absolute;
-    padding: 19px;
-    background-color: var(--cs-light-background);
-    border: solid 1px var(--cs-light-border);
-    box-shadow: 0 0 10px var(--cs-light-box-shadow);
-    overflow: hidden;
-    border-radius: 4px;
-    font-size: 14px;
-    outline: 0;
-    z-index: 1000; /* Ensure dialog stays on top */
-    user-select: none; /* Prevent interaction with background content */
-}
-
-.ui-dialog-titlebar {
-    position: relative;
-    padding: 0;
-}
-
-.ui-dialog-title {
-    font-size: 16px;
-    font-weight: 700;
-    text-transform: none;
-}
-
-.ui-dialog-buttonpane {
-    padding-top: 20px;
-}
-
-.ui-button {
-    font-size: 14px;
-    line-height: 1em;
-    border: none;
-    background: none;
-    padding: 0;
-    margin: 0;
-    cursor: pointer;
-}
-
-.ui-dialog-titlebar-close,
-.ui-dialog-titlebar-help {
-    position: absolute;
-    right: 0.3em;
-    top: 50%;
-    width: 20px;
-    margin: -10px 0 0;
-    padding: 1px;
-    height: 20px;
-}
-
-.ui-button-icon-only {
-    width: 2em;
-    box-sizing: border-box;
-    text-indent: -9999px;
-    white-space: nowrap;
-}
-
-.ui-button-icon-only .ui-icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin-top: -8px;
-    margin-left: -8px;
-}
-
-.ui-button-icon-only .ui-icon::before {
-    text-indent: 5019px;
-}
-
-/* Style for the close button specifically */
-.ui-dialog-titlebar-close {
-    order: 99; /* Push to end of flex container */
-}
-
-.ui-dialog-titlebar-close:hover,
-.ui-dialog-titlebar-help:hover {
-    color: var(--cs-dark-hover);
-}
-
-.ui-icon-closethick::before {
-    width: 0.7em;
-    height: 1em;
-    padding-top: 5px;
-    content: "\f00d";
-}
-
-.ui-icon-help::before {
-    width: 0.7em;
-    height: 1em;
-    padding-top: 5px;
-    content: "\f128";
-}
-
-.ui-dialog-content {
-    position: relative;
-    margin-top: 24px;
-    overflow: auto;
-}
-
-.ui-dialog-buttonset {
-    position: relative;
-    text-align: right;
-}
-
-.ui-dialog-buttonset .fw-button {
-    margin-left: 6px;
-}
-
-/* Make focus visible on all focusable elements */
-.ui-dialog *:focus {
-    outline: 2px solid var(--cs-dark-background);
-    outline-offset: 2px;
-}
-
-/* Style the title bar buttons specifically */
-.ui-dialog-titlebar .ui-button-icon-only {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    padding: 8px;
-    background: transparent;
-    border: none;
-}
-
-.ui-dialog-titlebar .ui-button-icon-only:focus {
-    outline: 2px solid var(--cs-dark-text);
-    outline-offset: 2px;
-    border-radius: 4px;
-}

package/dist/templates.d.ts

@@ -1,7 +0,0 @@
-export declare const baseBodyTemplate: ({ user, contents, hasOverview, app }: {
-    user: any;
-    contents: any;
-    hasOverview: any;
-    app: any;
-}) => string;
-//# sourceMappingURL=templates.d.ts.map

package/dist/templates.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../src/templates.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,gBAAgB,GAAI;;;;;CAAkC,WAsC5D,CAAA"}

package/dist/templates.js

@@ -1,43 +0,0 @@
-// @ts-nocheck
-import { avatarTemplate } from "./user.js";
-import { filterPrimaryEmail } from "./user_util.js";
-export const baseBodyTemplate = ({ user, contents, hasOverview, app }) => `
-<div id="wait">
-    <i class="fa fa-spinner fa-pulse"></i>
-</div>
-<header class="fw-header" role="banner">
-    <div class="fw-container">
-        <a href="${app && app.routes[""].app === "document" ? "/" : "/documents/"}">
-            <h1 class="fw-logo">
-                <span class="fw-logo-text"></span>
-                <img src="${staticUrl("svg/icon.svg")}" alt="Logo" />
-            </h1>
-        </a>
-        <nav id="header-nav" role="navigation" aria-label="${gettext("Site navigation")}"></nav>
-        <div id="user-preferences" class="fw-user-preferences fw-header-text">
-            <div id="preferences-btn" class="fw-button">
-                ${avatarTemplate({ user })}
-            </div>
-            <div id="user-preferences-pulldown" class="fw-pulldown fw-right">
-                <div data-value="profile">
-                    <span class='fw-avatar-card'>
-                        <span class='fw-avatar-card-avatar'>${avatarTemplate({ user })}</span>
-                        <span class='fw-avatar-card-name'>
-                            ${user.username}
-                            <span class='fw-avatar-card-email'>${filterPrimaryEmail(user.emails)}</span>
-                        </span>
-                    </span>
-                </div>
-                <div data-value="contacts">${gettext("Contacts")}</div>
-                <div data-value="logout">${gettext("Log out")}</div>
-            </div>
-        </div><!-- end user preference -->
-    </div><!-- end container -->
-</header>
-<div class="fw-contents-outer">
-    ${hasOverview ? '<div class="fw-overview-menu-wrapper"><ul id="fw-overview-menu"></ul></div>' : ""}
-    <div class="fw-contents">
-        ${contents}
-    </div>
-</div>`;
-//# sourceMappingURL=templates.js.map

package/dist/templates.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"templates.js","sourceRoot":"","sources":["../src/templates.ts"],"names":[],"mappings":"AAAA,cAAc;AACd,OAAO,EAAC,cAAc,EAAC,MAAM,WAAW,CAAA;AACxC,OAAO,EAAC,kBAAkB,EAAC,MAAM,gBAAgB,CAAA;AAEjD,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,EAAC,EAAE,EAAE,CAAC;;;;;;mBAMrD,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,aAAa;;;4BAGrD,SAAS,CAAC,cAAc,CAAC;;;6DAGQ,OAAO,CAAC,iBAAiB,CAAC;;;kBAGrE,cAAc,CAAC,EAAC,IAAI,EAAC,CAAC;;;;;8DAKsB,cAAc,CAAC,EAAC,IAAI,EAAC,CAAC;;8BAEtD,IAAI,CAAC,QAAQ;iEACsB,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC;;;;6CAInD,OAAO,CAAC,UAAU,CAAC;2CACrB,OAAO,CAAC,SAAS,CAAC;;;;;;MAMvD,WAAW,CAAC,CAAC,CAAC,6EAA6E,CAAC,CAAC,CAAC,EAAE;;UAE5F,QAAQ;;OAEX,CAAA"}

package/dist/user_util.d.ts

@@ -1,7 +0,0 @@
-/** Creates a dropdown box.
- * @param btn The button to open and close the dropdown box.
- * @param box The node containing the contents of the dropdown box.
- * @param preopen An optional function to be called before opening the dropdown box. Used to position dropdown box.
- */
-export declare const filterPrimaryEmail: (emails: any) => any;
-//# sourceMappingURL=user_util.d.ts.map

package/dist/user_util.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"user_util.d.ts","sourceRoot":"","sources":["../src/user_util.ts"],"names":[],"mappings":"AACA;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAG,WAAM,QAUvC,CAAA"}

package/dist/user_util.js

@@ -1,19 +0,0 @@
-// @ts-nocheck
-/** Creates a dropdown box.
- * @param btn The button to open and close the dropdown box.
- * @param box The node containing the contents of the dropdown box.
- * @param preopen An optional function to be called before opening the dropdown box. Used to position dropdown box.
- */
-export const filterPrimaryEmail = emails => {
-    const primaryEmails = emails.filter(email => email.primary);
-    if (!primaryEmails.length) {
-        if (emails.length) {
-            return emails[0].address;
-        }
-        else {
-            return "";
-        }
-    }
-    return primaryEmails[0].address;
-};
-//# sourceMappingURL=user_util.js.map

package/dist/user_util.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"user_util.js","sourceRoot":"","sources":["../src/user_util.ts"],"names":[],"mappings":"AAAA,cAAc;AACd;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,EAAE;IACvC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;IAC3D,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;QACxB,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC;YAChB,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAA;QAC5B,CAAC;aAAM,CAAC;YACJ,OAAO,EAAE,CAAA;QACb,CAAC;IACL,CAAC;IACD,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,OAAO,CAAA;AACnC,CAAC,CAAA"}