ImageStyle

src/imagestyle/converters.js

@@ -0,0 +1,98 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module image/imagestyle/converters
+ */
+
+import { isImage } from '../utils';
+
+/**
+ * Returns converter for `imageStyle` attribute. It can be used for adding, changing and removing the attribute.
+ *
+ * @param {Object} styles Object containing available styles. See {@link module:image/imagestyle/imagestyleengine~ImageStyleFormat}
+ * for more details.
+ * @returns {Function} Model to view attribute converter.
+ */
+export function modelToViewSetStyle( styles ) {
+	return ( evt, data, consumable, conversionApi ) => {
+		const eventType = evt.name.split( ':' )[ 0 ];
+		const consumableType = eventType + ':imageStyle';
+
+		if ( !consumable.test( data.item, consumableType ) ) {
+			return;
+		}
+
+		// Check if there is class name associated with given value.
+		const newStyle = getStyleByValue( data.attributeNewValue, styles );
+		const oldStyle = getStyleByValue( data.attributeOldValue, styles );
+		const viewElement = conversionApi.mapper.toViewElement( data.item );
+
+		if ( eventType == 'changeAttribute' || eventType == 'removeAttribute' ) {
+			if ( !oldStyle ) {
+				return;
+			}
+
+			viewElement.removeClass( oldStyle.className );
+		}
+
+		if ( eventType == 'addAttribute' || eventType == 'changeAttribute' ) {
+			if ( !newStyle ) {
+				return;
+			}
+
+			viewElement.addClass( newStyle.className );
+		}
+
+		consumable.consume( data.item, consumableType );
+	};
+}
+
+/**
+ * Returns view to model converter converting image style CSS class to proper value in the model.
+ *
+ * @param {module:image/imagestyle/imagestyleengine~ImageStyleFormat} style Style for which converter is created.
+ * @returns {Function} View to model converter.
+ */
+export function viewToModelImageStyle( style ) {
+	return ( evt, data, consumable, conversionApi ) => {
+		const viewFigureElement = data.input;
+		const modelImageElement = data.output;
+
+		// *** Step 1: Validate conversion.
+		// Check if view element has proper class to consume.
+		if ( !consumable.test( viewFigureElement, { class: style.className } ) ) {
+			return;
+		}
+
+		// Check if figure is converted to image.
+		if ( !isImage( modelImageElement ) ) {
+			return;
+		}
+
+		// Check if image element can be placed in current context wit additional attribute.
+		const attributes = [ ...modelImageElement.getAttributeKeys(), 'imageStyle' ];
+
+		if ( !conversionApi.schema.check( { name: 'image', inside: data.context, attributes } ) ) {
+			return;
+		}
+
+		// *** Step2: Convert to model.
+		consumable.consume( viewFigureElement, { class: style.className } );
+		modelImageElement.setAttribute( 'imageStyle', style.value );
+	};
+}
+
+// Returns style with given `value` from array of styles.
+// @param {String} value
+// @param {Array.<module:image/imagestyle/imagestyleengine~ImageStyleFormat> } styles
+// @return {module:image/imagestyle/imagestyleengine~ImageStyleFormat|undefined}
+function getStyleByValue( value, styles ) {
+	for ( let style of styles ) {
+		if ( style.value === value ) {
+			return style;
+		}
+	}
+}

src/imagestyle/imagestyle.js

