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

Added media placeholder tooltip. Code refactoring in media embed styles.

Aleksander Nowodzinski 7 лет назад
Родитель
Сommit
e36d1ad618

+ 0 - 2
packages/ckeditor5-media-embed/src/mediaembed.js

@@ -13,8 +13,6 @@ import MediaEmbedEditing from './mediaembedediting';
 import MediaEmbedUI from './mediaembedui';
 import Widget from '@ckeditor/ckeditor5-widget/src/widget';
 
-import '../theme/mediaembed.css';
-
 /**
  * The media embed plugin.
  *

+ 2 - 0
packages/ckeditor5-media-embed/src/mediaembedediting.js

@@ -16,6 +16,8 @@ import { MediaRegistry } from './mediaregistry';
 import { downcastElementToElement } from '@ckeditor/ckeditor5-engine/src/conversion/downcast-converters';
 import { upcastElementToElement } from '@ckeditor/ckeditor5-engine/src/conversion/upcast-converters';
 
+import '../theme/mediaembedediting.css';
+
 /**
  * The media embed editing feature.
  *

+ 47 - 6
packages/ckeditor5-media-embed/src/mediaregistry.js

@@ -9,6 +9,11 @@
 
 import mediaPlaceholderIcon from '../theme/icons/media-placeholder.svg';
 import log from '@ckeditor/ckeditor5-utils/src/log';
+import TooltipView from '@ckeditor/ckeditor5-ui/src/tooltip/tooltipview';
+import IconView from '@ckeditor/ckeditor5-ui/src/icon/iconview';
+import Template from '@ckeditor/ckeditor5-ui/src/template';
+
+const mediaPlaceholderIconViewBox = '0 0 64 42';
 
 /**
  * A bridge between the raw media content provider definitions and editor view content.
@@ -236,11 +241,47 @@ class Media {
 	 * @returns {String}
 	 */
 	_getPlaceholderHtml() {
-		return '<div class="ck-media__placeholder">' +
-			`<div class="ck-media__placeholder__icon">${ mediaPlaceholderIcon }</div>` +
-			`<a class="ck-media__placeholder__url" target="new" href="${ this.url }" title="${ this._t( 'Open media in new tab' ) }">` +
-				this.url +
-			'</a>' +
-		'</div>';
+		const tooltip = new TooltipView();
+		const icon = new IconView();
+
+		tooltip.text = this._t( 'Open media in new tab' );
+		icon.content = mediaPlaceholderIcon;
+		icon.viewBox = mediaPlaceholderIconViewBox;
+
+		const placeholder = new Template( {
+			tag: 'div',
+			attributes: {
+				class: 'ck ck-reset_all ck-media__placeholder'
+			},
+			children: [
+				{
+					tag: 'div',
+					attributes: {
+						class: 'ck-media__placeholder__icon'
+					},
+					children: [ icon ]
+				},
+				{
+					tag: 'a',
+					attributes: {
+						class: 'ck-media__placeholder__url',
+						target: 'new',
+						href: this.url
+					},
+					children: [
+						{
+							tag: 'span',
+							attributes: {
+								class: 'ck-media__placeholder__url__text'
+							},
+							children: [ this.url ]
+						},
+						tooltip
+					]
+				}
+			]
+		} ).render();
+
+		return placeholder.outerHTML;
 	}
 }

+ 9 - 1
packages/ckeditor5-media-embed/tests/mediaembedediting.js

@@ -900,7 +900,15 @@ describe( 'MediaEmbedEditing', () => {
 				expectedRegExp = new RegExp(
 					'<figure[^>]+>' +
 						'<div[^>]+>' +
-							'<div class="ck-media__placeholder">.*</div>' +
+							'<div class="ck ck-media__placeholder ck-reset_all">' +
+								'<div class="ck-media__placeholder__icon">.*</div>' +
+								`<a class="ck-media__placeholder__url" href="${ url }" target="new">` +
+									`<span class="ck-media__placeholder__url__text">${ url }</span>` +
+									'<span class="ck ck-tooltip ck-tooltip_s">' +
+										'<span class="ck ck-tooltip__text">Open media in new tab</span>' +
+									'</span>' +
+								'</a>' +
+							'</div>' +
 						'</div>' +
 					'</figure>' );
 			}

Разница между файлами не показана из-за своего большого размера
+ 0 - 81
packages/ckeditor5-media-embed/theme/mediaembed.css


+ 53 - 0
packages/ckeditor5-media-embed/theme/mediaembedediting.css

@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/*
+ * Note: This file should contain the wireframe styles only. But since there are no such styles,
+ * it acts as a message to the builder telling that it should look for the corresponding styles
+ * **in the theme** when compiling the editor.
+ */
+
+@import "@ckeditor/ckeditor5-ui/theme/components/tooltip/mixins/_tooltip.css";
+
+.ck-content .media {
+    & .ck-media__wrapper {
+		& > *:not(.ck-media__placeholder) {
+			pointer-events: none;
+		}
+
+		& .ck-media__placeholder {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+
+			& .ck-media__placeholder__url {
+				@mixin ck-tooltip_enabled;
+
+				/* Otherwise the URL will overflow when the content is very narrow. */
+				max-width: 100%;
+
+				position: relative;
+
+				&:hover {
+					@mixin ck-tooltip_visible;
+				}
+
+				& .ck-media__placeholder__url__text {
+					overflow: hidden;
+					display: block;
+				}
+			}
+		}
+
+		&[data-oembed-url*="twitter.com"],
+		&[data-oembed-url*="google.com/maps"],
+		&[data-oembed-url*="facebook.com"],
+		&[data-oembed-url*="instagram.com"] {
+			& .ck-media__placeholder__icon * {
+				display: none;
+			}
+		}
+	}
+}

Некоторые файлы не были показаны из-за большого количества измененных файлов