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

Internal: Resized image class is now marked with ck_resized class.

This is used to avoid max-width limit for side images.
Marek Lewandowski 6 лет назад
Родитель
Сommit
378dcb26ed

+ 27 - 2
packages/ckeditor5-image/src/image/imageresize.js

@@ -14,6 +14,8 @@ const WIDTH_ATTRIBUTE_NAME = 'width';
 
 
 const WIDTH_STYLE_NAME = WIDTH_ATTRIBUTE_NAME;
 const WIDTH_STYLE_NAME = WIDTH_ATTRIBUTE_NAME;
 
 
+const RESIZE_CLASS_NAME = 'ck_resized';
+
 /**
 /**
  *	Image resize plugin.
  *	Image resize plugin.
  *
  *
@@ -43,7 +45,7 @@ export default class ImageResize extends Plugin {
 		editor.editing.downcastDispatcher.on( 'insert:image', ( evt, data, conversionApi ) => {
 		editor.editing.downcastDispatcher.on( 'insert:image', ( evt, data, conversionApi ) => {
 			const widget = conversionApi.mapper.toViewElement( data.item );
 			const widget = conversionApi.mapper.toViewElement( data.item );
 
 
-			editor.plugins.get( 'WidgetResizer' ).apply( widget, conversionApi.writer, {
+			const context = editor.plugins.get( 'WidgetResizer' ).apply( widget, conversionApi.writer, {
 				getResizeHost( wrapper ) {
 				getResizeHost( wrapper ) {
 					return wrapper.querySelector( 'img' );
 					return wrapper.querySelector( 'img' );
 				},
 				},
@@ -56,6 +58,26 @@ export default class ImageResize extends Plugin {
 					return !imageStyle || imageStyle == 'full';
 					return !imageStyle || imageStyle == 'full';
 				}
 				}
 			} );
 			} );
+
+			context.on( 'begin', function( evt ) {
+				evt.source._temporaryResizeClassAdded = !evt.source.domResizeWrapper.parentElement.classList.contains( RESIZE_CLASS_NAME );
+
+				this._temporaryResizeClassAdded = !this.domResizeWrapper.parentElement.classList.contains( RESIZE_CLASS_NAME );
+			}, {
+				priority: 'high'
+			} );
+
+			context.on( 'updateSize', function() {
+				if ( this._temporaryResizeClassAdded ) {
+					this.domResizeWrapper.parentElement.classList.add( RESIZE_CLASS_NAME );
+				}
+			} );
+
+			context.on( 'cancel', () => {
+				if ( this._temporaryResizeClassAdded ) {
+					this.domResizeWrapper.parentElement.classList.remove( RESIZE_CLASS_NAME );
+				}
+			} );
 		}, {
 		}, {
 			priority: 'low'
 			priority: 'low'
 		} );
 		} );
@@ -89,12 +111,15 @@ export default class ImageResize extends Plugin {
 				}
 				}
 
 
 				const viewWriter = conversionApi.writer;
 				const viewWriter = conversionApi.writer;
-				const img = conversionApi.mapper.toViewElement( data.item ).getChild( 0 );
+				const figure = conversionApi.mapper.toViewElement( data.item );
+				const img = figure.getChild( 0 );
 
 
 				if ( data.attributeNewValue !== null ) {
 				if ( data.attributeNewValue !== null ) {
 					viewWriter.setStyle( WIDTH_ATTRIBUTE_NAME, data.attributeNewValue + 'px', img );
 					viewWriter.setStyle( WIDTH_ATTRIBUTE_NAME, data.attributeNewValue + 'px', img );
+					viewWriter.addClass( RESIZE_CLASS_NAME, figure );
 				} else {
 				} else {
 					viewWriter.removeStyle( WIDTH_ATTRIBUTE_NAME, img );
 					viewWriter.removeStyle( WIDTH_ATTRIBUTE_NAME, img );
+					viewWriter.removeClass( RESIZE_CLASS_NAME, figure );
 				}
 				}
 			} )
 			} )
 		);
 		);

+ 1 - 1
packages/ckeditor5-image/tests/imageresize/resize.js

@@ -222,7 +222,7 @@ describe( 'Image resizer', () => {
 			} ).call( this );
 			} ).call( this );
 
 
 			expect( editor.getData() ).to.be.equal(
 			expect( editor.getData() ).to.be.equal(
-				`<p>foo</p><figure class="image"><img style="width:120px;" src="${ imageFixture }"></figure>` );
+				`<p>foo</p><figure class="image ck_resized"><img style="width:120px;" src="${ imageFixture }"></figure>` );
 		} );
 		} );
 	} );
 	} );
 
 

+ 3 - 9
packages/ckeditor5-image/tests/manual/resize.html

@@ -1,13 +1,5 @@
 <style>
 <style>
-	.ck-content .image-style-side,
-	.ck-content .image-style-align-left,
-	.ck-content .image-style-align-center,
-	.ck-content .image-style-align-right {
-		max-width: 100%;
-	}
-
-	.fancyEditorWrapper figure
-	{
+	.fancyEditorWrapper figure {
 		padding: 20px;
 		padding: 20px;
 	}
 	}
 
 
@@ -17,6 +9,7 @@
 	<figure class="image image-style-side">
 	<figure class="image image-style-side">
 		<img src="sample.jpg" alt="" style="width: 240px" />
 		<img src="sample.jpg" alt="" style="width: 240px" />
 	</figure>
 	</figure>
+
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus
 	<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
 		et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis
 		leo interdum. </p>
 		leo interdum. </p>
@@ -38,6 +31,7 @@
 		<figure class="image image-style-side">
 		<figure class="image image-style-side">
 			<img src="sample.jpg" alt="" style="width: 240px" />
 			<img src="sample.jpg" alt="" style="width: 240px" />
 		</figure>
 		</figure>
+
 		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id
 		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id
 			tellus
 			tellus
 			et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non
 			et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non

+ 3 - 1
packages/ckeditor5-image/theme/imagestyle.css

@@ -12,7 +12,9 @@
 	& .image-style-align-left,
 	& .image-style-align-left,
 	& .image-style-align-center,
 	& .image-style-align-center,
 	& .image-style-align-right {
 	& .image-style-align-right {
-		max-width: 50%;
+		&:not(.ck_resized) {
+			max-width: 50%;
+		}
 	}
 	}
 
 
 	& .image-style-side {
 	& .image-style-side {