jwysiwyg_rails 0.1.0

data/app/assets/javascripts/controls/wysiwyg.cssWrap.js

@@ -0,0 +1,134 @@
+/**
+ * Controls: Element CSS Wrapper plugin
+ *
+ * Depends on jWYSIWYG
+ * 
+ * By Yotam Bar-On (https://github.com/tudmotu)
+ */
+(function ($) {
+	if (undefined === $.wysiwyg) {
+		throw "wysiwyg.cssWrap.js depends on $.wysiwyg";
+	}
+	/* For core enhancements #143
+	$.wysiwyg.ui.addControl("cssWrap", {
+		visible : false,
+		groupIndex: 6,
+		tooltip: "CSS Wrapper",
+		exec: function () { 
+				$.wysiwyg.controls.cssWrap.init(this);
+			}
+	}
+	*/	
+	if (!$.wysiwyg.controls) {
+		$.wysiwyg.controls = {};
+	}
+
+	/*
+	 * Wysiwyg namespace: public properties and methods
+	 */
+	$.wysiwyg.controls.cssWrap = {
+		init: function (Wysiwyg) {
+			var self = this, formWrapHtml, key, translation,
+				dialogReplacements = {
+					legend	: "Wrap Element",
+					wrapperType : "Wrapper Type",
+					ID : "ID",
+					"class" : "Class",
+					wrap  : "Wrap",
+					unwrap: "Unwrap",
+					cancel   : "Cancel"
+				};
+
+			formWrapHtml = '<form class="wysiwyg"><fieldset><legend>{legend}</legend>' +
+				'<div class="wysiwyg-dialogRow"><label>{wrapperType}: &nbsp;<select name="type"><option value="span">Span</option><option value="div">Div</option></select></label></div>' +
+				'<div class="wysiwyg-dialogRow"><label>{ID}: &nbsp;<input name="id" type="text" /></label></div>' + 
+				'<div class="wysiwyg-dialogRow"><label>{class}: &nbsp;<input name="class" type="text" /></label></div>' +
+				'<div class="wysiwyg-dialogRow"><input type="button" class="button cssWrap-unwrap" style="display:none;" value="{unwrap}"/></label>' +
+				'<input type="submit"  class="button cssWrap-submit" value="{wrap}"/></label>' +
+				'<input type="reset" class="button cssWrap-cancel" value="{cancel}"/></div></fieldset></form>';
+
+			for (key in dialogReplacements) {
+				if ($.wysiwyg.i18n) {
+					translation = $.wysiwyg.i18n.t(dialogReplacements[key]);
+					if (translation === dialogReplacements[key]) { // if not translated search in dialogs 
+						translation = $.wysiwyg.i18n.t(dialogReplacements[key], "dialogs");
+					}
+					dialogReplacements[key] = translation;
+				}
+				formWrapHtml = formWrapHtml.replace("{" + key + "}", dialogReplacements[key]);
+			}
+			if (!$(".wysiwyg-dialog-wrapper").length) {
+				$(formWrapHtml).appendTo("body");
+				$("form.wysiwyg").dialog({
+					modal: true,
+					open: function (ev, ui) {
+						var $this = $(this), range	= Wysiwyg.getInternalRange(), common, $nodeName;
+						// We make sure that there is some selection:
+						if (range) {
+							if ($.browser.msie) {
+								Wysiwyg.ui.focus();
+							}
+							common	= $(range.commonAncestorContainer);
+						} else {
+							alert("You must select some elements before you can wrap them.");
+							$this.dialog("close");
+							return 0;
+						}
+						$nodeName = range.commonAncestorContainer.nodeName.toLowerCase();
+						// If the selection is already a .wysiwygCssWrapper, then we want to change it and not double-wrap it.
+						if (common.parent(".wysiwygCssWrapper").length) {
+							alert(common.parent(".wysiwygCssWrapper").get(0).nodeName.toLowerCase());
+							$this.find("select[name=type]").val(common.parent(".wysiwygCssWrapper").get(0).nodeName.toLowerCase());
+							$this.find("select[name=type]").attr("disabled", "disabled");
+							$this.find("input[name=id]").val(common.parent(".wysiwygCssWrapper").attr("id"));
+							$this.find("input[name=class]").val(common.parent(".wysiwygCssWrapper").attr("class").replace('wysiwygCssWrapper ', ''));
+							// Add the "unwrap" button:
+							$("form.wysiwyg").find(".cssWrap-unwrap").show();
+							$("form.wysiwyg").find(".cssWrap-unwrap").click(function (e) {
+								e.preventDefault();
+								if ($nodeName !== "body") {
+									common.unwrap();
+								}
+								$this.dialog("close");
+								return 1;
+							});
+						}
+						// Submit button.
+						$("form.wysiwyg").find(".cssWrap-submit").click(function (e) {
+							e.preventDefault();
+							var $wrapper = $("form.wysiwyg").find("select[name=type]").val(),
+								$id = $("form.wysiwyg").find("input[name=id]").val(),
+								$class = $("form.wysiwyg").find("input[name=class]").val();
+
+							if ($nodeName !== "body") {
+								// If the selection is already a .wysiwygCssWrapper, then we want to change it and not double-wrap it.
+								if (common.parent(".wysiwygCssWrapper").length) {
+									common.parent(".wysiwygCssWrapper").attr("id", $class);
+									common.parent(".wysiwygCssWrapper").attr("class", $class);
+								} else {
+									common.wrap("<" + $wrapper + " id=\"" + $id + "\" class=\"" + "wysiwygCssWrapper " + $class + "\"/>");
+								}
+							} else {
+								// Currently no implemntation for if $nodeName == 'body'.
+							}
+							$this.dialog("close");
+						});
+						// Cancel button.
+						$("form.wysiwyg").find(".cssWrap-cancel").click(function (e) {
+							e.preventDefault();
+							$this.dialog("close");
+							return 1;
+						});
+					},
+					close: function () {
+						$(this).dialog("destroy");
+						$(this).remove();
+					}
+				});
+				Wysiwyg.saveContent();
+			}
+			$(Wysiwyg.editorDoc).trigger("editorRefresh.wysiwyg");
+			return 1;
+		}
+	};
+})(jQuery);

