8
0

contextualtoolbar.js 6.3 KB

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