_source/plugins/maximize/plugin.js

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