| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293 |
- /**
- * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md.
- */
- /**
- * @module alignment/alignmentui
- */
- import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
- import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
- import alignLeftIcon from '../theme/icons/align-left.svg';
- import alignRightIcon from '../theme/icons/align-right.svg';
- import alignCenterIcon from '../theme/icons/align-center.svg';
- import alignJustifyIcon from '../theme/icons/align-justify.svg';
- import AlignmentEditing, { isSupported } from './alignmentediting';
- import upperFirst from '@ckeditor/ckeditor5-utils/src/lib/lodash/upperFirst';
- const icons = new Map( [
- [ 'left', alignLeftIcon ],
- [ 'right', alignRightIcon ],
- [ 'center', alignCenterIcon ],
- [ 'justify', alignJustifyIcon ]
- ] );
- /**
- * The default Alignment UI plugin.
- *
- * It introduces the `'alignLeft'`, `'alignRight'`, `'alignCenter'` and `'alignJustify'` buttons.
- *
- * @extends module:core/plugin~Plugin
- */
- export default class AlignmentUI extends Plugin {
- /**
- * @inheritDoc
- */
- static get requires() {
- return [ AlignmentEditing ];
- }
- /**
- * @inheritDoc
- */
- static get pluginName() {
- return 'AlignmentUI';
- }
- /**
- * @inheritDoc
- */
- init() {
- const styles = this.editor.config.get( 'alignment.styles' );
- styles
- .filter( isSupported )
- .forEach( style => this._addButton( style ) );
- }
- /**
- * Helper method for initializing a button and linking it with an appropriate command.
- *
- * @private
- * @param {String} style The name of style for which add button.
- */
- _addButton( style ) {
- const editor = this.editor;
- const t = editor.t;
- const commandName = AlignmentEditing.commandName( style );
- const command = editor.commands.get( commandName );
- editor.ui.componentFactory.add( commandName, locale => {
- const buttonView = new ButtonView( locale );
- buttonView.set( {
- label: t( upperFirst( style ) ),
- icon: icons.get( style ),
- tooltip: true
- } );
- // Bind button model to command.
- buttonView.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
- // Execute command.
- this.listenTo( buttonView, 'execute', () => editor.execute( commandName ) );
- return buttonView;
- } );
- }
- }
|