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 parentScroll(e) {
  16     var position = e.$.getAttribute("position"),
  17         excludeStaticParent = position === "absolute";
  18     return e.getParents().filter( function(parent) {
  19       var style = window.getComputedStyle(parent.$);
  20       if ( excludeStaticParent && style.position === "static" )
  21         return false;
  22       return (/(auto|scroll)/).test( style['overflow'] + style["overflow-y"] + style["overflow-x"] );
  23     });
  24   };
  25
  26   function attach( editor ) {
  27     var config = editor.config,
  28         parent = parentScroll(editor.element);
  29
  30     var resize = function (width, height) {
  31       var editable;
  32       if ( !( editable = editor.editable() ) )
  33         return;
  34
  35       editable.setStyle('width',  pixelate(width));
  36       editable.setStyle('height', pixelate(height));
  37     }
  38
  39     var layout = function ( evt ) {
  40       var editable;
  41       if ( !( editable = editor.editable() ) )
  42           return;
  43
  44       // Show up the space on focus gain.
  45       if (  evt && evt.name == 'focus' )
  46         float_space.show();
  47
  48       var editorPos  = editable.getDocumentPosition();
  49       var editorRect = editable.getClientRect();
  50       var floatRect  = float_space.getClientRect();
  51       var viewRect   = win.getViewPaneSize();
  52
  53       float_space.setStyle( 'position', 'absolute' );
  54       float_space.setStyle( 'top',    pixelate( editorPos.y + editorRect.height - floatRect.height + 1) );
  55       float_space.setStyle( 'right',  pixelate( viewRect.width - editorRect.right ) );
  56     };
  57
  58     var float_html  = '<div class="cke_editor_inline_resize_button">\u25E2</div>'; // class so that csss can overrise content and style
  59     var float_space = CKEDITOR.document.getBody().append( CKEDITOR.dom.element.createFromHtml( float_html ));
  60
  61     var drag_handler = function( evt ) {
  62       var width  = startSize.width  + evt.data.$.screenX - origin.x,
  63           height = startSize.height + evt.data.$.screenY - origin.y;
  64
  65       width  = Math.max( config.resize_minWidth  || 200, Math.min( width  || 0, config.resize_maxWidth  || 9000) );
  66       height = Math.max( config.resize_minHeight || 75,  Math.min( height || 0, config.resize_maxHeight || 9000) );
  67
  68       resize( width, height );
  69       layout();
  70     };
  71
  72     var drag_end_handler = function() {
  73       CKEDITOR.document.removeListener( 'mousemove', drag_handler );
  74       CKEDITOR.document.removeListener( 'mouseup',   drag_end_handler );
  75
  76       if ( editor.document ) {
  77         editor.document.removeListener( 'mousemove', drag_handler );
  78         editor.document.removeListener( 'mouseup',   drag_end_handler );
  79       }
  80     }
  81
  82     var mousedown_fn =  function( evt ) {
  83       var editable;
  84       if ( !( editable = editor.editable() ) )
  85         return;
  86
  87       var editorRect = editable.getClientRect();
  88       startSize      = { width: editorRect.width, height: editorRect.height };
  89       origin         = { x: evt.data.$.screenX, y: evt.data.$.screenY };
  90
  91       if (config.resize_minWidth  > startSize.width)   config.resize_minWidth = startSize.width;
  92       if (config.resize_minHeight > startSize.height) config.resize_minHeight = startSize.height;
  93
  94       CKEDITOR.document.on( 'mousemove', drag_handler );
  95       CKEDITOR.document.on( 'mouseup',   drag_end_handler );
  96
  97       if ( editor.document ) {
  98         editor.document.on( 'mousemove', drag_handler );
  99         editor.document.on( 'mouseup',   drag_end_handler );
 100       }
 101
 102       evt.data.$.preventDefault();
 103     };
 104
 105     float_space.setStyle( 'overflow', 'hidden' );
 106     float_space.setStyle( 'cursor', 'se-resize' )
 107     float_space.on('mousedown', mousedown_fn);
 108     float_space.unselectable();
 109     float_space.hide();
 110
 111     editor.on( 'focus', function( evt ) {
 112       layout( evt );
 113     } );
 114
 115     parent.forEach(function(e){
 116       e.on('scroll', function (evt) { layout(evt) });
 117     });
 118
 119     editor.on( 'blur', function() {
 120       float_space.hide();
 121     } );
 122
 123     editor.on( 'destroy', function() {
 124       float_space.remove();
 125     } );
 126
 127     if ( editor.focusManager.hasFocus )
 128       float_space.show();
 129
 130     editor.focusManager.add( float_space, 1 );
 131   }
 132
 133 })();
 134
 135 /*
 136   TODO
 137    * ltr support
 138    * textarea/div mode safe, currently simply assumes that textarea inline is used
 139    * positioning of resize handle is not browser zomm safe
 140 */