瀏覽代碼

Removed the .ck-media__wrapper__aspect class; replaced with inline styles.

Aleksander Nowodzinski 7 年之前
父節點
當前提交
945816515e

+ 10 - 6
packages/ckeditor5-media-embed/src/mediaembedediting.js

@@ -39,8 +39,9 @@ export default class MediaEmbedEditing extends Plugin {
 						/^(https:\/\/)?(www\.)?dailymotion\.com\/video\/(\w+)/
 					],
 					html: id =>
-						'<div class="ck-media__wrapper__aspect">' +
+						'<div style="position: relative; padding-bottom: 100%; height: 0; ">' +
 							`<iframe src="https://www.dailymotion.com/embed/video/${ id }" ` +
+								'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
 								'frameborder="0" width="480" height="270" allowfullscreen allow="autoplay">' +
 							'</iframe>' +
 						'</div>'
@@ -57,8 +58,9 @@ export default class MediaEmbedEditing extends Plugin {
 						/^(https:\/\/)?(www\.)?open\.spotify\.com\/(track\/\w+)/
 					],
 					html: id =>
-						'<div class="ck-media__wrapper__aspect">' +
+						'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 126%;">' +
 							`<iframe src="https://open.spotify.com/embed/${ id }" ` +
+								'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
 								'frameborder="0" allowtransparency="true" allow="encrypted-media">' +
 							'</iframe>' +
 						'</div>'
@@ -72,8 +74,9 @@ export default class MediaEmbedEditing extends Plugin {
 						/^(https:\/\/)?youtu\.be\/(\w+)/
 					],
 					html: id =>
-						'<div class="ck-media__wrapper__aspect">' +
+						'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">' +
 							`<iframe src="https://www.youtube.com/embed/${ id }" ` +
+								'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
 								'frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>' +
 							'</iframe>' +
 						'</div>'
@@ -90,8 +93,9 @@ export default class MediaEmbedEditing extends Plugin {
 						/^(https:\/\/)?(www\.)?player\.vimeo\.com\/video\/(\d+)/
 					],
 					html: id =>
-						'<div class="ck-media__wrapper__aspect">' +
+						'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">' +
 							`<iframe src="https://player.vimeo.com/video/${ id }" ` +
+								'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
 								'frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>' +
 							'</iframe>' +
 						'</div>'
@@ -193,7 +197,7 @@ export default class MediaEmbedEditing extends Plugin {
 				model: ( viewMedia, modelWriter ) => {
 					const url = viewMedia.getAttribute( 'url' );
 
-					if ( mediaRegistry.has( url ) ) {
+					if ( mediaRegistry.hasMedia( url ) ) {
 						return modelWriter.createElement( 'media', { url } );
 					}
 				}
@@ -209,7 +213,7 @@ export default class MediaEmbedEditing extends Plugin {
 				model: ( viewMedia, modelWriter ) => {
 					const url = viewMedia.getAttribute( 'data-oembed-url' );
 
-					if ( mediaRegistry.has( url ) ) {
+					if ( mediaRegistry.hasMedia( url ) ) {
 						return modelWriter.createElement( 'media', { url } );
 					}
 				}

+ 1 - 1
packages/ckeditor5-media-embed/src/mediaembedui.js

@@ -108,7 +108,7 @@ function getFormValidators( t, mediaRegistry ) {
 			}
 		},
 		form => {
-			if ( !mediaRegistry.has( form.url ) ) {
+			if ( !mediaRegistry.hasMedia( form.url ) ) {
 				return t( 'This media URL is not supported.' );
 			}
 		}

+ 1 - 1
packages/ckeditor5-media-embed/src/mediaregistry.js

@@ -11,7 +11,7 @@ export class MediaRegistry {
 		this.mediaProviders = editor.config.get( 'mediaEmbed.media' );
 	}
 
-	has( url ) {
+	hasMedia( url ) {
 		return !!this._getMedia( url );
 	}
 

+ 37 - 19
packages/ckeditor5-media-embed/tests/mediaembedediting.js

@@ -43,9 +43,12 @@ describe( 'MediaEmbedEditing', () => {
 					'www.dailymotion.com/video/foo',
 					'dailymotion.com/video/foo',
 				],
-				'<iframe src="https://www.dailymotion.com/embed/video/foo" ' +
-					'frameborder="0" width="480" height="270" allowfullscreen="" allow="autoplay">' +
-				'</iframe>' );
+				'<div style="position: relative; padding-bottom: 100%; height: 0; ">' +
+					'<iframe src="https://www.dailymotion.com/embed/video/foo" ' +
+						'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
+						'frameborder="0" width="480" height="270" allowfullscreen="" allow="autoplay">' +
+					'</iframe>' +
+				'</div>' );
 			} );
 
 			it( 'upcasts the URL (instagram)', () => {
@@ -63,9 +66,12 @@ describe( 'MediaEmbedEditing', () => {
 						'www.open.spotify.com/artist/foo',
 						'open.spotify.com/artist/foo',
 					],
-					'<iframe src="https://open.spotify.com/embed/artist/foo" ' +
-						'frameborder="0" allowtransparency="true" allow="encrypted-media">' +
-					'</iframe>' );
+					'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 126%;">' +
+						'<iframe src="https://open.spotify.com/embed/artist/foo" ' +
+							'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
+							'frameborder="0" allowtransparency="true" allow="encrypted-media">' +
+						'</iframe>' +
+					'</div>' );
 				} );
 
 				it( 'upcasts the URL (album)', () => {
@@ -74,9 +80,12 @@ describe( 'MediaEmbedEditing', () => {
 						'www.open.spotify.com/album/foo',
 						'open.spotify.com/album/foo',
 					],
-					'<iframe src="https://open.spotify.com/embed/album/foo" ' +
-						'frameborder="0" allowtransparency="true" allow="encrypted-media">' +
-					'</iframe>' );
+					'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 126%;">' +
+						'<iframe src="https://open.spotify.com/embed/album/foo" ' +
+							'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
+							'frameborder="0" allowtransparency="true" allow="encrypted-media">' +
+						'</iframe>' +
+					'</div>' );
 				} );
 
 				it( 'upcasts the URL (track)', () => {
@@ -85,9 +94,12 @@ describe( 'MediaEmbedEditing', () => {
 						'www.open.spotify.com/track/foo',
 						'open.spotify.com/track/foo',
 					],
-					'<iframe src="https://open.spotify.com/embed/track/foo" ' +
-						'frameborder="0" allowtransparency="true" allow="encrypted-media">' +
-					'</iframe>' );
+					'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 126%;">' +
+						'<iframe src="https://open.spotify.com/embed/track/foo" ' +
+							'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
+							'frameborder="0" allowtransparency="true" allow="encrypted-media">' +
+						'</iframe>' +
+					'</div>' );
 				} );
 			} );
 
