Changeset 27438

Timestamp:

03/06/2014 05:45:26 PM (13 years ago)

Author:

wonderboymusic

Message:

Add a loading indicator to the Media Library.

Props kadamwhite, gcorne, kovshenin.
Fixes #24859.

Location:

trunk/src/wp-includes

Files:

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

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

@@ -1291 +1291 @@
 }
 
+.media-toolbar .spinner {
+        margin-top: 14px;
+}
+
 .media-sidebar .settings-save-status {
         background: #f5f5f5;

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

@@ -5255 +5255 @@
                         this.collection.on( 'add remove reset', this.updateContent, this );
                 },
+                toggleSpinner: function( state ) {
+                        if ( state ) {
+                                this.spinnerTimeout = _.delay(function( view ) {
+                                        view.toolbar.get( 'spinner' ).show();
+                                }, 600, this );
+                        } else {
+                                this.toolbar.get( 'spinner' ).hide();
+                                clearTimeout( this.spinnerTimeout );
+                        }
+                },
                 /**
                  * @returns {wp.media.view.AttachmentsBrowser} Returns itself to allow chaining
@@ -5291 +5301 @@
                         }
 
+                        this.toolbar.set( 'spinner', new media.view.Spinner({
+                                priority: -70
+                        }) );
+
                         if ( this.options.search ) {
                                 this.toolbar.set( 'search', new media.view.Search({
@@ -5315 +5329 @@
 
                         if ( ! this.collection.length ) {
-                                this.collection.more().done( function() {
+                                this.toggleSpinner( true );
+                                this.collection.more().done(function() {
                                         if ( ! view.collection.length ) {
                                                 view.createUploader();
                                         }
+                                        view.toggleSpinner( false );
                                 });
                         }
@@ -6314 +6330 @@
                 }
         });
+
+        /**
+         * wp.media.view.Spinner
+         *
+         * @constructor
+         * @augments wp.media.View
+         * @augments wp.Backbone.View
+         * @augments Backbone.View
+         */
+        media.view.Spinner = media.View.extend({
+                tagName:   'span',
+                className: 'spinner',
+
+                show: function() {
+                        this.$el.show();
+                        return this;
+                },
+
+                hide: function() {
+                        this.$el.hide();
+                        return this;
+                }
+        });
 }(jQuery, _));