toolbarview.js 3.0 KB

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