@webiny/app-admin 0.0.0-unstable.a4637c5ce6 → 0.0.0-unstable.a4f3e4ea8b

package/components/RichTextEditor/tools/image/tunes.js

@@ -1,103 +0,0 @@
-import { make } from "./ui";
-import svgs from "./svgs";
-/**
- * Working with Block Tunes
- */
-export default class Tunes {
-  /**
-   * @param {object} tune - image tool Tunes managers
-   * @param {object} tune.api - Editor API
-   * @param {object} tune.actions - list of user defined tunes
-   * @param {Function} tune.onChange - tune toggling callback
-   */
-  constructor({
-    api,
-    actions,
-    onChange
-  }) {
-    this.api = api;
-    this.actions = actions;
-    this.onChange = onChange;
-    this.buttons = [];
-  }
-
-  /**
-   * Available Image tunes
-   *
-   * @returns {{name: string, icon: string, title: string}[]}
-   */
-  static get tunes() {
-    return [{
-      name: "stretched",
-      icon: svgs.stretched,
-      title: "Stretch image"
-    }];
-  }
-
-  /**
-   * Styles
-   *
-   * @returns {{wrapper: string, buttonBase: *, button: string, buttonActive: *}}
-   */
-  get CSS() {
-    return {
-      wrapper: "",
-      buttonBase: this.api.styles.settingsButton,
-      button: "image-tool__tune",
-      buttonActive: this.api.styles.settingsButtonActive
-    };
-  }
-
-  /**
-   * Makes buttons with tunes: stretch image
-   *
-   * @param {ImageToolData} toolData - generate Elements of tunes
-   * @returns {Element}
-   */
-  render(toolData) {
-    const wrapper = make("div", this.CSS.wrapper);
-    this.buttons = [];
-    const tunes = Tunes.tunes.concat(this.actions);
-    tunes.forEach(tune => {
-      const title = this.api.i18n.t(tune.title);
-      const el = make("div", [this.CSS.buttonBase, this.CSS.button], {
-        innerHTML: tune.icon,
-        title
-      });
-      el.addEventListener("click", () => {
-        this.tuneClicked(tune.name, tune.action);
-      });
-      el.dataset["tune"] = tune.name;
-      const name = tune.name;
-      el.classList.toggle(this.CSS.buttonActive, !!toolData[name]);
-      this.buttons.push(el);
-      this.api.tooltip.onHover(el, title, {
-        placement: "top"
-      });
-      wrapper.appendChild(el);
-    });
-    return wrapper;
-  }
-
-  /**
-   * Clicks to one of the tunes
-   *
-   * @param {string} tuneName - clicked tune name
-   * @param {Function} customFunction - function to execute on click
-   */
-  tuneClicked(tuneName, customFunction) {
-    if (typeof customFunction === "function") {
-      if (!customFunction(tuneName)) {
-        return false;
-      }
-    }
-    const button = this.buttons.find(el => el.dataset["tune"] === tuneName);
-    if (button) {
-      button.classList.toggle(this.CSS.buttonActive, !button.classList.contains(this.CSS.buttonActive));
-    }
-    this.onChange(tuneName);
-    return true;
-  }
-}
-
-//# sourceMappingURL=tunes.js.map