data/app/assets/javascripts/controls/wysiwyg.image.js

@@ -0,0 +1,285 @@
+/**
+ * Controls: Image plugin
+ *
+ * Depends on jWYSIWYG
+ */
+(function ($) {
+	"use strict";
+
+	if (undefined === $.wysiwyg) {
+		throw "wysiwyg.image.js depends on $.wysiwyg";
+	}
+
+	if (!$.wysiwyg.controls) {
+		$.wysiwyg.controls = {};
+	}
+
+	/*
+	 * Wysiwyg namespace: public properties and methods
+	 */
+	$.wysiwyg.controls.image = {
+		groupIndex: 6,
+		visible: true,
+		exec: function () {
+			$.wysiwyg.controls.image.init(this);
+		},
+		tags: ["img"],
+		tooltip: "Insert image",
+		init: function (Wysiwyg) {
+			var self = this, elements, adialog, dialog, formImageHtml, regexp, dialogReplacements, key, translation,
+				img = {
+					alt: "",
+					self: Wysiwyg.dom ? Wysiwyg.dom.getElement("img") : null, // link to element node
+					src: "http://",
+					title: ""
+				};
+
+			dialogReplacements = {
+				legend	: "Insert Image",
+				preview : "Preview",
+				url     : "URL",
+				title   : "Title",
+				description : "Description",
+				width   : "Width",
+				height  : "Height",
+				original : "Original W x H",
+				"float"	: "Float",
+				floatNone : "None",
+				floatLeft : "Left",
+				floatRight : "Right",
+				submit  : "Insert Image",
+				reset   : "Cancel",
+				fileManagerIcon : "Select file from server"
+			};
+
+			formImageHtml = '<form class="wysiwyg" id="wysiwyg-addImage"><fieldset>' +
+				'<div class="form-row"><span class="form-row-key">{preview}:</span><div class="form-row-value"><img src="" alt="{preview}" style="margin: 2px; padding:5px; max-width: 100%; overflow:hidden; max-height: 100px; border: 1px solid rgb(192, 192, 192);"/></div></div>' +
+				'<div class="form-row"><label for="name">{url}:</label><div class="form-row-value"><input type="text" name="src" value=""/>';
+
+			if ($.wysiwyg.fileManager && $.wysiwyg.fileManager.ready) {
+				// Add the File Manager icon:
+				formImageHtml += '<div class="wysiwyg-fileManager" title="{fileManagerIcon}"/>';
+			}
+
+			formImageHtml += '</div></div>' +
+				'<div class="form-row"><label for="name">{title}:</label><div class="form-row-value"><input type="text" name="imgtitle" value=""/></div></div>' +
+				'<div class="form-row"><label for="name">{description}:</label><div class="form-row-value"><input type="text" name="description" value=""/></div></div>' +
+				'<div class="form-row"><label for="name">{width} x {height}:</label><div class="form-row-value"><input type="text" name="width" value="" class="width-small"/> x <input type="text" name="height" value="" class="width-small"/></div></div>' +
+				'<div class="form-row"><label for="name">{original}:</label><div class="form-row-value"><input type="text" name="naturalWidth" value="" class="width-small" disabled="disabled"/> x ' +
+				'<input type="text" name="naturalHeight" value="" class="width-small" disabled="disabled"/></div></div>' +
+				'<div class="form-row"><label for="name">{float}:</label><div class="form-row-value"><select name="float">' +
+				'<option value="">{floatNone}</option>' +
+				'<option value="left">{floatLeft}</option>' +
+				'<option value="right">{floatRight}</option></select></div></div>' +
+				'<div class="form-row form-row-last"><label for="name"></label><div class="form-row-value"><input type="submit" class="button" value="{submit}"/> ' +
+				'<input type="reset" value="{reset}"/></div></div></fieldset></form>';
+
+			for (key in dialogReplacements) {
+				if ($.wysiwyg.i18n) {
+					translation = $.wysiwyg.i18n.t(dialogReplacements[key], "dialogs.image");
+
+					if (translation === dialogReplacements[key]) { // if not translated search in dialogs 
+						translation = $.wysiwyg.i18n.t(dialogReplacements[key], "dialogs");
+					}
+
+					dialogReplacements[key] = translation;
+				}
+
+				regexp = new RegExp("{" + key + "}", "g");
+				formImageHtml = formImageHtml.replace(regexp, dialogReplacements[key]);
+			}
+
+			if (img.self) {
+				img.src    = img.self.src    ? img.self.src    : "";
+				img.alt    = img.self.alt    ? img.self.alt    : "";
+				img.title  = img.self.title  ? img.self.title  : "";
+				img.width  = img.self.width  ? img.self.width  : "";
+				img.height = img.self.height ? img.self.height : "";
+				img.styleFloat = $(img.self).css("float");
+			}
+
+			adialog = new $.wysiwyg.dialog(Wysiwyg, {
+				"title"   : dialogReplacements.legend,
+				"content" : formImageHtml
+			});
+
+			$(adialog).bind("afterOpen", function (e, dialog) {
+				dialog.find("form#wysiwyg-addImage").submit(function (e) {
+					e.preventDefault();
+					self.processInsert(dialog.container, Wysiwyg, img);
+
+					adialog.close();
+					return false;
+				});
+
+				// File Manager (select file):
+				if ($.wysiwyg.fileManager) {
+					$("div.wysiwyg-fileManager").bind("click", function () {
+						$.wysiwyg.fileManager.init(function (selected) {
+							dialog.find("input[name=src]").val(selected);
+							dialog.find("input[name=src]").trigger("change");
+						});
+					});
+				}
+
+				$("input:reset", dialog).click(function (e) {
+					adialog.close();
+
+					return false;
+				});
+
+				$("fieldset", dialog).click(function (e) {
+					e.stopPropagation();
+				});
+
+				self.makeForm(dialog, img);
+			});
+
+			adialog.open();
+
+			$(Wysiwyg.editorDoc).trigger("editorRefresh.wysiwyg");
+		},
+
+		processInsert: function (context, Wysiwyg, img) {
+			var image,
+				url = $('input[name="src"]', context).val(),
+				title = $('input[name="imgtitle"]', context).val(),
+				description = $('input[name="description"]', context).val(),
+				width = $('input[name="width"]', context).val(),
+				height = $('input[name="height"]', context).val(),
+				styleFloat = $('select[name="float"]', context).val(),
+				styles = [],
+				style = "",
+				found,
+				baseUrl;
+
+			if (Wysiwyg.options.controlImage && Wysiwyg.options.controlImage.forceRelativeUrls) {
+				baseUrl = window.location.protocol + "//" + window.location.hostname
+					+ (window.location.port ? ":" + window.location.port : "");
+				if (0 === url.indexOf(baseUrl)) {
+					url = url.substr(baseUrl.length);
+				}
+			}
+
+			if (img.self) {
+				// to preserve all img attributes
+				$(img.self).attr("src", url)
+					.attr("title", title)
+					.attr("alt", description)
+					.css("float", styleFloat);
+
+				if (width.toString().match(/^[0-9]+(px|%)?$/)) {
+					$(img.self).css("width", width);
+				} else {
+					$(img.self).css("width", "");
+				}
+
+				if (height.toString().match(/^[0-9]+(px|%)?$/)) {
+					$(img.self).css("height", height);
+				} else {
+					$(img.self).css("height", "");
+				}
+
+				Wysiwyg.saveContent();
+			} else {
+				found = width.toString().match(/^[0-9]+(px|%)?$/);
+				if (found) {
+					if (found[1]) {
+						styles.push("width: " + width + ";");
+					} else {
+						styles.push("width: " + width + "px;");
+					}
+				}
+
+				found = height.toString().match(/^[0-9]+(px|%)?$/);
+				if (found) {
+					if (found[1]) {
+						styles.push("height: " + height + ";");
+					} else {
+						styles.push("height: " + height + "px;");
+					}
+				}
+
+				if (styleFloat.length > 0) {
+					styles.push("float: " + styleFloat + ";");
+				}
+
+				if (styles.length > 0) {
+					style = ' style="' + styles.join(" ") + '"';
+				}
+
+				image = "<img src='" + url + "' title='" + title + "' alt='" + description + "'" + style + "/>";
+				Wysiwyg.insertHtml(image);
+			}
+		},
+
+		makeForm: function (form, img) {
+			form.find("input[name=src]").val(img.src);
+			form.find("input[name=imgtitle]").val(img.title);
+			form.find("input[name=description]").val(img.alt);
+			form.find('input[name="width"]').val(img.width);
+			form.find('input[name="height"]').val(img.height);
+			form.find('select[name="float"]').val(img.styleFloat);
+			form.find('img').attr("src", img.src);
+
+			form.find('img').bind("load", function () {
+				if (form.find('img').get(0).naturalWidth) {
+					form.find('input[name="naturalWidth"]').val(form.find('img').get(0).naturalWidth);
+					form.find('input[name="naturalHeight"]').val(form.find('img').get(0).naturalHeight);
+				} else if (form.find('img').attr("naturalWidth")) {
+					form.find('input[name="naturalWidth"]').val(form.find('img').attr("naturalWidth"));
+					form.find('input[name="naturalHeight"]').val(form.find('img').attr("naturalHeight"));
+				}
+			});
+
+			form.find("input[name=src]").bind("change", function () {
+				form.find('img').attr("src", this.value);
+			});
+
+			return form;
+		}
+	};
+
+	$.wysiwyg.insertImage = function (object, url, attributes) {
+		return object.each(function () {
+			var Wysiwyg = $(this).data("wysiwyg"),
+				image,
+				attribute;
+
+			if (!Wysiwyg) {
+				return this;
+			}
+
+			if (!url || url.length === 0) {
+				return this;
+			}
+
+			if ($.browser.msie) {
+				Wysiwyg.ui.focus();
+			}
+
+			if (attributes) {
+				Wysiwyg.editorDoc.execCommand("insertImage", false, "#jwysiwyg#");
+				image = Wysiwyg.getElementByAttributeValue("img", "src", "#jwysiwyg#");
+
+				if (image) {
+					image.src = url;
+
+					for (attribute in attributes) {
+						if (attributes.hasOwnProperty(attribute)) {
+							image.setAttribute(attribute, attributes[attribute]);
+						}
+					}
+				}
+			} else {
+				Wysiwyg.editorDoc.execCommand("insertImage", false, url);
+			}
+
+			Wysiwyg.saveContent();
+
+			$(Wysiwyg.editorDoc).trigger("editorRefresh.wysiwyg");
+
+			return this;
+		});
+	};
+})(jQuery);

