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 parentDialog(e) {
  27     return e.getParents().filter( function(parent) {
  28       return parent.$.classList.contains("ui-dialog-content")
  29     })[0];
  30   };
  31
  32   function attach( editor ) {
  33     var config = editor.config,
  34         parent = parentScroll(editor.element),
  35         divelt = editor.element.getNext(function(elt){return elt.getAttribute("class") === "cke_textarea_inline"}),
  36         inline = editor.element.$.classList.contains("texteditor-in-dialog");
  37
  38     var dialog;
  39
  40     if (inline) {
  41       dialog = parentDialog(divelt);
  42     }
  43
  44     var resize = function (width, height) {
  45       var editable;
  46       if ( !( editable = editor.editable() ) )
  47         return;
  48
  49       editable.setStyle('width',  pixelate(width));
  50       editable.setStyle('height', pixelate(height));
  51     }
  52
  53     var layout = function ( evt ) {
  54       var editable;
  55       if ( !( editable = editor.editable() ) )
  56           return;
  57
  58       // Show up the space on focus gain.
  59       if (  evt && evt.name == 'focus' )
  60         float_space.show();
  61
  62       var editorPos  = editable.getDocumentPosition();
  63       var editorRect = editable.getClientRect();
  64       var floatRect  = float_space.getClientRect();
  65       var viewRect   = win.getViewPaneSize();
  66
  67       float_space.setStyle( 'position', 'absolute' );
  68       if (inline) {
  69         var dialogPos = dialog.getDocumentPosition();
  70         float_space.setStyle( 'top',  pixelate( editorPos.y - dialogPos.y + editorRect.height - floatRect.height + 1 ) );
  71
  72         //float_space.setStyle( 'left', pixelate( editorPos.x - dialogPos.x + editorRect.width  - floatRect.width ) );
  73         // floatRect.width seems to be far to high on first dialog popup
  74         float_space.setStyle( 'left', pixelate( editorPos.x - dialogPos.x + editorRect.width  - 11 ) );
  75       } else {
  76         float_space.setStyle( 'top',    pixelate( editorPos.y + editorRect.height - floatRect.height + 1) );
  77         float_space.setStyle( 'right',  pixelate( viewRect.width - editorRect.right ) );
  78       }
  79     };
  80
  81     var float_html  = '<div class="cke_editor_inline_resize_button">\u25E2</div>'; // class so that csss can overrise content and style
  82     var float_space = inline ? divelt.getParent().append( CKEDITOR.dom.element.createFromHtml( float_html ))
  83                              : CKEDITOR.document.getBody().append( CKEDITOR.dom.element.createFromHtml( float_html ));
  84
  85     var drag_handler = function( evt ) {
  86       var width  = startSize.width  + evt.data.$.screenX - origin.x,
  87           height = startSize.height + evt.data.$.screenY - origin.y;
  88
  89       width  = Math.max( config.resize_minWidth  || 200, Math.min( width  || 0, config.resize_maxWidth  || 9000) );
  90       height = Math.max( config.resize_minHeight || 75,  Math.min( height || 0, config.resize_maxHeight || 9000) );
  91
  92       resize( width, height );
  93       layout();
  94     };
  95
  96     var drag_end_handler = function() {
  97       CKEDITOR.document.removeListener( 'mousemove', drag_handler );
  98       CKEDITOR.document.removeListener( 'mouseup',   drag_end_handler );
  99
 100       if ( editor.document ) {
 101         editor.document.removeListener( 'mousemove', drag_handler );
 102         editor.document.removeListener( 'mouseup',   drag_end_handler );
 103       }
 104     }
 105
 106     var mousedown_fn =  function( evt ) {
 107       var editable;
 108       if ( !( editable = editor.editable() ) )
 109         return;
 110
 111       var editorRect = editable.getClientRect();
 112       startSize      = { width: editorRect.width, height: editorRect.height };
 113       origin         = { x: evt.data.$.screenX, y: evt.data.$.screenY };
 114
 115       if (config.resize_minWidth  > startSize.width)   config.resize_minWidth = startSize.width;
 116       if (config.resize_minHeight > startSize.height) config.resize_minHeight = startSize.height;
 117
 118       CKEDITOR.document.on( 'mousemove', drag_handler );
 119       CKEDITOR.document.on( 'mouseup',   drag_end_handler );
 120
 121       if ( editor.document ) {
 122         editor.document.on( 'mousemove', drag_handler );
 123         editor.document.on( 'mouseup',   drag_end_handler );
 124       }
 125
 126       evt.data.$.preventDefault();
 127     };
 128
 129     float_space.setStyle( 'overflow', 'hidden' );
 130     float_space.setStyle( 'cursor', 'se-resize' )
 131     float_space.on('mousedown', mousedown_fn);
 132     float_space.unselectable();
 133     float_space.hide();
 134
 135     editor.on( 'focus', function( evt ) {
 136       layout( evt );
 137     } );
 138
 139     parent.forEach(function(e){
 140       e.on('scroll', function (evt) { layout(evt) });
 141     });
 142
 143     editor.on( 'blur', function() {
 144       float_space.hide();
 145     } );
 146
 147     editor.on( 'destroy', function() {
 148       float_space.remove();
 149     } );
 150
 151     if ( editor.focusManager.hasFocus )
 152       float_space.show();
 153
 154     editor.focusManager.add( float_space, 1 );
 155   }
 156
 157 })();
 158
 159 /*
 160   TODO
 161    * ltr support
 162    * textarea/div mode safe, currently simply assumes that textarea inline is used
 163    * positioning of resize handle is not browser zomm safe
 164    * positioning of resize handle in dialog with scroll bars is broken
 165 */