1 /* 2 Copyright (c) 2003-2012, 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 // DO NOT impose fixed size with single direction resize. (#6308) 48 editor.resize( resizeHorizontal ? width : null, height ); 49 } 50 51 function dragEndHandler ( evt ) 52 { 53 CKEDITOR.document.removeListener( 'mousemove', dragHandler ); 54 CKEDITOR.document.removeListener( 'mouseup', dragEndHandler ); 55 56 if ( editor.document ) 57 { 58 editor.document.removeListener( 'mousemove', dragHandler ); 59 editor.document.removeListener( 'mouseup', dragEndHandler ); 60 } 61 } 62 63 var mouseDownFn = CKEDITOR.tools.addFunction( function( $event ) 64 { 65 if ( !container ) 66 container = editor.getResizable(); 67 68 startSize = { width : container.$.offsetWidth || 0, height : container.$.offsetHeight || 0 }; 69 origin = { x : $event.screenX, y : $event.screenY }; 70 71 config.resize_minWidth > startSize.width && ( config.resize_minWidth = startSize.width ); 72 config.resize_minHeight > startSize.height && ( config.resize_minHeight = startSize.height ); 73 74 CKEDITOR.document.on( 'mousemove', dragHandler ); 75 CKEDITOR.document.on( 'mouseup', dragEndHandler ); 76 77 if ( editor.document ) 78 { 79 editor.document.on( 'mousemove', dragHandler ); 80 editor.document.on( 'mouseup', dragEndHandler ); 81 } 82 }); 83 84 editor.on( 'destroy', function() { CKEDITOR.tools.removeFunction( mouseDownFn ); } ); 85 86 editor.on( 'themeSpace', function( event ) 87 { 88 if ( event.data.space == 'bottom' ) 89 { 90 var direction = ''; 91 if ( resizeHorizontal && !resizeVertical ) 92 direction = ' cke_resizer_horizontal'; 93 if ( !resizeHorizontal && resizeVertical ) 94 direction = ' cke_resizer_vertical'; 95 96 var resizerHtml = 97 '<div' + 98 ' class="cke_resizer' + direction + ' cke_resizer_' + resizeDir + '"' + 99 ' title="' + CKEDITOR.tools.htmlEncode( editor.lang.resize ) + '"' + 100 ' onmousedown="CKEDITOR.tools.callFunction(' + mouseDownFn + ', event)"' + 101 '></div>'; 102 103 // Always sticks the corner of botttom space. 104 resizeDir == 'ltr' && direction == 'ltr' ? 105 event.data.html += resizerHtml : 106 event.data.html = resizerHtml + event.data.html; 107 } 108 }, editor, null, 100 ); 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 * @name CKEDITOR.config.resize_minWidth 117 * @type Number 118 * @default 750 119 * @example 120 * config.resize_minWidth = 500; 121 */ 122 123 /** 124 * The minimum editor height, in pixels, when resizing the editor interface by using the resize handle. 125 * Note: It falls back to editor's actual height if it is smaller than the default value. 126 * @name CKEDITOR.config.resize_minHeight 127 * @type Number 128 * @default 250 129 * @example 130 * config.resize_minHeight = 600; 131 */ 132 133 /** 134 * The maximum editor width, in pixels, when resizing the editor interface by using the resize handle. 135 * @name CKEDITOR.config.resize_maxWidth 136 * @type Number 137 * @default 3000 138 * @example 139 * config.resize_maxWidth = 750; 140 */ 141 142 /** 143 * The maximum editor height, in pixels, when resizing the editor interface by using the resize handle. 144 * @name CKEDITOR.config.resize_maxHeight 145 * @type Number 146 * @default 3000 147 * @example 148 * config.resize_maxHeight = 600; 149 */ 150 151 /** 152 * Whether to enable the resizing feature. If this feature is disabled, the resize handle will not be visible. 153 * @name CKEDITOR.config.resize_enabled 154 * @type Boolean 155 * @default true 156 * @example 157 * config.resize_enabled = false; 158 */ 159 160 /** 161 * The dimensions for which the editor resizing is enabled. Possible values 162 * are <code>both</code>, <code>vertical</code>, and <code>horizontal</code>. 163 * @name CKEDITOR.config.resize_dir 164 * @type String 165 * @default 'both' 166 * @since 3.3 167 * @example 168 * config.resize_dir = 'vertical'; 169 */ 170