]>
Commit | Line | Data |
---|---|---|
1 | /**\r | |
2 | * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.\r | |
3 | * For licensing, see LICENSE.md or http://ckeditor.com/license\r | |
4 | */\r | |
5 | \r | |
6 | ( function() {\r | |
7 | var imageDialog = function( editor, dialogType ) {\r | |
8 | // Load image preview.\r | |
9 | var IMAGE = 1,\r | |
10 | LINK = 2,\r | |
11 | PREVIEW = 4,\r | |
12 | CLEANUP = 8,\r | |
13 | regexGetSize = /^\s*(\d+)((px)|\%)?\s*$/i,\r | |
14 | regexGetSizeOrEmpty = /(^\s*(\d+)((px)|\%)?\s*$)|^$/i,\r | |
15 | pxLengthRegex = /^\d+px$/;\r | |
16 | \r | |
17 | var onSizeChange = function() {\r | |
18 | var value = this.getValue(),\r | |
19 | // This = input element.\r | |
20 | dialog = this.getDialog(),\r | |
21 | aMatch = value.match( regexGetSize ); // Check value\r | |
22 | if ( aMatch ) {\r | |
23 | if ( aMatch[ 2 ] == '%' ) // % is allowed - > unlock ratio.\r | |
24 | switchLockRatio( dialog, false ); // Unlock.\r | |
25 | value = aMatch[ 1 ];\r | |
26 | }\r | |
27 | \r | |
28 | // Only if ratio is locked\r | |
29 | if ( dialog.lockRatio ) {\r | |
30 | var oImageOriginal = dialog.originalElement;\r | |
31 | if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' ) {\r | |
32 | if ( this.id == 'txtHeight' ) {\r | |
33 | if ( value && value != '0' )\r | |
34 | value = Math.round( oImageOriginal.$.width * ( value / oImageOriginal.$.height ) );\r | |
35 | if ( !isNaN( value ) )\r | |
36 | dialog.setValueOf( 'info', 'txtWidth', value );\r | |
37 | }\r | |
38 | // this.id = txtWidth.\r | |
39 | else {\r | |
40 | if ( value && value != '0' )\r | |
41 | value = Math.round( oImageOriginal.$.height * ( value / oImageOriginal.$.width ) );\r | |
42 | if ( !isNaN( value ) )\r | |
43 | dialog.setValueOf( 'info', 'txtHeight', value );\r | |
44 | }\r | |
45 | }\r | |
46 | }\r | |
47 | updatePreview( dialog );\r | |
48 | };\r | |
49 | \r | |
50 | var updatePreview = function( dialog ) {\r | |
51 | //Don't load before onShow.\r | |
52 | if ( !dialog.originalElement || !dialog.preview )\r | |
53 | return 1;\r | |
54 | \r | |
55 | // Read attributes and update imagePreview;\r | |
56 | dialog.commitContent( PREVIEW, dialog.preview );\r | |
57 | return 0;\r | |
58 | };\r | |
59 | \r | |
60 | // Custom commit dialog logic, where we're intended to give inline style\r | |
61 | // field (txtdlgGenStyle) higher priority to avoid overwriting styles contribute\r | |
62 | // by other fields.\r | |
63 | function commitContent() {\r | |
64 | var args = arguments;\r | |
65 | var inlineStyleField = this.getContentElement( 'advanced', 'txtdlgGenStyle' );\r | |
66 | inlineStyleField && inlineStyleField.commit.apply( inlineStyleField, args );\r | |
67 | \r | |
68 | this.foreach( function( widget ) {\r | |
69 | if ( widget.commit && widget.id != 'txtdlgGenStyle' )\r | |
70 | widget.commit.apply( widget, args );\r | |
71 | } );\r | |
72 | }\r | |
73 | \r | |
74 | // Avoid recursions.\r | |
75 | var incommit;\r | |
76 | \r | |
77 | // Synchronous field values to other impacted fields is required, e.g. border\r | |
78 | // size change should alter inline-style text as well.\r | |
79 | function commitInternally( targetFields ) {\r | |
80 | if ( incommit )\r | |
81 | return;\r | |
82 | \r | |
83 | incommit = 1;\r | |
84 | \r | |
85 | var dialog = this.getDialog(),\r | |
86 | element = dialog.imageElement;\r | |
87 | if ( element ) {\r | |
88 | // Commit this field and broadcast to target fields.\r | |
89 | this.commit( IMAGE, element );\r | |
90 | \r | |
91 | targetFields = [].concat( targetFields );\r | |
92 | var length = targetFields.length,\r | |
93 | field;\r | |
94 | for ( var i = 0; i < length; i++ ) {\r | |
95 | field = dialog.getContentElement.apply( dialog, targetFields[ i ].split( ':' ) );\r | |
96 | // May cause recursion.\r | |
97 | field && field.setup( IMAGE, element );\r | |
98 | }\r | |
99 | }\r | |
100 | \r | |
101 | incommit = 0;\r | |
102 | }\r | |
103 | \r | |
104 | var switchLockRatio = function( dialog, value ) {\r | |
105 | if ( !dialog.getContentElement( 'info', 'ratioLock' ) )\r | |
106 | return null;\r | |
107 | \r | |
108 | var oImageOriginal = dialog.originalElement;\r | |
109 | \r | |
110 | // Dialog may already closed. (http://dev.ckeditor.com/ticket/5505)\r | |
111 | if ( !oImageOriginal )\r | |
112 | return null;\r | |
113 | \r | |
114 | // Check image ratio and original image ratio, but respecting user's preference.\r | |
115 | if ( value == 'check' ) {\r | |
116 | if ( !dialog.userlockRatio && oImageOriginal.getCustomData( 'isReady' ) == 'true' ) {\r | |
117 | var width = dialog.getValueOf( 'info', 'txtWidth' ),\r | |
118 | height = dialog.getValueOf( 'info', 'txtHeight' ),\r | |
119 | originalRatio = oImageOriginal.$.width * 1000 / oImageOriginal.$.height,\r | |
120 | thisRatio = width * 1000 / height;\r | |
121 | dialog.lockRatio = false; // Default: unlock ratio\r | |
122 | \r | |
123 | if ( !width && !height )\r | |
124 | dialog.lockRatio = true;\r | |
125 | else if ( !isNaN( originalRatio ) && !isNaN( thisRatio ) ) {\r | |
126 | if ( Math.round( originalRatio ) == Math.round( thisRatio ) )\r | |
127 | dialog.lockRatio = true;\r | |
128 | }\r | |
129 | }\r | |
130 | } else if ( value !== undefined )\r | |
131 | dialog.lockRatio = value;\r | |
132 | else {\r | |
133 | dialog.userlockRatio = 1;\r | |
134 | dialog.lockRatio = !dialog.lockRatio;\r | |
135 | }\r | |
136 | \r | |
137 | var ratioButton = CKEDITOR.document.getById( btnLockSizesId );\r | |
138 | if ( dialog.lockRatio )\r | |
139 | ratioButton.removeClass( 'cke_btn_unlocked' );\r | |
140 | else\r | |
141 | ratioButton.addClass( 'cke_btn_unlocked' );\r | |
142 | \r | |
143 | ratioButton.setAttribute( 'aria-checked', dialog.lockRatio );\r | |
144 | \r | |
145 | // Ratio button hc presentation - WHITE SQUARE / BLACK SQUARE\r | |
146 | if ( CKEDITOR.env.hc ) {\r | |
147 | var icon = ratioButton.getChild( 0 );\r | |
148 | icon.setHtml( dialog.lockRatio ? CKEDITOR.env.ie ? '\u25A0' : '\u25A3' : CKEDITOR.env.ie ? '\u25A1' : '\u25A2' );\r | |
149 | }\r | |
150 | \r | |
151 | return dialog.lockRatio;\r | |
152 | };\r | |
153 | \r | |
154 | var resetSize = function( dialog, emptyValues ) {\r | |
155 | var oImageOriginal = dialog.originalElement,\r | |
156 | ready = oImageOriginal.getCustomData( 'isReady' ) == 'true';\r | |
157 | \r | |
158 | if ( ready ) {\r | |
159 | var widthField = dialog.getContentElement( 'info', 'txtWidth' ),\r | |
160 | heightField = dialog.getContentElement( 'info', 'txtHeight' ),\r | |
161 | widthValue, heightValue;\r | |
162 | \r | |
163 | if ( emptyValues ) {\r | |
164 | widthValue = 0;\r | |
165 | heightValue = 0;\r | |
166 | } else {\r | |
167 | widthValue = oImageOriginal.$.width;\r | |
168 | heightValue = oImageOriginal.$.height;\r | |
169 | }\r | |
170 | \r | |
171 | widthField && widthField.setValue( widthValue );\r | |
172 | heightField && heightField.setValue( heightValue );\r | |
173 | }\r | |
174 | updatePreview( dialog );\r | |
175 | };\r | |
176 | \r | |
177 | var setupDimension = function( type, element ) {\r | |
178 | if ( type != IMAGE )\r | |
179 | return;\r | |
180 | \r | |
181 | function checkDimension( size, defaultValue ) {\r | |
182 | var aMatch = size.match( regexGetSize );\r | |
183 | if ( aMatch ) {\r | |
184 | // % is allowed.\r | |
185 | if ( aMatch[ 2 ] == '%' ) {\r | |
186 | aMatch[ 1 ] += '%';\r | |
187 | switchLockRatio( dialog, false ); // Unlock ratio\r | |
188 | }\r | |
189 | return aMatch[ 1 ];\r | |
190 | }\r | |
191 | return defaultValue;\r | |
192 | }\r | |
193 | \r | |
194 | var dialog = this.getDialog(),\r | |
195 | value = '',\r | |
196 | dimension = this.id == 'txtWidth' ? 'width' : 'height',\r | |
197 | size = element.getAttribute( dimension );\r | |
198 | \r | |
199 | if ( size )\r | |
200 | value = checkDimension( size, value );\r | |
201 | value = checkDimension( element.getStyle( dimension ), value );\r | |
202 | \r | |
203 | this.setValue( value );\r | |
204 | };\r | |
205 | \r | |
206 | var previewPreloader;\r | |
207 | \r | |
208 | var onImgLoadEvent = function() {\r | |
209 | // Image is ready.\r | |
210 | var original = this.originalElement,\r | |
211 | loader = CKEDITOR.document.getById( imagePreviewLoaderId );\r | |
212 | \r | |
213 | original.setCustomData( 'isReady', 'true' );\r | |
214 | original.removeListener( 'load', onImgLoadEvent );\r | |
215 | original.removeListener( 'error', onImgLoadErrorEvent );\r | |
216 | original.removeListener( 'abort', onImgLoadErrorEvent );\r | |
217 | \r | |
218 | // Hide loader.\r | |
219 | if ( loader )\r | |
220 | loader.setStyle( 'display', 'none' );\r | |
221 | \r | |
222 | // New image -> new dimensions\r | |
223 | if ( !this.dontResetSize ) {\r | |
224 | resetSize( this, editor.config.image_prefillDimensions === false );\r | |
225 | }\r | |
226 | \r | |
227 | if ( this.firstLoad ) {\r | |
228 | CKEDITOR.tools.setTimeout( function() {\r | |
229 | switchLockRatio( this, 'check' );\r | |
230 | }, 0, this );\r | |
231 | }\r | |
232 | \r | |
233 | this.firstLoad = false;\r | |
234 | this.dontResetSize = false;\r | |
235 | \r | |
236 | // Possible fix for http://dev.ckeditor.com/ticket/12818.\r | |
237 | updatePreview( this );\r | |
238 | };\r | |
239 | \r | |
240 | var onImgLoadErrorEvent = function() {\r | |
241 | // Error. Image is not loaded.\r | |
242 | var original = this.originalElement,\r | |
243 | loader = CKEDITOR.document.getById( imagePreviewLoaderId );\r | |
244 | \r | |
245 | original.removeListener( 'load', onImgLoadEvent );\r | |
246 | original.removeListener( 'error', onImgLoadErrorEvent );\r | |
247 | original.removeListener( 'abort', onImgLoadErrorEvent );\r | |
248 | \r | |
249 | // Set Error image.\r | |
250 | var noimage = CKEDITOR.getUrl( CKEDITOR.plugins.get( 'image' ).path + 'images/noimage.png' );\r | |
251 | \r | |
252 | if ( this.preview )\r | |
253 | this.preview.setAttribute( 'src', noimage );\r | |
254 | \r | |
255 | // Hide loader.\r | |
256 | if ( loader )\r | |
257 | loader.setStyle( 'display', 'none' );\r | |
258 | \r | |
259 | switchLockRatio( this, false ); // Unlock.\r | |
260 | };\r | |
261 | \r | |
262 | var numbering = function( id ) {\r | |
263 | return CKEDITOR.tools.getNextId() + '_' + id;\r | |
264 | },\r | |
265 | btnLockSizesId = numbering( 'btnLockSizes' ),\r | |
266 | btnResetSizeId = numbering( 'btnResetSize' ),\r | |
267 | imagePreviewLoaderId = numbering( 'ImagePreviewLoader' ),\r | |
268 | previewLinkId = numbering( 'previewLink' ),\r | |
269 | previewImageId = numbering( 'previewImage' );\r | |
270 | \r | |
271 | return {\r | |
272 | title: editor.lang.image[ dialogType == 'image' ? 'title' : 'titleButton' ],\r | |
273 | minWidth: ( CKEDITOR.skinName || editor.config.skin ) == 'moono-lisa' ? 500 : 420,\r | |
274 | minHeight: 360,\r | |
275 | onShow: function() {\r | |
276 | this.imageElement = false;\r | |
277 | this.linkElement = false;\r | |
278 | \r | |
279 | // Default: create a new element.\r | |
280 | this.imageEditMode = false;\r | |
281 | this.linkEditMode = false;\r | |
282 | \r | |
283 | this.lockRatio = true;\r | |
284 | this.userlockRatio = 0;\r | |
285 | this.dontResetSize = false;\r | |
286 | this.firstLoad = true;\r | |
287 | this.addLink = false;\r | |
288 | \r | |
289 | var editor = this.getParentEditor(),\r | |
290 | sel = editor.getSelection(),\r | |
291 | element = sel && sel.getSelectedElement(),\r | |
292 | link = element && editor.elementPath( element ).contains( 'a', 1 ),\r | |
293 | loader = CKEDITOR.document.getById( imagePreviewLoaderId );\r | |
294 | \r | |
295 | // Hide loader.\r | |
296 | if ( loader )\r | |
297 | loader.setStyle( 'display', 'none' );\r | |
298 | \r | |
299 | // Create the preview before setup the dialog contents.\r | |
300 | previewPreloader = new CKEDITOR.dom.element( 'img', editor.document );\r | |
301 | this.preview = CKEDITOR.document.getById( previewImageId );\r | |
302 | \r | |
303 | // Copy of the image\r | |
304 | this.originalElement = editor.document.createElement( 'img' );\r | |
305 | this.originalElement.setAttribute( 'alt', '' );\r | |
306 | this.originalElement.setCustomData( 'isReady', 'false' );\r | |
307 | \r | |
308 | if ( link ) {\r | |
309 | this.linkElement = link;\r | |
310 | this.linkEditMode = true;\r | |
311 | \r | |
312 | // If there is an existing link, by default keep it (true).\r | |
313 | // It will be removed if certain conditions are met and Link tab is enabled. (http://dev.ckeditor.com/ticket/13351)\r | |
314 | this.addLink = true;\r | |
315 | \r | |
316 | // Look for Image element.\r | |
317 | var linkChildren = link.getChildren();\r | |
318 | if ( linkChildren.count() == 1 ) {\r | |
319 | var childTag = linkChildren.getItem( 0 );\r | |
320 | \r | |
321 | if ( childTag.type == CKEDITOR.NODE_ELEMENT ) {\r | |
322 | if ( childTag.is( 'img' ) || childTag.is( 'input' ) ) {\r | |
323 | this.imageElement = linkChildren.getItem( 0 );\r | |
324 | if ( this.imageElement.is( 'img' ) )\r | |
325 | this.imageEditMode = 'img';\r | |
326 | else if ( this.imageElement.is( 'input' ) )\r | |
327 | this.imageEditMode = 'input';\r | |
328 | }\r | |
329 | }\r | |
330 | }\r | |
331 | // Fill out all fields.\r | |
332 | if ( dialogType == 'image' )\r | |
333 | this.setupContent( LINK, link );\r | |
334 | }\r | |
335 | \r | |
336 | // Edit given image element instead the one from selection.\r | |
337 | if ( this.customImageElement ) {\r | |
338 | this.imageEditMode = 'img';\r | |
339 | this.imageElement = this.customImageElement;\r | |
340 | delete this.customImageElement;\r | |
341 | }\r | |
342 | else if ( element && element.getName() == 'img' && !element.data( 'cke-realelement' ) ||\r | |
343 | element && element.getName() == 'input' && element.getAttribute( 'type' ) == 'image' ) {\r | |
344 | this.imageEditMode = element.getName();\r | |
345 | this.imageElement = element;\r | |
346 | }\r | |
347 | \r | |
348 | if ( this.imageEditMode ) {\r | |
349 | // Use the original element as a buffer from since we don't want\r | |
350 | // temporary changes to be committed, e.g. if the dialog is canceled.\r | |
351 | this.cleanImageElement = this.imageElement;\r | |
352 | this.imageElement = this.cleanImageElement.clone( true, true );\r | |
353 | \r | |
354 | // Fill out all fields.\r | |
355 | this.setupContent( IMAGE, this.imageElement );\r | |
356 | }\r | |
357 | \r | |
358 | // Refresh LockRatio button\r | |
359 | switchLockRatio( this, true );\r | |
360 | \r | |
361 | // Dont show preview if no URL given.\r | |
362 | if ( !CKEDITOR.tools.trim( this.getValueOf( 'info', 'txtUrl' ) ) ) {\r | |
363 | this.preview.removeAttribute( 'src' );\r | |
364 | this.preview.setStyle( 'display', 'none' );\r | |
365 | }\r | |
366 | },\r | |
367 | onOk: function() {\r | |
368 | // Edit existing Image.\r | |
369 | if ( this.imageEditMode ) {\r | |
370 | var imgTagName = this.imageEditMode;\r | |
371 | \r | |
372 | // Image dialog and Input element.\r | |
373 | if ( dialogType == 'image' && imgTagName == 'input' && confirm( editor.lang.image.button2Img ) ) { // jshint ignore:line\r | |
374 | // Replace INPUT-> IMG\r | |
375 | imgTagName = 'img';\r | |
376 | this.imageElement = editor.document.createElement( 'img' );\r | |
377 | this.imageElement.setAttribute( 'alt', '' );\r | |
378 | editor.insertElement( this.imageElement );\r | |
379 | }\r | |
380 | // ImageButton dialog and Image element.\r | |
381 | else if ( dialogType != 'image' && imgTagName == 'img' && confirm( editor.lang.image.img2Button ) ) { // jshint ignore:line\r | |
382 | // Replace IMG -> INPUT\r | |
383 | imgTagName = 'input';\r | |
384 | this.imageElement = editor.document.createElement( 'input' );\r | |
385 | this.imageElement.setAttributes( {\r | |
386 | type: 'image',\r | |
387 | alt: ''\r | |
388 | } );\r | |
389 | editor.insertElement( this.imageElement );\r | |
390 | } else {\r | |
391 | // Restore the original element before all commits.\r | |
392 | this.imageElement = this.cleanImageElement;\r | |
393 | delete this.cleanImageElement;\r | |
394 | }\r | |
395 | }\r | |
396 | // Create a new image.\r | |
397 | else {\r | |
398 | // Image dialog -> create IMG element.\r | |
399 | if ( dialogType == 'image' )\r | |
400 | this.imageElement = editor.document.createElement( 'img' );\r | |
401 | else {\r | |
402 | this.imageElement = editor.document.createElement( 'input' );\r | |
403 | this.imageElement.setAttribute( 'type', 'image' );\r | |
404 | }\r | |
405 | this.imageElement.setAttribute( 'alt', '' );\r | |
406 | }\r | |
407 | \r | |
408 | // Create a new link.\r | |
409 | if ( !this.linkEditMode )\r | |
410 | this.linkElement = editor.document.createElement( 'a' );\r | |
411 | \r | |
412 | // Set attributes.\r | |
413 | this.commitContent( IMAGE, this.imageElement );\r | |
414 | this.commitContent( LINK, this.linkElement );\r | |
415 | \r | |
416 | // Remove empty style attribute.\r | |
417 | if ( !this.imageElement.getAttribute( 'style' ) )\r | |
418 | this.imageElement.removeAttribute( 'style' );\r | |
419 | \r | |
420 | // Insert a new Image.\r | |
421 | if ( !this.imageEditMode ) {\r | |
422 | if ( this.addLink ) {\r | |
423 | if ( !this.linkEditMode ) {\r | |
424 | // Insert a new link.\r | |
425 | editor.insertElement( this.linkElement );\r | |
426 | this.linkElement.append( this.imageElement, false );\r | |
427 | } else {\r | |
428 | // We already have a link in editor.\r | |
429 | if ( this.linkElement.equals( editor.getSelection().getSelectedElement() ) ) {\r | |
430 | // If the link is selected outside, replace it's content rather than the link itself. ([<a>foo</a>])\r | |
431 | this.linkElement.setHtml( '' );\r | |
432 | this.linkElement.append( this.imageElement, false );\r | |
433 | } else {\r | |
434 | // Only inside of the link is selected, so replace it with image. (<a>[foo]</a>, <a>[f]oo</a>)\r | |
435 | editor.insertElement( this.imageElement );\r | |
436 | }\r | |
437 | }\r | |
438 | } else {\r | |
439 | editor.insertElement( this.imageElement );\r | |
440 | }\r | |
441 | }\r | |
442 | // Image already exists.\r | |
443 | else {\r | |
444 | // Add a new link element.\r | |
445 | if ( !this.linkEditMode && this.addLink ) {\r | |
446 | editor.insertElement( this.linkElement );\r | |
447 | this.imageElement.appendTo( this.linkElement );\r | |
448 | }\r | |
449 | // Remove Link, Image exists.\r | |
450 | else if ( this.linkEditMode && !this.addLink ) {\r | |
451 | editor.getSelection().selectElement( this.linkElement );\r | |
452 | editor.insertElement( this.imageElement );\r | |
453 | }\r | |
454 | }\r | |
455 | },\r | |
456 | onLoad: function() {\r | |
457 | if ( dialogType != 'image' )\r | |
458 | this.hidePage( 'Link' ); //Hide Link tab.\r | |
459 | var doc = this._.element.getDocument();\r | |
460 | \r | |
461 | if ( this.getContentElement( 'info', 'ratioLock' ) ) {\r | |
462 | this.addFocusable( doc.getById( btnResetSizeId ), 5 );\r | |
463 | this.addFocusable( doc.getById( btnLockSizesId ), 5 );\r | |
464 | }\r | |
465 | \r | |
466 | this.commitContent = commitContent;\r | |
467 | },\r | |
468 | onHide: function() {\r | |
469 | if ( this.preview )\r | |
470 | this.commitContent( CLEANUP, this.preview );\r | |
471 | \r | |
472 | if ( this.originalElement ) {\r | |
473 | this.originalElement.removeListener( 'load', onImgLoadEvent );\r | |
474 | this.originalElement.removeListener( 'error', onImgLoadErrorEvent );\r | |
475 | this.originalElement.removeListener( 'abort', onImgLoadErrorEvent );\r | |
476 | this.originalElement.remove();\r | |
477 | this.originalElement = false; // Dialog is closed.\r | |
478 | }\r | |
479 | \r | |
480 | delete this.imageElement;\r | |
481 | },\r | |
482 | contents: [ {\r | |
483 | id: 'info',\r | |
484 | label: editor.lang.image.infoTab,\r | |
485 | accessKey: 'I',\r | |
486 | elements: [ {\r | |
487 | type: 'vbox',\r | |
488 | padding: 0,\r | |
489 | children: [ {\r | |
490 | type: 'hbox',\r | |
491 | widths: [ '280px', '110px' ],\r | |
492 | align: 'right',\r | |
493 | className: 'cke_dialog_image_url',\r | |
494 | children: [ {\r | |
495 | id: 'txtUrl',\r | |
496 | type: 'text',\r | |
497 | label: editor.lang.common.url,\r | |
498 | required: true,\r | |
499 | onChange: function() {\r | |
500 | var dialog = this.getDialog(),\r | |
501 | newUrl = this.getValue();\r | |
502 | \r | |
503 | // Update original image.\r | |
504 | // Prevent from load before onShow.\r | |
505 | if ( newUrl.length > 0 ) {\r | |
506 | dialog = this.getDialog();\r | |
507 | var original = dialog.originalElement;\r | |
508 | \r | |
509 | if ( dialog.preview ) {\r | |
510 | dialog.preview.removeStyle( 'display' );\r | |
511 | }\r | |
512 | \r | |
513 | original.setCustomData( 'isReady', 'false' );\r | |
514 | // Show loader.\r | |
515 | var loader = CKEDITOR.document.getById( imagePreviewLoaderId );\r | |
516 | if ( loader )\r | |
517 | loader.setStyle( 'display', '' );\r | |
518 | \r | |
519 | original.on( 'load', onImgLoadEvent, dialog );\r | |
520 | original.on( 'error', onImgLoadErrorEvent, dialog );\r | |
521 | original.on( 'abort', onImgLoadErrorEvent, dialog );\r | |
522 | original.setAttribute( 'src', newUrl );\r | |
523 | \r | |
524 | if ( dialog.preview ) {\r | |
525 | // Query the preloader to figure out the url impacted by based href.\r | |
526 | previewPreloader.setAttribute( 'src', newUrl );\r | |
527 | dialog.preview.setAttribute( 'src', previewPreloader.$.src );\r | |
528 | updatePreview( dialog );\r | |
529 | }\r | |
530 | }\r | |
531 | // Dont show preview if no URL given.\r | |
532 | else if ( dialog.preview ) {\r | |
533 | dialog.preview.removeAttribute( 'src' );\r | |
534 | dialog.preview.setStyle( 'display', 'none' );\r | |
535 | }\r | |
536 | },\r | |
537 | setup: function( type, element ) {\r | |
538 | if ( type == IMAGE ) {\r | |
539 | var url = element.data( 'cke-saved-src' ) || element.getAttribute( 'src' );\r | |
540 | var field = this;\r | |
541 | \r | |
542 | this.getDialog().dontResetSize = true;\r | |
543 | \r | |
544 | field.setValue( url ); // And call this.onChange()\r | |
545 | // Manually set the initial value.(http://dev.ckeditor.com/ticket/4191)\r | |
546 | field.setInitValue();\r | |
547 | }\r | |
548 | },\r | |
549 | commit: function( type, element ) {\r | |
550 | if ( type == IMAGE && ( this.getValue() || this.isChanged() ) ) {\r | |
551 | element.data( 'cke-saved-src', this.getValue() );\r | |
552 | element.setAttribute( 'src', this.getValue() );\r | |
553 | } else if ( type == CLEANUP ) {\r | |
554 | element.setAttribute( 'src', '' ); // If removeAttribute doesn't work.\r | |
555 | element.removeAttribute( 'src' );\r | |
556 | }\r | |
557 | },\r | |
558 | validate: CKEDITOR.dialog.validate.notEmpty( editor.lang.image.urlMissing )\r | |
559 | },\r | |
560 | {\r | |
561 | type: 'button',\r | |
562 | id: 'browse',\r | |
563 | // v-align with the 'txtUrl' field.\r | |
564 | // TODO: We need something better than a fixed size here.\r | |
565 | style: 'display:inline-block;margin-top:14px;',\r | |
566 | align: 'center',\r | |
567 | label: editor.lang.common.browseServer,\r | |
568 | hidden: true,\r | |
569 | filebrowser: 'info:txtUrl'\r | |
570 | } ]\r | |
571 | } ]\r | |
572 | },\r | |
573 | {\r | |
574 | id: 'txtAlt',\r | |
575 | type: 'text',\r | |
576 | label: editor.lang.image.alt,\r | |
577 | accessKey: 'T',\r | |
578 | 'default': '',\r | |
579 | onChange: function() {\r | |
580 | updatePreview( this.getDialog() );\r | |
581 | },\r | |
582 | setup: function( type, element ) {\r | |
583 | if ( type == IMAGE )\r | |
584 | this.setValue( element.getAttribute( 'alt' ) );\r | |
585 | },\r | |
586 | commit: function( type, element ) {\r | |
587 | if ( type == IMAGE ) {\r | |
588 | if ( this.getValue() || this.isChanged() )\r | |
589 | element.setAttribute( 'alt', this.getValue() );\r | |
590 | } else if ( type == PREVIEW )\r | |
591 | element.setAttribute( 'alt', this.getValue() );\r | |
592 | else if ( type == CLEANUP ) {\r | |
593 | element.removeAttribute( 'alt' );\r | |
594 | }\r | |
595 | \r | |
596 | }\r | |
597 | },\r | |
598 | {\r | |
599 | type: 'hbox',\r | |
600 | children: [ {\r | |
601 | id: 'basic',\r | |
602 | type: 'vbox',\r | |
603 | children: [ {\r | |
604 | type: 'hbox',\r | |
605 | requiredContent: 'img{width,height}',\r | |
606 | widths: [ '50%', '50%' ],\r | |
607 | children: [ {\r | |
608 | type: 'vbox',\r | |
609 | padding: 1,\r | |
610 | children: [ {\r | |
611 | type: 'text',\r | |
612 | width: '45px',\r | |
613 | id: 'txtWidth',\r | |
614 | label: editor.lang.common.width,\r | |
615 | onKeyUp: onSizeChange,\r | |
616 | onChange: function() {\r | |
617 | commitInternally.call( this, 'advanced:txtdlgGenStyle' );\r | |
618 | },\r | |
619 | validate: function() {\r | |
620 | var aMatch = this.getValue().match( regexGetSizeOrEmpty ),\r | |
621 | isValid = !!( aMatch && parseInt( aMatch[ 1 ], 10 ) !== 0 );\r | |
622 | if ( !isValid )\r | |
623 | alert( editor.lang.common.invalidWidth ); // jshint ignore:line\r | |
624 | return isValid;\r | |
625 | },\r | |
626 | setup: setupDimension,\r | |
627 | commit: function( type, element ) {\r | |
628 | var value = this.getValue();\r | |
629 | if ( type == IMAGE ) {\r | |
630 | if ( value && editor.activeFilter.check( 'img{width,height}' ) )\r | |
631 | element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );\r | |
632 | else\r | |
633 | element.removeStyle( 'width' );\r | |
634 | \r | |
635 | element.removeAttribute( 'width' );\r | |
636 | } else if ( type == PREVIEW ) {\r | |
637 | var aMatch = value.match( regexGetSize );\r | |
638 | if ( !aMatch ) {\r | |
639 | var oImageOriginal = this.getDialog().originalElement;\r | |
640 | if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )\r | |
641 | element.setStyle( 'width', oImageOriginal.$.width + 'px' );\r | |
642 | } else {\r | |
643 | element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );\r | |
644 | }\r | |
645 | } else if ( type == CLEANUP ) {\r | |
646 | element.removeAttribute( 'width' );\r | |
647 | element.removeStyle( 'width' );\r | |
648 | }\r | |
649 | }\r | |
650 | },\r | |
651 | {\r | |
652 | type: 'text',\r | |
653 | id: 'txtHeight',\r | |
654 | width: '45px',\r | |
655 | label: editor.lang.common.height,\r | |
656 | onKeyUp: onSizeChange,\r | |
657 | onChange: function() {\r | |
658 | commitInternally.call( this, 'advanced:txtdlgGenStyle' );\r | |
659 | },\r | |
660 | validate: function() {\r | |
661 | var aMatch = this.getValue().match( regexGetSizeOrEmpty ),\r | |
662 | isValid = !!( aMatch && parseInt( aMatch[ 1 ], 10 ) !== 0 );\r | |
663 | if ( !isValid )\r | |
664 | alert( editor.lang.common.invalidHeight ); // jshint ignore:line\r | |
665 | return isValid;\r | |
666 | },\r | |
667 | setup: setupDimension,\r | |
668 | commit: function( type, element ) {\r | |
669 | var value = this.getValue();\r | |
670 | if ( type == IMAGE ) {\r | |
671 | if ( value && editor.activeFilter.check( 'img{width,height}' ) )\r | |
672 | element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );\r | |
673 | else\r | |
674 | element.removeStyle( 'height' );\r | |
675 | \r | |
676 | element.removeAttribute( 'height' );\r | |
677 | } else if ( type == PREVIEW ) {\r | |
678 | var aMatch = value.match( regexGetSize );\r | |
679 | if ( !aMatch ) {\r | |
680 | var oImageOriginal = this.getDialog().originalElement;\r | |
681 | if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )\r | |
682 | element.setStyle( 'height', oImageOriginal.$.height + 'px' );\r | |
683 | } else {\r | |
684 | element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );\r | |
685 | }\r | |
686 | } else if ( type == CLEANUP ) {\r | |
687 | element.removeAttribute( 'height' );\r | |
688 | element.removeStyle( 'height' );\r | |
689 | }\r | |
690 | }\r | |
691 | } ]\r | |
692 | },\r | |
693 | {\r | |
694 | id: 'ratioLock',\r | |
695 | type: 'html',\r | |
696 | className: 'cke_dialog_image_ratiolock',\r | |
697 | style: 'margin-top:30px;width:40px;height:40px;',\r | |
698 | onLoad: function() {\r | |
699 | // Activate Reset button\r | |
700 | var resetButton = CKEDITOR.document.getById( btnResetSizeId ),\r | |
701 | ratioButton = CKEDITOR.document.getById( btnLockSizesId );\r | |
702 | if ( resetButton ) {\r | |
703 | resetButton.on( 'click', function( evt ) {\r | |
704 | resetSize( this );\r | |
705 | evt.data && evt.data.preventDefault();\r | |
706 | }, this.getDialog() );\r | |
707 | resetButton.on( 'mouseover', function() {\r | |
708 | this.addClass( 'cke_btn_over' );\r | |
709 | }, resetButton );\r | |
710 | resetButton.on( 'mouseout', function() {\r | |
711 | this.removeClass( 'cke_btn_over' );\r | |
712 | }, resetButton );\r | |
713 | }\r | |
714 | // Activate (Un)LockRatio button\r | |
715 | if ( ratioButton ) {\r | |
716 | ratioButton.on( 'click', function( evt ) {\r | |
717 | switchLockRatio( this );\r | |
718 | \r | |
719 | var oImageOriginal = this.originalElement,\r | |
720 | width = this.getValueOf( 'info', 'txtWidth' );\r | |
721 | \r | |
722 | if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' && width ) {\r | |
723 | var height = oImageOriginal.$.height / oImageOriginal.$.width * width;\r | |
724 | if ( !isNaN( height ) ) {\r | |
725 | this.setValueOf( 'info', 'txtHeight', Math.round( height ) );\r | |
726 | updatePreview( this );\r | |
727 | }\r | |
728 | }\r | |
729 | evt.data && evt.data.preventDefault();\r | |
730 | }, this.getDialog() );\r | |
731 | ratioButton.on( 'mouseover', function() {\r | |
732 | this.addClass( 'cke_btn_over' );\r | |
733 | }, ratioButton );\r | |
734 | ratioButton.on( 'mouseout', function() {\r | |
735 | this.removeClass( 'cke_btn_over' );\r | |
736 | }, ratioButton );\r | |
737 | }\r | |
738 | },\r | |
739 | html: '<div>' +\r | |
740 | '<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.lockRatio +\r | |
741 | '" class="cke_btn_locked" id="' + btnLockSizesId + '" role="checkbox"><span class="cke_icon"></span><span class="cke_label">' + editor.lang.image.lockRatio + '</span></a>' +\r | |
742 | '<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.resetSize +\r | |
743 | '" class="cke_btn_reset" id="' + btnResetSizeId + '" role="button"><span class="cke_label">' + editor.lang.image.resetSize + '</span></a>' +\r | |
744 | '</div>'\r | |
745 | } ]\r | |
746 | },\r | |
747 | {\r | |
748 | type: 'vbox',\r | |
749 | padding: 1,\r | |
750 | children: [ {\r | |
751 | type: 'text',\r | |
752 | id: 'txtBorder',\r | |
753 | requiredContent: 'img{border-width}',\r | |
754 | width: '60px',\r | |
755 | label: editor.lang.image.border,\r | |
756 | 'default': '',\r | |
757 | onKeyUp: function() {\r | |
758 | updatePreview( this.getDialog() );\r | |
759 | },\r | |
760 | onChange: function() {\r | |
761 | commitInternally.call( this, 'advanced:txtdlgGenStyle' );\r | |
762 | },\r | |
763 | validate: CKEDITOR.dialog.validate.integer( editor.lang.image.validateBorder ),\r | |
764 | setup: function( type, element ) {\r | |
765 | if ( type == IMAGE ) {\r | |
766 | var value,\r | |
767 | borderStyle = element.getStyle( 'border-width' );\r | |
768 | borderStyle = borderStyle && borderStyle.match( /^(\d+px)(?: \1 \1 \1)?$/ );\r | |
769 | value = borderStyle && parseInt( borderStyle[ 1 ], 10 );\r | |
770 | isNaN( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'border' ) );\r | |
771 | this.setValue( value );\r | |
772 | }\r | |
773 | },\r | |
774 | commit: function( type, element ) {\r | |
775 | var value = parseInt( this.getValue(), 10 );\r | |
776 | if ( type == IMAGE || type == PREVIEW ) {\r | |
777 | if ( !isNaN( value ) ) {\r | |
778 | element.setStyle( 'border-width', CKEDITOR.tools.cssLength( value ) );\r | |
779 | element.setStyle( 'border-style', 'solid' );\r | |
780 | } else if ( !value && this.isChanged() ) {\r | |
781 | element.removeStyle( 'border' );\r | |
782 | }\r | |
783 | \r | |
784 | if ( type == IMAGE )\r | |
785 | element.removeAttribute( 'border' );\r | |
786 | } else if ( type == CLEANUP ) {\r | |
787 | element.removeAttribute( 'border' );\r | |
788 | element.removeStyle( 'border-width' );\r | |
789 | element.removeStyle( 'border-style' );\r | |
790 | element.removeStyle( 'border-color' );\r | |
791 | }\r | |
792 | }\r | |
793 | },\r | |
794 | {\r | |
795 | type: 'text',\r | |
796 | id: 'txtHSpace',\r | |
797 | requiredContent: 'img{margin-left,margin-right}',\r | |
798 | width: '60px',\r | |
799 | label: editor.lang.image.hSpace,\r | |
800 | 'default': '',\r | |
801 | onKeyUp: function() {\r | |
802 | updatePreview( this.getDialog() );\r | |
803 | },\r | |
804 | onChange: function() {\r | |
805 | commitInternally.call( this, 'advanced:txtdlgGenStyle' );\r | |
806 | },\r | |
807 | validate: CKEDITOR.dialog.validate.integer( editor.lang.image.validateHSpace ),\r | |
808 | setup: function( type, element ) {\r | |
809 | if ( type == IMAGE ) {\r | |
810 | var value, marginLeftPx, marginRightPx,\r | |
811 | marginLeftStyle = element.getStyle( 'margin-left' ),\r | |
812 | marginRightStyle = element.getStyle( 'margin-right' );\r | |
813 | \r | |
814 | marginLeftStyle = marginLeftStyle && marginLeftStyle.match( pxLengthRegex );\r | |
815 | marginRightStyle = marginRightStyle && marginRightStyle.match( pxLengthRegex );\r | |
816 | marginLeftPx = parseInt( marginLeftStyle, 10 );\r | |
817 | marginRightPx = parseInt( marginRightStyle, 10 );\r | |
818 | \r | |
819 | value = ( marginLeftPx == marginRightPx ) && marginLeftPx;\r | |
820 | isNaN( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'hspace' ) );\r | |
821 | \r | |
822 | this.setValue( value );\r | |
823 | }\r | |
824 | },\r | |
825 | commit: function( type, element ) {\r | |
826 | var value = parseInt( this.getValue(), 10 );\r | |
827 | if ( type == IMAGE || type == PREVIEW ) {\r | |
828 | if ( !isNaN( value ) ) {\r | |
829 | element.setStyle( 'margin-left', CKEDITOR.tools.cssLength( value ) );\r | |
830 | element.setStyle( 'margin-right', CKEDITOR.tools.cssLength( value ) );\r | |
831 | } else if ( !value && this.isChanged() ) {\r | |
832 | element.removeStyle( 'margin-left' );\r | |
833 | element.removeStyle( 'margin-right' );\r | |
834 | }\r | |
835 | \r | |
836 | if ( type == IMAGE )\r | |
837 | element.removeAttribute( 'hspace' );\r | |
838 | } else if ( type == CLEANUP ) {\r | |
839 | element.removeAttribute( 'hspace' );\r | |
840 | element.removeStyle( 'margin-left' );\r | |
841 | element.removeStyle( 'margin-right' );\r | |
842 | }\r | |
843 | }\r | |
844 | },\r | |
845 | {\r | |
846 | type: 'text',\r | |
847 | id: 'txtVSpace',\r | |
848 | requiredContent: 'img{margin-top,margin-bottom}',\r | |
849 | width: '60px',\r | |
850 | label: editor.lang.image.vSpace,\r | |
851 | 'default': '',\r | |
852 | onKeyUp: function() {\r | |
853 | updatePreview( this.getDialog() );\r | |
854 | },\r | |
855 | onChange: function() {\r | |
856 | commitInternally.call( this, 'advanced:txtdlgGenStyle' );\r | |
857 | },\r | |
858 | validate: CKEDITOR.dialog.validate.integer( editor.lang.image.validateVSpace ),\r | |
859 | setup: function( type, element ) {\r | |
860 | if ( type == IMAGE ) {\r | |
861 | var value, marginTopPx, marginBottomPx,\r | |
862 | marginTopStyle = element.getStyle( 'margin-top' ),\r | |
863 | marginBottomStyle = element.getStyle( 'margin-bottom' );\r | |
864 | \r | |
865 | marginTopStyle = marginTopStyle && marginTopStyle.match( pxLengthRegex );\r | |
866 | marginBottomStyle = marginBottomStyle && marginBottomStyle.match( pxLengthRegex );\r | |
867 | marginTopPx = parseInt( marginTopStyle, 10 );\r | |
868 | marginBottomPx = parseInt( marginBottomStyle, 10 );\r | |
869 | \r | |
870 | value = ( marginTopPx == marginBottomPx ) && marginTopPx;\r | |
871 | isNaN( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'vspace' ) );\r | |
872 | this.setValue( value );\r | |
873 | }\r | |
874 | },\r | |
875 | commit: function( type, element ) {\r | |
876 | var value = parseInt( this.getValue(), 10 );\r | |
877 | if ( type == IMAGE || type == PREVIEW ) {\r | |
878 | if ( !isNaN( value ) ) {\r | |
879 | element.setStyle( 'margin-top', CKEDITOR.tools.cssLength( value ) );\r | |
880 | element.setStyle( 'margin-bottom', CKEDITOR.tools.cssLength( value ) );\r | |
881 | } else if ( !value && this.isChanged() ) {\r | |
882 | element.removeStyle( 'margin-top' );\r | |
883 | element.removeStyle( 'margin-bottom' );\r | |
884 | }\r | |
885 | \r | |
886 | if ( type == IMAGE )\r | |
887 | element.removeAttribute( 'vspace' );\r | |
888 | } else if ( type == CLEANUP ) {\r | |
889 | element.removeAttribute( 'vspace' );\r | |
890 | element.removeStyle( 'margin-top' );\r | |
891 | element.removeStyle( 'margin-bottom' );\r | |
892 | }\r | |
893 | }\r | |
894 | },\r | |
895 | {\r | |
896 | id: 'cmbAlign',\r | |
897 | requiredContent: 'img{float}',\r | |
898 | type: 'select',\r | |
899 | widths: [ '35%', '65%' ],\r | |
900 | style: 'width:90px',\r | |
901 | label: editor.lang.common.align,\r | |
902 | 'default': '',\r | |
903 | items: [\r | |
904 | [ editor.lang.common.notSet, '' ],\r | |
905 | [ editor.lang.common.alignLeft, 'left' ],\r | |
906 | [ editor.lang.common.alignRight, 'right' ]\r | |
907 | // Backward compatible with v2 on setup when specified as attribute value,\r | |
908 | // while these values are no more available as select options.\r | |
909 | // [ editor.lang.image.alignAbsBottom , 'absBottom'],\r | |
910 | // [ editor.lang.image.alignAbsMiddle , 'absMiddle'],\r | |
911 | // [ editor.lang.image.alignBaseline , 'baseline'],\r | |
912 | // [ editor.lang.image.alignTextTop , 'text-top'],\r | |
913 | // [ editor.lang.image.alignBottom , 'bottom'],\r | |
914 | // [ editor.lang.image.alignMiddle , 'middle'],\r | |
915 | // [ editor.lang.image.alignTop , 'top']\r | |
916 | ],\r | |
917 | onChange: function() {\r | |
918 | updatePreview( this.getDialog() );\r | |
919 | commitInternally.call( this, 'advanced:txtdlgGenStyle' );\r | |
920 | },\r | |
921 | setup: function( type, element ) {\r | |
922 | if ( type == IMAGE ) {\r | |
923 | var value = element.getStyle( 'float' );\r | |
924 | switch ( value ) {\r | |
925 | // Ignore those unrelated values.\r | |
926 | case 'inherit':\r | |
927 | case 'none':\r | |
928 | value = '';\r | |
929 | }\r | |
930 | \r | |
931 | !value && ( value = ( element.getAttribute( 'align' ) || '' ).toLowerCase() );\r | |
932 | this.setValue( value );\r | |
933 | }\r | |
934 | },\r | |
935 | commit: function( type, element ) {\r | |
936 | var value = this.getValue();\r | |
937 | if ( type == IMAGE || type == PREVIEW ) {\r | |
938 | if ( value )\r | |
939 | element.setStyle( 'float', value );\r | |
940 | else\r | |
941 | element.removeStyle( 'float' );\r | |
942 | \r | |
943 | if ( type == IMAGE ) {\r | |
944 | value = ( element.getAttribute( 'align' ) || '' ).toLowerCase();\r | |
945 | switch ( value ) {\r | |
946 | // we should remove it only if it matches "left" or "right",\r | |
947 | // otherwise leave it intact.\r | |
948 | case 'left':\r | |
949 | case 'right':\r | |
950 | element.removeAttribute( 'align' );\r | |
951 | }\r | |
952 | }\r | |
953 | } else if ( type == CLEANUP ) {\r | |
954 | element.removeStyle( 'float' );\r | |
955 | }\r | |
956 | }\r | |
957 | } ]\r | |
958 | } ]\r | |
959 | },\r | |
960 | {\r | |
961 | type: 'vbox',\r | |
962 | height: '250px',\r | |
963 | children: [ {\r | |
964 | type: 'html',\r | |
965 | id: 'htmlPreview',\r | |
966 | style: 'width:95%;',\r | |
967 | html: '<div>' + CKEDITOR.tools.htmlEncode( editor.lang.common.preview ) + '<br>' +\r | |
968 | '<div id="' + imagePreviewLoaderId + '" class="ImagePreviewLoader" style="display:none"><div class="loading"> </div></div>' +\r | |
969 | '<div class="ImagePreviewBox"><table><tr><td>' +\r | |
970 | '<a href="javascript:void(0)" target="_blank" onclick="return false;" id="' + previewLinkId + '">' +\r | |
971 | '<img id="' + previewImageId + '" alt="" /></a>' +\r | |
972 | // jscs:disable maximumLineLength\r | |
973 | ( editor.config.image_previewText || 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ' +\r | |
974 | 'Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, ' +\r | |
975 | 'nulla. Aenean dictum lacinia tortor. Nunc iaculis, nibh non iaculis aliquam, orci felis euismod neque, sed ornare massa mauris sed velit. Nulla pretium mi et risus. Fusce mi pede, tempor id, cursus ac, ullamcorper nec, enim. Sed tortor. Curabitur molestie. Duis velit augue, condimentum at, ultrices a, luctus ut, orci. Donec pellentesque egestas eros. Integer cursus, augue in cursus faucibus, eros pede bibendum sem, in tempus tellus justo quis ligula. Etiam eget tortor. Vestibulum rutrum, est ut placerat elementum, lectus nisl aliquam velit, tempor aliquam eros nunc nonummy metus. In eros metus, gravida a, gravida sed, lobortis id, turpis. Ut ultrices, ipsum at venenatis fringilla, sem nulla lacinia tellus, eget aliquet turpis mauris non enim. Nam turpis. Suspendisse lacinia. Curabitur ac tortor ut ipsum egestas elementum. Nunc imperdiet gravida mauris.' ) +\r | |
976 | // jscs:enable maximumLineLength\r | |
977 | '</td></tr></table></div></div>'\r | |
978 | } ]\r | |
979 | } ]\r | |
980 | } ]\r | |
981 | },\r | |
982 | {\r | |
983 | id: 'Link',\r | |
984 | requiredContent: 'a[href]',\r | |
985 | label: editor.lang.image.linkTab,\r | |
986 | padding: 0,\r | |
987 | elements: [ {\r | |
988 | id: 'txtUrl',\r | |
989 | type: 'text',\r | |
990 | label: editor.lang.common.url,\r | |
991 | style: 'width: 100%',\r | |
992 | 'default': '',\r | |
993 | setup: function( type, element ) {\r | |
994 | if ( type == LINK ) {\r | |
995 | var href = element.data( 'cke-saved-href' );\r | |
996 | if ( !href )\r | |
997 | href = element.getAttribute( 'href' );\r | |
998 | this.setValue( href );\r | |
999 | }\r | |
1000 | },\r | |
1001 | commit: function( type, element ) {\r | |
1002 | if ( type == LINK ) {\r | |
1003 | if ( this.getValue() || this.isChanged() ) {\r | |
1004 | var url = this.getValue();\r | |
1005 | element.data( 'cke-saved-href', url );\r | |
1006 | element.setAttribute( 'href', url );\r | |
1007 | \r | |
1008 | if ( this.getValue() || !editor.config.image_removeLinkByEmptyURL )\r | |
1009 | this.getDialog().addLink = true;\r | |
1010 | else\r | |
1011 | this.getDialog().addLink = false;\r | |
1012 | }\r | |
1013 | }\r | |
1014 | }\r | |
1015 | },\r | |
1016 | {\r | |
1017 | type: 'button',\r | |
1018 | id: 'browse',\r | |
1019 | className: 'cke_dialog_image_browse',\r | |
1020 | filebrowser: {\r | |
1021 | action: 'Browse',\r | |
1022 | target: 'Link:txtUrl',\r | |
1023 | url: editor.config.filebrowserImageBrowseLinkUrl\r | |
1024 | },\r | |
1025 | style: 'float:right',\r | |
1026 | hidden: true,\r | |
1027 | label: editor.lang.common.browseServer\r | |
1028 | },\r | |
1029 | {\r | |
1030 | id: 'cmbTarget',\r | |
1031 | type: 'select',\r | |
1032 | requiredContent: 'a[target]',\r | |
1033 | label: editor.lang.common.target,\r | |
1034 | 'default': '',\r | |
1035 | items: [\r | |
1036 | [ editor.lang.common.notSet, '' ],\r | |
1037 | [ editor.lang.common.targetNew, '_blank' ],\r | |
1038 | [ editor.lang.common.targetTop, '_top' ],\r | |
1039 | [ editor.lang.common.targetSelf, '_self' ],\r | |
1040 | [ editor.lang.common.targetParent, '_parent' ]\r | |
1041 | ],\r | |
1042 | setup: function( type, element ) {\r | |
1043 | if ( type == LINK )\r | |
1044 | this.setValue( element.getAttribute( 'target' ) || '' );\r | |
1045 | },\r | |
1046 | commit: function( type, element ) {\r | |
1047 | if ( type == LINK ) {\r | |
1048 | if ( this.getValue() || this.isChanged() )\r | |
1049 | element.setAttribute( 'target', this.getValue() );\r | |
1050 | }\r | |
1051 | }\r | |
1052 | } ]\r | |
1053 | },\r | |
1054 | {\r | |
1055 | id: 'Upload',\r | |
1056 | hidden: true,\r | |
1057 | filebrowser: 'uploadButton',\r | |
1058 | label: editor.lang.image.upload,\r | |
1059 | elements: [ {\r | |
1060 | type: 'file',\r | |
1061 | id: 'upload',\r | |
1062 | label: editor.lang.image.btnUpload,\r | |
1063 | style: 'height:40px',\r | |
1064 | size: 38\r | |
1065 | },\r | |
1066 | {\r | |
1067 | type: 'fileButton',\r | |
1068 | id: 'uploadButton',\r | |
1069 | filebrowser: 'info:txtUrl',\r | |
1070 | label: editor.lang.image.btnUpload,\r | |
1071 | 'for': [ 'Upload', 'upload' ]\r | |
1072 | } ]\r | |
1073 | },\r | |
1074 | {\r | |
1075 | id: 'advanced',\r | |
1076 | label: editor.lang.common.advancedTab,\r | |
1077 | elements: [ {\r | |
1078 | type: 'hbox',\r | |
1079 | widths: [ '50%', '25%', '25%' ],\r | |
1080 | children: [ {\r | |
1081 | type: 'text',\r | |
1082 | id: 'linkId',\r | |
1083 | requiredContent: 'img[id]',\r | |
1084 | label: editor.lang.common.id,\r | |
1085 | setup: function( type, element ) {\r | |
1086 | if ( type == IMAGE )\r | |
1087 | this.setValue( element.getAttribute( 'id' ) );\r | |
1088 | },\r | |
1089 | commit: function( type, element ) {\r | |
1090 | if ( type == IMAGE ) {\r | |
1091 | if ( this.getValue() || this.isChanged() )\r | |
1092 | element.setAttribute( 'id', this.getValue() );\r | |
1093 | }\r | |
1094 | }\r | |
1095 | },\r | |
1096 | {\r | |
1097 | id: 'cmbLangDir',\r | |
1098 | type: 'select',\r | |
1099 | requiredContent: 'img[dir]',\r | |
1100 | style: 'width : 100px;',\r | |
1101 | label: editor.lang.common.langDir,\r | |
1102 | 'default': '',\r | |
1103 | items: [\r | |
1104 | [ editor.lang.common.notSet, '' ],\r | |
1105 | [ editor.lang.common.langDirLtr, 'ltr' ],\r | |
1106 | [ editor.lang.common.langDirRtl, 'rtl' ]\r | |
1107 | ],\r | |
1108 | setup: function( type, element ) {\r | |
1109 | if ( type == IMAGE )\r | |
1110 | this.setValue( element.getAttribute( 'dir' ) );\r | |
1111 | },\r | |
1112 | commit: function( type, element ) {\r | |
1113 | if ( type == IMAGE ) {\r | |
1114 | if ( this.getValue() || this.isChanged() )\r | |
1115 | element.setAttribute( 'dir', this.getValue() );\r | |
1116 | }\r | |
1117 | }\r | |
1118 | },\r | |
1119 | {\r | |
1120 | type: 'text',\r | |
1121 | id: 'txtLangCode',\r | |
1122 | requiredContent: 'img[lang]',\r | |
1123 | label: editor.lang.common.langCode,\r | |
1124 | 'default': '',\r | |
1125 | setup: function( type, element ) {\r | |
1126 | if ( type == IMAGE )\r | |
1127 | this.setValue( element.getAttribute( 'lang' ) );\r | |
1128 | },\r | |
1129 | commit: function( type, element ) {\r | |
1130 | if ( type == IMAGE ) {\r | |
1131 | if ( this.getValue() || this.isChanged() )\r | |
1132 | element.setAttribute( 'lang', this.getValue() );\r | |
1133 | }\r | |
1134 | }\r | |
1135 | } ]\r | |
1136 | },\r | |
1137 | {\r | |
1138 | type: 'text',\r | |
1139 | id: 'txtGenLongDescr',\r | |
1140 | requiredContent: 'img[longdesc]',\r | |
1141 | label: editor.lang.common.longDescr,\r | |
1142 | setup: function( type, element ) {\r | |
1143 | if ( type == IMAGE )\r | |
1144 | this.setValue( element.getAttribute( 'longDesc' ) );\r | |
1145 | },\r | |
1146 | commit: function( type, element ) {\r | |
1147 | if ( type == IMAGE ) {\r | |
1148 | if ( this.getValue() || this.isChanged() )\r | |
1149 | element.setAttribute( 'longDesc', this.getValue() );\r | |
1150 | }\r | |
1151 | }\r | |
1152 | },\r | |
1153 | {\r | |
1154 | type: 'hbox',\r | |
1155 | widths: [ '50%', '50%' ],\r | |
1156 | children: [ {\r | |
1157 | type: 'text',\r | |
1158 | id: 'txtGenClass',\r | |
1159 | requiredContent: 'img(cke-xyz)', // Random text like 'xyz' will check if all are allowed.\r | |
1160 | label: editor.lang.common.cssClass,\r | |
1161 | 'default': '',\r | |
1162 | setup: function( type, element ) {\r | |
1163 | if ( type == IMAGE )\r | |
1164 | this.setValue( element.getAttribute( 'class' ) );\r | |
1165 | },\r | |
1166 | commit: function( type, element ) {\r | |
1167 | if ( type == IMAGE ) {\r | |
1168 | if ( this.getValue() || this.isChanged() )\r | |
1169 | element.setAttribute( 'class', this.getValue() );\r | |
1170 | }\r | |
1171 | }\r | |
1172 | },\r | |
1173 | {\r | |
1174 | type: 'text',\r | |
1175 | id: 'txtGenTitle',\r | |
1176 | requiredContent: 'img[title]',\r | |
1177 | label: editor.lang.common.advisoryTitle,\r | |
1178 | 'default': '',\r | |
1179 | onChange: function() {\r | |
1180 | updatePreview( this.getDialog() );\r | |
1181 | },\r | |
1182 | setup: function( type, element ) {\r | |
1183 | if ( type == IMAGE )\r | |
1184 | this.setValue( element.getAttribute( 'title' ) );\r | |
1185 | },\r | |
1186 | commit: function( type, element ) {\r | |
1187 | if ( type == IMAGE ) {\r | |
1188 | if ( this.getValue() || this.isChanged() )\r | |
1189 | element.setAttribute( 'title', this.getValue() );\r | |
1190 | } else if ( type == PREVIEW )\r | |
1191 | element.setAttribute( 'title', this.getValue() );\r | |
1192 | else if ( type == CLEANUP ) {\r | |
1193 | element.removeAttribute( 'title' );\r | |
1194 | }\r | |
1195 | }\r | |
1196 | } ]\r | |
1197 | },\r | |
1198 | {\r | |
1199 | type: 'text',\r | |
1200 | id: 'txtdlgGenStyle',\r | |
1201 | requiredContent: 'img{cke-xyz}', // Random text like 'xyz' will check if all are allowed.\r | |
1202 | label: editor.lang.common.cssStyle,\r | |
1203 | validate: CKEDITOR.dialog.validate.inlineStyle( editor.lang.common.invalidInlineStyle ),\r | |
1204 | 'default': '',\r | |
1205 | setup: function( type, element ) {\r | |
1206 | if ( type == IMAGE ) {\r | |
1207 | var genStyle = element.getAttribute( 'style' );\r | |
1208 | if ( !genStyle && element.$.style.cssText )\r | |
1209 | genStyle = element.$.style.cssText;\r | |
1210 | this.setValue( genStyle );\r | |
1211 | \r | |
1212 | var height = element.$.style.height,\r | |
1213 | width = element.$.style.width,\r | |
1214 | aMatchH = ( height ? height : '' ).match( regexGetSize ),\r | |
1215 | aMatchW = ( width ? width : '' ).match( regexGetSize );\r | |
1216 | \r | |
1217 | this.attributesInStyle = {\r | |
1218 | height: !!aMatchH,\r | |
1219 | width: !!aMatchW\r | |
1220 | };\r | |
1221 | }\r | |
1222 | },\r | |
1223 | onChange: function() {\r | |
1224 | commitInternally.call(\r | |
1225 | this, [\r | |
1226 | 'info:cmbFloat',\r | |
1227 | 'info:cmbAlign',\r | |
1228 | 'info:txtVSpace',\r | |
1229 | 'info:txtHSpace',\r | |
1230 | 'info:txtBorder',\r | |
1231 | 'info:txtWidth',\r | |
1232 | 'info:txtHeight'\r | |
1233 | ]\r | |
1234 | );\r | |
1235 | updatePreview( this );\r | |
1236 | },\r | |
1237 | commit: function( type, element ) {\r | |
1238 | if ( type == IMAGE && ( this.getValue() || this.isChanged() ) )\r | |
1239 | element.setAttribute( 'style', this.getValue() );\r | |
1240 | \r | |
1241 | }\r | |
1242 | } ]\r | |
1243 | } ]\r | |
1244 | };\r | |
1245 | };\r | |
1246 | \r | |
1247 | CKEDITOR.dialog.add( 'image', function( editor ) {\r | |
1248 | return imageDialog( editor, 'image' );\r | |
1249 | } );\r | |
1250 | \r | |
1251 | CKEDITOR.dialog.add( 'imagebutton', function( editor ) {\r | |
1252 | return imageDialog( editor, 'imagebutton' );\r | |
1253 | } );\r | |
1254 | } )();\r |