package/components/RichTextEditor/tools/image/tunes.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["make","svgs","Tunes","constructor","api","actions","onChange","buttons","tunes","name","icon","stretched","title","CSS","wrapper","buttonBase","styles","settingsButton","button","buttonActive","settingsButtonActive","render","toolData","concat","forEach","tune","i18n","t","el","innerHTML","addEventListener","tuneClicked","action","dataset","classList","toggle","push","tooltip","onHover","placement","appendChild","tuneName","customFunction","find","contains"],"sources":["tunes.ts"],"sourcesContent":["import type { API } from \"@editorjs/editorjs\";\nimport { make } from \"./ui\";\nimport svgs from \"./svgs\";\nimport type { ImageToolData, Tune, TuneOnChangeCallable } from \"./types\";\n\ninterface TunesParams {\n    api: API;\n    actions: Tune[];\n    onChange: TuneOnChangeCallable;\n}\n/**\n * Working with Block Tunes\n */\nexport default class Tunes {\n    private api: API;\n    private readonly actions: Tune[];\n    private readonly onChange: TuneOnChangeCallable;\n    private buttons: Array<HTMLElement>;\n    /**\n     * @param {object} tune - image tool Tunes managers\n     * @param {object} tune.api - Editor API\n     * @param {object} tune.actions - list of user defined tunes\n     * @param {Function} tune.onChange - tune toggling callback\n     */\n    constructor({ api, actions, onChange }: TunesParams) {\n        this.api = api;\n        this.actions = actions;\n        this.onChange = onChange;\n        this.buttons = [];\n    }\n\n    /**\n     * Available Image tunes\n     *\n     * @returns {{name: string, icon: string, title: string}[]}\n     */\n    static get tunes(): Tune[] {\n        return [\n            {\n                name: \"stretched\",\n                icon: svgs.stretched,\n                title: \"Stretch image\"\n            }\n        ];\n    }\n\n    /**\n     * Styles\n     *\n     * @returns {{wrapper: string, buttonBase: *, button: string, buttonActive: *}}\n     */\n    get CSS() {\n        return {\n            wrapper: \"\",\n            buttonBase: this.api.styles.settingsButton,\n            button: \"image-tool__tune\",\n            buttonActive: this.api.styles.settingsButtonActive\n        };\n    }\n\n    /**\n     * Makes buttons with tunes: stretch image\n     *\n     * @param {ImageToolData} toolData - generate Elements of tunes\n     * @returns {Element}\n     */\n    render(toolData: ImageToolData): HTMLElement {\n        const wrapper = make(\"div\", this.CSS.wrapper);\n\n        this.buttons = [];\n\n        const tunes = Tunes.tunes.concat(this.actions);\n\n        tunes.forEach(tune => {\n            const title = this.api.i18n.t(tune.title);\n            const el = make(\"div\", [this.CSS.buttonBase, this.CSS.button], {\n                innerHTML: tune.icon,\n                title\n            });\n\n            el.addEventListener(\"click\", () => {\n                this.tuneClicked(tune.name, tune.action);\n            });\n\n            el.dataset[\"tune\"] = tune.name;\n            const name = tune.name as keyof ImageToolData;\n            el.classList.toggle(this.CSS.buttonActive, !!toolData[name]);\n\n            this.buttons.push(el);\n\n            this.api.tooltip.onHover(el, title, {\n                placement: \"top\"\n            });\n\n            wrapper.appendChild(el);\n        });\n\n        return wrapper;\n    }\n\n    /**\n     * Clicks to one of the tunes\n     *\n     * @param {string} tuneName - clicked tune name\n     * @param {Function} customFunction - function to execute on click\n     */\n    tuneClicked(tuneName: string, customFunction?: TuneOnChangeCallable): boolean {\n        if (typeof customFunction === \"function\") {\n            if (!customFunction(tuneName)) {\n                return false;\n            }\n        }\n\n        const button = this.buttons.find(el => el.dataset[\"tune\"] === tuneName);\n\n        if (button) {\n            button.classList.toggle(\n                this.CSS.buttonActive,\n                !button.classList.contains(this.CSS.buttonActive)\n            );\n        }\n\n        this.onChange(tuneName);\n        return true;\n    }\n}\n"],"mappings":"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","ignoreList":[]}

package/components/RichTextEditor/tools/image/types.d.ts

@@ -1,29 +0,0 @@
-export interface TuneOnChangeCallable {
-    (tune: string): boolean | void;
-}
-export interface Tune {
-    name: string;
-    icon: string;
-    title: string;
-    action?: TuneOnChangeCallable;
-}
-export interface ImageToolData {
-    caption: string;
-    file: string;
-}
-export interface ImageToolFile {
-    src: string;
-}
-export interface GetFileSourceCallable {
-    (file: ImageToolFile | string): string;
-}
-export interface OnSelectFileCallable {
-    (file: ImageToolFile): string;
-}
-export interface ImageToolConfig {
-    getFileSrc: GetFileSourceCallable;
-    onSelectFile: OnSelectFileCallable;
-    captionPlaceholder?: string;
-    actions: Tune[];
-    context: Record<string, any>;
-}

