Merge branch 't/13421'

CHANGES.md

@@ -26,6 +26,10 @@ Fixed Issues:
 * [#13409](http://dev.ckeditor.com/ticket/13409): Fixed: List elements incorrectly merged when pressing *Backspace* or *Delete*.
 * [#13441](http://dev.ckeditor.com/ticket/13441): [Edge] Fixed: [Clipboard](http://ckeditor.com/addon/clipboard) plugin breaks the state of [Undo](http://ckeditor.com/addon/undo) commands after paste.
 
+Other Changes:
+
+* [#13421](http://dev.ckeditor.com/ticket/13421): UX improvements to notifications in [Auto Embed](http://ckeditor.com/addon/autoembed) plugin.
+
 ## CKEditor 4.5.1
 
 Fixed Issues:

plugins/autoembed/lang/en.js

@@ -0,0 +1,8 @@
+/*
+ Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
+ For licensing, see LICENSE.md or http://ckeditor.com/license
+ */
+CKEDITOR.plugins.setLang( 'autoembed', 'en', {
+	embeddingInProgress: 'Trying to embed pasted URL...',
+	embeddingFailed: 'This URL could not be automatically embedded.'
+} );

plugins/autoembed/plugin.js

@@ -10,7 +10,7 @@
 
 	CKEDITOR.plugins.add( 'autoembed', {
 		requires: 'autolink,undo',
-
+		lang: 'en', // %REMOVE_LINE_CORE%
 		init: function( editor ) {
 			var currentId = 1,
 				embedCandidatePasted;
@@ -45,7 +45,9 @@
 	} );
 
 	function autoEmbedLink( editor, id ) {
-		var anchor = editor.editable().findOne( 'a[data-cke-autoembed="' + id + '"]' );
+		var anchor = editor.editable().findOne( 'a[data-cke-autoembed="' + id + '"]' ),
+			lang = editor.lang.autoembed,
+			notification;
 
 		if ( !anchor || !anchor.data( 'cke-saved-href' ) ) {
 			return;
@@ -77,7 +79,9 @@
 			return;
 		}
 
+		notification = editor.showNotification( lang.embeddingInProgress, 'info' );
 		instance.loadContent( href, {
+			noNotifications: true,
 			callback: function() {
 					// DOM might be invalidated in the meantime, so find the anchor again.
 				var anchor = editor.editable().findOne( 'a[data-cke-autoembed="' + id + '"]' ),
@@ -91,11 +95,14 @@
 					editor.editable().insertElementIntoRange( wrapper, range );
 				}
 
+				notification.hide();
 				finalizeCreation();
 			},
 
 			errorCallback: function() {
+				notification.hide();
 				editor.widgets.destroy( instance, true );
+				editor.showNotification( lang.embeddingFailed, 'info' );
 			}
 		} );
 

plugins/embedbase/plugin.js

@@ -186,6 +186,7 @@
 				var that = this,
 					cachedResponse = this._getCachedResponse( url ),
 					request = {
+						noNotifications: opts.noNotifications,
 						url: url,
 						callback: finishLoading,
 						errorCallback: function( msg ) {
@@ -379,7 +380,9 @@
 				if ( request.task ) {
 					request.task.cancel();
 
-					editor.showNotification( this.getErrorMessage( messageTypeOrMessage, request.url ), 'warning' );
+					if ( !request.noNotifications ) {
+						editor.showNotification( this.getErrorMessage( messageTypeOrMessage, request.url ), 'warning' );
+					}
 				}
 			},
 

tests/plugins/autoembed/autoembednotifications.js

@@ -0,0 +1,71 @@
+/* bender-tags: editor,unit,13421 */
+/* bender-ckeditor-plugins: embed,autoembed,enterkey,undo,link */
+/* bender-include: ../embedbase/_helpers/tools.js */
+
+/* global embedTools */
+
+'use strict';
+
+var jsonpCallback;
+
+embedTools.mockJsonp( function() {
+	jsonpCallback.apply( this, arguments );
+} );
+
+bender.editor = {
+	creator: 'inline'
+};
+
+bender.test( {
+	'test notifications showed when embedding is finished correctly': function() {
+		var bot = this.editorBot,
+			editor = bot.editor,
+			pastedText = 'https://foo.bar/notifiacation/finish/correct',
+			showNotificationSpy = sinon.spy( editor, 'showNotification' );
+
+		jsonpCallback = function( urlTemplate, urlParams, callback ) {
+			resume( function() {
+				callback( {
+					'url': decodeURIComponent( urlParams.url ),
+					'type': 'rich',
+					'version': '1.0',
+					'html': '<img src="' + decodeURIComponent( urlParams.url ) + '">'
+				} );
+
+				showNotificationSpy.restore();
+				assert.isTrue( showNotificationSpy.calledOnce, 'Notification should be showed once.' );
+				assert.areEqual( showNotificationSpy.firstCall.returnValue.type, 'info', 'Notification should be "info" type.' );
+			} );
+		};
+
+		bot.setData( '', function() {
+			bot.editor.focus();
+			this.editor.execCommand( 'paste', pastedText );
+			wait();
+		} );
+	},
+
+	'test notifications showed when embedding is finished with error': function() {
+		var bot = this.editorBot,
+			editor = bot.editor,
+			pastedText = 'https://foo.bar/notifiacation/finish/error',
+			showNotificationSpy = sinon.spy( editor, 'showNotification' );
+
+		jsonpCallback = function( urlTemplate, urlParams, callback, errorCallback ) {
+			resume( function() {
+				errorCallback();
+
+				showNotificationSpy.restore();
+				assert.isTrue( showNotificationSpy.calledTwice, 'Notification was showed twice.' );
+				assert.areEqual( showNotificationSpy.firstCall.returnValue.type, 'info', 'First notification should have "info" type.' );
+				assert.areEqual( showNotificationSpy.secondCall.returnValue.type, 'info', 'Second notification should have "info" type.' );
+			} );
+		};
+
+		bot.setData( '', function() {
+			bot.editor.focus();
+			this.editor.execCommand( 'paste', pastedText );
+			wait();
+		} );
+	}
+} );

tests/plugins/embedbase/notifications.js

@@ -0,0 +1,161 @@
+/* bender-tags: editor,unit,13421 */
+/* bender-ckeditor-plugins: embedbase,embed,toolbar,htmlwriter */
+/* bender-include: ../widget/_helpers/tools.js, _helpers/tools.js */
+/* global widgetTestsTools, embedTools */
+
+'use strict';
+
+bender.editors = {
+	inline: {
+		name: 'editor_inline',
+		creator: 'inline'
+	}
+};
+
+var dataWithWidget = '<p>x</p><div data-oembed-url="foo" id="w1">foo</div><p>x</p>',
+	getWidgetById = widgetTestsTools.getWidgetById,
+	jsonpCallback;
+
+embedTools.mockJsonp( function() {
+	jsonpCallback.apply( this, arguments );
+} );
+
+bender.test( {
+
+	'test if embedding shows notifications during successful request': function() {
+		var bot = this.editorBots.inline,
+			editor = bot.editor,
+			successCallbackSpy = sinon.spy(),
+			errorCallbackSpy = sinon.spy(),
+			createTaskSpy = sinon.spy( CKEDITOR.plugins.notificationAggregator.prototype, 'createTask' );
+
+		bot.setData( dataWithWidget, function() {
+			var widget = getWidgetById( editor, 'w1' );
+
+			jsonpCallback = function( urlTemplate, urlParams, callback ) {
+				resume( function() {
+					callback( {
+						type: 'rich',
+						html: '<p>url:' + urlParams.url + '</p>'
+					} );
+
+					createTaskSpy.restore();
+					assert.isTrue( successCallbackSpy.called, 'Success callback should be called.' );
+					assert.isFalse( errorCallbackSpy.called, 'Error callback should not be called.' );
+					assert.isTrue( createTaskSpy.calledOnce, 'Task should be created.' );
+				} );
+			};
+
+			widget.loadContent( '//show/notification', {
+				callback: successCallbackSpy,
+				errorCallback: errorCallbackSpy
+			} );
+
+			wait();
+		} );
+	},
+
+	'test if embedding notifications can be blocked during successful request': function() {
+		var bot = this.editorBots.inline,
+			editor = bot.editor,
+			successCallbackSpy = sinon.spy(),
+			errorCallbackSpy = sinon.spy(),
+			createTaskSpy = sinon.spy( CKEDITOR.plugins.notificationAggregator.prototype, 'createTask' );
+
+		bot.setData( dataWithWidget, function() {
+			var widget = getWidgetById( editor, 'w1' );
+
+			jsonpCallback = function( urlTemplate, urlParams, callback ) {
+				resume( function() {
+					callback( {
+						type: 'rich',
+						html: '<p>url:' + urlParams.url + '</p>'
+					} );
+
+					createTaskSpy.restore();
+					assert.isTrue( successCallbackSpy.called, 'Success callback should be called.' );
+					assert.isFalse( errorCallbackSpy.called, 'Error callback should not be called.' );
+					assert.isFalse( createTaskSpy.called, 'Task should not be created.' );
+				} );
+			};
+
+			widget.loadContent( '//show/no-notification', {
+				callback: successCallbackSpy,
+				errorCallback: errorCallbackSpy,
+				noNotifications: true
+			} );
+
+			wait();
+		} );
+	},
+
+	'test if embedding shows notifications during unsuccessful request': function() {
+		var bot = this.editorBots.inline,
+			editor = bot.editor,
+			successCallbackSpy = sinon.spy(),
+			errorCallbackSpy = sinon.spy(),
+			createTaskSpy = sinon.spy( CKEDITOR.plugins.notificationAggregator.prototype, 'createTask' ),
+			showNotificationSpy = sinon.spy( editor, 'showNotification' );
+
+		bot.setData( dataWithWidget, function() {
+			var widget = getWidgetById( editor, 'w1' );
+
+			jsonpCallback = function( urlTemplate, urlParams, callback, errorCallback ) {
+				resume( function() {
+					errorCallback();
+
+					createTaskSpy.restore();
+					showNotificationSpy.restore();
+
+					assert.isFalse( successCallbackSpy.called, 'Success callback should not be called.' );
+					assert.isTrue( errorCallbackSpy.called, 'Error callback should be called.' );
+					assert.isTrue( createTaskSpy.calledOnce, 'Task should be created.' );
+					assert.isTrue( showNotificationSpy.calledOnce, 'Notification should be showed.' );
+					assert.areEqual( showNotificationSpy.firstCall.returnValue.type, 'warning', 'Notification should have "warning" type.' );
+				} );
+			};
+
+			widget.loadContent( '//error/show/notification', {
+				callback: successCallbackSpy,
+				errorCallback: errorCallbackSpy
+			} );
+
+			wait();
+		} );
+	},
+
+	'test if embedding notifications can be blocked during unsuccessful request': function() {
+		var bot = this.editorBots.inline,
+			editor = bot.editor,
+			successCallbackSpy = sinon.spy(),
+			errorCallbackSpy = sinon.spy(),
+			createTaskSpy = sinon.spy( CKEDITOR.plugins.notificationAggregator.prototype, 'createTask' ),
+			showNotificationSpy = sinon.spy( editor, 'showNotification' );
+
+		bot.setData( dataWithWidget, function() {
+			var widget = getWidgetById( editor, 'w1' );
+
+			jsonpCallback = function( urlTemplate, urlParams, callback, errorCallback ) {
+				resume( function() {
+					errorCallback();
+
+					createTaskSpy.restore();
+					showNotificationSpy.restore();
+
+					assert.isFalse( successCallbackSpy.called, 'Success callback should not be called.' );
+					assert.isTrue( errorCallbackSpy.called, 'Error callback should be called.' );
+					assert.isFalse( createTaskSpy.called, 'Task should not be created.' );
+					assert.isFalse( showNotificationSpy.called, 'Notification should not be showed.' );
+				} );
+			};
+
+			widget.loadContent( '//error/show/no-notification', {
+				callback: successCallbackSpy,
+				errorCallback: errorCallbackSpy,
+				noNotifications: true
+			} );
+
+			wait();
+		} );
+	}
+} );