imagetoolbar.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  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 './utils';
  12. import ImageBalloonPanel from './ui/imageballoonpanel';
  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. /**
  31. * @inheritDoc
  32. */
  33. afterInit() {
  34. const editor = this.editor;
  35. const toolbarConfig = editor.config.get( 'image.toolbar' ) || editor.config.get( 'image.defaultToolbar' );
  36. // Don't add the toolbar if there is no configuration.
  37. if ( !toolbarConfig.length ) {
  38. return;
  39. }
  40. const panel = this._panel = new ImageBalloonPanel( editor );
  41. const promises = [];
  42. const toolbar = new ToolbarView();
  43. // Add CSS class to the panel.
  44. Template.extend( panel.template, {
  45. attributes: {
  46. class: [
  47. 'ck-toolbar__container'
  48. ]
  49. }
  50. } );
  51. // Add toolbar to balloon panel.
  52. promises.push( panel.content.add( toolbar ) );
  53. // Add buttons to the toolbar.
  54. for ( let name of toolbarConfig ) {
  55. promises.push( toolbar.items.add( editor.ui.componentFactory.create( name ) ) );
  56. }
  57. // Add balloon panel to editor's UI.
  58. promises.push( editor.ui.view.body.add( panel ) );
  59. // Show balloon panel each time image widget is selected.
  60. this.listenTo( this.editor.editing.view, 'render', () => {
  61. this.show();
  62. }, { priority: 'low' } );
  63. // There is no render method after focus is back in editor, we need to check if balloon panel should be visible.
  64. this.listenTo( editor.ui.focusTracker, 'change:isFocused', ( evt, name, is, was ) => {
  65. if ( !was && is ) {
  66. this.show();
  67. }
  68. } );
  69. return Promise.all( promises );
  70. }
  71. /**
  72. * Shows the toolbar.
  73. */
  74. show() {
  75. const selectedElement = this.editor.editing.view.selection.getSelectedElement();
  76. if ( selectedElement && isImageWidget( selectedElement ) ) {
  77. this._panel.attach();
  78. }
  79. }
  80. /**
  81. * Hides the toolbar.
  82. */
  83. hide() {
  84. this._panel.detach();
  85. }
  86. }