_source/plugins/resize/plugin.js

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