Merge pull request #1147 from ckeditor/t/1145

Added skipNotifications option to upload widget definition

CHANGES.md

@@ -28,11 +28,13 @@ Fixed Issues:
 * [#1008](https://github.com/ckeditor/ckeditor-dev/issues/1008): Fixed: Shorthand Hex colors from the [`config.colorButton_colors`](https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-colorButton_colors) option are not correctly highlighted in the [Color Button](https://ckeditor.com/cke4/addon/colorbutton) Text Color or Background Color panel.
 * [#1094](https://github.com/ckeditor/ckeditor-dev/issues/1094): Fixed: Widget definition [`upcast`](https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.plugins.widget.definition-property-upcasts) methods are called for every element.
 * [#1057](https://github.com/ckeditor/ckeditor-dev/issues/1057): Fixed: The [Notification](https://ckeditor.com/addon/notification) plugin overwrites Web Notifications API due to leakage to the global scope.
+* [#1068](https://github.com/ckeditor/ckeditor-dev/issues/1068): Fixed: Upload widget paste listener ignores changes to the `uploadWidgetDefinition`.
 
 API Changes:
 
 * [#1097](https://github.com/ckeditor/ckeditor-dev/issues/1097): Widget [`upcast`](https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.plugins.widget.definition-property-upcast) methods are now called in the [widget definition's](https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.plugins.widget-property-definition) context.
 * [#1118](https://github.com/ckeditor/ckeditor-dev/issues/1118): Added the `show` option in the [`balloonPanel.attach`](https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.ui.balloonPanel-method-attach) method, allowing to attach a hidden [Balloon Panel](https://ckeditor.com/cke4/addon/balloonpanel) instance.
+* [#1145(]https://github.com/ckeditor/ckeditor-dev/issues/1145): Added the `skipNotifications` option to the [`CKEDITOR.fileTools.uploadWidgetDefinition`](https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.fileTools.uploadWidgetDefinition-property-skipNotifications), allowing to switch off default notifications displayed by upload widgets.
 
 Other Changes:
 

plugins/uploadwidget/plugin.js

@@ -173,6 +173,8 @@
 		if ( def.fileToElement ) {
 			editor.on( 'paste', function( evt ) {
 				var data = evt.data,
+					// Fetch runtime widget definition as it might get changed in editor#widgetDefinition event.
+					def = editor.widgets.registered[ name ],
 					dataTransfer = data.dataTransfer,
 					filesCount = dataTransfer.getFilesCount(),
 					loadMethod = def.loadMethod || 'loadAndUpload',
@@ -195,7 +197,7 @@
 
 							CKEDITOR.fileTools.markElement( el, name, loader.id );
 
-							if ( loadMethod == 'loadAndUpload' || loadMethod == 'upload' ) {
+							if ( ( loadMethod == 'loadAndUpload' || loadMethod == 'upload' ) && !def.skipNotifications ) {
 								CKEDITOR.fileTools.bindNotifications( editor, loader );
 							}
 
@@ -383,6 +385,16 @@
 			 * @property {String} [loadMethod=loadAndUpload]
 			 */
 
+			/**
+			 * Indicates whether default notification handling should be skipped.
+			 *
+			 * By default upload widget will use [Notification](https://ckeditor.com/cke4/addon/notification) plugin to provide
+			 * feedback for upload progress and eventual success / error message.
+			 *
+			 * @since 4.8.0
+			 * @property {Boolean} [skipNotifications=false]
+			 */
+
 			/**
 			 * A function called when the {@link CKEDITOR.fileTools.fileLoader#status status} of the upload changes to `loading`.
 			 *

tests/plugins/uploadwidget/manual/skipnotification.html

@@ -0,0 +1,21 @@
+<textarea cols="80" id="editor1" name="editor1" rows="10">
+	<p>Drop an image here.</p>
+</textarea>
+
+<script>
+	var editor = CKEDITOR.replace( 'editor1', {
+		uploadUrl: '%BASE_PATH%'
+	} );
+
+	editor.on( 'widgetDefinition', function( evt ) {
+		var definition = evt.data;
+
+		if ( definition.name === 'uploadimage' ) {
+			definition.skipNotifications = true;
+		}
+	} );
+
+	if ( CKEDITOR.env.ie && CKEDITOR.env.version < 10 ) {
+		bender.ignore();
+	}
+</script>

tests/plugins/uploadwidget/manual/skipnotification.md

@@ -0,0 +1,15 @@
+@bender-tags: 4.8.0, feature, 1145
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, toolbar, undo, uploadwidget, image, uploadimage, elementspath
+@bender-include: _helpers/xhr.js
+
+## Skipping Notifications
+
+1. Paste or drag and drop an image into editor.
+
+## Expected
+
+* No progress/success notification are shown.
+* Image is changed to Lena (after ~4 secs).
+
+**Note:** This test use upload mock which will show you *Lena* instead of the real uploaded image.

tests/plugins/uploadwidget/uploadwidget.js

@@ -61,7 +61,11 @@
 	function mockEditorForPaste() {
 		var editor = {
 			widgets: {
-				add: function() {}
+				add: function( name, def ) {
+					// Note that widget system makes a duplicate of a definition.
+					this.registered[ name ] = CKEDITOR.tools.prototypedCopy( def );
+				},
+				registered: {}
 			},
 			lang: {},
 			config: {}
@@ -507,6 +511,32 @@
 			wait();
 		},
 
+		// (#1068).
+		'test supports definition changes at a runtime': function() {
+			var editor = mockEditorForPaste();
+
+			addTestUploadWidget( editor, 'runtimeDefChanges', {
+				supportedTypes: /image\/png/,
+
+				loadMethod: 'upload',
+
+				fileToElement: function() {
+					return new CKEDITOR.dom.element( 'span' );
+				}
+			} );
+
+			// Change supported type, so that paste does not match.
+			editor.widgets.registered.runtimeDefChanges.supportedTypes = /text\/plain/;
+
+			resumeAfter( editor, 'paste', function() {
+				assert.areSame( 0, uploadCount, 'Upload call count' );
+			} );
+
+			pasteFiles( editor, [ bender.tools.getTestPngFile( 'test1.png' ) ] );
+
+			wait();
+		},
+
 		'test paste multiple files': function() {
 			var editor = mockEditorForPaste();
 
@@ -622,6 +652,24 @@
 			wait();
 		},
 
+		// (#1145).
+		'test uploadWidgetDefinition.skipNotifications': function() {
+			var editor = mockEditorForPaste();
+
+			addTestUploadWidget( editor, 'bindNotificationsWidget', {
+				skipNotifications: true
+			} );
+
+			resumeAfter( editor, 'paste', function() {
+				var spy = CKEDITOR.fileTools.bindNotifications;
+				assert.areSame( 0, spy.callCount, 'CKEDITOR.fileTools.bindNotifications call count' );
+			} );
+
+			pasteFiles( editor, [ bender.tools.getTestPngFile() ] );
+
+			wait();
+		},
+
 		'test undo and redo': function() {
 			var bot = this.editorBot,
 				editor = bot.editor,