| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119 |
- /**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
- /**
- * @module image/imagetoolbar
- */
- import Template from '@ckeditor/ckeditor5-ui/src/template';
- import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
- import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
- import { isImageWidget } from './image/utils';
- import ImageBalloonPanel from './image/ui/imageballoonpanelview';
- /**
- * Image toolbar class. Creates image toolbar placed inside balloon panel that is showed when image widget is selected.
- * Toolbar components are created using editor's {@link module:ui/componentfactory~ComponentFactory ComponentFactory}
- * based on {@link module:core/editor/editor~Editor#config configuration} stored under `image.toolbar`.
- *
- * @extends module:core/plugin~Plugin
- */
- export default class ImageToolbar extends Plugin {
- /**
- * @inheritDoc
- */
- static get pluginName() {
- return 'ImageToolbar';
- }
- /**
- * @inheritDoc
- */
- constructor( editor ) {
- super( editor );
- /**
- * When set to `true`, toolbar will be repositioned and showed on each render event and focus change.
- * Set to `false` to temporary disable the image toolbar.
- *
- * @member {Boolean}
- */
- this.isEnabled = true;
- }
- /**
- * @inheritDoc
- */
- afterInit() {
- const editor = this.editor;
- const toolbarConfig = editor.config.get( 'image.toolbar' );
- // Don't add the toolbar if there is no configuration.
- if ( !toolbarConfig || !toolbarConfig.length ) {
- return;
- }
- const panel = this._panel = new ImageBalloonPanel( editor );
- const toolbar = new ToolbarView();
- // Add CSS class to the toolbar.
- Template.extend( toolbar.template, {
- attributes: {
- class: 'ck-editor-toolbar'
- }
- } );
- // Add CSS class to the panel.
- Template.extend( panel.template, {
- attributes: {
- class: [
- 'ck-toolbar-container',
- 'ck-editor-toolbar-container'
- ]
- }
- } );
- // Add toolbar to balloon panel.
- panel.content.add( toolbar );
- // Add buttons to the toolbar.
- toolbar.fillFromConfig( toolbarConfig, editor.ui.componentFactory );
- // Add balloon panel to editor's UI.
- editor.ui.view.body.add( panel );
- // Show balloon panel each time image widget is selected.
- this.listenTo( this.editor.editing.view, 'render', () => {
- if ( this.isEnabled ) {
- this.show();
- }
- }, { priority: 'low' } );
- // There is no render method after focus is back in editor, we need to check if balloon panel should be visible.
- this.listenTo( editor.ui.focusTracker, 'change:isFocused', ( evt, name, is, was ) => {
- if ( !was && is && this.isEnabled ) {
- this.show();
- }
- } );
- }
- /**
- * Shows the toolbar.
- */
- show() {
- const selectedElement = this.editor.editing.view.selection.getSelectedElement();
- if ( selectedElement && isImageWidget( selectedElement ) ) {
- this._panel.attach();
- }
- }
- /**
- * Hides the toolbar.
- */
- hide() {
- this._panel.detach();
- }
- }
|