2 var win = CKEDITOR.document.getWindow(),
3 pixelate = CKEDITOR.tools.cssLength;
5 CKEDITOR.plugins.add('inline_resize', {
6 init: function( editor ) {
7 var config = editor.config;
9 editor.on('loaded', function() {
11 }, null, null, 20); // same priority as floatspace so that both get initialized
15 function attach( editor ) {
16 var config = editor.config;
18 var resize = function (width, height) {
20 if ( !( editable = editor.editable() ) )
23 editable.setStyle('width', pixelate(width));
24 editable.setStyle('height', pixelate(height));
27 var layout = function ( evt ) {
29 if ( !( editable = editor.editable() ) )
32 // Show up the space on focus gain.
33 if ( evt && evt.name == 'focus' )
36 var editorPos = editable.getDocumentPosition();
37 var editorRect = editable.getClientRect();
38 var floatRect = float_space.getClientRect();
39 var viewRect = win.getViewPaneSize();
41 float_space.setStyle( 'position', 'absolute' );
42 float_space.setStyle( 'top', pixelate( editorPos.y + editorRect.height - floatRect.height + 1) );
43 float_space.setStyle( 'right', pixelate( viewRect.width - editorRect.right ) );
46 var float_html = '<div class="cke_editor_inline_resize_button">\u25E2</div>'; // class so that csss can overrise content and style
47 var float_space = CKEDITOR.document.getBody().append( CKEDITOR.dom.element.createFromHtml( float_html ));
49 var drag_handler = function( evt ) {
50 var width = startSize.width + evt.data.$.screenX - origin.x,
51 height = startSize.height + evt.data.$.screenY - origin.y;
53 width = Math.max( config.resize_minWidth || 200, Math.min( width || 0, config.resize_maxWidth || 9000) );
54 height = Math.max( config.resize_minHeight || 75, Math.min( height || 0, config.resize_maxHeight || 9000) );
56 resize( width, height );
60 var drag_end_handler = function() {
61 CKEDITOR.document.removeListener( 'mousemove', drag_handler );
62 CKEDITOR.document.removeListener( 'mouseup', drag_end_handler );
64 if ( editor.document ) {
65 editor.document.removeListener( 'mousemove', drag_handler );
66 editor.document.removeListener( 'mouseup', drag_end_handler );
70 var mousedown_fn = function( evt ) {
72 if ( !( editable = editor.editable() ) )
75 var editorRect = editable.getClientRect();
76 startSize = { width: editorRect.width, height: editorRect.height };
77 origin = { x: evt.data.$.screenX, y: evt.data.$.screenY };
79 if (config.resize_minWidth > startSize.width) config.resize_minWidth = startSize.width;
80 if (config.resize_minHeight > startSize.height) config.resize_minHeight = startSize.height;
82 CKEDITOR.document.on( 'mousemove', drag_handler );
83 CKEDITOR.document.on( 'mouseup', drag_end_handler );
85 if ( editor.document ) {
86 editor.document.on( 'mousemove', drag_handler );
87 editor.document.on( 'mouseup', drag_end_handler );
90 evt.data.$.preventDefault();
93 float_space.setStyle( 'overflow', 'hidden' );
94 float_space.setStyle( 'cursor', 'se-resize' )
95 float_space.on('mousedown', mousedown_fn);
96 float_space.unselectable();
98 editor.on( 'focus', function( evt ) {
102 editor.on( 'blur', function() {
106 editor.on( 'destroy', function() {
107 float_space.remove();
110 if ( editor.focusManager.hasFocus )
113 editor.focusManager.add( float_space, 1 );
121 * textarea/div mode safe, currently simply assumes that textarea inline is used
122 * positioning of resize handle is not browser zomm safe