WordPress.org
Get WordPress

Make WordPress Core

Changeset 22466


Ignore:
Timestamp:
11/08/2012 02:15:09 PM (14 years ago)
Author:
koopersmith
Message:

Media: Improve sidebar handling and make attachment display properties attachment-specific.

wp.mce.media

  • Watch all workflows for the insert event and attempt to insert the current state's selection if it exists.
  • Fetch and pass attachment display properties through to wp.media.string.image().

wp.media.controller.Region

  • Separate the concept of events and modes.
  • All events triggered on a Region trigger both event and event:mode callbacks.
  • When a mode is deactivated, deactivate and deactivate:mode events are fired.
  • When a mode is activated, activate and activate:mode events are fired.

wp.media.controller.Library

  • Remove the details(), buildDetails(), and clearDetails() methods that juggled sidebar views. Instead, handle the sidebar views using modes.

wp.media.controller.Gallery

  • Shift the overloaded sidebar() method to use modes.

wp.media.view.MediaFrame.Post

  • Declare activate:mode event bindings using an nested object to reduce repetition.
  • Update sidebar activation callbacks.

wp.media.view.Settings

  • Refactor to leverage HTML data attributes and implicit values (instead of setting the fallback whenever an object was created). This has the additional benefit that gallery shortcode parameters are not output when the user has left them set to the default.

see #21390.

