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

Made the link actions preview an instance of ButtonView.

Aleksander Nowodzinski 8 лет назад
Родитель
Сommit
970bc34da4

+ 1 - 1
packages/ckeditor5-link/src/link.js

@@ -95,7 +95,7 @@ export default class Link extends Plugin {
 		const actionsView = new LinkActionsView( editor.locale );
 		const linkCommand = editor.commands.get( 'link' );
 
-		actionsView.preView.bind( 'href' ).to( linkCommand, 'value' );
+		actionsView.bind( 'href' ).to( linkCommand, 'value' );
 
 		// Execute unlink command after clicking on the "Unlink" button.
 		this.listenTo( actionsView, 'edit', () => {

+ 32 - 37
packages/ckeditor5-link/src/ui/linkactionsview.js

@@ -11,7 +11,6 @@ import View from '@ckeditor/ckeditor5-ui/src/view';
 import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
 
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
-import TooltipView from '@ckeditor/ckeditor5-ui/src/tooltip/tooltipview';
 
 import submitHandler from '@ckeditor/ckeditor5-ui/src/bindings/submithandler';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
@@ -58,7 +57,7 @@ export default class LinkActionsView extends View {
 		 *
 		 * @member {module:ui/view~View}
 		 */
-		this.preView = this._createPreView();
+		this.previewButton = this._createPreviewButton();
 
 		/**
 		 * The unlink button view.
@@ -74,6 +73,14 @@ export default class LinkActionsView extends View {
 		 */
 		this.editButtonView = this._createButton( t( 'Edit link' ), pencilIcon, 'edit' );
 
+		/**
+		 * Value of the "href" attribute of the link to use in the {@link #previewButton}.
+		 *
+		 * @observable
+		 * @member {String}
+		 */
+		this.set( 'href' );
+
 		/**
 		 * A collection of views which can be focused in the view.
 		 *
@@ -116,7 +123,7 @@ export default class LinkActionsView extends View {
 			},
 
 			children: [
-				this.preView,
+				this.previewButton,
 				this.editButtonView,
 				this.unlinkButtonView
 			]
@@ -134,7 +141,7 @@ export default class LinkActionsView extends View {
 		} );
 
 		const childViews = [
-			this.preView,
+			this.previewButton,
 			this.editButtonView,
 			this.unlinkButtonView
 		];
@@ -184,53 +191,41 @@ export default class LinkActionsView extends View {
 	}
 
 	/**
-	 * Creates a link href preview view.
+	 * Creates a link href preview button.
 	 *
 	 * @private
-	 * @returns {module:ui/view~View} The href preview view instance.
+	 * @returns {module:ui/button/buttonview~ButtonView} The button view instance.
 	 */
-	_createPreView() {
-		const preView = new View( this.locale );
-		const tooltipView = new TooltipView();
-		const bind = preView.bindTemplate;
+	_createPreviewButton() {
+		const button = new ButtonView( this.locale );
+		const bind = this.bindTemplate;
 		const t = this.t;
 
-		tooltipView.set( 'text', t( 'Open link in new tab' ) );
-		preView.set( 'href' );
+		button.set( {
+			withText: true,
+			tooltip: t( 'Open link in new tab' )
+		} );
 
-		preView.setTemplate( {
-			tag: 'a',
+		button.extendTemplate( {
 			attributes: {
 				class: [
 					'ck-link-actions__preview'
 				],
-				target: '_blank',
 				href: bind.to( 'href' ),
-				tabindex: -1
-			},
-			children: [
-				{
-					tag: 'span',
-					attributes: {
-						class: [
-							'ck-link-actions__preview__text'
-						]
-					},
-					children: [
-						{
-							text: bind.to( 'href' ),
-						}
-					]
-				},
-				tooltipView
-			]
+				target: '_blank'
+			}
 		} );
 
-		preView.focus = function() {
-			this.element.focus();
-		};
+		button.bind( 'label' ).to( this, 'href', href => {
+			return href || t( 'This link has no URL' );
+		} );
+
+		button.bind( 'isEnabled' ).to( this, 'href', href => !!href );
 
-		return preView;
+		button.template.tag = 'a';
+		button.template.eventListeners = {};
+
+		return button;
 	}
 }
 

+ 1 - 2
packages/ckeditor5-link/theme/linkactions.css

@@ -7,8 +7,7 @@
 	& .ck-link-actions__preview {
 		display: inline-block;
 
-		& .ck-link-actions__preview__text {
-			display: inline-block;
+		& .ck-button__label {
 			overflow: hidden;
 		}
 	}