@@ -0,0 +1,74 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module image/imagestyle/imagestyle
+ */
+
+import Plugin from 'ckeditor5-core/src/plugin';
+import ImageStyleEngine from './imagestyleengine';
+import ButtonView from 'ckeditor5-ui/src/button/buttonview';
+
+/**
+ * The image style plugin.
+ *
+ * Uses {@link module:image/imagestyle/imagestyleengine~ImageStyleEngine}.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class ImageStyle extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ ImageStyleEngine ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const styles = this.editor.config.get( 'image.styles' );
+
+		for ( let style of styles ) {
+			this._createButton( style );
+		}
+
+		// Push buttons to default image toolbar if one exists.
+		const defaultImageToolbarConfig = this.editor.config.get( 'image.defaultToolbar' );
+
+		if ( defaultImageToolbarConfig ) {
+			styles.forEach( style => defaultImageToolbarConfig.push( style.name ) );
+		}
+	}
+
+	/**
+	 * Creates button for each style and stores it in editor's {@link module:ui/componentfactory~ComponentFactory ComponentFactory}.
+	 *
+	 * @private
+	 * @param {module:image/imagestyle/imagestyleengine~ImageStyleFormat} style
+	 */
+	_createButton( style ) {
+		const editor = this.editor;
+		const command = editor.commands.get( style.name );
+
+		editor.ui.componentFactory.add( style.name, ( locale ) => {
+			const view = new ButtonView( locale );
+
+			view.set( {
+				label: style.title,
+				icon: style.icon,
+				tooltip: true
+			} );
+
+			view.bind( 'isEnabled' ).to( command, 'isEnabled' );
+			view.bind( 'isOn' ).to( command, 'value' );
+
+			this.listenTo( view, 'execute', () => editor.execute( style.name ) );
+
+			return view;
+		} );
+	}
+}

src/imagestyle/imagestylecommand.js