package/components/RichTextEditor/tools/image/types.js

@@ -1,3 +0,0 @@
-export {};
-
-//# sourceMappingURL=types.js.map

package/components/RichTextEditor/tools/image/types.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["export interface TuneOnChangeCallable {\n    (tune: string): boolean | void;\n}\nexport interface Tune {\n    name: string;\n    icon: string;\n    title: string;\n    action?: TuneOnChangeCallable;\n}\n\nexport interface ImageToolData {\n    caption: string;\n    file: string;\n}\nexport interface ImageToolFile {\n    src: string;\n}\nexport interface GetFileSourceCallable {\n    (file: ImageToolFile | string): string;\n}\nexport interface OnSelectFileCallable {\n    (file: ImageToolFile): string;\n}\nexport interface ImageToolConfig {\n    getFileSrc: GetFileSourceCallable;\n    onSelectFile: OnSelectFileCallable;\n    captionPlaceholder?: string;\n    actions: Tune[];\n    context: Record<string, any>;\n}\n"],"mappings":"","ignoreList":[]}

package/components/RichTextEditor/tools/image/ui.d.ts

@@ -1,120 +0,0 @@
-import type { API } from "@editorjs/editorjs";
-import type { ImageToolConfig, ImageToolData } from "./types";
-interface OnSelectFileCallable {
-    (): void;
-}
-interface UiStatus {
-    EMPTY: "empty";
-    FILLED: "filled";
-    [key: string]: string;
-}
-interface UiParams {
-    api: API;
-    config: ImageToolConfig;
-    onSelectFile: OnSelectFileCallable;
-    readOnly: boolean;
-}
-/**
- * Class for working with UI:
- *  - rendering base structure
- *  - show/hide preview
- *  - apply tune view
- */
-export default class Ui {
-    private api;
-    private config;
-    private readonly readOnly;
-    private readonly onSelectFile;
-    readonly nodes: {
-        wrapper: HTMLElement;
-        imageContainer: HTMLElement;
-        fileButton: HTMLElement;
-        imageEl?: HTMLElement;
-        caption: HTMLElement;
-    };
-    /**
-     * @param ui - image tool Ui module
-     * @param ui.api - Editor.js API
-     * @param ui.config - user config
-     * @param ui.onSelectFile - callback for clicks on Select file button
-     * @param ui.readOnly - read-only mode flag
-     */
-    constructor({ api, config, onSelectFile, readOnly }: UiParams);
-    /**
-     * CSS classes
-     *
-     * @returns {object}
-     */
-    get CSS(): {
-        baseClass: string;
-        input: string;
-        button: string;
-        /**
-         * Tool's classes
-         */
-        wrapper: string;
-        imageContainer: string;
-        imageEl: string;
-        caption: string;
-    };
-    /**
-     * Ui statuses:
-     * - empty
-     * - filled
-     *
-     * @returns {{EMPTY: string, UPLOADING: string, FILLED: string}}
-     */
-    static get status(): UiStatus;
-    /**
-     * Renders tool UI
-     *
-     * @param {ImageToolData} toolData - saved tool data
-     * @returns {Element}
-     */
-    render(toolData: ImageToolData): HTMLElement;
-    /**
-     * Creates upload-file button
-     *
-     * @returns {Element}
-     */
-    createFileButton(): HTMLElement;
-    /**
-     * Shows an image
-     *
-     * @param {string} url - image source
-     * @returns {void}
-     */
-    fillImage(url: string): void;
-    /**
-     * Shows caption input
-     *
-     * @param {string} text - caption text
-     * @returns {void}
-     */
-    fillCaption(text: string): void;
-    /**
-     * Changes UI status
-     *
-     * @param {string} status - see {@link Ui.status} constants
-     * @returns {void}
-     */
-    toggleStatus(status: string): void;
-    /**
-     * Apply visual representation of activated tune
-     *
-     * @param {string} tuneName - one of available tunes {@link Tunes.tunes}
-     * @param {boolean} status - true for enable, false for disable
-     * @returns {void}
-     */
-    applyTune(tuneName: string, status: boolean): void;
-}
-/**
- * Helper for making Elements with attributes
- *
- * @param  {string} tagName           - new Element tag name
- * @param  {Array|string} classNames  - list or name of CSS class
- * @param  {object} attributes        - any attributes
- * @returns {HTMLElement}
- */
-export declare const make: (tagName: string, classNames?: string[] | string | null, attributes?: Record<string, string | number | boolean>) => HTMLElement;
-export {};

