alignmentui.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. /**
  2. * @license Copyright (c) 2003-2018, 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 Model from '@ckeditor/ckeditor5-ui/src/model';
  11. import createButtonDropdown from '@ckeditor/ckeditor5-ui/src/dropdown/button/createbuttondropdown';
  12. import { commandNameFromOptionName } from './alignmentcommand';
  13. import { isSupported } from './alignmentediting';
  14. import alignLeftIcon from '../theme/icons/align-left.svg';
  15. import alignRightIcon from '../theme/icons/align-right.svg';
  16. import alignCenterIcon from '../theme/icons/align-center.svg';
  17. import alignJustifyIcon from '../theme/icons/align-justify.svg';
  18. const icons = new Map( [
  19. [ 'left', alignLeftIcon ],
  20. [ 'right', alignRightIcon ],
  21. [ 'center', alignCenterIcon ],
  22. [ 'justify', alignJustifyIcon ]
  23. ] );
  24. /**
  25. * The default alignment UI plugin.
  26. *
  27. * It introduces the `'alignLeft'`, `'alignRight'`, `'alignCenter'` and `'alignJustify'` buttons
  28. * and the `'alignmentDropdown'` drop-down.
  29. *
  30. * @extends module:core/plugin~Plugin
  31. */
  32. export default class AlignmentUI extends Plugin {
  33. /**
  34. * Returns the localized option titles provided by the plugin.
  35. *
  36. * The following localized titles corresponding with
  37. * {@link module:alignment/alignment~AlignmentConfig#options} are available:
  38. *
  39. * * `'left'`,
  40. * * `'right'`,
  41. * * `'center'`,
  42. * * `'justify'`.
  43. *
  44. * @readonly
  45. * @type {Object.<String,String>}
  46. */
  47. get localizedOptionTitles() {
  48. const t = this.editor.t;
  49. return {
  50. 'left': t( 'Align left' ),
  51. 'right': t( 'Align right' ),
  52. 'center': t( 'Align center' ),
  53. 'justify': t( 'Justify' )
  54. };
  55. }
  56. /**
  57. * @inheritDoc
  58. */
  59. static get pluginName() {
  60. return 'AlignmentUI';
  61. }
  62. /**
  63. * @inheritDoc
  64. */
  65. init() {
  66. const editor = this.editor;
  67. const componentFactory = editor.ui.componentFactory;
  68. const t = editor.t;
  69. const options = editor.config.get( 'alignment.options' );
  70. options
  71. .filter( isSupported )
  72. .forEach( option => this._addButton( option ) );
  73. componentFactory.add( 'alignmentDropdown', locale => {
  74. const buttons = options.map( option => {
  75. return componentFactory.create( commandNameFromOptionName( option ) );
  76. } );
  77. const model = new Model( {
  78. label: t( 'Text alignment' ),
  79. defaultIcon: alignLeftIcon,
  80. withText: false,
  81. isVertical: true,
  82. tooltip: true,
  83. toolbarClassName: 'ck-editor-toolbar',
  84. buttons
  85. } );
  86. return createButtonDropdown( model, locale );
  87. } );
  88. }
  89. /**
  90. * Helper method for initializing the button and linking it with an appropriate command.
  91. *
  92. * @private
  93. * @param {String} option The name of the alignment option for which the button is added.
  94. */
  95. _addButton( option ) {
  96. const editor = this.editor;
  97. const commandName = commandNameFromOptionName( option );
  98. const command = editor.commands.get( commandName );
  99. editor.ui.componentFactory.add( commandName, locale => {
  100. const buttonView = new ButtonView( locale );
  101. buttonView.set( {
  102. label: this.localizedOptionTitles[ option ],
  103. icon: icons.get( option ),
  104. tooltip: true
  105. } );
  106. // Bind button model to command.
  107. buttonView.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
  108. // Execute command.
  109. this.listenTo( buttonView, 'execute', () => {
  110. editor.execute( commandName );
  111. editor.editing.view.focus();
  112. } );
  113. return buttonView;
  114. } );
  115. }
  116. }