ckeditor-base64image 0.0.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 8baefba7b093e8e424d99617c8dbbae877693a16
+  data.tar.gz: 90afed2f74af1f2520a52073c120454cf651091b
+SHA512:
+  metadata.gz: f592c581e614ddff0e043a0a4957a37a677d2428d9bab5441a977d181a4d1490f37019aef4c12bd2e95d06a60637e7ac785cc9eb90b1caf09b446d2e4b4dcf7f
+  data.tar.gz: 0c01e8bdc6a4a7f159ebd3309a71ad0c61c40298c7f53b7786615b9b3af3099cd1b57268ac71c33925bebed78f873ebf772840c62fa4b649e447d510aeb09e06

data/LICENSE

@@ -0,0 +1,14 @@
+Copyright (c) 2014 Mobile Event Guide
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Lesser General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Lesser General Public License for more details.
+
+You should have received a copy of the GNU Lesser General Public License
+along with this program. If not, see <http://www.gnu.org/licenses/>.

data/README.md

@@ -0,0 +1,17 @@
+# Ckeditor::Base64image
+
+Asset gem for [nmmf/base64image](https://github.com/nmmf/base64image).
+
+## Usage
+
+Add to Gemfile
+
+```ruby
+gem 'ckeditor-base64image'
+```
+
+Add to `application.js`
+
+```javascript
+//= require ckeditor/base64image
+```

data/Rakefile

@@ -0,0 +1,2 @@
+require "bundler/gem_tasks"
+

data/lib/ckeditor/base64image.rb

@@ -0,0 +1,10 @@
+require "ckeditor/base64image/version"
+
+module Ckeditor
+  module Base64image
+    module Rails
+      class Engine < ::Rails::Engine
+      end
+    end
+  end
+end

data/lib/ckeditor/base64image/version.rb

@@ -0,0 +1,5 @@
+module Ckeditor
+  module Base64image
+    VERSION = "0.0.2"
+  end
+end

data/vendor/assets/javascripts/ckeditor/base64image.js

@@ -0,0 +1,4 @@
+//= require ./plugins/base64image/plugin
+//= require ./plugins/base64image/dialogs/base64image
+//= require ./plugins/base64image/lang/en
+//= require ./plugins/base64image/lang/de

data/vendor/assets/javascripts/ckeditor/plugins/base64image/dialogs/base64image.js

@@ -0,0 +1,503 @@
+/*
+ * 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
+							}
+						]
+					}
+                ]
+            }
+        ]
+    };
+});