laser_v1/dependencies/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) {
				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;
				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
							}
						]
					}
                ]
            }
        ]
    };
});