data/app/assets/javascripts/controls/wysiwyg.link.js

@@ -0,0 +1,249 @@
+/**
+ * Controls: Link plugin
+ *
+ * Depends on jWYSIWYG
+ *
+ * By: Esteban Beltran (academo) <sergies@gmail.com>
+ */
+(function ($) {
+	"use strict";
+
+	if (undefined === $.wysiwyg) {
+		throw "wysiwyg.link.js depends on $.wysiwyg";
+	}
+
+	if (!$.wysiwyg.controls) {
+		$.wysiwyg.controls = {};
+	}
+
+	/*
+	* Wysiwyg namespace: public properties and methods
+	*/
+	$.wysiwyg.controls.link = {
+		init: function (Wysiwyg) {
+			var self = this, elements, dialog, url, a, selection,
+				formLinkHtml, dialogReplacements, key, translation, regexp,
+				baseUrl, img;
+
+			dialogReplacements = {
+				legend: "Insert Link",
+				url   : "Link URL",
+				title : "Link Title",
+				target: "Link Target",
+				submit: "Insert Link",
+				reset: "Cancel"
+			};
+
+			formLinkHtml = '<form class="wysiwyg"><fieldset><legend>{legend}</legend>' +
+				'<label>{url}: <input type="text" name="linkhref" value=""/></label>' +
+				'<label>{title}: <input type="text" name="linktitle" value=""/></label>' +
+				'<label>{target}: <input type="text" name="linktarget" value=""/></label>' +
+				'<input type="submit" class="button" value="{submit}"/> ' +
+				'<input type="reset" value="{reset}"/></fieldset></form>';
+
+			for (key in dialogReplacements) {
+				if ($.wysiwyg.i18n) {
+					translation = $.wysiwyg.i18n.t(dialogReplacements[key], "dialogs.link");
+
+					if (translation === dialogReplacements[key]) { // if not translated search in dialogs 
+						translation = $.wysiwyg.i18n.t(dialogReplacements[key], "dialogs");
+					}
+
+					dialogReplacements[key] = translation;
+				}
+
+				regexp = new RegExp("{" + key + "}", "g");
+				formLinkHtml = formLinkHtml.replace(regexp, dialogReplacements[key]);
+			}
+
+			a = {
+				self: Wysiwyg.dom.getElement("a"), // link to element node
+				href: "http://",
+				title: "",
+				target: ""
+			};
+
+			if (a.self) {
+				a.href = a.self.href ? a.self.href : a.href;
+				a.title = a.self.title ? a.self.title : "";
+				a.target = a.self.target ? a.self.target : "";
+			}
+
+			if ($.fn.dialog) {
+				elements = $(formLinkHtml);
+				elements.find("input[name=linkhref]").val(a.href);
+				elements.find("input[name=linktitle]").val(a.title);
+				elements.find("input[name=linktarget]").val(a.target);
+
+				if ($.browser.msie) {
+					try {
+						dialog = elements.appendTo(Wysiwyg.editorDoc.body);
+					} catch (err) {
+						dialog = elements.appendTo("body");
+					}
+				} else {
+					dialog = elements.appendTo("body");
+				}
+
+				dialog.dialog({
+					modal: true,
+					open: function (ev, ui) {
+						$("input:submit", dialog).click(function (e) {
+							e.preventDefault();
+
+							var url = $('input[name="linkhref"]', dialog).val(),
+								title = $('input[name="linktitle"]', dialog).val(),
+								target = $('input[name="linktarget"]', dialog).val(),
+								baseUrl,
+								img;
+
+							if (Wysiwyg.options.controlLink.forceRelativeUrls) {
+								baseUrl = window.location.protocol + "//" + window.location.hostname;
+								if (0 === url.indexOf(baseUrl)) {
+									url = url.substr(baseUrl.length);
+								}
+							}
+
+							if (a.self) {
+								if ("string" === typeof (url)) {
+									if (url.length > 0) {
+										// to preserve all link attributes
+										$(a.self).attr("href", url).attr("title", title).attr("target", target);
+									} else {
+										$(a.self).replaceWith(a.self.innerHTML);
+									}
+								}
+							} else {
+								if ($.browser.msie) {
+									Wysiwyg.ui.returnRange();
+								}
+
+								//Do new link element
+								selection = Wysiwyg.getRangeText();
+								img = Wysiwyg.dom.getElement("img");
+
+								if ((selection && selection.length > 0) || img) {
+									if ($.browser.msie) {
+										Wysiwyg.ui.focus();
+									}
+
+									if ("string" === typeof (url)) {
+										if (url.length > 0) {
+											Wysiwyg.editorDoc.execCommand("createLink", false, url);
+										} else {
+											Wysiwyg.editorDoc.execCommand("unlink", false, null);
+										}
+									}
+
+									a.self = Wysiwyg.dom.getElement("a");
+
+									$(a.self).attr("href", url).attr("title", title);
+
+									/**
+									 * @url https://github.com/akzhan/jwysiwyg/issues/16
+									 */
+									$(a.self).attr("target", target);
+								} else if (Wysiwyg.options.messages.nonSelection) {
+									window.alert(Wysiwyg.options.messages.nonSelection);
+								}
+							}
+
+							Wysiwyg.saveContent();
+
+							$(dialog).dialog("close");
+						});
+						$("input:reset", dialog).click(function (e) {
+							e.preventDefault();
+							$(dialog).dialog("close");
+						});
+					},
+					close: function (ev, ui) {
+						dialog.dialog("destroy");
+						dialog.remove();
+					}
+				});
+			} else {
+				if (a.self) {
+					url = window.prompt("URL", a.href);
+
+					if (Wysiwyg.options.controlLink.forceRelativeUrls) {
+						baseUrl = window.location.protocol + "//" + window.location.hostname;
+						if (0 === url.indexOf(baseUrl)) {
+							url = url.substr(baseUrl.length);
+						}
+					}
+
+					if ("string" === typeof (url)) {
+						if (url.length > 0) {
+							$(a.self).attr("href", url);
+						} else {
+							$(a.self).replaceWith(a.self.innerHTML);
+						}
+					}
+				} else {
+					//Do new link element
+					selection = Wysiwyg.getRangeText();
+					img = Wysiwyg.dom.getElement("img");
+
+					if ((selection && selection.length > 0) || img) {
+						if ($.browser.msie) {
+							Wysiwyg.ui.focus();
+							Wysiwyg.editorDoc.execCommand("createLink", true, null);
+						} else {
+							url = window.prompt(dialogReplacements.url, a.href);
+
+							if (Wysiwyg.options.controlLink.forceRelativeUrls) {
+								baseUrl = window.location.protocol + "//" + window.location.hostname;
+								if (0 === url.indexOf(baseUrl)) {
+									url = url.substr(baseUrl.length);
+								}
+							}
+
+							if ("string" === typeof (url)) {
+								if (url.length > 0) {
+									Wysiwyg.editorDoc.execCommand("createLink", false, url);
+								} else {
+									Wysiwyg.editorDoc.execCommand("unlink", false, null);
+								}
+							}
+						}
+					} else if (Wysiwyg.options.messages.nonSelection) {
+						window.alert(Wysiwyg.options.messages.nonSelection);
+					}
+				}
+
+				Wysiwyg.saveContent();
+			}
+
+			$(Wysiwyg.editorDoc).trigger("editorRefresh.wysiwyg");
+		}
+	};
+
+	$.wysiwyg.createLink = function (object, url) {
+		return object.each(function () {
+			var oWysiwyg = $(this).data("wysiwyg"),
+				selection;
+
+			if (!oWysiwyg) {
+				return this;
+			}
+
+			if (!url || url.length === 0) {
+				return this;
+			}
+
+			selection = oWysiwyg.getRangeText();
+
+			if (selection && selection.length > 0) {
+				if ($.browser.msie) {
+					oWysiwyg.ui.focus();
+				}
+				oWysiwyg.editorDoc.execCommand("unlink", false, null);
+				oWysiwyg.editorDoc.execCommand("createLink", false, url);
+			} else if (oWysiwyg.options.messages.nonSelection) {
+				window.alert(oWysiwyg.options.messages.nonSelection);
+			}
+			return this;
+		});
+	};
+})(jQuery);