toolbarview.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  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/toolbarview
  7. */
  8. import View from '../view';
  9. import Template from '../template';
  10. import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
  11. import FocusCycler from '../focuscycler';
  12. import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
  13. import ToolbarSeparatorView from './toolbarseparatorview';
  14. import preventDefault from '../bindings/preventdefault.js';
  15. /**
  16. * The toolbar view class.
  17. *
  18. * @extends module:ui/view~View
  19. */
  20. export default class ToolbarView extends View {
  21. /**
  22. * @inheritDoc
  23. */
  24. constructor( locale ) {
  25. super( locale );
  26. /**
  27. * Collection of the toolbar items (like buttons).
  28. *
  29. * @readonly
  30. * @member {module:ui/viewcollection~ViewCollection}
  31. */
  32. this.items = this.createCollection();
  33. /**
  34. * Tracks information about DOM focus in the list.
  35. *
  36. * @readonly
  37. * @member {module:utils/focustracker~FocusTracker}
  38. */
  39. this.focusTracker = new FocusTracker();
  40. /**
  41. * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
  42. *
  43. * @readonly
  44. * @member {module:utils/keystrokehandler~KeystrokeHandler}
  45. */
  46. this.keystrokes = new KeystrokeHandler();
  47. /**
  48. * Helps cycling over focusable {@link #items} in the toolbar.
  49. *
  50. * @readonly
  51. * @protected
  52. * @member {module:ui/focuscycler~FocusCycler}
  53. */
  54. this._focusCycler = new FocusCycler( {
  55. focusables: this.items,
  56. focusTracker: this.focusTracker,
  57. keystrokeHandler: this.keystrokes,
  58. actions: {
  59. // Navigate toolbar items backwards using the arrow[left,up] keys.
  60. focusPrevious: [ 'arrowleft', 'arrowup' ],
  61. // Navigate toolbar items forwards using the arrow[right,down] keys.
  62. focusNext: [ 'arrowright', 'arrowdown' ]
  63. }
  64. } );
  65. this.template = new Template( {
  66. tag: 'div',
  67. attributes: {
  68. class: [
  69. 'ck-toolbar'
  70. ]
  71. },
  72. children: this.items,
  73. on: {
  74. // https://github.com/ckeditor/ckeditor5-ui/issues/206
  75. mousedown: preventDefault( this )
  76. }
  77. } );
  78. this.items.on( 'add', ( evt, item ) => {
  79. this.focusTracker.add( item.element );
  80. } );
  81. this.items.on( 'remove', ( evt, item ) => {
  82. this.focusTracker.remove( item.element );
  83. } );
  84. }
  85. /**
  86. * @inheritDoc
  87. */
  88. init() {
  89. // Start listening for the keystrokes coming from #element.
  90. this.keystrokes.listenTo( this.element );
  91. return super.init();
  92. }
  93. /**
  94. * Focuses the first focusable in {@link #items}.
  95. */
  96. focus() {
  97. this._focusCycler.focusFirst();
  98. }
  99. /**
  100. * A utility which expands a plain toolbar configuration into
  101. * {@link module:ui/toolbar/toolbarview~ToolbarView#items} using a given component factory.
  102. *
  103. * @param {Array} config The toolbar config.
  104. * @param {module:ui/componentfactory~ComponentFactory} factory A factory producing toolbar items.
  105. * @returns {Promise} A promise resolved when created toolbar items are initialized.
  106. */
  107. fillFromConfig( config, factory ) {
  108. if ( !config ) {
  109. return Promise.resolve();
  110. }
  111. return Promise.all( config.map( name => {
  112. const component = name == '|' ? new ToolbarSeparatorView() : factory.create( name );
  113. return this.items.add( component );
  114. } ) );
  115. }
  116. }