8
0
Просмотр исходного кода

Update image style command, added manual test.

Szymon Kupś 9 лет назад
Родитель
Сommit
4b050b6157

+ 20 - 6
packages/ckeditor5-image/src/imagestyle/imagestyle.js

@@ -24,22 +24,36 @@ export default class ImageStyle extends Plugin {
 	 */
 	init() {
 		const editor = this.editor;
-		const t = editor.t;
+
+		// Get configuration.
+		const styles = editor.config.get( 'image.styles.options' );
+
+		for ( let name in styles ) {
+			this._createButton( name, styles[ name ] );
+		}
+	}
+
+	_createButton( name, style ) {
+		const editor = this.editor;
 		const command = editor.commands.get( 'imagestyle' );
+		const t = editor.t;
 
 		// Add bold button to feature components.
-		editor.ui.componentFactory.add( 'imagestyle', ( locale ) => {
+		editor.ui.componentFactory.add( name, ( locale ) => {
 			const view = new ButtonView( locale );
 
 			view.set( {
-				label: t( 'Image style' ),
-				icon: 'bold'
+				label: t( style.title ),
+				icon: style.icon
 			} );
 
-			view.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
+			view.bind( 'isEnabled' ).to( command, 'isEnabled' );
+			view.bind( 'isOn' ).to( command, 'value', ( commandValue ) => {
+				return commandValue == style.value;
+			} );
 
 			// // Execute command.
-			this.listenTo( view, 'execute', () => editor.execute( 'imagestyle' ) );
+			this.listenTo( view, 'execute', () => editor.execute( 'imagestyle', { value: style.value } ) );
 
 			return view;
 		} );

+ 51 - 18
packages/ckeditor5-image/src/imagestyle/imagestylecommand.js

@@ -8,39 +8,72 @@
  */
 
 import Command from '../../core/command/command.js';
-import ModelElement from '../../engine/model/element.js';
+import { isImage, getStyleByValue } from './utils.js';
 
 export default class ImageStyleCommand extends Command {
-	constructor( editor ) {
+	constructor( editor, styles ) {
 		super( editor );
 
 		this.set( 'value', false );
 
-		const document = this.editor.document;
-		this.listenTo( document.selection, 'change', () => {
-			const element = document.selection.getSelectedElement();
+		this.styles = styles;
 
-			if ( element && element.name === 'image' && element.hasAttribute( 'style' ) ) {
-				this.value = element.getAttribute( 'style' );
-			} else {
-				this.value = false;
-			}
-		} );
-
-		this.listenTo( document, 'changesDone', () => {
+		this.listenTo( editor.document, 'changesDone', () => {
+			this._updateValue();
 			this.refreshState();
 		} );
 	}
 
+	_updateValue() {
+		const doc = this.editor.document;
+		const element = doc.selection.getSelectedElement();
+
+		if ( isImage( element ) ) {
+			if ( element.hasAttribute( 'style' ) ) {
+				const value = element.getAttribute( 'style' );
+
+				// Check if value exists.
+				this.value = ( getStyleByValue( value, this.styles ) ? value : false );
+			} else {
+				// When there is no `style` attribute - set value to null.
+				this.value = null;
+			}
+		} else {
+			this.value = false;
+		}
+	}
+
 	_checkEnabled() {
-		const document = this.editor.document;
-		const element = document.selection.getSelectedElement();
+		const element = this.editor.document.selection.getSelectedElement();
 
-		return element && element.name === 'image';
+		return isImage( element );
 	}
 
-	_doExecute() {
-		console.log( 'execute image style command' );
+	_doExecute( options = {} ) {
+		// TODO: add batch to options.
+		const currentValue = this.value;
+		const newValue = options.value;
+
+		// Check if new value is valid.
+		if ( getStyleByValue( newValue, this.styles ) === undefined ) {
+			return;
+		}
+
+		// Stop if same value is already applied.
+		if ( currentValue == newValue ) {
+			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, 'style', newValue );
+		} );
 	}
 }
 

+ 9 - 21
packages/ckeditor5-image/src/imagestyle/imagestyleengine.js

@@ -10,7 +10,7 @@
 import Plugin from '../../core/plugin.js';
 import ImageStyleCommand from './imagestylecommand.js';
 import ImageEngine from '../imageengine.js';
-import ModelElement from '../../engine/model/element.js';
+import { isImage, getStyleByValue } from './utils.js';
 
 export default class ImageStyleEngine extends Plugin {
 	/**
@@ -31,10 +31,10 @@ export default class ImageStyleEngine extends Plugin {
 		editor.config.define( 'image.styles', {
 			options: {
 				// This option is equal to situation when no style is applied at all.
-				imageStyleFull: { title: 'Full size image', image: 'bold', value: null },
+				imageStyleFull: { title: 'Full size image', icon: 'bold', value: null },
 
 				// This represents side image.
-				imageStyleSide: { title: 'Side image', image: 'italic', value: 'side', className: 'image-style-side' }
+				imageStyleSide: { title: 'Side image', icon: 'italic', value: 'side', className: 'image-style-side' }
 			}
 		} );
 
@@ -60,7 +60,7 @@ export default class ImageStyleEngine extends Plugin {
 		}
 
 		// Register image style command.
-		editor.commands.set( 'imagestyle', new ImageStyleCommand( editor ) );
+		editor.commands.set( 'imagestyle', new ImageStyleCommand( editor, styles ) );
 	}
 }
 
@@ -111,13 +111,15 @@ function removeStyle( styles ) {
 
 		// Check if there is class name associated with given value.
 		const newStyle = getStyleByValue( data.attributeNewValue, styles );
+		const oldStyle = getStyleByValue( data.attributeOldValue, styles );
 
-		// Check if new style is allowed in configuration.
-		if ( !newStyle ) {
+		// Check if styles are allowed in configuration.
+		if ( !newStyle || !oldStyle ) {
 			return;
 		}
 
-		conversionApi.mapper.toViewElement( data.item ).viewElement.removeClass( data.attributeOldValue );
+		const viewElement = conversionApi.mapper.toViewElement( data.item );
+		viewElement.removeClass( oldStyle.className );
 	};
 }
 
@@ -149,17 +151,3 @@ function viewToModelImageStyle( style ) {
 		modelImageElement.setAttribute( 'style', style.value );
 	};
 }
-
-function isImage( modelElement ) {
-	return modelElement instanceof ModelElement && modelElement.name == 'image';
-}
-
-function getStyleByValue( value, styles ) {
-	for ( let key in styles ) {
-		const style = styles[ key ];
-
-		if ( style.value == value ) {
-			return style;
-		}
-	}
-}

+ 24 - 0
packages/ckeditor5-image/src/imagestyle/utils.js

@@ -0,0 +1,24 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module image/imagestyle/utils
+ */
+
+import ModelElement from '../../engine/model/element.js';
+
+export function isImage( modelElement ) {
+	return modelElement instanceof ModelElement && modelElement.name == 'image';
+}
+
+export function getStyleByValue( value, styles ) {
+	for ( let key in styles ) {
+		const style = styles[ key ];
+
+		if ( style.value === value ) {
+			return style;
+		}
+	}
+}

+ 14 - 0
packages/ckeditor5-image/tests/manual/imagestyle.html

@@ -0,0 +1,14 @@
+<head>
+	<link rel="stylesheet" href="/theme/ckeditor.css">
+</head>
+
+<div id="editor">
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
+	<figure class="image">
+		<img src="logo.png" alt="" />
+	</figure>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
+</div>

+ 27 - 0
packages/ckeditor5-image/tests/manual/imagestyle.js

@@ -0,0 +1,27 @@
+/**
+ * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* global document, console, window */
+
+import ClassicEditor from 'ckeditor5/editor-classic/classic.js';
+import EnterPlugin from 'ckeditor5/enter/enter.js';
+import TypingPlugin from 'ckeditor5/typing/typing.js';
+import ParagraphPlugin from 'ckeditor5/paragraph/paragraph.js';
+import HeadingPlugin from 'ckeditor5/heading/heading.js';
+import ImagePlugin from 'ckeditor5/image/image.js';
+import UndoPlugin from 'ckeditor5/undo/undo.js';
+import ClipboardPlugin from 'ckeditor5/clipboard/clipboard.js';
+import ImageStyle from 'ckeditor5/image/imagestyle/imagestyle.js';
+
+ClassicEditor.create( document.querySelector( '#editor' ), {
+	plugins: [ EnterPlugin, TypingPlugin, ParagraphPlugin, HeadingPlugin, ImagePlugin, UndoPlugin, ClipboardPlugin, ImageStyle ],
+	toolbar: [ 'headings', 'undo', 'redo', 'imageStyleFull', 'imageStyleSide' ]
+} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 1 - 0
packages/ckeditor5-image/tests/manual/imagestyle.md

@@ -0,0 +1 @@
+## ImageStyle feature

+ 8 - 0
packages/ckeditor5-image/theme/theme.scss

@@ -22,4 +22,12 @@
 // Image widget's styles.
 .ck-widget.image {
 	text-align: center;
+	clear: both;
+
+	&.image-style-side {
+		display: inline-block;
+		float: right;
+		margin-left: 0.8em;
+	}
 }
+