Changeset 23070

Timestamp:

12/05/2012 09:57:58 AM (11 years ago)

Author:

markjaquith

Message:

Implement tabbing between fields in the media modal. props lessbloat, koopersmith. fixes #22659

File:

• trunk/wp-includes/js/media-views.js (modified) (5 diffs)

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

@@ -1964 +1964 @@
     });
 
+    // wp.media.view.FocusManager
+    // ----------------------------
+    media.view.FocusManager = media.View.extend({
+        events: {
+            keydown: 'recordTab',
+            focusin: 'updateIndex'
+        },
+
+        focus: function() {
+            if ( _.isUndefined( this.index ) )
+                return;
+
+            // Update our collection of `$tabbables`.
+            this.$tabbables = this.$(':tabbable');
+
+            // If tab is saved, focus it.
+            this.$tabbables.eq( this.index ).focus();
+        },
+
+        recordTab: function( event ) {
+            // Look for the tab key.
+            if ( 9 !== event.keyCode )
+                return;
+
+            // First try to update the index.
+            if ( _.isUndefined( this.index ) )
+                this.updateIndex( event );
+
+            // If we still don't have an index, bail.
+            if ( _.isUndefined( this.index ) )
+                return;
+
+            var index = this.index + ( event.shiftKey ? -1 : 1 );
+
+            if ( index >= 0 && index < this.$tabbables.length )
+                this.index = index;
+            else
+                delete this.index;
+        },
+
+        updateIndex: function( event ) {
+            this.$tabbables = this.$(':tabbable');
+
+            var index = this.$tabbables.index( event.target );
+
+            if ( -1 === index )
+                delete this.index;
+            else
+                this.index = index;
+        }
+    });
+
     // wp.media.view.UploaderWindow
     // ----------------------------
@@ -2805 +2857 @@
 
             this.views.render();
+
             return this;
         },
@@ -3923 +3976 @@
         },
 
+        initialize: function() {
+            this.focusManager = new media.view.FocusManager({
+                el: this.el
+            });
+
+            media.view.Attachment.prototype.initialize.apply( this, arguments );
+        },
+
+        render: function() {
+            media.view.Attachment.prototype.render.apply( this, arguments );
+            this.focusManager.focus();
+            return this;
+        },
+
         deleteAttachment: function(event) {
             event.preventDefault();
@@ -3946 +4013 @@
 
         initialize: function() {
+            this.focusManager = new media.view.FocusManager({
+                el: this.el
+            });
+
             this.model.on( 'change:compat', this.render, this );
         },
@@ -3954 +4025 @@
                 return;
 
+            this.views.detach();
             this.$el.html( compat.item );
+            this.views.render();
+
+            this.focusManager.focus();
             return this;
         },