WordPress.org

Make WordPress Core

Ticket #21390: 21390.5.diff

File 21390.5.diff, 63.6 KB (added by koopersmith, 5 years 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

     
    11/**
    22 * Modal
    33 */
    4 .media-modal-title {
    5         left: auto;
    6         right: 0;
    7 }
    8 
    94.media-modal-close {
    105        right: auto;
    11         left: 0;
     6        left: 7px;
    127}
    138
    149/**
    1510 * Toolbar
    1611 */
    17 .media-frame-toolbar > .media-toolbar {
    18         left: 0;
    19         right: 200px;
    20 }
    21 
    22 
    2312.media-toolbar-primary {
    2413        float: left;
    2514}
     
    9382 * Menu
    9483 */
    9584.media-menu {
    96         left: auto;
    97         right: 0;
    9885        border-right: 0;
    9986        border-left: 1px solid #d9d9d9;
    10087        box-shadow: inset 6px 0 6px -6px rgba( 0, 0, 0, 0.2 )
    10188}
    10289
    10390/**
     91 * Router
     92 */
     93.media-router > a {
     94        float: right;
     95        border-right: 0;
     96        border-left: 1px solid #dfdfdf;
     97}
     98.media-router > a:last-child {
     99        border-left: 0;
     100}
     101
     102/**
    104103 * Frame
    105104 */
    106 .media-frame .region-content {
     105.media-frame-menu {
     106        left: auto;
     107        right: 0;
     108}
     109
     110.media-frame-title,
     111.media-frame-router,
     112.media-frame-content,
     113.media-frame-toolbar {
    107114        left: 0;
    108115        right: 200px;
    109116}
    110117
     118.media-frame.hide-menu .media-frame-title,
     119.media-frame.hide-menu .media-frame-router,
     120.media-frame.hide-menu .media-frame-toolbar,
     121.media-frame.hide-menu .media-frame-content {
     122        right: 0;
     123}
     124
     125.media-frame.hide-menu .media-frame-menu {
     126        left: auto;
     127        right: -200px;
     128}
     129
    111130/**
    112131 * Attachment Browser Filters
    113132 */
     
    226245}
    227246
    228247/**
    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 /**
    253248 * Attachment Details
    254249 */
    255250.attachment-info .thumbnail {
     
    289284 * Responsive layout
    290285 */
    291286@media only screen and (max-width: 900px) {
    292         .media-frame .region-content,
    293         .media-frame-toolbar > .media-toolbar {
     287        .media-frame-title,
     288        .media-frame-router,
     289        .media-frame-content,
     290        .media-frame-toolbar {
    294291                left: 0;
    295292                right: 140px;
    296293        }
  • 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 {
     
    12971353.embed-url {
    12981354        display: block;
    12991355        position: relative;
    1300         height: 75px;
    1301         padding: 16px 16px;
     1356        height: 40px;
     1357        padding: 0 16px 16px;
    13021358        margin: 0;
    1303         z-index: 50;
     1359        z-index: 250;
     1360        background: #fff;
    13041361        border-bottom: 1px solid #dfdfdf;
    13051362        box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, 0.1 );
    13061363        font-size: 18px;
    13071364        font-weight: 200;
    13081365}
    13091366
    1310 .embed-url span {
    1311         display: block;
    1312         padding: 4px 0 6px 2px;
    1313 }
    1314 
    13151367.media-frame .embed-url input {
    13161368        font-size: 18px;
    13171369        padding: 12px 14px;
     
    13241376.embed-image-settings {
    13251377        position: absolute;
    13261378        background: #f5f5f5;
    1327         top: 108px;
     1379        top: 57px;
    13281380        left: 0;
    13291381        right: 0;
    13301382        bottom: 0;
     
    13881440 * Responsive layout
    13891441 */
    13901442@media only screen and (max-width: 900px) {
    1391         .media-modal {
    1392                 bottom: 20px;
    1393                 left: 20px;
    1394                 right: 20px;
    1395                 top: 40px;
    1396         }
    1397 
    1398         .media-modal-title {
    1399                 height: 30px;
    1400                 line-height: 30px;
    1401                 top: -30px;
    1402         }
    1403 
    1404         .media-modal-close {
    1405                 top: -23px;
    1406         }
    1407 
    1408         .media-modal-backdrop div,
    1409         .uploader-window-content {
    1410                 top: 5px;
    1411                 left: 5px;
    1412                 right: 5px;
    1413                 bottom: 5px;
    1414         }
    1415 
    1416         .media-menu {
     1443        .media-frame-menu {
    14171444                width: 139px;
    14181445        }
    14191446
     
    14211448                padding: 4px 10px;
    14221449        }
    14231450
    1424         .media-frame .region-content,
    1425         .media-frame-toolbar > .media-toolbar {
     1451        .media-frame-title,
     1452        .media-frame-router,
     1453        .media-frame-content,
     1454        .media-frame-toolbar {
    14261455                left: 140px;
    14271456        }
    14281457
  • 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                                lastMultiple, thisMultiple;
     475
     476                        if ( ! lastSelection )
     477                                return;
     478
     479                        // We don't care about the method of multiple selection the
     480                        // selections use, just that they both support (or don't support)
     481                        // multiple selection.
     482                        lastMultiple = !! lastSelection.multiple;
     483                        thisMultiple = !! selection.multiple;
     484
     485                        if ( lastMultiple !== thisMultiple )
     486                                return;
     487
     488                        selection.reset( lastSelection.toArray() ).single( lastSelection.single() );
     489                },
     490
    374491                refreshSelection: function() {
    375492                        var selection = this.get('selection'),
    376493                                mode = this.frame.content.mode();
    377494
    378                         this.frame.toolbar.view().refresh();
     495                        this.frame.toolbar.get().refresh();
    379496                        this.trigger( 'refresh:selection', this, selection );
    380497
    381498                        if ( ! selection.length && 'browse' !== mode && 'upload' !== mode )
    382                                 this.content();
     499                                this.frame.content.render();
    383500                },
    384501
    385                 selectUpload: function( attachment ) {
    386                         this.get('selection').add( attachment );
     502                uploading: function( attachment ) {
     503                        var content = this.frame.content;
     504
     505                        // If the uploader was selected, navigate to the browser.
     506                        if ( 'upload' === content.mode() )
     507                                this.frame.content.mode('browse');
     508
     509                        // If we're in a workflow that supports multiple attachments,
     510                        // automatically select any uploading attachments.
     511                        if ( this.get('multiple') )
     512                                this.get('selection').add( attachment );
    387513                },
    388514
     515                saveContentMode: function() {
     516                        // Only track the browse router on library states.
     517                        if ( 'browse' !== this.get('router') )
     518                                return;
     519
     520                        setUserSetting( 'libraryContent', this.frame.content.mode() );
     521                },
     522
    389523                buildComposite: function() {
    390524                        var original = this.get('_library'),
    391525                                exclude = this.get('exclude'),
     
    448582                }
    449583        });
    450584
    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({
     585        // wp.media.controller.GalleryEdit
     586        // -------------------------------
     587        media.controller.GalleryEdit = media.controller.Library.extend({
    490588                defaults: {
    491589                        id:         'gallery-edit',
    492590                        multiple:   false,
     
    496594                        sortable:   true,
    497595                        searchable: false,
    498596                        toolbar:    'gallery-edit',
    499                         content:    'browse'
     597                        content:    'browse',
     598                        title:      l10n.editGalleryTitle,
     599                        priority:   60
    500600                },
    501601
    502602                initialize: function() {
     
    519619                        // Watch for uploaded attachments.
    520620                        this.get('library').observe( wp.Uploader.queue );
    521621
    522                         this.frame.content.on( 'activate:browse', this.gallerySettings, this );
     622                        this.frame.on( 'content:render:browse', this.gallerySettings, this );
    523623
    524624                        media.controller.Library.prototype.activate.apply( this, arguments );
    525625                },
     
    528628                        // Stop watching for uploaded attachments.
    529629                        this.get('library').unobserve( wp.Uploader.queue );
    530630
    531                         this.frame.content.off( null, null, this );
     631                        this.frame.off( 'content:render:browse', this.gallerySettings, this );
     632
    532633                        media.controller.Library.prototype.deactivate.apply( this, arguments );
    533634                },
    534635
    535                 gallerySettings: function() {
    536                         var library = this.get('library'),
    537                                 browser;
     636                gallerySettings: function( browser ) {
     637                        var library = this.get('library');
    538638
    539                         if ( ! library )
     639                        if ( ! library || ! browser )
    540640                                return;
    541641
    542642                        library.gallery = library.gallery || new Backbone.Model();
    543643
    544                         browser = this.frame.content.view();
    545 
    546644                        browser.sidebar.set({
    547645                                gallery: new media.view.Settings.Gallery({
    548646                                        controller: this,
     
    570668                        filterable: 'uploaded',
    571669                        multiple:   false,
    572670                        menu:       'main',
    573                         toolbar:    'featured-image'
     671                        toolbar:    'featured-image',
     672                        title:      l10n.featuredImageTitle,
     673                        priority:   60
    574674                }, media.controller.Library.prototype.defaults ),
    575675
    576676                initialize: function() {
     
    629729                        menu:    'main',
    630730                        content: 'embed',
    631731                        toolbar: 'main-embed',
    632                         type:    'link'
     732                        type:    'link',
     733
     734                        title:    l10n.fromUrlTitle,
     735                        priority: 120
    633736                },
    634737
    635738                // The amount of time used when debouncing the scan.
     
    637740
    638741                initialize: function() {
    639742                        this.debouncedScan = _.debounce( _.bind( this.scan, this ), this.sensitivity );
    640                         this.on( 'change:url', this.debouncedScan, this );
     743                        this.props = new Backbone.Model({ url: '' });
     744                        this.props.on( 'change:url', this.debouncedScan, this );
    641745                        this.on( 'scan', this.scanImage, this );
    642                         media.controller.State.prototype.initialize.apply( this, arguments );
    643746                },
    644747
    645748                scan: function() {
     
    652755                scanImage: function( attributes ) {
    653756                        var frame = this.frame,
    654757                                state = this,
    655                                 url = this.get('url'),
     758                                url = this.props.get('url'),
    656759                                image = new Image();
    657760
    658761                        image.onload = function() {
    659                                 if ( state !== frame.state() || url !== state.get('url') )
     762                                if ( state !== frame.state() || url !== state.props.get('url') )
    660763                                        return;
    661764
    662765                                state.set({
     
    670773                },
    671774
    672775                reset: function() {
    673                         _.each( _.difference( _.keys( this.attributes ), _.keys( this.defaults ) ), function( key ) {
    674                                 this.unset( key );
    675                         }, this );
     776                        this.props = new Backbone.Model({ url: '' });
    676777
    677                         this.set( 'url', '' );
    678 
    679778                        if ( this.id === this.frame.state().id )
    680                                 this.frame.toolbar.view().refresh();
     779                                this.frame.toolbar.get().refresh();
    681780                }
    682781        });
    683782
     
    10221121                // The constructor for the `Views` manager.
    10231122                Views: media.Views,
    10241123
    1025                 constructor: function() {
     1124                constructor: function( options ) {
    10261125                        this.views = new this.Views( this, this.views );
    10271126                        this.on( 'ready', this.ready, this );
     1127
     1128                        if ( options && options.controller )
     1129                                this.controller = options.controller;
     1130
    10281131                        Backbone.View.apply( this, arguments );
    10291132                },
    10301133
     
    10971200                        // Initialize regions.
    10981201                        _.each( this.regions, function( region ) {
    10991202                                this[ region ] = new media.controller.Region({
    1100                                         controller: this,
    1101                                         id:         region,
    1102                                         selector:   '.media-frame-' + region
     1203                                        view:    this,
     1204                                        id:       region,
     1205                                        selector: '.media-frame-' + region
    11031206                                });
    11041207                        }, this );
    11051208                },
     
    11131216                        // Ensure states have a reference to the frame.
    11141217                        this.states.on( 'add', function( model ) {
    11151218                                model.frame = this;
     1219                                model.trigger('ready');
    11161220                        }, this );
    11171221                },
    11181222
     
    11311235        media.view.MediaFrame = media.view.Frame.extend({
    11321236                className: 'media-frame',
    11331237                template:  media.template('media-frame'),
    1134                 regions:   ['menu','content','toolbar'],
     1238                regions:   ['menu','title','content','toolbar','router'],
    11351239
    11361240                initialize: function() {
    11371241                        media.view.Frame.prototype.initialize.apply( this, arguments );
     
    11731277                        }
    11741278
    11751279                        this.on( 'attach', _.bind( this.views.ready, this.views ), this );
     1280
     1281                        // Bind default title creation.
     1282                        this.on( 'title:create:default', this.createTitle, this );
     1283                        this.title.mode('default');
    11761284                },
    11771285
    11781286                render: function() {
     
    11831291                        return media.view.Frame.prototype.render.apply( this, arguments );
    11841292                },
    11851293
     1294                createTitle: function( title ) {
     1295                        title.view = new media.View({
     1296                                controller: this,
     1297                                tagName: 'h1'
     1298                        });
     1299                },
     1300
     1301                createMenu: function( menu ) {
     1302                        menu.view = new media.view.Menu({
     1303                                controller: this
     1304                        });
     1305                },
     1306
     1307                createToolbar: function( toolbar ) {
     1308                        menu.view = new media.view.Toolbar({
     1309                                controller: this
     1310                        });
     1311                },
     1312
     1313                createRouter: function( router ) {
     1314                        router.view = new media.view.Router({
     1315                                controller: this
     1316                        });
     1317                },
     1318
    11861319                createIframeStates: function( options ) {
    11871320                        var settings = media.view.settings,
    11881321                                tabs = settings.tabs,
     
    12081341                                }, options ) );
    12091342                        }, this );
    12101343
    1211                         this.content.on( 'activate:iframe', this.iframeContent, this );
    1212                         this.menu.on( 'activate:main', this.iframeMenu, this );
     1344                        this.on( 'content:create:iframe', this.iframeContent, this );
     1345                        this.on( 'menu:render:main', this.iframeMenu, this );
    12131346                        this.on( 'open', this.hijackThickbox, this );
    12141347                        this.on( 'close', this.restoreThickbox, this );
    12151348                },
    12161349
    1217                 iframeContent: function() {
     1350                iframeContent: function( content ) {
    12181351                        this.$el.addClass('hide-toolbar');
    1219                         this.content.view( new media.view.Iframe({
     1352                        content.view = new media.view.Iframe({
    12201353                                controller: this
    1221                         }).render() );
     1354                        });
    12221355                },
    12231356
    1224                 iframeMenu: function() {
     1357                iframeMenu: function( view ) {
    12251358                        var views = {};
    12261359
     1360                        if ( ! view )
     1361                                return;
     1362
    12271363                        _.each( media.view.settings.tabs, function( title, id ) {
    12281364                                views[ 'iframe:' + id ] = {
    12291365                                        text: this.state( 'iframe:' + id ).get('title'),
     
    12311367                                };
    12321368                        }, this );
    12331369
    1234                         this.menu.view().set( views );
     1370                        view.set( views );
    12351371                },
    12361372
    12371373                hijackThickbox: function() {
     
    13051441                                new media.controller.Library({
    13061442                                        selection: options.selection,
    13071443                                        library:   media.query( options.library ),
    1308                                         multiple:  this.options.multiple,
     1444                                        multiple:  options.multiple,
    13091445                                        menu:      'main',
    1310                                         toolbar:   'select'
    1311                                 }),
    1312 
    1313                                 new media.controller.Upload({
    1314                                         menu: 'main'
     1446                                        title:     options.title,
     1447                                        priority:  20
    13151448                                })
    13161449                        ]);
    13171450                },
    13181451
    13191452                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 );
     1453                        this.on( 'menu:create:main', this.createMenu, this );
     1454                        this.on( 'router:create:browse', this.createRouter, this );
     1455                        this.on( 'router:render:browse', this.browseRouter, this );
     1456                        this.on( 'content:create:browse', this.browseContent, this );
     1457                        this.on( 'content:render:upload', this.uploadContent, this );
     1458                        this.on( 'toolbar:create:select', this.createSelectToolbar, this );
    13241459
    13251460                        this.on( 'refresh:selection', this.refreshSelectToolbar, this );
    13261461                },
    13271462
    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                                         }
     1463                // Routers
     1464                browseRouter: function( view ) {
     1465                        view.set({
     1466                                upload: {
     1467                                        text:     l10n.uploadFilesTitle,
     1468                                        priority: 20
     1469                                },
     1470                                browse: {
     1471                                        text:     l10n.mediaLibraryTitle,
     1472                                        priority: 40
    13421473                                }
    1343                         }) );
     1474                        });
    13441475                },
    13451476
    13461477                // Content
    1347                 browseContent: function() {
     1478                browseContent: function( content ) {
    13481479                        var state = this.state();
    13491480
    13501481                        this.$el.removeClass('hide-toolbar');
    13511482
    13521483                        // Browse our library of attachments.
    1353                         this.content.view( new media.view.AttachmentsBrowser({
     1484                        content.view = new media.view.AttachmentsBrowser({
    13541485                                controller: this,
    13551486                                collection: state.get('library'),
    13561487                                selection:  state.get('selection'),
    13571488                                model:      state,
    13581489                                sortable:   state.get('sortable'),
    13591490                                search:     state.get('searchable'),
    1360                                 uploads:    state.get('uploads'),
    13611491                                filters:    state.get('filterable'),
    13621492                                display:    state.get('displaySettings'),
    13631493
    13641494                                AttachmentView: state.get('AttachmentView')
    1365                         }) );
     1495                        });
    13661496                },
    13671497
    13681498                uploadContent: function() {
    1369                         this.$el.addClass('hide-toolbar');
    1370 
    1371                         this.content.view( new media.view.UploaderInline({
     1499                        this.$el.removeClass('hide-toolbar');
     1500                        this.content.set( new media.view.UploaderInline({
    13721501                                controller: this
    13731502                        }) );
    13741503                },
    13751504
    13761505                // Toolbars
    1377                 selectToolbar: function( options ) {
     1506                createSelectToolbar: function( toolbar, options ) {
    13781507                        options = _.defaults( options || {}, {
    13791508                                event:  'select',
    13801509                                silent: false,
    13811510                                state:  false
    13821511                        });
    13831512
    1384                         this.toolbar.view( new media.view.Toolbar({
     1513                        toolbar.view = new media.view.Toolbar({
    13851514                                controller: this,
    13861515                                silent:     options.silent,
    13871516
     
    14021531                                                }
    14031532                                        }
    14041533                                }
    1405                         }) );
     1534                        });
    14061535                },
    14071536
    14081537                refreshSelectToolbar: function() {
     
    14111540                        if ( ! selection || 'select' !== this.toolbar.mode() )
    14121541                                return;
    14131542
    1414                         this.toolbar.view().get('select').model.set( 'disabled', ! selection.length );
     1543                        this.toolbar.get().get('select').model.set( 'disabled', ! selection.length );
    14151544                }
    14161545        });
    14171546
     
    14301559                },
    14311560
    14321561                createStates: function() {
    1433                         var options = this.options;
     1562                        var options = this.options,
     1563                                selection = options.selection,
     1564                                library = {
     1565                                        editable: true,
     1566                                        menu:     'main',
    14341567
    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 
    14461568                                        // Show the attachment display settings.
    14471569                                        displaySettings: true,
    14481570                                        // Update user settings when users adjust the
    14491571                                        // attachment display settings.
    14501572                                        displayUserSettings: true
    1451                                 }),
     1573                                };
    14521574
    1453                                 new media.controller.Upload({
    1454                                         menu: 'main'
    1455                                 }),
     1575                        // Add the default states.
     1576                        this.states.add([
     1577                                // Main states.
     1578                                new media.controller.Library( _.defaults({
     1579                                        id:         'insert',
     1580                                        title:      l10n.insertMediaTitle,
     1581                                        priority:   20,
     1582                                        toolbar:    'main-insert',
     1583                                        filterable: 'all',
     1584                                        library:    media.query( options.library ),
     1585                                        selection:  selection,
     1586                                        multiple:   options.multiple ? 'reset' : false
     1587                                }, library ) ),
    14561588
     1589                                new media.controller.Library( _.defaults({
     1590                                        id:         'gallery',
     1591                                        title:      l10n.createGalleryTitle,
     1592                                        priority:   40,
     1593                                        toolbar:    'main-gallery',
     1594                                        filterable: 'uploaded',
     1595                                        multiple:   'add',
     1596
     1597                                        library:  media.query( _.defaults({
     1598                                                type: 'image'
     1599                                        }, options.library ) ),
     1600
     1601                                        selection: new media.model.Selection( selection.models, {
     1602                                                multiple: 'add'
     1603                                        })
     1604                                }, library ) ),
     1605
    14571606                                // Embed states.
    14581607                                new media.controller.Embed(),
    14591608
    14601609                                // Gallery states.
    1461                                 new media.controller.Gallery({
     1610                                new media.controller.GalleryEdit({
    14621611                                        library: options.selection,
    14631612                                        editing: options.editing,
    14641613                                        menu:    'gallery'
     
    14711620                                        multiple:     true,
    14721621                                        menu:         'gallery',
    14731622                                        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'
     1623                                        excludeState: 'gallery-edit',
     1624                                        title:        l10n.addToGalleryTitle,
     1625                                        priority:     100
    14811626                                })
    14821627                        ]);
    14831628
     
    14921637
    14931638                bindHandlers: function() {
    14941639                        media.view.MediaFrame.Select.prototype.bindHandlers.apply( this, arguments );
     1640                        this.on( 'menu:create:gallery', this.createMenu, this );
     1641                        this.on( 'toolbar:create:main-insert', this.createSelectionToolbar, this );
     1642                        this.on( 'toolbar:create:main-gallery', this.createSelectionToolbar, this );
    14951643
    14961644                        var handlers = {
    14971645                                        menu: {
     1646                                                'main':    'mainMenu',
    14981647                                                'gallery': 'galleryMenu'
    14991648                                        },
    15001649
     
    15041653                                        },
    15051654
    15061655                                        toolbar: {
    1507                                                 'main-attachments': 'mainAttachmentsToolbar',
     1656                                                'main-insert':      'mainInsertToolbar',
     1657                                                'main-gallery':     'mainGalleryToolbar',
    15081658                                                'main-embed':       'mainEmbedToolbar',
    15091659                                                'featured-image':   'featuredImageToolbar',
    15101660                                                'gallery-edit':     'galleryEditToolbar',
     
    15141664
    15151665                        _.each( handlers, function( regionHandlers, region ) {
    15161666                                _.each( regionHandlers, function( callback, handler ) {
    1517                                         this[ region ].on( 'activate:' + handler, this[ callback ], this );
     1667                                        this.on( region + ':render:' + handler, this[ callback ], this );
    15181668                                }, this );
    15191669                        }, this );
    15201670                },
    15211671
    15221672                // Menus
    1523                 mainMenu: function() {
    1524                         media.view.MediaFrame.Select.prototype.mainMenu.call( this, { silent: true });
    1525 
    1526                         this.menu.view().set({
     1673                mainMenu: function( view ) {
     1674                        view.set({
    15271675                                'library-separator': new media.View({
    15281676                                        className: 'separator',
    1529                                         priority: 60
    1530                                 }),
    1531                                 'embed': {
    1532                                         text: l10n.fromUrlTitle,
    1533                                         priority: 80
    1534                                 }
     1677                                        priority: 100
     1678                                })
    15351679                        });
    1536 
    1537                         if ( media.view.settings.post.featuredImageId ) {
    1538                                 this.menu.view().set( 'featured-image', {
    1539                                         text: l10n.featuredImageTitle,
    1540                                         priority: 100
    1541                                 });
    1542                         }
    15431680                },
    15441681
    1545                 galleryMenu: function() {
     1682                galleryMenu: function( view ) {
    15461683                        var lastState = this.lastState(),
    15471684                                previous = lastState && lastState.id,
    15481685                                frame = this;
    15491686
    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
     1687                        view.set({
     1688                                cancel: {
     1689                                        text:     l10n.cancelGalleryTitle,
     1690                                        priority: 20,
     1691                                        click:    function() {
     1692                                                if ( previous )
     1693                                                        frame.setState( previous );
     1694                                                else
     1695                                                        frame.close();
    15781696                                        }
    1579                                 }
    1580                         }) );
     1697                                },
     1698                                separateCancel: new media.View({
     1699                                        className: 'separator',
     1700                                        priority: 40
     1701                                })
     1702                        });
    15811703                },
    15821704
    15831705                // Content
     
    15871709                                model:      this.state()
    15881710                        }).render();
    15891711
    1590                         this.content.view( view );
     1712                        this.content.set( view );
    15911713                        view.url.focus();
    15921714                },
    15931715
     
    16171739                        });
    16181740
    16191741                        // Browse our library of attachments.
    1620                         this.content.view( view );
     1742                        this.content.set( view );
    16211743                },
    16221744
    1623                 // Sidebars
    1624                 onSidebarGallerySettings: function( options ) {
    1625                         var library = this.state().get('library');
     1745                // Toolbars
     1746                createSelectionToolbar: function( toolbar ) {
     1747                        toolbar.view = new media.view.Toolbar.Selection({
     1748                                controller: this,
     1749                                editable:   this.state().get('editable')
     1750                        });
     1751                },
    16261752
    1627                         if ( ! library )
    1628                                 return;
     1753                mainInsertToolbar: function( view ) {
     1754                        var controller = this;
    16291755
    1630                         library.gallery = library.gallery || new Backbone.Model();
     1756                        view.button = 'insert';
     1757                        view.set( 'insert', {
     1758                                style:    'primary',
     1759                                priority: 80,
     1760                                text:     l10n.insertIntoPost,
    16311761
    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 );
     1762                                click: function() {
     1763                                        var state = controller.state(),
     1764                                                selection = state.get('selection');
     1765
     1766                                        controller.close();
     1767                                        state.trigger( 'insert', selection ).reset();
     1768                                }
     1769                        });
    16391770                },
    16401771
    1641                 // Toolbars
    1642                 mainAttachmentsToolbar: function() {
    1643                         this.toolbar.view( new media.view.Toolbar.Insert({
    1644                                 controller: this,
    1645                                 editable:   this.state().get('editable')
    1646                         }) );
     1772                mainGalleryToolbar: function( view ) {
     1773                        var controller = this;
     1774
     1775                        view.button = 'gallery';
     1776                        view.set( 'gallery', {
     1777                                style:    'primary',
     1778                                text:     l10n.createNewGallery,
     1779                                priority: 60,
     1780
     1781                                click: function() {
     1782                                        var selection = controller.state().get('selection'),
     1783                                                edit = controller.state('gallery-edit'),
     1784                                                models = selection.where({ type: 'image' });
     1785
     1786                                        edit.set( 'library', new media.model.Selection( models, {
     1787                                                props:    selection.props.toJSON(),
     1788                                                multiple: true
     1789                                        }) );
     1790
     1791                                        this.controller.setState('gallery-edit');
     1792                                }
     1793                        });
    16471794                },
    16481795
    16491796                featuredImageToolbar: function() {
    1650                         this.toolbar.view( new media.view.Toolbar.Select({
     1797                        this.toolbar.set( new media.view.Toolbar.Select({
    16511798                                controller: this,
    16521799                                text:       l10n.setFeaturedImage,
    16531800                                state:      this.options.state || 'upload'
     
    16551802                },
    16561803
    16571804                mainEmbedToolbar: function() {
    1658                         this.toolbar.view( new media.view.Toolbar.Embed({
     1805                        this.toolbar.set( new media.view.Toolbar.Embed({
    16591806                                controller: this
    16601807                        }) );
    16611808
     
    16641811
    16651812                galleryEditToolbar: function() {
    16661813                        var editing = this.state().get('editing');
    1667                         this.toolbar.view( new media.view.Toolbar({
     1814                        this.toolbar.set( new media.view.Toolbar({
    16681815                                controller: this,
    16691816                                items: {
    16701817                                        insert: {
     
    16891836                },
    16901837
    16911838                galleryAddToolbar: function() {
    1692                         this.toolbar.view( new media.view.Toolbar({
     1839                        this.toolbar.set( new media.view.Toolbar({
    16931840                                controller: this,
    16941841                                items: {
    16951842                                        insert: {
     
    17041851
    17051852                                                        edit.get('library').add( state.get('selection').models );
    17061853                                                        state.trigger('reset');
    1707                                                         controller.state('gallery-edit');
     1854                                                        controller.setState('gallery-edit');
    17081855                                                }
    17091856                                        }
    17101857                                }
     
    17291876                },
    17301877
    17311878                initialize: function() {
    1732                         this.controller = this.options.controller;
    1733 
    17341879                        _.defaults( this.options, {
    17351880                                container: document.body,
    17361881                                title:     '',
     
    18381983                initialize: function() {
    18391984                        var uploader;
    18401985
    1841                         this.controller = this.options.controller;
    1842 
    18431986                        this.$browser = $('<a href="#" class="browser" />').hide().appendTo('body');
    18441987
    18451988                        uploader = this.options.uploader = _.defaults( this.options.uploader || {}, {
     
    19062049                template:  media.template('uploader-inline'),
    19072050
    19082051                initialize: function() {
    1909                         this.controller = this.options.controller;
     2052                        _.defaults( this.options, {
     2053                                message: '',
     2054                                status:  true
     2055                        });
    19102056
    19112057                        if ( ! this.options.$browser && this.controller.uploader )
    19122058                                this.options.$browser = this.controller.uploader.$browser;
     
    19142060                        if ( _.isUndefined( this.options.postId ) )
    19152061                                this.options.postId = media.view.settings.post.id;
    19162062
    1917                         this.views.set( '.upload-inline-status', new media.view.UploaderStatus({
    1918                                 controller: this.controller
    1919                         }) );
     2063                        if ( this.options.status ) {
     2064                                this.views.set( '.upload-inline-status', new media.view.UploaderStatus({
     2065                                        controller: this.controller
     2066                                }) );
     2067                        }
    19202068                },
    19212069
    19222070                ready: function() {
     
    19512099                },
    19522100
    19532101                initialize: function() {
    1954                         this.controller = this.options.controller;
    1955 
    19562102                        this.queue = wp.Uploader.queue;
    19572103                        this.queue.on( 'add remove reset', this.visibility, this );
    19582104                        this.queue.on( 'add remove reset change:percent', this.progress, this );
     
    20602206                className: 'media-toolbar',
    20612207
    20622208                initialize: function() {
    2063                         this.controller = this.options.controller;
    2064 
    20652209                        this._views     = {};
    20662210                        this.$primary   = $('<div class="media-toolbar-primary" />').prependTo( this.$el );
    20672211                        this.$secondary = $('<div class="media-toolbar-secondary" />').prependTo( this.$el );
     
    21992343        // ---------------------------
    22002344        media.view.Toolbar.Embed = media.view.Toolbar.Select.extend({
    22012345                initialize: function() {
    2202                         var controller = this.options.controller;
    2203 
    22042346                        _.defaults( this.options, {
    22052347                                text: l10n.insertIntoPost
    22062348                        });
    22072349
    22082350                        media.view.Toolbar.Select.prototype.initialize.apply( this, arguments );
    2209                         controller.on( 'change:url', this.refresh, this );
     2351                        this.controller.state().props.on( 'change:url', this.refresh, this );
    22102352                },
    22112353
    22122354                refresh: function() {
    2213                         var url = this.controller.state().get('url');
     2355                        var url = this.controller.state().props.get('url');
    22142356                        this.get('select').model.set( 'disabled', ! url || /^https?:\/\/$/.test(url) );
    22152357                }
    22162358        });
    22172359
    2218         // wp.media.view.Toolbar.Insert
    2219         // ----------------------------
    2220         media.view.Toolbar.Insert = media.view.Toolbar.extend({
     2360        // wp.media.view.Toolbar.Selection
     2361        // -------------------------------
     2362        media.view.Toolbar.Selection = media.view.Toolbar.extend({
     2363                button: 'insert',
     2364
    22212365                initialize: function() {
    2222                         var controller = this.options.controller,
    2223                                 selection = controller.state().get('selection'),
    2224                                 selectionToLibrary;
     2366                        var controller = this.controller;
    22252367
    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 
    22422368                        this.options.items = _.defaults( this.options.items || {}, {
    22432369                                selection: new media.view.Selection({
    22442370                                        controller: controller,
    2245                                         collection: selection,
     2371                                        collection: controller.state().get('selection'),
    22462372                                        priority:   -40,
    22472373
    22482374                                        // If the selection is editable, pass the callback to
     
    22502376                                        editable: this.options.editable && function() {
    22512377                                                this.controller.content.mode('edit-selection');
    22522378                                        }
    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                                 }
     2379                                }).render()
    22732380                        });
    22742381
    22752382                        media.view.Toolbar.prototype.initialize.apply( this, arguments );
     
    22772384
    22782385                refresh: function() {
    22792386                        var selection = this.controller.state().get('selection'),
    2280                                 count = selection.length;
     2387                                button = this.get( this.button );
    22812388
    2282                         this.get('insert').model.set( 'disabled', ! selection.length );
     2389                        if ( ! button )
     2390                                return;
    22832391
    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                         }) );
     2392                        button.model.set( 'disabled', ! selection.length );
    22882393                }
    22892394        });
    22902395
     
    23882493                tagName:   'div',
    23892494
    23902495                initialize: function() {
    2391                         this.controller = this.options.controller;
    2392                         this._views     = {};
     2496                        this._views = {};
    23932497
    23942498                        this.set( _.extend( {}, this._views, this.options.views ), { silent: true });
    23952499                        delete this.options.views;
     
    24572561                }
    24582562        });
    24592563
     2564        /**
     2565         * wp.media.view.MenuItem
     2566         */
     2567        media.view.MenuItem = media.View.extend({
     2568                tagName:   'a',
     2569                className: 'media-menu-item',
    24602570
     2571                attributes: {
     2572                        href: '#'
     2573                },
     2574
     2575                events: {
     2576                        'click': '_click'
     2577                },
     2578
     2579                _click: function( event ) {
     2580                        var clickOverride = this.options.click;
     2581
     2582                        event.preventDefault();
     2583
     2584                        if ( clickOverride )
     2585                                clickOverride.call( this );
     2586                        else
     2587                                this.click();
     2588                },
     2589
     2590                click: function() {
     2591                        var state = this.options.state;
     2592                        if ( state )
     2593                                this.controller.setState( state );
     2594                },
     2595
     2596                render: function() {
     2597                        var options = this.options;
     2598
     2599                        if ( options.text )
     2600                                this.$el.text( options.text );
     2601                        else if ( options.html )
     2602                                this.$el.html( options.html );
     2603
     2604                        return this;
     2605                }
     2606        });
     2607
    24612608        /**
    24622609         * wp.media.view.Menu
    24632610         */
    24642611        media.view.Menu = media.view.PriorityList.extend({
    2465                 tagName:   'ul',
     2612                tagName:   'div',
    24662613                className: 'media-menu',
     2614                property:  'state',
     2615                ItemView:  media.view.MenuItem,
     2616                region:    'menu',
    24672617
    2468                 toView: function( options, state ) {
     2618                toView: function( options, id ) {
    24692619                        options = options || {};
    2470                         options.state = options.state || state;
    2471                         return new media.view.MenuItem( options ).render();
     2620                        options[ this.property ] = options[ this.property ] || id;
     2621                        return new this.ItemView( options ).render();
    24722622                },
    24732623
    2474                 select: function( state ) {
    2475                         var view = this.get( state );
     2624                ready: function() {
     2625                        media.view.PriorityList.prototype.ready.apply( this, arguments );
     2626                        this.visibility();
     2627                },
    24762628
     2629                set: function() {
     2630                        media.view.PriorityList.prototype.set.apply( this, arguments );
     2631                        this.visibility();
     2632                },
     2633
     2634                unset: function() {
     2635                        media.view.PriorityList.prototype.unset.apply( this, arguments );
     2636                        this.visibility();
     2637                },
     2638
     2639                visibility: function() {
     2640                        var region = this.region,
     2641                                view = this.controller[ region ].get(),
     2642                                views = this.views.get(),
     2643                                hide = ! views || views.length < 2;
     2644
     2645                        if ( this === view )
     2646                                this.controller.$el.toggleClass( 'hide-' + region, hide );
     2647                },
     2648
     2649                select: function( id ) {
     2650                        var view = this.get( id );
     2651
    24772652                        if ( ! view )
    24782653                                return;
    24792654
     
    24862661                }
    24872662        });
    24882663
    2489         media.view.MenuItem = media.View.extend({
    2490                 tagName:   'li',
    2491                 className: 'media-menu-item',
     2664        /**
     2665         * wp.media.view.RouterItem
     2666         */
     2667        media.view.RouterItem = media.view.MenuItem.extend({
     2668                click: function() {
     2669                        var contentMode = this.options.contentMode;
     2670                        if ( contentMode )
     2671                                this.controller.content.mode( contentMode );
     2672                }
     2673        });
    24922674
    2493                 events: {
    2494                         'click': 'click'
    2495                 },
     2675        /**
     2676         * wp.media.view.Router
     2677         */
     2678        media.view.Router = media.view.Menu.extend({
     2679                tagName:   'div',
     2680                className: 'media-router',
     2681                property:  'contentMode',
     2682                ItemView:  media.view.RouterItem,
     2683                region:    'router',
    24962684
    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 );
     2685                initialize: function() {
     2686                        this.controller.on( 'content:render', this.update, this );
     2687                        media.view.Menu.prototype.initialize.apply( this, arguments );
    25042688                },
    25052689
    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;
     2690                update: function() {
     2691                        var mode = this.controller.content.mode();
     2692                        if ( mode )
     2693                                this.select( mode );
    25152694                }
    25162695        });
    25172696
     2697
    25182698        /**
    25192699         * wp.media.view.Sidebar
    25202700         */
     
    25312711                template:  media.template('attachment'),
    25322712
    25332713                events: {
    2534                         'click .attachment-preview':      'toggleSelection',
     2714                        'click .attachment-preview':      'toggleSelectionHandler',
    25352715                        'change [data-setting]':          'updateSetting',
    25362716                        'change [data-setting] input':    'updateSetting',
    25372717                        'change [data-setting] select':   'updateSetting',
     
    25462726                initialize: function() {
    25472727                        var selection = this.options.selection;
    25482728
    2549                         this.controller = this.options.controller;
    2550 
    25512729                        this.model.on( 'change:sizes change:uploading change:caption change:title', this.render, this );
    25522730                        this.model.on( 'change:percent', this.progress, this );
    25532731
     
    26232801                                this.$bar.width( this.model.get('percent') + '%' );
    26242802                },
    26252803
    2626                 toggleSelection: function( event ) {
    2627                         var selection = this.options.selection,
    2628                                 model = this.model;
     2804                toggleSelectionHandler: function( event ) {
     2805                        var method;
    26292806
     2807                        if ( event.shiftKey )
     2808                                method = 'between';
     2809                        else if ( event.ctrlKey || event.metaKey )
     2810                                method = 'toggle';
     2811
     2812                        this.toggleSelection({
     2813                                method: method
     2814                        });
     2815                },
     2816
     2817                toggleSelection: function( options ) {
     2818                        var collection = this.collection,
     2819                                selection = this.options.selection,
     2820                                model = this.model,
     2821                                method = options && options.method,
     2822                                single, between, models, singleIndex, modelIndex;
     2823
    26302824                        if ( ! selection )
    26312825                                return;
    26322826
     2827                        single = selection.single();
     2828                        method = _.isUndefined( method ) ? selection.multiple : method;
     2829
     2830                        // If the `method` is set to `between`, select all models that
     2831                        // exist between the current and the selected model.
     2832                        if ( 'between' === method && single && selection.multiple ) {
     2833                                // If the models are the same, short-circuit.
     2834                                if ( single === model )
     2835                                        return;
     2836
     2837                                singleIndex = collection.indexOf( single );
     2838                                modelIndex  = collection.indexOf( this.model );
     2839
     2840                                if ( singleIndex < modelIndex )
     2841                                        models = collection.models.slice( singleIndex, modelIndex + 1 );
     2842                                else
     2843                                        models = collection.models.slice( modelIndex, singleIndex + 1 );
     2844
     2845                                selection.add( models ).single( model );
     2846                                return;
     2847
     2848                        // If the `method` is set to `toggle`, just flip the selection
     2849                        // status, regardless of whether the model is the single model.
     2850                        } else if ( 'toggle' === method ) {
     2851                                selection[ this.selected() ? 'remove' : 'add' ]( model ).single( model );
     2852                                return;
     2853                        }
     2854
     2855                        if ( method !== 'add' )
     2856                                method = 'reset';
     2857
    26332858                        if ( this.selected() ) {
    26342859                                // If the model is the single model, remove it.
    26352860                                // If it is not the same as the single model,
    26362861                                // it now becomes the single model.
    2637                                 selection[ selection.single() === model ? 'remove' : 'single' ]( model );
     2862                                selection[ single === model ? 'remove' : 'single' ]( model );
    26382863                        } else {
    2639                                 selection.add( model ).single( model );
     2864                                // If the model is not selected, run the `method` on the
     2865                                // selection. By default, we `reset` the selection, but the
     2866                                // `method` can be set to `add` the model to the selection.
     2867                                selection[ method ]( model ).single( model );
    26402868                        }
    26412869                },
    26422870
     
    28383066                },
    28393067
    28403068                initialize: function() {
    2841                         this.controller = this.options.controller;
    28423069                        this.el.id = _.uniqueId('__attachments-view-');
    28433070
    28443071                        _.defaults( this.options, {
     
    32003427                className: 'attachments-browser',
    32013428
    32023429                initialize: function() {
    3203                         this.controller = this.options.controller;
    3204 
    32053430                        _.defaults( this.options, {
    32063431                                filters: false,
    32073432                                search:  true,
    3208                                 uploads: false,
    32093433                                display: false,
    32103434
    32113435                                AttachmentView: media.view.Attachment.Library
     
    32903514                        this.removeContent();
    32913515
    32923516                        this.uploader = new media.view.UploaderInline({
    3293                                 controller: this.controller
     3517                                controller: this.controller,
     3518                                status:     false,
     3519                                message:    l10n.noItemsFound
    32943520                        });
    32953521
    32963522                        this.views.add( this.uploader );
     
    33223548
    33233549                        this.views.add( sidebar );
    33243550
    3325                         if ( options.uploads && this.controller.uploader ) {
     3551                        if ( this.controller.uploader ) {
    33263552                                sidebar.set( 'uploads', new media.view.UploaderStatus({
    33273553                                        controller: this.controller,
    33283554                                        priority:   40
     
    33733599        });
    33743600
    33753601        /**
    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         /**
    34273602         * wp.media.view.Selection
    34283603         */
    34293604        media.view.Selection = media.View.extend({
     
    34423617                                clearable: true
    34433618                        });
    34443619
    3445                         this.controller = this.options.controller;
    34463620                        this.attachments = new media.view.Attachments({
    34473621                                controller: this.controller,
    34483622                                collection: this.collection,
     
    37683942        media.view.Iframe = media.View.extend({
    37693943                className: 'media-iframe',
    37703944
    3771                 initialize: function() {
    3772                         this.controller = this.options.controller;
    3773                 },
    3774 
    37753945                render: function() {
     3946                        this.views.detach();
    37763947                        this.$el.html( '<iframe src="' + this.controller.state().get('src') + '" />' );
     3948                        this.views.render();
    37773949                        return this;
    37783950                }
    37793951        });
     
    37853957                className: 'media-embed',
    37863958
    37873959                initialize: function() {
    3788                         this.controller = this.options.controller;
    3789 
    37903960                        this.url = new media.view.EmbedUrl({
    37913961                                controller: this.controller,
    3792                                 model:      this.model
     3962                                model:      this.model.props
    37933963                        }).render();
    37943964
    37953965                        this._settings = new media.View();
     
    38263996
    38273997                        this.settings( new constructor({
    38283998                                controller: this.controller,
    3829                                 model:      this.model,
     3999                                model:      this.model.props,
    38304000                                priority:   40
    38314001                        }) );
    38324002                }
     
    38464016                },
    38474017
    38484018                initialize: function() {
    3849                         this.label = this.make( 'span', null, this.options.label || l10n.url );
    38504019                        this.input = this.make( 'input', {
    38514020                                type:  'text',
    38524021                                value: this.model.get('url') || ''
    38534022                        });
    38544023
    3855                         this.$label = $( this.label );
    38564024                        this.$input = $( this.input );
    3857                         this.$el.append([ this.label, this.input ]);
     4025                        this.$el.append( this.input );
    38584026
    38594027                        this.model.on( 'change:url', this.render, this );
    38604028                },
  • 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