@@ -108,9 +120,12 @@ describe( 'MediaEmbedEditing', () => {
 					'https://youtu.be/foo',
 					'youtu.be/foo'
 				],
-				'<iframe src="https://www.youtube.com/embed/foo" ' +
-					'frameborder="0" allow="autoplay; encrypted-media" allowfullscreen="">' +
-				'</iframe>' );
+				'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">' +
+					'<iframe src="https://www.youtube.com/embed/foo" ' +
+						'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
+						'frameborder="0" allow="autoplay; encrypted-media" allowfullscreen="">' +
+					'</iframe>' +
+				'</div>' );
 			} );
 
 			it( 'upcasts the URL (vimeo)', () => {
@@ -143,9 +158,12 @@ describe( 'MediaEmbedEditing', () => {
 					'www.player.vimeo.com/video/1234',
 					'player.vimeo.com/video/1234'
 				],
-				'<iframe src="https://player.vimeo.com/video/1234" ' +
-					'frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="">' +
-				'</iframe>' );
+				'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">' +
+					'<iframe src="https://player.vimeo.com/video/1234" ' +
+						'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
+						'frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="">' +
+					'</iframe>' +
+				'</div>' );
 			} );
 		} );
 	} );
@@ -632,7 +650,7 @@ describe( 'MediaEmbedEditing', () => {
 				expectedRegExp = new RegExp(
 					'<figure[^>]+>' +
 						'<div[^>]+>' +
-							`<div[^>]+>${ normalizeHtml( expected ) }</div>` +
+							normalizeHtml( expected ) +
 						'</div>' +
 					'</figure>' );
 			} else {

+ 0 - 22
packages/ckeditor5-media-embed/theme/mediaembed.css

@@ -14,20 +14,6 @@
 			pointer-events: none;
 		}
 
-		& .ck-media__wrapper__aspect {
-			position: relative;
-			padding-bottom: 100%;
-			height: 0;
-
-			& * {
-				position: absolute;
-				width: 100%;
-				height: 100%;
-				top: 0;
-				left: 0;
-			}
-		}
-
 		& .ck-media__placeholder {
 			padding: 2em;
 			background: hsl(0, 0%, 96%);
@@ -62,19 +48,11 @@
 		&[data-oembed-url*="vimeo.com"] {
 			max-width: 640px;
 			max-height: 360px;
-
-			& .ck-media__wrapper__aspect {
-				padding-bottom: 56.2493%;
-			}
 		}
 
 		&[data-oembed-url*="open.spotify.com"] {
 			max-width: 300px;
 			max-height: 380px;
-
-			& .ck-media__wrapper__aspect {
-				padding-bottom: 126%;
-			}
 		}
 
 		&[data-oembed-url*="twitter.com"],