restrictededitingmodeui.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /**
  6. * @module restricted-editing/restrictededitingmodeui
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import { createDropdown, addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
  10. import Model from '@ckeditor/ckeditor5-ui/src/model';
  11. import lockIcon from '../theme/icons/contentlock.svg';
  12. import Collection from '@ckeditor/ckeditor5-utils/src/collection';
  13. /**
  14. * The Restricted Editing Mode UI feature.
  15. *
  16. * It introduces the `'restrictedEditing'` dropdown that offers tools to navigate exceptions across
  17. * the document.
  18. *
  19. * @extends module:core/plugin~Plugin
  20. */
  21. export default class RestrictedEditingModeUI extends Plugin {
  22. /**
  23. * @inheritDoc
  24. */
  25. static get pluginName() {
  26. return 'RestrictedEditingModeUI';
  27. }
  28. /**
  29. * @inheritDoc
  30. */
  31. init() {
  32. const editor = this.editor;
  33. const t = editor.t;
  34. editor.ui.componentFactory.add( 'restrictedEditing', locale => {
  35. const dropdownView = createDropdown( locale );
  36. const listItems = new Collection();
  37. listItems.add( this._getButtonDefinition(
  38. 'goToPreviousRestrictedEditingException',
  39. t( 'Previous editable region' ),
  40. 'Shift+Tab'
  41. ) );
  42. listItems.add( this._getButtonDefinition(
  43. 'goToNextRestrictedEditingException',
  44. t( 'Next editable region' ),
  45. 'Tab'
  46. ) );
  47. addListToDropdown( dropdownView, listItems );
  48. dropdownView.buttonView.set( {
  49. label: t( 'Navigate editable regions' ),
  50. icon: lockIcon,
  51. tooltip: true,
  52. isEnabled: true,
  53. isOn: false
  54. } );
  55. this.listenTo( dropdownView, 'execute', evt => {
  56. editor.execute( evt.source._commandName );
  57. editor.editing.view.focus();
  58. } );
  59. return dropdownView;
  60. } );
  61. }
  62. /**
  63. * Returns a definition of the navigation button to be used in the dropdown.
  64. *
  65. * @private
  66. * @param {String} commandName Name of the command the button represents.
  67. * @param {String} label Translated label of the button.
  68. * @param {String} keystroke Keystroke of the button.
  69. * @returns {module:ui/dropdown/utils~ListDropdownItemDefinition}
  70. */
  71. _getButtonDefinition( commandName, label, keystroke ) {
  72. const editor = this.editor;
  73. const command = editor.commands.get( commandName );
  74. const definition = {
  75. type: 'button',
  76. model: new Model( {
  77. label,
  78. withText: true,
  79. keystroke,
  80. withKeystroke: true,
  81. _commandName: commandName
  82. } )
  83. };
  84. definition.model.bind( 'isEnabled' ).to( command, 'isEnabled' );
  85. return definition;
  86. }
  87. }