8
0

specialcharactersnavigationview.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  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 special-characters/ui/specialcharactersnavigationview
  7. */
  8. import View from '@ckeditor/ckeditor5-ui/src/view';
  9. import Collection from '@ckeditor/ckeditor5-utils/src/collection';
  10. import Model from '@ckeditor/ckeditor5-ui/src/model';
  11. import LabelView from '@ckeditor/ckeditor5-ui/src/label/labelview';
  12. import {
  13. createDropdown,
  14. addListToDropdown
  15. } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
  16. /**
  17. * A class representing the navigation part of the special characters UI. It is responsible
  18. * for describing the feature and allowing the user to select a particular character group.
  19. *
  20. * @extends module:ui/view~View
  21. */
  22. export default class SpecialCharactersNavigationView extends View {
  23. /**
  24. * Creates an instance of the {@link module:special-characters/ui/specialcharactersnavigationview~SpecialCharactersNavigationView}
  25. * class.
  26. *
  27. * @param {module:utils/locale~Locale} locale The localization services instance.
  28. * @param {Iterable.<String>} groupNames Names of the character groups.
  29. */
  30. constructor( locale, groupNames ) {
  31. super( locale );
  32. const t = locale.t;
  33. /**
  34. * Label of the navigation view describing its purpose.
  35. *
  36. * @member {module:ui/label/labelview~LabelView}
  37. */
  38. this.labelView = new LabelView( locale );
  39. this.labelView.text = t( 'Special characters' );
  40. /**
  41. * A dropdown that allows selecting a group of special characters to be displayed.
  42. *
  43. * @member {module:ui/dropdown/dropdownview~DropdownView}
  44. */
  45. this.groupDropdownView = this._createGroupDropdown( groupNames );
  46. this.setTemplate( {
  47. tag: 'div',
  48. attributes: {
  49. class: [
  50. 'ck',
  51. 'ck-special-characters-navigation'
  52. ]
  53. },
  54. children: [
  55. this.labelView,
  56. this.groupDropdownView
  57. ]
  58. } );
  59. }
  60. /**
  61. * Returns a name of the character group currently selected in the {@link #groupDropdownView}.
  62. *
  63. * @returns {String}
  64. */
  65. get currentGroupName() {
  66. return this.groupDropdownView.value;
  67. }
  68. /**
  69. * Returns a dropdown that allows selecting character groups.
  70. *
  71. * @private
  72. * @param {Iterable.<String>} groupNames Names of the character groups.
  73. * @returns {module:ui/dropdown/dropdownview~DropdownView}
  74. */
  75. _createGroupDropdown( groupNames ) {
  76. const locale = this.locale;
  77. const t = locale.t;
  78. const dropdown = createDropdown( locale );
  79. const groupDefinitions = this._getCharacterGroupListItemDefinitions( dropdown, groupNames );
  80. dropdown.set( 'value', groupDefinitions.first.model.label );
  81. dropdown.buttonView.bind( 'label' ).to( dropdown, 'value' );
  82. dropdown.buttonView.set( {
  83. isOn: false,
  84. withText: true,
  85. tooltip: t( 'Character categories' )
  86. } );
  87. dropdown.on( 'execute', evt => {
  88. dropdown.value = evt.source.label;
  89. } );
  90. dropdown.delegate( 'execute' ).to( this );
  91. addListToDropdown( dropdown, groupDefinitions );
  92. return dropdown;
  93. }
  94. /**
  95. * Returns list item definitions to be used in the character group dropdown
  96. * representing specific character groups.
  97. *
  98. * @private
  99. * @param {module:ui/dropdown/dropdownview~DropdownView} dropdown
  100. * @param {Iterable.<String>} groupNames Names of the character groups.
  101. * @returns {Iterable.<module:ui/dropdown/utils~ListDropdownItemDefinition>}
  102. */
  103. _getCharacterGroupListItemDefinitions( dropdown, groupNames ) {
  104. const groupDefs = new Collection();
  105. for ( const name of groupNames ) {
  106. const definition = {
  107. type: 'button',
  108. model: new Model( {
  109. label: name,
  110. withText: true
  111. } )
  112. };
  113. definition.model.bind( 'isOn' ).to( dropdown, 'value', value => {
  114. return value === definition.model.label;
  115. } );
  116. groupDefs.add( definition );
  117. }
  118. return groupDefs;
  119. }
  120. }