/*
* 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("").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("").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
}
]
}
]
}
]
};
});