_source/plugins/resize/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 CKEDITOR.plugins.add( 'resize',
   7 {
   8         init : function( editor )
   9         {
  10                 var config = editor.config;
  11
  12                 // Resize in the same direction of chrome,
  13                 // which is identical to dir of editor element. (#6614)
  14                 var resizeDir = editor.element.getDirection( 1 );
  15
  16                 !config.resize_dir && ( config.resize_dir = 'both' );
  17                 ( config.resize_maxWidth == undefined ) && ( config.resize_maxWidth = 3000 );
  18                 ( config.resize_maxHeight == undefined ) && ( config.resize_maxHeight = 3000 );
  19                 ( config.resize_minWidth == undefined ) && ( config.resize_minWidth = 750 );
  20                 ( config.resize_minHeight == undefined ) && ( config.resize_minHeight = 250 );
  21
  22                 if ( config.resize_enabled !== false )
  23                 {
  24                         var container = null,
  25                                 origin,
  26                                 startSize,
  27                                 resizeHorizontal = ( config.resize_dir == 'both' || config.resize_dir == 'horizontal' ) &&
  28                                         ( config.resize_minWidth != config.resize_maxWidth ),
  29                                 resizeVertical = ( config.resize_dir == 'both' || config.resize_dir == 'vertical' ) &&
  30                                         ( config.resize_minHeight != config.resize_maxHeight );
  31
  32                         function dragHandler( evt )
  33                         {
  34                                 var dx = evt.data.$.screenX - origin.x,
  35                                         dy = evt.data.$.screenY - origin.y,
  36                                         width = startSize.width,
  37                                         height = startSize.height,
  38                                         internalWidth = width + dx * ( resizeDir == 'rtl' ? -1 : 1 ),
  39                                         internalHeight = height + dy;
  40
  41                                 if ( resizeHorizontal )
  42                                         width =  Math.max( config.resize_minWidth, Math.min( internalWidth, config.resize_maxWidth ) );
  43
  44                                 if ( resizeVertical )
  45                                         height =  Math.max( config.resize_minHeight, Math.min( internalHeight, config.resize_maxHeight ) );
  46
  47                                 editor.resize( width, height );
  48                         }
  49
  50                         function dragEndHandler ( evt )
  51                         {
  52                                 CKEDITOR.document.removeListener( 'mousemove', dragHandler );
  53                                 CKEDITOR.document.removeListener( 'mouseup', dragEndHandler );
  54
  55                                 if ( editor.document )
  56                                 {
  57                                         editor.document.removeListener( 'mousemove', dragHandler );
  58                                         editor.document.removeListener( 'mouseup', dragEndHandler );
  59                                 }
  60                         }
  61
  62                         var mouseDownFn = CKEDITOR.tools.addFunction( function( $event )
  63                                 {
  64                                         if ( !container )
  65                                                 container = editor.getResizable();
  66
  67                                         startSize = { width : container.$.offsetWidth || 0, height : container.$.offsetHeight || 0 };
  68                                         origin = { x : $event.screenX, y : $event.screenY };
  69
  70                                         config.resize_minWidth > startSize.width && ( config.resize_minWidth = startSize.width );
  71                                         config.resize_minHeight > startSize.height && ( config.resize_minHeight = startSize.height );
  72
  73                                         CKEDITOR.document.on( 'mousemove', dragHandler );
  74                                         CKEDITOR.document.on( 'mouseup', dragEndHandler );
  75
  76                                         if ( editor.document )
  77                                         {
  78                                                 editor.document.on( 'mousemove', dragHandler );
  79                                                 editor.document.on( 'mouseup', dragEndHandler );
  80                                         }
  81                                 });
  82
  83                         editor.on( 'destroy', function() { CKEDITOR.tools.removeFunction( mouseDownFn ); } );
  84
  85                         editor.on( 'themeSpace', function( event )
  86                                 {
  87                                         if ( event.data.space == 'bottom' )
  88                                         {
  89                                                 var direction = '';
  90                                                 if ( resizeHorizontal && !resizeVertical )
  91                                                         direction = ' cke_resizer_horizontal';
  92                                                 if ( !resizeHorizontal && resizeVertical )
  93                                                         direction = ' cke_resizer_vertical';
  94
  95                                                 var resizerHtml =
  96                                                         '<div' +
  97                                                         ' class="cke_resizer' + direction + ' cke_resizer_' + resizeDir + '"' +
  98                                                         ' title="' + CKEDITOR.tools.htmlEncode( editor.lang.resize ) + '"' +
  99                                                         ' onmousedown="CKEDITOR.tools.callFunction(' + mouseDownFn + ', event)"' +
 100                                                         '></div>';
 101
 102                                                 // Always sticks the corner of botttom space.
 103                                                 resizeDir == 'ltr' && direction == 'ltr' ?
 104                                                         event.data.html += resizerHtml :
 105                                                         event.data.html = resizerHtml + event.data.html;
 106                                         }
 107                                 }, editor, null, 100 );
 108                 }
 109         }
 110 } );
 111
 112 /**
 113  * The minimum editor width, in pixels, when resizing it with the resize handle.
 114  * Note: It fallbacks to editor's actual width if that's smaller than the default value.
 115  * @name CKEDITOR.config.resize_minWidth
 116  * @type Number
 117  * @default 750
 118  * @example
 119  * config.resize_minWidth = 500;
 120  */
 121
 122 /**
 123  * The minimum editor height, in pixels, when resizing it with the resize handle.
 124  * Note: It fallbacks to editor's actual height if that's smaller than the default value.
 125  * @name CKEDITOR.config.resize_minHeight
 126  * @type Number
 127  * @default 250
 128  * @example
 129  * config.resize_minHeight = 600;
 130  */
 131
 132 /**
 133  * The maximum editor width, in pixels, when resizing it with the resize handle.
 134  * @name CKEDITOR.config.resize_maxWidth
 135  * @type Number
 136  * @default 3000
 137  * @example
 138  * config.resize_maxWidth = 750;
 139  */
 140
 141 /**
 142  * The maximum editor height, in pixels, when resizing it with the resize handle.
 143  * @name CKEDITOR.config.resize_maxHeight
 144  * @type Number
 145  * @default 3000
 146  * @example
 147  * config.resize_maxHeight = 600;
 148  */
 149
 150 /**
 151  * Whether to enable the resizing feature. If disabled the resize handler will not be visible.
 152  * @name CKEDITOR.config.resize_enabled
 153  * @type Boolean
 154  * @default true
 155  * @example
 156  * config.resize_enabled = false;
 157  */
 158
 159 /**
 160  * The directions to which the editor resizing is enabled. Possible values
 161  * are "both", "vertical" and "horizontal".
 162  * @name CKEDITOR.config.resize_dir
 163  * @type String
 164  * @default 'both'
 165  * @since 3.3
 166  * @example
 167  * config.resize_dir = 'vertical';
 168  */