https://foodconnections.ca/js/admin/plugins/wysiwyg/wysiwyg.image.js

1/**
2 * Controls: Image plugin
3 *
4 * Depends on jWYSIWYG
5 */
6(function ($) {
7	"use strict";
8
9	if (undefined === $.wysiwyg) {
10		throw "wysiwyg.image.js depends on $.wysiwyg";
11	}
12
13	if (!$.wysiwyg.controls) {
14		$.wysiwyg.controls = {};
15	}
16
17	/*
18	 * Wysiwyg namespace: public properties and methods
19	 */
20	$.wysiwyg.controls.image = {
21		groupIndex: 6,
22		visible: true,
23		exec: function () {
24			$.wysiwyg.controls.image.init(this);
25		},
26		tags: ["img"],
27		tooltip: "Insert image",
28		init: function (Wysiwyg) {
29			var self = this, elements, adialog, dialog, formImageHtml, regexp, dialogReplacements, key, translation,
30				img = {
31					alt: "",
32					self: Wysiwyg.dom ? Wysiwyg.dom.getElement("img") : null, // link to element node
33					src: "http://",
34					title: ""
35				};
36
37			dialogReplacements = {
38				legend	: "Insert Image",
39				preview : "Preview",
40				url     : "URL",
41				title   : "Title",
42				description : "Description",
43				width   : "Width",
44				height  : "Height",
45				original : "Original W x H",
46				"float"	: "Float",
47				floatNone : "None",
48				floatLeft : "Left",
49				floatRight : "Right",
50				submit  : "Insert Image",
51				reset   : "Cancel",
52				fileManagerIcon : "Select file from server"
53			};
54
55			formImageHtml = '<form class="wysiwyg" id="wysiwyg-addImage"><fieldset>' +
56				'<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>' +
57				'<div class="form-row"><label for="name">{url}:</label><div class="form-row-value"><input type="text" name="src" value=""/>';
58
59			if ($.wysiwyg.fileManager && $.wysiwyg.fileManager.ready) {
60				// Add the File Manager icon:
61				formImageHtml += '<div class="wysiwyg-fileManager" title="{fileManagerIcon}"/>';
62			}
63
64			formImageHtml += '</div></div>' +
65				'<div class="form-row"><label for="name">{title}:</label><div class="form-row-value"><input type="text" name="imgtitle" value=""/></div></div>' +
66				'<div class="form-row"><label for="name">{description}:</label><div class="form-row-value"><input type="text" name="description" value=""/></div></div>' +
67				'<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>' +
68				'<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 ' +
69				'<input type="text" name="naturalHeight" value="" class="width-small" disabled="disabled"/></div></div>' +
70				'<div class="form-row"><label for="name">{float}:</label><div class="form-row-value"><select name="float">' +
71				'<option value="">{floatNone}</option>' +
72				'<option value="left">{floatLeft}</option>' +
73				'<option value="right">{floatRight}</option></select></div></div>' +
74				'<div class="form-row form-row-last"><label for="name"></label><div class="form-row-value"><input type="submit" class="button" value="{submit}"/> ' +
75				'<input type="reset" value="{reset}"/></div></div></fieldset></form>';
76
77			for (key in dialogReplacements) {
78				if ($.wysiwyg.i18n) {
79					translation = $.wysiwyg.i18n.t(dialogReplacements[key], "dialogs.image");
80
81					if (translation === dialogReplacements[key]) { // if not translated search in dialogs 
82						translation = $.wysiwyg.i18n.t(dialogReplacements[key], "dialogs");
83					}
84
85					dialogReplacements[key] = translation;
86				}
87
88				regexp = new RegExp("{" + key + "}", "g");
89				formImageHtml = formImageHtml.replace(regexp, dialogReplacements[key]);
90			}
91
92			if (img.self) {
93				img.src    = img.self.src    ? img.self.src    : "";
94				img.alt    = img.self.alt    ? img.self.alt    : "";
95				img.title  = img.self.title  ? img.self.title  : "";
96				img.width  = img.self.width  ? img.self.width  : "";
97				img.height = img.self.height ? img.self.height : "";
98				img.styleFloat = $(img.self).css("float");
99			}
100
101			adialog = new $.wysiwyg.dialog(Wysiwyg, {
102				"title"   : dialogReplacements.legend,
103				"content" : formImageHtml
104			});
105
106			$(adialog).bind("afterOpen", function (e, dialog) {
107				dialog.find("form#wysiwyg-addImage").submit(function (e) {
108					e.preventDefault();
109					self.processInsert(dialog.container, Wysiwyg, img);
110
111					adialog.close();
112					return false;

113				});
114
115				// File Manager (select file):
116				if ($.wysiwyg.fileManager) {
117					$("div.wysiwyg-fileManager").bind("click", function () {
118						$.wysiwyg.fileManager.init(function (selected) {
119							dialog.find("input[name=src]").val(selected);
120							dialog.find("input[name=src]").trigger("change");
121						});
122					});
123				}
124
125				$("input:reset", dialog).click(function (e) {
126					adialog.close();
127
128					return false;
129				});
130
131				$("fieldset", dialog).click(function (e) {
132					e.stopPropagation();
133				});
134
135				self.makeForm(dialog, img);
136			});
137
138			adialog.open();
139
140			$(Wysiwyg.editorDoc).trigger("editorRefresh.wysiwyg");
141		},
142
143		processInsert: function (context, Wysiwyg, img) {
144			var image,
145				url = $('input[name="src"]', context).val(),
146				title = $('input[name="imgtitle"]', context).val(),
147				description = $('input[name="description"]', context).val(),
148				width = $('input[name="width"]', context).val(),
149				height = $('input[name="height"]', context).val(),
150				styleFloat = $('select[name="float"]', context).val(),
151				styles = [],
152				style = "",
153				found,
154				baseUrl;
155
156			if (Wysiwyg.options.controlImage && Wysiwyg.options.controlImage.forceRelativeUrls) {
157				baseUrl = window.location.protocol + "//" + window.location.hostname
158					+ (window.location.port ? ":" + window.location.port : "");
159				if (0 === url.indexOf(baseUrl)) {
160					url = url.substr(baseUrl.length);
161				}
162			}
163
164			if (img.self) {
165				// to preserve all img attributes
166				$(img.self).attr("src", url)
167					.attr("title", title)
168					.attr("alt", description)
169					.css("float", styleFloat);
170
171				if (width.toString().match(/^[0-9]+(px|%)?$/)) {
172					$(img.self).css("width", width);
173				} else {
174					$(img.self).css("width", "");
175				}
176
177				if (height.toString().match(/^[0-9]+(px|%)?$/)) {
178					$(img.self).css("height", height);
179				} else {
180					$(img.self).css("height", "");
181				}
182
183				Wysiwyg.saveContent();
184			} else {
185				found = width.toString().match(/^[0-9]+(px|%)?$/);
186				if (found) {
187					if (found[1]) {
188						styles.push("width: " + width + ";");
189					} else {
190						styles.push("width: " + width + "px;");
191					}
192				}
193
194				found = height.toString().match(/^[0-9]+(px|%)?$/);
195				if (found) {
196					if (found[1]) {
197						styles.push("height: " + height + ";");
198					} else {
199						styles.push("height: " + height + "px;");
200					}
201				}
202
203				if (styleFloat.length > 0) {
204					styles.push("float: " + styleFloat + ";");
205				}
206
207				if (styles.length > 0) {
208					style = ' style="' + styles.join(" ") + '"';
209				}
210
211				image = "<img src='" + url + "' title='" + title + "' alt='" + description + "'" + style + "/>";
212				Wysiwyg.insertHtml(image);
213			}
214		},
215
216		makeForm: function (form, img) {
217			form.find("input[name=src]").val(img.src);
218			form.find("input[name=imgtitle]").val(img.title);
219			form.find("input[name=description]").val(img.alt);
220			form.find('input[name="width"]').val(img.width);
221			form.find('input[name="height"]').val(img.height);
222			form.find('select[name="float"]').val(img.styleFloat);
223			form.find('img').attr("src", img.src);
224
225			form.find('img').bind("load", function () {
226				if (form.find('img').get(0).naturalWidth) {
227					form.find('input[name="naturalWidth"]').val(form.find('img').get(0).naturalWidth);
228					form.find('input[name="naturalHeight"]').val(form.find('img').get(0).naturalHeight);
229				} else if (form.find('img').attr("naturalWidth")) {
230					form.find('input[name="naturalWidth"]').val(form.find('img').attr("naturalWidth"));
231					form.find('input[name="naturalHeight"]').val(form.find('img').attr("naturalHeight"));
232				}
233			});
234
235			form.find("input[name=src]").bind("change", function () {
236				form.find('img').attr("src", this.value);
237			});
238
239			return form;
240		}
241	};
242
243	$.wysiwyg.insertImage = function (object, url, attributes) {
244		return object.each(function () {
245			var Wysiwyg = $(this).data("wysiwyg"),
246				image,
247				attribute;
248
249			if (!Wysiwyg) {
250				return this;
251			}
252
253			if (!url || url.length === 0) {
254				return this;
255			}
256
257			if ($.browser.msie) {
258				Wysiwyg.ui.focus();
259			}
260
261			if (attributes) {
262				Wysiwyg.editorDoc.execCommand("insertImage", false, "#jwysiwyg#");
263				image = Wysiwyg.getElementByAttributeValue("img", "src", "#jwysiwyg#");
264
265				if (image) {
266					image.src = url;
267
268					for (attribute in attributes) {
269						if (attributes.hasOwnProperty(attribute)) {
270							image.setAttribute(attribute, attributes[attribute]);
271						}
272					}
273				}
274			} else {
275				Wysiwyg.editorDoc.execCommand("insertImage", false, url);
276			}
277
278			Wysiwyg.saveContent();
279
280			$(Wysiwyg.editorDoc).trigger("editorRefresh.wysiwyg");
281
282			return this;
283		});
284	};
285})(jQuery);