fontsizeui.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module font/fontsize/fontsizeui
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import Model from '@ckeditor/ckeditor5-ui/src/model';
  10. import Collection from '@ckeditor/ckeditor5-utils/src/collection';
  11. import {
  12. addListViewToDropdown,
  13. closeDropdownOnBlur,
  14. closeDropdownOnExecute,
  15. createButtonForDropdown,
  16. createDropdownView,
  17. focusDropdownContentsOnArrows
  18. } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
  19. import { normalizeOptions } from '../fontsize/utils';
  20. import fontSizeIcon from '../../theme/icons/font-size.svg';
  21. import '../../theme/fontsize.css';
  22. /**
  23. * @extends module:core/plugin~Plugin
  24. */
  25. export default class FontSizeUI extends Plugin {
  26. /**
  27. * @inheritDoc
  28. */
  29. init() {
  30. const editor = this.editor;
  31. const dropdownItems = new Collection();
  32. const options = this._getLocalizedOptions();
  33. const t = editor.t;
  34. const command = editor.commands.get( 'fontSize' );
  35. for ( const option of options ) {
  36. const itemModel = new Model( {
  37. commandName: 'fontSize',
  38. commandParam: option.model,
  39. label: option.title,
  40. class: 'ck-fontsize-option'
  41. } );
  42. if ( option.view && option.view.style ) {
  43. itemModel.set( 'style', `font-size:${ option.view.style[ 'font-size' ] }` );
  44. }
  45. if ( option.view && option.view.class ) {
  46. itemModel.set( 'class', `${ itemModel.class } ${ option.view.class }` );
  47. }
  48. itemModel.bind( 'isActive' ).to( command, 'value', value => value === option.model );
  49. // Add the option to the collection.
  50. dropdownItems.add( itemModel );
  51. }
  52. // Create dropdown model.
  53. const dropdownModel = new Model( {
  54. icon: fontSizeIcon,
  55. withText: false,
  56. items: dropdownItems,
  57. tooltip: t( 'Font Size' )
  58. } );
  59. dropdownModel.bind( 'isEnabled' ).to( command, 'isEnabled' );
  60. // Register UI component.
  61. editor.ui.componentFactory.add( 'fontSize', locale => {
  62. const buttonView = createButtonForDropdown( dropdownModel, locale );
  63. const dropdownView = createDropdownView( dropdownModel, buttonView, locale );
  64. addListViewToDropdown( dropdownView, dropdownModel, locale );
  65. closeDropdownOnBlur( dropdownView );
  66. closeDropdownOnExecute( dropdownView );
  67. focusDropdownContentsOnArrows( dropdownView );
  68. dropdownView.extendTemplate( {
  69. attributes: {
  70. class: [
  71. 'ck-font-size-dropdown'
  72. ]
  73. }
  74. } );
  75. // Execute command when an item from the dropdown is selected.
  76. this.listenTo( dropdownView, 'execute', evt => {
  77. editor.execute( evt.source.commandName, { value: evt.source.commandParam } );
  78. editor.editing.view.focus();
  79. } );
  80. return dropdownView;
  81. } );
  82. }
  83. /**
  84. * Returns options as defined in `config.fontSize.options` but processed to consider
  85. * editor localization, i.e. to display {@link module:font/fontsize~FontSizeOption}
  86. * in the correct language.
  87. *
  88. * Note: The reason behind this method is that there's no way to use {@link module:utils/locale~Locale#t}
  89. * when the user config is defined because the editor does not exist yet.
  90. *
  91. * @private
  92. * @returns {Array.<module:font/fontsize~FontSizeOption>}.
  93. */
  94. _getLocalizedOptions() {
  95. const editor = this.editor;
  96. const t = editor.t;
  97. const localizedTitles = {
  98. Normal: t( 'Normal' ),
  99. Tiny: t( 'Tiny' ),
  100. Small: t( 'Small' ),
  101. Big: t( 'Big' ),
  102. Huge: t( 'Huge' )
  103. };
  104. const options = normalizeOptions( editor.config.get( 'fontSize.options' ) );
  105. return options.map( option => {
  106. const title = localizedTitles[ option.title ];
  107. if ( title && title != option.title ) {
  108. // Clone the option to avoid altering the original `namedPresets` from `./utils.js`.
  109. option = Object.assign( {}, option, { title } );
  110. }
  111. return option;
  112. } );
  113. }
  114. }