js/ckeditor/plugins/inline_resize/plugin.js

   1 ( function() {
   2   var win      = CKEDITOR.document.getWindow(),
   3       pixelate = CKEDITOR.tools.cssLength;
   4
   5   CKEDITOR.plugins.add('inline_resize', {
   6     init: function( editor ) {
   7       var config = editor.config;
   8
   9       editor.on('loaded', function() {
  10         attach(editor);
  11       }, null, null, 20); // same priority as floatspace so that both get initialized
  12     }
  13   });
  14
  15   function attach( editor ) {
  16     var config = editor.config;
  17
  18     var resize = function (width, height) {
  19       var editable;
  20       if ( !( editable = editor.editable() ) )
  21         return;
  22
  23       editable.setStyle('width',  pixelate(width));
  24       editable.setStyle('height', pixelate(height));
  25     }
  26
  27     var layout = function ( evt ) {
  28       var editable;
  29       if ( !( editable = editor.editable() ) )
  30           return;
  31
  32       // Show up the space on focus gain.
  33       if (  evt && evt.name == 'focus' )
  34         float_space.show();
  35
  36       var editorPos  = editable.getDocumentPosition();
  37       var editorRect = editable.getClientRect();
  38       var floatRect  = float_space.getClientRect();
  39       var viewRect   = win.getViewPaneSize();
  40
  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 ) );
  44     };
  45
  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 ));
  48
  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;
  52
  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) );
  55
  56       resize( width, height );
  57       layout();
  58     };
  59
  60     var drag_end_handler = function() {
  61       CKEDITOR.document.removeListener( 'mousemove', drag_handler );
  62       CKEDITOR.document.removeListener( 'mouseup',   drag_end_handler );
  63
  64       if ( editor.document ) {
  65         editor.document.removeListener( 'mousemove', drag_handler );
  66         editor.document.removeListener( 'mouseup',   drag_end_handler );
  67       }
  68     }
  69
  70     var mousedown_fn =  function( evt ) {
  71       var editable;
  72       if ( !( editable = editor.editable() ) )
  73         return;
  74
  75       var editorRect = editable.getClientRect();
  76       startSize      = { width: editorRect.width, height: editorRect.height };
  77       origin         = { x: evt.data.$.screenX, y: evt.data.$.screenY };
  78
  79       if (config.resize_minWidth  > startSize.width)   config.resize_minWidth = startSize.width;
  80       if (config.resize_minHeight > startSize.height) config.resize_minHeight = startSize.height;
  81
  82       CKEDITOR.document.on( 'mousemove', drag_handler );
  83       CKEDITOR.document.on( 'mouseup',   drag_end_handler );
  84
  85       if ( editor.document ) {
  86         editor.document.on( 'mousemove', drag_handler );
  87         editor.document.on( 'mouseup',   drag_end_handler );
  88       }
  89
  90       evt.data.$.preventDefault();
  91     };
  92
  93     float_space.setStyle( 'overflow', 'hidden' );
  94     float_space.setStyle( 'cursor', 'se-resize' )
  95     float_space.on('mousedown', mousedown_fn);
  96     float_space.unselectable();
  97     float_space.hide();
  98
  99     editor.on( 'focus', function( evt ) {
 100       layout( evt );
 101     } );
 102
 103     editor.on( 'blur', function() {
 104       float_space.hide();
 105     } );
 106
 107     editor.on( 'destroy', function() {
 108       float_space.remove();
 109     } );
 110
 111     if ( editor.focusManager.hasFocus )
 112       float_space.show();
 113
 114     editor.focusManager.add( float_space, 1 );
 115   }
 116
 117 })();
 118
 119 /*
 120   TODO
 121    * ltr support
 122    * textarea/div mode safe, currently simply assumes that textarea inline is used
 123    * positioning of resize handle is not browser zomm safe
 124 */