8
0

dropdownbuttonview.js 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /**
  6. * @module ui/dropdown/button/dropdownbuttonview
  7. */
  8. import ButtonView from '../../button/buttonview';
  9. import dropdownArrowIcon from '../../../theme/icons/dropdown-arrow.svg';
  10. import IconView from '../../icon/iconview';
  11. /**
  12. * The default dropdown button view class.
  13. *
  14. * const view = new DropdownButtonView();
  15. *
  16. * view.set( {
  17. * label: 'A button',
  18. * keystroke: 'Ctrl+B',
  19. * tooltip: true
  20. * } );
  21. *
  22. * view.render();
  23. *
  24. * document.body.append( view.element );
  25. *
  26. * Also see the {@link module:ui/dropdown/utils~createDropdown `createDropdown()` util}.
  27. *
  28. * @implements module:ui/dropdown/button/dropdownbutton~DropdownButton
  29. * @extends module:ui/button/buttonview~ButtonView
  30. */
  31. export default class DropdownButtonView extends ButtonView {
  32. /**
  33. * @inheritDoc
  34. */
  35. constructor( locale ) {
  36. super( locale );
  37. /**
  38. * An icon that displays arrow to indicate a dropdown button.
  39. *
  40. * @readonly
  41. * @member {module:ui/icon/iconview~IconView}
  42. */
  43. this.arrowView = this._createArrowView();
  44. this.extendTemplate( {
  45. attributes: {
  46. 'aria-haspopup': true
  47. }
  48. } );
  49. this.withArrow = true;
  50. // The DropdownButton interface expects the open event upon which will open the dropdown.
  51. this.delegate( 'execute' ).to( this, 'open' );
  52. }
  53. /**
  54. * @inheritDoc
  55. */
  56. render() {
  57. super.render();
  58. if ( this.withArrow ) {
  59. this.children.add( this.arrowView );
  60. }
  61. }
  62. /**
  63. * Creates a {@link module:ui/icon/iconview~IconView} instance as {@link #arrowView}.
  64. *
  65. * @private
  66. * @returns {module:ui/icon/iconview~IconView}
  67. */
  68. _createArrowView() {
  69. const arrowView = new IconView();
  70. arrowView.content = dropdownArrowIcon;
  71. arrowView.extendTemplate( {
  72. attributes: {
  73. class: 'ck-dropdown__arrow'
  74. }
  75. } );
  76. return arrowView;
  77. }
  78. }