Ver Fonte

Update the `ImageResizeUI` plugin and tests.

panr há 5 anos atrás
pai
commit
66f6d0491c

+ 27 - 12
packages/ckeditor5-image/src/imageresize/imageresizeui.js

@@ -58,8 +58,6 @@ export default class ImageResizeUI extends Plugin {
 		 * @private
 		 * @private
 		 *
 		 *
 		 * @type {module:image/image~ImageConfig#resizeUnit}
 		 * @type {module:image/image~ImageConfig#resizeUnit}
-		 *
-		 * Defaults to `%`.
 		 */
 		 */
 		this._resizeUnit = editor.config.get( 'image.resizeUnit' ) || '%';
 		this._resizeUnit = editor.config.get( 'image.resizeUnit' ) || '%';
 	}
 	}
@@ -94,7 +92,6 @@ export default class ImageResizeUI extends Plugin {
 	 */
 	 */
 	_addButton( option ) {
 	_addButton( option ) {
 		const editor = this.editor;
 		const editor = this.editor;
-		const t = editor.t;
 		const { name, value, icon } = option;
 		const { name, value, icon } = option;
 		const parsedValue = value ? value + this._resizeUnit : null;
 		const parsedValue = value ? value + this._resizeUnit : null;
 
 
@@ -118,20 +115,30 @@ export default class ImageResizeUI extends Plugin {
 				}
 				}
 			};
 			};
 
 
-			// console.log( userIcon() );
-
 			if ( !userIcon() ) {
 			if ( !userIcon() ) {
-			// TODO
+				/**
+			 * Setting {@link module:image/image~ImageConfig#resizeOptions `config.image.resizeOptions`} for the standalone buttons,
+			 * you have to choose a valid icon token for each option.
+			 *
+			 * See all valid options described in the {@link module:image/imageresize/imageresizeui~ImageResizeOption plugin configuration}.
+			 *
+			 * @error imageresizeui-missing-icon
+			 * @param {module:image/imageresize/imageresizeui~ImageResizeOption} option Invalid image resize option.
+			 */
 				throw new CKEditorError(
 				throw new CKEditorError(
+					'imageresizeui-missing-icon: ' +
 					'The resize option "' + name + '" misses an `icon` property ' +
 					'The resize option "' + name + '" misses an `icon` property ' +
-					'or its value doesn\'t match the available options.'
+					'or its value doesn\'t match the available options.',
+					editor,
+					option
 				);
 				);
 			}
 			}
 
 
 			button.set( {
 			button.set( {
-				label: this._createLabel( option ),
+				// Uses `label` property for setting the more verbose text (from tooltip) for ARIA purpose.
+				label: this._createLabel( option, true ),
 				icon: userIcon(),
 				icon: userIcon(),
-				tooltip: parsedValue ? t( 'Resize image to' ) + ' ' + parsedValue : t( 'Resize image to the original size' ),
+				tooltip: this._createLabel( option, true ),
 				isToggleable: true,
 				isToggleable: true,
 				commandValue: parsedValue
 				commandValue: parsedValue
 			} );
 			} );
@@ -203,14 +210,22 @@ export default class ImageResizeUI extends Plugin {
 	 * @private
 	 * @private
 	 *
 	 *
 	 * @param {module:image/imageresize/imageresizeui~ImageResizeOption} option A resize option object.
 	 * @param {module:image/imageresize/imageresizeui~ImageResizeOption} option A resize option object.
+	 * @param {Boolean} [forTooltip] An optional flag for creating a tooltip label.
+	 *
 	 * @returns {String} A user-defined label, a label combined from the value and resize unit or the default label
 	 * @returns {String} A user-defined label, a label combined from the value and resize unit or the default label
 	 * for reset options (`Original`).
 	 * for reset options (`Original`).
 	 */
 	 */
-	_createLabel( option ) {
+	_createLabel( option, forTooltip ) {
 		const t = this.editor.t;
 		const t = this.editor.t;
 
 
 		if ( option.label ) {
 		if ( option.label ) {
 			return option.label;
 			return option.label;
+		} else if ( forTooltip ) {
+			if ( option.value ) {
+				return t( 'Resize image to' ) + ' ' + option.value + this._resizeUnit;
+			} else {
+				return t( 'Resize image to the original size' );
+			}
 		} else {
 		} else {
 			return option.value ? option.value + this._resizeUnit : t( 'Original' );
 			return option.value ? option.value + this._resizeUnit : t( 'Original' );
 		}
 		}
@@ -222,9 +237,9 @@ export default class ImageResizeUI extends Plugin {
 	 * @private
 	 * @private
 	 *
 	 *
 	 * @param {Array.<module:image/imageresize/imageresizeui~ImageResizeOption>} options The resize options.
 	 * @param {Array.<module:image/imageresize/imageresizeui~ImageResizeOption>} options The resize options.
-	 * @param {modules:image/imageresize/imageresizecommand} command A resize image command.
+	 * @param {module:image/imageresize/imageresizecommand~ImageResizeCommand} command A resize image command.
 	 *
 	 *
-	 * @returns {module:utils/collection} definitions
+	 * @returns {module:utils/collection~Collection} definitions
 	*/
 	*/
 	_prepareListDefinitions( options, command ) {
 	_prepareListDefinitions( options, command ) {
 		const itemDefinitions = new Collection();
 		const itemDefinitions = new Collection();

+ 58 - 40
packages/ckeditor5-image/tests/imageresize/imageresizeui.js

@@ -29,26 +29,19 @@ describe( 'ImageResizeUI', () => {
 
 
 	const resizeOptions = [ {
 	const resizeOptions = [ {
 		name: 'imageResize:original',
 		name: 'imageResize:original',
-		value: null,
-		icon: 'original'
+		value: null
 	},
 	},
 	{
 	{
 		name: 'imageResize:25',
 		name: 'imageResize:25',
-		label: '25%',
-		value: '25',
-		icon: 'small'
+		value: '25'
 	},
 	},
 	{
 	{
 		name: 'imageResize:50',
 		name: 'imageResize:50',
-		label: '50%',
-		value: '50',
-		icon: 'medium'
+		value: '50'
 	},
 	},
 	{
 	{
 		name: 'imageResize:75',
 		name: 'imageResize:75',
-		label: '75%',
-		value: '75',
-		icon: 'large'
+		value: '75'
 	} ];
 	} ];
 
 
 	testUtils.createSinonSandbox();
 	testUtils.createSinonSandbox();
@@ -61,7 +54,6 @@ describe( 'ImageResizeUI', () => {
 			.create( editorElement, {
 			.create( editorElement, {
 				plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResizeUI ],
 				plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResizeUI ],
 				image: {
 				image: {
-					resizeUnit: '%',
 					resizeOptions
 					resizeOptions
 				}
 				}
 			} );
 			} );
@@ -104,27 +96,20 @@ describe( 'ImageResizeUI', () => {
 
 
 	describe( 'init()', () => {
 	describe( 'init()', () => {
 		it( 'should have set "%" resize unit', () => {
 		it( 'should have set "%" resize unit', () => {
-			const unit = editor.config.get( 'image.resizeUnit' );
-
-			expect( unit ).to.equal( '%' );
+			expect( plugin._resizeUnit ).to.equal( '%' );
 		} );
 		} );
 
 
 		it( 'should have set "%" resize unit if not defined', async () => {
 		it( 'should have set "%" resize unit if not defined', async () => {
-			const editor = await ClassicTestEditor
-				.create( editorElement, {
-					plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResizeUI ],
-					image: {
-						resizeOptions
-					}
-				} );
-
-			const button = editor.ui.componentFactory.create( 'imageResize:50' );
-			const command = editor.commands.get( 'imageResize' );
+			const dropdown = editor.ui.componentFactory.create( 'imageResize' );
+			const button = dropdown.listView.items.get( 1 ).children.get( 0 );
 
 
 			command.isEnabled = true;
 			command.isEnabled = true;
 
 
+			dropdown.render();
+
 			button.fire( 'execute' );
 			button.fire( 'execute' );
 
 
+			expect( editor.config.get( 'image.resizeUnit' ) ).to.be.undefined;
 			expect( command.value.width.includes( '%' ) ).to.be.true;
 			expect( command.value.width.includes( '%' ) ).to.be.true;
 
 
 			await editor.destroy();
 			await editor.destroy();
@@ -140,7 +125,8 @@ describe( 'ImageResizeUI', () => {
 					}
 					}
 				} );
 				} );
 
 
-			const button = editor.ui.componentFactory.create( 'imageResize:50' );
+			const dropdown = editor.ui.componentFactory.create( 'imageResize' );
+			const button = dropdown.listView.items.get( 1 ).children.get( 0 );
 			const command = editor.commands.get( 'imageResize' );
 			const command = editor.commands.get( 'imageResize' );
 
 
 			command.isEnabled = true;
 			command.isEnabled = true;
@@ -217,6 +203,51 @@ describe( 'ImageResizeUI', () => {
 	} );
 	} );
 
 
 	describe( 'resize option button', () => {
 	describe( 'resize option button', () => {
+		let editor, plugin;
+
+		beforeEach( async () => {
+			editor = await ClassicTestEditor
+				.create( editorElement, {
+					plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResizeUI ],
+					image: {
+						resizeUnit: '%',
+						resizeOptions: [ {
+							name: 'imageResize:original',
+							value: null,
+							icon: 'original'
+						},
+						{
+							name: 'imageResize:25',
+							value: '25',
+							icon: 'small'
+						},
+						{
+							name: 'imageResize:50',
+							value: '50',
+							icon: 'medium'
+						},
+						{
+							name: 'imageResize:75',
+							value: '75',
+							icon: 'large'
+						} ],
+						toolbar: [ 'imageResize:original', 'imageResize:25', 'imageResize:50', 'imageResize:75' ]
+					}
+				} );
+
+			plugin = editor.plugins.get( 'ImageResizeUI' );
+		} );
+
+		afterEach( async () => {
+			if ( editorElement ) {
+				editorElement.remove();
+			}
+
+			if ( editor ) {
+				await editor.destroy();
+			}
+		} );
+
 		it( 'should be bound to `#isEnabled`', () => {
 		it( 'should be bound to `#isEnabled`', () => {
 			const buttonView = editor.ui.componentFactory.create( 'imageResize:50' );
 			const buttonView = editor.ui.componentFactory.create( 'imageResize:50' );
 
 
@@ -243,19 +274,6 @@ describe( 'ImageResizeUI', () => {
 		} );
 		} );
 
 
 		it( 'should be created with invisible "50%" label when is not provided', async () => {
 		it( 'should be created with invisible "50%" label when is not provided', async () => {
-			const editor = await ClassicTestEditor
-				.create( editorElement, {
-					plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResizeUI ],
-					image: {
-						resizeUnit: '%',
-						resizeOptions: [ {
-							name: 'imageResize:50',
-							value: '50',
-							icon: 'medium'
-						} ]
-					}
-				} );
-
 			const buttonView = editor.ui.componentFactory.create( 'imageResize:50' );
 			const buttonView = editor.ui.componentFactory.create( 'imageResize:50' );
 			buttonView.render();
 			buttonView.render();
 
 
@@ -327,7 +345,7 @@ describe( 'ImageResizeUI', () => {
 
 
 			expectToThrowCKEditorError( () => {
 			expectToThrowCKEditorError( () => {
 				editor.ui.componentFactory.create( 'imageResize:noicon' );
 				editor.ui.componentFactory.create( 'imageResize:noicon' );
-			}, errMsg );
+			}, errMsg, editor );
 
 
 			editor.destroy();
 			editor.destroy();
 		} );
 		} );