alignmentui.js 3.5 KB

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