@olenbetong/appframe-core 1.0.0

package/es/SessionHandler.js

@@ -0,0 +1,150 @@
+import mitt from "mitt";
+import { getLocalizedString } from "./getLocalizedString.js";
+export default class SessionHandler {
+    constructor() {
+        this.eventHandler = mitt();
+        this.showingDialog = false;
+        this.dialog = null;
+    }
+    expired(callback) {
+        af.userSession = af.userSession || {
+            login: null
+        };
+        if (typeof callback !== "function") {
+            throw new TypeError("Parameter pCallback passed to the expired function must be a function!");
+        }
+        const once = () => {
+            this.detachEvent("onAuthenticated", once);
+            callback();
+        };
+        this.attachEvent("onAuthenticated", once);
+        if (this.showingDialog !== true) {
+            this.showingDialog = true;
+            const contentContainer = document.createElement("div");
+            contentContainer.className = "session-expired-container";
+            contentContainer.innerHTML = `
+<div class="session-expired-log-in" style="margin-top: 20px;">
+  <div class="row">
+    <div class="sessionExpired">
+      <h4 class="message">Frakoblet - tidsavbrudd</h4>
+      <div class="form-group">
+        <label for="username">${getLocalizedString("Username")}</label>
+        <input type="text" class="form-control" id="username" autofocus>
+      </div>
+      <div class="form-group">
+        <label for="password">${getLocalizedString("Password")}</label>
+        <input type="password" autocomplete="password" class="form-control" id="password" >
+      </div>
+      <div class="form-group">
+        <div>
+          <button type="submit" class="btn btn-default sign-in">
+            ${getLocalizedString("Log in")}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="" style="display:none; margin: 0px 30px;">
+      <div class="alert alert-warning" role="alert" style="margin-top:10px;"></div> 
+    </div>
+  </div>
+</div>
+`;
+            const message = af.userSession.login ? SessionHandler.messages.relog : SessionHandler.messages.login;
+            const messageElem = contentContainer.querySelector(".message");
+            const statusElem = contentContainer.querySelector(".alert-warning");
+            const userElem = contentContainer.querySelector("input[type=text]");
+            const signInElem = contentContainer.querySelector(".sign-in");
+            const passwordElem = contentContainer.querySelector("input[type=password]");
+            if (messageElem !== null &&
+                userElem !== null &&
+                statusElem !== null &&
+                userElem !== null &&
+                signInElem !== null &&
+                passwordElem !== null) {
+                messageElem.innerText = getLocalizedString(message);
+                userElem.value = af.userSession.login || "";
+                userElem.disabled = !!af.userSession.login;
+                userElem.readOnly = !!af.userSession.login;
+                document.body.appendChild(contentContainer);
+                const doLogin = async () => {
+                    passwordElem.disabled = true;
+                    const request = new Request("/login", {
+                        body: JSON.stringify({
+                            username: userElem.value,
+                            password: passwordElem.value,
+                            remember: false
+                        }),
+                        headers: {
+                            Accept: "application/json",
+                            "Content-Type": "application/json; charset=utf-8",
+                            "X-Requested-With": "XMLHttpRequest"
+                        },
+                        method: "POST"
+                    });
+                    try {
+                        const response = await fetch(request);
+                        const json = await response.json();
+                        if (json.success) {
+                            document.body.removeChild(contentContainer);
+                            this.showingDialog = false;
+                            this.eventHandler.emit("onAuthenticated");
+                            if (statusElem.parentNode) {
+                                statusElem.parentNode.style.display = "none";
+                            }
+                        }
+                        else {
+                            throw new Error(json.error);
+                        }
+                    }
+                    catch (err) {
+                        if (err && typeof err === "object") {
+                            let error = err;
+                            passwordElem.disabled = false;
+                            passwordElem.classList.toggle("invalid", true);
+                            passwordElem.value = "";
+                            passwordElem.focus();
+                            statusElem.innerText = error.message ? error.message : String(error);
+                            if (statusElem.parentNode) {
+                                statusElem.parentNode.style.display = "initial";
+                            }
+                        }
+                    }
+                };
+                signInElem.addEventListener("click", doLogin);
+                passwordElem.addEventListener("keyup", evt => {
+                    if (evt.key === "Enter") {
+                        doLogin();
+                    }
+                });
+                passwordElem.addEventListener("change", evt => {
+                    if (evt.key === "Enter") {
+                        doLogin();
+                    }
+                });
+                userElem.addEventListener("keyup", evt => {
+                    if (evt.key === "Enter") {
+                        doLogin();
+                    }
+                });
+                userElem.addEventListener("change", evt => {
+                    if (evt.key === "Enter") {
+                        doLogin();
+                    }
+                });
+                passwordElem.focus();
+            }
+        }
+    }
+    attachEvent(eventName, handler) {
+        return this.eventHandler.on(eventName, handler);
+    }
+    detachEvent(eventName, handler) {
+        return this.eventHandler.off(eventName, handler);
+    }
+}
+SessionHandler.messages = {
+    login: "Log in",
+    relog: "Session expired - log in"
+};

