8
0

imagetoolbar.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  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. constructor( editor ) {
  27. super( editor );
  28. editor.config.set( 'image.defaultToolbar', [] );
  29. /**
  30. * When set to `true`, toolbar will be repositioned and showed on each render event and focus change.
  31. * Set to `false` to temporary disable the image toolbar.
  32. *
  33. * @member {Boolean}
  34. */
  35. this.isEnabled = true;
  36. }
  37. /**
  38. * @inheritDoc
  39. */
  40. afterInit() {
  41. const editor = this.editor;
  42. const toolbarConfig = editor.config.get( 'image.toolbar' ) || editor.config.get( 'image.defaultToolbar' );
  43. // Don't add the toolbar if there is no configuration.
  44. if ( !toolbarConfig.length ) {
  45. return;
  46. }
  47. const panel = this._panel = new ImageBalloonPanel( editor );
  48. const promises = [];
  49. const toolbar = new ToolbarView();
  50. // Add CSS class to the panel.
  51. Template.extend( panel.template, {
  52. attributes: {
  53. class: [
  54. 'ck-toolbar__container'
  55. ]
  56. }
  57. } );
  58. // Add toolbar to balloon panel.
  59. promises.push( panel.content.add( toolbar ) );
  60. // Add buttons to the toolbar.
  61. promises.push( toolbar.fillFromConfig( toolbarConfig, editor.ui.componentFactory ) );
  62. // Add balloon panel to editor's UI.
  63. promises.push( editor.ui.view.body.add( panel ) );
  64. // Show balloon panel each time image widget is selected.
  65. this.listenTo( this.editor.editing.view, 'render', () => {
  66. if ( this.isEnabled ) {
  67. this.show();
  68. }
  69. }, { priority: 'low' } );
  70. // There is no render method after focus is back in editor, we need to check if balloon panel should be visible.
  71. this.listenTo( editor.ui.focusTracker, 'change:isFocused', ( evt, name, is, was ) => {
  72. if ( !was && is && this.isEnabled ) {
  73. this.show();
  74. }
  75. } );
  76. return Promise.all( promises );
  77. }
  78. /**
  79. * Shows the toolbar.
  80. */
  81. show() {
  82. const selectedElement = this.editor.editing.view.selection.getSelectedElement();
  83. if ( selectedElement && isImageWidget( selectedElement ) ) {
  84. this._panel.attach();
  85. }
  86. }
  87. /**
  88. * Hides the toolbar.
  89. */
  90. hide() {
  91. this._panel.detach();
  92. }
  93. }