Location:
trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/wp-admin/js/media-upload.js

    r22437 r22466  
    108108                        } ) );
    109109
    110                         workflow.get('library').on( 'insert', function( selection ) {
     110                        workflow.on( 'insert', function() {
     111                                var state = workflow.state(),
     112                                        selection = state.get('selection'),
     113                                        details = state.get('details');
     114
     115                                if ( ! selection || ! details )
     116                                        return;
     117
    111118                                this.insert( selection.map( function( attachment ) {
     119                                        var detail = details[ attachment.cid ];
     120
     121                                        if ( detail )
     122                                                detail = detail.toJSON();
     123
    112124                                        if ( 'image' === attachment.get('type') )
    113                                                 return wp.media.string.image( attachment ) + ' ';
     125                                                return wp.media.string.image( attachment, detail ) + ' ';
    114126                                        else
    115127                                                return wp.media.string.link( attachment ) + ' ';

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

    r22437 r22466  
    760760 */
    761761
     762.attachment-details {
     763        overflow: auto;
     764}
     765
    762766.attachment-details-preview {
    763767        cursor: default;

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

    r22454 r22466  
    5959                _.extend( this, _.pick( options || {}, 'id', 'controller' ) );
    6060
    61                 this.on( 'empty', this.empty, this );
     61                this.on( 'activate:empty', this.empty, this );
    6262                this.mode('empty');
    6363        };
    … …  
    6767
    6868        _.extend( media.controller.Region.prototype, Backbone.Events, {
    69                 trigger: function( id ) {
    70                         this._mode = id;
    71                         return Backbone.Events.trigger.apply( this, arguments );
    72                 },
     69                trigger: (function() {
     70                        var eventSplitter = /\s+/,
     71                                trigger = Backbone.Events.trigger;
     72
     73                        return function( events ) {
     74                                var mode = ':' + this._mode,
     75                                        modeEvents = events.split( eventSplitter ).join( mode ) + mode;
     76
     77                                trigger.apply( this, arguments );
     78                                trigger.apply( this, [ modeEvents ].concat( _.rest( arguments ) ) );
     79                                return this;
     80                        };
     81                }()),
    7382
    7483                mode: function( mode ) {
    75                         if ( mode )
    76                                 return this.trigger( mode );
     84                        if ( mode ) {
     85                                this.trigger('deactivate');
     86                                this._mode = mode;
     87                                return this.trigger('activate');
     88                        }
    7789                        return this._mode;
    7890                },
    … …  
    271283                                this.set( 'gutter', 8 );
    272284
     285                        if ( ! this.get('details') )
     286                                this.set( 'details', [] );
     287
    273288                        media.controller.State.prototype.initialize.apply( this, arguments );
    274289                },
    … …  
    282297                                wp.Uploader.queue.on( 'add', this.selectUpload, this );
    283298
    284                         selection.on( 'selection:single', this.buildDetails, this );
    285                         selection.on( 'selection:unsingle', this.clearDetails, this );
     299                        selection.on( 'selection:single selection:unsingle', this.sidebar, this );
    286300                        selection.on( 'add remove reset', this.refreshToolbar, this );
    287301
    … …  
    307321
    308322                sidebar: function() {
    309                         media.controller.State.prototype.sidebar.apply( this, arguments );
    310                         this.details();
     323                        var sidebar = this.frame.sidebar;
     324
     325                        if ( this.get('selection').single() )
     326                                sidebar.mode( this.get('sidebar') );
     327                        else
     328                                sidebar.mode('clear');
    311329                },
    312330
    … …  
    343361                selectUpload: function( attachment ) {
    344362                        this.get('selection').add( attachment );
    345                 },
    346 
    347                 details: function() {
    348                         var single = this.get('selection').single();
    349                         this[ single ? 'buildDetails' : 'clearDetails' ]( single );
    350                 },
    351 
    352                 buildDetails: function( model ) {
    353                         var frame = this.frame;
    354                         frame.sidebar.view().add( 'details', new media.view.Attachment.Details({
    355                                 controller: frame,
    356                                 model:      model,
    357                                 priority:   80
    358                         }).render() );
    359                         return this;
    360                 },
    361 
    362                 clearDetails: function( model ) {
    363                         if ( this.get('selection').single() )
    364                                 return this;
    365 
    366                         this.frame.sidebar.view().add( 'details', new Backbone.View({
    367                                 priority: 80
    368                         }).render() );
    369                         return this;
    370363                },
    371364
    … …  
    437430
    438431                sidebar: function() {
    439                         var frame = this.frame;
    440 
    441                         media.controller.State.prototype.sidebar.apply( this, arguments );
    442                         this.details();
    443 
    444                         frame.sidebar.view().add({
    445                                 settings: new media.view.Settings.Gallery({
    446                                         controller: frame,
    447                                         model:      this.get('library').props,
    448                                         priority:   40
    449                                 }).render()
    450                         });
     432                        media.controller.Library.prototype.sidebar.apply( this, arguments );
     433                        this.frame.sidebar.trigger('gallery-settings');
     434                        return this;
    451435                }
    452436        });
    … …  
    591575
    592576                bindHandlers: function() {
    593                         this.menu.on( 'main', this.mainMenu, this );
    594                         this.menu.on( 'batch', this.batchMenu, this );
    595                         this.menu.on( 'gallery', this.galleryMenu, this );
    596 
    597                         this.content.on( 'browse', this.browseContent, this );
    598                         this.content.on( 'upload', this.uploadContent, this );
    599                         this.content.on( 'embed', this.embedContent, this );
    600 
    601                         this.sidebar.on( 'settings', this.settingsSidebar, this );
    602                         this.sidebar.on( 'attachment-settings', this.attachmentSettingsSidebar, this );
    603 
    604                         this.toolbar.on( 'main-attachments', this.mainAttachmentsToolbar, this );
    605                         this.toolbar.on( 'main-embed', this.mainEmbedToolbar, this );
    606                         this.toolbar.on( 'batch-edit', this.batchEditToolbar, this );
    607                         this.toolbar.on( 'batch-add', this.batchAddToolbar, this );
    608                         this.toolbar.on( 'gallery-edit', this.galleryEditToolbar, this );
    609                         this.toolbar.on( 'gallery-add', this.galleryAddToolbar, this );
     577                        var handlers = {
     578                                        menu: {
     579                                                main:    'mainMenu',
     580                                                batch:   'batchMenu',
     581                                                gallery: 'galleryMenu'
     582                                        },
     583
     584                                        content: {
     585                                                browse: 'browseContent',
     586                                                upload: 'uploadContent',
     587                                                embed:  'embedContent'
     588                                        },
     589
     590                                        sidebar: {
     591                                                'clear':               'clearSidebar',
     592                                                'settings':            'settingsSidebar',
     593                                                'attachment-settings': 'attachmentSettingsSidebar'
     594                                        },
     595
     596                                        toolbar: {
     597                                                'main-attachments': 'mainAttachmentsToolbar',
     598                                                'main-embed':       'mainEmbedToolbar',
     599                                                'batch-edit':       'batchEditToolbar',
     600                                                'batch-add':        'batchAddToolbar',
     601                                                'gallery-edit':     'galleryEditToolbar',
     602                                                'gallery-add':      'galleryAddToolbar'
     603                                        }
     604                                };
     605
     606                        _.each( handlers, function( regionHandlers, region ) {
     607                                _.each( regionHandlers, function( callback, handler ) {
     608                                        this[ region ].on( 'activate:' + handler, this[ callback ], this );
     609                                }, this );
     610                        }, this );
     611
     612                        this.sidebar.on( 'gallery-settings', this.onSidebarGallerySettings, this );
    610613                },
    611614
    … …  
    622625
    623626                createStates: function() {
    624                         var options = this.options;
     627                        var options = this.options,
     628                                main, gallery;
     629
     630                        main = {
     631                                multiple: this.options.multiple,
     632                                menu:      'main',
     633                                sidebar:   'attachment-settings',
     634
     635                                // Update user settings when users adjust the
     636                                // attachment display settings.
     637                                displayUserSettings: true
     638                        };
     639
     640                        gallery = {
     641                                multiple: true,
     642                                menu:     'gallery',
     643                                toolbar:  'gallery-add'
     644                        };
    625645
    626646                        // Add the default states.
    627647                        this.states.add([
    628                                 new media.controller.Library({
     648                                new media.controller.Library( _.defaults({
    629649                                        selection: options.selection,
    630                                         library:   media.query( options.library ),
    631                                         multiple:  this.options.multiple,
    632                                         menu:      'main',
    633                                         sidebar:   'attachment-settings'
    634                                 }),
    635 
    636                                 new media.controller.Upload({
    637                                         multiple: this.options.multiple,
    638                                         menu:      'main',
    639                                         sidebar:   'attachment-settings'
    640                                 }),
     650                                        library:   media.query( options.library )
     651                                }, main ) ),
     652
     653                                new media.controller.Upload( main ),
    641654
    642655                                new media.controller.Gallery({
    … …  
    645658                                }),
    646659
    647                                 new media.controller.Library({
    648                                         id:        'gallery-library',
    649                                         library:   media.query({ type: 'image' }),
    650                                         multiple:  true,
    651                                         menu:      'gallery',
    652                                         toolbar:   'gallery-add'
    653                                 }),
    654 
    655                                 new media.controller.Upload({
    656                                         id:        'gallery-upload',
    657                                         multiple:  true,
    658                                         menu:      'gallery',
    659                                         toolbar:   'gallery-add'
    660                                 })
     660                                new media.controller.Library( _.defaults({
     661                                        id:      'gallery-library',
     662                                        library: media.query({ type: 'image' })
     663                                }, gallery ) ),
     664
     665                                new media.controller.Upload( _.defaults({
     666                                        id: 'gallery-upload'
     667                                }, gallery ) )
    661668                        ]);
    662669
    … …  
    814821
    815822                // Sidebars
    816                 settingsSidebar: function() {
     823                clearSidebar: function() {
    817824                        this.sidebar.view( new media.view.Sidebar({
    818825                                controller: this
    … …  
    820827                },
    821828
    822                 attachmentSettingsSidebar: function() {
     829                settingsSidebar: function( options ) {
    823830                        this.sidebar.view( new media.view.Sidebar({
    824831                                controller: this,
     832                                silent:     options && options.silent,
     833
    825834                                views: {
    826                                         settings: new media.view.Settings.AttachmentDisplay({
     835                                        details: new media.view.Attachment.Details({
    827836                                                controller: this,
    828                                                 priority:   20
     837                                                model:      this.state().get('selection').single(),
     838                                                priority:   80
    829839                                        }).render()
    830840                                }
    831841                        }) );
     842                },
     843
     844                onSidebarGallerySettings: function( options ) {
     845                        this.sidebar.view().add({
     846                                gallery: new media.view.Settings.Gallery({
     847                                        controller: this,
     848                                        model:      this.state().get('library').props,
     849                                        priority:   40
     850                                }).render()
     851                        }, options );
     852                },
     853
     854                attachmentSettingsSidebar: function( options ) {
     855                        var state = this.state(),
     856                                display = state.get('details'),
     857                                single = state.get('selection').single().cid;
     858
     859                        this.settingsSidebar({ silent: true });
     860
     861                        display[ single ] = display[ single ] || new Backbone.Model({
     862                                align: getUserSetting( 'align', 'none' ),
     863                                size:  getUserSetting( 'imgsize', 'medium' ),
     864                                link:  getUserSetting( 'urlbutton', 'post' )
     865                        });
     866
     867                        this.sidebar.view().add({
     868                                display: new media.view.Settings.AttachmentDisplay({
     869                                        controller:   this,
     870                                        model:        display[ single ],
     871                                        priority:     100,
     872                                        userSettings: state.get('displayUserSettings')
     873                                }).render()
     874                        }, options );
    832875                },
    833876
    … …  
    21262169                },
    21272170
    2128                 settings: {},
    2129 
    21302171                initialize: function() {
    2131                         var settings = this.settings;
    2132 
    21332172                        this.model = this.model || new Backbone.Model();
    2134 
    2135                         _.each( settings, function( setting, key ) {
    2136                                 if ( setting.name )
    2137                                         this.model.set( key, getUserSetting( setting.name, setting.fallback ) );
    2138                                 else
    2139                                         this.model.set( key, this.model.get( key ) || setting.fallback );
    2140                         }, this );
    2141 
    2142                         this.model.validate = function( attrs ) {
    2143                                 return _.any( attrs, function( value, key ) {
    2144                                         // If we don't have a `setting` for the `key`, assume the
    2145                                         // `value` is valid. Otherwise, check if the `value` exists
    2146                                         // in the `setting.accepts` array.
    2147                                         return settings[ key ] && ! _.contains( settings[ key ].accepts, value );
    2148                                 });
    2149                         };
    2150 
    2151                         this.model.on( 'change', function( model, options ) {
    2152                                 if ( ! options.changes )
    2153                                         return;
    2154 
    2155                                 _.each( _.keys( options.changes ), function( key ) {
    2156                                         if ( settings[ key ] && settings[ key ].name )
    2157                                                 setUserSetting( settings[ key ].name, model.get( key ) );
    2158                                 });
    2159                         }, this );
    2160 
    21612173                        this.model.on( 'change', this.updateChanges, this );
    21622174                },
    21632175
    21642176                render: function() {
    2165                         this.$el.html( this.template( this.model.toJSON() ) );
     2177                        this.$el.html( this.template( _.defaults({
     2178                                model: this.model.toJSON()
     2179                        }, this.options ) ) );
    21662180
    21672181                        // Select the correct values.
    … …  
    21712185
    21722186                update: function( key ) {
    2173                         var setting = this.settings[ key ],
     2187                        var value = this.model.get( key ),
    21742188                                $setting = this.$('[data-setting="' + key + '"]'),
    21752189                                $buttons;
    21762190
    2177                         if ( ! setting )
     2191                        // Bail if we didn't find a matching setting.
     2192                        if ( ! $setting.length )
    21782193                                return;
    21792194
    2180                         if ( 'select' === setting.type ) {
    2181                                 $setting.find('[value="' + this.model.get( key ) + '"]').attr( 'selected', true );
    2182                         } else {
     2195                        // Attempt to determine how the setting is rendered and update
     2196                        // the selected value.
     2197
     2198                        // Handle dropdowns.
     2199                        if ( $setting.is('select') ) {
     2200                                $setting.find('[value="' + value + '"]').attr( 'selected', true );
     2201
     2202                        // Handle button groups.
     2203                        } else if ( $setting.hasClass('button-group') ) {
    21832204                                $buttons = $setting.find('button').removeClass('active');
    2184                                 $buttons.filter( '[value="' + this.model.get( key ) + '"]' ).addClass('active');
     2205                                $buttons.filter( '[value="' + value + '"]' ).addClass('active');
    21852206                        }
    21862207                },
    21872208
    21882209                updateHandler: function( event ) {
    2189                         var $setting = $( event.target ).closest('[data-setting]');
     2210                        var $setting = $( event.target ).closest('[data-setting]'),
     2211                                value = event.target.value,
     2212                                userSetting;
    21902213
    21912214                        event.preventDefault();
    21922215
    2193                         if ( $setting.length )
    2194                                 this.model.set( $setting.data('setting'), event.target.value );
     2216                        if ( ! $setting.length )
     2217                                return;
     2218
     2219                        this.model.set( $setting.data('setting'), value );
     2220
     2221                        // If the setting has a corresponding user setting,
     2222                        // update that as well.
     2223                        if ( userSetting = $setting.data('userSetting') )
     2224                                setUserSetting( userSetting, value );
    21952225                },
    21962226
    … …  
    22082238                template:  media.template('attachment-display-settings'),
    22092239
    2210                 settings: {
    2211                         align: {
    2212                                 accepts:  ['left','center','right','none'],
    2213                                 name:     'align',
    2214                                 fallback: 'none'
    2215                         },
    2216                         link: {
    2217                                 accepts:  ['post','file','none'],
    2218                                 name:     'urlbutton',
    2219                                 fallback: 'post'
    2220                         },
    2221                         size: {
    2222                                 // @todo: Dynamically generate these.
    2223                                 accepts:  ['thumbnail','medium','large','full'],
    2224                                 name:     'imgsize',
    2225                                 fallback: 'medium'
    2226                         }
     2240                initialize: function() {
     2241                        _.defaults( this.options, {
     2242                                userSettings: false
     2243                        });
     2244                        media.view.Settings.prototype.initialize.apply( this, arguments );
    22272245                }
    22282246        });
    … …  
    22332251        media.view.Settings.Gallery = media.view.Settings.extend({
    22342252                className: 'gallery-settings',
    2235                 template:  media.template('gallery-settings'),
    2236 
    2237                 settings: {
    2238                         columns: {
    2239                                 accepts:  _.invoke( _.range( 1, 10 ), 'toString' ),
    2240                                 fallback: '3',
    2241                                 type:     'select'
    2242                         },
    2243                         link: {
    2244                                 accepts:  ['post','file'],
    2245                                 fallback: 'post'
    2246                         }
    2247                 }
     2253                template:  media.template('gallery-settings')
    22482254        });
    22492255

  • trunk/wp-includes/media.php

    r22437 r22466  
    14181418
    14191419                <h4><?php _e('Alignment'); ?></h4>
    1420                 <div class="alignment button-group button-large" data-setting="align">
     1420                <div class="alignment button-group button-large"
     1421                        data-setting="align"
     1422                        <# if ( userSettings ) { #>
     1423                                data-user-setting="align"
     1424                        <# } #>>
     1425
    14211426                        <button class="button" value="left">
    14221427                                <?php esc_attr_e('Left'); ?>
    … …  
    14281433                                <?php esc_attr_e('Right'); ?>
    14291434                        </button>
    1430                         <button class="button" value="none">
     1435                        <button class="button active" value="none">
    14311436                                <?php esc_attr_e('None'); ?>
    14321437                        </button>
    … …  
    14341439
    14351440                <h4><?php _e('Link To'); ?></h4>
    1436                 <div class="link-to button-group button-large" data-setting="link">
    1437                         <button class="button" value="post">
     1441                <div class="link-to button-group button-large"
     1442                        data-setting="link"
     1443                        <# if ( userSettings ) { #>
     1444                                data-user-setting="urlbutton"
     1445                        <# } #>>
     1446
     1447                        <button class="button active" value="post">
    14381448                                <?php esc_attr_e('Attachment Page'); ?>
    14391449                        </button>
    … …  
    14511461
    14521462                <h4><?php _e('Link To'); ?></h4>
    1453                 <div class="link-to button-group" data-setting="link">
    1454                         <button class="button" value="post">
     1463                <div class="link-to button-group"
     1464                        data-setting="link">
     1465
     1466                        <button class="button active" value="post">
    14551467                                <?php esc_attr_e('Attachment Page'); ?>
    14561468                        </button>
    … …  
    14621474                <h4><?php _e('Gallery Columns'); ?></h4>
    14631475
    1464                 <select class="columns" name="columns" data-setting="columns">
     1476                <select class="columns" name="columns"
     1477                        data-setting="columns">
    14651478                        <?php for ( $i = 1; $i <= 9; $i++ ) : ?>
    1466                                 <option value="<?php echo esc_attr( $i ); ?>">
     1479                                <option value="<?php echo esc_attr( $i ); ?>" <?php selected( $i, 3 ); ?>>
    14671480                                        <?php echo esc_html( $i ); ?>
    14681481                                </option>
Note: See TracChangeset for help on using the changeset viewer.