sources/plugins/resize/plugin.js

   1 /**
   2  * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
   3  * For licensing, see LICENSE.md or http://ckeditor.com/license
   4  */
   5
   6 CKEDITOR.plugins.add( 'resize', {
   7         init: function( editor ) {
   8                 function dragHandler( evt ) {
   9                         var dx = evt.data.$.screenX - origin.x,
  10                         dy = evt.data.$.screenY - origin.y,
  11                         width = startSize.width,
  12                         height = startSize.height,
  13                         internalWidth = width + dx * ( resizeDir == 'rtl' ? -1 : 1 ),
  14                         internalHeight = height + dy;
  15
  16                         if ( resizeHorizontal )
  17                                 width = Math.max( config.resize_minWidth, Math.min( internalWidth, config.resize_maxWidth ) );
  18
  19                         if ( resizeVertical )
  20                                 height = Math.max( config.resize_minHeight, Math.min( internalHeight, config.resize_maxHeight ) );
  21
  22                         // DO NOT impose fixed size with single direction resize. (http://dev.ckeditor.com/ticket/6308)
  23                         editor.resize( resizeHorizontal ? width : null, height );
  24                 }
  25
  26                 function dragEndHandler() {
  27                         CKEDITOR.document.removeListener( 'mousemove', dragHandler );
  28                         CKEDITOR.document.removeListener( 'mouseup', dragEndHandler );
  29
  30                         if ( editor.document ) {
  31                                 editor.document.removeListener( 'mousemove', dragHandler );
  32                                 editor.document.removeListener( 'mouseup', dragEndHandler );
  33                         }
  34                 }
  35
  36                 var config = editor.config;
  37                 var spaceId = editor.ui.spaceId( 'resizer' );
  38
  39                 // Resize in the same direction of chrome,
  40                 // which is identical to dir of editor element. (http://dev.ckeditor.com/ticket/6614)
  41                 var resizeDir = editor.element ? editor.element.getDirection( 1 ) : 'ltr';
  42
  43                 !config.resize_dir && ( config.resize_dir = 'vertical' );
  44                 ( config.resize_maxWidth === undefined ) && ( config.resize_maxWidth = 3000 );
  45                 ( config.resize_maxHeight === undefined ) && ( config.resize_maxHeight = 3000 );
  46                 ( config.resize_minWidth === undefined ) && ( config.resize_minWidth = 750 );
  47                 ( config.resize_minHeight === undefined ) && ( config.resize_minHeight = 250 );
  48
  49                 if ( config.resize_enabled !== false ) {
  50                         var container = null,
  51                                 origin, startSize,
  52                                 resizeHorizontal = ( config.resize_dir == 'both' || config.resize_dir == 'horizontal' ) && ( config.resize_minWidth != config.resize_maxWidth ),
  53                                 resizeVertical = ( config.resize_dir == 'both' || config.resize_dir == 'vertical' ) && ( config.resize_minHeight != config.resize_maxHeight );
  54
  55                         var mouseDownFn = CKEDITOR.tools.addFunction( function( $event ) {
  56                                 if ( !container )
  57                                         container = editor.getResizable();
  58
  59                                 startSize = { width: container.$.offsetWidth || 0, height: container.$.offsetHeight || 0 };
  60                                 origin = { x: $event.screenX, y: $event.screenY };
  61
  62                                 config.resize_minWidth > startSize.width && ( config.resize_minWidth = startSize.width );
  63                                 config.resize_minHeight > startSize.height && ( config.resize_minHeight = startSize.height );
  64
  65                                 CKEDITOR.document.on( 'mousemove', dragHandler );
  66                                 CKEDITOR.document.on( 'mouseup', dragEndHandler );
  67
  68                                 if ( editor.document ) {
  69                                         editor.document.on( 'mousemove', dragHandler );
  70                                         editor.document.on( 'mouseup', dragEndHandler );
  71                                 }
  72
  73                                 $event.preventDefault && $event.preventDefault();
  74                         } );
  75
  76                         editor.on( 'destroy', function() {
  77                                 CKEDITOR.tools.removeFunction( mouseDownFn );
  78                         } );
  79
  80                         editor.on( 'uiSpace', function( event ) {
  81                                 if ( event.data.space == 'bottom' ) {
  82                                         var direction = '';
  83                                         if ( resizeHorizontal && !resizeVertical )
  84                                                 direction = ' cke_resizer_horizontal';
  85                                         if ( !resizeHorizontal && resizeVertical )
  86                                                 direction = ' cke_resizer_vertical';
  87
  88                                         var resizerHtml =
  89                                                 '<span' +
  90                                                 ' id="' + spaceId + '"' +
  91                                                 ' class="cke_resizer' + direction + ' cke_resizer_' + resizeDir + '"' +
  92                                                 ' title="' + CKEDITOR.tools.htmlEncode( editor.lang.common.resize ) + '"' +
  93                                                 ' onmousedown="CKEDITOR.tools.callFunction(' + mouseDownFn + ', event)"' +
  94                                                 '>' +
  95                                                 // BLACK LOWER RIGHT TRIANGLE (ltr)
  96                                                 // BLACK LOWER LEFT TRIANGLE (rtl)
  97                                                 ( resizeDir == 'ltr' ? '\u25E2' : '\u25E3' ) +
  98                                                 '</span>';
  99
 100                                         // Always sticks the corner of botttom space.
 101                                         resizeDir == 'ltr' && direction == 'ltr' ? event.data.html += resizerHtml : event.data.html = resizerHtml + event.data.html;
 102                                 }
 103                         }, editor, null, 100 );
 104
 105                         // Toggle the visibility of the resizer when an editor is being maximized or minimized.
 106                         editor.on( 'maximize', function( event ) {
 107                                 editor.ui.space( 'resizer' )[ event.data == CKEDITOR.TRISTATE_ON ? 'hide' : 'show' ]();
 108                         } );
 109                 }
 110         }
 111 } );
 112
 113 /**
 114  * The minimum editor width, in pixels, when resizing the editor interface by using the resize handle.
 115  * Note: It falls back to editor's actual width if it is smaller than the default value.
 116  *
 117  * Read more in the [documentation](#!/guide/dev_resize)
 118  * and see the [SDK sample](http://sdk.ckeditor.com/samples/resize.html).
 119  *
 120  *              config.resize_minWidth = 500;
 121  *
 122  * @cfg {Number} [resize_minWidth=750]
 123  * @member CKEDITOR.config
 124  */
 125
 126 /**
 127  * The minimum editor height, in pixels, when resizing the editor interface by using the resize handle.
 128  * Note: It falls back to editor's actual height if it is smaller than the default value.
 129  *
 130  * Read more in the [documentation](#!/guide/dev_resize)
 131  * and see the [SDK sample](http://sdk.ckeditor.com/samples/resize.html).
 132  *
 133  *              config.resize_minHeight = 600;
 134  *
 135  * @cfg {Number} [resize_minHeight=250]
 136  * @member CKEDITOR.config
 137  */
 138
 139 /**
 140  * The maximum editor width, in pixels, when resizing the editor interface by using the resize handle.
 141  *
 142  * Read more in the [documentation](#!/guide/dev_resize)
 143  * and see the [SDK sample](http://sdk.ckeditor.com/samples/resize.html).
 144  *
 145  *              config.resize_maxWidth = 750;
 146  *
 147  * @cfg {Number} [resize_maxWidth=3000]
 148  * @member CKEDITOR.config
 149  */
 150
 151 /**
 152  * The maximum editor height, in pixels, when resizing the editor interface by using the resize handle.
 153  *
 154  * Read more in the [documentation](#!/guide/dev_resize)
 155  * and see the [SDK sample](http://sdk.ckeditor.com/samples/resize.html).
 156  *
 157  *              config.resize_maxHeight = 600;
 158  *
 159  * @cfg {Number} [resize_maxHeight=3000]
 160  * @member CKEDITOR.config
 161  */
 162
 163 /**
 164  * Whether to enable the resizing feature. If this feature is disabled, the resize handle will not be visible.
 165  *
 166  * Read more in the [documentation](#!/guide/dev_resize)
 167  * and see the [SDK sample](http://sdk.ckeditor.com/samples/resize.html).
 168  *
 169  *              config.resize_enabled = false;
 170  *
 171  * @cfg {Boolean} [resize_enabled=true]
 172  * @member CKEDITOR.config
 173  */
 174
 175 /**
 176  * The dimensions for which the editor resizing is enabled. Possible values
 177  * are `both`, `vertical`, and `horizontal`.
 178  *
 179  * Read more in the [documentation](#!/guide/dev_resize)
 180  * and see the [SDK sample](http://sdk.ckeditor.com/samples/resize.html).
 181  *
 182  *              config.resize_dir = 'both';
 183  *
 184  * @since 3.3
 185  * @cfg {String} [resize_dir='vertical']
 186  * @member CKEDITOR.config
 187  */