WordPress.org
Get WordPress

Make WordPress Core

Changeset 22362


Ignore:
Timestamp:
11/04/2012 10:59:12 PM (14 years ago)
Author:
koopersmith
Message:

Streamlining media, part I.

The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.

This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.

The fine print follows.

Styles

  • Tightened padding around the modal to optimize for a smaller default screen size.
  • Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated upload state).
  • Add a size for hero buttons.
  • Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).

Code

wp.media.controller.StateManager

  • Don't fire activate and deactivate if attempting to switch to the current state.

wp.media.controller.State

  • Add a base state class to bind default methods (as not all states will inherit from the Library state).
  • On activate, fire activate(), menu(), content(), sidebar(), and toolbar().
  • The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's menu attribute.
  • menu() automatically fetches the state's menu attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's id.

wp.media.controller.Library

  • Now inherits from wp.media.controller.State.

wp.media.controller.Upload

  • A new state to improve the upload experience.
  • Displays a large dropzone when empty (a UploaderInline view).
  • When attachments are uploaded, displays management interface (a library state restricted to attachments uploaded during the current session).

wp.media.view.Frame

  • In menu(), content(), sidebar(), and toolbar(), only change the view if it differs from the current view. Also, ensure hide-* classes are properly removed.

*

wp.media.view.PriorityList

  • A new container view used to sort and render child views by the priority property.
  • Used by wp.media.view.Sidebar and wp.media.view.Menu.
  • Next step: Use two instances to power wp.media.view.Toolbar.

wp.media.view.Menu and wp.media.view.MenuItem

  • A new PriorityList view that renders a list of views used to switch between states.
  • MenuItem instances have id attributes that are tied directly to states.
  • Separators can be added as plain Backbone.View instances with the separator class.
  • Supports any type of Backbone.View.

media.view.Menu.Landing

  • The landing menu for the 'insert media' workflow.
  • Includes an inactive link to an "Embed from URL" state.
  • Next steps: only use in select cases to allot for other workflows (such as featured images).

wp.media.view.AttachmentsBrowser

  • A container to render an Attachments view with accompanying UI controls (similar to what the Attachments view was when it contained the $list property).
  • Currently only renders a Search view as a control.
  • Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.

wp.media.view.Attachments

  • If the Attachments scroll buffer is not filled with Attachment views, continue loading more attachments.
  • Use this.model instead of this.controller.state() to allow Attachments views to have differing edge and gutter properties.
  • Add edge(), a method used to calculate the optimal dimensions for an attachment based on the current width of the Attachments container element.
  • edge() is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
  • Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.

wp.media.view.UploaderWindow

  • Now generates a $browser element as the browse button (instead of a full UploaderInline view). Using a portable browse button prevents us from having to create a new wp.Uploader instance every time we want access to a browse button.

wp.media.view.UploaderInline

  • No longer directly linked to the UploaderWindow view or its wp.Uploader instance.
  • Used as the default upload state view.

wp.media.view.Selection

  • An interactive representation of the selected Attachments.
  • Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of SelectionPreview.

see #21390.

