Changeset 23110

Timestamp:

12/06/2012 11:12:59 PM (12 years ago)

Author:

ryan

Message:

When inserting from URL in the media modal, retain query params and properly insert the caption code.

Props koopersmith
fixes #22796

Location:

trunk/wp-includes

Files:

• css/media-views.css (modified) (6 diffs)
• js/autosave.js (modified) (1 diff)
• js/media-views.js (modified) (6 diffs)

trunk/wp-includes/css/media-views.css

@@ -1250 +1250 @@
  * 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;
@@ -1258 +1270 @@
 
 .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;
 }
@@ -1398 +1402 @@
     display: block;
     position: relative;
-    height: 40px;
-    padding: 0 16px 16px;
+    padding: 0 16px 7px;
     margin: 0;
     z-index: 250;
@@ -1417 +1420 @@
 }
 
+.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 {
@@ -1438 +1451 @@
 .media-embed .thumbnail img {
     max-height: 200px;
+    display: block;
 }
 
@@ -1653 +1667 @@
     }
 
-    .media-sidebar .settings-save-status .spinner {
+    .media-frame .spinner {
         background-image: url(../images/wpspin-2x.gif);
     }

trunk/wp-includes/js/autosave.js

@@ -231 +231 @@
     setTimeout(function(){
         jQuery(':button, :submit', '#submitpost').removeAttr('disabled');
-        jQuery('.spinner').hide();
+        jQuery('.spinner', '#submitpost').hide();
     }, 500);
 }

trunk/wp-includes/js/media-views.js

@@ -779 +779 @@
 
         scan: function() {
-            var attributes = { type: 'link' };
-
-            this.trigger( 'scan', attributes );
+            var scanners,
+                embed = this,
+                attributes = {
+                    type: 'link',
+                    scanners: []
+                };
+
+            // 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 );
         },
@@ -789 +810 @@
                 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
@@ -803 +832 @@
             };
 
+            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';
         },
 
@@ -4148 +4173 @@
             this.refresh();
             this.model.on( 'change:type', this.refresh, this );
+            this.model.on( 'change:loading', this.loading, this );
         },
 
@@ -4173 +4199 @@
                 priority:   40
             }) );
+        },
+
+        loading: function() {
+            this.$el.toggleClass( 'embed-loading', this.model.get('loading') );
         }
     });
@@ -4195 +4225 @@
             });
 
+            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 );