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

Display a help text under the media URL input when empty. Display a tip under the input when the user started typing.

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

+ 2 - 1
packages/ckeditor5-media-embed/lang/contexts.json

@@ -1,7 +1,8 @@
 {
 	"media widget": "Label for the media widget.",
 	"Media URL": "Label for the URL input in the Media Embed URL editing balloon.",
-	"Paste the URL into the content to embed faster.": "The tip displayed next to the media URL input informing about an easier way of embedding.",
+	"Paste the media URL in the input.": "The help text displayed under the media URL input helping users to discover the interface.",
+	"Tip: Paste the URL into the content to embed faster.": "The tip displayed next to the media URL input informing about an easier way of embedding.",
 	"The URL must not be empty.": "An error message that informs about an empty value in the URL input.",
 	"This media URL is not supported.": "An error message that informs about unsupported media URL.",
 	"Insert media": "Toolbar button tooltip for the Media Embed feature."

+ 25 - 3
packages/ckeditor5-media-embed/src/ui/mediaformview.js

@@ -134,6 +134,21 @@ export default class MediaFormView extends View {
 				this.cancelButtonView
 			]
 		} );
+
+		/**
+		 * The default info text for the {@link #inputView}.
+		 *
+		 * @private
+		 * @member {String} _urlInputViewInfoDefault
+		 */
+
+		/**
+		 * The info text with an additional tip for the {@link #inputView},
+		 * displayed when the input has some value.
+		 *
+		 * @private
+		 * @member {String} _urlInputViewInfoTip
+		 */
 	}
 
 	/**
@@ -242,10 +257,8 @@ export default class MediaFormView extends View {
 	 * See {@link #isValid}.
 	 */
 	resetFormStatus() {
-		const t = this.locale.t;
-
 		this.urlInputView.errorText = null;
-		this.urlInputView.infoText = t( 'Paste the URL into the content to embed faster.' );
+		this.urlInputView.infoText = this._urlInputViewInfoDefault;
 	}
 
 	/**
@@ -260,9 +273,18 @@ export default class MediaFormView extends View {
 		const labeledInput = new LabeledInputView( this.locale, InputTextView );
 		const inputView = labeledInput.inputView;
 
+		this._urlInputViewInfoDefault = t( 'Paste the media URL in the input.' );
+		this._urlInputViewInfoTip = t( 'Tip: Paste the URL into the content to embed faster.' );
+
 		labeledInput.label = t( 'Media URL' );
+		labeledInput.infoText = this._urlInputViewInfoDefault;
 		inputView.placeholder = 'https://example.com';
 
+		inputView.on( 'input', () => {
+			// Display the tip text only when there's some value. Otherwise fall back to the default info text.
+			labeledInput.infoText = inputView.element.value ? this._urlInputViewInfoTip : this._urlInputViewInfoDefault;
+		} );
+
 		return labeledInput;
 	}
 

+ 14 - 2
packages/ckeditor5-media-embed/tests/ui/mediaformview.js

@@ -83,7 +83,19 @@ describe( 'MediaFormView', () => {
 			} );
 
 			it( 'has info text', () => {
-				expect( view.urlInputView.infoText ).to.match( /^Paste the URL/ );
+				expect( view.urlInputView.infoText ).to.match( /^Paste the media URL/ );
+			} );
+
+			it( 'displays the tip upon #input when the field has a value', () => {
+				view.urlInputView.inputView.element.value = 'foo';
+				view.urlInputView.inputView.fire( 'input' );
+
+				expect( view.urlInputView.infoText ).to.match( /^Tip: Paste the URL into/ );
+
+				view.urlInputView.inputView.element.value = '';
+				view.urlInputView.inputView.fire( 'input' );
+
+				expect( view.urlInputView.infoText ).to.match( /^Paste the media URL/ );
 			} );
 		} );
 
@@ -299,7 +311,7 @@ describe( 'MediaFormView', () => {
 
 			view.resetFormStatus();
 
-			expect( view.urlInputView.infoText ).to.be.null;
+			expect( view.urlInputView.infoText ).to.match( /^Paste the media URL/ );
 		} );
 	} );
 } );