Location:
trunk/wp-includes
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/wp-includes/css/buttons.css

    r22314 r22362  
    8282}
    8383
     84.button.button-hero,
     85.button-group.button-hero .button {
     86        font-size: 14px;
     87        height: 46px;
     88        line-height: 44px;
     89        padding: 0 36px;
     90}
     91
    8492.button:active {
    8593        outline: none;
    … …  
    295303        top: 100%;
    296304        left: 0;
    297         margin-top: 5px;
     305        margin: 5px 0;
    298306        padding: 0.8em 1em;
    299307        border-radius: 3px;
    … …  
    315323        right: 0;
    316324}
     325
     326.dropdown-flip-y .dropdown {
     327        top: auto;
     328        bottom: 100%;
     329}

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

    r22343 r22362  
    44.media-modal {
    55        position: fixed;
    6         top: 80px;
    7         left: 60px;
    8         right: 60px;
    9         bottom: 60px;
     6        top: 60px;
     7        left: 40px;
     8        right: 40px;
     9        bottom: 40px;
    1010        z-index: 125000;
    1111}
    … …  
    2020        opacity: 0.8;
    2121        z-index: 120000;
     22}
     23
     24.media-modal-backdrop div {
     25        position: absolute;
     26        top: 10px;
     27        left: 10px;
     28        right: 10px;
     29        bottom: 10px;
     30        border: 1px dashed rgba( 255, 255, 255, 0.5 );
    2231}
    2332
    … …  
    3948        padding: 0;
    4049        margin: 0;
    41         font-size: 1.4em;
     50        font-size: 16px;
    4251}
    4352
    … …  
    7584        position: absolute;
    7685        top: 0;
    77         left: 220px;
     86        left: 0;
    7887        right: 0;
    7988        z-index: 100;
    80         height: 50px;
    81         padding: 0 10px;
    82         border-bottom: 1px solid #dfdfdf;
     89        height: 60px;
     90        padding: 0 16px;
     91        border: 0 solid #dfdfdf;
     92}
     93
     94.media-frame > .media-toolbar {
     95        top: auto;
     96        left: 200px;
     97        bottom: 0;
     98        border-width: 1px 0 0 0;
     99}
     100
     101.media-frame.hide-toolbar > .media-toolbar {
     102        bottom: -61px;
    83103}
    84104
    … …  
    95115        margin-left: 10px;
    96116        float: left;
    97         margin-top: 10px;
     117        margin-top: 15px;
    98118}
    99119
    … …  
    102122        margin-right: 10px;
    103123        float: left;
    104         margin-top: 10px;
     124        margin-top: 15px;
    105125}
    106126
    … …  
    111131        position: absolute;
    112132        top: 0;
    113         left: 0;
    114         bottom: 0;
    115         width: 219px;
    116         z-index: 50;
     133        right: 0;
     134        bottom: 61px;
     135        width: 247px;
     136        padding: 0 16px;
     137        z-index: 75;
    117138        background: #f5f5f5;
    118         border-right: 1px solid #dfdfdf;
     139        border-left: 1px solid #dfdfdf;
    119140}
    120141
    121142.hide-sidebar .media-sidebar {
    122         display: none;
     143        right: -280px;
     144}
     145
     146.hide-toolbar .media-sidebar {
     147        bottom: 0;
    123148}
    124149
    … …  
    148173
    149174/**
     175 * Menu
     176 */
     177.media-menu {
     178        position: absolute;
     179        top: 0;
     180        left: 0;
     181        bottom: 0;
     182        width: 199px;
     183        margin: 0;
     184        padding: 16px 0;
     185        z-index: 200;
     186        box-shadow: inset -6px 0 6px -6px rgba( 0, 0, 0, 0.4 );
     187}
     188
     189.media-menu li {
     190        position: relative;
     191        padding: 4px 20px;
     192        margin: 0;
     193        line-height: 18px;
     194        font-size: 14px;
     195        color: #21759B;
     196        text-shadow: 0 1px 0 #fff;
     197}
     198
     199.media-menu-item {
     200        cursor: pointer;
     201}
     202
     203.media-menu li:hover {
     204        background: rgba( 0, 0, 0, 0.04 );
     205}
     206
     207.media-menu .active,
     208.media-menu .active:hover {
     209        color: #333;
     210        font-weight: bold;
     211}
     212
     213.media-menu .separator {
     214        height: 0;
     215        margin: 12px 20px;
     216        padding: 0;
     217        border-top: 1px solid #dfdfdf;
     218        border-bottom: 1px solid #fff;
     219}
     220
     221/**
    150222 * Frame
    151223 */
    152 
    153 .media-frame .media-content,
    154 .media-frame .media-toolbar,
    155 .media-frame .media-sidebar {
    156         -webkit-transition-property: left, right, top, bottom, margin;
    157         -moz-transition-property:    left, right, top, bottom, margin;
    158         -ms-transition-property:     left, right, top, bottom, margin;
    159         -o-transition-property:      left, right, top, bottom, margin;
    160         transition-property:         left, right, top, bottom, margin;
    161 
    162         -webkit-transition-duration: 0.2s;
    163         -moz-transition-duration:    0.2s;
    164         -ms-transition-duration:     0.2s;
    165         -o-transition-duration:      0.2s;
    166         transition-duration:         0.2s;
     224.media-frame {
     225        overflow: hidden;
    167226}
    168227
    169228.media-frame .media-content {
    170229        position: absolute;
    171         top: 51px;
    172         left: 220px;
    173         right: 0;
    174         bottom: 0;
     230        top: 0;
     231        left: 200px;
     232        right: 280px;
     233        bottom: 61px;
    175234        height: auto;
    176235        width: auto;
    … …  
    180239
    181240.media-frame.hide-sidebar .media-content {
    182         left: 0;
     241        right: 0;
     242}
     243
     244.media-frame.hide-toolbar .media-content {
     245        bottom: 0;
    183246}
    184247
    … …  
    197260        color: #464646;
    198261        font-family: sans-serif;
     262}
     263
     264/**
     265 * Attachments
     266 */
     267.attachments {
     268        margin: 0;
     269        padding-right: 16px;
    199270}
    200271
    … …  
    389460}
    390461
     462
     463/**
     464 * Attachments Browser
     465 */
     466.media-frame .attachments-browser {
     467        overflow: hidden;
     468}
     469
     470.attachments-browser .media-toolbar {
     471        height: 50px;
     472}
     473
     474.attachments-browser .attachments {
     475        position: absolute;
     476        top: 50px;
     477        left: 0;
     478        right: 0;
     479        bottom: 0;
     480        overflow: auto;
     481}
     482
     483
    391484/**
    392485 * Progress Bar
    … …  
    446539.uploader-window-content {
    447540        position: absolute;
    448         top: 30px;
    449         left: 30px;
    450         right: 30px;
    451         bottom: 30px;
     541        top: 10px;
     542        left: 10px;
     543        right: 10px;
     544        bottom: 10px;
    452545        border: 1px dashed #fff;
    453546}
    … …  
    464557        transform:         translateY( -50% );
    465558
    466         font-size: 18px;
     559        font-size: 20px;
    467560        font-weight: 200;
    468561        color: #fff;
    … …  
    486579}
    487580
    488 .uploader-inline {
    489         display: none;
     581.media-content.uploader-inline {
     582        margin: 20px;
     583        padding: 20px;
     584        border: 1px dashed #aaa;
     585        text-align: center;
     586}
     587
     588.uploader-inline-content {
     589        position: absolute;
     590        top: 30%;
     591        left: 0;
     592        right: 0;
     593}
     594
     595.uploader-inline h3 {
     596        font-size: 20px;
     597        font-weight: 200;
     598        margin-bottom: 1.6em;
    490599}
    491600
    … …  
    498607}
    499608
    500 .media-sidebar .uploader-inline {
    501         display: block;
    502         position: absolute;
    503         left: 0;
    504         right: 0;
    505         bottom: 0;
    506         height: 100px;
    507         margin: 10px;
    508         padding-top: 10px;
    509         text-align: center;
    510         border: 1px dashed #aaa;
    511 }
    512 
    513 .media-sidebar .uploader-inline h3 {
    514         font-weight: 200;
    515         font-size: 16px;
    516         margin: 10px 0;
     609.uploader-inline .browser {
     610        display: inline-block !important;
     611}
     612
     613/**
     614 * Selection
     615 */
     616
     617.media-selection {
     618        position: absolute;
     619        top: 0;
     620        left: 0;
     621        right: 350px;
     622        height: 60px;
     623        padding: 0 0 0 16px;
     624        overflow: hidden;
     625        white-space: nowrap;
     626}
     627
     628.media-selection .selection-info {
     629        display: inline-block;
     630        height: 60px;
     631        margin-right: 10px;
     632        vertical-align: top;
     633}
     634
     635.media-selection.empty {
     636        display: none;
     637}
     638
     639.media-selection .count {
     640        display: block;
     641        padding-top: 12px;
     642        font-size: 14px;
     643        line-height: 20px;
     644        font-weight: bold;
     645}
     646
     647.media-selection .clear-selection {
     648        display: block;
     649        text-decoration: none;
     650        line-height: 16px;
     651}
     652
     653.media-selection .attachments {
     654        display: inline-block;
     655        height: 60px;
     656        margin-top: 5px;
     657        overflow: hidden;
     658        vertical-align: top;
     659}
     660
     661.media-selection .selected.attachment {
     662        box-shadow: none;
     663}
     664
     665.media-selection .details.attachment {
     666        box-shadow:
     667                0 0 0 1px #fff,
     668                0 0 0 3px #1e8cbe;
     669}
     670
     671.media-selection:after {
     672        content: '';
     673        display: block;
     674        position: absolute;
     675        top: 0;
     676        right: 0;
     677        bottom: 0;
     678        width: 25px;
     679        background-image: -webkit-gradient(linear, right top, right top, from( rgba( 255, 255, 255, 1 ) ), to( rgba( 255, 255, 255, 0 ) ));
     680        background-image: -webkit-linear-gradient(right, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );
     681        background-image:    -moz-linear-gradient(right, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );
     682        background-image:      -o-linear-gradient(right, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );
     683        background-image:   linear-gradient(to left, rgba( 255, 255, 255, 1 ) ,  rgba( 255, 255, 255, 0 ) );
     684}
     685
     686.media-selection .attachment .filename {
     687        display: none;
    517688}
    518689
    … …  
    585756 */
    586757
    587 .attachment-details {
    588         padding-top: 20px;
    589 }
    590 
    591758.attachment-details-preview {
    592759        cursor: default;

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

    r22356 r22362  
    8484                        var previous;
    8585
    86                         if ( id ) {
    87                                 if ( previous = this.state() )
    88                                         previous.trigger('deactivate');
    89                                 this._state = id;
    90                                 return this.state().trigger('activate');
    91                         }
    92 
    93                         if ( this._state )
    94                                 return this.get( this._state );
     86                        if ( ! id )
     87                                return this._state ? this.get( this._state ) : null;
     88
     89                        previous = this.state();
     90
     91                        // Bail if we're trying to select the current state, or a state
     92                        // that does not exist.
     93                        if ( previous && id === previous.id || ! this.states.get( id ) )
     94                                return;
     95
     96                        if ( previous )
     97                                previous.trigger('deactivate');
     98
     99                        this._state = id;
     100                        this.state().trigger('activate');
    95101                }
    96102        });
    … …  
    108114        });
    109115
     116
     117        // wp.media.controller.State
     118        // ---------------------------
     119        media.controller.State = Backbone.Model.extend({
     120                initialize: function() {
     121                        this.on( 'activate', this._activate, this );
     122                        this.on( 'activate', this.activate, this );
     123                        this.on( 'deactivate', this._deactivate, this );
     124                        this.on( 'deactivate', this.deactivate, this );
     125                },
     126
     127                activate: function() {},
     128                _activate: function() {
     129                        this.active = true;
     130
     131                        this.menu();
     132                        this.toolbar();
     133                        this.sidebar();
     134                        this.content();
     135                },
     136
     137                deactivate: function() {},
     138                _deactivate: function() {
     139                        this.active = false;
     140                },
     141
     142                menu: function() {
     143                        var menu = this.get('menu');
     144
     145                        if ( ! menu )
     146                                return;
     147
     148                        this.frame.menu( menu );
     149                        menu.select( this.id );
     150                },
     151
     152                toolbar: function() {},
     153                sidebar: function() {},
     154                content: function() {}
     155        });
     156
    110157        // wp.media.controller.Library
    111158        // ---------------------------
    112         media.controller.Library = Backbone.Model.extend({
     159        media.controller.Library = media.controller.State.extend({
    113160                defaults: {
    114161                        id:       'library',
    … …  
    134181                                this.set( 'gutter', 8 );
    135182
    136                         this.on( 'activate', this.activate, this );
    137                         this.on( 'deactivate', this.deactivate, this );
     183                        media.controller.State.prototype.initialize.apply( this, arguments );
    138184                },
    139185
    140186                activate: function() {
    141                         this.toolbar();
    142                         this.sidebar();
    143                         this.content();
    144 
    145187                        // If we're in a workflow that supports multiple attachments,
    146188                        // automatically select any uploading attachments.
    … …  
    154196                deactivate: function() {
    155197                        var toolbar = this._postLibraryToolbar;
     198
    156199                        if ( toolbar )
    157200                                this.get('selection').off( 'add remove', toolbar.visibility, toolbar );
    … …  
    185228
    186229                        this.details();
    187                         frame.sidebar().add({
    188                                 search: new media.view.Search({
    189                                         controller: frame,
    190                                         model:      this.get('library').props,
    191                                         priority:   20
    192                                 }),
    193 
    194                                 selection: new media.view.SelectionPreview({
    195                                         controller: frame,
    196                                         collection: this.get('selection'),
    197                                         priority:   40
    198                                 })
    199                         });
    200230                },
    201231
    … …  
    204234
    205235                        // Content.
    206                         frame.content( new media.view.Attachments({
     236                        frame.content( new media.view.AttachmentsBrowser({
    207237                                controller: frame,
    208238                                collection: this.get('library'),
    209                                 // The single `Attachment` view to be used in the `Attachments` view.
    210                                 AttachmentView: media.view.Attachment.Library
     239                                model:      this
    211240                        }).render() );
    212241                },
    … …  
    253282
    254283                        return this;
     284                }
     285        });
     286
     287
     288        // wp.media.controller.Upload
     289        // ---------------------------
     290        media.controller.Upload = media.controller.Library.extend({
     291                defaults: _.defaults({
     292                        id: 'upload'
     293                }, media.controller.Library.prototype.defaults ),
     294
     295                initialize: function() {
     296                        var library = this.get('library');
     297
     298                        // If a `library` attribute isn't provided, create a new
     299                        // `Attachments` collection that observes (and thereby receives
     300                        // all uploading) attachments.
     301                        if ( ! library ) {
     302                                library = new Attachments();
     303                                library.props.set({
     304                                        orderby: 'date',
     305                                        order:   'ASC'
     306                                });
     307                                library.observe( wp.Uploader.queue );
     308                                this.set( 'library', library );
     309                        }
     310
     311                        media.controller.Library.prototype.initialize.apply( this, arguments );
     312                },
     313
     314                activate: function() {
     315                        this.get('library').on( 'add remove reset', this.refresh, this );
     316                        media.controller.Library.prototype.activate.apply( this, arguments );
     317                        this.refresh();
     318                },
     319
     320                deactivate: function() {
     321                        this.get('library').off( 'add remove reset', this.refresh, this );
     322                        media.controller.Library.prototype.deactivate.apply( this, arguments );
     323                },
     324
     325                refresh: function() {
     326                        this.frame.$el.toggleClass( 'hide-sidebar hide-toolbar', ! this.get('library').length );
     327                        this.content();
     328                },
     329
     330                content: function() {
     331                        var frame = this.frame,
     332                                upload;
     333
     334                        if ( this.get('library').length ) {
     335                                media.controller.Library.prototype.content.apply( this, arguments );
     336                        } else {
     337                                upload = new media.view.UploaderInline({
     338                                        controller: frame
     339                                }).render();
     340
     341                                frame.content( upload );
     342                        }
    255343                }
    256344        });
    … …  
    297385                                controller: this.frame,
    298386                                collection: this.get('library'),
     387                                model:      this,
    299388                                sortable:   true,
    300389                                // The single `Attachment` view to be used in the `Attachments` view.
    … …  
    346435                initialize: function() {
    347436                        _.defaults( this.options, {
    348                                 state:     'library',
     437                                state:     'upload',
    349438                                title:     '',
    350439                                selection: [],
    … …  
    362451
    363452                render: function() {
    364                         var els = [ this.toolbar().el, this.sidebar().el, this.content().el ];
     453                        var els = [  this.menu().el, this.content().el, this.sidebar().el, this.toolbar().el ];
    365454
    366455                        if ( this.modal )
    367456                                this.modal.render();
    368457
    369                         // Detach any views that will be rebound to maintain event bidnings.
     458                        // Detach any views that will be rebound to maintain event bindings.
    370459                        this.$el.children().filter( els ).detach();
    371460                        this.$el.empty().append( els );
    … …  
    390479
    391480                createStates: function() {
    392                         var options = this.options;
     481                        var options = this.options,
     482                                menus = {
     483                                        landing: new media.view.Menu.Landing({
     484                                                controller: this
     485                                        })
     486                                };
    393487
    394488                        // Create the default `states` collection.
    … …  
    405499                                        selection: options.selection,
    406500                                        library:   media.query( options.library ),
    407                                         multiple:  this.options.multiple
     501                                        multiple:  this.options.multiple,
     502                                        menu:      menus.landing
     503                                }),
     504                                new media.controller.Upload({
     505                                        multiple: this.options.multiple,
     506                                        menu:     menus.landing
    408507                                }),
    409508                                new media.controller.Gallery({
    … …  
    420519                createSubviews: function() {
    421520                        // Initialize a stub view for each subview region.
    422                         _.each(['toolbar','sidebar','content'], function( subview ) {
     521                        _.each(['menu','content','sidebar','toolbar'], function( subview ) {
    423522                                this[ '_' + subview ] = new Backbone.View({
    424523                                        tagName:   'div',
    … …  
    451550
    452551        // Create methods to fetch and replace individual subviews.
    453         _.each(['toolbar','sidebar','content'], function( subview ) {
     552        _.each(['menu','content','sidebar','toolbar'], function( subview ) {
    454553                media.view.Frame.prototype[ subview ] = function( view ) {
    455554                        var previous = this[ '_' + subview ];
    … …  
    458557                                return previous;
    459558
     559                        if ( view === previous )
     560                                return;
     561
    460562                        view.$el.addClass( 'media-' + subview );
     563
     564                        // Remove the hide class.
     565                        this.$el.removeClass( 'hide-' + subview );
    461566
    462567                        if ( previous.destroy )
    … …  
    565670
    566671                        this.controller = this.options.controller;
    567                         this.inline = new media.view.UploaderInline({
    568                                 controller:     this.controller,
    569                                 uploaderWindow: this
    570                         }).render();
    571 
    572                         this.inline.$el.appendTo('body');
     672
     673                        this.$browser = $('<a href="#" class="browser" />').hide().appendTo('body');
    573674
    574675                        uploader = this.options.uploader = _.defaults( this.options.uploader || {}, {
    575                                 container: this.inline.$el,
    576676                                dropzone:  this.$el,
    577                                 browser:   this.inline.$('.browser'),
     677                                browser:   this.$browser,
    578678                                params:    {}
    579679                        });
    … …  
    648748                        this.controller = this.options.controller;
    649749
     750                        if ( ! this.options.$browser )
     751                                this.options.$browser = this.controller.uploader.$browser;
     752
    650753                        // Track uploading attachments.
    651754                        wp.Uploader.queue.on( 'add remove reset change:percent', this.renderUploadProgress, this );
    … …  
    657760
    658761                render: function() {
     762                        var $browser = this.options.$browser,
     763                                $placeholder;
     764
    659765                        this.renderUploadProgress();
    660766                        this.$el.html( this.template( this.options ) );
     767
     768                        $placeholder = this.$('.browser');
     769                        $browser.text( $placeholder.text() );
     770                        $browser[0].className = $placeholder[0].className;
     771                        $placeholder.replaceWith( $browser.show() );
     772
    661773                        this.$bar = this.$('.media-progress-bar div');
    662774                        return this;
    … …  
    679791                }
    680792        });
    681 
    682793
    683794        /**
    … …  
    766877
    767878                        this.options.items = {
     879                                selection: new media.view.Selection({
     880                                        controller: controller,
     881                                        collection: selection,
     882                                        priority:   -40
     883                                }).render(),
     884
    768885                                'create-new-gallery': {
    769886                                        style:    'primary',
    … …  
    778895                                'insert-into-post': new media.view.ButtonGroup({
    779896                                        priority: 30,
    780                                         classes:  'dropdown-flip-x',
     897                                        classes:  'dropdown-flip-x dropdown-flip-y',
    781898                                        buttons:  [
    782899                                                {
    … …  
    10341151
    10351152        /**
    1036          * wp.media.view.Sidebar
    1037          */
    1038         media.view.Sidebar = Backbone.View.extend({
     1153         * wp.media.view.PriorityList
     1154         */
     1155
     1156        media.view.PriorityList = Backbone.View.extend({
    10391157                tagName:   'div',
    1040                 className: 'media-sidebar',
    1041                 template:  media.template('sidebar'),
    10421158
    10431159                initialize: function() {
    … …  
    10451161                        this._views     = {};
    10461162
    1047                         if ( this.options.views )
    1048                                 this.add( this.options.views, { silent: true });
     1163                        this.add( _.extend( {}, this.views, this.options.views ), { silent: true });
     1164                        delete this.views;
     1165                        delete this.options.views;
    10491166
    10501167                        if ( ! this.options.silent )
    … …  
    10611178                        $( els ).detach();
    10621179
    1063                         this.$el.html( this.template({
    1064                                 title:    this.controller.state().get('title') || '',
    1065                                 uploader: this.controller.options.uploader
    1066                         }) );
    1067 
    1068                         this.$('.sidebar-content').html( els );
    1069 
    1070                         if ( this.controller.uploader ) {
    1071                                 this.$el.append( this.controller.uploader.inline.$el );
    1072                                 this.controller.uploader.refresh();
    1073                         }
    1074 
     1180                        this.$el.html( els );
    10751181                        return this;
    10761182                },
    … …  
    10901196                        }
    10911197
     1198                        if ( ! (view instanceof Backbone.View) )
     1199                                view = this.toView( view, id, options );
     1200
    10921201                        view.controller = view.controller || this.controller;
    10931202
    … …  
    11071216                                this.render();
    11081217                        return this;
    1109                 }
     1218                },
     1219
     1220                toView: function( options ) {
     1221                        return new Backbone.View( options );
     1222                }
     1223        });
     1224
     1225
     1226        /**
     1227         * wp.media.view.Menu
     1228         */
     1229        media.view.Menu = media.view.PriorityList.extend({
     1230                tagName:   'ul',
     1231                className: 'media-menu',
     1232
     1233                toView: function( options, id ) {
     1234                        options = options || {};
     1235                        options.id = id;
     1236                        return new media.view.MenuItem( options ).render();
     1237                },
     1238
     1239                select: function( id ) {
     1240                        var view = this.get( id );
     1241
     1242                        if ( ! view )
     1243                                return;
     1244
     1245                        this.deselect();
     1246                        view.$el.addClass('active');
     1247                },
     1248
     1249                deselect: function() {
     1250                        this.$el.children().removeClass('active');
     1251                }
     1252        });
     1253
     1254        media.view.MenuItem = Backbone.View.extend({
     1255                tagName:   'li',
     1256                className: 'media-menu-item',
     1257
     1258                events: {
     1259                        'click': 'toState'
     1260                },
     1261
     1262                toState: function() {
     1263                        this.controller.state( this.options.id );
     1264                },
     1265
     1266                render: function() {
     1267                        var options = this.options;
     1268
     1269                        if ( options.text )
     1270                                this.$el.text( options.text );
     1271                        else if ( options.html )
     1272                                this.$el.html( options.html );
     1273
     1274                        return this;
     1275                }
     1276        });
     1277
     1278        media.view.Menu.Landing = media.view.Menu.extend({
     1279                views: {
     1280                        upload: {
     1281                                text: l10n.uploadFilesTitle,
     1282                                priority: 20
     1283                        },
     1284                        library: {
     1285                                text: l10n.mediaLibraryTitle,
     1286                                priority: 40
     1287                        },
     1288                        separateLibrary: new Backbone.View({
     1289                                className: 'separator',
     1290                                priority: 60
     1291                        }),
     1292                        embed: {
     1293                                text: l10n.embedFromUrlTitle,
     1294                                priority: 80
     1295                        }
     1296                }
     1297        });
     1298
     1299        /**
     1300         * wp.media.view.Sidebar
     1301         */
     1302        media.view.Sidebar = media.view.PriorityList.extend({
     1303                className: 'media-sidebar'
    11101304        });
    11111305
    … …  
    11191313
    11201314                events: {
    1121                         'click .attachment-preview': 'toggleSelection',
     1315                        'mousedown .attachment-preview': 'toggleSelection',
    11221316                        'change .describe':          'describe'
    11231317                },
    … …  
    13231517                        this.initSortable();
    13241518
    1325                         this.controller.state().on( 'change:edge change:gutter', this.css, this );
     1519                        _.bindAll( this, 'css' );
     1520                        this.model.on( 'change:edge change:gutter', this.css, this );
     1521                        this._resizeCss = _.debounce( _.bind( this.css, this ), this.refreshSensitivity );
     1522                        $(window).on( 'resize.attachments', this._resizeCss );
    13261523                        this.css();
    13271524                },
    … …  
    13291526                destroy: function() {
    13301527                        this.collection.off( 'add remove reset', null, this );
    1331                         this.controller.state().off( 'change:edge change:gutter', this.css, this );
     1528                        this.model.off( 'change:edge change:gutter', this.css, this );
     1529                        $(window).off( 'resize.attachments', this._resizeCss );
    13321530                },
    13331531
    13341532                css: function() {
    1335                         var $css = $( '#' + this.el.id + '-css' ),
    1336                                 state = this.controller.state();
     1533                        var $css = $( '#' + this.el.id + '-css' );
    13371534
    13381535                        if ( $css.length )
    … …  
    13411538                        media.view.Attachments.$head().append( this.template({
    13421539                                id:     this.el.id,
    1343                                 edge:   state.get('edge'),
    1344                                 gutter: state.get('gutter')
     1540                                edge:   this.edge(),
     1541                                gutter: this.model.get('gutter')
    13451542                        }) );
     1543                },
     1544
     1545                edge: function() {
     1546                        var edge = this.model.get('edge'),
     1547                                gutter, width, columns;
     1548
     1549                        if ( ! this.$el.is(':visible') )
     1550                                return edge;
     1551
     1552
     1553                        gutter  = this.model.get('gutter') * 2;
     1554                        width   = this.$el.width() - gutter;
     1555                        columns = Math.ceil( width / ( edge + gutter ) );
     1556                        edge = Math.floor( ( width - ( columns * gutter ) ) / columns );
     1557                        return edge;
    13461558                },
    13471559
    … …  
    13941606                        // If there are no elements, load some.
    13951607                        if ( ! this.collection.length ) {
    1396                                 this.collection.more();
     1608                                this.collection.more().done( this.scroll );
    13971609                                this.$el.empty();
    13981610                                return this;
    … …  
    14111623                        // threshold to query for additional attachments.
    14121624                        this.scroll();
     1625
    14131626                        return this;
    14141627                },
    … …  
    14421655
    14431656                        if ( this.el.scrollHeight < this.el.scrollTop + ( this.el.clientHeight * this.options.refreshThreshold ) ) {
    1444                                 this.collection.more();
     1657                                this.collection.more().done( this.scroll );
    14451658                        }
    14461659                }
    … …  
    14831696        });
    14841697
     1698
     1699
     1700        /**
     1701         * wp.media.view.AttachmentsBrowser
     1702         */
     1703        media.view.AttachmentsBrowser = Backbone.View.extend({
     1704                tagName:   'div',
     1705                className: 'attachments-browser',
     1706
     1707                initialize: function() {
     1708                        this.controller = this.options.controller;
     1709
     1710                        _.defaults( this.options, {
     1711                                search: true,
     1712                                upload: false,
     1713                                total:  true
     1714                        });
     1715
     1716                        this.toolbar = new media.view.Toolbar({
     1717                                controller: this.controller
     1718                        });
     1719
     1720                        if ( this.options.search ) {
     1721                                this.toolbar.add( 'search', new media.view.Search({
     1722                                        controller: this.controller,
     1723                                        model:      this.collection.props,
     1724                                        priority:   -40
     1725                                }) );
     1726                        }
     1727
     1728                        this.attachments = new media.view.Attachments({
     1729                                controller: this.controller,
     1730                                collection: this.collection,
     1731                                model:      this.model,
     1732                                sortable:   this.options.sortable,
     1733                                // The single `Attachment` view to be used in the `Attachments` view.
     1734                                AttachmentView: media.view.Attachment.Library
     1735                        });
     1736                },
     1737
     1738                render: function() {
     1739                        this.toolbar.$el.detach();
     1740                        this.attachments.$el.detach();
     1741                        this.$el.html([ this.toolbar.render().el, this.attachments.render().el ]);
     1742                        return this;
     1743                }
     1744        });
     1745
    14851746        /**
    14861747         * wp.media.view.SelectionPreview
    … …  
    15311792                        event.preventDefault();
    15321793                        this.collection.clear();
     1794                }
     1795        });
     1796
     1797        /**
     1798         * wp.media.view.Selection
     1799         */
     1800        media.view.Selection = Backbone.View.extend({
     1801                tagName:   'div',
     1802                className: 'media-selection',
     1803                template:  media.template('media-selection'),
     1804
     1805                events: {
     1806                        'click .clear-selection': 'clear'
     1807                },
     1808
     1809                initialize: function() {
     1810                        _.defaults( this.options, {
     1811                                clearable: true
     1812                        });
     1813
     1814                        this.controller = this.options.controller;
     1815                        this.attachments = new media.view.Attachments({
     1816                                controller: this.controller,
     1817                                collection: this.collection,
     1818                                sortable:   true,
     1819                                model:      new Backbone.Model({
     1820                                        edge:   40,
     1821                                        gutter: 5
     1822                                }),
     1823
     1824                                // The single `Attachment` view to be used in the `Attachments` view.
     1825                                AttachmentView: media.view.Attachment.Selection
     1826                        });
     1827
     1828                        this.collection.on( 'add remove reset', this.refresh, this );
     1829                },
     1830
     1831                destroy: function() {
     1832                        this.collection.off( 'add remove reset', this.refresh, this );
     1833                },
     1834
     1835                render: function() {
     1836                        this.attachments.$el.detach();
     1837                        this.attachments.render();
     1838
     1839                        this.$el.html( this.template( this.options ) );
     1840
     1841                        this.$('.selection-view').replaceWith( this.attachments.$el );
     1842                        this.refresh();
     1843                        return this;
     1844                },
     1845
     1846                refresh: function() {
     1847                        // If the selection hasn't been rendered, bail.
     1848                        if ( ! this.$el.children().length )
     1849                                return;
     1850
     1851                        // If nothing is selected, display nothing.
     1852                        this.$el.toggleClass( 'empty', ! this.collection.length );
     1853                        this.$('.count').text( this.collection.length + ' ' + l10n.selected );
     1854                },
     1855
     1856                clear: function( event ) {
     1857                        event.preventDefault();
     1858                        this.collection.clear();
     1859                }
     1860        });
     1861
     1862
     1863        /**
     1864         * wp.media.view.Attachment.Selection
     1865         */
     1866        media.view.Attachment.Selection = media.view.Attachment.extend({
     1867                // On click, just select the model, instead of removing the model from
     1868                // the selection.
     1869                toggleSelection: function() {
     1870                        this.controller.state().get('selection').single( this.model );
    15331871                }
    15341872        });

  • trunk/wp-includes/media.php

    r22345 r22362  
    13011301                        <a class="media-modal-close" href="" title="<?php esc_attr_e('Close'); ?>">&times;</a>
    13021302                </div>
    1303                 <div class="media-modal-backdrop"></div>
     1303                <div class="media-modal-backdrop">
     1304                        <div></div>
     1305                </div>
    13041306        </script>
    13051307
    … …  
    13111313
    13121314        <script type="text/html" id="tmpl-uploader-inline">
    1313                 <h3><?php _e( 'Drop files here' ); ?></h3>
    1314                 <!--<span><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></span>-->
    1315                 <a href="#" class="browser button-secondary"><?php _e( 'Select Files' ); ?></a>
    1316                 <div class="media-progress-bar"><div></div></div>
    1317         </script>
    1318 
    1319         <script type="text/html" id="tmpl-sidebar">
    1320                 <h2 class="sidebar-title"><%- title %></h2>
    1321                 <div class="sidebar-content"></div>
     1315                <div class="uploader-inline-content">
     1316                        <h3><?php _e( 'Drop files anywhere to upload' ); ?></h3>
     1317                        <a href="#" class="browser button button-hero"><?php _e( 'Select Files' ); ?></a>
     1318                        <div class="media-progress-bar"><div></div></div>
     1319                </div>
    13221320        </script>
    13231321
    … …  
    13611359
    13621360        <script type="text/html" id="tmpl-attachment-details">
     1361                <h3><?php _e('Edit Attachment Details'); ?></h3>
    13631362                <div class="attachment-preview attachment-details-preview type-<%- type %> subtype-<%- subtype %> <%- orientation %>">
    13641363                        <% if ( uploading ) { %>
    … …  
    13931392        </script>
    13941393
     1394        <script type="text/html" id="tmpl-media-selection">
     1395                <div class="selection-info">
     1396                        <span class="count"></span>
     1397                        <% if ( clearable ) { %>
     1398                                <a class="clear-selection" href="#"><?php _e('Clear'); ?></a>
     1399                        <% } %>
     1400                </div>
     1401                <div class="selection-view"></div>
     1402        </script>
     1403
    13951404        <script type="text/html" id="tmpl-media-selection-preview">
    13961405                <div class="selected-img selected-count-<%- count %>">
    … …  
    14871496                <style type="text/css" id="<%- id %>-css">
    14881497                        #<%- id %> {
    1489                                 padding: <%- gutter %>px;
     1498                                padding: 0 <%- gutter %>px;
    14901499                        }
    14911500

  • trunk/wp-includes/script-loader.php

    r22361 r22362  
    328328                'cancel'      => __( 'Cancel' ),
    329329                'addImages'   => __( 'Add images' ),
     330                'selected'    => __( 'selected' ),
     331
     332                // Upload
     333                'uploadFilesTitle' => __( 'Upload Files' ),
     334                'selectFiles'      => __( 'Select files' ),
    330335
    331336                // Library
    332                 'mediaLibraryTitle'     => __( 'Media Library' ),
    333                 'createNewGallery'      => __( 'Create a new gallery' ),
    334                 'insertIntoPost'        => __( 'Insert into post' ),
    335                 'addToGallery'          => __( 'Add to gallery' ),
     337                'mediaLibraryTitle' => __( 'Media Library' ),
     338                'createNewGallery'  => __( 'Create a new gallery' ),
     339                'insertIntoPost'    => __( 'Insert into post' ),
     340                'addToGallery'      => __( 'Add to gallery' ),
     341
     342                // Embed
     343                'embedFromUrlTitle' => __( 'Embed From URL' ),
    336344
    337345                // Gallery
Note: See TracChangeset for help on using the changeset viewer.