@vandenberghinc/volt 1.1.5 → 1.1.7

package/frontend/src/modules/cookies.ts

@@ -180,3 +180,4 @@ Cookies._init();
 
 // Export.
 export { Cookies };
+export { Cookies as cookies }; // also export as lowercase for compatibility.

package/frontend/src/modules/events.ts

@@ -94,3 +94,4 @@ window.onload = () => {
 
 // Export.
 export { Events };
+export { Events as events }; // also export as lowercase for compatibility.

package/frontend/src/modules/google.ts

@@ -58,3 +58,4 @@ Google._initialize();
 
 // Exports.
 export { Google };
+export { Google as google }; // also export as lowercase for compatibility.

package/frontend/src/modules/meta.ts

@@ -56,4 +56,5 @@ export const Meta = {
 			set_content_og("twitter:image", description);
 		}
 	},
-}
+}
+export { Meta as meta }; // also export as lowercase for compatibility.

package/frontend/src/modules/mutex.ts

@@ -9,7 +9,7 @@ import { Elements } from "../elements/module.js";
 // ---------------------------------------------------------
 // Mutex class.
 
-export class MutexType {
+export class Mutex {
     locked: boolean;
     queue: Array<() => void>;
 
@@ -54,6 +54,4 @@ export class MutexType {
             this.locked = false;
         }
     }
-}
-
-export const Mutex = Elements.wrapper(MutexType);
+}

package/frontend/src/modules/paddle.ts

@@ -20,7 +20,7 @@ import { Spacer } from "../ui/spacer"
 import { Link } from "../ui/link"
 import { CheckBox } from "../ui/checkbox"
 import { Form } from "../ui/form"
-import { Popup, PopupElement } from "../ui/popup"
+import { YesNoPopupElement, YesNoPopup } from "../ui/popup"
 
 // Declare global variables or external libraries if necessary.
 // @todo import paddle here not using scripts