package/es/UserSession.d.ts

@@ -0,0 +1,10 @@
+import SessionHandler from "./SessionHandler.js";
+export default class UserSession extends SessionHandler {
+    decimalSeparator: string;
+    formats: any;
+    groupSeparator: string | null;
+    shortDateFormat: string;
+    login: string | null;
+    isDeveloper: boolean;
+    constructor(userData: any);
+}

package/es/UserSession.js

@@ -0,0 +1,13 @@
+import SessionHandler from "./SessionHandler.js";
+export default class UserSession extends SessionHandler {
+    constructor(userData) {
+        super();
+        this.decimalSeparator = ".";
+        this.groupSeparator = null;
+        this.shortDateFormat = "dd.MM.yyyy";
+        this.login = null;
+        this.isDeveloper = false;
+        this.formats = {};
+        Object.assign(this, userData);
+    }
+}

package/es/expose.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Expose a value to a potentially deeply nested global variable
+ * @param name {string | object} Either a dot-separated path to the global variable, or an object to expose the value on
+ * @param value {object | Function | Function[]} The value(s) to expose
+ */
+export default function expose(name: object | string, value: object | Function | Function[]): void;

package/es/expose.js

@@ -0,0 +1,54 @@
+import has from "./has.js";
+import parseFunc from "./parseFunc.js";
+import requireNamespace from "./requireNamespace.js";
+import warn from "./warn.js";
+/**
+ * Expose a value to a potentially deeply nested global variable
+ * @param name {string | object} Either a dot-separated path to the global variable, or an object to expose the value on
+ * @param value {object | Function | Function[]} The value(s) to expose
+ */
+export default function expose(name, value) {
+    if (arguments.length !== 2) {
+        throw new Error("Incorrect number of arguments passed to the expose function!");
+    }
+    if (Array.isArray(value)) {
+        for (let func of value) {
+            const { name: funcName } = parseFunc(func);
+            if (funcName) {
+                expose(name, func); // Expose func on namespace found in pName
+            }
+            else {
+                throw new Error("Unable to detect name of function! Name it, or only supply one function and include name in first parameter.");
+            }
+        }
+    }
+    else {
+        let keyName;
+        let namespace;
+        if (typeof value === "function") {
+            keyName = parseFunc(value).name;
+        }
+        if (typeof name === "string") {
+            let pathParts = name.split(".");
+            if (!keyName) {
+                keyName = pathParts[pathParts.length - 1];
+                pathParts = pathParts.slice(0, pathParts.length - 1);
+            }
+            namespace = requireNamespace(window, pathParts);
+        }
+        else if (keyName &&
+            (typeof name === "object" || typeof name === "function")) {
+            namespace = name;
+        }
+        else {
+            throw new TypeError("Invalid typeof parameter 'name', or unable to parse pValue!");
+        }
+        if (has(namespace, keyName)) {
+            // If class is already defined, warn or show an alert
+            warn([name, keyName].join(".") + " is already defined!");
+        }
+        else {
+            namespace[keyName] = value;
+        }
+    }
+}

package/es/getLocalizedString.d.ts

@@ -0,0 +1,8 @@
+declare global {
+    interface Window {
+        __UNLOCALIZED_STRINGS__: Set<string>;
+        __doNothingWithStrings?: () => Record<string, string>;
+        __getUnlocalizedStrings?: (forCustomRoute?: boolean) => string;
+    }
+}
+export declare function getLocalizedString(string: string): string;

