8
0

alignmentui.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module alignment/alignmentui
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
  10. import alignLeftIcon from '../theme/icons/align-left.svg';
  11. import alignRightIcon from '../theme/icons/align-right.svg';
  12. import alignCenterIcon from '../theme/icons/align-center.svg';
  13. import alignJustifyIcon from '../theme/icons/align-justify.svg';
  14. import AlignmentEditing, { isSupported } from './alignmentediting';
  15. import upperFirst from '@ckeditor/ckeditor5-utils/src/lib/lodash/upperFirst';
  16. const icons = new Map( [
  17. [ 'left', alignLeftIcon ],
  18. [ 'right', alignRightIcon ],
  19. [ 'center', alignCenterIcon ],
  20. [ 'justify', alignJustifyIcon ]
  21. ] );
  22. /**
  23. * The default Alignment UI plugin.
  24. *
  25. * It introduces the `'alignLeft'`, `'alignRight'`, `'alignCenter'` and `'alignJustify'` buttons.
  26. *
  27. * @extends module:core/plugin~Plugin
  28. */
  29. export default class AlignmentUI extends Plugin {
  30. /**
  31. * @inheritDoc
  32. */
  33. static get requires() {
  34. return [ AlignmentEditing ];
  35. }
  36. /**
  37. * @inheritDoc
  38. */
  39. static get pluginName() {
  40. return 'AlignmentUI';
  41. }
  42. /**
  43. * @inheritDoc
  44. */
  45. init() {
  46. const styles = this.editor.config.get( 'alignment.styles' );
  47. styles
  48. .filter( isSupported )
  49. .forEach( style => this._addButton( style ) );
  50. }
  51. /**
  52. * Helper method for initializing a button and linking it with an appropriate command.
  53. *
  54. * @private
  55. * @param {String} style The name of style for which add button.
  56. */
  57. _addButton( style ) {
  58. const editor = this.editor;
  59. const t = editor.t;
  60. const commandName = AlignmentEditing.commandName( style );
  61. const command = editor.commands.get( commandName );
  62. editor.ui.componentFactory.add( commandName, locale => {
  63. const buttonView = new ButtonView( locale );
  64. buttonView.set( {
  65. label: t( upperFirst( style ) ),
  66. icon: icons.get( style ),
  67. tooltip: true
  68. } );
  69. // Bind button model to command.
  70. buttonView.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
  71. // Execute command.
  72. this.listenTo( buttonView, 'execute', () => editor.execute( commandName ) );
  73. return buttonView;
  74. } );
  75. }
  76. }