blockbuttonview.js 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. /**
  2. * @license Copyright (c) 2003-2019, 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/toolbar/block/blockbuttonview
  7. */
  8. import ButtonView from '../../button/buttonview';
  9. import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
  10. import '../../../theme/components/toolbar/blocktoolbar.css';
  11. const toPx = toUnit( 'px' );
  12. /**
  13. * The block button view class.
  14. *
  15. * This view represents a button attached next to block element where the selection is anchored.
  16. *
  17. * See {@link module:ui/toolbar/block/blocktoolbar~BlockToolbar}.
  18. *
  19. * @extends {module:ui/button/buttonview~ButtonView}
  20. */
  21. export default class BlockButtonView extends ButtonView {
  22. /**
  23. * @inheritDoc
  24. */
  25. constructor( locale ) {
  26. super( locale );
  27. const bind = this.bindTemplate;
  28. // Hide button on init.
  29. this.isVisible = false;
  30. /**
  31. * Top offset.
  32. *
  33. * @member {Number} #top
  34. */
  35. this.set( 'top', 0 );
  36. /**
  37. * Left offset.
  38. *
  39. * @member {Number} #left
  40. */
  41. this.set( 'left', 0 );
  42. this.extendTemplate( {
  43. attributes: {
  44. class: 'ck-block-toolbar-button',
  45. style: {
  46. top: bind.to( 'top', val => toPx( val ) ),
  47. left: bind.to( 'left', val => toPx( val ) ),
  48. }
  49. }
  50. } );
  51. }
  52. }