8
0

contextualtoolbar.js 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
  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 Template from '../../template';
  9. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  10. import ContextualBalloon from '../../panel/balloon/contextualballoon';
  11. import ToolbarView from '../toolbarview';
  12. import BalloonPanelView from '../../panel/balloon/balloonpanelview.js';
  13. import debounce from '@ckeditor/ckeditor5-utils/src/lib/lodash/debounce';
  14. import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
  15. /**
  16. * The contextual toolbar.
  17. *
  18. * It uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon contextual balloon plugin}.
  19. *
  20. * @extends module:core/plugin~Plugin
  21. */
  22. export default class ContextualToolbar extends Plugin {
  23. /**
  24. * @inheritDoc
  25. */
  26. static get pluginName() {
  27. return 'ContextualToolbar';
  28. }
  29. /**
  30. * @inheritDoc
  31. */
  32. static get requires() {
  33. return [ ContextualBalloon ];
  34. }
  35. /**
  36. * @inheritDoc
  37. */
  38. init() {
  39. /**
  40. * The toolbar view displayed in the balloon.
  41. *
  42. * @member {module:ui/toolbar/toolbarview~ToolbarView}
  43. */
  44. this.toolbarView = new ToolbarView( this.editor.locale );
  45. Template.extend( this.toolbarView.template, {
  46. attributes: {
  47. class: [
  48. 'ck-editor-toolbar',
  49. 'ck-toolbar_floating'
  50. ]
  51. }
  52. } );
  53. /**
  54. * The contextual balloon plugin instance.
  55. *
  56. * @private
  57. * @member {module:ui/panel/balloon/contextualballoon~ContextualBalloon}
  58. */
  59. this._balloon = this.editor.plugins.get( ContextualBalloon );
  60. /**
  61. * Fires {@link #event:_selectionChangeDebounced} event using `lodash#debounce`.
  62. *
  63. * This function is stored as a plugin property to make possible to cancel
  64. * trailing debounced invocation on destroy.
  65. *
  66. * @private
  67. * @member {Function}
  68. */
  69. this._fireSelectionChangeDebounced = debounce( () => this.fire( '_selectionChangeDebounced' ), 200 );
  70. // Attach lifecycle actions.
  71. this._handleSelectionChange();
  72. this._handleFocusChange();
  73. }
  74. /**
  75. * Creates toolbar components based on given configuration.
  76. * This needs to be done when all plugins will be ready.
  77. *
  78. * @inheritDoc
  79. */
  80. afterInit() {
  81. const config = this.editor.config.get( 'contextualToolbar' );
  82. const factory = this.editor.ui.componentFactory;
  83. this.toolbarView.fillFromConfig( config, factory );
  84. }
  85. /**
  86. * Handles editor focus change and hides panel if it's needed.
  87. *
  88. * @private
  89. */
  90. _handleFocusChange() {
  91. const editor = this.editor;
  92. // Hide the panel View when editor loses focus but no the other way around.
  93. this.listenTo( editor.ui.focusTracker, 'change:isFocused', ( evt, name, isFocused ) => {
  94. if ( this._balloon.visibleView === this.toolbarView && !isFocused ) {
  95. this.hide();
  96. }
  97. } );
  98. }
  99. /**
  100. * Handles {@link module:engine/model/document~Document#selection} change and show or hide toolbar.
  101. *
  102. * Note that in this case it's better to listen to {@link module:engine/model/document~Document model document}
  103. * selection instead of {@link module:engine/view/document~Document view document} selection because the first one
  104. * doesn't fire `change` event after text style change (like bold or italic) and toolbar doesn't blink.
  105. *
  106. * @private
  107. */
  108. _handleSelectionChange() {
  109. const selection = this.editor.document.selection;
  110. const editingView = this.editor.editing.view;
  111. this.listenTo( selection, 'change:range', ( evt, data ) => {
  112. // When the selection is not changed by a collaboration and when is not collapsed.
  113. if ( data.directChange || selection.isCollapsed ) {
  114. // Hide the toolbar when the selection starts changing.
  115. this.hide();
  116. }
  117. // Fire internal `_selectionChangeDebounced` when the selection stops changing.
  118. this._fireSelectionChangeDebounced();
  119. } );
  120. // Hide the toolbar when the selection stops changing.
  121. this.listenTo( this, '_selectionChangeDebounced', () => {
  122. // This implementation assumes that only non–collapsed selections gets the contextual toolbar.
  123. if ( editingView.isFocused && !editingView.selection.isCollapsed ) {
  124. this.show();
  125. }
  126. } );
  127. }
  128. /**
  129. * Adds panel view to the {@link: #_balloon} and attaches panel to the selection.
  130. *
  131. * Fires {@link #event:beforeShow} event just before displaying the panel.
  132. */
  133. show() {
  134. const editingView = this.editor.editing.view;
  135. let isStopped = false;
  136. // Do not add toolbar to the balloon stack twice.
  137. if ( this._balloon.hasView( this.toolbarView ) ) {
  138. return;
  139. }
  140. // If `beforeShow` event is not stopped by any external code then panel will be displayed.
  141. this.once( 'beforeShow', () => {
  142. if ( isStopped ) {
  143. return;
  144. }
  145. // Update panel position when selection changes while balloon will be opened
  146. // (by an external document changes).
  147. this.listenTo( editingView, 'render', () => {
  148. this._balloon.updatePosition( this._getBalloonPositionData() );
  149. } );
  150. // Add panel to the common editor contextual balloon.
  151. this._balloon.add( {
  152. view: this.toolbarView,
  153. position: this._getBalloonPositionData(),
  154. balloonClassName: 'ck-toolbar-container ck-editor-toolbar-container'
  155. } );
  156. } );
  157. // Fire this event to inform that `ContextualToolbar` is going to be shown.
  158. // Helper function for preventing the panel from being displayed is passed along with the event.
  159. this.fire( 'beforeShow', () => {
  160. isStopped = true;
  161. } );
  162. }
  163. /**
  164. * Removes the toolbar from the {@link: #_balloon} which hides it.
  165. */
  166. hide() {
  167. if ( this._balloon.hasView( this.toolbarView ) ) {
  168. this.stopListening( this.editor.editing.view, 'render' );
  169. this._balloon.remove( this.toolbarView );
  170. }
  171. }
  172. /**
  173. * Returns positioning options for the {@link #_balloon}. They control the way balloon is attached
  174. * to the selection.
  175. *
  176. * @private
  177. * @returns {module:utils/dom/position~Options}
  178. */
  179. _getBalloonPositionData() {
  180. const editingView = this.editor.editing.view;
  181. // Get direction of the selection.
  182. const isBackward = editingView.selection.isBackward;
  183. return {
  184. // Because the target for BalloonPanelView is a Rect (not DOMRange), it's geometry will stay fixed
  185. // as the window scrolls. To let the BalloonPanelView follow such Rect, is must be continuously
  186. // computed and hence, the target is defined as a function instead of a static value.
  187. // https://github.com/ckeditor/ckeditor5-ui/issues/195
  188. target: () => {
  189. const range = editingView.selection.getFirstRange();
  190. const rangeRects = Rect.getDomRangeRects( editingView.domConverter.viewRangeToDom( range ) );
  191. // Select the proper range rect depending on the direction of the selection.
  192. return rangeRects[ isBackward ? 0 : rangeRects.length - 1 ];
  193. },
  194. limiter: this.editor.ui.view.editable.element,
  195. positions: getBalloonPositions( isBackward )
  196. };
  197. }
  198. /**
  199. * @inheritDoc
  200. */
  201. destroy() {
  202. this._fireSelectionChangeDebounced.cancel();
  203. this.stopListening();
  204. super.destroy();
  205. }
  206. /**
  207. * This event is fired just before the toolbar shows.
  208. * Using this event, an external code can prevent ContextualToolbar
  209. * from being displayed by calling a `stop` function which is passed along with this event.
  210. *
  211. * @event beforeShow
  212. * @param {Function} stop Calling this function prevents panel from being displayed.
  213. */
  214. /**
  215. * This is internal plugin event which is fired 200 ms after model selection last change.
  216. * This is to makes easy test debounced action without need to use `setTimeout`.
  217. *
  218. * @protected
  219. * @event _selectionChangeDebounced
  220. */
  221. }
  222. // Returns toolbar positions for the given direction of the selection.
  223. //
  224. // @private
  225. // @param {Boolean} isBackward
  226. // @returns {Array.<module:utils/dom/position~Position>}
  227. function getBalloonPositions( isBackward ) {
  228. const defaultPositions = BalloonPanelView.defaultPositions;
  229. return isBackward ? [
  230. defaultPositions.northWestArrowSouth,
  231. defaultPositions.northWestArrowSouthWest,
  232. defaultPositions.northWestArrowSouthEast,
  233. defaultPositions.southWestArrowNorth,
  234. defaultPositions.southWestArrowNorthWest,
  235. defaultPositions.southWestArrowNorthEast
  236. ] : [
  237. defaultPositions.southEastArrowNorth,
  238. defaultPositions.southEastArrowNorthEast,
  239. defaultPositions.southEastArrowNorthWest,
  240. defaultPositions.northEastArrowSouth,
  241. defaultPositions.northEastArrowSouthEast,
  242. defaultPositions.northEastArrowSouthWest
  243. ];
  244. }