Ticket #22796: 22796.2.diff

wp-includes/css/media-views.css

@@ -1249 +1249 @@
 /**
  * Spinner
  */
+
+.media-frame .spinner {
+        background: url(../images/wpspin.gif) no-repeat;
+        background-size: 16px 16px;
+        display: none;
+        opacity: 0.7;
+        filter: alpha(opacity=70);
+        width: 16px;
+        height: 16px;
+        margin: 0;
+}
+
 .media-sidebar .settings-save-status {
         background: #f5f5f5;
         float: right;
@@ -1257 +1269 @@
 }
 
 .media-sidebar .settings-save-status .spinner {
-        background: url(../images/wpspin.gif) no-repeat;
-        background-size: 16px 16px;
-        display: none;
-        float: right;
-        opacity: 0.7;
-        filter: alpha(opacity=70);
-        width: 16px;
-        height: 16px;
         margin: 0 5px 0;
 }
 
@@ -1397 +1401 @@
 .embed-url {
         display: block;
         position: relative;
-        height: 40px;
-        padding: 0 16px 16px;
+        padding: 0 16px 7px;
         margin: 0;
         z-index: 250;
         background: #fff;
@@ -1416 +1419 @@
         box-shadow: inset 2px 2px 4px -2px rgba( 0, 0, 0, 0.1 );
 }
 
+.media-frame .embed-url .spinner {
+        position: absolute;
+        top: 16px;
+        right: 26px;
+}
+
+.media-frame .embed-loading .embed-url .spinner {
+        display: block;
+}
+
 .embed-link-settings,
 .embed-image-settings {
         position: absolute;
@@ -1437 +1450 @@
 
 .media-embed .thumbnail img {
         max-height: 200px;
+        display: block;
 }
 
 .media-embed .thumbnail:after {
@@ -1652 +1666 @@
                 background-size: 134px 15px;
         }
 
-        .media-sidebar .settings-save-status .spinner {
+        .media-frame .spinner {
                 background-image: url(../images/wpspin-2x.gif);
         }
 }
+ No newline at end of file

wp-includes/js/autosave.js

@@ -230 +230 @@
         // delay that a bit to avoid some rare collisions while the DOM is being updated.
         setTimeout(function(){
                 jQuery(':button, :submit', '#submitpost').removeAttr('disabled');
-                jQuery('.spinner').hide();
+                jQuery('.spinner', '#submitpost').hide();
         }, 500);
 }
 

wp-includes/js/media-views.js

@@ -778 +778 @@
                 },
 
                 scan: function() {
-                        var attributes = { type: 'link' };
+                        var scanners,
+                                embed = this,
+                                attributes = {
+                                        type: 'link',
+                                        scanners: []
+                                };
 
-                        this.trigger( 'scan', attributes );
+                        // Scan is triggered with the list of `attributes` to set on the
+                        // state, useful for the 'type' attribute and 'scanners' attribute,
+                        // an array of promise objects for asynchronous scan operations.
+                        if ( this.props.get('url') )
+                                this.trigger( 'scan', attributes );
+
+                        if ( !! attributes.scanners.length ) {
+                                scanners = attributes.scanners = $.when.apply( $, attributes.scanners );
+                                scanners.always( function() {
+                                        if ( embed.get('scanners') === scanners )
+                                                embed.set( 'loading', false );
+                                });
+                        } else {
+                                attributes.scanners = null;
+                        }
+
+                        attributes.loading = !! attributes.scanners;
                         this.set( attributes );
                 },
 
@@ -788 +809 @@
                         var frame = this.frame,
                                 state = this,
                                 url = this.props.get('url'),
-                                image = new Image();
+                                image = new Image(),
+                                deferred = $.Deferred();
 
+                        attributes.scanners.push( deferred.promise() );
+
                         // Try to load the image and find its width/height.
                         image.onload = function() {
+                                deferred.resolve();
+
                                 if ( state !== frame.state() || url !== state.props.get('url') )
                                         return;
 
                                 state.set({
-                                        type:   'image',
+                                        type: 'image'
+                                });
+
+                                state.props.set({
                                         width:  image.width,
                                         height: image.height
                                 });
                         };
 
+                        image.onerror = deferred.reject;
                         image.src = url;
-
-                        // Check if the URL looks like an image; skew toward success.
-                        url = url.replace( /([?|#].*)$/, '' );
-                        if ( /\.(png|jpe?g|gif)$/i.test( url ) )
-                                attributes.type = 'image';
                 },
 
                 refresh: function() {
@@ -4147 +4172 @@
                         this.views.set([ this.url ]);
                         this.refresh();
                         this.model.on( 'change:type', this.refresh, this );
+                        this.model.on( 'change:loading', this.loading, this );
                 },
 
                 settings: function( view ) {
@@ -4172 +4198 @@
                                 model:      this.model.props,
                                 priority:   40
                         }) );
+                },
+
+                loading: function() {
+                        this.$el.toggleClass( 'embed-loading', this.model.get('loading') );
                 }
         });
 
@@ -4194 +4224 @@
                                 value: this.model.get('url') || ''
                         });
 
+                        this.spinner = this.make( 'span', {
+                                'class': 'spinner'
+                        });
+
                         this.$input = $( this.input );
-                        this.$el.append( this.input );
+                        this.$el.append([ this.input, this.spinner ]);
 
                         this.model.on( 'change:url', this.render, this );
                 },