JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
4c04d14885f35fe27f3e65b2fefb6414479768dd
[ckeditor.git] / _source / plugins / maximize / plugin.js
1 /*\r
2 Copyright (c) 2003-2011, 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                                         modes : { wysiwyg : 1, source : 1 },\r
158                                         readOnly : 1,\r
159                                         editorFocus : false,\r
160                                         exec : function()\r
161                                         {\r
162                                                 var container = editor.container.getChild( 1 );\r
163                                                 var contents = editor.getThemeSpace( 'contents' );\r
164 \r
165                                                 // Save current selection and scroll position in editing area.\r
166                                                 if ( editor.mode == 'wysiwyg' )\r
167                                                 {\r
168                                                         var selection = editor.getSelection();\r
169                                                         savedSelection = selection && selection.getRanges();\r
170                                                         savedScroll = mainWindow.getScrollPosition();\r
171                                                 }\r
172                                                 else\r
173                                                 {\r
174                                                         var $textarea = editor.textarea.$;\r
175                                                         savedSelection = !CKEDITOR.env.ie && [ $textarea.selectionStart, $textarea.selectionEnd ];\r
176                                                         savedScroll = [ $textarea.scrollLeft, $textarea.scrollTop ];\r
177                                                 }\r
178 \r
179                                                 if ( this.state == CKEDITOR.TRISTATE_OFF )              // Go fullscreen if the state is off.\r
180                                                 {\r
181                                                         // Add event handler for resizing.\r
182                                                         mainWindow.on( 'resize', resizeHandler );\r
183 \r
184                                                         // Save the scroll bar position.\r
185                                                         outerScroll = mainWindow.getScrollPosition();\r
186 \r
187                                                         // Save and reset the styles for the entire node tree.\r
188                                                         var currentNode = editor.container;\r
189                                                         while ( ( currentNode = currentNode.getParent() ) )\r
190                                                         {\r
191                                                                 currentNode.setCustomData( 'maximize_saved_styles', saveStyles( currentNode ) );\r
192                                                                 currentNode.setStyle( 'z-index', editor.config.baseFloatZIndex - 1 );\r
193                                                         }\r
194                                                         contents.setCustomData( 'maximize_saved_styles', saveStyles( contents, true ) );\r
195                                                         container.setCustomData( 'maximize_saved_styles', saveStyles( container, true ) );\r
196 \r
197                                                         // Hide scroll bars.\r
198                                                         var styles =\r
199                                                                 {\r
200                                                                         overflow : CKEDITOR.env.webkit ? '' : 'hidden',         // #6896\r
201                                                                         width : 0,\r
202                                                                         height : 0\r
203                                                                 };\r
204 \r
205                                                         mainDocument.getDocumentElement().setStyles( styles );\r
206                                                         !CKEDITOR.env.gecko && mainDocument.getDocumentElement().setStyle( 'position', 'fixed' );\r
207                                                         !( CKEDITOR.env.gecko && CKEDITOR.env.quirks ) && mainDocument.getBody().setStyles( styles );\r
208 \r
209                                                         // Scroll to the top left (IE needs some time for it - #4923).\r
210                                                         CKEDITOR.env.ie ?\r
211                                                                 setTimeout( function() { mainWindow.$.scrollTo( 0, 0 ); }, 0 ) :\r
212                                                                 mainWindow.$.scrollTo( 0, 0 );\r
213 \r
214                                                         // Resize and move to top left.\r
215                                                         // Special treatment for FF Quirks (#7284)\r
216                                                         container.setStyle( 'position', CKEDITOR.env.gecko && CKEDITOR.env.quirks ? 'fixed' : 'absolute' );\r
217                                                         container.$.offsetLeft;                 // SAFARI BUG: See #2066.\r
218                                                         container.setStyles(\r
219                                                                 {\r
220                                                                         'z-index' : editor.config.baseFloatZIndex - 1,\r
221                                                                         left : '0px',\r
222                                                                         top : '0px'\r
223                                                                 } );\r
224 \r
225                                                         shim =  createIframeShim( container );          // IE6 select element penetration when maximized. (#4459)\r
226 \r
227                                                         // Add cke_maximized class before resize handle since that will change things sizes (#5580)\r
228                                                         container.addClass( 'cke_maximized' );\r
229 \r
230                                                         resizeHandler();\r
231 \r
232                                                         // Still not top left? Fix it. (Bug #174)\r
233                                                         var offset = container.getDocumentPosition();\r
234                                                         container.setStyles(\r
235                                                                 {\r
236                                                                         left : ( -1 * offset.x ) + 'px',\r
237                                                                         top : ( -1 * offset.y ) + 'px'\r
238                                                                 } );\r
239 \r
240                                                         // Fixing positioning editor chrome in Firefox break design mode. (#5149)\r
241                                                         CKEDITOR.env.gecko && refreshCursor( editor );\r
242 \r
243                                                 }\r
244                                                 else if ( this.state == CKEDITOR.TRISTATE_ON )  // Restore from fullscreen if the state is on.\r
245                                                 {\r
246                                                         // Remove event handler for resizing.\r
247                                                         mainWindow.removeListener( 'resize', resizeHandler );\r
248 \r
249                                                         // Restore CSS styles for the entire node tree.\r
250                                                         var editorElements = [ contents, container ];\r
251                                                         for ( var i = 0 ; i < editorElements.length ; i++ )\r
252                                                         {\r
253                                                                 restoreStyles( editorElements[i], editorElements[i].getCustomData( 'maximize_saved_styles' ) );\r
254                                                                 editorElements[i].removeCustomData( 'maximize_saved_styles' );\r
255                                                         }\r
256 \r
257                                                         currentNode = editor.container;\r
258                                                         while ( ( currentNode = currentNode.getParent() ) )\r
259                                                         {\r
260                                                                 restoreStyles( currentNode, currentNode.getCustomData( 'maximize_saved_styles' ) );\r
261                                                                 currentNode.removeCustomData( 'maximize_saved_styles' );\r
262                                                         }\r
263 \r
264                                                         // Restore the window scroll position.\r
265                                                         CKEDITOR.env.ie ?\r
266                                                                 setTimeout( function() { mainWindow.$.scrollTo( outerScroll.x, outerScroll.y ); }, 0 ) :\r
267                                                                 mainWindow.$.scrollTo( outerScroll.x, outerScroll.y );\r
268 \r
269                                                         // Remove cke_maximized class.\r
270                                                         container.removeClass( 'cke_maximized' );\r
271 \r
272                                                         // Webkit requires a re-layout on editor chrome. (#6695)\r
273                                                         if ( CKEDITOR.env.webkit )\r
274                                                         {\r
275                                                                 container.setStyle( 'display', 'inline' );\r
276                                                                 setTimeout( function(){ container.setStyle( 'display', 'block' ); }, 0 );\r
277                                                         }\r
278 \r
279                                                         if ( shim )\r
280                                                         {\r
281                                                                 shim.remove();\r
282                                                                 shim = null;\r
283                                                         }\r
284 \r
285                                                         // Emit a resize event, because this time the size is modified in\r
286                                                         // restoreStyles.\r
287                                                         editor.fire( 'resize' );\r
288                                                 }\r
289 \r
290                                                 this.toggleState();\r
291 \r
292                                                 // Toggle button label.\r
293                                                 var button = this.uiItems[ 0 ];\r
294                                                 // Only try to change the button if it exists (#6166)\r
295                                                 if( button )\r
296                                                 {\r
297                                                         var label = ( this.state == CKEDITOR.TRISTATE_OFF )\r
298                                                                 ? lang.maximize : lang.minimize;\r
299                                                         var buttonNode = editor.element.getDocument().getById( button._.id );\r
300                                                         buttonNode.getChild( 1 ).setHtml( label );\r
301                                                         buttonNode.setAttribute( 'title', label );\r
302                                                         buttonNode.setAttribute( 'href', 'javascript:void("' + label + '");' );\r
303                                                 }\r
304 \r
305                                                 // Restore selection and scroll position in editing area.\r
306                                                 if ( editor.mode == 'wysiwyg' )\r
307                                                 {\r
308                                                         if ( savedSelection )\r
309                                                         {\r
310                                                                 // Fixing positioning editor chrome in Firefox break design mode. (#5149)\r
311                                                                 CKEDITOR.env.gecko && refreshCursor( editor );\r
312 \r
313                                                                 editor.getSelection().selectRanges(savedSelection);\r
314                                                                 var element = editor.getSelection().getStartElement();\r
315                                                                 element && element.scrollIntoView( true );\r
316                                                         }\r
317 \r
318                                                         else\r
319                                                                 mainWindow.$.scrollTo( savedScroll.x, savedScroll.y );\r
320                                                 }\r
321                                                 else\r
322                                                 {\r
323                                                         if ( savedSelection )\r
324                                                         {\r
325                                                                 $textarea.selectionStart = savedSelection[0];\r
326                                                                 $textarea.selectionEnd = savedSelection[1];\r
327                                                         }\r
328                                                         $textarea.scrollLeft = savedScroll[0];\r
329                                                         $textarea.scrollTop = savedScroll[1];\r
330                                                 }\r
331 \r
332                                                 savedSelection = savedScroll = null;\r
333                                                 savedState = this.state;\r
334                                         },\r
335                                         canUndo : false\r
336                                 } );\r
337 \r
338                         editor.ui.addButton( 'Maximize',\r
339                                 {\r
340                                         label : lang.maximize,\r
341                                         command : 'maximize'\r
342                                 } );\r
343 \r
344                         // Restore the command state after mode change, unless it has been changed to disabled (#6467)\r
345                         editor.on( 'mode', function()\r
346                                 {\r
347                                         var command = editor.getCommand( 'maximize' );\r
348                                         command.setState( command.state == CKEDITOR.TRISTATE_DISABLED ? CKEDITOR.TRISTATE_DISABLED : savedState );\r
349                                 }, null, null, 100 );\r
350                 }\r
351         } );\r
352 })();\r