package/es/getLocalizedString.js

@@ -0,0 +1,114 @@
+async function getLocalizedStringAsync(string) {
+    try {
+        let response = await fetch("/api/user/localize", {
+            body: JSON.stringify({ string }),
+            headers: {
+                Accept: "application/json; */*",
+                "Content-Type": "application/json",
+                "X-Requested-With": "XMLHttpRequest",
+            },
+            method: "POST",
+        });
+        if (response.ok) {
+            return (await response.json());
+        }
+    }
+    catch (error) { }
+    return string;
+}
+function afGetLocalizedString(string, wait) {
+    if (af?.article?.i18n !== undefined) {
+        if (!Object.prototype.hasOwnProperty.call(af.article.i18n, string)) {
+            af.article.i18n[string] = string;
+            let promise = getLocalizedStringAsync(string).then((text) => {
+                af.article.i18n[string] = text;
+                return text;
+            });
+            if (wait) {
+                return promise;
+            }
+        }
+        return af.article.i18n[string];
+    }
+    else {
+        return string;
+    }
+}
+const key = "__UNLOCALIZED_STRINGS__";
+const localizeSet = window[key] || new Set();
+if (!window[key]) {
+    window[key] = localizeSet;
+}
+function handleReadyStateChange() {
+    if (document.readyState !== "loading") {
+        addDeveloperUtils();
+        document.removeEventListener("readystatechange", handleReadyStateChange);
+    }
+}
+if (document.readyState !== "loading") {
+    addDeveloperUtils();
+}
+else {
+    document.addEventListener("readystatechange", handleReadyStateChange);
+}
+function isDeveloper() {
+    const { af } = window;
+    return af && af.userSession && af.userSession.isDeveloper;
+}
+function addDeveloperUtils() {
+    if (isDeveloper()) {
+        if (typeof window.__doNothingWithStrings === "function") {
+            const addedStrings = window.__doNothingWithStrings();
+            for (let string of Object.keys(addedStrings)) {
+                localizeSet.add(string);
+            }
+        }
+        if (!window[key]) {
+            window[key] = localizeSet;
+        }
+        if (!window.__getUnlocalizedStrings) {
+            window.__getUnlocalizedStrings = function (forCustomRoute) {
+                const strings = [];
+                for (let string of localizeSet) {
+                    if (string) {
+                        const escaped = string.replace(/'/g, "\\'");
+                        if (forCustomRoute) {
+                            const localized = afGetLocalizedString(string).replaceAll(/'/g, "\\'");
+                            strings.push(`'${escaped}': '${localized}',`);
+                        }
+                        else {
+                            strings.push(`s['${escaped}'] = @Html(@context.AddLocalizableString("${string.replaceAll('"', '\\"')}"));`);
+                        }
+                    }
+                }
+                if (forCustomRoute) {
+                    return `// Localization hack, since it AddLocalizableString doesn't work properly when custom routes is used
+if (af.userSession.uiculture === 'nb-NO') {
+	const strings = {
+		${strings.join("\n\t\t")}
+	};
+	af.article.i18n = af.article.i18n || {};
+	Object.assign(af.article.i18n, strings);
+}`;
+                }
+                return `<script type="text/javascript">
+function __doNothingWithStrings() {
+@{
+	var context = @Appframe.Web.Context.RequestContext.Current;
+}
+let s = {};
+${strings.join("\n")}
+return s;
+}
+</script>`;
+            };
+        }
+    }
+}
+export function getLocalizedString(string) {
+    const localized = afGetLocalizedString(string);
+    if (localized === string && !localizeSet.has(string)) {
+        localizeSet.add(string);
+    }
+    return localized;
+}

package/es/has.d.ts

@@ -0,0 +1 @@
+export default function has(obj: any, key: string | number | symbol): boolean;

package/es/has.js

@@ -0,0 +1,3 @@
+export default function has(obj, key) {
+    return Object.prototype.hasOwnProperty.call(obj, key);
+}

package/es/index.d.ts

@@ -0,0 +1,7 @@
+export { default as mitt } from "mitt";
+export { default as expose } from "./expose.js";
+export { getLocalizedString } from "./getLocalizedString.js";
+export { default as localStorage } from "./localStorage.js";
+export { default as SessionHandler } from "./SessionHandler.js";
+export { default as UserSession } from "./UserSession.js";
+export declare const version: string;

package/es/index.js

@@ -0,0 +1,7 @@
+export { default as mitt } from "mitt";
+export { default as expose } from "./expose.js";
+export { getLocalizedString } from "./getLocalizedString.js";
+export { default as localStorage } from "./localStorage.js";
+export { default as SessionHandler } from "./SessionHandler.js";
+export { default as UserSession } from "./UserSession.js";
+export const version = "1.0.0";

package/es/localStorage.d.ts

@@ -0,0 +1,10 @@
+declare class LocalStorage {
+    isPersisted(): boolean;
+    getLocalStorageKey(key: string, global?: boolean): string;
+    get(key: string, defaultValue: unknown, global?: boolean): any;
+    set(key: string, value: unknown, global?: boolean): void;
+    remove(key: string, global?: boolean): boolean;
+    clear(): void;
+}
+declare const _default: LocalStorage;
+export default _default;

package/es/localStorage.js

@@ -0,0 +1,38 @@
+function getLocalKey(key) {
+    return [af?.article?.id || "", "common", key].join(".");
+}
+class LocalStorage {
+    isPersisted() {
+        return true;
+    }
+    getLocalStorageKey(key, global) {
+        return global ? ["common", key].join(".") : getLocalKey(key);
+    }
+    get(key, defaultValue, global) {
+        const lsKey = this.getLocalStorageKey(key, global);
+        const value = localStorage.getItem(lsKey);
+        return value !== null ? JSON.parse(value) : defaultValue;
+    }
+    set(key, value, global) {
+        localStorage.setItem(this.getLocalStorageKey(key, global), JSON.stringify(value));
+    }
+    remove(key, global) {
+        const lsKey = this.getLocalStorageKey(key, global);
+        if (localStorage.getItem(lsKey) !== null) {
+            localStorage.removeItem(lsKey);
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    clear() {
+        const baseKey = getLocalKey("");
+        for (let key in localStorage) {
+            if (key.slice(0, baseKey.length) === baseKey) {
+                localStorage.removeItem(key);
+            }
+        }
+    }
+}
+export default new LocalStorage();

package/es/parseFunc.d.ts

@@ -0,0 +1,5 @@
+export default function parseFunc(func: Function): {
+    name: string;
+    args: string[];
+    body: string;
+};

package/es/parseFunc.js

@@ -0,0 +1,8 @@
+const funcRegex = /^function(?:\s+([a-zA-Z$_][a-zA-Z0-9$_]*))?\s*\(((?:(?:\s*[a-zA-Z$_][a-zA-Z0-9$_]*)(?:\s*,\s*[a-zA-Z$_][a-zA-Z0-9$_]*)*)?)\s*\)\s*\{((?:.|\n|\r)*)\}$/;
+export default function parseFunc(func) {
+    var match = func.toString().match(funcRegex);
+    if (match === null) {
+        throw new TypeError("Unable to parse function!");
+    }
+    return { name: match[1], args: match[2].split(","), body: match[3] };
+}

package/es/requireNamespace.d.ts

@@ -0,0 +1 @@
+export default function requireNamespace(root: any, namespace: string | Array<string>): any;

package/es/requireNamespace.js

@@ -0,0 +1,23 @@
+import Namespace from "./Namespace.js";
+export default function requireNamespace(root, namespace) {
+    if (typeof root === "object") {
+        if (typeof namespace === "string") {
+            let path = namespace.split(".");
+            return requireNamespace(root, path);
+        }
+        else if (Array.isArray(namespace)) {
+            let current = root;
+            for (let i = 0; i < namespace.length; i++) {
+                current = current[namespace[i]] =
+                    current[namespace[i]] || new Namespace();
+            }
+            return current;
+        }
+        else {
+            throw new TypeError("Invalid type of parameter 'namespace'");
+        }
+    }
+    else {
+        throw new TypeError("Invalid type of parameter 'root'");
+    }
+}

package/es/settings.d.ts

@@ -0,0 +1,2 @@
+export declare function getSettings<T>(setting: string, article?: string): T | null;
+export declare function saveSettings<T>(setting: string, value: T | null, article?: string): void;

package/es/settings.js

@@ -0,0 +1,27 @@
+function getKey(article) {
+    const articleKey = article || af.article.id;
+    return `${articleKey}.${af.userSession.login}`;
+}
+export function getSettings(setting, article) {
+    if (!af?.userSession)
+        return null;
+    const key = getKey(article);
+    const settings = JSON.parse(localStorage.getItem(key) || "{}");
+    if (setting) {
+        return settings[setting] || null;
+    }
+    return settings;
+}
+export function saveSettings(setting, value, article) {
+    if (!af?.userSession)
+        return;
+    const key = getKey(article);
+    let userSettings = JSON.parse(localStorage.getItem(key) || "{}");
+    if (typeof value !== "undefined") {
+        userSettings[setting] = value;
+    }
+    else {
+        userSettings = setting;
+    }
+    localStorage.setItem(key, JSON.stringify(userSettings));
+}

package/es/warn.d.ts

@@ -0,0 +1 @@
+export default function warn(message: string, fallbackToAlert?: boolean): void;

package/es/warn.js

@@ -0,0 +1,12 @@
+/* eslint-disable no-console */
+export default function warn(message, fallbackToAlert) {
+    if (console && typeof console.warn === "function") {
+        console.warn(message);
+    }
+    else if (console && typeof console.log === "function") {
+        console.log(message);
+    }
+    else if (fallbackToAlert) {
+        alert(message);
+    }
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@olenbetong/appframe-core",
+  "version": "1.0.0",
+  "description": "Javascript libraries to utilize the Appframe framework",
+  "type": "module",
+  "main": "./es/index.js",
+  "exports": {
+    ".": {
+      "default": "./es/index.js"
+    }
+  },
+  "types": "./es/index.d.ts",
+  "scripts": {
+    "prepack": "npm run build",
+    "build": "npm run build:esbuild && npm run build:tsc",
+    "build:esbuild": "node ../../shared/esbuild.js",
+    "build:tsc": " rm -rf ./es && tsc && node ./scripts/replace-version.js"
+  },
+  "author": "Bjørnar Vister Hansen <bvh@olenbetong.no>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/olenbetong/ui-kit.git"
+  },
+  "license": "MIT",
+  "buildConfig": {
+    "entries": [
+      {
+        "libraryName": "af.common"
+      }
+    ]
+  },
+  "dependencies": {
+    "mitt": "^3.0.0"
+  },
+  "devDependencies": {
+    "chalk": "^5.0.1"
+  }
+}

package/scripts/import-json.js

@@ -0,0 +1,5 @@
+import { readFile } from "node:fs/promises";
+
+export default async function importJson(url) {
+  return JSON.parse(await readFile(new URL(url, import.meta.url)));
+}

package/scripts/replace-version.js

@@ -0,0 +1,37 @@
+import chalk from "chalk";
+import fs from "node:fs/promises";
+import { resolve } from "node:path";
+import importJson from "./import-json.js";
+
+async function* getFiles(dir) {
+  const dirents = await fs.readdir(dir, { withFileTypes: true });
+  for (const dirent of dirents) {
+    const res = resolve(dir, dirent.name);
+    if (dirent.isDirectory()) {
+      yield* getFiles(res);
+    } else {
+      yield res;
+    }
+  }
+}
+
+try {
+  let packageConfig = await importJson("../package.json");
+  for await (let file of getFiles("./es")) {
+    if (file.endsWith(".js")) {
+      let fileContent = await fs.readFile(file, "utf-8");
+      let result = fileContent
+        .replace("__VERSION__", `"${packageConfig.version}"`)
+        .replace("process.env.NODE_ENV", '"production"');
+      if (result !== fileContent) {
+        await fs.writeFile(file, result, "utf-8");
+        console.log(file.substring(file.indexOf("/es/")));
+      } else {
+        console.log(chalk.dim(file.substring(file.indexOf("/es/"))));
+      }
+    }
+  }
+} catch (error) {
+  console.error(error.message);
+  process.exit(1);
+}

package/src/Namespace.ts

@@ -0,0 +1,4 @@
+function Namespace() {}
+Namespace.prototype = Object.create(null);
+
+export default Namespace;