WordPress.org

Make WordPress Core

Ticket #21390: 21390.3.diff

File 21390.3.diff, 61.8 KB (added by koopersmith, 17 months ago)
  • wp-admin/js/custom-background.js

     
    3737                                } 
    3838                        }); 
    3939 
    40                         frame.toolbar.on( 'activate:select', function() { 
    41                                 frame.toolbar.view().set({ 
     40                        frame.on( 'toolbar:render:select', function( view ) { 
     41                                view.set({ 
    4242                                        select: { 
    4343                                                style: 'primary', 
    4444                                                text:  $el.data('update'), 
  • wp-admin/js/custom-header.js

     
    2424                                } 
    2525                        }); 
    2626 
    27                         frame.toolbar.on( 'activate:select', function() { 
    28                                 frame.toolbar.view().set({ 
     27                        frame.on( 'toolbar:render:select', function( view ) { 
     28                                view.set({ 
    2929                                        select: { 
    3030                                                style: 'primary', 
    3131                                                text:  $el.data('update'), 
  • wp-includes/css/media-views-rtl.css

     
    226226} 
    227227 
    228228/** 
    229  * Selection Preview 
    230  */ 
    231 .selected-img { 
    232         float: right; 
    233         margin-right: 0; 
    234         margin-left: 14px; 
    235 } 
    236  
    237 .selection-preview img { 
    238         float: right; 
    239         margin-left: 0; 
    240         margin-right: 1px; 
    241 } 
    242  
    243 .selection-preview .count { 
    244         right: auto; 
    245         left: 0; 
    246 } 
    247  
    248 .selection-preview .clear-selection { 
    249         float: right; 
    250 } 
    251  
    252 /** 
    253229 * Attachment Details 
    254230 */ 
    255231.attachment-info .thumbnail { 
  • wp-includes/css/media-views.css

     
    8080 */ 
    8181.media-modal { 
    8282        position: fixed; 
    83         top: 60px; 
    84         left: 40px; 
    85         right: 40px; 
    86         bottom: 40px; 
     83        top: 30px; 
     84        left: 30px; 
     85        right: 30px; 
     86        bottom: 30px; 
    8787        z-index: 160000; 
    8888} 
    8989 
     
    9494        right: 0; 
    9595        bottom: 0; 
    9696        background: #000; 
    97         opacity: 0.8; 
     97        opacity: 0.7; 
    9898        z-index: 159900; 
    9999} 
    100100 
    101 .media-modal-backdrop div, 
    102 .uploader-window-content { 
     101.media-modal-close { 
    103102        position: absolute; 
    104         top: 10px; 
    105         left: 10px; 
    106         right: 10px; 
    107         bottom: 10px; 
    108         border: 1px dashed rgba( 255, 255, 255, 0.5 ); 
     103        top: 7px; 
     104        right: 7px; 
     105        width: 30px; 
     106        height: 30px; 
     107        z-index: 1000; 
    109108} 
    110  
    111 .media-modal-title { 
    112         position: absolute; 
    113         top: -40px; 
    114         left: 0; 
    115         height: 40px; 
    116         padding: 0; 
    117         margin: 0; 
    118  
    119         line-height: 40px; 
    120         color: #fff; 
    121         font-size: 16px; 
    122         font-weight: 200; 
    123         text-shadow: 0 0 16px rgba( 0, 0, 0, 0.6 ); 
    124 } 
    125  
    126 .media-modal-close { 
    127         position: absolute; 
    128         top: -27px; 
    129         right: 0; 
     109.media-modal-close span { 
     110        display: block; 
     111        margin: 8px auto 0; 
     112        width: 15px; 
    130113        height: 15px; 
    131         width: 15px; 
    132         background-position: -80px 0; 
     114        background-position: -100px 0; 
    133115} 
    134116 
    135117.media-modal-close:active { 
     
    165147        border: 0 solid #dfdfdf; 
    166148} 
    167149 
    168 .media-frame-toolbar > .media-toolbar { 
    169         top: auto; 
    170         left: 200px; 
    171         bottom: 0; 
    172         border-width: 1px 0 0 0; 
    173         box-shadow: 0 -4px 4px -4px rgba( 0, 0, 0, 0.1 ); 
    174 } 
    175  
    176 .hide-toolbar .media-frame-toolbar > .media-toolbar { 
    177         bottom: -61px; 
    178 } 
    179  
    180150.media-toolbar-primary { 
    181151        float: right; 
    182152} 
     
    238208        width: 100%; 
    239209} 
    240210 
    241 .media-sidebar .selection-preview { 
    242         display: block; 
    243         padding-top: 5px; 
    244 } 
    245  
    246211.media-sidebar h3 { 
    247212        position: relative; 
    248213        font-weight: bold; 
     
    361326        position: absolute; 
    362327        top: 0; 
    363328        left: 0; 
     329        right: 0; 
    364330        bottom: 0; 
    365         width: 199px; 
    366331        margin: 0; 
    367332        padding: 16px 0; 
    368         z-index: 200; 
    369333        border-right: 1px solid #d9d9d9; 
    370334        box-shadow: inset -6px 0 6px -6px rgba( 0, 0, 0, 0.2 ); 
    371335        -webkit-user-select: none; 
     
    374338        user-select: none; 
    375339} 
    376340 
    377 .media-menu li { 
     341.media-menu > a { 
     342        display: block; 
    378343        position: relative; 
    379344        padding: 4px 20px; 
    380345        margin: 0; 
     
    382347        font-size: 14px; 
    383348        color: #21759B; 
    384349        text-shadow: 0 1px 0 #fff; 
     350        text-decoration: none; 
    385351} 
    386352 
    387 .media-menu-item { 
    388         cursor: pointer; 
     353.media-menu > a:hover { 
     354        color: #21759B; 
     355        background: rgba( 0, 0, 0, 0.04 ); 
    389356} 
    390357 
    391 .media-menu li:hover { 
    392         background: rgba( 0, 0, 0, 0.04 ); 
     358.media-menu > a:active { 
     359        outline: none; 
    393360} 
    394361 
    395362.media-menu .active, 
     
    407374} 
    408375 
    409376/** 
     377 * Menu 
     378 */ 
     379.media-router { 
     380        position: relative; 
     381        padding: 0 6px; 
     382        margin: 0; 
     383        clear: both; 
     384        -webkit-user-select: none; 
     385        -moz-user-select: none; 
     386        -ms-user-select: none; 
     387        user-select: none; 
     388} 
     389 
     390.media-router > a { 
     391        position: relative; 
     392        float: left; 
     393        padding: 2px 10px; 
     394        margin: 0; 
     395        height: 18px; 
     396        line-height: 18px; 
     397        font-size: 14px; 
     398        border-right: 1px solid #dfdfdf; 
     399        text-shadow: 0 1px 0 #fff; 
     400        text-decoration: none; 
     401} 
     402 
     403.media-router > a:last-child { 
     404        border-right: 0; 
     405} 
     406 
     407.media-router > a:active { 
     408        outline: none; 
     409} 
     410 
     411.media-router .active, 
     412.media-router .active:hover { 
     413        color: #333; 
     414} 
     415 
     416.media-router .active:after { 
     417        content: ''; 
     418        display: block; 
     419        margin: -100px auto 0; 
     420        width: 7px; 
     421        height: 7px; 
     422        background: #fff; 
     423        box-shadow: 1px 1px 1px rgba( 0, 0, 0, 0.2 ); 
     424        z-index: 300; 
     425 
     426        -webkit-transform: rotate( 45deg ) translate( 75px, 75px ); 
     427        -moz-transform:    rotate( 45deg ) translate( 75px, 75px ); 
     428        -ms-transform:     rotate( 45deg ) translate( 75px, 75px ); 
     429        -o-transform:      rotate( 45deg ) translate( 75px, 75px ); 
     430        transform:         rotate( 45deg ) translate( 75px, 75px ); 
     431} 
     432 
     433/** 
    410434 * Frame 
    411435 */ 
    412436.media-frame { 
     
    418442        bottom: 0; 
    419443} 
    420444 
    421 .media-frame .region-content { 
     445.media-frame-menu { 
    422446        position: absolute; 
    423447        top: 0; 
     448        left: 0; 
     449        bottom: 0; 
     450        width: 199px; 
     451        z-index: 150; 
     452} 
     453 
     454.media-frame-title { 
     455        position: absolute; 
     456        top: 0; 
    424457        left: 200px; 
    425458        right: 0; 
     459        height: 45px; 
     460        z-index: 200; 
     461} 
     462 
     463.media-frame-router { 
     464        position: absolute; 
     465        top: 45px; 
     466        left: 200px; 
     467        right: 0; 
     468        height: 30px; 
     469        z-index: 200; 
     470        border-bottom: 1px solid #dfdfdf; 
     471        box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 ); 
     472} 
     473 
     474.media-frame-content { 
     475        position: absolute; 
     476        top: 75px; 
     477        left: 200px; 
     478        right: 0; 
    426479        bottom: 61px; 
    427480        height: auto; 
    428481        width: auto; 
     
    430483        overflow: auto; 
    431484} 
    432485 
    433 .media-frame.hide-toolbar .region-content { 
     486.media-frame-toolbar { 
     487        position: absolute; 
     488        left: 200px; 
     489        right: 0; 
    434490        bottom: 0; 
     491        height: 60px; 
     492        z-index: 100; 
     493        border: 0 solid #dfdfdf; 
     494        border-width: 1px 0 0 0; 
     495        box-shadow: 0 -4px 4px -4px rgba( 0, 0, 0, 0.1 ); 
    435496} 
    436497 
     498.media-frame.hide-menu .media-frame-title, 
     499.media-frame.hide-menu .media-frame-router, 
     500.media-frame.hide-menu .media-frame-toolbar, 
     501.media-frame.hide-menu .media-frame-content { 
     502        left: 0; 
     503} 
     504 
     505.media-frame.hide-menu .media-frame-menu { 
     506        left: -200px; 
     507} 
     508 
     509.media-frame.hide-toolbar .media-frame-content { 
     510        bottom: 0; 
     511} 
     512 
     513.media-frame.hide-toolbar .media-frame-toolbar { 
     514        bottom: -61px; 
     515} 
     516 
     517.media-frame.hide-router .media-frame-content { 
     518        top: 45px; 
     519} 
     520 
     521.media-frame.hide-router .media-frame-router { 
     522        display: none; 
     523} 
     524 
     525.media-frame.hide-router .media-frame-title { 
     526        border-bottom: 1px solid #dfdfdf; 
     527        box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 ); 
     528} 
     529 
    437530.media-frame .media-toolbar .add-to-gallery { 
    438531        display: none; 
    439532} 
    440533 
     534.media-frame-title h1 { 
     535        padding: 0 16px; 
     536        font-size: 22px; 
     537        font-weight: 200; 
     538        line-height: 45px; 
     539        margin: 0; 
     540} 
     541 
    441542/** 
    442543 * Iframes 
    443544 */ 
     
    721822 * Attachments Browser 
    722823 */ 
    723824.media-frame .attachments-browser { 
     825        position: relative; 
     826        width: 100%; 
     827        height: 100%; 
    724828        overflow: hidden; 
    725829} 
    726830 
     
    9031007} 
    9041008 
    9051009.uploader-window-content { 
    906         border-color: #fff; 
     1010        position: absolute; 
     1011        top: 10px; 
     1012        left: 10px; 
     1013        right: 10px; 
     1014        bottom: 10px; 
     1015        border: 1px dashed #fff; 
    9071016} 
    9081017 
    9091018.uploader-window h3 { 
     
    9561065        margin: 4em 0; 
    9571066} 
    9581067 
     1068.uploader-inline .has-upload-message .upload-ui { 
     1069        margin: 0 0 4em; 
     1070} 
     1071 
    9591072.uploader-inline h3 { 
    9601073        font-size: 20px; 
    9611074        line-height: 28px; 
     
    9631076        margin-bottom: 1.6em; 
    9641077} 
    9651078 
     1079.uploader-inline .has-upload-message .upload-instructions { 
     1080        font-size: 14px; 
     1081        color: #464646; 
     1082        font-weight: normal; 
     1083} 
     1084 
    9661085.uploader-inline .drop-instructions { 
    9671086        display: none; 
    9681087} 
     
    10581177        vertical-align: top; 
    10591178} 
    10601179 
    1061 .media-selection .attachment img { 
     1180.media-selection .attachment .icon { 
    10621181        width: 50%; 
    10631182} 
    10641183 
     
    10981217} 
    10991218 
    11001219/** 
    1101  * Selection Preview 
    1102  */ 
    1103 .selection-preview { 
    1104         position: relative; 
    1105         height: 60px; 
    1106         overflow: hidden; 
    1107 } 
    1108  
    1109 .selected-img { 
    1110         float: left; 
    1111         position: relative; 
    1112         margin-right: 14px; 
    1113 } 
    1114  
    1115 .selection-preview img { 
    1116         max-width: 40px; 
    1117         max-height: 40px; 
    1118         float: left; 
    1119         margin-top: 6px; 
    1120         margin-left: 1px; 
    1121         border: 2px solid white; 
    1122         box-shadow: 
    1123             0 0 0 1px #ccc, 
    1124             3px 3px 0 0 #fff, 
    1125             3px 3px 0 1px #ccc, 
    1126             6px 6px 0 0 #fff, 
    1127             6px 6px 0 1px #ccc; 
    1128 } 
    1129  
    1130 .selection-preview .selected-count-1 img { 
    1131         margin-top: 8px; 
    1132         box-shadow: 0 0 0 1px #ccc; 
    1133 } 
    1134  
    1135 .selection-preview .selected-count-2 img { 
    1136         margin-top: 7px; 
    1137         box-shadow: 
    1138             0 0 0 1px #ccc, 
    1139             3px 3px 0 0 #fff, 
    1140             3px 3px 0 1px #ccc; 
    1141 } 
    1142  
    1143 .selection-preview .count { 
    1144         position: absolute; 
    1145         bottom: 0; 
    1146         right: 0; 
    1147         height: 16px; 
    1148         min-width: 8px; 
    1149         padding: 0 4px; 
    1150         font-size: 12px; 
    1151         text-align: center; 
    1152         font-weight: bold; 
    1153         color: #999; 
    1154         background: #fff; 
    1155         box-shadow: -1px -1px 2px -1px rgba( 0, 0, 0, 0.2 ); 
    1156 } 
    1157  
    1158 .selection-preview .clear-selection { 
    1159         float: left; 
    1160         line-height: 60px; 
    1161 } 
    1162  
    1163 /** 
    11641220 * Spinner 
    11651221 */ 
    11661222.media-sidebar .settings-save-status { 
     
    12961352.embed-url { 
    12971353        display: block; 
    12981354        position: relative; 
    1299         height: 75px; 
    1300         padding: 16px 16px; 
     1355        height: 40px; 
     1356        padding: 0 16px 16px; 
    13011357        margin: 0; 
    1302         z-index: 50; 
     1358        z-index: 250; 
     1359        background: #fff; 
    13031360        border-bottom: 1px solid #dfdfdf; 
    13041361        box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 ); 
    13051362        font-size: 18px; 
    13061363        font-weight: 200; 
    13071364} 
    13081365 
    1309 .embed-url span { 
    1310         display: block; 
    1311         padding: 4px 0 6px 2px; 
    1312 } 
    1313  
    13141366.media-frame .embed-url input { 
    13151367        font-size: 18px; 
    13161368        padding: 12px 14px; 
     
    13231375.embed-image-settings { 
    13241376        position: absolute; 
    13251377        background: #f5f5f5; 
    1326         top: 108px; 
     1378        top: 57px; 
    13271379        left: 0; 
    13281380        right: 0; 
    13291381        bottom: 0; 
     
    13871439 * Responsive layout 
    13881440 */ 
    13891441@media only screen and (max-width: 900px) { 
    1390         .media-modal { 
    1391                 bottom: 20px; 
    1392                 left: 20px; 
    1393                 right: 20px; 
    1394                 top: 40px; 
    1395         } 
    1396  
    1397         .media-modal-title { 
    1398                 height: 30px; 
    1399                 line-height: 30px; 
    1400                 top: -30px; 
    1401         } 
    1402  
    1403         .media-modal-close { 
    1404                 top: -23px; 
    1405         } 
    1406  
    1407         .media-modal-backdrop div, 
    1408         .uploader-window-content { 
    1409                 top: 5px; 
    1410                 left: 5px; 
    1411                 right: 5px; 
    1412                 bottom: 5px; 
    1413         } 
    1414  
    1415         .media-menu { 
     1442        .media-frame-menu { 
    14161443                width: 139px; 
    14171444        } 
    14181445 
     
    14201447                padding: 4px 10px; 
    14211448        } 
    14221449 
    1423         .media-frame .region-content, 
    1424         .media-frame-toolbar > .media-toolbar { 
     1450        .media-frame-content, 
     1451        .media-frame-toolbar { 
    14251452                left: 140px; 
    14261453        } 
    14271454 
  • wp-includes/js/media-editor.js

     
    384384 
    385385                        workflow = workflows[ id ] = wp.media( _.defaults( options || {}, { 
    386386                                frame:    'post', 
    387                                 state:    'upload', 
     387                                state:    'insert', 
    388388                                title:    wp.media.view.l10n.addMedia, 
    389389                                multiple: true 
    390390                        } ) ); 
     
    408408                        }, this ); 
    409409 
    410410                        workflow.state('embed').on( 'select', function() { 
    411                                 var embed = workflow.state().toJSON(); 
     411                                var state = workflow.state(), 
     412                                        type = state.get('type'), 
     413                                        embed = state.props.toJSON(); 
    412414 
    413415                                embed.url = embed.url || ''; 
    414416 
    415                                 if ( 'link' === embed.type ) { 
     417                                if ( 'link' === type ) { 
    416418                                        _.defaults( embed, { 
    417419                                                title:   embed.url, 
    418420                                                linkUrl: embed.url 
     
    420422 
    421423                                        this.send.link( embed ); 
    422424 
    423                                 } else if ( 'image' === embed.type ) { 
     425                                } else if ( 'image' === type ) { 
    424426                                        _.defaults( embed, { 
    425427                                                title:   embed.url, 
    426428                                                linkUrl: '', 
  • wp-includes/js/media-views.js

     
    6868         * wp.media.controller.Region 
    6969         */ 
    7070        media.controller.Region = function( options ) { 
    71                 _.extend( this, _.pick( options || {}, 'id', 'controller', 'selector' ) ); 
    72  
    73                 this.on( 'activate:empty', this.empty, this ); 
    74                 this.mode('empty'); 
     71                _.extend( this, _.pick( options || {}, 'id', 'view', 'selector' ) ); 
    7572        }; 
    7673 
    7774        // Use Backbone's self-propagating `extend` inheritance method. 
    7875        media.controller.Region.extend = Backbone.Model.extend; 
    7976 
    80         _.extend( media.controller.Region.prototype, Backbone.Events, { 
    81                 trigger: (function() { 
    82                         var eventSplitter = /\s+/, 
    83                                 trigger = Backbone.Events.trigger; 
     77        _.extend( media.controller.Region.prototype, { 
     78                mode: function( mode ) { 
     79                        if ( ! mode ) 
     80                                return this._mode; 
    8481 
    85                         return function( events ) { 
    86                                 var mode = ':' + this._mode, 
    87                                         modeEvents = events.split( eventSplitter ).join( mode ) + mode; 
    88  
    89                                 trigger.apply( this, arguments ); 
    90                                 trigger.apply( this, [ modeEvents ].concat( _.rest( arguments ) ) ); 
     82                        // Bail if we're trying to change to the current mode. 
     83                        if ( mode === this._mode ) 
    9184                                return this; 
    92                         }; 
    93                 }()), 
    9485 
    95                 mode: function( mode ) { 
    96                         if ( mode ) { 
    97                                 this.trigger( 'deactivate', this ); 
    98                                 this._mode = mode; 
    99                                 return this.trigger( 'activate', this ); 
    100                         } 
    101                         return this._mode; 
     86                        this.trigger('deactivate'); 
     87                        this._mode = mode; 
     88                        this.render( mode ); 
     89                        this.trigger('activate'); 
     90                        return this; 
    10291                }, 
    10392 
    104                 view: function( view ) { 
    105                         var previous = this._view, 
    106                                 mode = this._mode, 
    107                                 id = this.id; 
     93                render: function( mode ) { 
     94                        // If no mode is provided, just re-render the current mode. 
     95                        // If the provided mode isn't active, perform a full switch. 
     96                        if ( mode && mode !== this._mode ) 
     97                                return this.mode( mode ); 
    10898 
    109                         // If no argument is provided, return the current view. 
    110                         if ( ! view ) 
    111                                 return previous; 
     99                        var set = { view: null }, 
     100                                view; 
    112101 
    113                         // If we're attempting to switch to the current view, bail. 
    114                         if ( view === previous ) 
     102                        this.trigger( 'create', set ); 
     103                        view = set.view; 
     104                        this.trigger( 'render', view ); 
     105                        if ( view ) 
     106                                this.set( view ); 
     107                        return this; 
     108                }, 
     109 
     110                get: function() { 
     111                        return this.view.views.first( this.selector ); 
     112                }, 
     113 
     114                set: function( views, options ) { 
     115                        if ( options ) 
     116                                options.add = false; 
     117                        return this.view.views.set( this.selector, views, options ); 
     118                }, 
     119 
     120                trigger: function( event ) { 
     121                        var base; 
     122                        if ( ! this._mode ) 
    115123                                return; 
    116124 
    117                         // Add classes to the new view. 
    118                         if ( id ) 
    119                                 view.$el.addClass( 'region-' + id ); 
     125                        var args = _.toArray( arguments ); 
     126                        base = this.id + ':' + event; 
    120127 
    121                         if ( mode ) 
    122                                 view.$el.addClass( 'mode-' + mode ); 
     128                        // Trigger `region:action:mode` event. 
     129                        args[0] = base + ':' + this._mode; 
     130                        this.view.trigger.apply( this.view, args ); 
    123131 
    124                         this.controller.views.set( this.selector, view ); 
    125                         this._view = view; 
    126                 }, 
    127  
    128                 empty: function() { 
    129                         this.view( new media.View() ); 
     132                        // Trigger `region:action` event. 
     133                        args[0] = base; 
     134                        this.view.trigger.apply( this.view, args ); 
     135                        return this; 
    130136                } 
    131137        }); 
    132138 
     
    208214        // wp.media.controller.State 
    209215        // --------------------------- 
    210216        media.controller.State = Backbone.Model.extend({ 
    211                 initialize: function() { 
    212                         this.on( 'activate', this._activate, this ); 
     217                constructor: function() { 
     218                        this.on( 'activate', this._preActivate, this ); 
    213219                        this.on( 'activate', this.activate, this ); 
     220                        this.on( 'activate', this._postActivate, this ); 
    214221                        this.on( 'deactivate', this._deactivate, this ); 
    215222                        this.on( 'deactivate', this.deactivate, this ); 
    216223                        this.on( 'reset', this.reset, this ); 
     224                        this.on( 'ready', this._ready, this ); 
     225                        this.on( 'ready', this.ready, this ); 
     226 
     227                        this.on( 'change:menu', this._updateMenu, this ); 
     228 
     229                        Backbone.Model.apply( this, arguments ); 
    217230                }, 
    218231 
     232                ready: function() {}, 
    219233                activate: function() {}, 
    220                 _activate: function() { 
     234                deactivate: function() {}, 
     235                reset: function() {}, 
     236 
     237                _ready: function() { 
     238                        this._updateMenu(); 
     239                }, 
     240 
     241                _preActivate: function() { 
    221242                        this.active = true; 
     243                }, 
    222244 
    223                         this.menu(); 
    224                         this.toolbar(); 
    225                         this.content(); 
     245                _postActivate: function() { 
     246                        this.on( 'change:menu', this._menu, this ); 
     247                        this.on( 'change:titleMode', this._title, this ); 
     248                        this.on( 'change:content', this._content, this ); 
     249                        this.on( 'change:toolbar', this._toolbar, this ); 
     250 
     251                        this.frame.on( 'title:render:default', this._renderTitle, this ); 
     252 
     253                        this._title(); 
     254                        this._menu(); 
     255                        this._toolbar(); 
     256                        this._content(); 
     257                        this._router(); 
    226258                }, 
    227259 
    228                 deactivate: function() {}, 
     260 
    229261                _deactivate: function() { 
    230262                        this.active = false; 
     263 
     264                        this.frame.off( 'title:render:default', this._renderTitle, this ); 
     265 
     266                        this.off( 'change:menu', this._menu, this ); 
     267                        this.off( 'change:titleMode', this._title, this ); 
     268                        this.off( 'change:content', this._content, this ); 
     269                        this.off( 'change:toolbar', this._toolbar, this ); 
    231270                }, 
    232271 
    233                 reset: function() {}, 
     272                _title: function() { 
     273                        this.frame.title.render( this.get('titleMode') || 'default' ); 
     274                }, 
    234275 
    235                 menu: function() { 
     276                _renderTitle: function( view ) { 
     277                        view.$el.text( this.get('title') || '' ); 
     278                }, 
     279 
     280                _router: function() { 
     281                        var router = this.frame.router, 
     282                                mode = this.get('router'), 
     283                                view; 
     284 
     285                        this.frame.$el.toggleClass( 'hide-router', ! mode ); 
     286                        if ( ! mode ) 
     287                                return; 
     288 
     289                        this.frame.router.render( mode ); 
     290 
     291                        view = router.get(); 
     292                        if ( view.select ) 
     293                                view.select( this.frame.content.mode() ); 
     294                }, 
     295 
     296                _menu: function() { 
    236297                        var menu = this.frame.menu, 
    237298                                mode = this.get('menu'), 
    238299                                view; 
     
    240301                        if ( ! mode ) 
    241302                                return; 
    242303 
    243                         if ( menu.mode() !== mode ) 
    244                                 menu.mode( mode ); 
     304                        menu.mode( mode ); 
    245305 
    246                         view = menu.view(); 
     306                        view = menu.get(); 
    247307                        if ( view.select ) 
    248308                                view.select( this.id ); 
     309                }, 
     310 
     311                _updateMenu: function() { 
     312                        var previous = this.previous('menu'), 
     313                                menu = this.get('menu'); 
     314 
     315                        if ( previous ) 
     316                                this.frame.off( 'menu:render:' + previous, this._renderMenu, this ); 
     317 
     318                        if ( menu ) 
     319                                this.frame.on( 'menu:render:' + menu, this._renderMenu, this ); 
     320                }, 
     321 
     322                _renderMenu: function( view ) { 
     323                        var menuItem = this.get('menuItem'), 
     324                                title = this.get('title'), 
     325                                priority = this.get('priority'); 
     326 
     327                        if ( ! menuItem && title ) { 
     328                                menuItem = { text: title }; 
     329 
     330                                if ( priority ) 
     331                                        menuItem.priority = priority; 
     332                        } 
     333 
     334                        if ( ! menuItem ) 
     335                                return; 
     336 
     337                        view.set( this.id, menuItem ); 
    249338                } 
    250339        }); 
    251340 
    252341        _.each(['toolbar','content'], function( region ) { 
    253                 media.controller.State.prototype[ region ] = function() { 
     342                media.controller.State.prototype[ '_' + region ] = function() { 
    254343                        var mode = this.get( region ); 
    255344                        if ( mode ) 
    256                                 this.frame[ region ].mode( mode ); 
     345                                this.frame[ region ].render( mode ); 
    257346                }; 
    258347        }); 
    259348 
     
    262351        media.controller.Library = media.controller.State.extend({ 
    263352                defaults: { 
    264353                        id:         'library', 
    265                         multiple:   false, 
     354                        multiple:   false, // false, 'add', 'reset' 
    266355                        describe:   false, 
    267                         toolbar:    'main-attachments', 
     356                        toolbar:    'select', 
    268357                        sidebar:    'settings', 
    269                         content:    'browse', 
     358                        content:    'upload', 
     359                        router:     'browse', 
    270360                        searchable: true, 
    271361                        filterable: false, 
    272                         uploads:    true, 
    273                         sortable:   true 
     362                        sortable:   true, 
     363                        title:      l10n.mediaLibraryTitle, 
     364 
     365                        // Uses a user setting to override the content mode. 
     366                        contentUserSetting: true, 
     367 
     368                        // Sync the selection from the last state when 'multiple' matches. 
     369                        syncLastSelection: true 
    274370                }, 
    275371 
    276372                initialize: function() { 
     
    290386                                this.set( 'gutter', 8 ); 
    291387 
    292388                        this.resetDisplays(); 
    293  
    294                         media.controller.State.prototype.initialize.apply( this, arguments ); 
    295389                }, 
    296390 
    297391                activate: function() { 
    298392                        var library = this.get('library'), 
    299393                                selection = this.get('selection'); 
    300394 
     395                        if ( this.get('syncLastSelection') ) { 
     396                                this.getLastSelection(); 
     397                        } 
     398 
    301399                        this._excludeStateLibrary(); 
    302400                        this.buildComposite(); 
    303401                        this.on( 'change:library change:exclude', this.buildComposite, this ); 
    304402                        this.on( 'change:excludeState', this._excludeState, this ); 
    305403 
    306                         // If we're in a workflow that supports multiple attachments, 
    307                         // automatically select any uploading attachments. 
    308                         if ( this.get('multiple') ) 
    309                                 wp.Uploader.queue.on( 'add', this.selectUpload, this ); 
     404                        wp.Uploader.queue.on( 'add', this.uploading, this ); 
    310405 
    311406                        selection.on( 'add remove reset', this.refreshSelection, this ); 
    312407 
    313                         this.refresh(); 
    314408                        this.on( 'insert', this._insertDisplaySettings, this ); 
     409 
     410                        if ( this.get('contentUserSetting') ) { 
     411                                this.frame.on( 'content:activate', this.saveContentMode, this ); 
     412                                this.set( 'content', getUserSetting( 'libraryContent', this.get('content') ) ); 
     413                        } 
    315414                }, 
    316415 
    317416                deactivate: function() { 
     417                        this.frame.off( 'content:activate', this.saveContentMode, this ); 
     418 
    318419                        // Unbind all event handlers that use this state as the context 
    319420                        // from the selection. 
    320421                        this.get('selection').off( null, null, this ); 
     
    332433                        this.resetDisplays(); 
    333434                }, 
    334435 
    335                 refresh: function() { 
    336                         this.content(); 
    337                         this.refreshSelection(); 
    338                 }, 
    339  
    340436                resetDisplays: function() { 
    341437                        this._displays = []; 
    342438                        this._defaultDisplaySettings = { 
     
    371467                        setUserSetting( 'urlbutton', display.link ); 
    372468                }, 
    373469 
     470                getLastSelection: function() { 
     471                        var selection = this.get('selection'), 
     472                                lastState = this.frame.lastState(), 
     473                                lastSelection = lastState && lastState.get('selection'); 
     474 
     475                        if ( ! lastSelection || lastSelection.multiple !== selection.multiple ) 
     476                                return; 
     477 
     478                        selection.reset( lastSelection.toArray() ).single( lastSelection.single() ); 
     479                }, 
     480 
    374481                refreshSelection: function() { 
    375482                        var selection = this.get('selection'), 
    376483                                mode = this.frame.content.mode(); 
    377484 
    378                         this.frame.toolbar.view().refresh(); 
     485                        this.frame.toolbar.get().refresh(); 
    379486                        this.trigger( 'refresh:selection', this, selection ); 
    380487 
    381488                        if ( ! selection.length && 'browse' !== mode && 'upload' !== mode ) 
    382                                 this.content(); 
     489                                this.frame.content.render(); 
    383490                }, 
    384491 
    385                 selectUpload: function( attachment ) { 
    386                         this.get('selection').add( attachment ); 
     492                uploading: function( attachment ) { 
     493                        var content = this.frame.content; 
     494 
     495                        // If the uploader was selected, navigate to the browser. 
     496                        if ( 'upload' === content.mode() ) 
     497                                this.frame.content.mode('browse'); 
     498 
     499                        // If we're in a workflow that supports multiple attachments, 
     500                        // automatically select any uploading attachments. 
     501                        if ( this.get('multiple') ) 
     502                                this.get('selection').add( attachment ); 
    387503                }, 
    388504 
     505                saveContentMode: function() { 
     506                        // Only track the browse router on library states. 
     507                        if ( 'browse' !== this.get('router') ) 
     508                                return; 
     509 
     510                        setUserSetting( 'libraryContent', this.frame.content.mode() ); 
     511                }, 
     512 
    389513                buildComposite: function() { 
    390514                        var original = this.get('_library'), 
    391515                                exclude = this.get('exclude'), 
     
    448572                } 
    449573        }); 
    450574 
    451  
    452         // wp.media.controller.Upload 
    453         // --------------------------- 
    454         media.controller.Upload = media.controller.State.extend({ 
    455                 defaults: _.defaults({ 
    456                         id:      'upload', 
    457                         content: 'upload', 
    458                         toolbar: 'empty', 
    459                         uploads: true, 
    460  
    461                         // The state to navigate to when files are uploading. 
    462                         libraryState: 'library' 
    463                 }, media.controller.State.prototype.defaults ), 
    464  
    465                 initialize: function() { 
    466                         media.controller.State.prototype.initialize.apply( this, arguments ); 
    467                 }, 
    468  
    469                 activate: function() { 
    470                         wp.Uploader.queue.on( 'add', this.uploading, this ); 
    471                         media.controller.State.prototype.activate.apply( this, arguments ); 
    472                 }, 
    473  
    474                 deactivate: function() { 
    475                         wp.Uploader.queue.off( null, null, this ); 
    476                         media.controller.State.prototype.deactivate.apply( this, arguments ); 
    477                 }, 
    478  
    479                 uploading: function( attachment ) { 
    480                         var library = this.get('libraryState'); 
    481  
    482                         this.frame.state( library ).get('selection').add( attachment ); 
    483                         this.frame.setState( library ); 
    484                 } 
    485         }); 
    486  
    487         // wp.media.controller.Gallery 
    488         // --------------------------- 
    489         media.controller.Gallery = media.controller.Library.extend({ 
     575        // wp.media.controller.GalleryEdit 
     576        // ------------------------------- 
     577        media.controller.GalleryEdit = media.controller.Library.extend({ 
    490578                defaults: { 
    491579                        id:         'gallery-edit', 
    492580                        multiple:   false, 
     
    496584                        sortable:   true, 
    497585                        searchable: false, 
    498586                        toolbar:    'gallery-edit', 
    499                         content:    'browse' 
     587                        content:    'browse', 
     588                        title:      l10n.editGalleryTitle, 
     589                        priority:   60 
    500590                }, 
    501591 
    502592                initialize: function() { 
     
    519609                        // Watch for uploaded attachments. 
    520610                        this.get('library').observe( wp.Uploader.queue ); 
    521611 
    522                         this.frame.content.on( 'activate:browse', this.gallerySettings, this ); 
     612                        this.frame.on( 'content:render:browse', this.gallerySettings, this ); 
    523613 
    524614                        media.controller.Library.prototype.activate.apply( this, arguments ); 
    525615                }, 
     
    528618                        // Stop watching for uploaded attachments. 
    529619                        this.get('library').unobserve( wp.Uploader.queue ); 
    530620 
    531                         this.frame.content.off( null, null, this ); 
     621                        this.frame.off( 'content:render:browse', this.gallerySettings, this ); 
     622 
    532623                        media.controller.Library.prototype.deactivate.apply( this, arguments ); 
    533624                }, 
    534625 
    535                 gallerySettings: function() { 
    536                         var library = this.get('library'), 
    537                                 browser; 
     626                gallerySettings: function( browser ) { 
     627                        var library = this.get('library'); 
    538628 
    539                         if ( ! library ) 
     629                        if ( ! library || ! browser ) 
    540630                                return; 
    541631 
    542632                        library.gallery = library.gallery || new Backbone.Model(); 
    543633 
    544                         browser = this.frame.content.view(); 
    545  
    546634                        browser.sidebar.set({ 
    547635                                gallery: new media.view.Settings.Gallery({ 
    548636                                        controller: this, 
     
    570658                        filterable: 'uploaded', 
    571659                        multiple:   false, 
    572660                        menu:       'main', 
    573                         toolbar:    'featured-image' 
     661                        toolbar:    'featured-image', 
     662                        title:      l10n.featuredImageTitle, 
     663                        priority:   60 
    574664                }, media.controller.Library.prototype.defaults ), 
    575665 
    576666                initialize: function() { 
     
    629719                        menu:    'main', 
    630720                        content: 'embed', 
    631721                        toolbar: 'main-embed', 
    632                         type:    'link' 
     722                        type:    'link', 
     723 
     724                        title:    l10n.fromUrlTitle, 
     725                        priority: 120 
    633726                }, 
    634727 
    635728                // The amount of time used when debouncing the scan. 
     
    637730 
    638731                initialize: function() { 
    639732                        this.debouncedScan = _.debounce( _.bind( this.scan, this ), this.sensitivity ); 
    640                         this.on( 'change:url', this.debouncedScan, this ); 
     733                        this.props = new Backbone.Model({ url: '' }); 
     734                        this.props.on( 'change:url', this.debouncedScan, this ); 
    641735                        this.on( 'scan', this.scanImage, this ); 
    642                         media.controller.State.prototype.initialize.apply( this, arguments ); 
    643736                }, 
    644737 
    645738                scan: function() { 
     
    652745                scanImage: function( attributes ) { 
    653746                        var frame = this.frame, 
    654747                                state = this, 
    655                                 url = this.get('url'), 
     748                                url = this.props.get('url'), 
    656749                                image = new Image(); 
    657750 
    658751                        image.onload = function() { 
    659                                 if ( state !== frame.state() || url !== state.get('url') ) 
     752                                if ( state !== frame.state() || url !== state.props.get('url') ) 
    660753                                        return; 
    661754 
    662755                                state.set({ 
     
    670763                }, 
    671764 
    672765                reset: function() { 
    673                         _.each( _.difference( _.keys( this.attributes ), _.keys( this.defaults ) ), function( key ) { 
    674                                 this.unset( key ); 
    675                         }, this ); 
     766                        this.props = new Backbone.Model({ url: '' }); 
    676767 
    677                         this.set( 'url', '' ); 
    678  
    679768                        if ( this.id === this.frame.state().id ) 
    680                                 this.frame.toolbar.view().refresh(); 
     769                                this.frame.toolbar.get().refresh(); 
    681770                } 
    682771        }); 
    683772 
     
    10221111                // The constructor for the `Views` manager. 
    10231112                Views: media.Views, 
    10241113 
    1025                 constructor: function() { 
     1114                constructor: function( options ) { 
    10261115                        this.views = new this.Views( this, this.views ); 
    10271116                        this.on( 'ready', this.ready, this ); 
     1117 
     1118                        if ( options && options.controller ) 
     1119                                this.controller = options.controller; 
     1120 
    10281121                        Backbone.View.apply( this, arguments ); 
    10291122                }, 
    10301123 
     
    10971190                        // Initialize regions. 
    10981191                        _.each( this.regions, function( region ) { 
    10991192                                this[ region ] = new media.controller.Region({ 
    1100                                         controller: this, 
    1101                                         id:         region, 
    1102                                         selector:   '.media-frame-' + region 
     1193                                        view:    this, 
     1194                                        id:       region, 
     1195                                        selector: '.media-frame-' + region 
    11031196                                }); 
    11041197                        }, this ); 
    11051198                }, 
     
    11131206                        // Ensure states have a reference to the frame. 
    11141207                        this.states.on( 'add', function( model ) { 
    11151208                                model.frame = this; 
     1209                                model.trigger('ready'); 
    11161210                        }, this ); 
    11171211                }, 
    11181212 
     
    11311225        media.view.MediaFrame = media.view.Frame.extend({ 
    11321226                className: 'media-frame', 
    11331227                template:  media.template('media-frame'), 
    1134                 regions:   ['menu','content','toolbar'], 
     1228                regions:   ['menu','title','content','toolbar','router'], 
    11351229 
    11361230                initialize: function() { 
    11371231                        media.view.Frame.prototype.initialize.apply( this, arguments ); 
     
    11731267                        } 
    11741268 
    11751269                        this.on( 'attach', _.bind( this.views.ready, this.views ), this ); 
     1270 
     1271                        // Bind default title creation. 
     1272                        this.on( 'title:create:default', this.createTitle, this ); 
     1273                        this.title.mode('default'); 
    11761274                }, 
    11771275 
    11781276                render: function() { 
     
    11831281                        return media.view.Frame.prototype.render.apply( this, arguments ); 
    11841282                }, 
    11851283 
     1284                createTitle: function( title ) { 
     1285                        title.view = new media.View({ 
     1286                                controller: this, 
     1287                                tagName: 'h1' 
     1288                        }); 
     1289                }, 
     1290 
     1291                createMenu: function( menu ) { 
     1292                        menu.view = new media.view.Menu({ 
     1293                                controller: this 
     1294                        }); 
     1295                }, 
     1296 
     1297                createToolbar: function( toolbar ) { 
     1298                        menu.view = new media.view.Toolbar({ 
     1299                                controller: this 
     1300                        }); 
     1301                }, 
     1302 
     1303                createRouter: function( router ) { 
     1304                        router.view = new media.view.Router({ 
     1305                                controller: this 
     1306                        }); 
     1307                }, 
     1308 
    11861309                createIframeStates: function( options ) { 
    11871310                        var settings = media.view.settings, 
    11881311                                tabs = settings.tabs, 
     
    12081331                                }, options ) ); 
    12091332                        }, this ); 
    12101333 
    1211                         this.content.on( 'activate:iframe', this.iframeContent, this ); 
    1212                         this.menu.on( 'activate:main', this.iframeMenu, this ); 
     1334                        this.on( 'content:create:iframe', this.iframeContent, this ); 
     1335                        this.on( 'menu:render:main', this.iframeMenu, this ); 
    12131336                        this.on( 'open', this.hijackThickbox, this ); 
    12141337                        this.on( 'close', this.restoreThickbox, this ); 
    12151338                }, 
    12161339 
    1217                 iframeContent: function() { 
     1340                iframeContent: function( content ) { 
    12181341                        this.$el.addClass('hide-toolbar'); 
    1219                         this.content.view( new media.view.Iframe({ 
     1342                        content.view = new media.view.Iframe({ 
    12201343                                controller: this 
    1221                         }).render() ); 
     1344                        }); 
    12221345                }, 
    12231346 
    1224                 iframeMenu: function() { 
     1347                iframeMenu: function( view ) { 
    12251348                        var views = {}; 
    12261349 
     1350                        if ( ! view ) 
     1351                                return; 
     1352 
    12271353                        _.each( media.view.settings.tabs, function( title, id ) { 
    12281354                                views[ 'iframe:' + id ] = { 
    12291355                                        text: this.state( 'iframe:' + id ).get('title'), 
     
    12311357                                }; 
    12321358                        }, this ); 
    12331359 
    1234                         this.menu.view().set( views ); 
     1360                        view.set( views ); 
    12351361                }, 
    12361362 
    12371363                hijackThickbox: function() { 
     
    13051431                                new media.controller.Library({ 
    13061432                                        selection: options.selection, 
    13071433                                        library:   media.query( options.library ), 
    1308                                         multiple:  this.options.multiple, 
     1434                                        multiple:  options.multiple, 
    13091435                                        menu:      'main', 
    1310                                         toolbar:   'select' 
    1311                                 }), 
    1312  
    1313                                 new media.controller.Upload({ 
    1314                                         menu: 'main' 
     1436                                        title:     options.title, 
     1437                                        priority:  20 
    13151438                                }) 
    13161439                        ]); 
    13171440                }, 
    13181441 
    13191442                bindHandlers: function() { 
    1320                         this.menu.on( 'activate:main', this.mainMenu, this ); 
    1321                         this.content.on( 'activate:browse', this.browseContent, this ); 
    1322                         this.content.on( 'activate:upload', this.uploadContent, this ); 
    1323                         this.toolbar.on( 'activate:select', this.selectToolbar, this ); 
     1443                        this.on( 'menu:create:main', this.createMenu, this ); 
     1444                        this.on( 'router:create:browse', this.createRouter, this ); 
     1445                        this.on( 'router:render:browse', this.browseRouter, this ); 
     1446                        this.on( 'content:create:browse', this.browseContent, this ); 
     1447                        this.on( 'content:render:upload', this.uploadContent, this ); 
     1448                        this.on( 'toolbar:create:select', this.createSelectToolbar, this ); 
    13241449 
    13251450                        this.on( 'refresh:selection', this.refreshSelectToolbar, this ); 
    13261451                }, 
    13271452 
    1328                 mainMenu: function( options ) { 
    1329                         this.menu.view( new media.view.Menu({ 
    1330                                 controller: this, 
    1331                                 silent:     options && options.silent, 
    1332  
    1333                                 views: { 
    1334                                         upload: { 
    1335                                                 text: l10n.uploadFilesTitle, 
    1336                                                 priority: 20 
    1337                                         }, 
    1338                                         library: { 
    1339                                                 text: l10n.mediaLibraryTitle, 
    1340                                                 priority: 40 
    1341                                         } 
     1453                // Routers 
     1454                browseRouter: function( view ) { 
     1455                        view.set({ 
     1456                                upload: { 
     1457                                        text:     l10n.uploadFilesTitle, 
     1458                                        priority: 20 
     1459                                }, 
     1460                                browse: { 
     1461                                        text:     l10n.mediaLibraryTitle, 
     1462                                        priority: 40 
    13421463                                } 
    1343                         }) ); 
     1464                        }); 
    13441465                }, 
    13451466 
    13461467                // Content 
    1347                 browseContent: function() { 
     1468                browseContent: function( content ) { 
    13481469                        var state = this.state(); 
    13491470 
    13501471                        this.$el.removeClass('hide-toolbar'); 
    13511472 
    13521473                        // Browse our library of attachments. 
    1353                         this.content.view( new media.view.AttachmentsBrowser({ 
     1474                        content.view = new media.view.AttachmentsBrowser({ 
    13541475                                controller: this, 
    13551476                                collection: state.get('library'), 
    13561477                                selection:  state.get('selection'), 
    13571478                                model:      state, 
    13581479                                sortable:   state.get('sortable'), 
    13591480                                search:     state.get('searchable'), 
    1360                                 uploads:    state.get('uploads'), 
    13611481                                filters:    state.get('filterable'), 
    13621482                                display:    state.get('displaySettings'), 
    13631483 
    13641484                                AttachmentView: state.get('AttachmentView') 
    1365                         }) ); 
     1485                        }); 
    13661486                }, 
    13671487 
    13681488                uploadContent: function() { 
    1369                         this.$el.addClass('hide-toolbar'); 
    1370  
    1371                         this.content.view( new media.view.UploaderInline({ 
     1489                        this.$el.removeClass('hide-toolbar'); 
     1490                        this.content.set( new media.view.UploaderInline({ 
    13721491                                controller: this 
    13731492                        }) ); 
    13741493                }, 
    13751494 
    13761495                // Toolbars 
    1377                 selectToolbar: function( options ) { 
     1496                createSelectToolbar: function( toolbar, options ) { 
    13781497                        options = _.defaults( options || {}, { 
    13791498                                event:  'select', 
    13801499                                silent: false, 
    13811500                                state:  false 
    13821501                        }); 
    13831502 
    1384                         this.toolbar.view( new media.view.Toolbar({ 
     1503                        toolbar.view = new media.view.Toolbar({ 
    13851504                                controller: this, 
    13861505                                silent:     options.silent, 
    13871506 
     
    14021521                                                } 
    14031522                                        } 
    14041523                                } 
    1405                         }) ); 
     1524                        }); 
    14061525                }, 
    14071526 
    14081527                refreshSelectToolbar: function() { 
     
    14111530                        if ( ! selection || 'select' !== this.toolbar.mode() ) 
    14121531                                return; 
    14131532 
    1414                         this.toolbar.view().get('select').model.set( 'disabled', ! selection.length ); 
     1533                        this.toolbar.get().get('select').model.set( 'disabled', ! selection.length ); 
    14151534                } 
    14161535        }); 
    14171536 
     
    14301549                }, 
    14311550 
    14321551                createStates: function() { 
    1433                         var options = this.options; 
     1552                        var options = this.options, 
     1553                                selection = options.selection, 
     1554                                library = { 
     1555                                        editable: true, 
     1556                                        menu:     'main', 
    14341557 
    1435                         // Add the default states. 
    1436                         this.states.add([ 
    1437                                 // Main states. 
    1438                                 new media.controller.Library({ 
    1439                                         selection:  options.selection, 
    1440                                         library:    media.query( options.library ), 
    1441                                         editable:   true, 
    1442                                         filterable: 'all', 
    1443                                         multiple:   this.options.multiple, 
    1444                                         menu:       'main', 
    1445  
    14461558                                        // Show the attachment display settings. 
    14471559                                        displaySettings: true, 
    14481560                                        // Update user settings when users adjust the 
    14491561                                        // attachment display settings. 
    14501562                                        displayUserSettings: true 
    1451                                 }), 
     1563                                }; 
    14521564 
    1453                                 new media.controller.Upload({ 
    1454                                         menu: 'main' 
    1455                                 }), 
     1565                        // Add the default states. 
     1566                        this.states.add([ 
     1567                                // Main states. 
     1568                                new media.controller.Library( _.defaults({ 
     1569                                        id:         'insert', 
     1570                                        title:      l10n.insertMediaTitle, 
     1571                                        priority:   20, 
     1572                                        toolbar:    'main-insert', 
     1573                                        filterable: 'all', 
     1574                                        library:    media.query( options.library ), 
     1575                                        selection:  selection, 
     1576                                        multiple:   options.multiple ? 'reset' : false 
     1577                                }, library ) ), 
    14561578 
     1579                                new media.controller.Library( _.defaults({ 
     1580                                        id:         'gallery', 
     1581                                        title:      l10n.createGalleryTitle, 
     1582                                        priority:   40, 
     1583                                        toolbar:    'main-gallery', 
     1584                                        filterable: 'uploaded', 
     1585                                        multiple:   'add', 
     1586 
     1587                                        library:  media.query( _.defaults({ 
     1588                                                type: 'image' 
     1589                                        }, options.library ) ), 
     1590 
     1591                                        selection: new media.model.Selection( selection.models, { 
     1592                                                multiple: 'add' 
     1593                                        }) 
     1594                                }, library ) ), 
     1595 
    14571596                                // Embed states. 
    14581597                                new media.controller.Embed(), 
    14591598 
    14601599                                // Gallery states. 
    1461                                 new media.controller.Gallery({ 
     1600                                new media.controller.GalleryEdit({ 
    14621601                                        library: options.selection, 
    14631602                                        editing: options.editing, 
    14641603                                        menu:    'gallery' 
     
    14711610                                        multiple:     true, 
    14721611                                        menu:         'gallery', 
    14731612                                        toolbar:      'gallery-add', 
    1474                                         excludeState: 'gallery-edit' 
    1475                                 }), 
    1476  
    1477                                 new media.controller.Upload({ 
    1478                                         id:           'gallery-upload', 
    1479                                         menu:         'gallery', 
    1480                                         libraryState: 'gallery-edit' 
     1613                                        excludeState: 'gallery-edit', 
     1614                                        title:        l10n.addToGalleryTitle, 
     1615                                        priority:     100 
    14811616                                }) 
    14821617                        ]); 
    14831618 
     
    14921627 
    14931628                bindHandlers: function() { 
    14941629                        media.view.MediaFrame.Select.prototype.bindHandlers.apply( this, arguments ); 
     1630                        this.on( 'menu:create:gallery', this.createMenu, this ); 
     1631                        this.on( 'toolbar:create:main-insert', this.createSelectionToolbar, this ); 
     1632                        this.on( 'toolbar:create:main-gallery', this.createSelectionToolbar, this ); 
    14951633 
    14961634                        var handlers = { 
    14971635                                        menu: { 
     1636                                                'main':    'mainMenu', 
    14981637                                                'gallery': 'galleryMenu' 
    14991638                                        }, 
    15001639 
     
    15041643                                        }, 
    15051644 
    15061645                                        toolbar: { 
    1507                                                 'main-attachments': 'mainAttachmentsToolbar', 
     1646                                                'main-insert':      'mainInsertToolbar', 
     1647                                                'main-gallery':     'mainGalleryToolbar', 
    15081648                                                'main-embed':       'mainEmbedToolbar', 
    15091649                                                'featured-image':   'featuredImageToolbar', 
    15101650                                                'gallery-edit':     'galleryEditToolbar', 
     
    15141654 
    15151655                        _.each( handlers, function( regionHandlers, region ) { 
    15161656                                _.each( regionHandlers, function( callback, handler ) { 
    1517                                         this[ region ].on( 'activate:' + handler, this[ callback ], this ); 
     1657                                        this.on( region + ':render:' + handler, this[ callback ], this ); 
    15181658                                }, this ); 
    15191659                        }, this ); 
    15201660                }, 
    15211661 
    15221662                // Menus 
    1523                 mainMenu: function() { 
    1524                         media.view.MediaFrame.Select.prototype.mainMenu.call( this, { silent: true }); 
    1525  
    1526                         this.menu.view().set({ 
     1663                mainMenu: function( view ) { 
     1664                        view.set({ 
    15271665                                'library-separator': new media.View({ 
    15281666                                        className: 'separator', 
    1529                                         priority: 60 
    1530                                 }), 
    1531                                 'embed': { 
    1532                                         text: l10n.fromUrlTitle, 
    1533                                         priority: 80 
    1534                                 } 
     1667                                        priority: 100 
     1668                                }) 
    15351669                        }); 
    1536  
    1537                         if ( media.view.settings.post.featuredImageId ) { 
    1538                                 this.menu.view().set( 'featured-image', { 
    1539                                         text: l10n.featuredImageTitle, 
    1540                                         priority: 100 
    1541                                 }); 
    1542                         } 
    15431670                }, 
    15441671 
    1545                 galleryMenu: function() { 
     1672                galleryMenu: function( view ) { 
    15461673                        var lastState = this.lastState(), 
    15471674                                previous = lastState && lastState.id, 
    15481675                                frame = this; 
    15491676 
    1550                         this.menu.view( new media.view.Menu({ 
    1551                                 controller: this, 
    1552                                 views: { 
    1553                                         cancel: { 
    1554                                                 text:     l10n.cancelGalleryTitle, 
    1555                                                 priority: 20, 
    1556                                                 click:    function() { 
    1557                                                         if ( previous ) 
    1558                                                                 frame.setState( previous ); 
    1559                                                         else 
    1560                                                                 frame.close(); 
    1561                                                 } 
    1562                                         }, 
    1563                                         separateCancel: new media.View({ 
    1564                                                 className: 'separator', 
    1565                                                 priority: 40 
    1566                                         }), 
    1567                                         'gallery-edit': { 
    1568                                                 text: l10n.editGalleryTitle, 
    1569                                                 priority: 60 
    1570                                         }, 
    1571                                         'gallery-upload': { 
    1572                                                 text: l10n.uploadImagesTitle, 
    1573                                                 priority: 80 
    1574                                         }, 
    1575                                         'gallery-library': { 
    1576                                                 text: l10n.mediaLibraryTitle, 
    1577                                                 priority: 100 
     1677                        view.set({ 
     1678                                cancel: { 
     1679                                        text:     l10n.cancelGalleryTitle, 
     1680                                        priority: 20, 
     1681                                        click:    function() { 
     1682                                                if ( previous ) 
     1683                                                        frame.setState( previous ); 
     1684                                                else 
     1685                                                        frame.close(); 
    15781686                                        } 
    1579                                 } 
    1580                         }) ); 
     1687                                }, 
     1688                                separateCancel: new media.View({ 
     1689                                        className: 'separator', 
     1690                                        priority: 40 
     1691                                }) 
     1692                        }); 
    15811693                }, 
    15821694 
    15831695                // Content 
     
    15871699                                model:      this.state() 
    15881700                        }).render(); 
    15891701 
    1590                         this.content.view( view ); 
     1702                        this.content.set( view ); 
    15911703                        view.url.focus(); 
    15921704                }, 
    15931705 
     
    16171729                        }); 
    16181730 
    16191731                        // Browse our library of attachments. 
    1620                         this.content.view( view ); 
     1732                        this.content.set( view ); 
    16211733                }, 
    16221734 
    1623                 // Sidebars 
    1624                 onSidebarGallerySettings: function( options ) { 
    1625                         var library = this.state().get('library'); 
     1735                // Toolbars 
     1736                createSelectionToolbar: function( toolbar ) { 
     1737                        toolbar.view = new media.view.Toolbar.Selection({ 
     1738                                controller: this, 
     1739                                editable:   this.state().get('editable') 
     1740                        }); 
     1741                }, 
    16261742 
    1627                         if ( ! library ) 
    1628                                 return; 
     1743                mainInsertToolbar: function( view ) { 
     1744                        var controller = this; 
    16291745 
    1630                         library.gallery = library.gallery || new Backbone.Model(); 
     1746                        view.button = 'insert'; 
     1747                        view.set( 'insert', { 
     1748                                style:    'primary', 
     1749                                priority: 80, 
     1750                                text:     l10n.insertIntoPost, 
    16311751 
    1632                         this.sidebar.view().set({ 
    1633                                 gallery: new media.view.Settings.Gallery({ 
    1634                                         controller: this, 
    1635                                         model:      library.gallery, 
    1636                                         priority:   40 
    1637                                 }).render() 
    1638                         }, options ); 
     1752                                click: function() { 
     1753                                        var state = controller.state(), 
     1754                                                selection = state.get('selection'); 
     1755 
     1756                                        controller.close(); 
     1757                                        state.trigger( 'insert', selection ).reset(); 
     1758                                } 
     1759                        }); 
    16391760                }, 
    16401761 
    1641                 // Toolbars 
    1642                 mainAttachmentsToolbar: function() { 
    1643                         this.toolbar.view( new media.view.Toolbar.Insert({ 
    1644                                 controller: this, 
    1645                                 editable:   this.state().get('editable') 
    1646                         }) ); 
     1762                mainGalleryToolbar: function( view ) { 
     1763                        var controller = this; 
     1764 
     1765                        view.button = 'gallery'; 
     1766                        view.set( 'gallery', { 
     1767                                style:    'primary', 
     1768                                text:     l10n.createNewGallery, 
     1769                                priority: 60, 
     1770 
     1771                                click: function() { 
     1772                                        var selection = controller.state().get('selection'), 
     1773                                                edit = controller.state('gallery-edit'), 
     1774                                                models = selection.where({ type: 'image' }); 
     1775 
     1776                                        edit.set( 'library', new media.model.Selection( models, { 
     1777                                                props:    selection.props.toJSON(), 
     1778                                                multiple: true 
     1779                                        }) ); 
     1780 
     1781                                        this.controller.setState('gallery-edit'); 
     1782                                } 
     1783                        }); 
    16471784                }, 
    16481785 
    16491786                featuredImageToolbar: function() { 
    1650                         this.toolbar.view( new media.view.Toolbar.Select({ 
     1787                        this.toolbar.set( new media.view.Toolbar.Select({ 
    16511788                                controller: this, 
    16521789                                text:       l10n.setFeaturedImage, 
    16531790                                state:      this.options.state || 'upload' 
     
    16551792                }, 
    16561793 
    16571794                mainEmbedToolbar: function() { 
    1658                         this.toolbar.view( new media.view.Toolbar.Embed({ 
     1795                        this.toolbar.set( new media.view.Toolbar.Embed({ 
    16591796                                controller: this 
    16601797                        }) ); 
    16611798 
     
    16641801 
    16651802                galleryEditToolbar: function() { 
    16661803                        var editing = this.state().get('editing'); 
    1667                         this.toolbar.view( new media.view.Toolbar({ 
     1804                        this.toolbar.set( new media.view.Toolbar({ 
    16681805                                controller: this, 
    16691806                                items: { 
    16701807                                        insert: { 
     
    16891826                }, 
    16901827 
    16911828                galleryAddToolbar: function() { 
    1692                         this.toolbar.view( new media.view.Toolbar({ 
     1829                        this.toolbar.set( new media.view.Toolbar({ 
    16931830                                controller: this, 
    16941831                                items: { 
    16951832                                        insert: { 
     
    17041841 
    17051842                                                        edit.get('library').add( state.get('selection').models ); 
    17061843                                                        state.trigger('reset'); 
    1707                                                         controller.state('gallery-edit'); 
     1844                                                        controller.setState('gallery-edit'); 
    17081845                                                } 
    17091846                                        } 
    17101847                                } 
     
    17291866                }, 
    17301867 
    17311868                initialize: function() { 
    1732                         this.controller = this.options.controller; 
    1733  
    17341869                        _.defaults( this.options, { 
    17351870                                container: document.body, 
    17361871                                title:     '', 
     
    18381973                initialize: function() { 
    18391974                        var uploader; 
    18401975 
    1841                         this.controller = this.options.controller; 
    1842  
    18431976                        this.$browser = $('<a href="#" class="browser" />').hide().appendTo('body'); 
    18441977 
    18451978                        uploader = this.options.uploader = _.defaults( this.options.uploader || {}, { 
     
    19062039                template:  media.template('uploader-inline'), 
    19072040 
    19082041                initialize: function() { 
    1909                         this.controller = this.options.controller; 
     2042                        _.defaults( this.options, { 
     2043                                message: '', 
     2044                                status:  true 
     2045                        }); 
    19102046 
    19112047                        if ( ! this.options.$browser && this.controller.uploader ) 
    19122048                                this.options.$browser = this.controller.uploader.$browser; 
     
    19142050                        if ( _.isUndefined( this.options.postId ) ) 
    19152051                                this.options.postId = media.view.settings.post.id; 
    19162052 
    1917                         this.views.set( '.upload-inline-status', new media.view.UploaderStatus({ 
    1918                                 controller: this.controller 
    1919                         }) ); 
     2053                        if ( this.options.status ) { 
     2054                                this.views.set( '.upload-inline-status', new media.view.UploaderStatus({ 
     2055                                        controller: this.controller 
     2056                                }) ); 
     2057                        } 
    19202058                }, 
    19212059 
    19222060                ready: function() { 
     
    19512089                }, 
    19522090 
    19532091                initialize: function() { 
    1954                         this.controller = this.options.controller; 
    1955  
    19562092                        this.queue = wp.Uploader.queue; 
    19572093                        this.queue.on( 'add remove reset', this.visibility, this ); 
    19582094                        this.queue.on( 'add remove reset change:percent', this.progress, this ); 
     
    20602196                className: 'media-toolbar', 
    20612197 
    20622198                initialize: function() { 
    2063                         this.controller = this.options.controller; 
    2064  
    20652199                        this._views     = {}; 
    20662200                        this.$primary   = $('<div class="media-toolbar-primary" />').prependTo( this.$el ); 
    20672201                        this.$secondary = $('<div class="media-toolbar-secondary" />').prependTo( this.$el ); 
     
    21992333        // --------------------------- 
    22002334        media.view.Toolbar.Embed = media.view.Toolbar.Select.extend({ 
    22012335                initialize: function() { 
    2202                         var controller = this.options.controller; 
    2203  
    22042336                        _.defaults( this.options, { 
    22052337                                text: l10n.insertIntoPost 
    22062338                        }); 
    22072339 
    22082340                        media.view.Toolbar.Select.prototype.initialize.apply( this, arguments ); 
    2209                         controller.on( 'change:url', this.refresh, this ); 
     2341                        this.controller.state().props.on( 'change:url', this.refresh, this ); 
    22102342                }, 
    22112343 
    22122344                refresh: function() { 
    2213                         var url = this.controller.state().get('url'); 
     2345                        var url = this.controller.state().props.get('url'); 
    22142346                        this.get('select').model.set( 'disabled', ! url || /^https?:\/\/$/.test(url) ); 
    22152347                } 
    22162348        }); 
    22172349 
    2218         // wp.media.view.Toolbar.Insert 
    2219         // ---------------------------- 
    2220         media.view.Toolbar.Insert = media.view.Toolbar.extend({ 
     2350        // wp.media.view.Toolbar.Selection 
     2351        // ------------------------------- 
     2352        media.view.Toolbar.Selection = media.view.Toolbar.extend({ 
     2353                button: 'insert', 
     2354 
    22212355                initialize: function() { 
    2222                         var controller = this.options.controller, 
    2223                                 selection = controller.state().get('selection'), 
    2224                                 selectionToLibrary; 
     2356                        var controller = this.controller; 
    22252357 
    2226                         selectionToLibrary = function( state, filter ) { 
    2227                                 return function() { 
    2228                                         var controller = this.controller, 
    2229                                                 selection = controller.state().get('selection'), 
    2230                                                 edit = controller.state( state ), 
    2231                                                 models = filter ? filter( selection ) : selection.models; 
    2232  
    2233                                         edit.set( 'library', new media.model.Selection( models, { 
    2234                                                 props:    selection.props.toJSON(), 
    2235                                                 multiple: true 
    2236                                         }) ); 
    2237  
    2238                                         this.controller.setState( state ); 
    2239                                 }; 
    2240                         }; 
    2241  
    22422358                        this.options.items = _.defaults( this.options.items || {}, { 
    22432359                                selection: new media.view.Selection({ 
    22442360                                        controller: controller, 
    2245                                         collection: selection, 
     2361                                        collection: controller.state().get('selection'), 
    22462362                                        priority:   -40, 
    22472363 
    22482364                                        // If the selection is editable, pass the callback to 
     
    22502366                                        editable: this.options.editable && function() { 
    22512367                                                this.controller.content.mode('edit-selection'); 
    22522368                                        } 
    2253                                 }).render(), 
    2254  
    2255                                 insert: { 
    2256                                         style:    'primary', 
    2257                                         priority: 80, 
    2258                                         text:     l10n.insertIntoPost, 
    2259  
    2260                                         click: function() { 
    2261                                                 controller.close(); 
    2262                                                 controller.state().trigger( 'insert', selection ).reset(); 
    2263                                         } 
    2264                                 }, 
    2265  
    2266                                 gallery: { 
    2267                                         text:     l10n.createNewGallery, 
    2268                                         priority: 40, 
    2269                                         click:    selectionToLibrary('gallery-edit', function( selection ) { 
    2270                                                 return selection.where({ type: 'image' }); 
    2271                                         }) 
    2272                                 } 
     2369                                }).render() 
    22732370                        }); 
    22742371 
    22752372                        media.view.Toolbar.prototype.initialize.apply( this, arguments ); 
     
    22772374 
    22782375                refresh: function() { 
    22792376                        var selection = this.controller.state().get('selection'), 
    2280                                 count = selection.length; 
     2377                                button = this.get( this.button ); 
    22812378 
    2282                         this.get('insert').model.set( 'disabled', ! selection.length ); 
     2379                        if ( ! button ) 
     2380                                return; 
    22832381 
    2284                         // Check if any attachment in the selection is an image. 
    2285                         this.get('gallery').$el.toggle( count > 1 && selection.any( function( attachment ) { 
    2286                                 return 'image' === attachment.get('type'); 
    2287                         }) ); 
     2382                        button.model.set( 'disabled', ! selection.length ); 
    22882383                } 
    22892384        }); 
    22902385 
     
    23882483                tagName:   'div', 
    23892484 
    23902485                initialize: function() { 
    2391                         this.controller = this.options.controller; 
    2392                         this._views     = {}; 
     2486                        this._views = {}; 
    23932487 
    23942488                        this.set( _.extend( {}, this._views, this.options.views ), { silent: true }); 
    23952489                        delete this.options.views; 
     
    24572551                } 
    24582552        }); 
    24592553 
     2554        /** 
     2555         * wp.media.view.MenuItem 
     2556         */ 
     2557        media.view.MenuItem = media.View.extend({ 
     2558                tagName:   'a', 
     2559                className: 'media-menu-item', 
    24602560 
     2561                attributes: { 
     2562                        href: '#' 
     2563                }, 
     2564 
     2565                events: { 
     2566                        'click': '_click' 
     2567                }, 
     2568 
     2569                _click: function( event ) { 
     2570                        var clickOverride = this.options.click; 
     2571 
     2572                        event.preventDefault(); 
     2573 
     2574                        if ( clickOverride ) 
     2575                                clickOverride.call( this ); 
     2576                        else 
     2577                                this.click(); 
     2578                }, 
     2579 
     2580                click: function() { 
     2581                        var state = this.options.state; 
     2582                        if ( state ) 
     2583                                this.controller.setState( state ); 
     2584                }, 
     2585 
     2586                render: function() { 
     2587                        var options = this.options; 
     2588 
     2589                        if ( options.text ) 
     2590                                this.$el.text( options.text ); 
     2591                        else if ( options.html ) 
     2592                                this.$el.html( options.html ); 
     2593 
     2594                        return this; 
     2595                } 
     2596        }); 
     2597 
    24612598        /** 
    24622599         * wp.media.view.Menu 
    24632600         */ 
    24642601        media.view.Menu = media.view.PriorityList.extend({ 
    2465                 tagName:   'ul', 
     2602                tagName:   'div', 
    24662603                className: 'media-menu', 
     2604                property:  'state', 
     2605                ItemView:  media.view.MenuItem, 
     2606                region:    'menu', 
    24672607 
    2468                 toView: function( options, state ) { 
     2608                toView: function( options, id ) { 
    24692609                        options = options || {}; 
    2470                         options.state = options.state || state; 
    2471                         return new media.view.MenuItem( options ).render(); 
     2610                        options[ this.property ] = options[ this.property ] || id; 
     2611                        return new this.ItemView( options ).render(); 
    24722612                }, 
    24732613 
    2474                 select: function( state ) { 
    2475                         var view = this.get( state ); 
     2614                ready: function() { 
     2615                        media.view.PriorityList.prototype.ready.apply( this, arguments ); 
     2616                        this.visibility(); 
     2617                }, 
    24762618 
     2619                set: function() { 
     2620                        media.view.PriorityList.prototype.set.apply( this, arguments ); 
     2621                        this.visibility(); 
     2622                }, 
     2623 
     2624                unset: function() { 
     2625                        media.view.PriorityList.prototype.unset.apply( this, arguments ); 
     2626                        this.visibility(); 
     2627                }, 
     2628 
     2629                visibility: function() { 
     2630                        var region = this.region, 
     2631                                view = this.controller[ region ].get(), 
     2632                                views = this.views.get(), 
     2633                                hide = ! views || views.length < 2; 
     2634 
     2635                        if ( this === view ) 
     2636                                this.controller.$el.toggleClass( 'hide-' + region, hide ); 
     2637                }, 
     2638 
     2639                select: function( id ) { 
     2640                        var view = this.get( id ); 
     2641 
    24772642                        if ( ! view ) 
    24782643                                return; 
    24792644 
     
    24862651                } 
    24872652        }); 
    24882653 
    2489         media.view.MenuItem = media.View.extend({ 
    2490                 tagName:   'li', 
    2491                 className: 'media-menu-item', 
     2654        /** 
     2655         * wp.media.view.RouterItem 
     2656         */ 
     2657        media.view.RouterItem = media.view.MenuItem.extend({ 
     2658                click: function() { 
     2659                        var contentMode = this.options.contentMode; 
     2660                        if ( contentMode ) 
     2661                                this.controller.content.mode( contentMode ); 
     2662                } 
     2663        }); 
    24922664 
    2493                 events: { 
    2494                         'click': 'click' 
    2495                 }, 
     2665        /** 
     2666         * wp.media.view.Router 
     2667         */ 
     2668        media.view.Router = media.view.Menu.extend({ 
     2669                tagName:   'div', 
     2670                className: 'media-router', 
     2671                property:  'contentMode', 
     2672                ItemView:  media.view.RouterItem, 
     2673                region:    'router', 
    24962674 
    2497                 click: function() { 
    2498                         var options = this.options; 
    2499  
    2500                         if ( options.click ) 
    2501                                 options.click.call( this ); 
    2502                         else if ( options.state ) 
    2503                                 this.controller.setState( options.state ); 
     2675                initialize: function() { 
     2676                        this.controller.on( 'content:render', this.update, this ); 
     2677                        media.view.Menu.prototype.initialize.apply( this, arguments ); 
    25042678                }, 
    25052679 
    2506                 render: function() { 
    2507                         var options = this.options; 
    2508  
    2509                         if ( options.text ) 
    2510                                 this.$el.text( options.text ); 
    2511                         else if ( options.html ) 
    2512                                 this.$el.html( options.html ); 
    2513  
    2514                         return this; 
     2680                update: function() { 
     2681                        var mode = this.controller.content.mode(); 
     2682                        if ( mode ) 
     2683                                this.select( mode ); 
    25152684                } 
    25162685        }); 
    25172686 
     2687 
    25182688        /** 
    25192689         * wp.media.view.Sidebar 
    25202690         */ 
     
    25312701                template:  media.template('attachment'), 
    25322702 
    25332703                events: { 
    2534                         'click .attachment-preview':      'toggleSelection', 
     2704                        'click .attachment-preview':      'toggleSelectionHandler', 
    25352705                        'change [data-setting]':          'updateSetting', 
    25362706                        'change [data-setting] input':    'updateSetting', 
    25372707                        'change [data-setting] select':   'updateSetting', 
     
    25462716                initialize: function() { 
    25472717                        var selection = this.options.selection; 
    25482718 
    2549                         this.controller = this.options.controller; 
    2550  
    25512719                        this.model.on( 'change:sizes change:uploading change:caption change:title', this.render, this ); 
    25522720                        this.model.on( 'change:percent', this.progress, this ); 
    25532721 
     
    26232791                                this.$bar.width( this.model.get('percent') + '%' ); 
    26242792                }, 
    26252793 
    2626                 toggleSelection: function( event ) { 
    2627                         var selection = this.options.selection, 
    2628                                 model = this.model; 
     2794                toggleSelectionHandler: function( event ) { 
     2795                        var method; 
    26292796 
     2797                        if ( event.shiftKey ) 
     2798                                method = 'between'; 
     2799                        else if ( event.ctrlKey || event.metaKey ) 
     2800                                method = 'toggle'; 
     2801 
     2802                        this.toggleSelection({ 
     2803                                method: method 
     2804                        }); 
     2805                }, 
     2806 
     2807                toggleSelection: function( options ) { 
     2808                        var collection = this.collection, 
     2809                                selection = this.options.selection, 
     2810                                model = this.model, 
     2811                                method = options && options.method, 
     2812                                single, between, models, singleIndex, modelIndex; 
     2813 
    26302814                        if ( ! selection ) 
    26312815                                return; 
    26322816 
     2817                        single = selection.single(); 
     2818                        method = _.isUndefined( method ) ? selection.multiple : method; 
     2819 
     2820                        // If the `method` is set to `between`, select all models that 
     2821                        // exist between the current and the selected model. 
     2822                        if ( 'between' === method && single && selection.multiple ) { 
     2823                                // If the models are the same, short-circuit. 
     2824                                if ( single === model ) 
     2825                                        return; 
     2826 
     2827                                singleIndex = collection.indexOf( single ); 
     2828                                modelIndex  = collection.indexOf( this.model ); 
     2829 
     2830                                if ( singleIndex < modelIndex ) 
     2831                                        models = collection.models.slice( singleIndex, modelIndex + 1 ); 
     2832                                else 
     2833                                        models = collection.models.slice( modelIndex, singleIndex + 1 ); 
     2834 
     2835                                selection.add( models ).single( model ); 
     2836                                return; 
     2837 
     2838                        // If the `method` is set to `toggle`, just flip the selection 
     2839                        // status, regardless of whether the model is the single model. 
     2840                        } else if ( 'toggle' === method ) { 
     2841                                selection[ this.selected() ? 'remove' : 'add' ]( model ).single( model ); 
     2842                                return; 
     2843                        } 
     2844 
     2845                        if ( method !== 'add' ) 
     2846                                method = 'reset'; 
     2847 
    26332848                        if ( this.selected() ) { 
    26342849                                // If the model is the single model, remove it. 
    26352850                                // If it is not the same as the single model, 
    26362851                                // it now becomes the single model. 
    2637                                 selection[ selection.single() === model ? 'remove' : 'single' ]( model ); 
     2852                                selection[ single === model ? 'remove' : 'single' ]( model ); 
    26382853                        } else { 
    2639                                 selection.add( model ).single( model ); 
     2854                                // If the model is not selected, run the `method` on the 
     2855                                // selection. By default, we `reset` the selection, but the 
     2856                                // `method` can be set to `add` the model to the selection. 
     2857                                selection[ method ]( model ).single( model ); 
    26402858                        } 
    26412859                }, 
    26422860 
     
    28383056                }, 
    28393057 
    28403058                initialize: function() { 
    2841                         this.controller = this.options.controller; 
    28423059                        this.el.id = _.uniqueId('__attachments-view-'); 
    28433060 
    28443061                        _.defaults( this.options, { 
     
    32003417                className: 'attachments-browser', 
    32013418 
    32023419                initialize: function() { 
    3203                         this.controller = this.options.controller; 
    3204  
    32053420                        _.defaults( this.options, { 
    32063421                                filters: false, 
    32073422                                search:  true, 
    3208                                 uploads: false, 
    32093423                                display: false, 
    32103424 
    32113425                                AttachmentView: media.view.Attachment.Library 
     
    32903504                        this.removeContent(); 
    32913505 
    32923506                        this.uploader = new media.view.UploaderInline({ 
    3293                                 controller: this.controller 
     3507                                controller: this.controller, 
     3508                                status:     false, 
     3509                                message:    l10n.noItemsFound 
    32943510                        }); 
    32953511 
    32963512                        this.views.add( this.uploader ); 
     
    33223538 
    33233539                        this.views.add( sidebar ); 
    33243540 
    3325                         if ( options.uploads && this.controller.uploader ) { 
     3541                        if ( this.controller.uploader ) { 
    33263542                                sidebar.set( 'uploads', new media.view.UploaderStatus({ 
    33273543                                        controller: this.controller, 
    33283544                                        priority:   40 
     
    33733589        }); 
    33743590 
    33753591        /** 
    3376          * wp.media.view.SelectionPreview 
    3377          */ 
    3378         media.view.SelectionPreview = media.View.extend({ 
    3379                 tagName:   'div', 
    3380                 className: 'selection-preview', 
    3381                 template:  media.template('media-selection-preview'), 
    3382  
    3383                 events: { 
    3384                         'click .clear-selection': 'clear' 
    3385                 }, 
    3386  
    3387                 initialize: function() { 
    3388                         _.defaults( this.options, { 
    3389                                 clearable: true 
    3390                         }); 
    3391  
    3392                         this.controller = this.options.controller; 
    3393                         this.collection.on( 'add change:url remove', this.render, this ); 
    3394                         this.render(); 
    3395                 }, 
    3396  
    3397                 render: function() { 
    3398                         var options = _.clone( this.options ), 
    3399                                 last, sizes, amount; 
    3400  
    3401                         // If nothing is selected, display nothing. 
    3402                         if ( ! this.collection.length ) { 
    3403                                 this.$el.empty(); 
    3404                                 return this; 
    3405                         } 
    3406  
    3407                         options.count = this.collection.length; 
    3408                         last  = this.collection.last(); 
    3409                         sizes = last.get('sizes'); 
    3410  
    3411                         if ( 'image' === last.get('type') ) 
    3412                                 options.thumbnail = ( sizes && sizes.thumbnail ) ? sizes.thumbnail.url : last.get('url'); 
    3413                         else 
    3414                                 options.thumbnail =  last.get('icon'); 
    3415  
    3416                         this.$el.html( this.template( options ) ); 
    3417                         return this; 
    3418                 }, 
    3419  
    3420                 clear: function( event ) { 
    3421                         event.preventDefault(); 
    3422                         this.collection.reset(); 
    3423                 } 
    3424         }); 
    3425  
    3426         /** 
    34273592         * wp.media.view.Selection 
    34283593         */ 
    34293594        media.view.Selection = media.View.extend({ 
     
    34423607                                clearable: true 
    34433608                        }); 
    34443609 
    3445                         this.controller = this.options.controller; 
    34463610                        this.attachments = new media.view.Attachments({ 
    34473611                                controller: this.controller, 
    34483612                                collection: this.collection, 
     
    37683932        media.view.Iframe = media.View.extend({ 
    37693933                className: 'media-iframe', 
    37703934 
    3771                 initialize: function() { 
    3772                         this.controller = this.options.controller; 
    3773                 }, 
    3774  
    37753935                render: function() { 
     3936                        this.views.detach(); 
    37763937                        this.$el.html( '<iframe src="' + this.controller.state().get('src') + '" />' ); 
     3938                        this.views.render(); 
    37773939                        return this; 
    37783940                } 
    37793941        }); 
     
    37853947                className: 'media-embed', 
    37863948 
    37873949                initialize: function() { 
    3788                         this.controller = this.options.controller; 
    3789  
    37903950                        this.url = new media.view.EmbedUrl({ 
    37913951                                controller: this.controller, 
    3792                                 model:      this.model 
     3952                                model:      this.model.props 
    37933953                        }).render(); 
    37943954 
    37953955                        this._settings = new media.View(); 
     
    38263986 
    38273987                        this.settings( new constructor({ 
    38283988                                controller: this.controller, 
    3829                                 model:      this.model, 
     3989                                model:      this.model.props, 
    38303990                                priority:   40 
    38313991                        }) ); 
    38323992                } 
     
    38464006                }, 
    38474007 
    38484008                initialize: function() { 
    3849                         this.label = this.make( 'span', null, this.options.label || l10n.url ); 
    38504009                        this.input = this.make( 'input', { 
    38514010                                type:  'text', 
    38524011                                value: this.model.get('url') || '' 
    38534012                        }); 
    38544013 
    3855                         this.$label = $( this.label ); 
    38564014                        this.$input = $( this.input ); 
    3857                         this.$el.append([ this.label, this.input ]); 
     4015                        this.$el.append( this.input ); 
    38584016 
    38594017                        this.model.on( 'change:url', this.render, this ); 
    38604018                }, 
  • wp-includes/media.php

     
    14671467 
    14681468                // Library 
    14691469                'mediaLibraryTitle'  => __( 'Media Library' ), 
     1470                'insertMediaTitle'   => __( 'Insert Media' ), 
    14701471                'createNewGallery'   => __( 'Create a new gallery' ), 
    14711472                'returnToLibrary'    => __( '&#8592; Return to library' ), 
    14721473                'allMediaItems'      => __( 'All media items' ), 
     1474                'noItemsFound'       => __( 'No items found.' ), 
    14731475                'insertIntoPost'     => $hier ? __( 'Insert into page' ) : __( 'Insert into post' ), 
    14741476                'uploadedToThisPost' => $hier ? __( 'Uploaded to this page' ) : __( 'Uploaded to this post' ), 
    14751477                'warnDelete' =>      __( "You are about to permanently delete this item.\n  'Cancel' to stop, 'OK' to delete." ), 
     
    14891491                'updateGallery'      => __( 'Update gallery' ), 
    14901492                'continueEditing'    => __( 'Continue editing' ), 
    14911493                'addToGallery'       => __( 'Add to gallery' ), 
     1494                'addToGalleryTitle'  => __( 'Add to Gallery' ), 
    14921495                'reverseOrder'       => __( 'Reverse order' ), 
    14931496        ); 
    14941497 
     
    15171520        ?> 
    15181521        <script type="text/html" id="tmpl-media-frame"> 
    15191522                <div class="media-frame-menu"></div> 
     1523                <div class="media-frame-title"></div> 
     1524                <div class="media-frame-router"></div> 
    15201525                <div class="media-frame-content"></div> 
    15211526                <div class="media-frame-toolbar"></div> 
    15221527                <div class="media-frame-uploader"></div> 
     
    15241529 
    15251530        <script type="text/html" id="tmpl-media-modal"> 
    15261531                <div class="media-modal wp-core-ui"> 
    1527                         <h3 class="media-modal-title">{{ data.title }}</h3> 
    1528                         <a class="media-modal-close media-modal-icon" href="#" title="<?php esc_attr_e('Close'); ?>"></a> 
     1532                        <a class="media-modal-close" href="#" title="<?php esc_attr_e('Close'); ?>"><span class="media-modal-icon"></span></a> 
    15291533                        <div class="media-modal-content"></div> 
    15301534                </div> 
    1531                 <div class="media-modal-backdrop"> 
    1532                         <div></div> 
    1533                 </div> 
     1535                <div class="media-modal-backdrop"></div> 
    15341536        </script> 
    15351537 
    15361538        <script type="text/html" id="tmpl-uploader-window"> 
     
    15401542        </script> 
    15411543 
    15421544        <script type="text/html" id="tmpl-uploader-inline"> 
    1543                 <div class="uploader-inline-content"> 
     1545                <# var messageClass = data.message ? 'has-upload-message' : 'no-upload-message'; #> 
     1546                <div class="uploader-inline-content {{ messageClass }}"> 
     1547                <# if ( data.message ) { #> 
     1548                        <h3 class="upload-message">{{ data.message }}</h3> 
     1549                <# } #> 
    15441550                <?php if ( ! _device_can_upload() ) : ?> 
    1545                         <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> 
     1551                        <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> 
    15461552                <?php elseif ( is_multisite() && ! is_upload_space_available() ) : ?> 
    1547                         <h3><?php _e( 'Upload Limit Exceeded' ); ?></h3> 
     1553                        <h3 class="upload-instructions"><?php _e( 'Upload Limit Exceeded' ); ?></h3> 
    15481554                        <?php do_action( 'upload_ui_over_quota' ); ?> 
    15491555 
    15501556                <?php else : ?> 
    15511557                        <div class="upload-ui"> 
    1552                                 <h3 class="drop-instructions"><?php _e( 'Drop files anywhere to upload' ); ?></h3> 
     1558                                <h3 class="upload-instructions drop-instructions"><?php _e( 'Drop files anywhere to upload' ); ?></h3> 
    15531559                                <a href="#" class="browser button button-hero"><?php _e( 'Select Files' ); ?></a> 
    15541560                        </div> 
    15551561 
     
    17441750                <div class="selection-view"></div> 
    17451751        </script> 
    17461752 
    1747         <script type="text/html" id="tmpl-media-selection-preview"> 
    1748                 <div class="selected-img selected-count-{{ data.count }}"> 
    1749                         <# if ( data.thumbnail ) { #> 
    1750                                 <img src="{{ data.thumbnail }}" draggable="false" /> 
    1751                         <# } #> 
    1752  
    1753                         <span class="count">{{ data.count }}</span> 
    1754                 </div> 
    1755                 <# if ( data.clearable ) { #> 
    1756                         <a class="clear-selection" href="#"><?php _e('Clear selection'); ?></a> 
    1757                 <# } #> 
    1758         </script> 
    1759  
    17601753        <script type="text/html" id="tmpl-attachment-display-settings"> 
    17611754                <h3><?php _e('Attachment Display Settings'); ?></h3> 
    17621755