Permalink
Browse files

Image control: preview, size editable. Issue #22

  • Loading branch information...
1 parent 1fd67f1 commit 73ad22fc3d1916ce64a4cce1dba750e59de12cb3 @frost-nzcr4 frost-nzcr4 committed Jan 28, 2011
Showing with 238 additions and 96 deletions.
  1. +222 −91 controls/wysiwyg.image.js
  2. +1 −1 jquery.wysiwyg.js
  3. +15 −4 jquery.wysiwyg.modal.css
View
@@ -15,110 +15,241 @@
/*
* Wysiwyg namespace: public properties and methods
*/
- $.wysiwyg.controls.image = function (Wysiwyg) {
- var self = Wysiwyg, elements, dialog, szURL,
- formImageHtml = '<form class="wysiwyg"><fieldset><legend>Insert Image</legend><label>Image URL: <input type="text" name="src" value=""/></label><label>Image Title: <input type="text" name="imgtitle" value=""/></label><label>Image Description: <input type="text" name="description" value=""/></label><input type="submit" class="button" value="Insert Image"/> <input type="reset" value="Cancel"/></fieldset></form>',
- img = {
- alt: "",
- self: Wysiwyg.dom.getElement("img"), // link to element node
- src: "http://",
- title: ""
- };
-
- 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 : "";
- }
+ $.wysiwyg.controls.image = {
+ init: function (Wysiwyg) {
+ var self = this,
+ formImageHtml = '<form class="wysiwyg"><fieldset><legend>Insert Image</legend>' +
+ '<label>Preview: <img src="" alt="preview" style="float: left; margin: 5px; width: 80px; height: 60px; border: 1px solid rgb(192, 192, 192);"/></label>' +
+ '<label>URL: <input type="text" name="src" value=""/></label>' +
+ '<label>Title: <input type="text" name="imgtitle" value=""/></label>' +
+ '<label>Description: <input type="text" name="description" value=""/></label>' +
+ '<label>Width x Height: <input type="text" name="width" value="" class="width"/> x <input type="text" name="height" value="" class="height"/></label>' +
+ '<label>Natural W x H: <input type="text" name="naturalWidth" value="" class="width" disabled="disabled"/> x ' +
+ '<input type="text" name="naturalHeight" value="" class="height" disabled="disabled"/></label>' +
+ '<input type="submit" class="button" value="Insert Image"/> ' +
+ '<input type="reset" value="Cancel"/></fieldset></form>',
+ img = {
+ alt: "",
+ self: Wysiwyg.dom.getElement("img"), // link to element node
+ src: "http://",
+ title: ""
+ },
+ elements,
+ dialog,
+ szURL;
+
+ 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 : "";
+ }
+
+ if ($.modal) {
+ elements = $(formImageHtml);
+ elements = self.makeForm(elements, img);
+
+ $.modal(elements, {
+ onShow: function (dialog) {
+ $("input:submit", dialog.data).click(function (e) {
+ e.preventDefault();
+ var image,
+ szURL = $('input[name="src"]', dialog.data).val(),
+ title = $('input[name="imgtitle"]', dialog.data).val(),
+ description = $('input[name="description"]', dialog.data).val(),
+ width = $('input[name="width"]', dialog).val(),
+ height = $('input[name="height"]', dialog).val(),
+ style = [];
+
+ if (img.self) {
+ // to preserve all img attributes
+ $(img.self).attr("src", szURL)
+ .attr("title", title)
+ .attr("alt", description);
+ if (width) {
+ $(img.self).attr("width", width);
+ }
+ if (height) {
+ $(img.self).attr("height", height);
+ }
+ } else {
+ if (width) {
+ style.push("width: " + width + "px;");
+ }
+ if (height) {
+ style.push("height: " + height + "px;");
+ }
+
+ if (style.length > 0) {
+ style = ' style="' + style.join(" ") + '"';
+ }
+
+ image = "<img src='" + szURL + "' title='" + title + "' alt='" + description + "'" + style + "/>";
+ Wysiwyg.insertHtml(image);
+ }
- if ($.modal) {
- elements = $(formImageHtml);
- elements.find('input[name="src"]').val(img.src);
- elements.find('input[name="imgtitle"]').val(img.title);
- elements.find('input[name="description"]').val(img.alt);
+ $.modal.close();
+ });
+ $("input:reset", dialog.data).click(function (e) {
+ e.preventDefault();
+ $.modal.close();
+ });
+ },
+ maxWidth: Wysiwyg.defaults.formWidth,
+ maxHeight: Wysiwyg.defaults.formHeight,
+ overlayClose: true
+ });
+ } else if ($.fn.dialog) {
+ elements = $(formImageHtml);
+ elements = self.makeForm(elements, img);
+
+ dialog = elements.appendTo("body");
+ dialog.dialog({
+ modal: true,
+ width: Wysiwyg.defaults.formWidth,
+ height: Wysiwyg.defaults.formHeight,
+ open: function (ev, ui) {
+ $("input:submit", dialog).click(function (e) {
+ e.preventDefault();
+ var image,
+ szURL = $('input[name="src"]', dialog).val(),
+ title = $('input[name="imgtitle"]', dialog).val(),
+ description = $('input[name="description"]', dialog).val(),
+ width = $('input[name="width"]', dialog).val(),
+ height = $('input[name="height"]', dialog).val(),
+ style = [];
+
+ if (img.self) {
+ // to preserve all img attributes
+ $(img.self).attr("src", szURL)
+ .attr("title", title)
+ .attr("alt", description);
+ if (width) {
+ $(img.self).attr("width", width);
+ }
+ if (height) {
+ $(img.self).attr("height", height);
+ }
+ } else {
+ if (width) {
+ style.push("width: " + width + "px;");
+ }
+ if (height) {
+ style.push("height: " + height + "px;");
+ }
+
+ if (style.length > 0) {
+ style = ' style="' + style.join(" ") + '"';
+ }
+
+ image = "<img src='" + szURL + "' title='" + title + "' alt='" + description + "'" + style + "/>";
+ Wysiwyg.insertHtml(image);
+ }
- $.modal(elements, {
- onShow: function (dialog) {
- $("input:submit", dialog.data).click(function (e) {
- e.preventDefault();
+ $(dialog).dialog("close");
+ });
+ $("input:reset", dialog).click(function (e) {
+ e.preventDefault();
+ $(dialog).dialog("close");
+ });
+ },
+ close: function (ev, ui) {
+ dialog.dialog("destroy");
+ }
+ });
+ } else {
+ if ($.browser.msie) {
+ Wysiwyg.ui.focus();
+ Wysiwyg.editorDoc.execCommand("insertImage", true, null);
+ } else {
+ elements = $("<div/>")
+ .css({"position": "absolute",
+ "z-index": 2000,
+ "left": "50%", "top": "50%", "background": "rgb(0, 0, 0)",
+ "margin-top": -1 * Math.round(Wysiwyg.defaults.formHeight / 2),
+ "margin-left": -1 * Math.round(Wysiwyg.defaults.formWidth / 2)})
+ .html(formImageHtml);
+ elements = self.makeForm(elements, img);
+
+ $("input:submit", elements).click(function (event) {
+ event.preventDefault();
+
var image,
- szURL = $('input[name="src"]', dialog.data).val(),
- title = $('input[name="imgtitle"]', dialog.data).val(),
- description = $('input[name="description"]', dialog.data).val();
-
+ szURL = $('input[name="src"]', elements).val(),
+ title = $('input[name="imgtitle"]', elements).val(),
+ description = $('input[name="description"]', elements).val(),
+ width = $('input[name="width"]', elements).val(),
+ height = $('input[name="height"]', elements).val(),
+ style = [];
+
if (img.self) {
// to preserve all img attributes
- $(img.self).attr("src", szURL).attr("title", title).attr("description", description);
+ $(img.self).attr("src", szURL)
+ .attr("title", title)
+ .attr("alt", description);
+ if (width) {
+ $(img.self).attr("width", width);
+ }
+ if (height) {
+ $(img.self).attr("height", height);
+ }
} else {
- image = "<img src='" + szURL + "' title='" + title + "' alt='" + description + "' />";
- self.insertHtml(image);
+ if (width) {
+ style.push("width: " + width + "px;");
+ }
+ if (height) {
+ style.push("height: " + height + "px;");
+ }
+
+ if (style.length > 0) {
+ style = ' style="' + style.join(" ") + '"';
+ }
+
+ image = "<img src='" + szURL + "' title='" + title + "' alt='" + description + "'" + style + "/>";
+ Wysiwyg.insertHtml(image);
}
- $.modal.close();
+
+ $(elements).remove();
});
- $("input:reset", dialog.data).click(function (e) {
- e.preventDefault();
- $.modal.close();
- });
- },
- maxWidth: self.defaults.formWidth,
- maxHeight: self.defaults.formHeight,
- overlayClose: true
- });
- } else if ($.fn.dialog) {
- elements = $(formImageHtml);
- elements.find("input[name=src]").val(img.src);
- elements.find("input[name=imgtitle]").val(img.title);
- elements.find("input[name=description]").val(img.alt);
-
- dialog = elements.appendTo("body");
- dialog.dialog({
- modal: true,
- width: self.defaults.formWidth,
- height: self.defaults.formHeight,
- open: function (ev, ui) {
- $("input:submit", dialog).click(function (e) {
- e.preventDefault();
- var image,
- szURL = $('input[name="src"]', dialog).val(),
- title = $('input[name="imgtitle"]', dialog).val(),
- description = $('input[name="description"]', dialog).val();
-
- if (img.self) {
- // to preserve all img attributes
- $(img.self).attr("src", szURL).attr("title", title).attr("description", description);
- } else {
- image = "<img src='" + szURL + "' title='" + title + "' alt='" + description + "' />";
- self.insertHtml(image);
+ $("input:reset", elements).click(function (event) {
+ event.preventDefault();
+
+ if ($.browser.msie) {
+ Wysiwyg.ui.returnRange();
}
- $(dialog).dialog("close");
- });
- $("input:reset", dialog).click(function (e) {
- e.preventDefault();
- $(dialog).dialog("close");
+
+ $(elements).remove();
});
- },
- close: function (ev, ui) {
- dialog.dialog("destroy");
- }
- });
- } else {
- if ($.browser.msie) {
- self.ui.focus();
- self.editorDoc.execCommand("insertImage", true, null);
- } else {
- szURL = window.prompt("URL", img.src);
- if (szURL && szURL.length > 0) {
- if (img.self) {
- // to preserve all img attributes
- $(img.self).attr("src", szURL);
- } else {
- self.editorDoc.execCommand("insertImage", false, szURL);
- }
+
+ $("body").append(elements);
}
}
- }
+
+ $(Wysiwyg.editorDoc).trigger("wysiwyg:refresh");
+ },
+
+ 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('img').attr("src", img.src);
+
+ form.find('img').bind("load", function () {
+ 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"));
+ }
+ });
- $(self.editorDoc).trigger("wysiwyg:refresh");
+ form.find("input[name=src]").bind("change", function () {
+ form.find('img').attr("src", this.value);
+ });
+
+ return form;
+ }
};
$.wysiwyg.insertImage = function (object, szURL, attributes) {
View
@@ -184,7 +184,7 @@
var self = this;
if ($.wysiwyg.controls && $.wysiwyg.controls.image) {
- $.wysiwyg.controls.image(this);
+ $.wysiwyg.controls.image.init(this);
} else if ($.wysiwyg.autoload) {
$.wysiwyg.autoload.control("wysiwyg.image.js", function () {
self.controls.insertImage.exec.apply(self);
View
@@ -2,28 +2,32 @@ form.wysiwyg {
background:#fff;
padding:1em;
border:1px solid #eee;
- margin:2px;
- width:25em;
+ margin:2px;
+ width:25em;
}
+
form.wysiwyg fieldset div {
margin:0.3em 0;
clear:both;
margin-bottom:5px;
}
+
form.wysiwyg label {
display: block;
- width:10em;
text-align:right;
margin-right:1em;
}
+
form.wysiwyg legend {
color:#0b77b7;
font-size:1.2em;
}
+
form.wysiwyg legend span {
width:10em;
text-align:right;
}
+
form.wysiwyg input {
padding:0.15em;
width:10em;
@@ -34,13 +38,20 @@ form.wysiwyg input {
-moz-border-radius:0.4em;
-khtml-border-radius:0.4em;
}
+
+form.wysiwyg input.width, form.wysiwyg input.height {
+ width: 4em;
+}
+
form.wysiwyg input:hover, form.wysiwyg input:focus {
border-color:#c5c5c5;
background:#f6f6f6;
-}
+}
+
form.wysiwyg .button{
margin-top:8px;
}
+
form.wysiwyg fieldset {
border:1px solid #ddd;
padding:0 0.5em 0.5em;

0 comments on commit 73ad22f

Please sign in to comment.