JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
9e9676a3af539e3e2843f300a49a0fe056d3f1a2
[ckeditor.git] / plugin.js
1 /*\r
2 Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.\r
3 For licensing, see LICENSE.html or http://ckeditor.com/license\r
4 */\r
5 \r
6 (function()\r
7 {\r
8         function protectFormStyles( formElement )\r
9         {\r
10                 if ( !formElement || formElement.type != CKEDITOR.NODE_ELEMENT || formElement.getName() != 'form' )\r
11                         return [];\r
12 \r
13                 var hijackRecord = [],\r
14                         hijackNames = [ 'style', 'className' ];\r
15                 for ( var i = 0 ; i < hijackNames.length ; i++ )\r
16                 {\r
17                         var name = hijackNames[i];\r
18                         var $node = formElement.$.elements.namedItem( name );\r
19                         if ( $node )\r
20                         {\r
21                                 var hijackNode = new CKEDITOR.dom.element( $node );\r
22                                 hijackRecord.push( [ hijackNode, hijackNode.nextSibling ] );\r
23                                 hijackNode.remove();\r
24                         }\r
25                 }\r
26 \r
27                 return hijackRecord;\r
28         }\r
29 \r
30         function restoreFormStyles( formElement, hijackRecord )\r
31         {\r
32                 if ( !formElement || formElement.type != CKEDITOR.NODE_ELEMENT || formElement.getName() != 'form' )\r
33                         return;\r
34 \r
35                 if ( hijackRecord.length > 0 )\r
36                 {\r
37                         for ( var i = hijackRecord.length - 1 ; i >= 0 ; i-- )\r
38                         {\r
39                                 var node = hijackRecord[i][0];\r
40                                 var sibling = hijackRecord[i][1];\r
41                                 if ( sibling )\r
42                                         node.insertBefore( sibling );\r
43                                 else\r
44                                         node.appendTo( formElement );\r
45                         }\r
46                 }\r
47         }\r
48 \r
49         function saveStyles( element, isInsideEditor )\r
50         {\r
51                 var data = protectFormStyles( element );\r
52                 var retval = {};\r
53 \r
54                 var $element = element.$;\r
55 \r
56                 if ( !isInsideEditor )\r
57                 {\r
58                         retval[ 'class' ] = $element.className || '';\r
59                         $element.className = '';\r
60                 }\r
61 \r
62                 retval.inline = $element.style.cssText || '';\r
63                 if ( !isInsideEditor )          // Reset any external styles that might interfere. (#2474)\r
64                         $element.style.cssText = 'position: static; overflow: visible';\r
65 \r
66                 restoreFormStyles( data );\r
67                 return retval;\r
68         }\r
69 \r
70         function restoreStyles( element, savedStyles )\r
71         {\r
72                 var data = protectFormStyles( element );\r
73                 var $element = element.$;\r
74                 if ( 'class' in savedStyles )\r
75                         $element.className = savedStyles[ 'class' ];\r
76                 if ( 'inline' in savedStyles )\r
77                         $element.style.cssText = savedStyles.inline;\r
78                 restoreFormStyles( data );\r
79         }\r
80 \r
81         function refreshCursor( editor )\r
82         {\r
83                 // Refresh all editor instances on the page (#5724).\r
84                 var all = CKEDITOR.instances;\r
85                 for ( var i in all )\r
86                 {\r
87                         var one = all[ i ];\r
88                         if ( one.mode == 'wysiwyg' && !one.readOnly )\r
89                         {\r
90                                 var body = one.document.getBody();\r
91                                 // Refresh 'contentEditable' otherwise\r
92                                 // DOM lifting breaks design mode. (#5560)\r
93                                 body.setAttribute( 'contentEditable', false );\r
94                                 body.setAttribute( 'contentEditable', true );\r
95                         }\r
96                 }\r
97 \r
98                 if ( editor.focusManager.hasFocus )\r
99                 {\r
100                         editor.toolbox.focus();\r
101                         editor.focus();\r
102                 }\r
103         }\r
104 \r
105         /**\r
106          * Adding an iframe shim to this element, OR removing the existing one if already applied.\r
107          * Note: This will only affect IE version below 7.\r
108          */\r
109          function createIframeShim( element )\r
110         {\r
111                 if ( !CKEDITOR.env.ie || CKEDITOR.env.version > 6 )\r
112                         return null;\r
113 \r
114                 var shim = CKEDITOR.dom.element.createFromHtml( '<iframe frameborder="0" tabindex="-1"' +\r
115                                         ' src="javascript:' +\r
116                                            'void((function(){' +\r
117                                                    'document.open();' +\r
118                                                    ( CKEDITOR.env.isCustomDomain() ? 'document.domain=\'' + this.getDocument().$.domain + '\';' : '' ) +\r
119                                                    'document.close();' +\r
120                                            '})())"' +\r
121                                         ' style="display:block;position:absolute;z-index:-1;' +\r
122                                         'progid:DXImageTransform.Microsoft.Alpha(opacity=0);' +\r
123                                         '"></iframe>' );\r
124                 return element.append( shim, true );\r
125         }\r
126 \r
127         CKEDITOR.plugins.add( 'maximize',\r
128         {\r
129                 init : function( editor )\r
130                 {\r
131                         var lang = editor.lang;\r
132                         var mainDocument = CKEDITOR.document,\r
133                                 mainWindow = mainDocument.getWindow();\r
134 \r
135                         // Saved selection and scroll position for the editing area.\r
136                         var savedSelection,\r
137                                 savedScroll;\r
138 \r
139                         // Saved scroll position for the outer window.\r
140                         var outerScroll;\r
141 \r
142                         var shim;\r
143 \r
144                         // Saved resize handler function.\r
145                         function resizeHandler()\r
146                         {\r
147                                 var viewPaneSize = mainWindow.getViewPaneSize();\r
148                                 shim && shim.setStyles( { width : viewPaneSize.width + 'px', height : viewPaneSize.height + 'px' } );\r
149                                 editor.resize( viewPaneSize.width, viewPaneSize.height, null, true );\r
150                         }\r
151 \r
152                         // Retain state after mode switches.\r
153                         var savedState = CKEDITOR.TRISTATE_OFF;\r
154 \r
155                         editor.addCommand( 'maximize',\r
156                                 {\r
157                                         // Disabled on iOS (#8307).\r
158                                         modes : { wysiwyg : !CKEDITOR.env.iOS, source : !CKEDITOR.env.iOS },\r
159                                         readOnly : 1,\r
160                                         editorFocus : false,\r
161                                         exec : function()\r
162                                         {\r
163                                                 var container = editor.container.getChild( 1 );\r
164                                                 var contents = editor.getThemeSpace( 'contents' );\r
165 \r
166                                                 // Save current selection and scroll position in editing area.\r
167                                                 if ( editor.mode == 'wysiwyg' )\r
168                                                 {\r
169                                                         var selection = editor.getSelection();\r
170                                                         savedSelection = selection && selection.getRanges();\r
171                                                         savedScroll = mainWindow.getScrollPosition();\r
172                                                 }\r
173                                                 else\r
174                                                 {\r
175                                                         var $textarea = editor.textarea.$;\r
176                                                         savedSelection = !CKEDITOR.env.ie && [ $textarea.selectionStart, $textarea.selectionEnd ];\r
177                                                         savedScroll = [ $textarea.scrollLeft, $textarea.scrollTop ];\r
178                                                 }\r
179 \r
180                                                 if ( this.state == CKEDITOR.TRISTATE_OFF )              // Go fullscreen if the state is off.\r
181                                                 {\r
182                                                         // Add event handler for resizing.\r
183                                                         mainWindow.on( 'resize', resizeHandler );\r
184 \r
185                                                         // Save the scroll bar position.\r
186                                                         outerScroll = mainWindow.getScrollPosition();\r
187 \r
188                                                         // Save and reset the styles for the entire node tree.\r
189                                                         var currentNode = editor.container;\r
190                                                         while ( ( currentNode = currentNode.getParent() ) )\r
191                                                         {\r
192                                                                 currentNode.setCustomData( 'maximize_saved_styles', saveStyles( currentNode ) );\r
193                                                                 currentNode.setStyle( 'z-index', editor.config.baseFloatZIndex - 1 );\r
194                                                         }\r
195                                                         contents.setCustomData( 'maximize_saved_styles', saveStyles( contents, true ) );\r
196                                                         container.setCustomData( 'maximize_saved_styles', saveStyles( container, true ) );\r
197 \r
198                                                         // Hide scroll bars.\r
199                                                         var styles =\r
200                                                                 {\r
201                                                                         overflow : CKEDITOR.env.webkit ? '' : 'hidden',         // #6896\r
202                                                                         width : 0,\r
203                                                                         height : 0\r
204                                                                 };\r
205 \r
206                                                         mainDocument.getDocumentElement().setStyles( styles );\r
207                                                         !CKEDITOR.env.gecko && mainDocument.getDocumentElement().setStyle( 'position', 'fixed' );\r
208                                                         !( CKEDITOR.env.gecko && CKEDITOR.env.quirks ) && mainDocument.getBody().setStyles( styles );\r
209 \r
210                                                         // Scroll to the top left (IE needs some time for it - #4923).\r
211                                                         CKEDITOR.env.ie ?\r
212                                                                 setTimeout( function() { mainWindow.$.scrollTo( 0, 0 ); }, 0 ) :\r
213                                                                 mainWindow.$.scrollTo( 0, 0 );\r
214 \r
215                                                         // Resize and move to top left.\r
216                                                         // Special treatment for FF Quirks (#7284)\r
217                                                         container.setStyle( 'position', CKEDITOR.env.gecko && CKEDITOR.env.quirks ? 'fixed' : 'absolute' );\r
218                                                         container.$.offsetLeft;                 // SAFARI BUG: See #2066.\r
219                                                         container.setStyles(\r
220                                                                 {\r
221                                                                         'z-index' : editor.config.baseFloatZIndex - 1,\r
222                                                                         left : '0px',\r
223                                                                         top : '0px'\r
224                                                                 } );\r
225 \r
226                                                         shim =  createIframeShim( container );          // IE6 select element penetration when maximized. (#4459)\r
227 \r
228                                                         // Add cke_maximized class before resize handle since that will change things sizes (#5580)\r
229                                                         container.addClass( 'cke_maximized' );\r
230 \r
231                                                         resizeHandler();\r
232 \r
233                                                         // Still not top left? Fix it. (Bug #174)\r
234                                                         var offset = container.getDocumentPosition();\r
235                                                         container.setStyles(\r
236                                                                 {\r
237                                                                         left : ( -1 * offset.x ) + 'px',\r
238                                                                         top : ( -1 * offset.y ) + 'px'\r
239                                                                 } );\r
240 \r
241                                                         // Fixing positioning editor chrome in Firefox break design mode. (#5149)\r
242                                                         CKEDITOR.env.gecko && refreshCursor( editor );\r
243 \r
244                                                 }\r
245                                                 else if ( this.state == CKEDITOR.TRISTATE_ON )  // Restore from fullscreen if the state is on.\r
246                                                 {\r
247                                                         // Remove event handler for resizing.\r
248                                                         mainWindow.removeListener( 'resize', resizeHandler );\r
249 \r
250                                                         // Restore CSS styles for the entire node tree.\r
251                                                         var editorElements = [ contents, container ];\r
252                                                         for ( var i = 0 ; i < editorElements.length ; i++ )\r
253                                                         {\r
254                                                                 restoreStyles( editorElements[i], editorElements[i].getCustomData( 'maximize_saved_styles' ) );\r
255                                                                 editorElements[i].removeCustomData( 'maximize_saved_styles' );\r
256                                                         }\r
257 \r
258                                                         currentNode = editor.container;\r
259                                                         while ( ( currentNode = currentNode.getParent() ) )\r
260                                                         {\r
261                                                                 restoreStyles( currentNode, currentNode.getCustomData( 'maximize_saved_styles' ) );\r
262                                                                 currentNode.removeCustomData( 'maximize_saved_styles' );\r
263                                                         }\r
264 \r
265                                                         // Restore the window scroll position.\r
266                                                         CKEDITOR.env.ie ?\r
267                                                                 setTimeout( function() { mainWindow.$.scrollTo( outerScroll.x, outerScroll.y ); }, 0 ) :\r
268                                                                 mainWindow.$.scrollTo( outerScroll.x, outerScroll.y );\r
269 \r
270                                                         // Remove cke_maximized class.\r
271                                                         container.removeClass( 'cke_maximized' );\r
272 \r
273                                                         // Webkit requires a re-layout on editor chrome. (#6695)\r
274                                                         if ( CKEDITOR.env.webkit )\r
275                                                         {\r
276                                                                 container.setStyle( 'display', 'inline' );\r
277                                                                 setTimeout( function(){ container.setStyle( 'display', 'block' ); }, 0 );\r
278                                                         }\r
279 \r
280                                                         if ( shim )\r
281                                                         {\r
282                                                                 shim.remove();\r
283                                                                 shim = null;\r
284                                                         }\r
285 \r
286                                                         // Emit a resize event, because this time the size is modified in\r
287                                                         // restoreStyles.\r
288                                                         editor.fire( 'resize' );\r
289                                                 }\r
290 \r
291                                                 this.toggleState();\r
292 \r
293                                                 // Toggle button label.\r
294                                                 var button = this.uiItems[ 0 ];\r
295                                                 // Only try to change the button if it exists (#6166)\r
296                                                 if( button )\r
297                                                 {\r
298                                                         var label = ( this.state == CKEDITOR.TRISTATE_OFF )\r
299                                                                 ? lang.maximize : lang.minimize;\r
300                                                         var buttonNode = editor.element.getDocument().getById( button._.id );\r
301                                                         buttonNode.getChild( 1 ).setHtml( label );\r
302                                                         buttonNode.setAttribute( 'title', label );\r
303                                                         buttonNode.setAttribute( 'href', 'javascript:void("' + label + '");' );\r
304                                                 }\r
305 \r
306                                                 // Restore selection and scroll position in editing area.\r
307                                                 if ( editor.mode == 'wysiwyg' )\r
308                                                 {\r
309                                                         if ( savedSelection )\r
310                                                         {\r
311                                                                 // Fixing positioning editor chrome in Firefox break design mode. (#5149)\r
312                                                                 CKEDITOR.env.gecko && refreshCursor( editor );\r
313 \r
314                                                                 editor.getSelection().selectRanges(savedSelection);\r
315                                                                 var element = editor.getSelection().getStartElement();\r
316                                                                 element && element.scrollIntoView( true );\r
317                                                         }\r
318 \r
319                                                         else\r
320                                                                 mainWindow.$.scrollTo( savedScroll.x, savedScroll.y );\r
321                                                 }\r
322                                                 else\r
323                                                 {\r
324                                                         if ( savedSelection )\r
325                                                         {\r
326                                                                 $textarea.selectionStart = savedSelection[0];\r
327                                                                 $textarea.selectionEnd = savedSelection[1];\r
328                                                         }\r
329                                                         $textarea.scrollLeft = savedScroll[0];\r
330                                                         $textarea.scrollTop = savedScroll[1];\r
331                                                 }\r
332 \r
333                                                 savedSelection = savedScroll = null;\r
334                                                 savedState = this.state;\r
335                                         },\r
336                                         canUndo : false\r
337                                 } );\r
338 \r
339                         editor.ui.addButton( 'Maximize',\r
340                                 {\r
341                                         label : lang.maximize,\r
342                                         command : 'maximize'\r
343                                 } );\r
344 \r
345                         // Restore the command state after mode change, unless it has been changed to disabled (#6467)\r
346                         editor.on( 'mode', function()\r
347                                 {\r
348                                         var command = editor.getCommand( 'maximize' );\r
349                                         command.setState( command.state == CKEDITOR.TRISTATE_DISABLED ? CKEDITOR.TRISTATE_DISABLED : savedState );\r
350                                 }, null, null, 100 );\r
351                 }\r
352         } );\r
353 })();\r