@@ -0,0 +1,109 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module image/imagestyle/imagestylecommand
+ */
+
+import Command from 'ckeditor5-core/src/command/command';
+import { isImage } from '../utils';
+
+/**
+ * The image style command. It is used to apply different image styles.
+ *
+ * @extends module:core/command/command~Command
+ */
+export default class ImageStyleCommand extends Command {
+	/**
+	 * Creates instance of the image style command. Each command instance is handling one style.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor Editor instance.
+	 * @param {module:image/imagestyle/imagestyleengine~ImageStyleFormat} styles Style to apply by this command.
+	 */
+	constructor( editor, style ) {
+		super( editor );
+
+		/**
+		 * The current command value - `true` if style handled by the command is applied on currently selected image,
+		 * `false` otherwise.
+		 *
+		 * @readonly
+		 * @observable
+		 * @member {Boolean} #value
+		 */
+		this.set( 'value', false );
+
+		/**
+		 * Style handled by this command.
+		 *
+		 * @readonly
+		 * @member {module:image/imagestyle/imagestyleengine~ImageStyleFormat} #style
+		 */
+		this.style = style;
+
+		// Update current value and refresh state each time something change in model document.
+		this.listenTo( editor.document, 'changesDone', () => {
+			this._updateValue();
+			this.refreshState();
+		} );
+	}
+
+	/**
+	 * Updates command's value.
+	 *
+	 * @private
+	 */
+	_updateValue() {
+		const doc = this.editor.document;
+		const element = doc.selection.getSelectedElement();
+
+		if ( !element ) {
+			this.value = false;
+
+			return;
+		}
+
+		if ( this.style.value === null ) {
+			this.value = !element.hasAttribute( 'imageStyle' );
+		} else {
+			this.value = ( element.getAttribute( 'imageStyle' ) == this.style.value );
+		}
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	_checkEnabled() {
+		const element = this.editor.document.selection.getSelectedElement();
+
+		return isImage( element );
+	}
+
+	/**
+	 * Executes command.
+	 *
+	 * @protected
+	 * @param {Object} options
+	 * @param {module:engine/model/batch~Batch} [options.batch] Batch to collect all the change steps. New batch will be
+	 * created if this option is not set.
+	 */
+	_doExecute( options = {} ) {
+		// Stop if style is already applied.
+		if ( this.value ) {
+			return;
+		}
+
+		const editor = this.editor;
+		const doc = editor.document;
+		const selection = doc.selection;
+		const imageElement = selection.getSelectedElement();
+
+		doc.enqueueChanges( () => {
+			const batch = options.batch || doc.batch();
+
+			batch.setAttribute( imageElement, 'imageStyle', this.style.value );
+		} );
+	}
+}

src/imagestyle/imagestyleengine.js

@@ -0,0 +1,102 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module image/imagestyle/imagestyleengine
+ */
+
+import Plugin from 'ckeditor5-core/src/plugin';
+import ImageStyleCommand from './imagestylecommand';
+import ImageEngine from '../imageengine';
+import { viewToModelImageStyle, modelToViewSetStyle } from './converters';
+import fullSizeIcon from 'ckeditor5-core/theme/icons/object-center.svg';
+import sideIcon from 'ckeditor5-core/theme/icons/object-right.svg';
+
+/**
+ * The image style engine plugin. Sets default configuration, creates converters and registers
+ * {@link module:image/imagestyle/imagestylecommand~ImageStyleCommand ImageStyleCommand}.
+ *
+ * @extends {module:core/plugin~Plugin}
+ */
+export default class ImageStyleEngine extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ ImageEngine ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		const t = editor.t;
+		const doc = editor.document;
+		const schema = doc.schema;
+		const data = editor.data;
+		const editing = editor.editing;
+
+		// Define default configuration.
+		editor.config.define( 'image.styles', [
+			// This option is equal to situation when no style is applied.
+			{ name: 'imageStyleFull', title: t( 'Full size image' ), icon: fullSizeIcon, value: null },
+
+			// This represents side image.
+			{ name: 'imageStyleSide', title: t( 'Side image' ), icon: sideIcon, value: 'side', className: 'image-style-side' }
+		] );
+
+		// Get configuration.
+		const styles = editor.config.get( 'image.styles' );
+
+		// Allow imageStyle attribute in image.
+		// We could call it 'style' but https://github.com/ckeditor/ckeditor5-engine/issues/559.
+		schema.allow( { name: 'image', attributes: 'imageStyle', inside: '$root' } );
+
+		// Converters for imageStyle attribute from model to view.
+		const modelToViewConverter = modelToViewSetStyle( styles );
+		editing.modelToView.on( 'addAttribute:imageStyle:image', modelToViewConverter );
+		data.modelToView.on( 'addAttribute:imageStyle:image', modelToViewConverter );
+		editing.modelToView.on( 'changeAttribute:imageStyle:image', modelToViewConverter );
+		data.modelToView.on( 'changeAttribute:imageStyle:image', modelToViewConverter );
+		editing.modelToView.on( 'removeAttribute:imageStyle:image', modelToViewConverter );
+		data.modelToView.on( 'removeAttribute:imageStyle:image', modelToViewConverter );
+
+		for ( let style of styles ) {
+			// Converter for figure element from view to model.
+			// Create converter only for non-null values.
+			if ( style.value !== null ) {
+				data.viewToModel.on( 'element:figure', viewToModelImageStyle( style ), { priority: 'low' } );
+			}
+
+			// Register separate command for each style.
+			editor.commands.set( style.name, new ImageStyleCommand( editor, style ) );
+		}
+	}
+}
+
+/**
+ * Image style format descriptor.
+ *
+ *	import fullIcon from 'path/to/icon.svg`;
+ *
+ *	const imageStyleFormat = {
+ *		name: 'fullSizeImage',
+ *		value: 'full',
+ *		icon: fullIcon,
+ *		title: `Full size image`,
+ *		class: `image-full-size`
+ *	}
+ *
+ * @typedef {Object} module:image/imagestyle/imagestyleengine~ImageStyleFormat
+ * @property {String} name Name of the style. It will be used to:
+ * * register {@link module:core/command/command~Command command} which will apply this style,
+ * * store style's button in editor's {@link module:ui/componentfactory~ComponentFactory ComponentFactory}.
+ * @property {String} value Value used to store this style in model attribute.
+ * When value is `null` style will be used as default one. Default style does not apply any CSS class to the view element.
+ * @property {String} icon SVG icon representation to use when creating style's button.
+ * @property {String} title Style's title.
+ * @property {String} className CSS class used to represent style in view.
+ */