c3runtime_domSide.js

"use strict";
{
    const DOM_COMPONENT_ID = "robotkaposzta-texteditor";

    const StopPropagation = function(e) {
        e.stopPropagation();
    };

    /**
     * @external Quill
     * @desc HTML based text editor library.
     * @see https://quilljs.com/docs/api/
     */
    /**
     * @external DOMElementHandler
     * @desc The DOMElementHandler interface is used as a base class for DOM handlers in the DOM-side script (typically domSide.js). See DOM calls in the C3 runtime for more information.
     * @see https://www.construct.net/en/make-games/manuals/addon-sdk/runtime-reference/base-classes/domelementhandler
     */
    /**
     * @classdesc TextManager editor class.
     * @extends external:DOMElementHandler
     */
    class TextEditorRuntimeDOMElementHandler extends self.DOMElementHandler {
        /**
         * @desc Create class.
         * @param {object} iRuntime - The instance object that gives to the parent's constructor.
         */
        constructor(iRuntime) {
            super(iRuntime, DOM_COMPONENT_ID);

            /**
             * @public
             * @desc Quill editor object.
             * @type {Object.<external:Quill>}
             */
            this._editor = null;
        }
        
        
        /**
         * @desc Called when runtime want create DOM element.
         * @param {number} elementId - The element id that identify the instance.
         * @param {object} e - Optional create data.
         * @returns {Object.<Element>} DOM element to create.
         */
        CreateElement(elementId, e) {
            const elem = document.createElement("div");
            const elem2 = document.createElement("div");
            elem.appendChild(elem2);
            const elem3 = document.createElement("div");
            elem2.appendChild(elem3);

            elem.style.position = "absolute";

            elem2.style.height = "inherit";
            elem2.style.width = "inherit";
            elem2.style.display = "table";
            elem2.style.borderCollapse = "collapse";
            elem2.style.color = "black";

            this._editor = new self["Quill"](elem3, {
                "modules": {
                    "toolbar": [
                        [{
                            "header": [1, 2, 3, 4, 5, 6, false]
                        }], //set size
                        [{
                            "color": []
                        }, {
                            "background": []
                        }], //set color
                        [{
                            "align": []
                        }], //set align
                        ["bold", "italic", "underline", "strike"], //toggled formats
                        ["blockquote", "image", "code-block"], //embed content
                        [{
                            "list": "ordered"
                        }, {
                            "list": "bullet"
                        }], //set list
                        [{
                            "script": "sub"
                        }, {
                            "script": "super"
                        }], // superscript/subscript
                        [{
                            "indent": "-1"
                        }, {
                            "indent": "+1"
                        }], // outdent/indent
                        [{
                            "direction": "rtl"
                        }] // text direction
                    ]
                },
                "theme": "snow"
            });
            elem2["children"]["item"](0).style.display = "table-row";
            elem2["children"]["item"](1).style.display = "table-row";

            this._editor.on("text-change", () => {
                this._OnTextChanged(elementId);
            });

            // Prevent touches reaching the canvas
            elem.addEventListener("touchstart", StopPropagation);
            elem.addEventListener("touchmove", StopPropagation);
            elem.addEventListener("touchend", StopPropagation);

            // Prevent clicks being blocked
            elem.addEventListener("mousedown", StopPropagation);
            elem.addEventListener("mouseup", StopPropagation);

            // Prevent key presses being blocked by the Keyboard object
            elem.addEventListener("keydown", StopPropagation);
            elem.addEventListener("keyup", StopPropagation);

            this.UpdateState(elem, e);

            return elem;
        }

        /**
         * @desc Called when runtime want update DOM element state.
         * @param {number} elem - The instance element.
         * @param {object} e - Update data.
         */
        UpdateState(elem, e) {
            this._editor["setText"](e["t"]);
            this._editor["root"]["innerHTML"] = e["te"];
            this._editor["root"]["dataset"]["placeholder"] = e["p"];
            elem["children"]["item"](0)["children"]["item"](1)["title"] = e["to"];
            this._editor["enable"](!e["r"]);
        }

        /**
         * @desc Called when user changeddd the text.
         * @param {number} elementId - The element id that identify the instance.
         */
        _OnTextChanged(elementId) {
            this.PostToRuntimeElement("text-changed", elementId, {
                "t": this._editor["getText"](),
                "te": this._editor["root"]["innerHTML"]
            });
        }
    };
    self.RuntimeInterface.AddDOMHandlerClass(TextEditorRuntimeDOMElementHandler);
}