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