contextualtoolbar.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module ui/toolbar/contextualtoolbar
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import ContextualBalloon from '@ckeditor/ckeditor5-ui/src/contextualballoon';
  10. import ToolbarView from './toolbarview';
  11. import BalloonPanelView from '../panel/balloon/balloonpanelview.js';
  12. import debounce from '@ckeditor/ckeditor5-utils/src/lib/lodash/debounce';
  13. /**
  14. * The contextual toolbar.
  15. *
  16. * It uses the {@link module:ui/contextualballoon~ContextualBalloon contextual balloon plugin}.
  17. *
  18. * @extends module:core/plugin~Plugin
  19. */
  20. export default class ContextualToolbar extends Plugin {
  21. /**
  22. * @inheritDoc
  23. */
  24. static get requires() {
  25. return [ ContextualBalloon ];
  26. }
  27. /**
  28. * @inheritDoc
  29. */
  30. init() {
  31. /**
  32. * The toolbar view displayed in the balloon.
  33. *
  34. * @member {module:ui/toolbar/toolbarview~ToolbarView}
  35. */
  36. this.toolbarView = new ToolbarView( this.editor.locale );
  37. /**
  38. * The contextual balloon plugin instance.
  39. *
  40. * @private
  41. * @member {module:ui/contextualballoon~ContextualBalloon}
  42. */
  43. this._balloon = this.editor.plugins.get( ContextualBalloon );
  44. /**
  45. * This is internal plugin event which is fired 200 ms after selection last change (lodash#debounce).
  46. * This is to makes easy test debounced action without need to use `setTimeout`. Lodash keeps time related
  47. * stuff in a closure and it's not possible to override it by sinon fake timers.
  48. *
  49. * This debounced function is stored as a plugin property to make possible to cancel
  50. * trailing debounced invocation on destroy.
  51. *
  52. * @private
  53. * @member {Function}
  54. */
  55. this._fireChangeDoneDebounced = debounce( () => this.fire( '_selectionChangeDone' ), 200 );
  56. // Attach lifecycle actions.
  57. this._handleSelectionChange();
  58. this._handleFocusChange();
  59. }
  60. /**
  61. * Creates toolbar components based on given configuration.
  62. * This need to be done when all plugins will be ready.
  63. *
  64. * @inheritDoc
  65. */
  66. afterInit() {
  67. const config = this.editor.config.get( 'contextualToolbar' );
  68. const factory = this.editor.ui.componentFactory;
  69. return this.toolbarView.fillFromConfig( config, factory );
  70. }
  71. /**
  72. * Handles editor focus change and hides panel if it's needed.
  73. *
  74. * @private
  75. */
  76. _handleFocusChange() {
  77. const editor = this.editor;
  78. // Hide the panel View when editor loses focus but no the other way around.
  79. this.listenTo( editor.ui.focusTracker, 'change:isFocused', ( evt, name, isFocused ) => {
  80. if ( this._balloon.visibleView === this.toolbarView && !isFocused ) {
  81. this._hidePanel();
  82. }
  83. } );
  84. }
  85. /**
  86. * Handles {@link modules:engine/model/document#selection} change and show or hide toolbar.
  87. *
  88. * Note that in this case it's better to listen to {@link modules:engine/model/document modelDocument}
  89. * selection instead of {@link modules:engine/view/document viewDocument} selection because the first one
  90. * doesn't fire `change` event after text styles changes (like bold or italic) and toolbar doesn't blink.
  91. *
  92. * @private
  93. */
  94. _handleSelectionChange() {
  95. const selection = this.editor.document.selection;
  96. this.listenTo( selection, 'change:range', ( evt, data ) => {
  97. // When the selection is not changed by a collaboration and when is not collapsed.
  98. if ( data.directChange || selection.isCollapsed ) {
  99. // Hide the toolbar when the selection starts changing.
  100. this._hidePanel();
  101. }
  102. // Fire internal `_selectionChangeDone` when the selection stops changing.
  103. this._fireChangeDoneDebounced();
  104. } );
  105. // Hide the toolbar when the selection stops changing.
  106. this.listenTo( this, '_selectionChangeDone', () => this._showPanel() );
  107. }
  108. /**
  109. * Adds panel view to the {@link: #_balloon} and attaches panel to the selection.
  110. *
  111. * @private
  112. */
  113. _showPanel() {
  114. const editingView = this.editor.editing.view;
  115. // Do not add toolbar to the balloon stack twice.
  116. if ( this._balloon.hasView( this.toolbarView ) ) {
  117. return;
  118. }
  119. // This implementation assumes that only non–collapsed selections gets the contextual toolbar.
  120. if ( !editingView.isFocused || editingView.selection.isCollapsed ) {
  121. return;
  122. }
  123. // Add panel to the common editor contextual balloon.
  124. this._balloon.add( {
  125. view: this.toolbarView,
  126. position: this._getBalloonPositionData()
  127. } );
  128. // Update panel position when selection changes while balloon will be opened (by a collaboration).
  129. this.listenTo( this.editor.editing.view, 'render', () => {
  130. this._balloon.updatePosition( this._getBalloonPositionData() );
  131. } );
  132. }
  133. /**
  134. * Removes panel from the {@link: #_balloon}.
  135. *
  136. * @private
  137. */
  138. _hidePanel() {
  139. if ( this._balloon.hasView( this.toolbarView ) ) {
  140. this.stopListening( this.editor.editing.view, 'render' );
  141. this._balloon.remove( this.toolbarView );
  142. }
  143. }
  144. /**
  145. * Returns positioning options for the {@link #_balloon}. They control the way balloon is attached
  146. * to the selection.
  147. *
  148. * @private
  149. * @returns {module:utils/dom/position~Options}
  150. */
  151. _getBalloonPositionData() {
  152. const editingView = this.editor.editing.view;
  153. // Get direction of the selection.
  154. const isBackward = editingView.selection.isBackward;
  155. // getBoundingClientRect() makes no sense when the selection spans across number
  156. // of lines of text. Using getClientRects() allows us to browse micro–ranges
  157. // that would normally make up the bounding client rect.
  158. const rangeRects = editingView.domConverter.viewRangeToDom( editingView.selection.getFirstRange() ).getClientRects();
  159. // Select the proper range rect depending on the direction of the selection.
  160. const rangeRect = isBackward ? rangeRects.item( 0 ) : rangeRects.item( rangeRects.length - 1 );
  161. return {
  162. target: rangeRect,
  163. positions: isBackward ?
  164. [ positions.backwardSelection, positions.backwardSelectionAlternative ] :
  165. [ positions.forwardSelection, positions.forwardSelectionAlternative ],
  166. };
  167. }
  168. /**
  169. * @inheritDoc
  170. */
  171. destroy() {
  172. this._fireChangeDoneDebounced.cancel();
  173. this.stopListening();
  174. super.destroy();
  175. }
  176. }
  177. // List of available toolbar positions.
  178. const arrowVOffset = BalloonPanelView.arrowVerticalOffset;
  179. const positions = {
  180. // [text range]
  181. // ^
  182. // +-----------------+
  183. // | Balloon |
  184. // +-----------------+
  185. forwardSelection: ( targetRect, balloonRect ) => ( {
  186. top: targetRect.bottom + arrowVOffset,
  187. left: targetRect.right - balloonRect.width / 2,
  188. name: 's'
  189. } ),
  190. // +-----------------+
  191. // | Balloon |
  192. // +-----------------+
  193. // V
  194. // [text range]
  195. forwardSelectionAlternative: ( targetRect, balloonRect ) => ( {
  196. top: targetRect.top - balloonRect.height - arrowVOffset,
  197. left: targetRect.right - balloonRect.width / 2,
  198. name: 'n'
  199. } ),
  200. // +-----------------+
  201. // | Balloon |
  202. // +-----------------+
  203. // V
  204. // [text range]
  205. backwardSelection: ( targetRect, balloonRect ) => ( {
  206. top: targetRect.top - balloonRect.height - arrowVOffset,
  207. left: targetRect.left - balloonRect.width / 2,
  208. name: 'n'
  209. } ),
  210. // [text range]
  211. // ^
  212. // +-----------------+
  213. // | Balloon |
  214. // +-----------------+
  215. backwardSelectionAlternative: ( targetRect, balloonRect ) => ( {
  216. top: targetRect.bottom + arrowVOffset,
  217. left: targetRect.left - balloonRect.width / 2,
  218. name: 's'
  219. } )
  220. };