1 /** |
1 (function () { |
2 * plugin.js |
2 var image = (function () { |
3 * |
3 'use strict'; |
4 * Copyright, Moxiecode Systems AB |
4 |
5 * Released under LGPL License. |
5 var global = tinymce.util.Tools.resolve('tinymce.PluginManager'); |
6 * |
6 |
7 * License: http://www.tinymce.com/license |
7 var hasDimensions = function (editor) { |
8 * Contributing: http://www.tinymce.com/contributing |
8 return editor.settings.image_dimensions === false ? false : true; |
9 */ |
9 }; |
10 |
10 var hasAdvTab = function (editor) { |
11 /*global tinymce:true */ |
11 return editor.settings.image_advtab === true ? true : false; |
12 |
12 }; |
13 tinymce.PluginManager.add('image', function(editor) { |
13 var getPrependUrl = function (editor) { |
14 function getImageSize(url, callback) { |
14 return editor.getParam('image_prepend_url', ''); |
15 var img = document.createElement('img'); |
15 }; |
16 |
16 var getClassList = function (editor) { |
17 function done(width, height) { |
17 return editor.getParam('image_class_list'); |
18 if (img.parentNode) { |
18 }; |
19 img.parentNode.removeChild(img); |
19 var hasDescription = function (editor) { |
20 } |
20 return editor.settings.image_description === false ? false : true; |
21 |
21 }; |
22 callback({width: width, height: height}); |
22 var hasImageTitle = function (editor) { |
23 } |
23 return editor.settings.image_title === true ? true : false; |
24 |
24 }; |
25 img.onload = function() { |
25 var hasImageCaption = function (editor) { |
26 done(img.clientWidth, img.clientHeight); |
26 return editor.settings.image_caption === true ? true : false; |
27 }; |
27 }; |
28 |
28 var getImageList = function (editor) { |
29 img.onerror = function() { |
29 return editor.getParam('image_list', false); |
30 done(); |
30 }; |
31 }; |
31 var hasUploadUrl = function (editor) { |
32 |
32 return editor.getParam('images_upload_url', false); |
33 var style = img.style; |
33 }; |
34 style.visibility = 'hidden'; |
34 var hasUploadHandler = function (editor) { |
35 style.position = 'fixed'; |
35 return editor.getParam('images_upload_handler', false); |
36 style.bottom = style.left = 0; |
36 }; |
37 style.width = style.height = 'auto'; |
37 var getUploadUrl = function (editor) { |
38 |
38 return editor.getParam('images_upload_url'); |
39 document.body.appendChild(img); |
39 }; |
40 img.src = url; |
40 var getUploadHandler = function (editor) { |
41 } |
41 return editor.getParam('images_upload_handler'); |
42 |
42 }; |
43 function buildListItems(inputList, itemCallback, startItems) { |
43 var getUploadBasePath = function (editor) { |
44 function appendItems(values, output) { |
44 return editor.getParam('images_upload_base_path'); |
45 output = output || []; |
45 }; |
46 |
46 var getUploadCredentials = function (editor) { |
47 tinymce.each(values, function(item) { |
47 return editor.getParam('images_upload_credentials'); |
48 var menuItem = {text: item.text || item.title}; |
48 }; |
49 |
49 var $_1dn8wtctjjgwebvz = { |
50 if (item.menu) { |
50 hasDimensions: hasDimensions, |
51 menuItem.menu = appendItems(item.menu); |
51 hasAdvTab: hasAdvTab, |
52 } else { |
52 getPrependUrl: getPrependUrl, |
53 menuItem.value = item.value; |
53 getClassList: getClassList, |
54 itemCallback(menuItem); |
54 hasDescription: hasDescription, |
55 } |
55 hasImageTitle: hasImageTitle, |
56 |
56 hasImageCaption: hasImageCaption, |
57 output.push(menuItem); |
57 getImageList: getImageList, |
58 }); |
58 hasUploadUrl: hasUploadUrl, |
59 |
59 hasUploadHandler: hasUploadHandler, |
60 return output; |
60 getUploadUrl: getUploadUrl, |
61 } |
61 getUploadHandler: getUploadHandler, |
62 |
62 getUploadBasePath: getUploadBasePath, |
63 return appendItems(inputList, startItems || []); |
63 getUploadCredentials: getUploadCredentials |
64 } |
64 }; |
65 |
65 |
66 function createImageList(callback) { |
66 var Global = typeof window !== 'undefined' ? window : Function('return this;')(); |
67 return function() { |
67 |
68 var imageList = editor.settings.image_list; |
68 var path = function (parts, scope) { |
69 |
69 var o = scope !== undefined && scope !== null ? scope : Global; |
70 if (typeof imageList == "string") { |
70 for (var i = 0; i < parts.length && o !== undefined && o !== null; ++i) |
71 tinymce.util.XHR.send({ |
71 o = o[parts[i]]; |
72 url: imageList, |
72 return o; |
73 success: function(text) { |
73 }; |
74 callback(tinymce.util.JSON.parse(text)); |
74 var resolve = function (p, scope) { |
75 } |
75 var parts = p.split('.'); |
76 }); |
76 return path(parts, scope); |
77 } else if (typeof imageList == "function") { |
77 }; |
78 imageList(callback); |
78 |
79 } else { |
79 var unsafe = function (name, scope) { |
80 callback(imageList); |
80 return resolve(name, scope); |
81 } |
81 }; |
82 }; |
82 var getOrDie = function (name, scope) { |
83 } |
83 var actual = unsafe(name, scope); |
84 |
84 if (actual === undefined || actual === null) |
85 function showDialog(imageList) { |
85 throw name + ' not available on this browser'; |
86 var win, data = {}, dom = editor.dom, imgElm = editor.selection.getNode(); |
86 return actual; |
87 var width, height, imageListCtrl, classListCtrl, imageDimensions = editor.settings.image_dimensions !== false; |
87 }; |
88 |
88 var $_oab1bcwjjgwebwl = { getOrDie: getOrDie }; |
89 function recalcSize() { |
89 |
90 var widthCtrl, heightCtrl, newWidth, newHeight; |
90 function FileReader () { |
91 |
91 var f = $_oab1bcwjjgwebwl.getOrDie('FileReader'); |
92 widthCtrl = win.find('#width')[0]; |
92 return new f(); |
93 heightCtrl = win.find('#height')[0]; |
93 } |
94 |
94 |
95 if (!widthCtrl || !heightCtrl) { |
95 var global$1 = tinymce.util.Tools.resolve('tinymce.util.Promise'); |
96 return; |
96 |
97 } |
97 var global$2 = tinymce.util.Tools.resolve('tinymce.util.Tools'); |
98 |
98 |
99 newWidth = widthCtrl.value(); |
99 var global$3 = tinymce.util.Tools.resolve('tinymce.util.XHR'); |
100 newHeight = heightCtrl.value(); |
100 |
101 |
101 var parseIntAndGetMax = function (val1, val2) { |
102 if (win.find('#constrain')[0].checked() && width && height && newWidth && newHeight) { |
102 return Math.max(parseInt(val1, 10), parseInt(val2, 10)); |
103 if (width != newWidth) { |
103 }; |
104 newHeight = Math.round((newWidth / width) * newHeight); |
104 var getImageSize = function (url, callback) { |
105 |
105 var img = document.createElement('img'); |
106 if (!isNaN(newHeight)) { |
106 function done(width, height) { |
107 heightCtrl.value(newHeight); |
107 if (img.parentNode) { |
108 } |
108 img.parentNode.removeChild(img); |
109 } else { |
109 } |
110 newWidth = Math.round((newHeight / height) * newWidth); |
110 callback({ |
111 |
111 width: width, |
112 if (!isNaN(newWidth)) { |
112 height: height |
113 widthCtrl.value(newWidth); |
113 }); |
114 } |
114 } |
115 } |
115 img.onload = function () { |
116 } |
116 var width = parseIntAndGetMax(img.width, img.clientWidth); |
117 |
117 var height = parseIntAndGetMax(img.height, img.clientHeight); |
118 width = newWidth; |
118 done(width, height); |
119 height = newHeight; |
119 }; |
120 } |
120 img.onerror = function () { |
121 |
121 done(0, 0); |
122 function onSubmitForm() { |
122 }; |
123 function waitLoad(imgElm) { |
123 var style = img.style; |
124 function selectImage() { |
124 style.visibility = 'hidden'; |
125 imgElm.onload = imgElm.onerror = null; |
125 style.position = 'fixed'; |
126 |
126 style.bottom = style.left = '0px'; |
127 if (editor.selection) { |
127 style.width = style.height = 'auto'; |
128 editor.selection.select(imgElm); |
128 document.body.appendChild(img); |
129 editor.nodeChanged(); |
129 img.src = url; |
130 } |
130 }; |
131 } |
131 var buildListItems = function (inputList, itemCallback, startItems) { |
132 |
132 function appendItems(values, output) { |
133 imgElm.onload = function() { |
133 output = output || []; |
134 if (!data.width && !data.height && imageDimensions) { |
134 global$2.each(values, function (item) { |
135 dom.setAttribs(imgElm, { |
135 var menuItem = { text: item.text || item.title }; |
136 width: imgElm.clientWidth, |
136 if (item.menu) { |
137 height: imgElm.clientHeight |
137 menuItem.menu = appendItems(item.menu); |
138 }); |
138 } else { |
139 //WP |
139 menuItem.value = item.value; |
140 editor.fire( 'wpNewImageRefresh', { node: imgElm } ); |
140 itemCallback(menuItem); |
141 } |
141 } |
142 |
142 output.push(menuItem); |
143 selectImage(); |
143 }); |
144 }; |
144 return output; |
145 |
145 } |
146 imgElm.onerror = selectImage; |
146 return appendItems(inputList, startItems || []); |
147 } |
147 }; |
148 |
148 var removePixelSuffix = function (value) { |
149 updateStyle(); |
149 if (value) { |
150 recalcSize(); |
150 value = value.replace(/px$/, ''); |
151 |
151 } |
152 data = tinymce.extend(data, win.toJSON()); |
152 return value; |
153 var caption = data.caption; // WP |
153 }; |
154 |
154 var addPixelSuffix = function (value) { |
155 if (!data.alt) { |
155 if (value.length > 0 && /^[0-9]+$/.test(value)) { |
156 data.alt = ''; |
156 value += 'px'; |
157 } |
157 } |
158 |
158 return value; |
159 if (!data.title) { |
159 }; |
160 data.title = ''; |
160 var mergeMargins = function (css) { |
161 } |
161 if (css.margin) { |
162 |
162 var splitMargin = css.margin.split(' '); |
163 if (data.width === '') { |
163 switch (splitMargin.length) { |
164 data.width = null; |
164 case 1: |
165 } |
165 css['margin-top'] = css['margin-top'] || splitMargin[0]; |
166 |
166 css['margin-right'] = css['margin-right'] || splitMargin[0]; |
167 if (data.height === '') { |
167 css['margin-bottom'] = css['margin-bottom'] || splitMargin[0]; |
168 data.height = null; |
168 css['margin-left'] = css['margin-left'] || splitMargin[0]; |
169 } |
169 break; |
170 |
170 case 2: |
171 if (!data.style) { |
171 css['margin-top'] = css['margin-top'] || splitMargin[0]; |
172 data.style = null; |
172 css['margin-right'] = css['margin-right'] || splitMargin[1]; |
173 } |
173 css['margin-bottom'] = css['margin-bottom'] || splitMargin[0]; |
174 |
174 css['margin-left'] = css['margin-left'] || splitMargin[1]; |
175 // Setup new data excluding style properties |
175 break; |
176 /*eslint dot-notation: 0*/ |
176 case 3: |
177 data = { |
177 css['margin-top'] = css['margin-top'] || splitMargin[0]; |
178 src: data.src, |
178 css['margin-right'] = css['margin-right'] || splitMargin[1]; |
179 alt: data.alt, |
179 css['margin-bottom'] = css['margin-bottom'] || splitMargin[2]; |
180 title: data.title, |
180 css['margin-left'] = css['margin-left'] || splitMargin[1]; |
181 width: data.width, |
181 break; |
182 height: data.height, |
182 case 4: |
183 style: data.style, |
183 css['margin-top'] = css['margin-top'] || splitMargin[0]; |
184 "class": data["class"] |
184 css['margin-right'] = css['margin-right'] || splitMargin[1]; |
185 }; |
185 css['margin-bottom'] = css['margin-bottom'] || splitMargin[2]; |
186 |
186 css['margin-left'] = css['margin-left'] || splitMargin[3]; |
187 editor.undoManager.transact(function() { |
187 } |
188 // WP |
188 delete css.margin; |
189 var eventData = { node: imgElm, data: data, caption: caption }; |
189 } |
190 |
190 return css; |
191 editor.fire( 'wpImageFormSubmit', { imgData: eventData } ); |
191 }; |
192 |
192 var createImageList = function (editor, callback) { |
193 if ( eventData.cancel ) { |
193 var imageList = $_1dn8wtctjjgwebvz.getImageList(editor); |
194 waitLoad( eventData.node ); |
194 if (typeof imageList === 'string') { |
195 return; |
195 global$3.send({ |
196 } |
196 url: imageList, |
197 // WP end |
197 success: function (text) { |
198 |
198 callback(JSON.parse(text)); |
199 if (!data.src) { |
199 } |
200 if (imgElm) { |
200 }); |
201 dom.remove(imgElm); |
201 } else if (typeof imageList === 'function') { |
202 editor.focus(); |
202 imageList(callback); |
203 editor.nodeChanged(); |
203 } else { |
204 } |
204 callback(imageList); |
205 |
205 } |
206 return; |
206 }; |
207 } |
207 var waitLoadImage = function (editor, data, imgElm) { |
208 |
208 function selectImage() { |
209 if (data.title === "") { |
209 imgElm.onload = imgElm.onerror = null; |
210 data.title = null; |
210 if (editor.selection) { |
211 } |
211 editor.selection.select(imgElm); |
212 |
212 editor.nodeChanged(); |
213 if (!imgElm) { |
213 } |
214 data.id = '__mcenew'; |
214 } |
215 editor.focus(); |
215 imgElm.onload = function () { |
216 editor.selection.setContent(dom.createHTML('img', data)); |
216 if (!data.width && !data.height && $_1dn8wtctjjgwebvz.hasDimensions(editor)) { |
217 imgElm = dom.get('__mcenew'); |
217 editor.dom.setAttribs(imgElm, { |
218 dom.setAttrib(imgElm, 'id', null); |
218 width: imgElm.clientWidth, |
219 } else { |
219 height: imgElm.clientHeight |
220 dom.setAttribs(imgElm, data); |
220 }); |
221 } |
221 } |
222 |
222 selectImage(); |
223 waitLoad(imgElm); |
223 }; |
224 }); |
224 imgElm.onerror = selectImage; |
225 } |
225 }; |
226 |
226 var blobToDataUri = function (blob) { |
227 function removePixelSuffix(value) { |
227 return new global$1(function (resolve, reject) { |
228 if (value) { |
228 var reader = new FileReader(); |
229 value = value.replace(/px$/, ''); |
229 reader.onload = function () { |
230 } |
230 resolve(reader.result); |
231 |
231 }; |
232 return value; |
232 reader.onerror = function () { |
233 } |
233 reject(FileReader.error.message); |
234 |
234 }; |
235 function srcChange(e) { |
235 reader.readAsDataURL(blob); |
236 var srcURL, prependURL, absoluteURLPattern, meta = e.meta || {}; |
236 }); |
237 |
237 }; |
238 if (imageListCtrl) { |
238 var $_1e8k4ncujjgwebw2 = { |
239 imageListCtrl.value(editor.convertURL(this.value(), 'src')); |
239 getImageSize: getImageSize, |
240 } |
240 buildListItems: buildListItems, |
241 |
241 removePixelSuffix: removePixelSuffix, |
242 tinymce.each(meta, function(value, key) { |
242 addPixelSuffix: addPixelSuffix, |
243 win.find('#' + key).value(value); |
243 mergeMargins: mergeMargins, |
244 }); |
244 createImageList: createImageList, |
245 |
245 waitLoadImage: waitLoadImage, |
246 if (!meta.width && !meta.height) { |
246 blobToDataUri: blobToDataUri |
247 srcURL = editor.convertURL(this.value(), 'src'); |
247 }; |
248 |
248 |
249 // Pattern test the src url and make sure we haven't already prepended the url |
249 var global$4 = tinymce.util.Tools.resolve('tinymce.dom.DOMUtils'); |
250 prependURL = editor.settings.image_prepend_url; |
250 |
251 absoluteURLPattern = new RegExp('^(?:[a-z]+:)?//', 'i'); |
251 var hasOwnProperty = Object.prototype.hasOwnProperty; |
252 if (prependURL && !absoluteURLPattern.test(srcURL) && srcURL.substring(0, prependURL.length) !== prependURL) { |
252 var shallow = function (old, nu) { |
253 srcURL = prependURL + srcURL; |
253 return nu; |
254 } |
254 }; |
255 |
255 var baseMerge = function (merger) { |
256 this.value(srcURL); |
256 return function () { |
257 |
257 var objects = new Array(arguments.length); |
258 getImageSize(editor.documentBaseURI.toAbsolute(this.value()), function(data) { |
258 for (var i = 0; i < objects.length; i++) |
259 if (data.width && data.height && imageDimensions) { |
259 objects[i] = arguments[i]; |
260 width = data.width; |
260 if (objects.length === 0) |
261 height = data.height; |
261 throw new Error('Can\'t merge zero objects'); |
262 |
262 var ret = {}; |
263 win.find('#width').value(width); |
263 for (var j = 0; j < objects.length; j++) { |
264 win.find('#height').value(height); |
264 var curObject = objects[j]; |
265 } |
265 for (var key in curObject) |
266 }); |
266 if (hasOwnProperty.call(curObject, key)) { |
267 } |
267 ret[key] = merger(ret[key], curObject[key]); |
268 } |
268 } |
269 |
269 } |
270 width = dom.getAttrib(imgElm, 'width'); |
270 return ret; |
271 height = dom.getAttrib(imgElm, 'height'); |
271 }; |
272 |
272 }; |
273 if (imgElm.nodeName == 'IMG' && !imgElm.getAttribute('data-mce-object') && !imgElm.getAttribute('data-mce-placeholder')) { |
273 |
274 data = { |
274 var merge = baseMerge(shallow); |
275 src: dom.getAttrib(imgElm, 'src'), |
275 |
276 alt: dom.getAttrib(imgElm, 'alt'), |
276 var DOM = global$4.DOM; |
277 title: dom.getAttrib(imgElm, 'title'), |
277 var getHspace = function (image) { |
278 "class": dom.getAttrib(imgElm, 'class'), |
278 if (image.style.marginLeft && image.style.marginRight && image.style.marginLeft === image.style.marginRight) { |
279 width: width, |
279 return $_1e8k4ncujjgwebw2.removePixelSuffix(image.style.marginLeft); |
280 height: height |
280 } else { |
281 }; |
281 return ''; |
282 |
282 } |
283 // WP |
283 }; |
284 editor.fire( 'wpLoadImageData', { imgData: { data: data, node: imgElm } } ); |
284 var getVspace = function (image) { |
285 } else { |
285 if (image.style.marginTop && image.style.marginBottom && image.style.marginTop === image.style.marginBottom) { |
286 imgElm = null; |
286 return $_1e8k4ncujjgwebw2.removePixelSuffix(image.style.marginTop); |
287 } |
287 } else { |
288 |
288 return ''; |
289 if (imageList) { |
289 } |
290 imageListCtrl = { |
290 }; |
291 type: 'listbox', |
291 var getBorder = function (image) { |
292 label: 'Image list', |
292 if (image.style.borderWidth) { |
293 values: buildListItems( |
293 return $_1e8k4ncujjgwebw2.removePixelSuffix(image.style.borderWidth); |
294 imageList, |
294 } else { |
295 function(item) { |
295 return ''; |
296 item.value = editor.convertURL(item.value || item.url, 'src'); |
296 } |
297 }, |
297 }; |
298 [{text: 'None', value: ''}] |
298 var getAttrib = function (image, name$$1) { |
299 ), |
299 if (image.hasAttribute(name$$1)) { |
300 value: data.src && editor.convertURL(data.src, 'src'), |
300 return image.getAttribute(name$$1); |
301 onselect: function(e) { |
301 } else { |
302 var altCtrl = win.find('#alt'); |
302 return ''; |
303 |
303 } |
304 if (!altCtrl.value() || (e.lastControl && altCtrl.value() == e.lastControl.text())) { |
304 }; |
305 altCtrl.value(e.control.text()); |
305 var getStyle = function (image, name$$1) { |
306 } |
306 return image.style[name$$1] ? image.style[name$$1] : ''; |
307 |
307 }; |
308 win.find('#src').value(e.control.value()).fire('change'); |
308 var hasCaption = function (image) { |
309 }, |
309 return image.parentNode !== null && image.parentNode.nodeName === 'FIGURE'; |
310 onPostRender: function() { |
310 }; |
311 imageListCtrl = this; |
311 var setAttrib = function (image, name$$1, value) { |
312 } |
312 image.setAttribute(name$$1, value); |
313 }; |
313 }; |
314 } |
314 var wrapInFigure = function (image) { |
315 |
315 var figureElm = DOM.create('figure', { class: 'image' }); |
316 if (editor.settings.image_class_list) { |
316 DOM.insertAfter(figureElm, image); |
317 classListCtrl = { |
317 figureElm.appendChild(image); |
318 name: 'class', |
318 figureElm.appendChild(DOM.create('figcaption', { contentEditable: true }, 'Caption')); |
319 type: 'listbox', |
319 figureElm.contentEditable = 'false'; |
320 label: 'Class', |
320 }; |
321 values: buildListItems( |
321 var removeFigure = function (image) { |
322 editor.settings.image_class_list, |
322 var figureElm = image.parentNode; |
323 function(item) { |
323 DOM.insertAfter(image, figureElm); |
324 if (item.value) { |
324 DOM.remove(figureElm); |
325 item.textStyle = function() { |
325 }; |
326 return editor.formatter.getCssText({inline: 'img', classes: [item.value]}); |
326 var toggleCaption = function (image) { |
327 }; |
327 if (hasCaption(image)) { |
328 } |
328 removeFigure(image); |
329 } |
329 } else { |
330 ) |
330 wrapInFigure(image); |
331 }; |
331 } |
332 } |
332 }; |
333 |
333 var normalizeStyle = function (image, normalizeCss) { |
334 // General settings shared between simple and advanced dialogs |
334 var attrValue = image.getAttribute('style'); |
335 var generalFormItems = [ |
335 var value = normalizeCss(attrValue !== null ? attrValue : ''); |
336 { |
336 if (value.length > 0) { |
337 name: 'src', |
337 image.setAttribute('style', value); |
338 type: 'filepicker', |
338 image.setAttribute('data-mce-style', value); |
339 filetype: 'image', |
339 } else { |
340 label: 'Source', |
340 image.removeAttribute('style'); |
341 autofocus: true, |
341 } |
342 onchange: srcChange |
342 }; |
343 }, |
343 var setSize = function (name$$1, normalizeCss) { |
344 imageListCtrl |
344 return function (image, name$$1, value) { |
345 ]; |
345 if (image.style[name$$1]) { |
346 |
346 image.style[name$$1] = $_1e8k4ncujjgwebw2.addPixelSuffix(value); |
347 if (editor.settings.image_description !== false) { |
347 normalizeStyle(image, normalizeCss); |
348 generalFormItems.push({name: 'alt', type: 'textbox', label: 'Image description'}); |
348 } else { |
349 } |
349 setAttrib(image, name$$1, value); |
350 |
350 } |
351 if (editor.settings.image_title) { |
351 }; |
352 generalFormItems.push({name: 'title', type: 'textbox', label: 'Image Title'}); |
352 }; |
353 } |
353 var getSize = function (image, name$$1) { |
354 |
354 if (image.style[name$$1]) { |
355 if (imageDimensions) { |
355 return $_1e8k4ncujjgwebw2.removePixelSuffix(image.style[name$$1]); |
356 generalFormItems.push({ |
356 } else { |
357 type: 'container', |
357 return getAttrib(image, name$$1); |
358 label: 'Dimensions', |
358 } |
359 layout: 'flex', |
359 }; |
360 direction: 'row', |
360 var setHspace = function (image, value) { |
361 align: 'center', |
361 var pxValue = $_1e8k4ncujjgwebw2.addPixelSuffix(value); |
362 spacing: 5, |
362 image.style.marginLeft = pxValue; |
363 items: [ |
363 image.style.marginRight = pxValue; |
364 {name: 'width', type: 'textbox', maxLength: 5, size: 3, onchange: recalcSize, ariaLabel: 'Width'}, |
364 }; |
365 {type: 'label', text: 'x'}, |
365 var setVspace = function (image, value) { |
366 {name: 'height', type: 'textbox', maxLength: 5, size: 3, onchange: recalcSize, ariaLabel: 'Height'}, |
366 var pxValue = $_1e8k4ncujjgwebw2.addPixelSuffix(value); |
367 {name: 'constrain', type: 'checkbox', checked: true, text: 'Constrain proportions'} |
367 image.style.marginTop = pxValue; |
368 ] |
368 image.style.marginBottom = pxValue; |
369 }); |
369 }; |
370 } |
370 var setBorder = function (image, value) { |
371 |
371 var pxValue = $_1e8k4ncujjgwebw2.addPixelSuffix(value); |
372 generalFormItems.push(classListCtrl); |
372 image.style.borderWidth = pxValue; |
373 |
373 }; |
374 // WP |
374 var setBorderStyle = function (image, value) { |
375 editor.fire( 'wpLoadImageForm', { data: generalFormItems } ); |
375 image.style.borderStyle = value; |
376 |
376 }; |
377 function mergeMargins(css) { |
377 var getBorderStyle = function (image) { |
378 if (css.margin) { |
378 return getStyle(image, 'borderStyle'); |
379 |
379 }; |
380 var splitMargin = css.margin.split(" "); |
380 var isFigure = function (elm) { |
381 |
381 return elm.nodeName === 'FIGURE'; |
382 switch (splitMargin.length) { |
382 }; |
383 case 1: //margin: toprightbottomleft; |
383 var defaultData = function () { |
384 css['margin-top'] = css['margin-top'] || splitMargin[0]; |
384 return { |
385 css['margin-right'] = css['margin-right'] || splitMargin[0]; |
385 src: '', |
386 css['margin-bottom'] = css['margin-bottom'] || splitMargin[0]; |
386 alt: '', |
387 css['margin-left'] = css['margin-left'] || splitMargin[0]; |
387 title: '', |
388 break; |
388 width: '', |
389 case 2: //margin: topbottom rightleft; |
389 height: '', |
390 css['margin-top'] = css['margin-top'] || splitMargin[0]; |
390 class: '', |
391 css['margin-right'] = css['margin-right'] || splitMargin[1]; |
391 style: '', |
392 css['margin-bottom'] = css['margin-bottom'] || splitMargin[0]; |
392 caption: false, |
393 css['margin-left'] = css['margin-left'] || splitMargin[1]; |
393 hspace: '', |
394 break; |
394 vspace: '', |
395 case 3: //margin: top rightleft bottom; |
395 border: '', |
396 css['margin-top'] = css['margin-top'] || splitMargin[0]; |
396 borderStyle: '' |
397 css['margin-right'] = css['margin-right'] || splitMargin[1]; |
397 }; |
398 css['margin-bottom'] = css['margin-bottom'] || splitMargin[2]; |
398 }; |
399 css['margin-left'] = css['margin-left'] || splitMargin[1]; |
399 var getStyleValue = function (normalizeCss, data) { |
400 break; |
400 var image = document.createElement('img'); |
401 case 4: //margin: top right bottom left; |
401 setAttrib(image, 'style', data.style); |
402 css['margin-top'] = css['margin-top'] || splitMargin[0]; |
402 if (getHspace(image) || data.hspace !== '') { |
403 css['margin-right'] = css['margin-right'] || splitMargin[1]; |
403 setHspace(image, data.hspace); |
404 css['margin-bottom'] = css['margin-bottom'] || splitMargin[2]; |
404 } |
405 css['margin-left'] = css['margin-left'] || splitMargin[3]; |
405 if (getVspace(image) || data.vspace !== '') { |
406 } |
406 setVspace(image, data.vspace); |
407 delete css.margin; |
407 } |
408 } |
408 if (getBorder(image) || data.border !== '') { |
409 return css; |
409 setBorder(image, data.border); |
410 } |
410 } |
411 |
411 if (getBorderStyle(image) || data.borderStyle !== '') { |
412 function updateStyle() { |
412 setBorderStyle(image, data.borderStyle); |
413 function addPixelSuffix(value) { |
413 } |
414 if (value.length > 0 && /^[0-9]+$/.test(value)) { |
414 return normalizeCss(image.getAttribute('style')); |
415 value += 'px'; |
415 }; |
416 } |
416 var create = function (normalizeCss, data) { |
417 |
417 var image = document.createElement('img'); |
418 return value; |
418 write(normalizeCss, merge(data, { caption: false }), image); |
419 } |
419 setAttrib(image, 'alt', data.alt); |
420 |
420 if (data.caption) { |
421 if (!editor.settings.image_advtab) { |
421 var figure = DOM.create('figure', { class: 'image' }); |
422 return; |
422 figure.appendChild(image); |
423 } |
423 figure.appendChild(DOM.create('figcaption', { contentEditable: true }, 'Caption')); |
424 |
424 figure.contentEditable = 'false'; |
425 var data = win.toJSON(), |
425 return figure; |
426 css = dom.parseStyle(data.style); |
426 } else { |
427 |
427 return image; |
428 css = mergeMargins(css); |
428 } |
429 |
429 }; |
430 if (data.vspace) { |
430 var read = function (normalizeCss, image) { |
431 css['margin-top'] = css['margin-bottom'] = addPixelSuffix(data.vspace); |
431 return { |
432 } |
432 src: getAttrib(image, 'src'), |
433 if (data.hspace) { |
433 alt: getAttrib(image, 'alt'), |
434 css['margin-left'] = css['margin-right'] = addPixelSuffix(data.hspace); |
434 title: getAttrib(image, 'title'), |
435 } |
435 width: getSize(image, 'width'), |
436 if (data.border) { |
436 height: getSize(image, 'height'), |
437 css['border-width'] = addPixelSuffix(data.border); |
437 class: getAttrib(image, 'class'), |
438 } |
438 style: normalizeCss(getAttrib(image, 'style')), |
439 |
439 caption: hasCaption(image), |
440 win.find('#style').value(dom.serializeStyle(dom.parseStyle(dom.serializeStyle(css)))); |
440 hspace: getHspace(image), |
441 } |
441 vspace: getVspace(image), |
442 |
442 border: getBorder(image), |
443 function updateVSpaceHSpaceBorder() { |
443 borderStyle: getStyle(image, 'borderStyle') |
444 if (!editor.settings.image_advtab) { |
444 }; |
445 return; |
445 }; |
446 } |
446 var updateProp = function (image, oldData, newData, name$$1, set) { |
447 |
447 if (newData[name$$1] !== oldData[name$$1]) { |
448 var data = win.toJSON(), |
448 set(image, name$$1, newData[name$$1]); |
449 css = dom.parseStyle(data.style); |
449 } |
450 |
450 }; |
451 win.find('#vspace').value(""); |
451 var normalized = function (set, normalizeCss) { |
452 win.find('#hspace').value(""); |
452 return function (image, name$$1, value) { |
453 |
453 set(image, value); |
454 css = mergeMargins(css); |
454 normalizeStyle(image, normalizeCss); |
455 |
455 }; |
456 //Move opposite equal margins to vspace/hspace field |
456 }; |
457 if ((css['margin-top'] && css['margin-bottom']) || (css['margin-right'] && css['margin-left'])) { |
457 var write = function (normalizeCss, newData, image) { |
458 if (css['margin-top'] === css['margin-bottom']) { |
458 var oldData = read(normalizeCss, image); |
459 win.find('#vspace').value(removePixelSuffix(css['margin-top'])); |
459 updateProp(image, oldData, newData, 'caption', function (image, _name, _value) { |
460 } else { |
460 return toggleCaption(image); |
461 win.find('#vspace').value(''); |
461 }); |
462 } |
462 updateProp(image, oldData, newData, 'src', setAttrib); |
463 if (css['margin-right'] === css['margin-left']) { |
463 updateProp(image, oldData, newData, 'alt', setAttrib); |
464 win.find('#hspace').value(removePixelSuffix(css['margin-right'])); |
464 updateProp(image, oldData, newData, 'title', setAttrib); |
465 } else { |
465 updateProp(image, oldData, newData, 'width', setSize('width', normalizeCss)); |
466 win.find('#hspace').value(''); |
466 updateProp(image, oldData, newData, 'height', setSize('height', normalizeCss)); |
467 } |
467 updateProp(image, oldData, newData, 'class', setAttrib); |
468 } |
468 updateProp(image, oldData, newData, 'style', normalized(function (image, value) { |
469 |
469 return setAttrib(image, 'style', value); |
470 //Move border-width |
470 }, normalizeCss)); |
471 if (css['border-width']) { |
471 updateProp(image, oldData, newData, 'hspace', normalized(setHspace, normalizeCss)); |
472 win.find('#border').value(removePixelSuffix(css['border-width'])); |
472 updateProp(image, oldData, newData, 'vspace', normalized(setVspace, normalizeCss)); |
473 } |
473 updateProp(image, oldData, newData, 'border', normalized(setBorder, normalizeCss)); |
474 |
474 updateProp(image, oldData, newData, 'borderStyle', normalized(setBorderStyle, normalizeCss)); |
475 win.find('#style').value(dom.serializeStyle(dom.parseStyle(dom.serializeStyle(css)))); |
475 }; |
476 |
476 |
477 } |
477 var normalizeCss = function (editor, cssText) { |
478 |
478 var css = editor.dom.styles.parse(cssText); |
479 if (editor.settings.image_advtab) { |
479 var mergedCss = $_1e8k4ncujjgwebw2.mergeMargins(css); |
480 // Parse styles from img |
480 var compressed = editor.dom.styles.parse(editor.dom.styles.serialize(mergedCss)); |
481 if (imgElm) { |
481 return editor.dom.styles.serialize(compressed); |
482 if (imgElm.style.marginLeft && imgElm.style.marginRight && imgElm.style.marginLeft === imgElm.style.marginRight) { |
482 }; |
483 data.hspace = removePixelSuffix(imgElm.style.marginLeft); |
483 var getSelectedImage = function (editor) { |
484 } |
484 var imgElm = editor.selection.getNode(); |
485 if (imgElm.style.marginTop && imgElm.style.marginBottom && imgElm.style.marginTop === imgElm.style.marginBottom) { |
485 var figureElm = editor.dom.getParent(imgElm, 'figure.image'); |
486 data.vspace = removePixelSuffix(imgElm.style.marginTop); |
486 if (figureElm) { |
487 } |
487 return editor.dom.select('img', figureElm)[0]; |
488 if (imgElm.style.borderWidth) { |
488 } |
489 data.border = removePixelSuffix(imgElm.style.borderWidth); |
489 if (imgElm && (imgElm.nodeName !== 'IMG' || imgElm.getAttribute('data-mce-object') || imgElm.getAttribute('data-mce-placeholder'))) { |
490 } |
490 return null; |
491 |
491 } |
492 data.style = editor.dom.serializeStyle(editor.dom.parseStyle(editor.dom.getAttrib(imgElm, 'style'))); |
492 return imgElm; |
493 } |
493 }; |
494 |
494 var splitTextBlock = function (editor, figure) { |
495 // Advanced dialog shows general+advanced tabs |
495 var dom = editor.dom; |
496 win = editor.windowManager.open({ |
496 var textBlock = dom.getParent(figure.parentNode, function (node) { |
497 title: 'Insert/edit image', |
497 return editor.schema.getTextBlockElements()[node.nodeName]; |
498 data: data, |
498 }); |
499 bodyType: 'tabpanel', |
499 if (textBlock) { |
500 body: [ |
500 return dom.split(textBlock, figure); |
501 { |
501 } else { |
502 title: 'General', |
502 return figure; |
503 type: 'form', |
503 } |
504 items: generalFormItems |
504 }; |
505 }, |
505 var readImageDataFromSelection = function (editor) { |
506 |
506 var image = getSelectedImage(editor); |
507 { |
507 return image ? read(function (css) { |
508 title: 'Advanced', |
508 return normalizeCss(editor, css); |
509 type: 'form', |
509 }, image) : defaultData(); |
510 pack: 'start', |
510 }; |
511 items: [ |
511 var insertImageAtCaret = function (editor, data) { |
512 { |
512 var elm = create(function (css) { |
513 label: 'Style', |
513 return normalizeCss(editor, css); |
514 name: 'style', |
514 }, data); |
515 type: 'textbox', |
515 editor.dom.setAttrib(elm, 'data-mce-id', '__mcenew'); |
516 onchange: updateVSpaceHSpaceBorder |
516 editor.focus(); |
517 }, |
517 editor.selection.setContent(elm.outerHTML); |
518 { |
518 var insertedElm = editor.dom.select('*[data-mce-id="__mcenew"]')[0]; |
519 type: 'form', |
519 editor.dom.setAttrib(insertedElm, 'data-mce-id', null); |
520 layout: 'grid', |
520 if (isFigure(insertedElm)) { |
521 packV: 'start', |
521 var figure = splitTextBlock(editor, insertedElm); |
522 columns: 2, |
522 editor.selection.select(figure); |
523 padding: 0, |
523 } else { |
524 alignH: ['left', 'right'], |
524 editor.selection.select(insertedElm); |
525 defaults: { |
525 } |
526 type: 'textbox', |
526 }; |
527 maxWidth: 50, |
527 var syncSrcAttr = function (editor, image) { |
528 onchange: updateStyle |
528 editor.dom.setAttrib(image, 'src', image.getAttribute('src')); |
529 }, |
529 }; |
530 items: [ |
530 var deleteImage = function (editor, image) { |
531 {label: 'Vertical space', name: 'vspace'}, |
531 if (image) { |
532 {label: 'Horizontal space', name: 'hspace'}, |
532 var elm = editor.dom.is(image.parentNode, 'figure.image') ? image.parentNode : image; |
533 {label: 'Border', name: 'border'} |
533 editor.dom.remove(elm); |
534 ] |
534 editor.focus(); |
535 } |
535 editor.nodeChanged(); |
536 ] |
536 if (editor.dom.isEmpty(editor.getBody())) { |
537 } |
537 editor.setContent(''); |
538 ], |
538 editor.selection.setCursorLocation(); |
539 onSubmit: onSubmitForm |
539 } |
540 }); |
540 } |
541 } else { |
541 }; |
542 // Simple default dialog |
542 var writeImageDataToSelection = function (editor, data) { |
543 win = editor.windowManager.open({ |
543 var image = getSelectedImage(editor); |
544 title: 'Insert/edit image', |
544 write(function (css) { |
545 data: data, |
545 return normalizeCss(editor, css); |
546 body: generalFormItems, |
546 }, data, image); |
547 onSubmit: onSubmitForm |
547 syncSrcAttr(editor, image); |
548 }); |
548 if (isFigure(image.parentNode)) { |
549 } |
549 var figure = image.parentNode; |
550 } |
550 splitTextBlock(editor, figure); |
551 |
551 editor.selection.select(image.parentNode); |
552 editor.addButton('image', { |
552 } else { |
553 icon: 'image', |
553 editor.selection.select(image); |
554 tooltip: 'Insert/edit image', |
554 $_1e8k4ncujjgwebw2.waitLoadImage(editor, data, image); |
555 onclick: createImageList(showDialog), |
555 } |
556 stateSelector: 'img:not([data-mce-object],[data-mce-placeholder])' |
556 }; |
557 }); |
557 var insertOrUpdateImage = function (editor, data) { |
558 |
558 var image = getSelectedImage(editor); |
559 editor.addMenuItem('image', { |
559 if (image) { |
560 icon: 'image', |
560 if (data.src) { |
561 text: 'Insert/edit image', |
561 writeImageDataToSelection(editor, data); |
562 onclick: createImageList(showDialog), |
562 } else { |
563 context: 'insert', |
563 deleteImage(editor, image); |
564 prependToContext: true |
564 } |
565 }); |
565 } else if (data.src) { |
566 |
566 insertImageAtCaret(editor, data); |
567 editor.addCommand('mceImage', createImageList(showDialog)); |
567 } |
568 }); |
568 }; |
|
569 |
|
570 var updateVSpaceHSpaceBorder = function (editor) { |
|
571 return function (evt) { |
|
572 var dom = editor.dom; |
|
573 var rootControl = evt.control.rootControl; |
|
574 if (!$_1dn8wtctjjgwebvz.hasAdvTab(editor)) { |
|
575 return; |
|
576 } |
|
577 var data = rootControl.toJSON(); |
|
578 var css = dom.parseStyle(data.style); |
|
579 rootControl.find('#vspace').value(''); |
|
580 rootControl.find('#hspace').value(''); |
|
581 css = $_1e8k4ncujjgwebw2.mergeMargins(css); |
|
582 if (css['margin-top'] && css['margin-bottom'] || css['margin-right'] && css['margin-left']) { |
|
583 if (css['margin-top'] === css['margin-bottom']) { |
|
584 rootControl.find('#vspace').value($_1e8k4ncujjgwebw2.removePixelSuffix(css['margin-top'])); |
|
585 } else { |
|
586 rootControl.find('#vspace').value(''); |
|
587 } |
|
588 if (css['margin-right'] === css['margin-left']) { |
|
589 rootControl.find('#hspace').value($_1e8k4ncujjgwebw2.removePixelSuffix(css['margin-right'])); |
|
590 } else { |
|
591 rootControl.find('#hspace').value(''); |
|
592 } |
|
593 } |
|
594 if (css['border-width']) { |
|
595 rootControl.find('#border').value($_1e8k4ncujjgwebw2.removePixelSuffix(css['border-width'])); |
|
596 } else { |
|
597 rootControl.find('#border').value(''); |
|
598 } |
|
599 if (css['border-style']) { |
|
600 rootControl.find('#borderStyle').value(css['border-style']); |
|
601 } else { |
|
602 rootControl.find('#borderStyle').value(''); |
|
603 } |
|
604 rootControl.find('#style').value(dom.serializeStyle(dom.parseStyle(dom.serializeStyle(css)))); |
|
605 }; |
|
606 }; |
|
607 var updateStyle = function (editor, win) { |
|
608 win.find('#style').each(function (ctrl) { |
|
609 var value = getStyleValue(function (css) { |
|
610 return normalizeCss(editor, css); |
|
611 }, merge(defaultData(), win.toJSON())); |
|
612 ctrl.value(value); |
|
613 }); |
|
614 }; |
|
615 var makeTab = function (editor) { |
|
616 return { |
|
617 title: 'Advanced', |
|
618 type: 'form', |
|
619 pack: 'start', |
|
620 items: [ |
|
621 { |
|
622 label: 'Style', |
|
623 name: 'style', |
|
624 type: 'textbox', |
|
625 onchange: updateVSpaceHSpaceBorder(editor) |
|
626 }, |
|
627 { |
|
628 type: 'form', |
|
629 layout: 'grid', |
|
630 packV: 'start', |
|
631 columns: 2, |
|
632 padding: 0, |
|
633 defaults: { |
|
634 type: 'textbox', |
|
635 maxWidth: 50, |
|
636 onchange: function (evt) { |
|
637 updateStyle(editor, evt.control.rootControl); |
|
638 } |
|
639 }, |
|
640 items: [ |
|
641 { |
|
642 label: 'Vertical space', |
|
643 name: 'vspace' |
|
644 }, |
|
645 { |
|
646 label: 'Border width', |
|
647 name: 'border' |
|
648 }, |
|
649 { |
|
650 label: 'Horizontal space', |
|
651 name: 'hspace' |
|
652 }, |
|
653 { |
|
654 label: 'Border style', |
|
655 type: 'listbox', |
|
656 name: 'borderStyle', |
|
657 width: 90, |
|
658 maxWidth: 90, |
|
659 onselect: function (evt) { |
|
660 updateStyle(editor, evt.control.rootControl); |
|
661 }, |
|
662 values: [ |
|
663 { |
|
664 text: 'Select...', |
|
665 value: '' |
|
666 }, |
|
667 { |
|
668 text: 'Solid', |
|
669 value: 'solid' |
|
670 }, |
|
671 { |
|
672 text: 'Dotted', |
|
673 value: 'dotted' |
|
674 }, |
|
675 { |
|
676 text: 'Dashed', |
|
677 value: 'dashed' |
|
678 }, |
|
679 { |
|
680 text: 'Double', |
|
681 value: 'double' |
|
682 }, |
|
683 { |
|
684 text: 'Groove', |
|
685 value: 'groove' |
|
686 }, |
|
687 { |
|
688 text: 'Ridge', |
|
689 value: 'ridge' |
|
690 }, |
|
691 { |
|
692 text: 'Inset', |
|
693 value: 'inset' |
|
694 }, |
|
695 { |
|
696 text: 'Outset', |
|
697 value: 'outset' |
|
698 }, |
|
699 { |
|
700 text: 'None', |
|
701 value: 'none' |
|
702 }, |
|
703 { |
|
704 text: 'Hidden', |
|
705 value: 'hidden' |
|
706 } |
|
707 ] |
|
708 } |
|
709 ] |
|
710 } |
|
711 ] |
|
712 }; |
|
713 }; |
|
714 var $_6dfy5vd3jjgwebxf = { makeTab: makeTab }; |
|
715 |
|
716 var doSyncSize = function (widthCtrl, heightCtrl) { |
|
717 widthCtrl.state.set('oldVal', widthCtrl.value()); |
|
718 heightCtrl.state.set('oldVal', heightCtrl.value()); |
|
719 }; |
|
720 var doSizeControls = function (win, f) { |
|
721 var widthCtrl = win.find('#width')[0]; |
|
722 var heightCtrl = win.find('#height')[0]; |
|
723 var constrained = win.find('#constrain')[0]; |
|
724 if (widthCtrl && heightCtrl && constrained) { |
|
725 f(widthCtrl, heightCtrl, constrained.checked()); |
|
726 } |
|
727 }; |
|
728 var doUpdateSize = function (widthCtrl, heightCtrl, isContrained) { |
|
729 var oldWidth = widthCtrl.state.get('oldVal'); |
|
730 var oldHeight = heightCtrl.state.get('oldVal'); |
|
731 var newWidth = widthCtrl.value(); |
|
732 var newHeight = heightCtrl.value(); |
|
733 if (isContrained && oldWidth && oldHeight && newWidth && newHeight) { |
|
734 if (newWidth !== oldWidth) { |
|
735 newHeight = Math.round(newWidth / oldWidth * newHeight); |
|
736 if (!isNaN(newHeight)) { |
|
737 heightCtrl.value(newHeight); |
|
738 } |
|
739 } else { |
|
740 newWidth = Math.round(newHeight / oldHeight * newWidth); |
|
741 if (!isNaN(newWidth)) { |
|
742 widthCtrl.value(newWidth); |
|
743 } |
|
744 } |
|
745 } |
|
746 doSyncSize(widthCtrl, heightCtrl); |
|
747 }; |
|
748 var syncSize = function (win) { |
|
749 doSizeControls(win, doSyncSize); |
|
750 }; |
|
751 var updateSize = function (win) { |
|
752 doSizeControls(win, doUpdateSize); |
|
753 }; |
|
754 var createUi = function () { |
|
755 var recalcSize = function (evt) { |
|
756 updateSize(evt.control.rootControl); |
|
757 }; |
|
758 return { |
|
759 type: 'container', |
|
760 label: 'Dimensions', |
|
761 layout: 'flex', |
|
762 align: 'center', |
|
763 spacing: 5, |
|
764 items: [ |
|
765 { |
|
766 name: 'width', |
|
767 type: 'textbox', |
|
768 maxLength: 5, |
|
769 size: 5, |
|
770 onchange: recalcSize, |
|
771 ariaLabel: 'Width' |
|
772 }, |
|
773 { |
|
774 type: 'label', |
|
775 text: 'x' |
|
776 }, |
|
777 { |
|
778 name: 'height', |
|
779 type: 'textbox', |
|
780 maxLength: 5, |
|
781 size: 5, |
|
782 onchange: recalcSize, |
|
783 ariaLabel: 'Height' |
|
784 }, |
|
785 { |
|
786 name: 'constrain', |
|
787 type: 'checkbox', |
|
788 checked: true, |
|
789 text: 'Constrain proportions' |
|
790 } |
|
791 ] |
|
792 }; |
|
793 }; |
|
794 var $_ftlz5pdajjgweby4 = { |
|
795 createUi: createUi, |
|
796 syncSize: syncSize, |
|
797 updateSize: updateSize |
|
798 }; |
|
799 |
|
800 var onSrcChange = function (evt, editor) { |
|
801 var srcURL, prependURL, absoluteURLPattern; |
|
802 var meta = evt.meta || {}; |
|
803 var control = evt.control; |
|
804 var rootControl = control.rootControl; |
|
805 var imageListCtrl = rootControl.find('#image-list')[0]; |
|
806 if (imageListCtrl) { |
|
807 imageListCtrl.value(editor.convertURL(control.value(), 'src')); |
|
808 } |
|
809 global$2.each(meta, function (value, key) { |
|
810 rootControl.find('#' + key).value(value); |
|
811 }); |
|
812 if (!meta.width && !meta.height) { |
|
813 srcURL = editor.convertURL(control.value(), 'src'); |
|
814 prependURL = $_1dn8wtctjjgwebvz.getPrependUrl(editor); |
|
815 absoluteURLPattern = new RegExp('^(?:[a-z]+:)?//', 'i'); |
|
816 if (prependURL && !absoluteURLPattern.test(srcURL) && srcURL.substring(0, prependURL.length) !== prependURL) { |
|
817 srcURL = prependURL + srcURL; |
|
818 } |
|
819 control.value(srcURL); |
|
820 $_1e8k4ncujjgwebw2.getImageSize(editor.documentBaseURI.toAbsolute(control.value()), function (data) { |
|
821 if (data.width && data.height && $_1dn8wtctjjgwebvz.hasDimensions(editor)) { |
|
822 rootControl.find('#width').value(data.width); |
|
823 rootControl.find('#height').value(data.height); |
|
824 $_ftlz5pdajjgweby4.syncSize(rootControl); |
|
825 } |
|
826 }); |
|
827 } |
|
828 }; |
|
829 var onBeforeCall = function (evt) { |
|
830 evt.meta = evt.control.rootControl.toJSON(); |
|
831 }; |
|
832 var getGeneralItems = function (editor, imageListCtrl) { |
|
833 var generalFormItems = [ |
|
834 { |
|
835 name: 'src', |
|
836 type: 'filepicker', |
|
837 filetype: 'image', |
|
838 label: 'Source', |
|
839 autofocus: true, |
|
840 onchange: function (evt) { |
|
841 onSrcChange(evt, editor); |
|
842 }, |
|
843 onbeforecall: onBeforeCall |
|
844 }, |
|
845 imageListCtrl |
|
846 ]; |
|
847 if ($_1dn8wtctjjgwebvz.hasDescription(editor)) { |
|
848 generalFormItems.push({ |
|
849 name: 'alt', |
|
850 type: 'textbox', |
|
851 label: 'Image description' |
|
852 }); |
|
853 } |
|
854 if ($_1dn8wtctjjgwebvz.hasImageTitle(editor)) { |
|
855 generalFormItems.push({ |
|
856 name: 'title', |
|
857 type: 'textbox', |
|
858 label: 'Image Title' |
|
859 }); |
|
860 } |
|
861 if ($_1dn8wtctjjgwebvz.hasDimensions(editor)) { |
|
862 generalFormItems.push($_ftlz5pdajjgweby4.createUi()); |
|
863 } |
|
864 if ($_1dn8wtctjjgwebvz.getClassList(editor)) { |
|
865 generalFormItems.push({ |
|
866 name: 'class', |
|
867 type: 'listbox', |
|
868 label: 'Class', |
|
869 values: $_1e8k4ncujjgwebw2.buildListItems($_1dn8wtctjjgwebvz.getClassList(editor), function (item) { |
|
870 if (item.value) { |
|
871 item.textStyle = function () { |
|
872 return editor.formatter.getCssText({ |
|
873 inline: 'img', |
|
874 classes: [item.value] |
|
875 }); |
|
876 }; |
|
877 } |
|
878 }) |
|
879 }); |
|
880 } |
|
881 if ($_1dn8wtctjjgwebvz.hasImageCaption(editor)) { |
|
882 generalFormItems.push({ |
|
883 name: 'caption', |
|
884 type: 'checkbox', |
|
885 label: 'Caption' |
|
886 }); |
|
887 } |
|
888 return generalFormItems; |
|
889 }; |
|
890 var makeTab$1 = function (editor, imageListCtrl) { |
|
891 return { |
|
892 title: 'General', |
|
893 type: 'form', |
|
894 items: getGeneralItems(editor, imageListCtrl) |
|
895 }; |
|
896 }; |
|
897 var $_78zck5d9jjgweby1 = { |
|
898 makeTab: makeTab$1, |
|
899 getGeneralItems: getGeneralItems |
|
900 }; |
|
901 |
|
902 var url = function () { |
|
903 return $_oab1bcwjjgwebwl.getOrDie('URL'); |
|
904 }; |
|
905 var createObjectURL = function (blob) { |
|
906 return url().createObjectURL(blob); |
|
907 }; |
|
908 var revokeObjectURL = function (u) { |
|
909 url().revokeObjectURL(u); |
|
910 }; |
|
911 var $_86i13edcjjgwebya = { |
|
912 createObjectURL: createObjectURL, |
|
913 revokeObjectURL: revokeObjectURL |
|
914 }; |
|
915 |
|
916 var global$5 = tinymce.util.Tools.resolve('tinymce.ui.Factory'); |
|
917 |
|
918 function XMLHttpRequest () { |
|
919 var f = $_oab1bcwjjgwebwl.getOrDie('XMLHttpRequest'); |
|
920 return new f(); |
|
921 } |
|
922 |
|
923 var noop = function () { |
|
924 }; |
|
925 var pathJoin = function (path1, path2) { |
|
926 if (path1) { |
|
927 return path1.replace(/\/$/, '') + '/' + path2.replace(/^\//, ''); |
|
928 } |
|
929 return path2; |
|
930 }; |
|
931 function Uploader (settings) { |
|
932 var defaultHandler = function (blobInfo, success, failure, progress) { |
|
933 var xhr, formData; |
|
934 xhr = new XMLHttpRequest(); |
|
935 xhr.open('POST', settings.url); |
|
936 xhr.withCredentials = settings.credentials; |
|
937 xhr.upload.onprogress = function (e) { |
|
938 progress(e.loaded / e.total * 100); |
|
939 }; |
|
940 xhr.onerror = function () { |
|
941 failure('Image upload failed due to a XHR Transport error. Code: ' + xhr.status); |
|
942 }; |
|
943 xhr.onload = function () { |
|
944 var json; |
|
945 if (xhr.status < 200 || xhr.status >= 300) { |
|
946 failure('HTTP Error: ' + xhr.status); |
|
947 return; |
|
948 } |
|
949 json = JSON.parse(xhr.responseText); |
|
950 if (!json || typeof json.location !== 'string') { |
|
951 failure('Invalid JSON: ' + xhr.responseText); |
|
952 return; |
|
953 } |
|
954 success(pathJoin(settings.basePath, json.location)); |
|
955 }; |
|
956 formData = new FormData(); |
|
957 formData.append('file', blobInfo.blob(), blobInfo.filename()); |
|
958 xhr.send(formData); |
|
959 }; |
|
960 var uploadBlob = function (blobInfo, handler) { |
|
961 return new global$1(function (resolve, reject) { |
|
962 try { |
|
963 handler(blobInfo, resolve, reject, noop); |
|
964 } catch (ex) { |
|
965 reject(ex.message); |
|
966 } |
|
967 }); |
|
968 }; |
|
969 var isDefaultHandler = function (handler) { |
|
970 return handler === defaultHandler; |
|
971 }; |
|
972 var upload = function (blobInfo) { |
|
973 return !settings.url && isDefaultHandler(settings.handler) ? global$1.reject('Upload url missing from the settings.') : uploadBlob(blobInfo, settings.handler); |
|
974 }; |
|
975 settings = global$2.extend({ |
|
976 credentials: false, |
|
977 handler: defaultHandler |
|
978 }, settings); |
|
979 return { upload: upload }; |
|
980 } |
|
981 |
|
982 var onFileInput = function (editor) { |
|
983 return function (evt) { |
|
984 var Throbber = global$5.get('Throbber'); |
|
985 var rootControl = evt.control.rootControl; |
|
986 var throbber = new Throbber(rootControl.getEl()); |
|
987 var file = evt.control.value(); |
|
988 var blobUri = $_86i13edcjjgwebya.createObjectURL(file); |
|
989 var uploader = Uploader({ |
|
990 url: $_1dn8wtctjjgwebvz.getUploadUrl(editor), |
|
991 basePath: $_1dn8wtctjjgwebvz.getUploadBasePath(editor), |
|
992 credentials: $_1dn8wtctjjgwebvz.getUploadCredentials(editor), |
|
993 handler: $_1dn8wtctjjgwebvz.getUploadHandler(editor) |
|
994 }); |
|
995 var finalize = function () { |
|
996 throbber.hide(); |
|
997 $_86i13edcjjgwebya.revokeObjectURL(blobUri); |
|
998 }; |
|
999 throbber.show(); |
|
1000 return $_1e8k4ncujjgwebw2.blobToDataUri(file).then(function (dataUrl) { |
|
1001 var blobInfo = editor.editorUpload.blobCache.create({ |
|
1002 blob: file, |
|
1003 blobUri: blobUri, |
|
1004 name: file.name ? file.name.replace(/\.[^\.]+$/, '') : null, |
|
1005 base64: dataUrl.split(',')[1] |
|
1006 }); |
|
1007 return uploader.upload(blobInfo).then(function (url) { |
|
1008 var src = rootControl.find('#src'); |
|
1009 src.value(url); |
|
1010 rootControl.find('tabpanel')[0].activateTab(0); |
|
1011 src.fire('change'); |
|
1012 finalize(); |
|
1013 return url; |
|
1014 }); |
|
1015 }).catch(function (err) { |
|
1016 editor.windowManager.alert(err); |
|
1017 finalize(); |
|
1018 }); |
|
1019 }; |
|
1020 }; |
|
1021 var acceptExts = '.jpg,.jpeg,.png,.gif'; |
|
1022 var makeTab$2 = function (editor) { |
|
1023 return { |
|
1024 title: 'Upload', |
|
1025 type: 'form', |
|
1026 layout: 'flex', |
|
1027 direction: 'column', |
|
1028 align: 'stretch', |
|
1029 padding: '20 20 20 20', |
|
1030 items: [ |
|
1031 { |
|
1032 type: 'container', |
|
1033 layout: 'flex', |
|
1034 direction: 'column', |
|
1035 align: 'center', |
|
1036 spacing: 10, |
|
1037 items: [ |
|
1038 { |
|
1039 text: 'Browse for an image', |
|
1040 type: 'browsebutton', |
|
1041 accept: acceptExts, |
|
1042 onchange: onFileInput(editor) |
|
1043 }, |
|
1044 { |
|
1045 text: 'OR', |
|
1046 type: 'label' |
|
1047 } |
|
1048 ] |
|
1049 }, |
|
1050 { |
|
1051 text: 'Drop an image here', |
|
1052 type: 'dropzone', |
|
1053 accept: acceptExts, |
|
1054 height: 100, |
|
1055 onchange: onFileInput(editor) |
|
1056 } |
|
1057 ] |
|
1058 }; |
|
1059 }; |
|
1060 var $_71qd7mdbjjgweby7 = { makeTab: makeTab$2 }; |
|
1061 |
|
1062 var curry = function (f) { |
|
1063 var x = []; |
|
1064 for (var _i = 1; _i < arguments.length; _i++) { |
|
1065 x[_i - 1] = arguments[_i]; |
|
1066 } |
|
1067 var args = new Array(arguments.length - 1); |
|
1068 for (var i = 1; i < arguments.length; i++) |
|
1069 args[i - 1] = arguments[i]; |
|
1070 return function () { |
|
1071 var x = []; |
|
1072 for (var _i = 0; _i < arguments.length; _i++) { |
|
1073 x[_i] = arguments[_i]; |
|
1074 } |
|
1075 var newArgs = new Array(arguments.length); |
|
1076 for (var j = 0; j < newArgs.length; j++) |
|
1077 newArgs[j] = arguments[j]; |
|
1078 var all = args.concat(newArgs); |
|
1079 return f.apply(null, all); |
|
1080 }; |
|
1081 }; |
|
1082 |
|
1083 var submitForm = function (editor, evt) { |
|
1084 var win = evt.control.getRoot(); |
|
1085 $_ftlz5pdajjgweby4.updateSize(win); |
|
1086 editor.undoManager.transact(function () { |
|
1087 var data = merge(readImageDataFromSelection(editor), win.toJSON()); |
|
1088 insertOrUpdateImage(editor, data); |
|
1089 }); |
|
1090 editor.editorUpload.uploadImagesAuto(); |
|
1091 }; |
|
1092 function Dialog (editor) { |
|
1093 function showDialog(imageList) { |
|
1094 var data = readImageDataFromSelection(editor); |
|
1095 var win, imageListCtrl; |
|
1096 if (imageList) { |
|
1097 imageListCtrl = { |
|
1098 type: 'listbox', |
|
1099 label: 'Image list', |
|
1100 name: 'image-list', |
|
1101 values: $_1e8k4ncujjgwebw2.buildListItems(imageList, function (item) { |
|
1102 item.value = editor.convertURL(item.value || item.url, 'src'); |
|
1103 }, [{ |
|
1104 text: 'None', |
|
1105 value: '' |
|
1106 }]), |
|
1107 value: data.src && editor.convertURL(data.src, 'src'), |
|
1108 onselect: function (e) { |
|
1109 var altCtrl = win.find('#alt'); |
|
1110 if (!altCtrl.value() || e.lastControl && altCtrl.value() === e.lastControl.text()) { |
|
1111 altCtrl.value(e.control.text()); |
|
1112 } |
|
1113 win.find('#src').value(e.control.value()).fire('change'); |
|
1114 }, |
|
1115 onPostRender: function () { |
|
1116 imageListCtrl = this; |
|
1117 } |
|
1118 }; |
|
1119 } |
|
1120 if ($_1dn8wtctjjgwebvz.hasAdvTab(editor) || $_1dn8wtctjjgwebvz.hasUploadUrl(editor) || $_1dn8wtctjjgwebvz.hasUploadHandler(editor)) { |
|
1121 var body = [$_78zck5d9jjgweby1.makeTab(editor, imageListCtrl)]; |
|
1122 if ($_1dn8wtctjjgwebvz.hasAdvTab(editor)) { |
|
1123 body.push($_6dfy5vd3jjgwebxf.makeTab(editor)); |
|
1124 } |
|
1125 if ($_1dn8wtctjjgwebvz.hasUploadUrl(editor) || $_1dn8wtctjjgwebvz.hasUploadHandler(editor)) { |
|
1126 body.push($_71qd7mdbjjgweby7.makeTab(editor)); |
|
1127 } |
|
1128 win = editor.windowManager.open({ |
|
1129 title: 'Insert/edit image', |
|
1130 data: data, |
|
1131 bodyType: 'tabpanel', |
|
1132 body: body, |
|
1133 onSubmit: curry(submitForm, editor) |
|
1134 }); |
|
1135 } else { |
|
1136 win = editor.windowManager.open({ |
|
1137 title: 'Insert/edit image', |
|
1138 data: data, |
|
1139 body: $_78zck5d9jjgweby1.getGeneralItems(editor, imageListCtrl), |
|
1140 onSubmit: curry(submitForm, editor) |
|
1141 }); |
|
1142 } |
|
1143 $_ftlz5pdajjgweby4.syncSize(win); |
|
1144 } |
|
1145 function open() { |
|
1146 $_1e8k4ncujjgwebw2.createImageList(editor, showDialog); |
|
1147 } |
|
1148 return { open: open }; |
|
1149 } |
|
1150 |
|
1151 var register = function (editor) { |
|
1152 editor.addCommand('mceImage', Dialog(editor).open); |
|
1153 }; |
|
1154 var $_3lypdlcrjjgwebvs = { register: register }; |
|
1155 |
|
1156 var hasImageClass = function (node) { |
|
1157 var className = node.attr('class'); |
|
1158 return className && /\bimage\b/.test(className); |
|
1159 }; |
|
1160 var toggleContentEditableState = function (state) { |
|
1161 return function (nodes) { |
|
1162 var i = nodes.length, node; |
|
1163 var toggleContentEditable = function (node) { |
|
1164 node.attr('contenteditable', state ? 'true' : null); |
|
1165 }; |
|
1166 while (i--) { |
|
1167 node = nodes[i]; |
|
1168 if (hasImageClass(node)) { |
|
1169 node.attr('contenteditable', state ? 'false' : null); |
|
1170 global$2.each(node.getAll('figcaption'), toggleContentEditable); |
|
1171 } |
|
1172 } |
|
1173 }; |
|
1174 }; |
|
1175 var setup = function (editor) { |
|
1176 editor.on('preInit', function () { |
|
1177 editor.parser.addNodeFilter('figure', toggleContentEditableState(true)); |
|
1178 editor.serializer.addNodeFilter('figure', toggleContentEditableState(false)); |
|
1179 }); |
|
1180 }; |
|
1181 var $_5op6l2dhjjgwebym = { setup: setup }; |
|
1182 |
|
1183 var register$1 = function (editor) { |
|
1184 editor.addButton('image', { |
|
1185 icon: 'image', |
|
1186 tooltip: 'Insert/edit image', |
|
1187 onclick: Dialog(editor).open, |
|
1188 stateSelector: 'img:not([data-mce-object],[data-mce-placeholder]),figure.image' |
|
1189 }); |
|
1190 editor.addMenuItem('image', { |
|
1191 icon: 'image', |
|
1192 text: 'Image', |
|
1193 onclick: Dialog(editor).open, |
|
1194 context: 'insert', |
|
1195 prependToContext: true |
|
1196 }); |
|
1197 }; |
|
1198 var $_dm869adijjgwebyn = { register: register$1 }; |
|
1199 |
|
1200 global.add('image', function (editor) { |
|
1201 $_5op6l2dhjjgwebym.setup(editor); |
|
1202 $_dm869adijjgwebyn.register(editor); |
|
1203 $_3lypdlcrjjgwebvs.register(editor); |
|
1204 }); |
|
1205 function Plugin () { |
|
1206 } |
|
1207 |
|
1208 return Plugin; |
|
1209 |
|
1210 }()); |
|
1211 })(); |