Changeset 23006

Timestamp:

12/04/2012 01:26:03 AM (12 years ago)

Author:

ryan

Message:

Final round of media UX improvements.

Props koopersmith
fixes #21390 #22502

Location:

trunk

Files:

• wp-admin/js/custom-background.js (modified) (1 diff)
• wp-admin/js/custom-header.js (modified) (1 diff)
• wp-includes/css/media-views-rtl.css (modified) (6 diffs)
• wp-includes/css/media-views.css (modified) (19 diffs)
• wp-includes/js/media-editor.js (modified) (3 diffs)
• wp-includes/js/media-views.js (modified) (82 diffs)
• wp-includes/media.php (modified) (6 diffs)

trunk/wp-admin/js/custom-background.js

@@ -38 +38 @@
             });
 
-            frame.toolbar.on( 'activate:select', function() {
-                frame.toolbar.view().set({
+            frame.on( 'toolbar:render:select', function( view ) {
+                view.set({
                     select: {
                         style: 'primary',

trunk/wp-admin/js/custom-header.js

@@ -25 +25 @@
             });
 
-            frame.toolbar.on( 'activate:select', function() {
-                frame.toolbar.view().set({
+            frame.on( 'toolbar:render:select', function( view ) {
+                view.set({
                     select: {
                         style: 'primary',

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

@@ -2 +2 @@
  * Modal
  */
-.media-modal-title {
-    left: auto;
-    right: 0;
-}
-
 .media-modal-close {
     right: auto;
-    left: 0;
+    left: 7px;
 }
 
@@ -15 +10 @@
  * Toolbar
  */
-.media-frame-toolbar > .media-toolbar {
-    left: 0;
-    right: 200px;
-}
-
-
 .media-toolbar-primary {
     float: left;
@@ -94 +83 @@
  */
 .media-menu {
-    left: auto;
-    right: 0;
     border-right: 0;
     border-left: 1px solid #d9d9d9;
@@ -102 +89 @@
 
 /**
+ * Router
+ */
+.media-router > a {
+    float: right;
+    border-right: 0;
+    border-left: 1px solid #dfdfdf;
+}
+.media-router > a:last-child {
+    border-left: 0;
+}
+
+/**
  * Frame
  */
-.media-frame .region-content {
+.media-frame-menu {
+    left: auto;
+    right: 0;
+}
+
+.media-frame-title,
+.media-frame-router,
+.media-frame-content,
+.media-frame-toolbar {
     left: 0;
     right: 200px;
+}
+
+.media-frame.hide-menu .media-frame-title,
+.media-frame.hide-menu .media-frame-router,
+.media-frame.hide-menu .media-frame-toolbar,
+.media-frame.hide-menu .media-frame-content {
+    right: 0;
+}
+
+.media-frame.hide-menu .media-frame-menu {
+    left: auto;
+    right: -200px;
 }
 
@@ -227 +246 @@
 
 /**
- * Selection Preview
- */
-.selected-img {
-    float: right;
-    margin-right: 0;
-    margin-left: 14px;
-}
-
-.selection-preview img {
-    float: right;
-    margin-left: 0;
-    margin-right: 1px;
-}
-
-.selection-preview .count {
-    right: auto;
-    left: 0;
-}
-
-.selection-preview .clear-selection {
-    float: right;
-}
-
-/**
  * Attachment Details
  */
@@ -290 +285 @@
  */
 @media only screen and (max-width: 900px) {
-    .media-frame .region-content,
-    .media-frame-toolbar > .media-toolbar {
+    .media-frame-title,
+    .media-frame-router,
+    .media-frame-content,
+    .media-frame-toolbar {
         left: 0;
         right: 140px;

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

@@ -81 +81 @@
 .media-modal {
     position: fixed;
-    top: 60px;
-    left: 40px;
-    right: 40px;
-    bottom: 40px;
+    top: 30px;
+    left: 30px;
+    right: 30px;
+    bottom: 30px;
     z-index: 160000;
 }
@@ -95 +95 @@
     bottom: 0;
     background: #000;
-    opacity: 0.8;
+    opacity: 0.7;
     z-index: 159900;
 }
 
-.media-modal-backdrop div,
-.uploader-window-content {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    right: 10px;
-    bottom: 10px;
-    border: 1px dashed rgba( 255, 255, 255, 0.5 );
-}
-
-.media-modal-title {
-    position: absolute;
-    top: -40px;
-    left: 0;
-    height: 40px;
-    padding: 0;
-    margin: 0;
-
-    line-height: 40px;
-    color: #fff;
-    font-size: 16px;
-    font-weight: 200;
-    text-shadow: 0 0 16px rgba( 0, 0, 0, 0.6 );
-}
-
 .media-modal-close {
     position: absolute;
-    top: -27px;
-    right: 0;
+    top: 7px;
+    right: 7px;
+    width: 30px;
+    height: 30px;
+    z-index: 1000;
+}
+.media-modal-close span {
+    display: block;
+    margin: 8px auto 0;
+    width: 15px;
     height: 15px;
-    width: 15px;
-    background-position: -80px 0;
+    background-position: -100px 0;
 }
 
@@ -164 +146 @@
     padding: 0 16px;
     border: 0 solid #dfdfdf;
-}
-
-.media-frame-toolbar > .media-toolbar {
-    top: auto;
-    left: 200px;
-    bottom: 0;
-    border-width: 1px 0 0 0;
-    box-shadow: 0 -4px 4px -4px rgba( 0, 0, 0, 0.1 );
-}
-
-.hide-toolbar .media-frame-toolbar > .media-toolbar {
-    bottom: -61px;
 }
 
@@ -237 +207 @@
     display: block;
     width: 100%;
-}
-
-.media-sidebar .selection-preview {
-    display: block;
-    padding-top: 5px;
 }
 
@@ -362 +327 @@
     top: 0;
     left: 0;
-    bottom: 0;
-    width: 199px;
+    right: 0;
+    bottom: 0;
     margin: 0;
     padding: 16px 0;
-    z-index: 200;
     border-right: 1px solid #d9d9d9;
     box-shadow: inset -6px 0 6px -6px rgba( 0, 0, 0, 0.2 );
@@ -375 +339 @@
 }
 
-.media-menu li {
+.media-menu > a {
+    display: block;
     position: relative;
     padding: 4px 20px;
@@ -383 +348 @@
     color: #21759B;
     text-shadow: 0 1px 0 #fff;
-}
-
-.media-menu-item {
-    cursor: pointer;
-}
-
-.media-menu li:hover {
+    text-decoration: none;
+}
+
+.media-menu > a:hover {
+    color: #21759B;
     background: rgba( 0, 0, 0, 0.04 );
+}
+
+.media-menu > a:active {
+    outline: none;
 }
 
@@ -408 +375 @@
 
 /**
+ * Menu
+ */
+.media-router {
+    position: relative;
+    padding: 0 6px;
+    margin: 0;
+    clear: both;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.media-router > a {
+    position: relative;
+    float: left;
+    padding: 2px 10px;
+    margin: 0;
+    height: 18px;
+    line-height: 18px;
+    font-size: 14px;
+    border-right: 1px solid #dfdfdf;
+    text-shadow: 0 1px 0 #fff;
+    text-decoration: none;
+}
+
+.media-router > a:last-child {
+    border-right: 0;
+}
+
+.media-router > a:active,
+.media-router > a:focus {
+    outline: none;
+}
+
+.media-router .active,
+.media-router .active:hover {
+    color: #333;
+}
+
+.media-router .active:after {
+    content: '';
+    display: block;
+    margin: -100px auto 0;
+    width: 7px;
+    height: 7px;
+    background: #fff;
+    box-shadow: 1px 1px 1px rgba( 0, 0, 0, 0.2 );
+    z-index: 300;
+
+    -webkit-transform: rotate( 45deg ) translate( 75px, 75px );
+    -moz-transform:    rotate( 45deg ) translate( 75px, 75px );
+    -ms-transform:     rotate( 45deg ) translate( 75px, 75px );
+    -o-transform:      rotate( 45deg ) translate( 75px, 75px );
+    transform:         rotate( 45deg ) translate( 75px, 75px );
+}
+
+/**
  * Frame
  */
@@ -419 +444 @@
 }
 
-.media-frame .region-content {
-    position: absolute;
-    top: 0;
+.media-frame-menu {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 199px;
+    z-index: 150;
+}
+
+.media-frame-title {
+    position: absolute;
+    top: 0;
+    left: 200px;
+    right: 0;
+    height: 45px;
+    z-index: 200;
+}
+
+.media-frame-router {
+    position: absolute;
+    top: 45px;
+    left: 200px;
+    right: 0;
+    height: 30px;
+    z-index: 200;
+    border-bottom: 1px solid #dfdfdf;
+    box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
+}
+
+.media-frame-content {
+    position: absolute;
+    top: 75px;
     left: 200px;
     right: 0;
@@ -431 +485 @@
 }
 
-.media-frame.hide-toolbar .region-content {
-    bottom: 0;
+.media-frame-toolbar {
+    position: absolute;
+    left: 200px;
+    right: 0;
+    bottom: 0;
+    height: 60px;
+    z-index: 100;
+    border: 0 solid #dfdfdf;
+    border-width: 1px 0 0 0;
+    box-shadow: 0 -4px 4px -4px rgba( 0, 0, 0, 0.1 );
+}
+
+.media-frame.hide-menu .media-frame-title,
+.media-frame.hide-menu .media-frame-router,
+.media-frame.hide-menu .media-frame-toolbar,
+.media-frame.hide-menu .media-frame-content {
+    left: 0;
+}
+
+.media-frame.hide-menu .media-frame-menu {
+    left: -200px;
+}
+
+.media-frame.hide-toolbar .media-frame-content {
+    bottom: 0;
+}
+
+.media-frame.hide-toolbar .media-frame-toolbar {
+    bottom: -61px;
+}
+
+.media-frame.hide-router .media-frame-content {
+    top: 45px;
+}
+
+.media-frame.hide-router .media-frame-router {
+    display: none;
+}
+
+.media-frame.hide-router .media-frame-title {
+    border-bottom: 1px solid #dfdfdf;
+    box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
 }
 
 .media-frame .media-toolbar .add-to-gallery {
     display: none;
+}
+
+.media-frame-title h1 {
+    padding: 0 16px;
+    font-size: 22px;
+    font-weight: 200;
+    line-height: 45px;
+    margin: 0;
 }
 
@@ -722 +824 @@
  */
 .media-frame .attachments-browser {
+    position: relative;
+    width: 100%;
+    height: 100%;
     overflow: hidden;
 }
@@ -904 +1009 @@
 
 .uploader-window-content {
-    border-color: #fff;
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    right: 10px;
+    bottom: 10px;
+    border: 1px dashed #fff;
 }
 
@@ -957 +1067 @@
 }
 
+.uploader-inline .has-upload-message .upload-ui {
+    margin: 0 0 4em;
+}
+
 .uploader-inline h3 {
     font-size: 20px;
@@ -962 +1076 @@
     font-weight: 200;
     margin-bottom: 1.6em;
+}
+
+.uploader-inline .has-upload-message .upload-instructions {
+    font-size: 14px;
+    color: #464646;
+    font-weight: normal;
 }
 
@@ -1059 +1179 @@
 }
 
-.media-selection .attachment img {
+.media-selection .attachment .icon {
     width: 50%;
 }
@@ -1096 +1216 @@
 .media-selection .attachment .filename {
     display: none;
-}
-
-/**
- * Selection Preview
- */
-.selection-preview {
-    position: relative;
-    height: 60px;
-    overflow: hidden;
-}
-
-.selected-img {
-    float: left;
-    position: relative;
-    margin-right: 14px;
-}
-
-.selection-preview img {
-    max-width: 40px;
-    max-height: 40px;
-    float: left;
-    margin-top: 6px;
-    margin-left: 1px;
-    border: 2px solid white;
-    box-shadow:
-        0 0 0 1px #ccc,
-        3px 3px 0 0 #fff,
-        3px 3px 0 1px #ccc,
-        6px 6px 0 0 #fff,
-        6px 6px 0 1px #ccc;
-}
-
-.selection-preview .selected-count-1 img {
-    margin-top: 8px;
-    box-shadow: 0 0 0 1px #ccc;
-}
-
-.selection-preview .selected-count-2 img {
-    margin-top: 7px;
-    box-shadow:
-        0 0 0 1px #ccc,
-        3px 3px 0 0 #fff,
-        3px 3px 0 1px #ccc;
-}
-
-.selection-preview .count {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    height: 16px;
-    min-width: 8px;
-    padding: 0 4px;
-    font-size: 12px;
-    text-align: center;
-    font-weight: bold;
-    color: #999;
-    background: #fff;
-    box-shadow: -1px -1px 2px -1px rgba( 0, 0, 0, 0.2 );
-}
-
-.selection-preview .clear-selection {
-    float: left;
-    line-height: 60px;
 }
 
@@ -1298 +1355 @@
     display: block;
     position: relative;
-    height: 75px;
-    padding: 16px 16px;
+    height: 40px;
+    padding: 0 16px 16px;
     margin: 0;
-    z-index: 50;
+    z-index: 250;
+    background: #fff;
     border-bottom: 1px solid #dfdfdf;
     box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
     font-size: 18px;
     font-weight: 200;
-}
-
-.embed-url span {
-    display: block;
-    padding: 4px 0 6px 2px;
 }
 
@@ -1325 +1378 @@
     position: absolute;
     background: #f5f5f5;
-    top: 108px;
+    top: 57px;
     left: 0;
     right: 0;
@@ -1389 +1442 @@
  */
 @media only screen and (max-width: 900px) {
-    .media-modal {
-        bottom: 20px;
-        left: 20px;
-        right: 20px;
-        top: 40px;
-    }
-
-    .media-modal-title {
-        height: 30px;
-        line-height: 30px;
-        top: -30px;
-    }
-
-    .media-modal-close {
-        top: -23px;
-    }
-
-    .media-modal-backdrop div,
-    .uploader-window-content {
-        top: 5px;
-        left: 5px;
-        right: 5px;
-        bottom: 5px;
-    }
-
-    .media-menu {
+    .media-frame-menu {
         width: 139px;
     }
 
-    .media-menu li {
+    .media-menu > a {
         padding: 4px 10px;
     }
 
-    .media-frame .region-content,
-    .media-frame-toolbar > .media-toolbar {
+    .media-frame-title,
+    .media-frame-router,
+    .media-frame-content,
+    .media-frame-toolbar {
         left: 140px;
     }

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

@@ -385 +385 @@
             workflow = workflows[ id ] = wp.media( _.defaults( options || {}, {
                 frame:    'post',
-                state:    'upload',
+                state:    'insert',
                 title:    wp.media.view.l10n.addMedia,
                 multiple: true
@@ -409 +409 @@
 
             workflow.state('embed').on( 'select', function() {
-                var embed = workflow.state().toJSON();
+                var state = workflow.state(),
+                    type = state.get('type'),
+                    embed = state.props.toJSON();
 
                 embed.url = embed.url || '';
 
-                if ( 'link' === embed.type ) {
+                if ( 'link' === type ) {
                     _.defaults( embed, {
                         title:   embed.url,
@@ -421 +423 @@
                     this.send.link( embed );
 
-                } else if ( 'image' === embed.type ) {
+                } else if ( 'image' === type ) {
                     _.defaults( embed, {
                         title:   embed.url,

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

@@ -69 +69 @@
      */
     media.controller.Region = function( options ) {
-        _.extend( this, _.pick( options || {}, 'id', 'controller', 'selector' ) );
-
-        this.on( 'activate:empty', this.empty, this );
-        this.mode('empty');
+        _.extend( this, _.pick( options || {}, 'id', 'view', 'selector' ) );
     };
 
@@ -78 +75 @@
     media.controller.Region.extend = Backbone.Model.extend;
 
-    _.extend( media.controller.Region.prototype, Backbone.Events, {
-        trigger: (function() {
-            var eventSplitter = /\s+/,
-                trigger = Backbone.Events.trigger;
-
-            return function( events ) {
-                var mode = ':' + this._mode,
-                    modeEvents = events.split( eventSplitter ).join( mode ) + mode;
-
-                trigger.apply( this, arguments );
-                trigger.apply( this, [ modeEvents ].concat( _.rest( arguments ) ) );
+    _.extend( media.controller.Region.prototype, {
+        mode: function( mode ) {
+            if ( ! mode )
+                return this._mode;
+
+            // Bail if we're trying to change to the current mode.
+            if ( mode === this._mode )
                 return this;
-            };
-        }()),
-
-        mode: function( mode ) {
-            if ( mode ) {
-                this.trigger( 'deactivate', this );
-                this._mode = mode;
-                return this.trigger( 'activate', this );
-            }
-            return this._mode;
-        },
-
-        view: function( view ) {
-            var previous = this._view,
-                mode = this._mode,
-                id = this.id;
-
-            // If no argument is provided, return the current view.
-            if ( ! view )
-                return previous;
-
-            // If we're attempting to switch to the current view, bail.
-            if ( view === previous )
+
+            this.trigger('deactivate');
+            this._mode = mode;
+            this.render( mode );
+            this.trigger('activate');
+            return this;
+        },
+
+        render: function( mode ) {
+            // If no mode is provided, just re-render the current mode.
+            // If the provided mode isn't active, perform a full switch.
+            if ( mode && mode !== this._mode )
+                return this.mode( mode );
+
+            var set = { view: null },
+                view;
+
+            this.trigger( 'create', set );
+            view = set.view;
+            this.trigger( 'render', view );
+            if ( view )
+                this.set( view );
+            return this;
+        },
+
+        get: function() {
+            return this.view.views.first( this.selector );
+        },
+
+        set: function( views, options ) {
+            if ( options )
+                options.add = false;
+            return this.view.views.set( this.selector, views, options );
+        },
+
+        trigger: function( event ) {
+            var base;
+            if ( ! this._mode )
                 return;
 
-            // Add classes to the new view.
-            if ( id )
-                view.$el.addClass( 'region-' + id );
-
-            if ( mode )
-                view.$el.addClass( 'mode-' + mode );
-
-            this.controller.views.set( this.selector, view );
-            this._view = view;
-        },
-
-        empty: function() {
-            this.view( new media.View() );
+            var args = _.toArray( arguments );
+            base = this.id + ':' + event;
+
+            // Trigger `region:action:mode` event.
+            args[0] = base + ':' + this._mode;
+            this.view.trigger.apply( this.view, args );
+
+            // Trigger `region:action` event.
+            args[0] = base;
+            this.view.trigger.apply( this.view, args );
+            return this;
         }
     });
@@ -209 +215 @@
     // ---------------------------
     media.controller.State = Backbone.Model.extend({
-        initialize: function() {
-            this.on( 'activate', this._activate, this );
+        constructor: function() {
+            this.on( 'activate', this._preActivate, this );
             this.on( 'activate', this.activate, this );
+            this.on( 'activate', this._postActivate, this );
             this.on( 'deactivate', this._deactivate, this );
             this.on( 'deactivate', this.deactivate, this );
             this.on( 'reset', this.reset, this );
-        },
-
+            this.on( 'ready', this._ready, this );
+            this.on( 'ready', this.ready, this );
+
+            this.on( 'change:menu', this._updateMenu, this );
+
+            Backbone.Model.apply( this, arguments );
+        },
+
+        ready: function() {},
         activate: function() {},
-        _activate: function() {
+        deactivate: function() {},
+        reset: function() {},
+
+        _ready: function() {
+            this._updateMenu();
+        },
+
+        _preActivate: function() {
             this.active = true;
-
-            this.menu();
-            this.toolbar();
-            this.content();
-        },
-
-        deactivate: function() {},
+        },
+
+        _postActivate: function() {
+            this.on( 'change:menu', this._menu, this );
+            this.on( 'change:titleMode', this._title, this );
+            this.on( 'change:content', this._content, this );
+            this.on( 'change:toolbar', this._toolbar, this );
+
+            this.frame.on( 'title:render:default', this._renderTitle, this );
+
+            this._title();
+            this._menu();
+            this._toolbar();
+            this._content();
+            this._router();
+        },
+
+
         _deactivate: function() {
             this.active = false;
-        },
-
-        reset: function() {},
-
-        menu: function() {
+
+            this.frame.off( 'title:render:default', this._renderTitle, this );
+
+            this.off( 'change:menu', this._menu, this );
+            this.off( 'change:titleMode', this._title, this );
+            this.off( 'change:content', this._content, this );
+            this.off( 'change:toolbar', this._toolbar, this );
+        },
+
+        _title: function() {
+            this.frame.title.render( this.get('titleMode') || 'default' );
+        },
+
+        _renderTitle: function( view ) {
+            view.$el.text( this.get('title') || '' );
+        },
+
+        _router: function() {
+            var router = this.frame.router,
+                mode = this.get('router'),
+                view;
+
+            this.frame.$el.toggleClass( 'hide-router', ! mode );
+            if ( ! mode )
+                return;
+
+            this.frame.router.render( mode );
+
+            view = router.get();
+            if ( view.select )
+                view.select( this.frame.content.mode() );
+        },
+
+        _menu: function() {
             var menu = this.frame.menu,
                 mode = this.get('menu'),
@@ -241 +302 @@
                 return;
 
-            if ( menu.mode() !== mode )
-                menu.mode( mode );
-
-            view = menu.view();
+            menu.mode( mode );
+
+            view = menu.get();
             if ( view.select )
                 view.select( this.id );
+        },
+
+        _updateMenu: function() {
+            var previous = this.previous('menu'),
+                menu = this.get('menu');
+
+            if ( previous )
+                this.frame.off( 'menu:render:' + previous, this._renderMenu, this );
+
+            if ( menu )
+                this.frame.on( 'menu:render:' + menu, this._renderMenu, this );
+        },
+
+        _renderMenu: function( view ) {
+            var menuItem = this.get('menuItem'),
+                title = this.get('title'),
+                priority = this.get('priority');
+
+            if ( ! menuItem && title ) {
+                menuItem = { text: title };
+
+                if ( priority )
+                    menuItem.priority = priority;
+            }
+
+            if ( ! menuItem )
+                return;
+
+            view.set( this.id, menuItem );
         }
     });
 
     _.each(['toolbar','content'], function( region ) {
-        media.controller.State.prototype[ region ] = function() {
+        media.controller.State.prototype[ '_' + region ] = function() {
             var mode = this.get( region );
             if ( mode )
-                this.frame[ region ].mode( mode );
+                this.frame[ region ].render( mode );
         };
     });
@@ -263 +352 @@
         defaults: {
             id:         'library',
-            multiple:   false,
+            multiple:   false, // false, 'add', 'reset'
             describe:   false,
-            toolbar:    'main-attachments',
+            toolbar:    'select',
             sidebar:    'settings',
-            content:    'browse',
+            content:    'upload',
+            router:     'browse',
             searchable: true,
             filterable: false,
-            uploads:    true,
-            sortable:   true
+            sortable:   true,
+            title:      l10n.mediaLibraryTitle,
+
+            // Uses a user setting to override the content mode.
+            contentUserSetting: true,
+
+            // Sync the selection from the last state when 'multiple' matches.
+            syncLastSelection: true
         },
 
@@ -291 +387 @@
 
             this.resetDisplays();
-
-            media.controller.State.prototype.initialize.apply( this, arguments );
         },
 
         activate: function() {
             var library = this.get('library'),
-                selection = this.get('selection');
+                selection = this.get('selection'),
+                mode;
+
+            if ( this.get('syncLastSelection') ) {
+                this.getLastSelection();
+            }
 
             this._excludeStateLibrary();
@@ -304 +403 @@
             this.on( 'change:excludeState', this._excludeState, this );
 
-            // If we're in a workflow that supports multiple attachments,
-            // automatically select any uploading attachments.
-            if ( this.get('multiple') )
-                wp.Uploader.queue.on( 'add', this.selectUpload, this );
+            wp.Uploader.queue.on( 'add', this.uploading, this );
 
             selection.on( 'add remove reset', this.refreshSelection, this );
 
-            this.refresh();
             this.on( 'insert', this._insertDisplaySettings, this );
+
+            if ( this.get('contentUserSetting') ) {
+                this.frame.on( 'content:activate', this.saveContentMode, this );
+                this.set( 'content', getUserSetting( 'libraryContent', this.get('content') ) );
+            }
         },
 
         deactivate: function() {
+            this.frame.off( 'content:activate', this.saveContentMode, this );
+
             // Unbind all event handlers that use this state as the context
             // from the selection.
@@ -331 +433 @@
             this.get('selection').reset();
             this.resetDisplays();
-        },
-
-        refresh: function() {
-            this.content();
-            this.refreshSelection();
+            this.refreshContent();
         },
 
@@ -372 +470 @@
         },
 
+        getLastSelection: function() {
+            var selection = this.get('selection'),
+                lastState = this.frame.lastState(),
+                lastSelection = lastState && lastState.get('selection'),
+                lastMultiple, thisMultiple;
+
+            if ( ! lastSelection )
+                return;
+
+            // We don't care about the method of multiple selection the
+            // selections use, just that they both support (or don't support)
+            // multiple selection.
+            lastMultiple = !! lastSelection.multiple;
+            thisMultiple = !! selection.multiple;
+
+            if ( lastMultiple !== thisMultiple )
+                return;
+
+            selection.reset( lastSelection.toArray() ).single( lastSelection.single() );
+        },
+
         refreshSelection: function() {
+            this.frame.toolbar.get().refresh();
+            this.trigger( 'refresh:selection', this, this.get('selection') );
+            this.refreshContent();
+        },
+
+        refreshContent: function() {
             var selection = this.get('selection'),
-                mode = this.frame.content.mode();
-
-            this.frame.toolbar.view().refresh();
-            this.trigger( 'refresh:selection', this, selection );
-
-            if ( ! selection.length && 'browse' !== mode && 'upload' !== mode )
-                this.content();
-        },
-
-        selectUpload: function( attachment ) {
-            this.get('selection').add( attachment );
+                frame = this.frame,
+                router = frame.router.get(),
+                mode = frame.content.mode();
+
+            if ( this.active&& ! selection.length && ! router.get( mode ) )
+                this.frame.content.render( this.get('content') );
+        },
+
+        uploading: function( attachment ) {
+            var content = this.frame.content;
+
+            // If the uploader was selected, navigate to the browser.
+            if ( 'upload' === content.mode() )
+                this.frame.content.mode('browse');
+
+            // If we're in a workflow that supports multiple attachments,
+            // automatically select any uploading attachments.
+            if ( this.get('multiple') )
+                this.get('selection').add( attachment );
+        },
+
+        saveContentMode: function() {
+            // Only track the browse router on library states.
+            if ( 'browse' !== this.get('router') )
+                return;
+
+            var mode = this.frame.content.mode(),
+                view = this.frame.router.get();
+
+            if ( view && view.get( mode ) )
+                setUserSetting( 'libraryContent', mode );
         },
 
@@ -449 +594 @@
     });
 
-
-    // wp.media.controller.Upload
-    // ---------------------------
-    media.controller.Upload = media.controller.State.extend({
-        defaults: _.defaults({
-            id:      'upload',
-            content: 'upload',
-            toolbar: 'empty',
-            uploads: true,
-
-            // The state to navigate to when files are uploading.
-            libraryState: 'library'
-        }, media.controller.State.prototype.defaults ),
-
-        initialize: function() {
-            media.controller.State.prototype.initialize.apply( this, arguments );
-        },
-
-        activate: function() {
-            wp.Uploader.queue.on( 'add', this.uploading, this );
-            media.controller.State.prototype.activate.apply( this, arguments );
-        },
-
-        deactivate: function() {
-            wp.Uploader.queue.off( null, null, this );
-            media.controller.State.prototype.deactivate.apply( this, arguments );
-        },
-
-        uploading: function( attachment ) {
-            var library = this.get('libraryState');
-
-            this.frame.state( library ).get('selection').add( attachment );
-            this.frame.setState( library );
-        }
-    });
-
-    // wp.media.controller.Gallery
-    // ---------------------------
-    media.controller.Gallery = media.controller.Library.extend({
+    // wp.media.controller.GalleryEdit
+    // -------------------------------
+    media.controller.GalleryEdit = media.controller.Library.extend({
         defaults: {
             id:         'gallery-edit',
@@ -497 +606 @@
             searchable: false,
             toolbar:    'gallery-edit',
-            content:    'browse'
+            content:    'browse',
+            title:      l10n.editGalleryTitle,
+            priority:   60,
+            dragInfo:   true
         },
 
@@ -520 +632 @@
             this.get('library').observe( wp.Uploader.queue );
 
-            this.frame.content.on( 'activate:browse', this.gallerySettings, this );
+            this.frame.on( 'content:render:browse', this.gallerySettings, this );
 
             media.controller.Library.prototype.activate.apply( this, arguments );
@@ -529 +641 @@
             this.get('library').unobserve( wp.Uploader.queue );
 
-            this.frame.content.off( null, null, this );
+            this.frame.off( 'content:render:browse', this.gallerySettings, this );
+
             media.controller.Library.prototype.deactivate.apply( this, arguments );
         },
 
-        gallerySettings: function() {
-            var library = this.get('library'),
-                browser;
-
-            if ( ! library )
+        gallerySettings: function( browser ) {
+            var library = this.get('library');
+
+            if ( ! library || ! browser )
                 return;
 
             library.gallery = library.gallery || new Backbone.Model();
-
-            browser = this.frame.content.view();
 
             browser.sidebar.set({
@@ -571 +681 @@
             multiple:   false,
             menu:       'main',
-            toolbar:    'featured-image'
+            toolbar:    'featured-image',
+            title:      l10n.featuredImageTitle,
+            priority:   60
         }, media.controller.Library.prototype.defaults ),
 
@@ -630 +742 @@
             content: 'embed',
             toolbar: 'main-embed',
-            type:    'link'
+            type:    'link',
+
+            title:    l10n.fromUrlTitle,
+            priority: 120
         },
 
@@ -638 +753 @@
         initialize: function() {
             this.debouncedScan = _.debounce( _.bind( this.scan, this ), this.sensitivity );
-            this.on( 'change:url', this.debouncedScan, this );
+            this.props = new Backbone.Model({ url: '' });
+            this.props.on( 'change:url', this.debouncedScan, this );
             this.on( 'scan', this.scanImage, this );
-            media.controller.State.prototype.initialize.apply( this, arguments );
         },
 
@@ -653 +768 @@
             var frame = this.frame,
                 state = this,
-                url = this.get('url'),
+                url = this.props.get('url'),
                 image = new Image();
 
             image.onload = function() {
-                if ( state !== frame.state() || url !== state.get('url') )
+                if ( state !== frame.state() || url !== state.props.get('url') )
                     return;
 
@@ -671 +786 @@
 
         reset: function() {
-            _.each( _.difference( _.keys( this.attributes ), _.keys( this.defaults ) ), function( key ) {
-                this.unset( key );
-            }, this );
-
-            this.set( 'url', '' );
+            this.props = new Backbone.Model({ url: '' });
 
             if ( this.id === this.frame.state().id )
-                this.frame.toolbar.view().refresh();
+                this.frame.toolbar.get().refresh();
         }
     });
@@ -1023 +1134 @@
         Views: media.Views,
 
-        constructor: function() {
+        constructor: function( options ) {
             this.views = new this.Views( this, this.views );
             this.on( 'ready', this.ready, this );
+
+            if ( options && options.controller )
+                this.controller = options.controller;
+
             Backbone.View.apply( this, arguments );
         },
@@ -1098 +1213 @@
             _.each( this.regions, function( region ) {
                 this[ region ] = new media.controller.Region({
-                    controller: this,
-                    id:         region,
-                    selector:   '.media-frame-' + region
+                    view:     this,
+                    id:       region,
+                    selector: '.media-frame-' + region
                 });
             }, this );
@@ -1114 +1229 @@
             this.states.on( 'add', function( model ) {
                 model.frame = this;
+                model.trigger('ready');
             }, this );
         },
@@ -1132 +1248 @@
         className: 'media-frame',
         template:  media.template('media-frame'),
-        regions:   ['menu','content','toolbar'],
+        regions:   ['menu','title','content','toolbar','router'],
 
         initialize: function() {
@@ -1174 +1290 @@
 
             this.on( 'attach', _.bind( this.views.ready, this.views ), this );
+
+            // Bind default title creation.
+            this.on( 'title:create:default', this.createTitle, this );
+            this.title.mode('default');
         },
 
@@ -1182 +1302 @@
 
             return media.view.Frame.prototype.render.apply( this, arguments );
+        },
+
+        createTitle: function( title ) {
+            title.view = new media.View({
+                controller: this,
+                tagName: 'h1'
+            });
+        },
+
+        createMenu: function( menu ) {
+            menu.view = new media.view.Menu({
+                controller: this
+            });
+        },
+
+        createToolbar: function( toolbar ) {
+            menu.view = new media.view.Toolbar({
+                controller: this
+            });
+        },
+
+        createRouter: function( router ) {
+            router.view = new media.view.Router({
+                controller: this
+            });
         },
 
@@ -1209 +1354 @@
             }, this );
 
-            this.content.on( 'activate:iframe', this.iframeContent, this );
-            this.menu.on( 'activate:main', this.iframeMenu, this );
+            this.on( 'content:create:iframe', this.iframeContent, this );
+            this.on( 'menu:render:main', this.iframeMenu, this );
             this.on( 'open', this.hijackThickbox, this );
             this.on( 'close', this.restoreThickbox, this );
         },
 
-        iframeContent: function() {
+        iframeContent: function( content ) {
             this.$el.addClass('hide-toolbar');
-            this.content.view( new media.view.Iframe({
+            content.view = new media.view.Iframe({
                 controller: this
-            }).render() );
-        },
-
-        iframeMenu: function() {
+            });
+        },
+
+        iframeMenu: function( view ) {
             var views = {};
+
+            if ( ! view )
+                return;
 
             _.each( media.view.settings.tabs, function( title, id ) {
@@ -1232 +1380 @@
             }, this );
 
-            this.menu.view().set( views );
+            view.set( views );
         },
 
@@ -1306 +1454 @@
                     selection: options.selection,
                     library:   media.query( options.library ),
-                    multiple:  this.options.multiple,
+                    multiple:  options.multiple,
                     menu:      'main',
-                    toolbar:   'select'
-                }),
-
-                new media.controller.Upload({
-                    menu: 'main'
+                    title:     options.title,
+                    priority:  20
                 })
             ]);
@@ -1318 +1463 @@
 
         bindHandlers: function() {
-            this.menu.on( 'activate:main', this.mainMenu, this );
-            this.content.on( 'activate:browse', this.browseContent, this );
-            this.content.on( 'activate:upload', this.uploadContent, this );
-            this.toolbar.on( 'activate:select', this.selectToolbar, this );
+            this.on( 'menu:create:main', this.createMenu, this );
+            this.on( 'router:create:browse', this.createRouter, this );
+            this.on( 'router:render:browse', this.browseRouter, this );
+            this.on( 'content:create:browse', this.browseContent, this );
+            this.on( 'content:render:upload', this.uploadContent, this );
+            this.on( 'toolbar:create:select', this.createSelectToolbar, this );
 
             this.on( 'refresh:selection', this.refreshSelectToolbar, this );
         },
 
-        mainMenu: function( options ) {
-            this.menu.view( new media.view.Menu({
-                controller: this,
-                silent:     options && options.silent,
-
-                views: {
-                    upload: {
-                        text: l10n.uploadFilesTitle,
-                        priority: 20
-                    },
-                    library: {
-                        text: l10n.mediaLibraryTitle,
-                        priority: 40
-                    }
+        // Routers
+        browseRouter: function( view ) {
+            view.set({
+                upload: {
+                    text:     l10n.uploadFilesTitle,
+                    priority: 20
+                },
+                browse: {
+                    text:     l10n.mediaLibraryTitle,
+                    priority: 40
                 }
-            }) );
+            });
         },
 
         // Content
-        browseContent: function() {
+        browseContent: function( content ) {
             var state = this.state();
 
@@ -1351 +1494 @@
 
             // Browse our library of attachments.
-            this.content.view( new media.view.AttachmentsBrowser({
+            content.view = new media.view.AttachmentsBrowser({
                 controller: this,
                 collection: state.get('library'),
@@ -1358 +1501 @@
                 sortable:   state.get('sortable'),
                 search:     state.get('searchable'),
-                uploads:    state.get('uploads'),
                 filters:    state.get('filterable'),
                 display:    state.get('displaySettings'),
+                dragInfo:   state.get('dragInfo'),
 
                 AttachmentView: state.get('AttachmentView')
-            }) );
+            });
         },
 
         uploadContent: function() {
-            this.$el.addClass('hide-toolbar');
-
-            this.content.view( new media.view.UploaderInline({
+            this.$el.removeClass('hide-toolbar');
+            this.content.set( new media.view.UploaderInline({
                 controller: this
             }) );
@@ -1375 +1517 @@
 
         // Toolbars
-        selectToolbar: function( options ) {
+        createSelectToolbar: function( toolbar, options ) {
             options = _.defaults( options || {}, {
                 event:  'select',
@@ -1382 +1524 @@
             });
 
-            this.toolbar.view( new media.view.Toolbar({
+            toolbar.view = new media.view.Toolbar({
                 controller: this,
                 silent:     options.silent,
@@ -1403 +1545 @@
                     }
                 }
-            }) );
+            });
         },
 
@@ -1412 +1554 @@
                 return;
 
-            this.toolbar.view().get('select').model.set( 'disabled', ! selection.length );
+            this.toolbar.get().get('select').model.set( 'disabled', ! selection.length );
         }
     });
@@ -1431 +1573 @@
 
         createStates: function() {
-            var options = this.options;
+            var options = this.options,
+                selection = options.selection;
 
             // Add the default states.
@@ -1437 +1580 @@
                 // Main states.
                 new media.controller.Library({
-                    selection:  options.selection,
+                    id:         'insert',
+                    title:      l10n.insertMediaTitle,
+                    priority:   20,
+                    menu:       'main',
+                    toolbar:    'main-insert',
+                    filterable: 'all',
                     library:    media.query( options.library ),
+                    selection:  selection,
+                    multiple:   options.multiple ? 'reset' : false,
                     editable:   true,
-                    filterable: 'all',
-                    multiple:   this.options.multiple,
-                    menu:       'main',
 
                     // Show the attachment display settings.
@@ -1451 +1598 @@
                 }),
 
-                new media.controller.Upload({
-                    menu: 'main'
+                new media.controller.Library({
+                    id:         'gallery',
+                    title:      l10n.createGalleryTitle,
+                    priority:   40,
+                    menu:       'main',
+                    toolbar:    'main-gallery',
+                    filterable: 'uploaded',
+                    multiple:   'add',
+                    editable:   true,
+
+                    library:  media.query( _.defaults({
+                        type: 'image'
+                    }, options.library ) ),
+
+                    selection: new media.model.Selection( selection.models, {
+                        multiple: 'add'
+                    })
                 }),
 
@@ -1459 +1621 @@
 
                 // Gallery states.
-                new media.controller.Gallery({
+                new media.controller.GalleryEdit({
                     library: options.selection,
                     editing: options.editing,
@@ -1469 +1631 @@
                     library:      media.query({ type: 'image' }),
                     filterable:   'uploaded',
-                    multiple:     true,
+                    multiple:     'add',
                     menu:         'gallery',
                     toolbar:      'gallery-add',
-                    excludeState: 'gallery-edit'
-                }),
-
-                new media.controller.Upload({
-                    id:           'gallery-upload',
-                    menu:         'gallery',
-                    libraryState: 'gallery-edit'
+                    excludeState: 'gallery-edit',
+                    title:        l10n.addToGalleryTitle,
+                    priority:     100
                 })
             ]);
@@ -1493 +1651 @@
         bindHandlers: function() {
             media.view.MediaFrame.Select.prototype.bindHandlers.apply( this, arguments );
+            this.on( 'menu:create:gallery', this.createMenu, this );
+            this.on( 'toolbar:create:main-insert', this.createSelectionToolbar, this );
+            this.on( 'toolbar:create:main-gallery', this.createSelectionToolbar, this );
 
             var handlers = {
                     menu: {
+                        'main':    'mainMenu',
                         'gallery': 'galleryMenu'
                     },
@@ -1505 +1667 @@
 
                     toolbar: {
-                        'main-attachments': 'mainAttachmentsToolbar',
+                        'main-insert':      'mainInsertToolbar',
+                        'main-gallery':     'mainGalleryToolbar',
                         'main-embed':       'mainEmbedToolbar',
                         'featured-image':   'featuredImageToolbar',
@@ -1515 +1678 @@
             _.each( handlers, function( regionHandlers, region ) {
                 _.each( regionHandlers, function( callback, handler ) {
-                    this[ region ].on( 'activate:' + handler, this[ callback ], this );
+                    this.on( region + ':render:' + handler, this[ callback ], this );
                 }, this );
             }, this );
@@ -1521 +1684 @@
 
         // Menus
-        mainMenu: function() {
-            media.view.MediaFrame.Select.prototype.mainMenu.call( this, { silent: true });
-
-            this.menu.view().set({
+        mainMenu: function( view ) {
+            view.set({
                 'library-separator': new media.View({
                     className: 'separator',
-                    priority: 60
-                }),
-                'embed': {
-                    text: l10n.fromUrlTitle,
-                    priority: 80
-                }
-            });
-
-            if ( media.view.settings.post.featuredImageId ) {
-                this.menu.view().set( 'featured-image', {
-                    text: l10n.featuredImageTitle,
                     priority: 100
-                });
-            }
-        },
-
-        galleryMenu: function() {
+                })
+            });
+        },
+
+        galleryMenu: function( view ) {
             var lastState = this.lastState(),
                 previous = lastState && lastState.id,
                 frame = this;
 
-            this.menu.view( new media.view.Menu({
-                controller: this,
-                views: {
-                    cancel: {
-                        text:     l10n.cancelGalleryTitle,
-                        priority: 20,
-                        click:    function() {
-                            if ( previous )
-                                frame.setState( previous );
-                            else
-                                frame.close();
-                        }
-                    },
-                    separateCancel: new media.View({
-                        className: 'separator',
-                        priority: 40
-                    }),
-                    'gallery-edit': {
-                        text: l10n.editGalleryTitle,
-                        priority: 60
-                    },
-                    'gallery-upload': {
-                        text: l10n.uploadImagesTitle,
-                        priority: 80
-                    },
-                    'gallery-library': {
-                        text: l10n.mediaLibraryTitle,
-                        priority: 100
+            view.set({
+                cancel: {
+                    text:     l10n.cancelGalleryTitle,
+                    priority: 20,
+                    click:    function() {
+                        if ( previous )
+                            frame.setState( previous );
+                        else
+                            frame.close();
                     }
-                }
-            }) );
+                },
+                separateCancel: new media.View({
+                    className: 'separator',
+                    priority: 40
+                })
+            });
         },
 
@@ -1588 +1723 @@
             }).render();
 
-            this.content.view( view );
+            this.content.set( view );
             view.url.focus();
         },
@@ -1604 +1739 @@
                 sortable:   true,
                 search:     false,
+                dragInfo:   true,
 
                 AttachmentView: media.view.Attachment.EditSelection
@@ -1618 +1754 @@
 
             // Browse our library of attachments.
-            this.content.view( view );
-        },
-
-        // Sidebars
-        onSidebarGallerySettings: function( options ) {
-            var library = this.state().get('library');
-
-            if ( ! library )
-                return;
-
-            library.gallery = library.gallery || new Backbone.Model();
-
-            this.sidebar.view().set({
-                gallery: new media.view.Settings.Gallery({
-                    controller: this,
-                    model:      library.gallery,
-                    priority:   40
-                }).render()
-            }, options );
+            this.content.set( view );
         },
 
         // Toolbars
-        mainAttachmentsToolbar: function() {
-            this.toolbar.view( new media.view.Toolbar.Insert({
+        createSelectionToolbar: function( toolbar ) {
+            toolbar.view = new media.view.Toolbar.Selection({
                 controller: this,
                 editable:   this.state().get('editable')
-            }) );
+            });
+        },
+
+        mainInsertToolbar: function( view ) {
+            var controller = this;
+
+            view.button = 'insert';
+            view.set( 'insert', {
+                style:    'primary',
+                priority: 80,
+                text:     l10n.insertIntoPost,
+
+                click: function() {
+                    var state = controller.state(),
+                        selection = state.get('selection');
+
+                    controller.close();
+                    state.trigger( 'insert', selection ).reset();
+                }
+            });
+        },
+
+        mainGalleryToolbar: function( view ) {
+            var controller = this;
+
+            view.button = 'gallery';
+            view.set( 'gallery', {
+                style:    'primary',
+                text:     l10n.createNewGallery,
+                priority: 60,
+
+                click: function() {
+                    var selection = controller.state().get('selection'),
+                        edit = controller.state('gallery-edit'),
+                        models = selection.where({ type: 'image' });
+
+                    edit.set( 'library', new media.model.Selection( models, {
+                        props:    selection.props.toJSON(),
+                        multiple: true
+                    }) );
+
+                    this.controller.setState('gallery-edit');
+                }
+            });
         },
 
         featuredImageToolbar: function() {
-            this.toolbar.view( new media.view.Toolbar.Select({
+            this.toolbar.set( new media.view.Toolbar.Select({
                 controller: this,
                 text:       l10n.setFeaturedImage,
@@ -1656 +1817 @@
 
         mainEmbedToolbar: function() {
-            this.toolbar.view( new media.view.Toolbar.Embed({
+            this.toolbar.set( new media.view.Toolbar.Embed({
                 controller: this
             }) );
@@ -1665 +1826 @@
         galleryEditToolbar: function() {
             var editing = this.state().get('editing');
-            this.toolbar.view( new media.view.Toolbar({
+            this.toolbar.set( new media.view.Toolbar({
                 controller: this,
                 items: {
@@ -1690 +1851 @@
 
         galleryAddToolbar: function() {
-            this.toolbar.view( new media.view.Toolbar({
+            this.toolbar.set( new media.view.Toolbar({
                 controller: this,
                 items: {
@@ -1705 +1866 @@
                             edit.get('library').add( state.get('selection').models );
                             state.trigger('reset');
-                            controller.state('gallery-edit');
+                            controller.setState('gallery-edit');
                         }
                     }
@@ -1730 +1891 @@
 
         initialize: function() {
-            this.controller = this.options.controller;
-
             _.defaults( this.options, {
                 container: document.body,
@@ -1839 +1998 @@
             var uploader;
 
-            this.controller = this.options.controller;
-
             this.$browser = $('<a href="#" class="browser" />').hide().appendTo('body');
 
@@ -1907 +2064 @@
 
         initialize: function() {
-            this.controller = this.options.controller;
+            _.defaults( this.options, {
+                message: '',
+                status:  true
+            });
 
             if ( ! this.options.$browser && this.controller.uploader )
@@ -1915 +2075 @@
                 this.options.postId = media.view.settings.post.id;
 
-            this.views.set( '.upload-inline-status', new media.view.UploaderStatus({
-                controller: this.controller
-            }) );
+            if ( this.options.status ) {
+                this.views.set( '.upload-inline-status', new media.view.UploaderStatus({
+                    controller: this.controller
+                }) );
+            }
         },
 
@@ -1952 +2114 @@
 
         initialize: function() {
-            this.controller = this.options.controller;
-
             this.queue = wp.Uploader.queue;
             this.queue.on( 'add remove reset', this.visibility, this );
@@ -2061 +2221 @@
 
         initialize: function() {
-            this.controller = this.options.controller;
-
             this._views     = {};
             this.$primary   = $('<div class="media-toolbar-primary" />').prependTo( this.$el );
@@ -2200 +2358 @@
     media.view.Toolbar.Embed = media.view.Toolbar.Select.extend({
         initialize: function() {
-            var controller = this.options.controller;
-
             _.defaults( this.options, {
                 text: l10n.insertIntoPost
@@ -2207 +2363 @@
 
             media.view.Toolbar.Select.prototype.initialize.apply( this, arguments );
-            controller.on( 'change:url', this.refresh, this );
+            this.controller.state().props.on( 'change:url', this.refresh, this );
         },
 
         refresh: function() {
-            var url = this.controller.state().get('url');
+            var url = this.controller.state().props.get('url');
             this.get('select').model.set( 'disabled', ! url || /^https?:\/\/$/.test(url) );
         }
     });
 
-    // wp.media.view.Toolbar.Insert
-    // ----------------------------
-    media.view.Toolbar.Insert = media.view.Toolbar.extend({
+    // wp.media.view.Toolbar.Selection
+    // -------------------------------
+    media.view.Toolbar.Selection = media.view.Toolbar.extend({
+        button: 'insert',
+
         initialize: function() {
-            var controller = this.options.controller,
-                selection = controller.state().get('selection'),
-                selectionToLibrary;
-
-            selectionToLibrary = function( state, filter ) {
-                return function() {
-                    var controller = this.controller,
-                        selection = controller.state().get('selection'),
-                        edit = controller.state( state ),
-                        models = filter ? filter( selection ) : selection.models;
-
-                    edit.set( 'library', new media.model.Selection( models, {
-                        props:    selection.props.toJSON(),
-                        multiple: true
-                    }) );
-
-                    this.controller.setState( state );
-                };
-            };
+            var controller = this.controller;
 
             this.options.items = _.defaults( this.options.items || {}, {
                 selection: new media.view.Selection({
                     controller: controller,
-                    collection: selection,
+                    collection: controller.state().get('selection'),
                     priority:   -40,
 
@@ -2251 +2391 @@
                         this.controller.content.mode('edit-selection');
                     }
-                }).render(),
-
-                insert: {
-                    style:    'primary',
-                    priority: 80,
-                    text:     l10n.insertIntoPost,
-
-                    click: function() {
-                        controller.close();
-                        controller.state().trigger( 'insert', selection ).reset();
-                    }
-                },
-
-                gallery: {
-                    text:     l10n.createNewGallery,
-                    priority: 40,
-                    click:    selectionToLibrary('gallery-edit', function( selection ) {
-                        return selection.where({ type: 'image' });
-                    })
-                }
+                }).render()
             });
 
@@ -2278 +2399 @@
         refresh: function() {
             var selection = this.controller.state().get('selection'),
-                count = selection.length;
-
-            this.get('insert').model.set( 'disabled', ! selection.length );
-
-            // Check if any attachment in the selection is an image.
-            this.get('gallery').$el.toggle( count > 1 && selection.any( function( attachment ) {
-                return 'image' === attachment.get('type');
-            }) );
+                button = this.get( this.button );
+
+            if ( ! button )
+                return;
+
+            button.model.set( 'disabled', ! selection.length );
         }
     });
@@ -2389 +2508 @@
 
         initialize: function() {
-            this.controller = this.options.controller;
-            this._views     = {};
+            this._views = {};
 
             this.set( _.extend( {}, this._views, this.options.views ), { silent: true });
@@ -2458 +2576 @@
     });
 
+    /**
+     * wp.media.view.MenuItem
+     */
+    media.view.MenuItem = media.View.extend({
+        tagName:   'a',
+        className: 'media-menu-item',
+
+        attributes: {
+            href: '#'
+        },
+
+        events: {
+            'click': '_click'
+        },
+
+        _click: function( event ) {
+            var clickOverride = this.options.click;
+
+            if ( event )
+                event.preventDefault();
+
+            if ( clickOverride )
+                clickOverride.call( this );
+            else
+                this.click();
+        },
+
+        click: function() {
+            var state = this.options.state;
+            if ( state )
+                this.controller.setState( state );
+        },
+
+        render: function() {
+            var options = this.options;
+
+            if ( options.text )
+                this.$el.text( options.text );
+            else if ( options.html )
+                this.$el.html( options.html );
+
+            return this;
+        }
+    });
 
     /**
@@ -2463 +2625 @@
      */
     media.view.Menu = media.view.PriorityList.extend({
-        tagName:   'ul',
+        tagName:   'div',
         className: 'media-menu',
-
-        toView: function( options, state ) {
+        property:  'state',
+        ItemView:  media.view.MenuItem,
+        region:    'menu',
+
+        toView: function( options, id ) {
             options = options || {};
-            options.state = options.state || state;
-            return new media.view.MenuItem( options ).render();
-        },
-
-        select: function( state ) {
-            var view = this.get( state );
+            options[ this.property ] = options[ this.property ] || id;
+            return new this.ItemView( options ).render();
+        },
+
+        ready: function() {
+            media.view.PriorityList.prototype.ready.apply( this, arguments );
+            this.visibility();
+        },
+
+        set: function() {
+            media.view.PriorityList.prototype.set.apply( this, arguments );
+            this.visibility();
+        },
+
+        unset: function() {
+            media.view.PriorityList.prototype.unset.apply( this, arguments );
+            this.visibility();
+        },
+
+        visibility: function() {
+            var region = this.region,
+                view = this.controller[ region ].get(),
+                views = this.views.get(),
+                hide = ! views || views.length < 2;
+
+            if ( this === view )
+                this.controller.$el.toggleClass( 'hide-' + region, hide );
+        },
+
+        select: function( id ) {
+            var view = this.get( id );
 
             if ( ! view )
@@ -2487 +2677 @@
     });
 
-    media.view.MenuItem = media.View.extend({
-        tagName:   'li',
-        className: 'media-menu-item',
-
-        events: {
-            'click': 'click'
-        },
-
+    /**
+     * wp.media.view.RouterItem
+     */
+    media.view.RouterItem = media.view.MenuItem.extend({
         click: function() {
-            var options = this.options;
-
-            if ( options.click )
-                options.click.call( this );
-            else if ( options.state )
-                this.controller.setState( options.state );
-        },
-
-        render: function() {
-            var options = this.options;
-
-            if ( options.text )
-                this.$el.text( options.text );
-            else if ( options.html )
-                this.$el.html( options.html );
-
-            return this;
-        }
-    });
+            var contentMode = this.options.contentMode;
+            if ( contentMode )
+                this.controller.content.mode( contentMode );
+        }
+    });
+
+    /**
+     * wp.media.view.Router
+     */
+    media.view.Router = media.view.Menu.extend({
+        tagName:   'div',
+        className: 'media-router',
+        property:  'contentMode',
+        ItemView:  media.view.RouterItem,
+        region:    'router',
+
+        initialize: function() {
+            this.controller.on( 'content:render', this.update, this );
+            media.view.Menu.prototype.initialize.apply( this, arguments );
+        },
+
+        update: function() {
+            var mode = this.controller.content.mode();
+            if ( mode )
+                this.select( mode );
+        }
+    });
+
 
     /**
@@ -2532 +2727 @@
 
         events: {
-            'click .attachment-preview':      'toggleSelection',
+            'click .attachment-preview':      'toggleSelectionHandler',
             'change [data-setting]':          'updateSetting',
             'change [data-setting] input':    'updateSetting',
@@ -2546 +2741 @@
         initialize: function() {
             var selection = this.options.selection;
-
-            this.controller = this.options.controller;
 
             this.model.on( 'change:sizes change:uploading change:caption change:title', this.render, this );
@@ -2624 +2817 @@
         },
 
-        toggleSelection: function( event ) {
-            var selection = this.options.selection,
-                model = this.model;
+        toggleSelectionHandler: function( event ) {
+            var method;
+
+            if ( event.shiftKey )
+                method = 'between';
+            else if ( event.ctrlKey || event.metaKey )
+                method = 'toggle';
+
+            this.toggleSelection({
+                method: method
+            });
+        },
+
+        toggleSelection: function( options ) {
+            var collection = this.collection,
+                selection = this.options.selection,
+                model = this.model,
+                method = options && options.method,
+                single, between, models, singleIndex, modelIndex;
 
             if ( ! selection )
                 return;
+
+            single = selection.single();
+            method = _.isUndefined( method ) ? selection.multiple : method;
+
+            // If the `method` is set to `between`, select all models that
+            // exist between the current and the selected model.
+            if ( 'between' === method && single && selection.multiple ) {
+                // If the models are the same, short-circuit.
+                if ( single === model )
+                    return;
+
+                singleIndex = collection.indexOf( single );
+                modelIndex  = collection.indexOf( this.model );
+
+                if ( singleIndex < modelIndex )
+                    models = collection.models.slice( singleIndex, modelIndex + 1 );
+                else
+                    models = collection.models.slice( modelIndex, singleIndex + 1 );
+
+                selection.add( models ).single( model );
+                return;
+
+            // If the `method` is set to `toggle`, just flip the selection
+            // status, regardless of whether the model is the single model.
+            } else if ( 'toggle' === method ) {
+                selection[ this.selected() ? 'remove' : 'add' ]( model ).single( model );
+                return;
+            }
+
+            if ( method !== 'add' )
+                method = 'reset';
 
             if ( this.selected() ) {
@@ -2635 +2875 @@
                 // If it is not the same as the single model,
                 // it now becomes the single model.
-                selection[ selection.single() === model ? 'remove' : 'single' ]( model );
+                selection[ single === model ? 'remove' : 'single' ]( model );
             } else {
-                selection.add( model ).single( model );
+                // If the model is not selected, run the `method` on the
+                // selection. By default, we `reset` the selection, but the
+                // `method` can be set to `add` the model to the selection.
+                selection[ method ]( model ).single( model );
             }
         },
@@ -2839 +3082 @@
 
         initialize: function() {
-            this.controller = this.options.controller;
             this.el.id = _.uniqueId('__attachments-view-');
 
@@ -2951 +3193 @@
                         silent: true
                     }).add( model, {
-                        at:     ui.item.index(),
-                        silent: true
+                        silent: true,
+                        at:     ui.item.index()
                     });
 
                     // Restore the comparator.
                     collection.comparator = comparator;
+
+                    // Fire the `reset` event to ensure other collections sync.
+                    collection.trigger( 'reset', collection );
 
                     // If the collection is sorted by menu order,
@@ -3201 +3446 @@
 
         initialize: function() {
-            this.controller = this.options.controller;
-
             _.defaults( this.options, {
                 filters: false,
                 search:  true,
-                uploads: false,
                 display: false,
 
@@ -3256 +3498 @@
             }
 
-            if ( this.options.sortable && ! this.options.filters ) {
+            if ( this.options.dragInfo ) {
                 this.toolbar.set( 'dragInfo', new media.View({
                     el: $( '<div class="instructions">' + l10n.dragInfo + '</div>' )[0],
@@ -3291 +3533 @@
 
             this.uploader = new media.view.UploaderInline({
-                controller: this.controller
+                controller: this.controller,
+                status:     false,
+                message:    l10n.noItemsFound
             });
 
@@ -3323 +3567 @@
             this.views.add( sidebar );
 
-            if ( options.uploads && this.controller.uploader ) {
+            if ( this.controller.uploader ) {
                 sidebar.set( 'uploads', new media.view.UploaderStatus({
                     controller: this.controller,
@@ -3374 +3618 @@
 
     /**
-     * wp.media.view.SelectionPreview
-     */
-    media.view.SelectionPreview = media.View.extend({
-        tagName:   'div',
-        className: 'selection-preview',
-        template:  media.template('media-selection-preview'),
-
-        events: {
-            'click .clear-selection': 'clear'
-        },
-
-        initialize: function() {
-            _.defaults( this.options, {
-                clearable: true
-            });
-
-            this.controller = this.options.controller;
-            this.collection.on( 'add change:url remove', this.render, this );
-            this.render();
-        },
-
-        render: function() {
-            var options = _.clone( this.options ),
-                last, sizes, amount;
-
-            // If nothing is selected, display nothing.
-            if ( ! this.collection.length ) {
-                this.$el.empty();
-                return this;
-            }
-
-            options.count = this.collection.length;
-            last  = this.collection.last();
-            sizes = last.get('sizes');
-
-            if ( 'image' === last.get('type') )
-                options.thumbnail = ( sizes && sizes.thumbnail ) ? sizes.thumbnail.url : last.get('url');
-            else
-                options.thumbnail =  last.get('icon');
-
-            this.$el.html( this.template( options ) );
-            return this;
-        },
-
-        clear: function( event ) {
-            event.preventDefault();
-            this.collection.reset();
-        }
-    });
-
-    /**
      * wp.media.view.Selection
      */
@@ -3443 +3636 @@
             });
 
-            this.controller = this.options.controller;
             this.attachments = new media.view.Attachments({
                 controller: this.controller,
@@ -3660 +3852 @@
                 attachment = this.options.attachment;
 
-            if ( 'none' === linkTo ) {
+            if ( 'none' === linkTo || ( ! attachment && 'custom' !== linkTo ) ) {
                 $input.hide();
                 return;
             }
 
+            if ( attachment ) {
+                if ( 'post' === linkTo ) {
+                    $input.val( attachment.get('link') );
+                } else if ( 'file' === linkTo ) {
+                    $input.val( attachment.get('url') );
+                } else if ( ! this.model.get('linkUrl') ) {
+                    $input.val('http://');
+                }
+
+                $input.prop( 'readonly', 'custom' !== linkTo );
+            }
+
             $input.show();
-
-            if ( 'post' === linkTo ) {
-                $input.val( attachment.get('link') );
-            } else if ( 'file' === linkTo ) {
-                $input.val( attachment.get('url') );
-            } else if ( ! this.model.get('linkUrl') ) {
-                $input.val('http://');
-            }
-
-            $input.prop( 'readonly', 'custom' !== linkTo );
 
             // If the input is visible, focus and select its contents.
@@ -3769 +3963 @@
         className: 'media-iframe',
 
-        initialize: function() {
-            this.controller = this.options.controller;
-        },
-
         render: function() {
+            this.views.detach();
             this.$el.html( '<iframe src="' + this.controller.state().get('src') + '" />' );
+            this.views.render();
             return this;
         }
@@ -3786 +3978 @@
 
         initialize: function() {
-            this.controller = this.options.controller;
-
             this.url = new media.view.EmbedUrl({
                 controller: this.controller,
-                model:      this.model
+                model:      this.model.props
             }).render();
 
@@ -3827 +4017 @@
             this.settings( new constructor({
                 controller: this.controller,
-                model:      this.model,
+                model:      this.model.props,
                 priority:   40
             }) );
@@ -3847 +4037 @@
 
         initialize: function() {
-            this.label = this.make( 'span', null, this.options.label || l10n.url );
             this.input = this.make( 'input', {
                 type:  'text',
@@ -3853 +4042 @@
             });
 
-            this.$label = $( this.label );
             this.$input = $( this.input );
-            this.$el.append([ this.label, this.input ]);
+            this.$el.append( this.input );
 
             this.model.on( 'change:url', this.render, this );

trunk/wp-includes/media.php

@@ -1468 +1468 @@
         // Library
         'mediaLibraryTitle'  => __( 'Media Library' ),
+        'insertMediaTitle'   => __( 'Insert Media' ),
         'createNewGallery'   => __( 'Create a new gallery' ),
         'returnToLibrary'    => __( '← Return to library' ),
         'allMediaItems'      => __( 'All media items' ),
+        'noItemsFound'       => __( 'No items found.' ),
         'insertIntoPost'     => $hier ? __( 'Insert into page' ) : __( 'Insert into post' ),
         'uploadedToThisPost' => $hier ? __( 'Uploaded to this page' ) : __( 'Uploaded to this post' ),
@@ -1490 +1492 @@
         'continueEditing'    => __( 'Continue editing' ),
         'addToGallery'       => __( 'Add to gallery' ),
+        'addToGalleryTitle'  => __( 'Add to Gallery' ),
         'reverseOrder'       => __( 'Reverse order' ),
     );
@@ -1518 +1521 @@
     <script type="text/html" id="tmpl-media-frame">
         <div class="media-frame-menu"></div>
+        <div class="media-frame-title"></div>
+        <div class="media-frame-router"></div>
         <div class="media-frame-content"></div>
         <div class="media-frame-toolbar"></div>
@@ -1525 +1530 @@
     <script type="text/html" id="tmpl-media-modal">
         <div class="media-modal wp-core-ui">
-            <h3 class="media-modal-title">{{ data.title }}</h3>
-            <a class="media-modal-close media-modal-icon" href="#" title="<?php esc_attr_e('Close'); ?>"></a>
+            <a class="media-modal-close" href="#" title="<?php esc_attr_e('Close'); ?>"><span class="media-modal-icon"></span></a>
             <div class="media-modal-content"></div>
         </div>
-        <div class="media-modal-backdrop">
-            <div></div>
-        </div>
+        <div class="media-modal-backdrop"></div>
     </script>
 
@@ -1541 +1543 @@
 
     <script type="text/html" id="tmpl-uploader-inline">
-        <div class="uploader-inline-content">
+        <# var messageClass = data.message ? 'has-upload-message' : 'no-upload-message'; #>
+        <div class="uploader-inline-content {{ messageClass }}">
+        <# if ( data.message ) { #>
+            <h3 class="upload-message">{{ data.message }}</h3>
+        <# } #>
         <?php if ( ! _device_can_upload() ) : ?>
-            <h3><?php _e('The web browser on your device cannot be used to upload files. You may be able to use the <a href="http://wordpress.org/extend/mobile/">native app for your device</a> instead.'); ?></h3>
+            <h3 class="upload-instructions"><?php _e('The web browser on your device cannot be used to upload files. You may be able to use the <a href="http://wordpress.org/extend/mobile/">native app for your device</a> instead.'); ?></h3>
         <?php elseif ( is_multisite() && ! is_upload_space_available() ) : ?>
-            <h3><?php _e( 'Upload Limit Exceeded' ); ?></h3>
+            <h3 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h3>
             <?php do_action( 'upload_ui_over_quota' ); ?>
 
         <?php else : ?>
             <div class="upload-ui">
-                <h3 class="drop-instructions"><?php _e( 'Drop files anywhere to upload' ); ?></h3>
+                <h3 class="upload-instructions drop-instructions"><?php _e( 'Drop files anywhere to upload' ); ?></h3>
                 <a href="#" class="browser button button-hero"><?php _e( 'Select Files' ); ?></a>
             </div>
@@ -1745 +1751 @@
     </script>
 
-    <script type="text/html" id="tmpl-media-selection-preview">
-        <div class="selected-img selected-count-{{ data.count }}">
-            <# if ( data.thumbnail ) { #>
-                <img src="{{ data.thumbnail }}" draggable="false" />
-            <# } #>
-
-            <span class="count">{{ data.count }}</span>
-        </div>
-        <# if ( data.clearable ) { #>
-            <a class="clear-selection" href="#"><?php _e('Clear selection'); ?></a>
-        <# } #>
-    </script>
-
     <script type="text/html" id="tmpl-attachment-display-settings">
         <h3><?php _e('Attachment Display Settings'); ?></h3>