imagetoolbar.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module image/imagetoolbar
  7. */
  8. import Template from '@ckeditor/ckeditor5-ui/src/template';
  9. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  10. import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
  11. import { isImageWidget } from './image/utils';
  12. import ImageBalloonPanel from './image/ui/imageballoonpanelview';
  13. /**
  14. * Image toolbar class. Creates image toolbar placed inside balloon panel that is showed when image widget is selected.
  15. * Toolbar components are created using editor's {@link module:ui/componentfactory~ComponentFactory ComponentFactory}
  16. * based on {@link module:core/editor/editor~Editor#config configuration} stored under `image.toolbar`.
  17. * Other plugins can add new components to the default toolbar configuration by pushing them to `image.defaultToolbar`
  18. * configuration. Default configuration is used when `image.toolbar` config is not present.
  19. *
  20. * @extends module:core/plugin~Plugin
  21. */
  22. export default class ImageToolbar extends Plugin {
  23. /**
  24. * @inheritDoc
  25. */
  26. static get pluginName() {
  27. return 'image/imagetoolbar';
  28. }
  29. /**
  30. * @inheritDoc
  31. */
  32. constructor( editor ) {
  33. super( editor );
  34. editor.config.set( 'image.defaultToolbar', [] );
  35. /**
  36. * When set to `true`, toolbar will be repositioned and showed on each render event and focus change.
  37. * Set to `false` to temporary disable the image toolbar.
  38. *
  39. * @member {Boolean}
  40. */
  41. this.isEnabled = true;
  42. }
  43. /**
  44. * @inheritDoc
  45. */
  46. afterInit() {
  47. const editor = this.editor;
  48. const toolbarConfig = editor.config.get( 'image.toolbar' ) || editor.config.get( 'image.defaultToolbar' );
  49. // Don't add the toolbar if there is no configuration.
  50. if ( !toolbarConfig.length ) {
  51. return;
  52. }
  53. const panel = this._panel = new ImageBalloonPanel( editor );
  54. const promises = [];
  55. const toolbar = new ToolbarView();
  56. // Add CSS class to the panel.
  57. Template.extend( panel.template, {
  58. attributes: {
  59. class: [
  60. 'ck-toolbar__container'
  61. ]
  62. }
  63. } );
  64. // Add toolbar to balloon panel.
  65. promises.push( panel.content.add( toolbar ) );
  66. // Add buttons to the toolbar.
  67. promises.push( toolbar.fillFromConfig( toolbarConfig, editor.ui.componentFactory ) );
  68. // Add balloon panel to editor's UI.
  69. promises.push( editor.ui.view.body.add( panel ) );
  70. // Show balloon panel each time image widget is selected.
  71. this.listenTo( this.editor.editing.view, 'render', () => {
  72. if ( this.isEnabled ) {
  73. this.show();
  74. }
  75. }, { priority: 'low' } );
  76. // There is no render method after focus is back in editor, we need to check if balloon panel should be visible.
  77. this.listenTo( editor.ui.focusTracker, 'change:isFocused', ( evt, name, is, was ) => {
  78. if ( !was && is && this.isEnabled ) {
  79. this.show();
  80. }
  81. } );
  82. return Promise.all( promises );
  83. }
  84. /**
  85. * Shows the toolbar.
  86. */
  87. show() {
  88. const selectedElement = this.editor.editing.view.selection.getSelectedElement();
  89. if ( selectedElement && isImageWidget( selectedElement ) ) {
  90. this._panel.attach();
  91. }
  92. }
  93. /**
  94. * Hides the toolbar.
  95. */
  96. hide() {
  97. this._panel.detach();
  98. }
  99. }