Sfoglia il codice sorgente

Merge branch 'master' into t/ckeditor5-engine/699

Szymon Kupś 8 anni fa
parent
commit
3aefdd6eb5

+ 9 - 0
packages/ckeditor5-upload/src/filerepository.js

@@ -444,6 +444,15 @@ mix( FileLoader, ObservableMixin );
  *		original: 'http://server/orginal-size.image.png'
  *	}
  *
+ * Additionally, other image sizes can be provided:
+ *
+ *	{
+ *		original: 'http://server/orginal-size.image.png',
+ *		'160': 'http://server/size-160.image.png',
+ *		'500': 'http://server/size-500.image.png',
+ *		'1000': 'http://server/size-1000.image.png'
+ *	}
+ *
  * Take a look at {@link module:upload/filerepository~Adapter example Adapter implementation} and
  * {@link module:upload/filerepository~FileRepository#createAdapter createAdapter method}.
  *

+ 15 - 0
packages/ckeditor5-upload/src/imageuploadengine.js

@@ -121,6 +121,21 @@ export default class ImageUploadEngine extends Plugin {
 				doc.enqueueChanges( () => {
 					batch.setAttribute( imageElement, 'uploadStatus', 'complete' );
 					batch.setAttribute( imageElement, 'src', data.original );
+
+					// Srcset attribute for responsive images support.
+					const srcsetAttribute = Object.keys( data )
+						// Filter out keys that are not integers.
+						.filter( key => !isNaN( parseInt( key, 10 ) ) )
+
+						// Convert each key to srcset entry.
+						.map( key => `${ data[ key ] } ${ key }w` )
+
+						// Join all entries.
+						.join( ', ' );
+
+					if ( srcsetAttribute != '' ) {
+						batch.setAttribute( imageElement, 'srcset', srcsetAttribute );
+					}
 				} );
 
 				clean();

+ 23 - 0
packages/ckeditor5-upload/tests/imageuploadengine.js

@@ -234,4 +234,27 @@ describe( 'ImageUploadEngine', () => {
 		expect( loader.status ).to.equal( 'aborted' );
 		sinon.assert.calledOnce( abortSpy );
 	} );
+
+	it( 'should create responsive image if server return multiple images', done => {
+		const file = createNativeFileMock();
+		setModelData( document, '<paragraph>{}foo bar</paragraph>' );
+		editor.execute( 'imageUpload', { file } );
+
+		document.once( 'changesDone', () => {
+			document.once( 'changesDone', () => {
+				expect( getViewData( viewDocument ) ).to.equal(
+					'[<figure class="image ck-widget" contenteditable="false">' +
+						'<img sizes="100vw" src="image.png" srcset="image-500.png 500w, image-800.png 800w"></img>' +
+					'</figure>]<p>foo bar</p>'
+				);
+				expect( loader.status ).to.equal( 'idle' );
+
+				done();
+			} );
+
+			adapterMock.mockSuccess( { original: 'image.png', 500: 'image-500.png', 800: 'image-800.png' } );
+		} );
+
+		nativeReaderMock.mockSuccess( base64Sample );
+	} );
 } );