[Summary view] [Print] [Text view]

   1  /*

   2  Copyright (c) 2003-2010, 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          var 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' )
  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              var mainWindow = mainDocument.getWindow();
 134  
 135              // Saved selection and scroll position for the editing area.

 136              var savedSelection;
 137              var 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                      editorFocus : false,
 159                      exec : function()
 160                      {
 161                          var container = editor.container.getChild( 1 );
 162                          var contents = editor.getThemeSpace( 'contents' );
 163  
 164                          // Save current selection and scroll position in editing area.

 165                          if ( editor.mode == 'wysiwyg' )
 166                          {
 167                              var selection = editor.getSelection();
 168                              savedSelection = selection && selection.getRanges();
 169                              savedScroll = mainWindow.getScrollPosition();
 170                          }
 171                          else
 172                          {
 173                              var $textarea = editor.textarea.$;
 174                              savedSelection = !CKEDITOR.env.ie && [ $textarea.selectionStart, $textarea.selectionEnd ];
 175                              savedScroll = [ $textarea.scrollLeft, $textarea.scrollTop ];
 176                          }
 177  
 178                          if ( this.state == CKEDITOR.TRISTATE_OFF )        // Go fullscreen if the state is off.
 179                          {
 180                              // Add event handler for resizing.

 181                              mainWindow.on( 'resize', resizeHandler );
 182  
 183                              // Save the scroll bar position.

 184                              outerScroll = mainWindow.getScrollPosition();
 185  
 186                              // Save and reset the styles for the entire node tree.

 187                              var currentNode = editor.container;
 188                              while ( ( currentNode = currentNode.getParent() ) )
 189                              {
 190                                  currentNode.setCustomData( 'maximize_saved_styles', saveStyles( currentNode ) );
 191                                  currentNode.setStyle( 'z-index', editor.config.baseFloatZIndex - 1 );
 192                              }
 193                              contents.setCustomData( 'maximize_saved_styles', saveStyles( contents, true ) );
 194                              container.setCustomData( 'maximize_saved_styles', saveStyles( container, true ) );
 195  
 196                              // Hide scroll bars.

 197                              if ( CKEDITOR.env.ie )
 198                              {
 199                                  mainDocument.$.documentElement.style.overflow =
 200                                      mainDocument.getBody().$.style.overflow = 'hidden';
 201                              }
 202                              else
 203                              {
 204                                  mainDocument.getBody().setStyles(
 205                                      {
 206                                          overflow : 'hidden',
 207                                          width : '0px',
 208                                          height : '0px'
 209                                      } );
 210                              }
 211  
 212                              // Scroll to the top left (IE needs some time for it - #4923).

 213                              CKEDITOR.env.ie ?
 214                                  setTimeout( function() { mainWindow.$.scrollTo( 0, 0 ); }, 0 ) :
 215                                  mainWindow.$.scrollTo( 0, 0 );
 216  
 217                              // Resize and move to top left.

 218                              var viewPaneSize = mainWindow.getViewPaneSize();
 219                              container.setStyle( 'position', 'absolute' );
 220                              container.$.offsetLeft;            // SAFARI BUG: See #2066.

 221                              container.setStyles(
 222                                  {
 223                                      'z-index' : editor.config.baseFloatZIndex - 1,
 224                                      left : '0px',
 225                                      top : '0px'
 226                                  } );
 227  
 228                              shim =  createIframeShim( container );        // IE6 select element penetration when maximized. (#4459)

 229  
 230                              // Add cke_maximized class before resize handle since that will change things sizes (#5580)

 231                              container.addClass( 'cke_maximized' );
 232  
 233                              resizeHandler();
 234  
 235                              // Still not top left? Fix it. (Bug #174)

 236                              var offset = container.getDocumentPosition();
 237                              container.setStyles(
 238                                  {
 239                                      left : ( -1 * offset.x ) + 'px',
 240                                      top : ( -1 * offset.y ) + 'px'
 241                                  } );
 242  
 243                              // Fixing positioning editor chrome in Firefox break design mode. (#5149)

 244                              CKEDITOR.env.gecko && refreshCursor( editor );
 245  
 246                          }
 247                          else if ( this.state == CKEDITOR.TRISTATE_ON )    // Restore from fullscreen if the state is on.
 248                          {
 249                              // Remove event handler for resizing.

 250                              mainWindow.removeListener( 'resize', resizeHandler );
 251  
 252                              // Restore CSS styles for the entire node tree.

 253                              var editorElements = [ contents, container ];
 254                              for ( var i = 0 ; i < editorElements.length ; i++ )
 255                              {
 256                                  restoreStyles( editorElements[i], editorElements[i].getCustomData( 'maximize_saved_styles' ) );
 257                                  editorElements[i].removeCustomData( 'maximize_saved_styles' );
 258                              }
 259  
 260                              currentNode = editor.container;
 261                              while ( ( currentNode = currentNode.getParent() ) )
 262                              {
 263                                  restoreStyles( currentNode, currentNode.getCustomData( 'maximize_saved_styles' ) );
 264                                  currentNode.removeCustomData( 'maximize_saved_styles' );
 265                              }
 266  
 267                              // Restore the window scroll position.

 268                              CKEDITOR.env.ie ?
 269                                  setTimeout( function() { mainWindow.$.scrollTo( outerScroll.x, outerScroll.y ); }, 0 ) :
 270                                  mainWindow.$.scrollTo( outerScroll.x, outerScroll.y );
 271  
 272                              // Remove cke_maximized class.

 273                              container.removeClass( 'cke_maximized' );
 274  
 275                              if ( shim )
 276                              {
 277                                  shim.remove();
 278                                  shim = null;
 279                              }
 280  
 281                              // Emit a resize event, because this time the size is modified in

 282                              // restoreStyles.

 283                              editor.fire( 'resize' );
 284                          }
 285  
 286                          this.toggleState();
 287  
 288                          // Toggle button label.

 289                          var button = this.uiItems[ 0 ];
 290                          var label = ( this.state == CKEDITOR.TRISTATE_OFF )
 291                              ? lang.maximize : lang.minimize;
 292                          var buttonNode = editor.element.getDocument().getById( button._.id );
 293                          buttonNode.getChild( 1 ).setHtml( label );
 294                          buttonNode.setAttribute( 'title', label );
 295                          buttonNode.setAttribute( 'href', 'javascript:void("' + label + '");' );
 296  
 297                          // Restore selection and scroll position in editing area.

 298                          if ( editor.mode == 'wysiwyg' )
 299                          {
 300                              if ( savedSelection )
 301                              {
 302                                  // Fixing positioning editor chrome in Firefox break design mode. (#5149)

 303                                  CKEDITOR.env.gecko && refreshCursor( editor );
 304  
 305                                  editor.getSelection().selectRanges(savedSelection);
 306                                  var element = editor.getSelection().getStartElement();
 307                                  element && element.scrollIntoView( true );
 308                              }
 309  
 310                              else
 311                                  mainWindow.$.scrollTo( savedScroll.x, savedScroll.y );
 312                          }
 313                          else
 314                          {
 315                              if ( savedSelection )
 316                              {
 317                                  $textarea.selectionStart = savedSelection[0];
 318                                  $textarea.selectionEnd = savedSelection[1];
 319                              }
 320                              $textarea.scrollLeft = savedScroll[0];
 321                              $textarea.scrollTop = savedScroll[1];
 322                          }
 323  
 324                          savedSelection = savedScroll = null;
 325                          savedState = this.state;
 326                      },
 327                      canUndo : false
 328                  } );
 329  
 330              editor.ui.addButton( 'Maximize',
 331                  {
 332                      label : lang.maximize,
 333                      command : 'maximize'
 334                  } );
 335  
 336              // Restore the command state after mode change.

 337              editor.on( 'mode', function()
 338                  {
 339                      editor.getCommand( 'maximize' ).setState( savedState );
 340                  }, null, null, 100 );
 341          }
 342      } );
 343  })();