@@ -412,7 +412,7 @@ const Payments = {
             if (this._sign_in_redirect != null && !User.is_authenticated()) {
                 Utils.redirect(this._sign_in_redirect);
             }
-            const response = await Utils.request({
+            const response = await Utils.request_v1({
                 method: "POST",
                 url: "/volt/payments/init",
                 data: {
@@ -1494,7 +1494,7 @@ const Payments = {
                                             .font_weight("bold")
                                             .on_click(() => {
                                                 document.body.appendChild(
-                                                    Popup({
+                                                    YesNoPopup({
                                                         title: "Request Refund",
                                                         text: `You are about to request a refund for payment <span style='border-radius: 7px; background: ${style.bg_1}; padding: 1px 4px; font-size: 0.9em;'>${payment.id}</span>, do you wish to proceed?`,
                                                         no: "No",
@@ -1521,7 +1521,7 @@ const Payments = {
                                                         .color(style.fg_1)
                                                         .border_bottom("4px solid #E8454E")
                                                         // .leading()
-                                                        .parent<PopupElement>()
+                                                        .parent<YesNoPopupElement>()
                                                     .title
                                                         .color(style.fg)
                                                         // .width("fit-content")
@@ -1533,13 +1533,13 @@ const Payments = {
                                                         // .ellipsis_overflow(true)
                                                         // .color(style.fg_1)
                                                         .center()
-                                                        .parent<PopupElement>()
+                                                        .parent<YesNoPopupElement>()
                                                     .text
                                                         .color(style.fg_1)
                                                         .font_size(style.font_size)
                                                         .margin_left(10)
                                                         .center()
-                                                        .parent<PopupElement>()
+                                                        .parent<YesNoPopupElement>()
                                                     .image
                                                         .padding(10)
                                                         .mask_color(style.bg)
@@ -1547,7 +1547,7 @@ const Payments = {
                                                         .background("#E8454E")
                                                         .frame(40, 40)
                                                         .box_shadow('0 0 0 4px #E8454E50')
-                                                        .parent<PopupElement>()
+                                                        .parent<YesNoPopupElement>()
                                                     .no_button
                                                         .padding(10, 0)
                                                         .font_size(style.font_size)
@@ -1556,7 +1556,7 @@ const Payments = {
                                                         .border(1, style.divider_bg)
                                                         .hover_brightness(...style.button.hover_brightness as [any, any])
                                                         .box_shadow('0px 0px 5px #00000030')
-                                                        .parent<PopupElement>()
+                                                        .parent<YesNoPopupElement>()
                                                     .yes_button
                                                         .padding(10, 0)
                                                         .font_size(style.font_size)
@@ -1565,7 +1565,7 @@ const Payments = {
                                                         .border(1, style.divider_bg)
                                                         .hover_brightness(...style.button.hover_brightness as [any, any])
                                                         .box_shadow('0px 0px 5px #00000030')
-                                                        .parent<PopupElement>()
+                                                        .parent<YesNoPopupElement>()
                                                 );
                                             }),
                                         !container.is_refunding ? null : RingLoader()
@@ -2518,7 +2518,7 @@ const Payments = {
             if (this._products !== undefined) {
                 return resolve(this._products);
             }
-            Utils.request({
+            Utils.request_v1({
                 method: "GET",
                 url: "/volt/payments/products",
             })
@@ -2587,7 +2587,7 @@ const Payments = {
      *   @desc: The id of the payment.
      */
     get_payment: async function(id: string): Promise<any> {
-        return Utils.request({
+        return Utils.request_v1({
             method: "GET",
             url: "/volt/payments/payment",
             data: {
@@ -2630,7 +2630,7 @@ const Payments = {
         limit = null,
         status = null,
     } = {}): Promise<any> {
-        return Utils.request({
+        return Utils.request_v1({
             method: "GET",
             url: "/volt/payments/payments",
             data: {
@@ -2661,7 +2661,7 @@ const Payments = {
         days = 30,
         limit = null,
     } = {}): Promise<any> {
-        return Utils.request({
+        return Utils.request_v1({
             method: "GET",
             url: "/volt/payments/payments/refundable",
             data: {
@@ -2691,7 +2691,7 @@ const Payments = {
         days = 30,
         limit = null,
     } = {}): Promise<any> {
-        return Utils.request({
+        return Utils.request_v1({
             method: "GET",
             url: "/volt/payments/payments/refunded",
             data: {
@@ -2721,7 +2721,7 @@ const Payments = {
         days = null,
         limit = null,
     } = {}): Promise<any> {
-        return Utils.request({
+        return Utils.request_v1({
             method: "GET",
             url: "/volt/payments/payments/refunding",
             data: {
@@ -2755,7 +2755,7 @@ const Payments = {
      *   @desc: The refund reason.
      */
     create_refund: async function(payment: number | string, line_items: any[] | null = null, reason: string = "refund"): Promise<any> {
-        return Utils.request({
+        return Utils.request_v1({
             method: "POST",
             url: "/volt/payments/refund",
             data: {
@@ -2781,7 +2781,7 @@ const Payments = {
      *   @desc: The product id.
      */
     cancel_subscription: async function(product: string): Promise<any> {
-        return Utils.request({
+        return Utils.request_v1({
             method: "DELETE",
             url: "/volt/payments/subscription",
             data: {
@@ -2804,7 +2804,7 @@ const Payments = {
      *   @desc: The product id.
      */
     is_subscribed: async function(product: string): Promise<any> {
-        return Utils.request({
+        return Utils.request_v1({
             method: "GET",
             url: "/volt/payments/subscribed",
             data: {
@@ -2822,7 +2822,7 @@ const Payments = {
      * @desc: Get the active subscriptions of the authenticated user.
      */
     get_active_subscriptions: async function(): Promise<any> {
-        return Utils.request({
+        return Utils.request_v1({
             method: "GET",
             url: "/volt/payments/active_subscriptions",
         });
@@ -2987,4 +2987,5 @@ const Payments = {
 };
 
 // Exports.
-export { Payments };
+export { Payments };
+export { Payments as payments }; // also export as lowercase for compatibility.

package/frontend/src/modules/scheme.ts

@@ -8,8 +8,6 @@
  *  And beware that `vlib` will be replaced with `vweb`.
  */
 
-import { Colors } from "./colors.js"
-
 // Types for scheme validation
 type SchemeType = string | Function | (string | Function)[];
 
@@ -496,7 +494,9 @@ export const Scheme = {
                 if (last !== -1) {
                     stack = stack.slice(last);
                 }
-                console.warn(`${Colors.end}[Scheme.verify] ${Colors.yellow}Warning${Colors.end}: Attribute "callback" is deprecated and replaced by attribute "verify" and will be removed in future versions.\n${stack.join('\n')}`);
+                const color_end = "\u001b[0m";
+                const color_yellow = "\u001b[33m";
+                console.warn(`${color_end}[Scheme.verify] ${color_yellow}Warning${color_end}: Attribute "callback" is deprecated and replaced by attribute "verify" and will be removed in future versions.\n${stack.join('\n')}`);
 
                 // Still proceed as normal.
                 const err = scheme_item.callback(object[key], object, key);
@@ -725,6 +725,7 @@ export const Scheme = {
         return err;   
     }
 } as const;
+export { Scheme as SchemeType }; // also export as lowercase for compatibility.
 
 // Add type for extended Error with json property
 declare global {

package/frontend/src/modules/statics.ts

@@ -44,4 +44,5 @@ export const Statics = {
         }
         return this.aspect_ratios[endpoint];
     }
-}
+}
+export { Statics as statics }; // also export as lowercase for compatibility.

package/frontend/src/modules/support.ts

@@ -85,7 +85,7 @@ const Support = {
         detailed?: string;
         attachments?: { [fileName: string]: any };
     } = {}) {
-        return Utils.request({
+        return Utils.request_v1({
             method: "POST",
             url: "/volt/support/submit",
             data: data,
@@ -107,7 +107,7 @@ const Support = {
      *			@type: string
      */
     get_pin() {
-        return Utils.request({
+        return Utils.request_v1({
             method: "GET",
             url: "/volt/support/pin",
         });
@@ -116,3 +116,4 @@ const Support = {
 
 // Export.
 export { Support };
+export { Support as support }; // also export as lowercase for compatibility.

package/frontend/src/modules/theme.ts

@@ -0,0 +1,413 @@
+/*
+ * Author: Daan van den Bergh
+ * Copyright: © 2022 - 2024 Daan van den Bergh.
+ */
+
+// Imports.
+import { Color } from "./color.js"
+import { Themes as ThemesModule } from "./themes.js"
+
+// Types.
+type ThemeAttributeName = string;
+type ThemeId = "dark" | "light";
+const ThemeIdList = ["dark", "light"] as const;
+type ThemesOptions<ThemeOptions extends {}> = { dark: ThemeOptions, light: ThemeOptions };
+type OnActivateCallback<ThemeOptions extends {}> = (themes_class: Theme<ThemeOptions>, active_id: ThemeId) => void;
+
+// Themes class.
+/* 	@docs:
+    @nav: Frontend
+    @chapter: Themes
+    @note: The `ThemesClass` is also initializable under function `Themes`.
+    @desc:
+        A themes class to efficiently style the site using themes.
+
+        The constructor arguments must be a theme style per theme name. Every theme variable should exist in all themes or it may cause undefined behaviour. The theme name that is passed first will be the active theme by default.
+        ```
+        Theme("main-theme", {
+            light: {
+                text_fg: "#000000",
+            },
+            dark: {
+                text_fg: "#FFFFFF",
+            },
+        })
+        ```
+
+        When theme attributes are retrieved, by default they will be the active theme's attribute as a css variable. So this can be passed to an element.
+        However, some element functions do not accept css variables, in this case the `value()` function can be used to retrieve the raw value. Do not forget to apply an `on_theme_update()` callback on the elements where you use this.
+ */
+export class Theme<ThemeOptions extends {}> {
+
+    // helper: union of all keys across all themes
+
+    // Attributes.
+    public active_id!: ThemeId;
+    public active!: ThemeOptions;
+    public _attrs: string[];
+    public _css_vars: Record<string, string | String>;
+    public _id: string;
+    public _on_activate_callback?: OnActivateCallback<ThemeOptions>;
+
+    constructor(
+        id: string,
+        themes: ThemesOptions<ThemeOptions>,
+    ) {
+
+        // Attributes.
+        this._attrs = [];
+        this._css_vars = {};
+        this._id = id;
+
+        // Assign themes.
+        Object.keys(themes).iterate((theme) => {
+
+            // Initialize.
+            const theme_style = themes[theme] as Record<string, any>;
+            this[theme] = theme_style;
+
+            // Activate first theme.
+            if (this.active_id === undefined) {
+                this.active_id = theme as ThemeId;
+                this.active = theme_style as any;
+                Object.keys(this.active as any).iterate((id) => {
+                    document.documentElement.style.setProperty(`--${this._id}_${id}`, (this.active as any)[id] ?? "");
+                });
+            }
+
+            // Initialize attr funcs.
+            Object.keys(theme_style).iterate((id) => {
+                this._add_attr(id, theme as ThemeId);
+            })
+        })
+
+        // Ensure type.
+        if (this.active_id == null || this.active == null) {
+            throw new Error("No themes were specified in parameter \"themes\".");
+        }
+    }
+
+    /**
+     * Initialize a specific theme.
+     * @note This function should be called after the constructor to ensure the most recent theme is activated, argument "id" can be left undefined.
+     */
+    initialize(id?: ThemeId): this {
+        if (id == null) {
+            id = (localStorage.getItem(this._id) ?? undefined) as any;
+        }
+        if (id != null && ThemeIdList.includes(id as any)) {
+            this.activate(id);
+        }
+        return this;
+    }
+
+    // ---------------------------------------------------------------------
+    // Theme selection methods.
+
+    /** Get full active theme id. */
+    get id(): string {
+        return `${this._id}.${String(this.active_id)}`
+    }
+
+    // Get cached active subtheme id.
+    get_active_id_cached(): string {
+        return localStorage.getItem(this._id) ?? "";
+    }
+
+    // Activate a theme.
+    activate(id: ThemeId, apply_theme_update: boolean = true): this {
+        if (ThemeIdList.includes(id) === false || (this as any)[id] === undefined) {
+            throw Error(`Theme "${id as string}" does not exist.`);
+        }
+        this.active_id = id;
+        this.active = (this as any)[id];
+        Object.keys(this.active as any).iterate((id) => {
+            document.documentElement.style.setProperty(`--${this._id}_${id}`, (this.active as any)[id] ?? "");
+        });
+        if (this._on_activate_callback != null) {
+            this._on_activate_callback(this, this.active_id);
+        }
+        if (apply_theme_update) {
+            ThemesModule.apply_theme_update();
+        }
+        localStorage.setItem(this._id, String(this.active_id));
+        return this;
+    }
+
+    // Set an on activate callback.
+    on_activate(): OnActivateCallback<ThemeOptions> | undefined;
+    on_activate(callback: OnActivateCallback<ThemeOptions>): this;
+    on_activate(callback?: OnActivateCallback<ThemeOptions>): this | OnActivateCallback<ThemeOptions> | undefined {
+        if (callback == null) { return this._on_activate_callback; }
+        this._on_activate_callback = callback;
+        return this;
+    }
+
+    // Toggle themes.
+    toggle(apply_theme_update: boolean = true): this {
+        const other: ThemeId = this.active_id === "dark" ? "light" : "dark";
+        this.activate(other, apply_theme_update);
+        return this;
+    }
+
+    // ---------------------------------------------------------------------
+    // Adding values.
+
+    // Add a new attribute.
+    _add_attr(id: string, theme?: ThemeId): void {
+        if (theme == null) {
+            this._css_vars[id] = `var(--${this._id}_${id})`;
+        } else {
+            const theme_style = (this as any)[theme];
+            if (
+                typeof theme_style[id] === "string" &&
+                (
+                    theme_style[id].indexOf("linear-gradient") !== -1 ||
+                    theme_style[id].indexOf("radial-gradient") !== -1
+                )
+            ) {
+                theme_style[id] = new String(theme_style[id]);
+                theme_style[id]._is_gradient = true;
+                this._css_vars[id] = new String(`var(--${this._id}_${id})`);
+                (this._css_vars[id] as any)._is_gradient = true;
+            } else {
+                this._css_vars[id] = `var(--${this._id}_${id})`;
+            }
+        }
+        Object.defineProperty(this, id, {
+            get: function () {
+                return this._css_vars[id];
+            },
+            set: function (v: any) {
+                // only for support this does not work however.
+                // document.documentElement.style.setProperty(`--${this._id}_${id}`, (this.active as any)[id] ?? "");
+                // return this;
+            },
+            enumerable: true,
+            configurable: true,
+        });
+        this._attrs.append(id);
+    }
+
+    // Assign a new value.
+    set(theme: ThemeId, key: string, value: any): this {
+
+        // Update theme.
+        const theme_style = (this as any)[theme];
+        if (typeof value === "string" && (value.indexOf("linear-gradient") !== -1 || value.indexOf("radial-gradient") !== -1)) {
+            theme_style[key] = new String(value);
+            theme_style[key]._is_gradient = true;
+            this._css_vars[key] = new String(`var(--${this._id}_${key})`);
+            (this._css_vars[key] as any)._is_gradient = true;
+        } else {
+            theme_style[key] = value;
+            this._css_vars[key] = `var(--${this._id}_${key})`;
+        }
+
+        // Set property.
+        if (this.active_id === theme) {
+            document.documentElement.style.setProperty(`--${this._id}_${key}`, (this.active as any)[key] ?? "");
+        }
+
+        // Response.
+        return this;
+    }
+
+    get raw(): ThemeOptions {
+        return this.active;
+    }
+
+    // Get raw value.
+    value(id: ThemeAttributeName): any {
+        if (this.active === undefined) { return; }
+        return this.active![id];
+    }
+
+    // ---------------------------------------------------------------------
+    // Color manipulation methods.
+
+    // Create a new color for each theme.
+    create<T = string>(id: string, create_theme_value: (theme_id: ThemeId, theme: ThemeOptions) => T): void {
+
+        // Already created.
+        if (this._css_vars[id]) {
+            throw new Error(`Color "${id}" already exists.`);
+        }
+
+        // Iterate.
+        let index = 0;
+        for (const theme_id of ThemeIdList) {
+            const theme = (this as any)[theme_id];
+            const value = create_theme_value(theme_id, theme);
+            theme[id] = value;
+
+            // Add attribute to document on first call.
+            if (index === 0) {
+                this._add_attr(id);
+            }
+
+            // Set property.
+            if (this.active_id === theme_id) {
+                document.documentElement.style.setProperty(`--${this._id}_${id}`, theme[id]);
+            }
+
+            // Incr index
+            ++index;
+        }
+    }
+
+    /**
+     * Auto darken lighten a color from the theme
+     * Safe to call multiple times, caching is implemented.
+     * 
+     * @warning The input color must be a hex / rgb(a) string.
+     * @param theme_attr The name of the original theme color.
+     * @param percent Percentage between 0. and 1.0.
+     */
+    auto_darken_lighten(
+        theme_attr: ThemeAttributeName,
+        percent: number = 0.5,
+        reversed: boolean = false,
+    ) {
+        let full_id = `${String(theme_attr)}_adl_${percent}`;
+        full_id = full_id.replaceAll(".", "_");
+        if (this._css_vars[full_id]) {
+            return this._css_vars[full_id] as string;
+        }
+        const process = reversed === true ? (x => x < 0.5) : (x => x > 0.5)
+        this.create(full_id, (theme_id, theme) => {
+            if (!theme[theme_attr]) {
+                throw new Error(`Theme attribute "${String(theme_attr)}" does not exist.`);
+            }
+            return new Color(theme[theme_attr]).auto_darken_lighten(percent, process).str()
+        });
+        return this._css_vars[full_id] as string;
+    }
+
+    // Opacity.
+    // Opacity must be a number `0.0` till `1.0`, and may also be an object with opacity pet theme `{dark: 0.2, light: 0.35}`.
+    opacity(theme_attr: ThemeAttributeName, opacity: number = 1.0): string {
+
+        // Create full id.
+        let full_id;
+        if (typeof opacity === "number") {
+            full_id = `${String(theme_attr)}_opac_${opacity}`;
+        } else {
+            full_id = `${String(theme_attr)}_opac_${Object.values(opacity).join("_")}`;
+        }
+        full_id = full_id.replaceAll(".", "_");
+
+        // Already created.
+        if (this._css_vars[full_id]) {
+            return this._css_vars[full_id] as string;
+        }
+
+        // Iterate.
+        let index = 0;
+        for (const theme_id of ThemeIdList) {
+            const theme = this[theme_id];
+
+            // Checks.
+            if (theme[theme_attr] == null) {
+                console.error(new Error(`Theme attribute "${String(theme_attr)}" does not exist.`));
+                return "";
+            }
+            if (theme[theme_attr]._is_gradient) {
+                console.error(new Error(`Unable to set the opacity on gradient color "${String(theme_attr)}".`));
+                return "";
+            }
+
+            // Create new color.
+            let theme_opac = opacity;
+            if (typeof theme_opac === "object") {
+                theme_opac = theme_opac[theme_attr];
+                if (theme_opac === undefined) {
+                    console.error(new Error(`Unable to find the opacity on for theme id "${theme_attr}".`));
+                }
+            }
+            theme[full_id] = new Color(theme[theme_attr]).opacity(theme_opac).rgb();
+
+            // Add css var.
+            if (index === 0) {
+                this._add_attr(full_id);
+            }
+
+            // Set property.
+            if (this.active_id === theme_id) {
+                document.documentElement.style.setProperty(`--${this._id}_${full_id}`, theme[full_id]);
+            }
+
+            // Incr index
+            ++index;
+        }
+
+        return this._css_vars[full_id] as string;
+    }
+
+    // ---------------------------------------------------------------------
+    // Font size manipulation methods.
+
+    /**
+     * Create a new value by multiplying a numeric attribute.
+     * @warning argument `id` should be the name of a numeric theme attribute.
+     * @param theme_attr The name of a numeric attribute
+     * @param x The number by which to multiply the attribute, `attribute * x`.
+     */
+    multiply(theme_attr: ThemeAttributeName, x: number = 1.0): string {
+        let full_id = `${String(theme_attr)}_fsr_${x}`;
+        full_id = full_id.replaceAll(".", "_");
+        if (this._css_vars[full_id]) {
+            return this._css_vars[full_id] as string;
+        }
+        const process = (x => x < 0.5)
+        this.create<number>(full_id, (_, theme) => {
+            if (!theme[theme_attr]) {
+                throw new Error(`Theme attribute "${String(theme_attr)}" does not exist.`);
+            }
+            if (typeof theme[theme_attr] !== "number") {
+                throw new Error(`Theme attribute "${String(theme_attr)}" is not a number.`);
+            }
+            return theme[theme_attr] * x;
+        });
+        return this._css_vars[full_id] as string;
+    }
+
+    // ---------------------------------------------------------------------
+    // Animation methods.
+
+    /** Function to disable all transition attributes on all elements. */
+    disable_transitions(): this {
+        // const style = document.createElement('style');
+        //     style.id = '__libris_thme_disable_transitions__';
+        //     style.innerHTML = `
+        //     * { transition: none !important; }
+        //     *::after { transition: none !important; }
+        //     *::before { transition: none !important; }
+        // `.dedent();
+        // document.head.appendChild(style);
+
+        document.body.classList.add("notransition");
+
+        // Force a reflow to apply the new styles immediately
+        // document.head.getBoundingClientRect();
+        void document.body.offsetHeight;
+
+        return this;
+    }
+
+    /** Function to re-enable all transition attributes on all elements. */
+    enable_transitions(delay = 0): this {
+        if (delay > 0) {
+            setTimeout(() => this.enable_transitions(0), delay);
+            return this;
+        }
+        document.body.classList.remove("notransition");
+        // const style = document.getElementById('__libris_thme_disable_transitions__');
+        // if (style) {
+        //     style.remove();
+        // }
+        document.head.getBoundingClientRect();
+        return this;
+    }
+}
+export type ExtendTheme<ThemeOptions extends {}> = Theme<ThemeOptions> & ThemeOptions;