plugin.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. /**
  2. * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or http://ckeditor.com/license
  4. */
  5. CKEDITOR.plugins.add( 'resize', {
  6. init: function( editor ) {
  7. function dragHandler( evt ) {
  8. var dx = evt.data.$.screenX - origin.x,
  9. dy = evt.data.$.screenY - origin.y,
  10. width = startSize.width,
  11. height = startSize.height,
  12. internalWidth = width + dx * ( resizeDir == 'rtl' ? -1 : 1 ),
  13. internalHeight = height + dy;
  14. if ( resizeHorizontal )
  15. width = Math.max( config.resize_minWidth, Math.min( internalWidth, config.resize_maxWidth ) );
  16. if ( resizeVertical )
  17. height = Math.max( config.resize_minHeight, Math.min( internalHeight, config.resize_maxHeight ) );
  18. // DO NOT impose fixed size with single direction resize. (#6308)
  19. editor.resize( resizeHorizontal ? width : null, height );
  20. }
  21. function dragEndHandler() {
  22. CKEDITOR.document.removeListener( 'mousemove', dragHandler );
  23. CKEDITOR.document.removeListener( 'mouseup', dragEndHandler );
  24. if ( editor.document ) {
  25. editor.document.removeListener( 'mousemove', dragHandler );
  26. editor.document.removeListener( 'mouseup', dragEndHandler );
  27. }
  28. }
  29. var config = editor.config;
  30. var spaceId = editor.ui.spaceId( 'resizer' );
  31. // Resize in the same direction of chrome,
  32. // which is identical to dir of editor element. (#6614)
  33. var resizeDir = editor.element ? editor.element.getDirection( 1 ) : 'ltr';
  34. !config.resize_dir && ( config.resize_dir = 'vertical' );
  35. ( config.resize_maxWidth === undefined ) && ( config.resize_maxWidth = 3000 );
  36. ( config.resize_maxHeight === undefined ) && ( config.resize_maxHeight = 3000 );
  37. ( config.resize_minWidth === undefined ) && ( config.resize_minWidth = 750 );
  38. ( config.resize_minHeight === undefined ) && ( config.resize_minHeight = 250 );
  39. if ( config.resize_enabled !== false ) {
  40. var container = null,
  41. origin, startSize,
  42. resizeHorizontal = ( config.resize_dir == 'both' || config.resize_dir == 'horizontal' ) && ( config.resize_minWidth != config.resize_maxWidth ),
  43. resizeVertical = ( config.resize_dir == 'both' || config.resize_dir == 'vertical' ) && ( config.resize_minHeight != config.resize_maxHeight );
  44. var mouseDownFn = CKEDITOR.tools.addFunction( function( $event ) {
  45. if ( !container )
  46. container = editor.getResizable();
  47. startSize = { width: container.$.offsetWidth || 0, height: container.$.offsetHeight || 0 };
  48. origin = { x: $event.screenX, y: $event.screenY };
  49. config.resize_minWidth > startSize.width && ( config.resize_minWidth = startSize.width );
  50. config.resize_minHeight > startSize.height && ( config.resize_minHeight = startSize.height );
  51. CKEDITOR.document.on( 'mousemove', dragHandler );
  52. CKEDITOR.document.on( 'mouseup', dragEndHandler );
  53. if ( editor.document ) {
  54. editor.document.on( 'mousemove', dragHandler );
  55. editor.document.on( 'mouseup', dragEndHandler );
  56. }
  57. $event.preventDefault && $event.preventDefault();
  58. } );
  59. editor.on( 'destroy', function() {
  60. CKEDITOR.tools.removeFunction( mouseDownFn );
  61. } );
  62. editor.on( 'uiSpace', function( event ) {
  63. if ( event.data.space == 'bottom' ) {
  64. var direction = '';
  65. if ( resizeHorizontal && !resizeVertical )
  66. direction = ' cke_resizer_horizontal';
  67. if ( !resizeHorizontal && resizeVertical )
  68. direction = ' cke_resizer_vertical';
  69. var resizerHtml =
  70. '<span' +
  71. ' id="' + spaceId + '"' +
  72. ' class="cke_resizer' + direction + ' cke_resizer_' + resizeDir + '"' +
  73. ' title="' + CKEDITOR.tools.htmlEncode( editor.lang.common.resize ) + '"' +
  74. ' onmousedown="CKEDITOR.tools.callFunction(' + mouseDownFn + ', event)"' +
  75. '>' +
  76. // BLACK LOWER RIGHT TRIANGLE (ltr)
  77. // BLACK LOWER LEFT TRIANGLE (rtl)
  78. ( resizeDir == 'ltr' ? '\u25E2' : '\u25E3' ) +
  79. '</span>';
  80. // Always sticks the corner of botttom space.
  81. resizeDir == 'ltr' && direction == 'ltr' ? event.data.html += resizerHtml : event.data.html = resizerHtml + event.data.html;
  82. }
  83. }, editor, null, 100 );
  84. // Toggle the visibility of the resizer when an editor is being maximized or minimized.
  85. editor.on( 'maximize', function( event ) {
  86. editor.ui.space( 'resizer' )[ event.data == CKEDITOR.TRISTATE_ON ? 'hide' : 'show' ]();
  87. } );
  88. }
  89. }
  90. } );
  91. /**
  92. * The minimum editor width, in pixels, when resizing the editor interface by using the resize handle.
  93. * Note: It falls back to editor's actual width if it is smaller than the default value.
  94. *
  95. * config.resize_minWidth = 500;
  96. *
  97. * @cfg {Number} [resize_minWidth=750]
  98. * @member CKEDITOR.config
  99. */
  100. /**
  101. * The minimum editor height, in pixels, when resizing the editor interface by using the resize handle.
  102. * Note: It falls back to editor's actual height if it is smaller than the default value.
  103. *
  104. * config.resize_minHeight = 600;
  105. *
  106. * @cfg {Number} [resize_minHeight=250]
  107. * @member CKEDITOR.config
  108. */
  109. /**
  110. * The maximum editor width, in pixels, when resizing the editor interface by using the resize handle.
  111. *
  112. * config.resize_maxWidth = 750;
  113. *
  114. * @cfg {Number} [resize_maxWidth=3000]
  115. * @member CKEDITOR.config
  116. */
  117. /**
  118. * The maximum editor height, in pixels, when resizing the editor interface by using the resize handle.
  119. *
  120. * config.resize_maxHeight = 600;
  121. *
  122. * @cfg {Number} [resize_maxHeight=3000]
  123. * @member CKEDITOR.config
  124. */
  125. /**
  126. * Whether to enable the resizing feature. If this feature is disabled, the resize handle will not be visible.
  127. *
  128. * config.resize_enabled = false;
  129. *
  130. * @cfg {Boolean} [resize_enabled=true]
  131. * @member CKEDITOR.config
  132. */
  133. /**
  134. * The dimensions for which the editor resizing is enabled. Possible values
  135. * are `both`, `vertical`, and `horizontal`.
  136. *
  137. * config.resize_dir = 'both';
  138. *
  139. * @since 3.3
  140. * @cfg {String} [resize_dir='vertical']
  141. * @member CKEDITOR.config
  142. */