my_tests/assets/ckeditor/plugins/base64image/dialogs/base64image.js

/*
 * Created by ALL-INKL.COM - Neue Medien Muennich - 04. Feb 2014
 * Licensed under the terms of GPL, LGPL and MPL licenses.
 */
CKEDITOR.dialog.add("base64imageDialog", function (editor) {

    var t = null,
        selectedImg = null,
        orgWidth = null, orgHeight = null,
        imgPreview = null, urlCB = null, urlI = null, fileCB = null, imgScal = 1, lock = true;

    /* Check File Reader Support */
    function fileSupport() {
        var r = false, n = null;
        try {
            if (FileReader) {
                var n = document.createElement("input");
                if (n && "files" in n) r = true;
            }
        } catch (e) {
            r = false;
        }
        n = null;
        return r;
    }

    var fsupport = fileSupport();

    /* Load preview image */
    function imagePreviewLoad(s) {

        /* no preview */
        if (typeof (s) != "string" || !s) {
            imgPreview.getElement().setHtml("");
            return;
        }

        /* Create image */
        var i = new Image();

        /* Display loading text in preview element */
        imgPreview.getElement().setHtml("Loading...");

        /* When image is loaded */
        i.onload = function () {

            /* Remove preview */
            imgPreview.getElement().setHtml("");

            /* Set attributes */
            if (orgWidth == null || orgHeight == null) {
                if (this.width > 614) {
                    this.width = this.width / 8;
                    this.height = this.height / 8;
                }
                t.setValueOf("tab-properties", "width", this.width);
                t.setValueOf("tab-properties", "height", this.height);
                imgScal = 1;
                if (this.height > 0 && this.width > 0) imgScal = this.width / this.height;
                if (imgScal <= 0) imgScal = 1;
            } else {
                orgWidth = null;
                orgHeight = null;
            }
            this.id = editor.id + "previewimage";
            this.setAttribute("style", "max-width:400px;max-height:100px;");
            this.setAttribute("alt", "");

            /* Insert preview image */
            try {
                var p = imgPreview.getElement().$;
                if (p) p.appendChild(this);
            } catch (e) {
            }

        };

        /* Error Function */
        i.onerror = function () {
            imgPreview.getElement().setHtml("");
        };
        i.onabort = function () {
            imgPreview.getElement().setHtml("");
        };

        /* Load image */
        i.src = s;
    }

    /* Change input values and preview image */
    function imagePreview(src) {

        /* Remove preview */
        imgPreview.getElement().setHtml("");

        if (src == "base64") {

            /* Disable Checkboxes */
            if (urlCB) urlCB.setValue(false, true);
            if (fileCB) fileCB.setValue(false, true);

        } else if (src == "url") {

            /* Ensable Image URL Checkbox */
            if (urlCB) urlCB.setValue(true, true);
            if (fileCB) fileCB.setValue(false, true);

            /* Load preview image */
            if (urlI) imagePreviewLoad(urlI.getValue());

        } else if (fsupport) {

            /* Ensable Image File Checkbox */
            if (urlCB) urlCB.setValue(false, true);
            if (fileCB) fileCB.setValue(true, true);

            /* Read file and load preview */
            var fileI = t.getContentElement("tab-source", "file");
            var n = null;
            try {
                n = fileI.getInputElement().$;
            } catch (e) {
                n = null;
            }
            if (n && "files" in n && n.files && n.files.length > 0 && n.files[0]) {
                if ("type" in n.files[0] && !n.files[0].type.match("image.*")) return;
                if (!FileReader) return;
                if (n.files[0].size >= 3000000) {
                    alert('圖片容量 大於 3MB, 請重新調整');
                    return false;
                }
                imgPreview.getElement().setHtml("Loading...");
                var fr = new FileReader();
                fr.onload = (function (f) {
                    return function (e) {
                        imgPreview.getElement().setHtml("");
                        imagePreviewLoad(e.target.result);
                    };
                })(n.files[0]);
                fr.onerror = function () {
                    imgPreview.getElement().setHtml("");
                };
                fr.onabort = function () {
                    imgPreview.getElement().setHtml("");
                };
                fr.readAsDataURL(n.files[0]);
            }
        }
    };

    /* Calculate image dimensions */
    function getImageDimensions() {
        var o = {
            "w": t.getContentElement("tab-properties", "width").getValue(),
            "h": t.getContentElement("tab-properties", "height").getValue(),
            "uw": "px",
            "uh": "px"
        };
        if (o.w.indexOf("%") >= 0) o.uw = "%";
        if (o.h.indexOf("%") >= 0) o.uh = "%";
        o.w = parseInt(o.w, 10);
        o.h = parseInt(o.h, 10);
        if (isNaN(o.w)) o.w = 0;
        if (isNaN(o.h)) o.h = 0;
        return o;
    }

    /* Set image dimensions */
    function imageDimensions(src) {
        var o = getImageDimensions();
        var u = "px";
        if (src == "width") {
            if (o.uw == "%") u = "%";
            o.h = Math.round(o.w / imgScal);
        } else {
            if (o.uh == "%") u = "%";
            o.w = Math.round(o.h * imgScal);
        }
        if (u == "%") {
            o.w += "%";
            o.h += "%";
        }
        t.getContentElement("tab-properties", "width").setValue(o.w),
            t.getContentElement("tab-properties", "height").setValue(o.h)
    }

    /* Set integer Value */
    function integerValue(elem) {
        var v = elem.getValue(), u = "";
        if (v.indexOf("%") >= 0) u = "%";
        v = parseInt(v, 10);
        if (isNaN(v)) v = 0;
        elem.setValue(v + u);
    }

    if (fsupport) {

        /* Dialog with file and url image source */
        var sourceElements = [
            {
                type: "hbox",
                widths: ["70px"],
                children: [
                    {
                        type: "checkbox",
                        id: "urlcheckbox",
                        style: "margin-top:5px",
                        label: editor.lang.common.url + ":"
                    },
                    {
                        type: "text",
                        id: "url",
                        label: "",
                        onChange: function () {
                            imagePreview("url");
                        }
                    }
                ]
            },
            {
                type: "hbox",
                widths: ["70px"],
                children: [
                    {
                        type: "checkbox",
                        id: "filecheckbox",
                        style: "margin-top:5px",
                        label: editor.lang.common.upload + ":"
                    },
                    {
                        type: "file",
                        id: "file",
                        label: "",
                        onChange: function () {
                            imagePreview("file");
                        }
                    }
                ]
            },
            {
                type: "html",
                id: "preview",
                html: new CKEDITOR.template("<div style=\"text-align:center;\"></div>").output()
            }
        ];

    } else {

        /* Dialog with url image source */
        var sourceElements = [
            {
                type: "text",
                id: "url",
                label: editor.lang.common.url,
                onChange: function () {
                    imagePreview("url");
                }
            },
            {
                type: "html",
                id: "preview",
                html: new CKEDITOR.template("<div style=\"text-align:center;\"></div>").output()
            }
        ];
    }

    /* Dialog */
    return {
        title: editor.lang.common.image,
        minWidth: 450,
        minHeight: 180,
        onLoad: function () {

            if (fsupport) {

                /* Get checkboxes */
                urlCB = this.getContentElement("tab-source", "urlcheckbox");
                fileCB = this.getContentElement("tab-source", "filecheckbox");

                /* Checkbox Events */
                urlCB.getInputElement().on("click", function () {
                    imagePreview("url");
                });
                fileCB.getInputElement().on("click", function () {
                    imagePreview("file");
                });

            }

            /* Get url input element */
            urlI = this.getContentElement("tab-source", "url");

            /* Get image preview element */
            imgPreview = this.getContentElement("tab-source", "preview");

            /* Constrain proportions or not */
            this.getContentElement("tab-properties", "lock").getInputElement().on("click", function () {
                if (this.getValue()) lock = true; else lock = false;
                if (lock) imageDimensions("width");
            }, this.getContentElement("tab-properties", "lock"));

            /* Change Attributes Events  */
            this.getContentElement("tab-properties", "width").getInputElement().on("keyup", function () {
                if (lock) imageDimensions("width");
            });
            this.getContentElement("tab-properties", "height").getInputElement().on("keyup", function () {
                if (lock) imageDimensions("height");
            });
            this.getContentElement("tab-properties", "vmargin").getInputElement().on("keyup", function () {
                integerValue(this);
            }, this.getContentElement("tab-properties", "vmargin"));
            this.getContentElement("tab-properties", "hmargin").getInputElement().on("keyup", function () {
                integerValue(this);
            }, this.getContentElement("tab-properties", "hmargin"));
            this.getContentElement("tab-properties", "border").getInputElement().on("keyup", function () {
                integerValue(this);
            }, this.getContentElement("tab-properties", "border"));

        },
        onShow: function () {

            /* Remove preview */
            imgPreview.getElement().setHtml("");

            t = this, orgWidth = null, orgHeight = null, imgScal = 1, lock = true;

            /* selected image or null */
            selectedImg = editor.getSelection();
            if (selectedImg) selectedImg = selectedImg.getSelectedElement();
            if (!selectedImg || selectedImg.getName() !== "img") selectedImg = null;

            /* Set input values */
            t.setValueOf("tab-properties", "lock", lock);
            t.setValueOf("tab-properties", "vmargin", "0");
            t.setValueOf("tab-properties", "hmargin", "0");
            t.setValueOf("tab-properties", "border", "0");
            t.setValueOf("tab-properties", "align", "none");
            if (selectedImg) {

                /* Set input values from selected image */
                if (typeof (selectedImg.getAttribute("width")) == "string") orgWidth = selectedImg.getAttribute("width");
                if (typeof (selectedImg.getAttribute("height")) == "string") orgHeight = selectedImg.getAttribute("height");
                if ((orgWidth == null || orgHeight == null) && selectedImg.$) {
                    orgWidth = selectedImg.$.width;
                    orgHeight = selectedImg.$.height;
                }
                if (orgWidth != null && orgHeight != null) {
                    t.setValueOf("tab-properties", "width", orgWidth);
                    t.setValueOf("tab-properties", "height", orgHeight);
                    orgWidth = parseInt(orgWidth, 10);
                    orgHeight = parseInt(orgHeight, 10);
                    imgScal = 1;
                    if (!isNaN(orgWidth) && !isNaN(orgHeight) && orgHeight > 0 && orgWidth > 0) imgScal = orgWidth / orgHeight;
                    if (imgScal <= 0) imgScal = 1;
                }

                if (typeof (selectedImg.getAttribute("src")) == "string") {
                    if (selectedImg.getAttribute("src").indexOf("data:") === 0) {
                        imagePreview("base64");
                        imagePreviewLoad(selectedImg.getAttribute("src"));
                    } else {
                        t.setValueOf("tab-source", "url", selectedImg.getAttribute("src"));
                    }
                }
                if (typeof (selectedImg.getAttribute("alt")) == "string") t.setValueOf("tab-properties", "alt", selectedImg.getAttribute("alt"));
                if (typeof (selectedImg.getAttribute("hspace")) == "string") t.setValueOf("tab-properties", "hmargin", selectedImg.getAttribute("hspace"));
                if (typeof (selectedImg.getAttribute("vspace")) == "string") t.setValueOf("tab-properties", "vmargin", selectedImg.getAttribute("vspace"));
                if (typeof (selectedImg.getAttribute("border")) == "string") t.setValueOf("tab-properties", "border", selectedImg.getAttribute("border"));
                if (typeof (selectedImg.getAttribute("align")) == "string") {
                    switch (selectedImg.getAttribute("align")) {
                        case "top":
                        case "text-top":
                            t.setValueOf("tab-properties", "align", "top");
                            break;
                        case "baseline":
                        case "bottom":
                        case "text-bottom":
                            t.setValueOf("tab-properties", "align", "bottom");
                            break;
                        case "left":
                            t.setValueOf("tab-properties", "align", "left");
                            break;
                        case "right":
                            t.setValueOf("tab-properties", "align", "right");
                            break;
                    }
                }
                t.selectPage("tab-properties");
            }

        },
        onOk: function () {

            /* Get image source */
            var src = "";
            try {
                src = CKEDITOR.document.getById(editor.id + "previewimage").$.src;
            } catch (e) {
                src = "";
            }
            if (typeof (src) != "string" || src == null || src === "") return;

            /* selected image or new image */
            if (selectedImg) var newImg = selectedImg; else var newImg = editor.document.createElement("img");
            newImg.setAttribute("src", src);
            src = null;

            /* Set attributes */
            newImg.setAttribute("alt", t.getValueOf("tab-properties", "alt").replace(/^\s+/, "").replace(/\s+$/, ""));
            var attr = {
                "width": ["width", "width:#;", "integer", 1],
                "height": ["height", "height:#;", "integer", 1],
                "vmargin": ["vspace", "margin-top:#;margin-bottom:#;", "integer", 0],
                "hmargin": ["hspace", "margin-left:#;margin-right:#;", "integer", 0],
                "align": ["align", ""],
                "border": ["border", "border:# solid black;", "integer", 0]
            }, css = [], value, cssvalue, attrvalue, k;
            for (k in attr) {

                value = t.getValueOf("tab-properties", k);
                attrvalue = value;
                cssvalue = value;
                unit = "px";

                if (k == "align") {
                    switch (value) {
                        case "top":
                        case "bottom":
                            attr[k][1] = "vertical-align:#;";
                            break;
                        case "left":
                        case "right":
                            attr[k][1] = "float:#;";
                            break;
                        default:
                            value = null;
                            break;
                    }
                }

                if (attr[k][2] == "integer") {
                    if (value.indexOf("%") >= 0) unit = "%";
                    value = parseInt(value, 10);
                    if (isNaN(value)) value = null; else if (value < attr[k][3]) value = null;
                    if (value != null) {
                        if (unit == "%") {
                            attrvalue = value + "%";
                            cssvalue = value + "%";
                        } else {
                            attrvalue = value;
                            cssvalue = value + "px";
                        }
                    }
                }

                if (value != null) {
                    newImg.setAttribute(attr[k][0], attrvalue);
                    css.push(attr[k][1].replace(/#/g, cssvalue));
                }

            }
            if (css.length > 0) newImg.setAttribute("style", css.join(""));

            /* Insert new image */
            if (!selectedImg) editor.insertElement(newImg);

            /* Resize image */
            if (editor.plugins.imageresize) editor.plugins.imageresize.resize(editor, newImg, 800, 800);

        },

        /* Dialog form */
        contents: [
            {
                id: "tab-source",
                label: editor.lang.common.generalTab,
                elements: sourceElements
            },
            {
                id: "tab-properties",
                label: editor.lang.common.advancedTab,
                elements: [
                    {
                        type: "text",
                        id: "alt",
                        label: editor.lang.base64image.alt
                    },
                    {
                        type: 'hbox',
                        widths: ["15%", "15%", "70%"],
                        children: [
                            {
                                type: "text",
                                width: "45px",
                                id: "width",
                                label: editor.lang.common.width
                            },
                            {
                                type: "text",
                                width: "45px",
                                id: "height",
                                label: editor.lang.common.height
                            },
                            {
                                type: "checkbox",
                                id: "lock",
                                label: editor.lang.base64image.lockRatio,
                                style: "margin-top:18px;"
                            }
                        ]
                    },
                    {
                        type: 'hbox',
                        widths: ["23%", "30%", "30%", "17%"],
                        style: "margin-top:10px;",
                        children: [
                            {
                                type: "select",
                                id: "align",
                                label: editor.lang.common.align,
                                items: [
                                    [editor.lang.common.notSet, "none"],
                                    [editor.lang.common.alignTop, "top"],
                                    [editor.lang.common.alignBottom, "bottom"],
                                    [editor.lang.common.alignLeft, "left"],
                                    [editor.lang.common.alignRight, "right"]
                                ]
                            },
                            {
                                type: "text",
                                width: "45px",
                                id: "vmargin",
                                label: editor.lang.base64image.vSpace
                            },
                            {
                                type: "text",
                                width: "45px",
                                id: "hmargin",
                                label: editor.lang.base64image.hSpace
                            },
                            {
                                type: "text",
                                width: "45px",
                                id: "border",
                                label: editor.lang.base64image.border
                            }
                        ]
                    }
                ]
            }
        ]
    };
});