Merge branch 't/13213c' into major

Author: Reinmar

CHANGES.md

@@ -7,6 +7,7 @@ New Features:
 
 * [#13304](http://dev.ckeditor.com/ticket/13304): Added support for passing DOM elements to [`config.sharedSpaces`](http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-sharedSpaces). Thanks to [Undergrounder](https://github.com/Undergrounder)!
 * [#13215](http://dev.ckeditor.com/ticket/13215): Added ability to cancel fetching a resource by the Embed plugins.
+* [#13213](http://dev.ckeditor.com/ticket/13213): Added [`dialog#setState()`](http://docs.ckeditor.com/#!/api/CKEDITOR.dialog-method-setState) method and used in in Embed dialog to indicate that a resource is being loaded.
 * [#13337](http://dev.ckeditor.com/ticket/13337): Added the [`repository.onWidget()`](http://docs.ckeditor.com/#!/api/CKEDITOR.plugins.widget.repository-method-onWidget) method – a convenient way to listen to [widget](http://docs.ckeditor.com/#!/api/CKEDITOR.plugins.widget) events through the [repository](http://docs.ckeditor.com/#!/api/CKEDITOR.plugins.widget.repository).
 
 Fixed Issues:

plugins/dialog/plugin.js

@@ -1,4 +1,4 @@
-/**
+/**
  * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md or http://ckeditor.com/license
  */
@@ -43,6 +43,24 @@ CKEDITOR.DIALOG_RESIZE_HEIGHT = 2;
  */
 CKEDITOR.DIALOG_RESIZE_BOTH = 3;
 
+/**
+ * Dialog state when idle.
+ *
+ * @readonly
+ * @property {Number} [=1]
+ * @member CKEDITOR
+ */
+CKEDITOR.DIALOG_STATE_IDLE = 1;
+
+/**
+ * Dialog state when busy.
+ *
+ * @readonly
+ * @property {Number} [=2]
+ * @member CKEDITOR
+ */
+CKEDITOR.DIALOG_STATE_BUSY = 2;
+
 ( function() {
 	var cssLength = CKEDITOR.tools.cssLength;
 
@@ -323,6 +341,9 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
 			} );
 		}
 
+		// Set default dialog state.
+		this.state = CKEDITOR.DIALOG_STATE_IDLE;
+
 		if ( definition.onCancel ) {
 			this.on( 'cancel', function( evt ) {
 				if ( definition.onCancel.call( this, evt ) === false )
@@ -640,6 +661,14 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
 
 		for ( i = 0; i < buttons.length; i++ )
 			this._.buttons[ buttons[ i ].id ] = buttons[ i ];
+
+		/**
+		 * Current state of the dialog. Use {@link #setState} method to update it.
+		 * See {@link #event-state} event to know more.
+		 *
+		 * @readonly
+		 * @property {Number} [state=CKEDITOR.DIALOG_STATE_IDLE]
+		 */
 	};
 
 	// Focusable interface. Use it via dialog.addFocusable.
@@ -1078,6 +1107,9 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
 			this.foreach( function( contentObj ) {
 				contentObj.resetInitValue && contentObj.resetInitValue();
 			} );
+
+			// Reset dialog state back to IDLE, if busy (#13213).
+			this.setState( CKEDITOR.DIALOG_STATE_IDLE );
 		},
 
 		/**
@@ -1401,6 +1433,52 @@ CKEDITOR.DIALOG_RESIZE_BOTH = 3;
 				for ( var i = index + 1; i < this._.focusList.length; i++ )
 					this._.focusList[ i ].focusIndex++;
 			}
+		},
+
+		/**
+		 * Sets dialog {@link #property-state}.
+		 *
+		 * @since 4.5
+		 * @param {Number} state Either {@link CKEDITOR#DIALOG_STATE_IDLE} or {@link CKEDITOR#DIALOG_STATE_BUSY}.
+		 */
+		setState: function( state ) {
+			var oldState = this.state;
+
+			if ( oldState == state ) {
+				return;
+			}
+
+			this.state = state;
+
+			if ( state == CKEDITOR.DIALOG_STATE_BUSY ) {
+				// Insert the spinner on demand.
+				if ( !this.parts.spinner ) {
+					this.parts.spinner = CKEDITOR.document.createElement( 'div', {
+						attributes: {
+							'class': 'cke_dialog_spinner'
+						},
+						styles: {
+							'float': 'left',
+							'margin-right': '8px'
+						}
+					} );
+
+					this.parts.spinner.setHtml( '&#8987;' );
+					this.parts.spinner.appendTo( this.parts.title, 1 );
+				}
+
+				// Finally, show the spinner.
+				this.parts.spinner.show();
+
+				this.getButton( 'ok' ).disable();
+			} else if ( state == CKEDITOR.DIALOG_STATE_IDLE ) {
+				// Hide the spinner. But don't do anything if there is no spinner yet.
+				this.parts.spinner && this.parts.spinner.hide();
+
+				this.getButton( 'ok' ).enable();
+			}
+
+			this.fire( 'state', state );
 		}
 	};
 
@@ -3301,3 +3379,13 @@ CKEDITOR.plugins.add( 'dialog', {
  * @param {Number} data.width The new width.
  * @param {Number} data.height The new height.
  */
+
+/**
+ * Fired when a dialog state changes, usually by {@link CKEDITOR.dialog#setState}.
+ *
+ * @since 4.5
+ * @event state
+ * @member CKEDITOR.dialog
+ * @param data
+ * @param {Number} data The new state. Either {@link CKEDITOR#DIALOG_STATE_IDLE} or {@link CKEDITOR#DIALOG_STATE_BUSY}.
+ */

plugins/embedbase/dialogs/embedbase.js

@@ -17,19 +17,18 @@ CKEDITOR.dialog.add( 'embedBase', function( editor ) {
 
 		onLoad: function() {
 			var that = this,
-				okButton = that.getButton( 'ok' ),
 				loadContentRequest = null;
 
 			this.on( 'ok', function( evt ) {
 				// We're going to hide it manually, after remote response is fetched.
 				evt.data.hide = false;
 
-				// Disable the OK button for the time of loading, so user can't trigger multiple inserts.
-				okButton.disable();
-
 				// We don't want the widget system to finalize widget insertion (it happens with priority 20).
 				evt.stop();
 
+				// Indicate visually that waiting for the response (#13213).
+				that.setState( CKEDITOR.DIALOG_STATE_BUSY );
+
 				var url = that.getValueOf( 'info', 'url' );
 
 				loadContentRequest = that.widget.loadContent( url, {
@@ -64,7 +63,8 @@ CKEDITOR.dialog.add( 'embedBase', function( editor ) {
 			} );
 
 			function unlock() {
-				okButton.enable();
+				// Visual waiting indicator is no longer needed (#13213).
+				that.setState( CKEDITOR.DIALOG_STATE_IDLE );
 				loadContentRequest = null;
 			}
 		},

skins/kama/dialog.css

@@ -54,8 +54,6 @@ Comments in this file will give more details about each of the above blocks.
 	border: solid 1px #ddd;
 	padding: 5px;
 	background-color: #fff;
-	-moz-border-radius: 5px;
-	-webkit-border-radius: 5px;
 	border-radius: 5px;
 }
 
@@ -76,6 +74,59 @@ Comments in this file will give more details about each of the above blocks.
 	border-bottom: 1px solid #eee;
 }
 
+.cke_dialog_spinner
+{
+	border-radius: 50%;
+
+	width: 12px;
+	height: 12px;
+	overflow: hidden;
+
+	text-indent: -9999em;
+
+	border-top: 2px solid rgba(102, 102, 102, 0.2);
+	border-right: 2px solid rgba(102, 102, 102, 0.2);
+	border-bottom: 2px solid rgba(102, 102, 102, 0.2);
+	border-left: 2px solid rgba(102, 102, 102, 1);
+
+	-webkit-animation: dialog_spinner 1s infinite linear;
+	animation: dialog_spinner 1s infinite linear;
+}
+
+/* A GIF fallback for IE8 and IE9 which does not support CSS animations. */
+.cke_browser_ie8 .cke_dialog_spinner,
+.cke_browser_ie9 .cke_dialog_spinner
+{
+	background: url(images/spinner.gif) center top no-repeat;
+	width: 16px;
+	height: 16px;
+	border: 0;
+}
+
+@-webkit-keyframes dialog_spinner
+{
+	0% {
+		-webkit-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+	100% {
+		-webkit-transform: rotate(360deg);
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes dialog_spinner
+{
+	0% {
+		-webkit-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+	100% {
+		-webkit-transform: rotate(360deg);
+		transform: rotate(360deg);
+	}
+}
+
 /* The outer part of the dialog contants, which contains the contents body
    and the footer. */
 .cke_dialog_contents
@@ -85,10 +136,6 @@ Comments in this file will give more details about each of the above blocks.
 	border-bottom: none;
 	overflow: auto;
 	padding: 17px 10px 5px 10px;
-	-moz-border-radius-topleft: 5px;
-	-moz-border-radius-topright: 5px;
-	-webkit-border-top-left-radius: 5px;
-	-webkit-border-top-right-radius: 5px;
 	border-top-left-radius: 5px;
 	border-top-right-radius: 5px;
 	margin-top: 22px;
@@ -110,10 +157,6 @@ Comments in this file will give more details about each of the above blocks.
 	background-color: #ebebeb;
 	border: solid 1px #fff;
 	border-bottom: none;
-	-moz-border-radius-bottomleft: 5px;
-	-moz-border-radius-bottomright: 5px;
-	-webkit-border-bottom-left-radius: 5px;
-	-webkit-border-bottom-right-radius: 5px;
 	border-bottom-left-radius: 5px;
 	border-bottom-right-radius: 5px;
 }
@@ -457,8 +500,6 @@ a.cke_dialog_ui_button
 	border-collapse: separate;
 	cursor: default;
 
-	-moz-border-radius: 5px;
-	-webkit-border-radius: 5px;
 	border-radius: 5px;
 	background: transparent url(images/sprites.png) repeat-x scroll 0 -1069px;
 	text-align: center;