|
1 /** |
|
2 * plugin.js |
|
3 * |
|
4 * Copyright, Moxiecode Systems AB |
|
5 * Released under LGPL License. |
|
6 * |
|
7 * License: http://www.tinymce.com/license |
|
8 * Contributing: http://www.tinymce.com/contributing |
|
9 */ |
|
10 |
|
11 /*global tinymce:true */ |
|
12 |
|
13 tinymce.PluginManager.add('image', function(editor) { |
|
14 function getImageSize(url, callback) { |
|
15 var img = document.createElement('img'); |
|
16 |
|
17 function done(width, height) { |
|
18 if (img.parentNode) { |
|
19 img.parentNode.removeChild(img); |
|
20 } |
|
21 |
|
22 callback({width: width, height: height}); |
|
23 } |
|
24 |
|
25 img.onload = function() { |
|
26 done(img.clientWidth, img.clientHeight); |
|
27 }; |
|
28 |
|
29 img.onerror = function() { |
|
30 done(); |
|
31 }; |
|
32 |
|
33 var style = img.style; |
|
34 style.visibility = 'hidden'; |
|
35 style.position = 'fixed'; |
|
36 style.bottom = style.left = 0; |
|
37 style.width = style.height = 'auto'; |
|
38 |
|
39 document.body.appendChild(img); |
|
40 img.src = url; |
|
41 } |
|
42 |
|
43 function buildListItems(inputList, itemCallback, startItems) { |
|
44 function appendItems(values, output) { |
|
45 output = output || []; |
|
46 |
|
47 tinymce.each(values, function(item) { |
|
48 var menuItem = {text: item.text || item.title}; |
|
49 |
|
50 if (item.menu) { |
|
51 menuItem.menu = appendItems(item.menu); |
|
52 } else { |
|
53 menuItem.value = item.value; |
|
54 itemCallback(menuItem); |
|
55 } |
|
56 |
|
57 output.push(menuItem); |
|
58 }); |
|
59 |
|
60 return output; |
|
61 } |
|
62 |
|
63 return appendItems(inputList, startItems || []); |
|
64 } |
|
65 |
|
66 function createImageList(callback) { |
|
67 return function() { |
|
68 var imageList = editor.settings.image_list; |
|
69 |
|
70 if (typeof imageList == "string") { |
|
71 tinymce.util.XHR.send({ |
|
72 url: imageList, |
|
73 success: function(text) { |
|
74 callback(tinymce.util.JSON.parse(text)); |
|
75 } |
|
76 }); |
|
77 } else if (typeof imageList == "function") { |
|
78 imageList(callback); |
|
79 } else { |
|
80 callback(imageList); |
|
81 } |
|
82 }; |
|
83 } |
|
84 |
|
85 function showDialog(imageList) { |
|
86 var win, data = {}, dom = editor.dom, imgElm = editor.selection.getNode(); |
|
87 var width, height, imageListCtrl, classListCtrl, imageDimensions = editor.settings.image_dimensions !== false; |
|
88 |
|
89 function recalcSize() { |
|
90 var widthCtrl, heightCtrl, newWidth, newHeight; |
|
91 |
|
92 widthCtrl = win.find('#width')[0]; |
|
93 heightCtrl = win.find('#height')[0]; |
|
94 |
|
95 if (!widthCtrl || !heightCtrl) { |
|
96 return; |
|
97 } |
|
98 |
|
99 newWidth = widthCtrl.value(); |
|
100 newHeight = heightCtrl.value(); |
|
101 |
|
102 if (win.find('#constrain')[0].checked() && width && height && newWidth && newHeight) { |
|
103 if (width != newWidth) { |
|
104 newHeight = Math.round((newWidth / width) * newHeight); |
|
105 |
|
106 if (!isNaN(newHeight)) { |
|
107 heightCtrl.value(newHeight); |
|
108 } |
|
109 } else { |
|
110 newWidth = Math.round((newHeight / height) * newWidth); |
|
111 |
|
112 if (!isNaN(newWidth)) { |
|
113 widthCtrl.value(newWidth); |
|
114 } |
|
115 } |
|
116 } |
|
117 |
|
118 width = newWidth; |
|
119 height = newHeight; |
|
120 } |
|
121 |
|
122 function onSubmitForm() { |
|
123 function waitLoad(imgElm) { |
|
124 function selectImage() { |
|
125 imgElm.onload = imgElm.onerror = null; |
|
126 |
|
127 if (editor.selection) { |
|
128 editor.selection.select(imgElm); |
|
129 editor.nodeChanged(); |
|
130 } |
|
131 } |
|
132 |
|
133 imgElm.onload = function() { |
|
134 if (!data.width && !data.height && imageDimensions) { |
|
135 dom.setAttribs(imgElm, { |
|
136 width: imgElm.clientWidth, |
|
137 height: imgElm.clientHeight |
|
138 }); |
|
139 } |
|
140 |
|
141 selectImage(); |
|
142 }; |
|
143 |
|
144 imgElm.onerror = selectImage; |
|
145 } |
|
146 |
|
147 updateStyle(); |
|
148 recalcSize(); |
|
149 |
|
150 data = tinymce.extend(data, win.toJSON()); |
|
151 |
|
152 if (!data.alt) { |
|
153 data.alt = ''; |
|
154 } |
|
155 |
|
156 if (!data.title) { |
|
157 data.title = ''; |
|
158 } |
|
159 |
|
160 if (data.width === '') { |
|
161 data.width = null; |
|
162 } |
|
163 |
|
164 if (data.height === '') { |
|
165 data.height = null; |
|
166 } |
|
167 |
|
168 if (!data.style) { |
|
169 data.style = null; |
|
170 } |
|
171 |
|
172 // Setup new data excluding style properties |
|
173 /*eslint dot-notation: 0*/ |
|
174 data = { |
|
175 src: data.src, |
|
176 alt: data.alt, |
|
177 title: data.title, |
|
178 width: data.width, |
|
179 height: data.height, |
|
180 style: data.style, |
|
181 "class": data["class"] |
|
182 }; |
|
183 |
|
184 editor.undoManager.transact(function() { |
|
185 if (!data.src) { |
|
186 if (imgElm) { |
|
187 dom.remove(imgElm); |
|
188 editor.focus(); |
|
189 editor.nodeChanged(); |
|
190 } |
|
191 |
|
192 return; |
|
193 } |
|
194 |
|
195 if (data.title === "") { |
|
196 data.title = null; |
|
197 } |
|
198 |
|
199 if (!imgElm) { |
|
200 data.id = '__mcenew'; |
|
201 editor.focus(); |
|
202 editor.selection.setContent(dom.createHTML('img', data)); |
|
203 imgElm = dom.get('__mcenew'); |
|
204 dom.setAttrib(imgElm, 'id', null); |
|
205 } else { |
|
206 dom.setAttribs(imgElm, data); |
|
207 } |
|
208 |
|
209 waitLoad(imgElm); |
|
210 }); |
|
211 } |
|
212 |
|
213 function removePixelSuffix(value) { |
|
214 if (value) { |
|
215 value = value.replace(/px$/, ''); |
|
216 } |
|
217 |
|
218 return value; |
|
219 } |
|
220 |
|
221 function srcChange(e) { |
|
222 var srcURL, prependURL, absoluteURLPattern, meta = e.meta || {}; |
|
223 |
|
224 if (imageListCtrl) { |
|
225 imageListCtrl.value(editor.convertURL(this.value(), 'src')); |
|
226 } |
|
227 |
|
228 tinymce.each(meta, function(value, key) { |
|
229 win.find('#' + key).value(value); |
|
230 }); |
|
231 |
|
232 if (!meta.width && !meta.height) { |
|
233 srcURL = editor.convertURL(this.value(), 'src'); |
|
234 |
|
235 // Pattern test the src url and make sure we haven't already prepended the url |
|
236 prependURL = editor.settings.image_prepend_url; |
|
237 absoluteURLPattern = new RegExp('^(?:[a-z]+:)?//', 'i'); |
|
238 if (prependURL && !absoluteURLPattern.test(srcURL) && srcURL.substring(0, prependURL.length) !== prependURL) { |
|
239 srcURL = prependURL + srcURL; |
|
240 } |
|
241 |
|
242 this.value(srcURL); |
|
243 |
|
244 getImageSize(editor.documentBaseURI.toAbsolute(this.value()), function(data) { |
|
245 if (data.width && data.height && imageDimensions) { |
|
246 width = data.width; |
|
247 height = data.height; |
|
248 |
|
249 win.find('#width').value(width); |
|
250 win.find('#height').value(height); |
|
251 } |
|
252 }); |
|
253 } |
|
254 } |
|
255 |
|
256 width = dom.getAttrib(imgElm, 'width'); |
|
257 height = dom.getAttrib(imgElm, 'height'); |
|
258 |
|
259 if (imgElm.nodeName == 'IMG' && !imgElm.getAttribute('data-mce-object') && !imgElm.getAttribute('data-mce-placeholder')) { |
|
260 data = { |
|
261 src: dom.getAttrib(imgElm, 'src'), |
|
262 alt: dom.getAttrib(imgElm, 'alt'), |
|
263 title: dom.getAttrib(imgElm, 'title'), |
|
264 "class": dom.getAttrib(imgElm, 'class'), |
|
265 width: width, |
|
266 height: height |
|
267 }; |
|
268 } else { |
|
269 imgElm = null; |
|
270 } |
|
271 |
|
272 if (imageList) { |
|
273 imageListCtrl = { |
|
274 type: 'listbox', |
|
275 label: 'Image list', |
|
276 values: buildListItems( |
|
277 imageList, |
|
278 function(item) { |
|
279 item.value = editor.convertURL(item.value || item.url, 'src'); |
|
280 }, |
|
281 [{text: 'None', value: ''}] |
|
282 ), |
|
283 value: data.src && editor.convertURL(data.src, 'src'), |
|
284 onselect: function(e) { |
|
285 var altCtrl = win.find('#alt'); |
|
286 |
|
287 if (!altCtrl.value() || (e.lastControl && altCtrl.value() == e.lastControl.text())) { |
|
288 altCtrl.value(e.control.text()); |
|
289 } |
|
290 |
|
291 win.find('#src').value(e.control.value()).fire('change'); |
|
292 }, |
|
293 onPostRender: function() { |
|
294 imageListCtrl = this; |
|
295 } |
|
296 }; |
|
297 } |
|
298 |
|
299 if (editor.settings.image_class_list) { |
|
300 classListCtrl = { |
|
301 name: 'class', |
|
302 type: 'listbox', |
|
303 label: 'Class', |
|
304 values: buildListItems( |
|
305 editor.settings.image_class_list, |
|
306 function(item) { |
|
307 if (item.value) { |
|
308 item.textStyle = function() { |
|
309 return editor.formatter.getCssText({inline: 'img', classes: [item.value]}); |
|
310 }; |
|
311 } |
|
312 } |
|
313 ) |
|
314 }; |
|
315 } |
|
316 |
|
317 // General settings shared between simple and advanced dialogs |
|
318 var generalFormItems = [ |
|
319 { |
|
320 name: 'src', |
|
321 type: 'filepicker', |
|
322 filetype: 'image', |
|
323 label: 'Source', |
|
324 autofocus: true, |
|
325 onchange: srcChange |
|
326 }, |
|
327 imageListCtrl |
|
328 ]; |
|
329 |
|
330 if (editor.settings.image_description !== false) { |
|
331 generalFormItems.push({name: 'alt', type: 'textbox', label: 'Image description'}); |
|
332 } |
|
333 |
|
334 if (editor.settings.image_title) { |
|
335 generalFormItems.push({name: 'title', type: 'textbox', label: 'Image Title'}); |
|
336 } |
|
337 |
|
338 if (imageDimensions) { |
|
339 generalFormItems.push({ |
|
340 type: 'container', |
|
341 label: 'Dimensions', |
|
342 layout: 'flex', |
|
343 direction: 'row', |
|
344 align: 'center', |
|
345 spacing: 5, |
|
346 items: [ |
|
347 {name: 'width', type: 'textbox', maxLength: 5, size: 3, onchange: recalcSize, ariaLabel: 'Width'}, |
|
348 {type: 'label', text: 'x'}, |
|
349 {name: 'height', type: 'textbox', maxLength: 5, size: 3, onchange: recalcSize, ariaLabel: 'Height'}, |
|
350 {name: 'constrain', type: 'checkbox', checked: true, text: 'Constrain proportions'} |
|
351 ] |
|
352 }); |
|
353 } |
|
354 |
|
355 generalFormItems.push(classListCtrl); |
|
356 |
|
357 function mergeMargins(css) { |
|
358 if (css.margin) { |
|
359 |
|
360 var splitMargin = css.margin.split(" "); |
|
361 |
|
362 switch (splitMargin.length) { |
|
363 case 1: //margin: toprightbottomleft; |
|
364 css['margin-top'] = css['margin-top'] || splitMargin[0]; |
|
365 css['margin-right'] = css['margin-right'] || splitMargin[0]; |
|
366 css['margin-bottom'] = css['margin-bottom'] || splitMargin[0]; |
|
367 css['margin-left'] = css['margin-left'] || splitMargin[0]; |
|
368 break; |
|
369 case 2: //margin: topbottom rightleft; |
|
370 css['margin-top'] = css['margin-top'] || splitMargin[0]; |
|
371 css['margin-right'] = css['margin-right'] || splitMargin[1]; |
|
372 css['margin-bottom'] = css['margin-bottom'] || splitMargin[0]; |
|
373 css['margin-left'] = css['margin-left'] || splitMargin[1]; |
|
374 break; |
|
375 case 3: //margin: top rightleft bottom; |
|
376 css['margin-top'] = css['margin-top'] || splitMargin[0]; |
|
377 css['margin-right'] = css['margin-right'] || splitMargin[1]; |
|
378 css['margin-bottom'] = css['margin-bottom'] || splitMargin[2]; |
|
379 css['margin-left'] = css['margin-left'] || splitMargin[1]; |
|
380 break; |
|
381 case 4: //margin: top right bottom left; |
|
382 css['margin-top'] = css['margin-top'] || splitMargin[0]; |
|
383 css['margin-right'] = css['margin-right'] || splitMargin[1]; |
|
384 css['margin-bottom'] = css['margin-bottom'] || splitMargin[2]; |
|
385 css['margin-left'] = css['margin-left'] || splitMargin[3]; |
|
386 } |
|
387 delete css.margin; |
|
388 } |
|
389 return css; |
|
390 } |
|
391 |
|
392 function updateStyle() { |
|
393 function addPixelSuffix(value) { |
|
394 if (value.length > 0 && /^[0-9]+$/.test(value)) { |
|
395 value += 'px'; |
|
396 } |
|
397 |
|
398 return value; |
|
399 } |
|
400 |
|
401 if (!editor.settings.image_advtab) { |
|
402 return; |
|
403 } |
|
404 |
|
405 var data = win.toJSON(), |
|
406 css = dom.parseStyle(data.style); |
|
407 |
|
408 css = mergeMargins(css); |
|
409 |
|
410 if (data.vspace) { |
|
411 css['margin-top'] = css['margin-bottom'] = addPixelSuffix(data.vspace); |
|
412 } |
|
413 if (data.hspace) { |
|
414 css['margin-left'] = css['margin-right'] = addPixelSuffix(data.hspace); |
|
415 } |
|
416 if (data.border) { |
|
417 css['border-width'] = addPixelSuffix(data.border); |
|
418 } |
|
419 |
|
420 win.find('#style').value(dom.serializeStyle(dom.parseStyle(dom.serializeStyle(css)))); |
|
421 } |
|
422 |
|
423 function updateVSpaceHSpaceBorder() { |
|
424 if (!editor.settings.image_advtab) { |
|
425 return; |
|
426 } |
|
427 |
|
428 var data = win.toJSON(), |
|
429 css = dom.parseStyle(data.style); |
|
430 |
|
431 win.find('#vspace').value(""); |
|
432 win.find('#hspace').value(""); |
|
433 |
|
434 css = mergeMargins(css); |
|
435 |
|
436 //Move opposite equal margins to vspace/hspace field |
|
437 if ((css['margin-top'] && css['margin-bottom']) || (css['margin-right'] && css['margin-left'])) { |
|
438 if (css['margin-top'] === css['margin-bottom']) { |
|
439 win.find('#vspace').value(removePixelSuffix(css['margin-top'])); |
|
440 } else { |
|
441 win.find('#vspace').value(''); |
|
442 } |
|
443 if (css['margin-right'] === css['margin-left']) { |
|
444 win.find('#hspace').value(removePixelSuffix(css['margin-right'])); |
|
445 } else { |
|
446 win.find('#hspace').value(''); |
|
447 } |
|
448 } |
|
449 |
|
450 //Move border-width |
|
451 if (css['border-width']) { |
|
452 win.find('#border').value(removePixelSuffix(css['border-width'])); |
|
453 } |
|
454 |
|
455 win.find('#style').value(dom.serializeStyle(dom.parseStyle(dom.serializeStyle(css)))); |
|
456 |
|
457 } |
|
458 |
|
459 if (editor.settings.image_advtab) { |
|
460 // Parse styles from img |
|
461 if (imgElm) { |
|
462 if (imgElm.style.marginLeft && imgElm.style.marginRight && imgElm.style.marginLeft === imgElm.style.marginRight) { |
|
463 data.hspace = removePixelSuffix(imgElm.style.marginLeft); |
|
464 } |
|
465 if (imgElm.style.marginTop && imgElm.style.marginBottom && imgElm.style.marginTop === imgElm.style.marginBottom) { |
|
466 data.vspace = removePixelSuffix(imgElm.style.marginTop); |
|
467 } |
|
468 if (imgElm.style.borderWidth) { |
|
469 data.border = removePixelSuffix(imgElm.style.borderWidth); |
|
470 } |
|
471 |
|
472 data.style = editor.dom.serializeStyle(editor.dom.parseStyle(editor.dom.getAttrib(imgElm, 'style'))); |
|
473 } |
|
474 |
|
475 // Advanced dialog shows general+advanced tabs |
|
476 win = editor.windowManager.open({ |
|
477 title: 'Insert/edit image', |
|
478 data: data, |
|
479 bodyType: 'tabpanel', |
|
480 body: [ |
|
481 { |
|
482 title: 'General', |
|
483 type: 'form', |
|
484 items: generalFormItems |
|
485 }, |
|
486 |
|
487 { |
|
488 title: 'Advanced', |
|
489 type: 'form', |
|
490 pack: 'start', |
|
491 items: [ |
|
492 { |
|
493 label: 'Style', |
|
494 name: 'style', |
|
495 type: 'textbox', |
|
496 onchange: updateVSpaceHSpaceBorder |
|
497 }, |
|
498 { |
|
499 type: 'form', |
|
500 layout: 'grid', |
|
501 packV: 'start', |
|
502 columns: 2, |
|
503 padding: 0, |
|
504 alignH: ['left', 'right'], |
|
505 defaults: { |
|
506 type: 'textbox', |
|
507 maxWidth: 50, |
|
508 onchange: updateStyle |
|
509 }, |
|
510 items: [ |
|
511 {label: 'Vertical space', name: 'vspace'}, |
|
512 {label: 'Horizontal space', name: 'hspace'}, |
|
513 {label: 'Border', name: 'border'} |
|
514 ] |
|
515 } |
|
516 ] |
|
517 } |
|
518 ], |
|
519 onSubmit: onSubmitForm |
|
520 }); |
|
521 } else { |
|
522 // Simple default dialog |
|
523 win = editor.windowManager.open({ |
|
524 title: 'Insert/edit image', |
|
525 data: data, |
|
526 body: generalFormItems, |
|
527 onSubmit: onSubmitForm |
|
528 }); |
|
529 } |
|
530 } |
|
531 |
|
532 editor.addButton('image', { |
|
533 icon: 'image', |
|
534 tooltip: 'Insert/edit image', |
|
535 onclick: createImageList(showDialog), |
|
536 stateSelector: 'img:not([data-mce-object],[data-mce-placeholder])' |
|
537 }); |
|
538 |
|
539 editor.addMenuItem('image', { |
|
540 icon: 'image', |
|
541 text: 'Insert/edit image', |
|
542 onclick: createImageList(showDialog), |
|
543 context: 'insert', |
|
544 prependToContext: true |
|
545 }); |
|
546 |
|
547 editor.addCommand('mceImage', createImageList(showDialog)); |
|
548 }); |