@webiny/app-admin 5.34.8 → 5.35.0-beta.0

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

@@ -1 +1 @@
-{"version":3,"names":["Tunes","api","actions","onChange","buttons","wrapper","buttonBase","styles","settingsButton","button","buttonActive","settingsButtonActive","toolData","make","CSS","tunes","concat","forEach","tune","title","i18n","t","el","innerHTML","icon","addEventListener","tuneClicked","name","action","dataset","classList","toggle","push","tooltip","onHover","placement","appendChild","tuneName","customFunction","find","contains","svgs","stretched"],"sources":["tunes.ts"],"sourcesContent":["import { API } from \"@editorjs/editorjs\";\nimport { make } from \"./ui\";\nimport svgs from \"./svgs\";\nimport { 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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"}
+{"version":3,"names":["Tunes","api","actions","onChange","buttons","wrapper","buttonBase","styles","settingsButton","button","buttonActive","settingsButtonActive","toolData","make","CSS","tunes","concat","forEach","tune","title","i18n","t","el","innerHTML","icon","addEventListener","tuneClicked","name","action","dataset","classList","toggle","push","tooltip","onHover","placement","appendChild","tuneName","customFunction","find","contains","svgs","stretched"],"sources":["tunes.ts"],"sourcesContent":["import { API } from \"@editorjs/editorjs\";\nimport { make } from \"./ui\";\nimport svgs from \"./svgs\";\nimport { 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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"}

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

@@ -1,20 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.make = exports.default = void 0;
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 /**
  * Class for working with UI:
  *  - rendering base structure
@@ -31,9 +25,9 @@ var Ui = /*#__PURE__*/function () {
    */
   function Ui(_ref) {
     var api = _ref.api,
-        config = _ref.config,
-        onSelectFile = _ref.onSelectFile,
-        readOnly = _ref.readOnly;
+      config = _ref.config,
+      onSelectFile = _ref.onSelectFile,
+      readOnly = _ref.readOnly;
     (0, _classCallCheck2.default)(this, Ui);
     (0, _defineProperty2.default)(this, "api", void 0);
     (0, _defineProperty2.default)(this, "config", void 0);
@@ -53,6 +47,7 @@ var Ui = /*#__PURE__*/function () {
         contentEditable: !this.readOnly
       })
     };
+
     /**
      * Create base structure
      *  <wrapper>
@@ -60,19 +55,17 @@ var Ui = /*#__PURE__*/function () {
      *    <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}
    */
-
-
   (0, _createClass2.default)(Ui, [{
     key: "CSS",
     get: function get() {
@@ -80,7 +73,6 @@ var Ui = /*#__PURE__*/function () {
         baseClass: this.api.styles.block,
         input: this.api.styles.input,
         button: this.api.styles.button,
-
         /**
          * Tool's classes
          */
@@ -90,6 +82,7 @@ var Ui = /*#__PURE__*/function () {
         caption: "image-tool__caption"
       };
     }
+
     /**
      * Ui statuses:
      * - empty
@@ -97,7 +90,6 @@ var Ui = /*#__PURE__*/function () {
      *
      * @returns {{EMPTY: string, UPLOADING: string, FILLED: string}}
      */
-
   }, {
     key: "render",
     value:
@@ -111,20 +103,18 @@ var Ui = /*#__PURE__*/function () {
       if (!toolData.file || Object.keys(toolData.file).length === 0) {
         this.toggleStatus(Ui.status.EMPTY);
       }
-
       return this.nodes.wrapper;
     }
+
     /**
      * Creates upload-file button
      *
      * @returns {Element}
      */
-
   }, {
     key: "createFileButton",
     value: function createFileButton() {
       var _this = this;
-
       var button = make("div", [this.CSS.button]);
       button.innerHTML = this.api.i18n.t("Select an Image");
       button.addEventListener("click", function () {
@@ -132,18 +122,17 @@ var Ui = /*#__PURE__*/function () {
       });
       return button;
     }
+
     /**
      * Shows an image
      *
      * @param {string} url - image source
      * @returns {void}
      */
-
   }, {
     key: "fillImage",
     value: function fillImage(url) {
       var _this2 = this;
-
       /**
        * Check for a source extension to compose element correctly: video tag for mp4, img — for others
        */
@@ -151,6 +140,7 @@ var Ui = /*#__PURE__*/function () {
       var attributes = {
         src: url
       };
+
       /**
        * We use eventName variable because IMG and VIDEO tags have different event to be called on source load
        * - IMG: load
@@ -158,12 +148,11 @@ var Ui = /*#__PURE__*/function () {
        *
        * @type {string}
        */
-
       var eventName = "load";
+
       /**
        * Update attributes and eventName if source is a mp4 video
        */
-
       if (tag === "VIDEO") {
         /**
          * Add attributes for playing muted mp4 as a gif
@@ -174,54 +163,52 @@ var Ui = /*#__PURE__*/function () {
         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, function () {
         _this2.toggleStatus(Ui.status.FILLED);
       });
       this.nodes.imageContainer.appendChild(this.nodes.imageEl);
     }
+
     /**
      * Shows caption input
      *
      * @param {string} text - caption text
      * @returns {void}
      */
-
   }, {
     key: "fillCaption",
     value: function 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}
      */
-
   }, {
     key: "toggleStatus",
     value: function toggleStatus(status) {
@@ -229,11 +216,11 @@ var Ui = /*#__PURE__*/function () {
         if (Object.prototype.hasOwnProperty.call(Ui.status, statusType) === false) {
           continue;
         }
-
         var newStatus = Ui.status[statusType];
         this.nodes.wrapper.classList.toggle("".concat(this.CSS.wrapper, "--").concat(newStatus), status === newStatus);
       }
     }
+
     /**
      * Apply visual representation of activated tune
      *
@@ -241,7 +228,6 @@ var Ui = /*#__PURE__*/function () {
      * @param {boolean} status - true for enable, false for disable
      * @returns {void}
      */
-
   }, {
     key: "applyTune",
     value: function applyTune(tuneName, status) {
@@ -266,27 +252,20 @@ var Ui = /*#__PURE__*/function () {
  * @param  {object} attributes        - any attributes
  * @returns {HTMLElement}
  */
-
-
 exports.default = Ui;
-
 var make = function make(tagName) {
   var classNames = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   var attributes = arguments.length > 2 ? arguments[2] : undefined;
   var el = document.createElement(tagName);
-
   if (Array.isArray(classNames)) {
     var _el$classList;
-
     (_el$classList = el.classList).add.apply(_el$classList, (0, _toConsumableArray2.default)(classNames));
   } else if (classNames) {
     el.classList.add(classNames);
   }
-
   if (!attributes) {
     return el;
   }
-
   for (var attrName in attributes) {
     /**
      * Unfortunately it is a problem to map attributes to element because element is complaining
@@ -294,8 +273,6 @@ var make = function make(tagName) {
      */
     el[attrName] = attributes[attrName];
   }
-
   return el;
 };
-
 exports.make = make;

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

@@ -1 +1 @@
-{"version":3,"names":["Ui","api","config","onSelectFile","readOnly","nodes","wrapper","make","CSS","baseClass","imageContainer","fileButton","createFileButton","imageEl","undefined","caption","input","contentEditable","dataset","captionPlaceholder","appendChild","styles","block","button","toolData","file","Object","keys","length","toggleStatus","status","EMPTY","innerHTML","i18n","t","addEventListener","url","tag","test","attributes","src","eventName","autoplay","loop","muted","playsinline","FILLED","text","statusType","prototype","hasOwnProperty","call","newStatus","classList","toggle","tuneName","tagName","classNames","el","document","createElement","Array","isArray","add","attrName"],"sources":["ui.ts"],"sourcesContent":["import { API } from \"@editorjs/editorjs\";\nimport { 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 el: HTMLElement = document.createElement(tagName);\n\n    if (Array.isArray(classNames)) {\n        el.classList.add(...classNames);\n    } else if (classNames) {\n        el.classList.add(classNames);\n    }\n\n    if (!attributes) {\n        return el;\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        (el as any)[attrName] = (attributes as any)[attrName];\n    }\n\n    return el;\n};\n"],"mappings":"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"}
+{"version":3,"names":["Ui","api","config","onSelectFile","readOnly","nodes","wrapper","make","CSS","baseClass","imageContainer","fileButton","createFileButton","imageEl","undefined","caption","input","contentEditable","dataset","captionPlaceholder","appendChild","styles","block","button","toolData","file","Object","keys","length","toggleStatus","status","EMPTY","innerHTML","i18n","t","addEventListener","url","tag","test","attributes","src","eventName","autoplay","loop","muted","playsinline","FILLED","text","statusType","prototype","hasOwnProperty","call","newStatus","classList","toggle","tuneName","tagName","classNames","el","document","createElement","Array","isArray","add","attrName"],"sources":["ui.ts"],"sourcesContent":["import { API } from \"@editorjs/editorjs\";\nimport { 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 el: HTMLElement = document.createElement(tagName);\n\n    if (Array.isArray(classNames)) {\n        el.classList.add(...classNames);\n    } else if (classNames) {\n        el.classList.add(classNames);\n    }\n\n    if (!attributes) {\n        return el;\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        (el as any)[attrName] = (attributes as any)[attrName];\n    }\n\n    return el;\n};\n"],"mappings":"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"}