trilium/src/public/app/widgets/basic_widget.js

import Component from "../components/component.js";
import { t } from "../services/i18n.js";
import toastService from "../services/toast.js";

/**
 * This is the base widget for all other widgets.
 *
 * For information on using widgets, see the tutorial {@tutorial widget_basics}.
 */
class BasicWidget extends Component {
    constructor() {
        super();

        this.attrs = {
            style: ''
        };
        this.classes = [];

        this.children = [];
        this.childPositionCounter = 10;
    }

    child(...components) {
        if (!components) {
            return this;
        }

        super.child(...components);

        for (const component of components) {
            if (component.position === undefined) {
                component.position = this.childPositionCounter;
                this.childPositionCounter += 10;
            }
        }

        this.children.sort((a, b) => a.position - b.position);

        return this;
    }

    id(id) {
        this.attrs.id = id;
        return this;
    }

    class(className) {
        this.classes.push(className);
        return this;
    }

    css(name, value) {
        this.attrs.style += `${name}: ${value};`;
        return this;
    }

    contentSized() {
        this.css("contain", "none");

        return this;
    }

    collapsible() {
        this.css('min-height', '0');
        this.css('min-width', '0');
        return this;
    }

    filling() {
        this.css('flex-grow', '1');
        return this;
    }

    /**
     * Accepts a string of CSS to add with the widget.
     * @param {string} block
     * @returns {this} for chaining
     */
    cssBlock(block) {
        this.cssEl = block;
        return this;
    }

    render() {
        try {
            this.doRender();
        } catch (e) {
            toastService.showPersistent({
                title: t("toast.widget-error.title"),
                icon: "alert",
                message: t("toast.widget-error.message", {
                    title: this.widgetTitle,
                    message: e.message
                })
            });
        }

        this.$widget.attr('data-component-id', this.componentId);
        this.$widget
            .addClass('component')
            .prop('component', this);

        if (!this.isEnabled()) {
            this.toggleInt(false);
        }

        if (this.cssEl) {
            const css = this.cssEl.trim().startsWith('<style>') ? this.cssEl : `<style>${this.cssEl}</style>`;

            this.$widget.append(css);
        }

        for (const key in this.attrs) {
            if (key === 'style') {
                if (this.attrs[key]) {
                    let style = this.$widget.attr('style');
                    style = style ? `${style}; ${this.attrs[key]}` : this.attrs[key];

                    this.$widget.attr(key, style);
                }
            }
            else {
                this.$widget.attr(key, this.attrs[key]);
            }
        }

        for (const className of this.classes) {
            this.$widget.addClass(className);
        }

        return this.$widget;
    }

    /**
     * Indicates if the widget is enabled. Widgets are enabled by default. Generally setting this to `false` will cause the widget not to be displayed, however it will still be available on the DOM but hidden.
     * @returns 
     */
    isEnabled() {
        return true;
    }

    /**
     * Method used for rendering the widget.
     *
     * Your class should override this method.
     * The method is expected to create a this.$widget containing jQuery object
     */
    doRender() {}

    toggleInt(show) {
        this.$widget.toggleClass('hidden-int', !show);
    }

    isHiddenInt() {
        return this.$widget.hasClass('hidden-int');
    }

    toggleExt(show) {
        this.$widget.toggleClass('hidden-ext', !show);
    }

    isHiddenExt() {
        return this.$widget.hasClass('hidden-ext');
    }

    canBeShown() {
        return !this.isHiddenInt() && !this.isHiddenExt();
    }

    isVisible() {
        return this.$widget.is(":visible");
    }

    getPosition() {
        return this.position;
    }

    remove() {
        if (this.$widget) {
            this.$widget.remove();
        }
    }

    getClosestNtxId() {
        if (this.$widget) {
            return this.$widget.closest("[data-ntx-id]").attr("data-ntx-id");
        }
        else {
            return null;
        }
    }

    cleanup() {}
}

export default BasicWidget;