package/components/RichTextEditor/tools/image/ui.js

@@ -1,245 +0,0 @@
-/**
- * Class for working with UI:
- *  - rendering base structure
- *  - show/hide preview
- *  - apply tune view
- */
-export default class Ui {
-  /**
-   * @param ui - image tool Ui module
-   * @param ui.api - Editor.js API
-   * @param ui.config - user config
-   * @param ui.onSelectFile - callback for clicks on Select file button
-   * @param ui.readOnly - read-only mode flag
-   */
-  constructor({
-    api,
-    config,
-    onSelectFile,
-    readOnly
-  }) {
-    this.api = api;
-    this.config = config;
-    this.onSelectFile = onSelectFile;
-    this.readOnly = readOnly;
-    this.nodes = {
-      wrapper: make("div", [this.CSS.baseClass, this.CSS.wrapper]),
-      imageContainer: make("div", [this.CSS.imageContainer]),
-      fileButton: this.createFileButton(),
-      imageEl: undefined,
-      caption: make("div", [this.CSS.input, this.CSS.caption], {
-        contentEditable: !this.readOnly
-      })
-    };
-
-    /**
-     * Create base structure
-     *  <wrapper>
-     *    <image-container/>
-     *    <caption />
-     *  </wrapper>
-     */
-    this.nodes.caption.dataset["placeholder"] = this.config.captionPlaceholder;
-    this.nodes.wrapper.appendChild(this.nodes.imageContainer);
-    this.nodes.wrapper.appendChild(this.nodes.caption);
-    this.nodes.wrapper.appendChild(this.nodes.fileButton);
-  }
-
-  /**
-   * CSS classes
-   *
-   * @returns {object}
-   */
-  get CSS() {
-    return {
-      baseClass: this.api.styles.block,
-      input: this.api.styles.input,
-      button: this.api.styles.button,
-      /**
-       * Tool's classes
-       */
-      wrapper: "image-tool",
-      imageContainer: "image-tool__image",
-      imageEl: "image-tool__image-picture",
-      caption: "image-tool__caption"
-    };
-  }
-
-  /**
-   * Ui statuses:
-   * - empty
-   * - filled
-   *
-   * @returns {{EMPTY: string, UPLOADING: string, FILLED: string}}
-   */
-  static get status() {
-    return {
-      EMPTY: "empty",
-      FILLED: "filled"
-    };
-  }
-
-  /**
-   * Renders tool UI
-   *
-   * @param {ImageToolData} toolData - saved tool data
-   * @returns {Element}
-   */
-  render(toolData) {
-    if (!toolData.file || Object.keys(toolData.file).length === 0) {
-      this.toggleStatus(Ui.status.EMPTY);
-    }
-    return this.nodes.wrapper;
-  }
-
-  /**
-   * Creates upload-file button
-   *
-   * @returns {Element}
-   */
-  createFileButton() {
-    const button = make("div", [this.CSS.button]);
-    button.innerHTML = this.api.i18n.t("Select an Image");
-    button.addEventListener("click", () => {
-      this.onSelectFile();
-    });
-    return button;
-  }
-
-  /**
-   * Shows an image
-   *
-   * @param {string} url - image source
-   * @returns {void}
-   */
-  fillImage(url) {
-    /**
-     * Check for a source extension to compose element correctly: video tag for mp4, img — for others
-     */
-    const tag = /\.mp4$/.test(url) ? "VIDEO" : "IMG";
-    const attributes = {
-      src: url
-    };
-
-    /**
-     * We use eventName variable because IMG and VIDEO tags have different event to be called on source load
-     * - IMG: load
-     * - VIDEO: loadeddata
-     *
-     * @type {string}
-     */
-    let eventName = "load";
-
-    /**
-     * Update attributes and eventName if source is a mp4 video
-     */
-    if (tag === "VIDEO") {
-      /**
-       * Add attributes for playing muted mp4 as a gif
-       *
-       * @type {boolean}
-       */
-      attributes.autoplay = true;
-      attributes.loop = true;
-      attributes.muted = true;
-      attributes.playsinline = true;
-
-      /**
-       * Change event to be listened
-       *
-       * @type {string}
-       */
-      eventName = "loadeddata";
-    }
-
-    /**
-     * Compose tag with defined attributes
-     *
-     * @type {Element}
-     */
-    this.nodes.imageEl = make(tag, this.CSS.imageEl, attributes);
-
-    /**
-     * Add load event listener
-     */
-    this.nodes.imageEl.addEventListener(eventName, () => {
-      this.toggleStatus(Ui.status.FILLED);
-    });
-    this.nodes.imageContainer.appendChild(this.nodes.imageEl);
-  }
-
-  /**
-   * Shows caption input
-   *
-   * @param {string} text - caption text
-   * @returns {void}
-   */
-  fillCaption(text) {
-    if (!this.nodes.caption) {
-      return;
-    }
-    this.nodes.caption.innerHTML = text;
-  }
-
-  /**
-   * Changes UI status
-   *
-   * @param {string} status - see {@link Ui.status} constants
-   * @returns {void}
-   */
-  toggleStatus(status) {
-    for (const statusType in Ui.status) {
-      if (Object.prototype.hasOwnProperty.call(Ui.status, statusType) === false) {
-        continue;
-      }
-      const newStatus = Ui.status[statusType];
-      this.nodes.wrapper.classList.toggle(`${this.CSS.wrapper}--${newStatus}`, status === newStatus);
-    }
-  }
-
-  /**
-   * Apply visual representation of activated tune
-   *
-   * @param {string} tuneName - one of available tunes {@link Tunes.tunes}
-   * @param {boolean} status - true for enable, false for disable
-   * @returns {void}
-   */
-  applyTune(tuneName, status) {
-    this.nodes.wrapper.classList.toggle(`${this.CSS.wrapper}--${tuneName}`, status);
-  }
-}
-
-/**
- * Helper for making Elements with attributes
- *
- * @param  {string} tagName           - new Element tag name
- * @param  {Array|string} classNames  - list or name of CSS class
- * @param  {object} attributes        - any attributes
- * @returns {HTMLElement}
- */
-export const make = function make(tagName, classNames = null, attributes) {
-  const element = document.createElement(tagName);
-  if (Array.isArray(classNames)) {
-    element.classList.add(...classNames);
-  } else if (classNames) {
-    element.classList.add(classNames);
-  }
-  if (!attributes) {
-    return element;
-  }
-  for (const attrName in attributes) {
-    /**
-     * Unfortunately it is a problem to map attributes to element because element is complaining
-     * that attrName is a string, which cannot index the HTMLElement
-     */
-    const key = attrName;
-    /**
-     * Error says that each key is a read-only property.
-     */
-    // @ts-expect-error
-    element[key] = attributes[attrName];
-  }
-  return element;
-};
-
-//# sourceMappingURL=ui.js.map

