@jswf/core/dist/TextEditor/EditableView.js

JavaScript Window Framework

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var TextInputWindow_1 = require("./TextInputWindow");
var PanelControl_1 = require("./PanelControl");
var BaseView_1 = require("../BaseView");
var EditableView = /** @class */ (function (_super) {
    __extends(EditableView, _super);
    function EditableView() {
        var _this = _super.call(this) || this;
        _this.setJwfStyle("EditableView");
        _this.addPanel();
        var htmlArea = document.createElement("div");
        _this.htmlArea = htmlArea;
        htmlArea.contentEditable = "true";
        htmlArea.style.width = "100%";
        htmlArea.style.height = "100%";
        _this.getClient().appendChild(htmlArea);
        htmlArea.addEventListener("paste", function (e) {
            if (!e.clipboardData)
                return;
            if (e.clipboardData.files.length) {
                var params = { fileList: e.clipboardData.files, enter: false };
                _this.callEvent("insertFile", params);
                if (!params.enter)
                    _this.insertImage(e.clipboardData.files);
            }
            else {
                var text = e.clipboardData.getData("text/plain");
                text = text.replace(/(["&'<>\n\t ])/g, function (ch) {
                    var convert = {
                        '"': "&quot;",
                        "&": "&amp;",
                        "'": "&#39;",
                        "<": "&lt;",
                        ">": "&gt;",
                        "\n": "<br>",
                        " ": "&nbsp;",
                        "\t": "&nbsp;&nbsp;&nbsp;&nbsp;"
                    };
                    return convert[ch];
                });
                document.execCommand("insertHtml", false, text);
            }
            e.preventDefault();
            _this.callEvent("updateText");
        });
        htmlArea.addEventListener("input", function () {
            _this.callEvent("updateText");
        });
        htmlArea.addEventListener("blur", function () {
            var select = document.getSelection();
            if (!select)
                return;
            _this.keepRange = select.getRangeAt(0);
        });
        //ドラッグドロップの許可
        htmlArea.ondragover = function (e) {
            e.preventDefault();
        };
        htmlArea.addEventListener("drop", function (e) {
            if (e.dataTransfer) {
                var params = { fileList: e.dataTransfer.files, enter: false };
                _this.callEvent("insertFile", params);
            }
            e.preventDefault();
        });
        return _this;
    }
    EditableView.prototype.insertImage = function (files) {
        var _this = this;
        var _loop_1 = function (i) {
            var file = files[i];
            if (file.type.indexOf("image") != -1) {
                var reader_1 = new FileReader();
                reader_1.readAsDataURL(file);
                reader_1.onload = function () {
                    document.execCommand("insertImage", false, reader_1.result);
                    _this.callEvent("updateText");
                };
            }
        };
        //画像ファイルならDataURLに変換して貼り付ける
        for (var i = 0; i < files.length; i++) {
            _loop_1(i);
        }
    };
    EditableView.prototype.insertNode = function (node) {
        document.execCommand("insertHTML", false, node.outerHTML);
    };
    EditableView.prototype.getHtml = function () {
        return this.htmlArea.innerHTML;
    };
    EditableView.prototype.setHtml = function (value) {
        this.htmlArea.innerHTML = value;
    };
    EditableView.prototype.addPanel = function () {
        var _this = this;
        var client = this.getClient();
        var panel = document.createElement("div");
        this.panel = panel;
        client.appendChild(panel);
        PanelControl_1.PanelControl.createControl(panel, {
            label: "解除",
            event: function () {
                document.execCommand("removeFormat");
                _this.callEvent("updateText");
            }
        });
        PanelControl_1.PanelControl.createControl(panel, {
            label: "文字色",
            type: "color",
            value: { r: 0, g: 0, b: 0 },
            event: function (node) {
                if (node && node.style.background) {
                    _this.setRange();
                    document.execCommand("foreColor", false, node.style.background);
                }
            }
        });
        PanelControl_1.PanelControl.createControl(panel, {
            label: "背景色",
            value: { r: 200, g: 200, b: 200 },
            type: "color",
            event: function (node) {
                if (node && node.style.background) {
                    _this.setRange();
                    document.execCommand("backColor", false, node.style.background);
                }
            }
        });
        PanelControl_1.PanelControl.createControl(panel, {
            label: "太字",
            event: function () {
                document.execCommand("bold");
                _this.callEvent("updateText");
            }
        });
        PanelControl_1.PanelControl.createControl(panel, {
            label: "斜体",
            event: function () {
                document.execCommand("italic");
                _this.callEvent("updateText");
            }
        });
        PanelControl_1.PanelControl.createControl(panel, {
            label: "下線",
            event: function () {
                document.execCommand("underline");
                _this.callEvent("updateText");
            }
        });
        PanelControl_1.PanelControl.createControl(panel, {
            label: "消線",
            event: function () {
                document.execCommand("strikeThrough");
                _this.callEvent("updateText");
            }
        });
        PanelControl_1.PanelControl.createControl(panel, {
            type: "select",
            label: "サイズ",
            option: [
                { label: "サイズ" },
                { label: "1" },
                { label: "2" },
                { label: "3" },
                { label: "4" },
                { label: "5" },
                { label: "6" },
                { label: "7" }
            ],
            event: function (node) {
                var select = node;
                if (select.value !== "サイズ") {
                    document.execCommand("fontSize", false, select.value);
                    _this.callEvent("updateText");
                    select.value = "サイズ";
                }
            }
        });
        PanelControl_1.PanelControl.createControl(panel, {
            label: "リンク",
            event: function () {
                _this.createLink();
            }
        });
        PanelControl_1.PanelControl.createControl(panel, {
            label: "CODE",
            event: function () {
                _this.setPGCode();
            }
        });
        PanelControl_1.PanelControl.createControl(panel, {
            label: "PLAIN",
            event: function () {
                _this.setPGCode(true);
            }
        });
    };
    EditableView.prototype.createControl = function (param) {
        if (this.panel)
            PanelControl_1.PanelControl.createControl(this.panel, param);
    };
    EditableView.prototype.setPGCode = function (plain) {
        var select = document.getSelection();
        if (!select)
            return;
        var range = select.getRangeAt(0);
        var text = select.toString().replace(/["&'<>\n]/g, function (ch) {
            var convert = {
                "</div>": "<br>\n",
                "\n": "<br>\n",
                '"': "&quot;",
                "&": "&amp;",
                "'": "&#39;",
                "<": "&lt;",
                ">": "&gt;"
            };
            return convert[ch];
        });
        range.deleteContents();
        range.insertNode(range.createContextualFragment("<br><div class='code" + (plain ? 2 : "") + "'>" + text + "</div><br>"));
        this.callEvent("updateText");
    };
    EditableView.prototype.createLink = function () {
        var select = document.getSelection();
        if (!select)
            return;
        var range = select.getRangeAt(0);
        var input = new TextInputWindow_1.TextInputWindow({
            title: "リンク作成",
            message: "リンク先の入力",
            label: "URL",
            event: function (value) {
                select.removeAllRanges();
                select.addRange(range);
                document.execCommand("createLink", undefined, value);
                if (select.anchorNode && select.anchorNode.parentElement) {
                    var parent_1 = select.anchorNode.parentElement;
                    parent_1.target = "_blank";
                }
                input.close();
            }
        });
    };
    EditableView.prototype.setRange = function () {
        if (this.keepRange) {
            var select = document.getSelection();
            if (!select)
                return;
            select.removeAllRanges();
            select.addRange(this.keepRange);
        }
    };
    return EditableView;
}(BaseView_1.BaseView));
exports.EditableView = EditableView;
//# sourceMappingURL=EditableView.js.map