Przeglądaj źródła

Changed ImageStyle configuration object to array.

Szymon Kupś 9 lat temu
rodzic
commit
72b8a0a3bf

+ 4 - 4
packages/ckeditor5-image/src/imagestyle/imagestyle.js

@@ -28,18 +28,18 @@ export default class ImageStyle extends Plugin {
 		// Get configuration.
 		const styles = editor.config.get( 'image.styles' );
 
-		for ( let name in styles ) {
-			this._createButton( name, styles[ name ] );
+		for ( let style of styles ) {
+			this._createButton( style );
 		}
 	}
 
-	_createButton( name, style ) {
+	_createButton( 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( name, ( locale ) => {
+		editor.ui.componentFactory.add( style.name, ( locale ) => {
 			const view = new ButtonView( locale );
 
 			view.set( {

+ 2 - 4
packages/ckeditor5-image/src/imagestyle/imagestylecommand.js

@@ -20,12 +20,10 @@ export default class ImageStyleCommand extends Command {
 	 * Creates instance of the command.
 	 *
 	 * @param {module:core/editor/editor~Editor} editor Editor instance.
-	 * @param {Object} styles Allowed styles. See {@link module:image/imagestyle/imagestyleengine~ImageStyleFormat
-	 * ImageStyleFormat} for more information.
+	 * @param {Array.<module:image/imagestyle/imagestyleengine~ImageStyleFormat>} styles Allowed styles.
 	 */
 	constructor( editor, styles ) {
 		super( editor );
-
 		/**
 		 * The current style value.
 		 *
@@ -39,7 +37,7 @@ export default class ImageStyleCommand extends Command {
 		 * Image styles uses by this command.
 		 *
 		 * @readonly
-		 * @member {Object} Allowed image styles. See {@link module:image/imagestyle/imagestyleengine~ImageStyleFormat}.
+		 * @member {Array.<module:image/imagestyle/imagestyleengine~ImageStyleFormat>} Allowed image styles.
 		 */
 		this.styles = styles;
 

+ 7 - 7
packages/ckeditor5-image/src/imagestyle/imagestyleengine.js

@@ -37,13 +37,13 @@ export default class ImageStyleEngine extends Plugin {
 		const editing = editor.editing;
 
 		// Define default configuration.
-		editor.config.define( 'image.styles', {
+		editor.config.define( 'image.styles', [
 			// This option is equal to situation when no style is applied at all.
-			imageStyleFull: { title: 'Full size image', icon: 'object-center', value: null },
+			{ name: 'imageStyleFull', title: 'Full size image', icon: 'object-center', value: null },
 
 			// This represents side image.
-			imageStyleSide: { title: 'Side image', icon: 'object-right', value: 'side', className: 'image-style-side' }
-		} );
+			{ name: 'imageStyleSide', title: 'Side image', icon: 'object-right', value: 'side', className: 'image-style-side' }
+		] );
 
 		// Get configuration.
 		const styles = editor.config.get( 'image.styles' );
@@ -61,9 +61,7 @@ export default class ImageStyleEngine extends Plugin {
 		data.modelToView.on( 'removeAttribute:imageStyle:image', modelToViewSetStyle( styles ) );
 
 		// Converter for figure element from view to model.
-		for ( let key in styles ) {
-			const style = styles[ key ];
-
+		for ( let style of styles ) {
 			// Create converter only for non-null values.
 			if ( style.value !== null ) {
 				data.viewToModel.on( 'element:figure', viewToModelImageStyle( style ), { priority: 'low' } );
@@ -79,6 +77,8 @@ export default class ImageStyleEngine extends Plugin {
  * Image style format descriptor.
  *
  * @typedef {Object} module:image/imagestyle/imagestyleengine~ImageStyleFormat
+ * @property {String} name Name of the style, it will be used to store style's button under that name 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 Icon name to use when creating style's toolbar button.

+ 1 - 3
packages/ckeditor5-image/src/imagestyle/utils.js

@@ -14,9 +14,7 @@ export function isImage( modelElement ) {
 }
 
 export function getStyleByValue( value, styles ) {
-	for ( let key in styles ) {
-		const style = styles[ key ];
-
+	for ( let style of styles ) {
 		if ( style.value === value ) {
 			return style;
 		}

+ 4 - 4
packages/ckeditor5-image/tests/imagestyle/imagestylecommand.js

@@ -8,10 +8,10 @@ import ImageStyleCommand from 'ckeditor5/image/imagestyle/imagestylecommand.js';
 import { setData, getData } from 'ckeditor5/engine/dev-utils/model.js';
 
 describe( 'ImageStyleCommand', () => {
-	const styles = {
-		defaultStyle: { title: 'foo bar', icon: 'icon-1', value: null },
-		otherStyle: { title: 'baz', icon: 'icon-2', value: 'other', className: 'other-class-name' }
-	};
+	const styles = [
+		{ name: 'defaultStyle', title: 'foo bar', icon: 'icon-1', value: null },
+		{ name: 'otherStyle', title: 'baz', icon: 'icon-2', value: 'other', className: 'other-class-name' }
+	];
 
 	let document, command;
 

+ 12 - 10
packages/ckeditor5-image/tests/imagestyle/imagestyleengine.js

@@ -17,9 +17,11 @@ describe( 'ImageStyleEngine', () => {
 		return VirtualTestEditor.create( {
 			plugins: [ ImageStyleEngine ],
 			image: {
-				styles: {
-					imageStyleDummy: { title: 'Dummy style', icon: 'dummy-icon', value: 'dummy', className: 'image-style-dummy' }
-				}
+				styles: [
+					{ name: 'fullStyle', title: 'foo', icon: 'object-center', value: null },
+					{ name: 'sideStyle', title: 'bar', icon: 'object-right', value: 'side', className: 'side-class' },
+					{ name: 'dummyStyle', title: 'baz', icon: 'object-dummy', value: 'dummy', className: 'dummy-class' }
+				]
 			}
 		} )
 			.then( newEditor => {
@@ -51,7 +53,7 @@ describe( 'ImageStyleEngine', () => {
 	} );
 
 	it( 'should convert from view to model', () => {
-		editor.setData( '<figure class="image image-style-side"><img src="foo.png" /></figure>' );
+		editor.setData( '<figure class="image side-class"><img src="foo.png" /></figure>' );
 
 		expect( getModelData( document, { withoutSelection: true } ) ).to.equal( '<image imageStyle="side" src="foo.png"></image>' );
 	} );
@@ -63,14 +65,14 @@ describe( 'ImageStyleEngine', () => {
 	} );
 
 	it( 'should not convert from view to model when not in image figure', () => {
-		editor.setData( '<figure class="image-style-side"></figure>'  );
+		editor.setData( '<figure class="side-class"></figure>'  );
 
 		expect( getModelData( document, { withoutSelection: true } ) ).to.equal( '' );
 	} );
 
 	it( 'should not convert from view to model if schema prevents it', () => {
 		document.schema.disallow( { name: 'image', attributes: 'imageStyle' } );
-		editor.setData( '<figure class="image image-style-side"><img src="foo.png" /></figure>' );
+		editor.setData( '<figure class="image side-class"><img src="foo.png" /></figure>' );
 
 		expect( getModelData( document, { withoutSelection: true } ) ).to.equal( '<image src="foo.png"></image>' );
 	} );
@@ -84,7 +86,7 @@ describe( 'ImageStyleEngine', () => {
 			batch.setAttribute( image, 'imageStyle', 'side' );
 		} );
 
-		expect( editor.getData() ).to.equal( '<figure class="image image-style-side"><img src="foo.png"></figure>' );
+		expect( editor.getData() ).to.equal( '<figure class="image side-class"><img src="foo.png"></figure>' );
 	} );
 
 	it( 'should convert model to view: removing attribute', () => {
@@ -108,7 +110,7 @@ describe( 'ImageStyleEngine', () => {
 			batch.setAttribute( image, 'imageStyle', 'side' );
 		} );
 
-		expect( editor.getData() ).to.equal( '<figure class="image image-style-side"><img src="foo.png"></figure>' );
+		expect( editor.getData() ).to.equal( '<figure class="image side-class"><img src="foo.png"></figure>' );
 	} );
 
 	it( 'should not convert from model to view if already consumed: adding attribute', () => {
@@ -143,7 +145,7 @@ describe( 'ImageStyleEngine', () => {
 		} );
 
 		expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
-			'<figure class="image ck-widget image-style-side" contenteditable="false"><img src="foo.png"></img></figure>'
+			'<figure class="image ck-widget side-class" contenteditable="false"><img src="foo.png"></img></figure>'
 		);
 	} );
 
@@ -161,7 +163,7 @@ describe( 'ImageStyleEngine', () => {
 		} );
 
 		expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
-			'<figure class="image ck-widget image-style-dummy" contenteditable="false"><img src="foo.png"></img></figure>'
+			'<figure class="image ck-widget dummy-class" contenteditable="false"><img src="foo.png"></img></figure>'
 		);
 	} );