package/components/RichTextEditor/tools/image/ui.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["Ui","constructor","api","config","onSelectFile","readOnly","nodes","wrapper","make","CSS","baseClass","imageContainer","fileButton","createFileButton","imageEl","undefined","caption","input","contentEditable","dataset","captionPlaceholder","appendChild","styles","block","button","status","EMPTY","FILLED","render","toolData","file","Object","keys","length","toggleStatus","innerHTML","i18n","t","addEventListener","fillImage","url","tag","test","attributes","src","eventName","autoplay","loop","muted","playsinline","fillCaption","text","statusType","prototype","hasOwnProperty","call","newStatus","classList","toggle","applyTune","tuneName","tagName","classNames","element","document","createElement","Array","isArray","add","attrName","key"],"sources":["ui.ts"],"sourcesContent":["import type { API } from \"@editorjs/editorjs\";\nimport type { ImageToolConfig, ImageToolData } from \"./types\";\n\ninterface OnSelectFileCallable {\n    (): void;\n}\ninterface UiStatus {\n    EMPTY: \"empty\";\n    FILLED: \"filled\";\n    [key: string]: string;\n}\ninterface UiParams {\n    api: API;\n    config: ImageToolConfig;\n    onSelectFile: OnSelectFileCallable;\n    readOnly: boolean;\n}\n/**\n * Class for working with UI:\n *  - rendering base structure\n *  - show/hide preview\n *  - apply tune view\n */\nexport default class Ui {\n    private api: API;\n    private config: ImageToolConfig;\n    private readonly readOnly: boolean;\n    private readonly onSelectFile: OnSelectFileCallable;\n\n    public readonly nodes: {\n        wrapper: HTMLElement;\n        imageContainer: HTMLElement;\n        fileButton: HTMLElement;\n        imageEl?: HTMLElement;\n        caption: HTMLElement;\n    };\n\n    /**\n     * @param ui - image tool Ui module\n     * @param ui.api - Editor.js API\n     * @param ui.config - user config\n     * @param ui.onSelectFile - callback for clicks on Select file button\n     * @param ui.readOnly - read-only mode flag\n     */\n    constructor({ api, config, onSelectFile, readOnly }: UiParams) {\n        this.api = api;\n        this.config = config;\n        this.onSelectFile = onSelectFile;\n        this.readOnly = readOnly;\n        this.nodes = {\n            wrapper: make(\"div\", [this.CSS.baseClass, this.CSS.wrapper]),\n            imageContainer: make(\"div\", [this.CSS.imageContainer]),\n            fileButton: this.createFileButton(),\n            imageEl: undefined,\n            caption: make(\"div\", [this.CSS.input, this.CSS.caption], {\n                contentEditable: !this.readOnly\n            })\n        };\n\n        /**\n         * Create base structure\n         *  <wrapper>\n         *    <image-container/>\n         *    <caption />\n         *  </wrapper>\n         */\n        this.nodes.caption.dataset[\"placeholder\"] = this.config.captionPlaceholder;\n        this.nodes.wrapper.appendChild(this.nodes.imageContainer);\n        this.nodes.wrapper.appendChild(this.nodes.caption);\n        this.nodes.wrapper.appendChild(this.nodes.fileButton);\n    }\n\n    /**\n     * CSS classes\n     *\n     * @returns {object}\n     */\n    get CSS() {\n        return {\n            baseClass: this.api.styles.block,\n            input: this.api.styles.input,\n            button: this.api.styles.button,\n\n            /**\n             * Tool's classes\n             */\n            wrapper: \"image-tool\",\n            imageContainer: \"image-tool__image\",\n            imageEl: \"image-tool__image-picture\",\n            caption: \"image-tool__caption\"\n        };\n    }\n\n    /**\n     * Ui statuses:\n     * - empty\n     * - filled\n     *\n     * @returns {{EMPTY: string, UPLOADING: string, FILLED: string}}\n     */\n    static get status(): UiStatus {\n        return {\n            EMPTY: \"empty\",\n            FILLED: \"filled\"\n        };\n    }\n\n    /**\n     * Renders tool UI\n     *\n     * @param {ImageToolData} toolData - saved tool data\n     * @returns {Element}\n     */\n    render(toolData: ImageToolData) {\n        if (!toolData.file || Object.keys(toolData.file).length === 0) {\n            this.toggleStatus(Ui.status.EMPTY);\n        }\n\n        return this.nodes.wrapper;\n    }\n\n    /**\n     * Creates upload-file button\n     *\n     * @returns {Element}\n     */\n    createFileButton() {\n        const button = make(\"div\", [this.CSS.button]);\n\n        button.innerHTML = this.api.i18n.t(\"Select an Image\");\n\n        button.addEventListener(\"click\", () => {\n            this.onSelectFile();\n        });\n\n        return button;\n    }\n\n    /**\n     * Shows an image\n     *\n     * @param {string} url - image source\n     * @returns {void}\n     */\n    public fillImage(url: string): void {\n        /**\n         * Check for a source extension to compose element correctly: video tag for mp4, img — for others\n         */\n        const tag = /\\.mp4$/.test(url) ? \"VIDEO\" : \"IMG\";\n\n        const attributes: any = {\n            src: url\n        };\n\n        /**\n         * We use eventName variable because IMG and VIDEO tags have different event to be called on source load\n         * - IMG: load\n         * - VIDEO: loadeddata\n         *\n         * @type {string}\n         */\n        let eventName = \"load\";\n\n        /**\n         * Update attributes and eventName if source is a mp4 video\n         */\n        if (tag === \"VIDEO\") {\n            /**\n             * Add attributes for playing muted mp4 as a gif\n             *\n             * @type {boolean}\n             */\n            attributes.autoplay = true;\n            attributes.loop = true;\n            attributes.muted = true;\n            attributes.playsinline = true;\n\n            /**\n             * Change event to be listened\n             *\n             * @type {string}\n             */\n            eventName = \"loadeddata\";\n        }\n\n        /**\n         * Compose tag with defined attributes\n         *\n         * @type {Element}\n         */\n        this.nodes.imageEl = make(tag, this.CSS.imageEl, attributes);\n\n        /**\n         * Add load event listener\n         */\n        this.nodes.imageEl.addEventListener(eventName, () => {\n            this.toggleStatus(Ui.status.FILLED);\n        });\n\n        this.nodes.imageContainer.appendChild(this.nodes.imageEl);\n    }\n\n    /**\n     * Shows caption input\n     *\n     * @param {string} text - caption text\n     * @returns {void}\n     */\n    public fillCaption(text: string): void {\n        if (!this.nodes.caption) {\n            return;\n        }\n        this.nodes.caption.innerHTML = text;\n    }\n\n    /**\n     * Changes UI status\n     *\n     * @param {string} status - see {@link Ui.status} constants\n     * @returns {void}\n     */\n    public toggleStatus(status: string): void {\n        for (const statusType in Ui.status) {\n            if (Object.prototype.hasOwnProperty.call(Ui.status, statusType) === false) {\n                continue;\n            }\n            const newStatus = Ui.status[statusType];\n            this.nodes.wrapper.classList.toggle(\n                `${this.CSS.wrapper}--${newStatus}`,\n                status === newStatus\n            );\n        }\n    }\n\n    /**\n     * Apply visual representation of activated tune\n     *\n     * @param {string} tuneName - one of available tunes {@link Tunes.tunes}\n     * @param {boolean} status - true for enable, false for disable\n     * @returns {void}\n     */\n    public applyTune(tuneName: string, status: boolean) {\n        this.nodes.wrapper.classList.toggle(`${this.CSS.wrapper}--${tuneName}`, status);\n    }\n}\n\n/**\n * Helper for making Elements with attributes\n *\n * @param  {string} tagName           - new Element tag name\n * @param  {Array|string} classNames  - list or name of CSS class\n * @param  {object} attributes        - any attributes\n * @returns {HTMLElement}\n */\nexport const make = function make(\n    tagName: string,\n    classNames: string[] | string | null = null,\n    attributes?: Record<string, string | number | boolean>\n): HTMLElement {\n    const element: HTMLElement = document.createElement(tagName);\n\n    if (Array.isArray(classNames)) {\n        element.classList.add(...classNames);\n    } else if (classNames) {\n        element.classList.add(classNames);\n    }\n\n    if (!attributes) {\n        return element;\n    }\n    for (const attrName in attributes) {\n        /**\n         * Unfortunately it is a problem to map attributes to element because element is complaining\n         * that attrName is a string, which cannot index the HTMLElement\n         */\n        const key = attrName as keyof HTMLElement;\n        /**\n         * Error says that each key is a read-only property.\n         */\n        // @ts-expect-error\n        element[key] = attributes[attrName];\n    }\n\n    return element;\n};\n"],"mappings":"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","ignoreList":[]}