Browse Source

Internal: Added generic support for percent-based resizing.

Marek Lewandowski 6 years ago
parent
commit
d0bae6a26e

+ 10 - 5
packages/ckeditor5-image/src/imageresize.js

@@ -52,9 +52,13 @@ export default class ImageResize extends Plugin {
 					modelElement: data.item,
 					viewElement: widget,
 					downcastWriter: conversionApi.writer,
+					unit: 'percent',
 					getResizeHost( domWidgetElement ) {
 						return domWidgetElement.querySelector( 'img' );
 					},
+					getHandleHost( domWidgetElement ) {
+						return domWidgetElement.querySelector( 'img' );
+					},
 					getAspectRatio( domResizeHost ) {
 						return domResizeHost.naturalWidth / domResizeHost.naturalHeight;
 					},
@@ -65,7 +69,9 @@ export default class ImageResize extends Plugin {
 						return !imageStyle || imageStyle == 'full';
 					},
 					onCommit( resizerState ) {
-						editor.execute( 'imageResize', { width: resizerState.proposedWidth + 'px' } );
+						const value = resizerState.proposedWidthPercents ?
+							resizerState.proposedWidthPercents + '%' : resizerState.proposedWidth + 'px';
+						editor.execute( 'imageResize', { width: value } );
 					}
 				} );
 
@@ -107,13 +113,12 @@ export default class ImageResize extends Plugin {
 
 				const viewWriter = conversionApi.writer;
 				const figure = conversionApi.mapper.toViewElement( data.item );
-				const img = figure.getChild( 0 );
 
 				if ( data.attributeNewValue !== null ) {
-					viewWriter.setStyle( 'width', data.attributeNewValue, img );
+					viewWriter.setStyle( 'width', data.attributeNewValue, figure );
 					viewWriter.addClass( 'image_resized', figure );
 				} else {
-					viewWriter.removeStyle( 'width', img );
+					viewWriter.removeStyle( 'width', figure );
 					viewWriter.removeClass( 'image_resized', figure );
 				}
 			} )
@@ -122,7 +127,7 @@ export default class ImageResize extends Plugin {
 		editor.conversion.for( 'upcast' )
 			.attributeToAttribute( {
 				view: {
-					name: 'img',
+					name: 'figure',
 					styles: {
 						width: /.+/
 					}

+ 21 - 0
packages/ckeditor5-image/theme/imagestyle.css

@@ -17,6 +17,27 @@
 		}
 	}
 
+	& .image.image_resized {
+		max-width: 100%;
+		/*
+		The figure element for resized images must not use `display:table` as browsers doesn't support `max-width` for it well.
+		See https://stackoverflow.com/questions/4019604/chrome-safari-ignoring-max-width-in-table/14420691#14420691 for more.
+		Fortunately, since we control width, there's no risk that the image will look bad.
+		*/
+		display: block;
+		box-sizing: border-box;
+
+		& img {
+			/* For resized images it's the figure that determines the image's width. */
+			width: 100%;
+		}
+
+		& > figcaption {
+			/* Figure uses display block, so figcaption also has to. */
+			display: block;
+		}
+	}
+
 	& .image-style-side {
 		float: right;
 		margin-left: var(--ck-image-style-spacing);