Make WordPress Core

Changeset 22027


Ignore:
Timestamp:
09/27/2012 12:59:04 AM (12 years ago)
Author:
koopersmith
Message:

Media JS: Improve UX for which buttons show when inserting media into a post.

'Insert into post' is the primary action when either one item is selected, or any number of non-image items are selected. If multiple images are selected, 'Insert into post' becomes secondary, and 'Create a new gallery' takes the primary spot.

Adds a method to get Button views from the Toolbar. Adds a model for certain button attributes to allow size, style, and text to be easily changed.

see #21390, #21808, #21809.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-includes/js/media-views.js

    r22022 r22027  
    290290        },
    291291
     292        get: function( id ) {
     293            return this._views[ id ];
     294        },
     295
    292296        remove: function( id, options ) {
    293297            delete this._views[ id ];
     
    311315        },
    312316
    313         initialize: function() {
    314             _.defaults( this.options, {
    315                 text:    '',
    316                 classes: []
    317             });
     317        defaults: {
     318            text:  '',
     319            style: '',
     320            size:  'large'
     321        },
     322
     323        initialize: function() {
     324            // Create a model with the provided `defaults`.
     325            this.model = new Backbone.Model( this.defaults );
     326
     327            // If any of the `options` have a key from `defaults`, apply its
     328            // value to the `model` and remove it from the `options object.
     329            _.each( this.defaults, function( def, key ) {
     330                var value = this.options[ key ];
     331                if ( _.isUndefined( value ) )
     332                    return;
     333
     334                this.model.set( key, value );
     335                delete this.options[ key ];
     336            }, this );
     337
     338            this.model.on( 'change', this.render, this );
    318339        },
    319340
     
    321342            var classes = [ 'button', this.className ];
    322343
    323             if ( this.options.style )
    324                 classes.push( 'button-' + this.options.style );
    325 
    326             if ( this.options.size )
    327                 classes.push( 'button-' + this.options.size );
     344            if ( this.model.get('style') )
     345                classes.push( 'button-' + this.model.get('style') );
     346
     347            if ( this.model.get('size') )
     348                classes.push( 'button-' + this.model.get('size') );
    328349
    329350            classes = classes.concat( this.options.classes );
    330351            this.el.className = classes.join(' ');
    331             this.$el.text( this.options.text );
     352
     353            this.$el.text( this.model.get('text') );
    332354            return this;
    333355        },
     
    442464                        priority: -40
    443465                    }),
    444                     'insert-into-post': {
    445                         style: 'primary',
    446                         text:  'Insert into post',
    447                         priority: 40
    448                     },
     466
    449467                    'create-new-gallery': {
    450468                        style: 'primary',
    451469                        text:  'Create a new gallery',
    452                         priority: 30,
     470                        priority: 40,
    453471                        click:  function() {
    454472                            controller.render('gallery');
    455473                        }
    456474                    },
     475
     476                    'insert-into-post': {
     477                        // style: 'primary',
     478                        text:  'Insert into post',
     479                        priority: 30
     480                    },
     481
    457482                    'add-to-gallery': {
    458483                        text:  'Add to gallery',
     
    463488
    464489            this.controller.selection.on( 'add remove', function() {
    465                 this.$el.toggleClass( 'with-toolbar', !! this.controller.selection.length );
     490                var count = this.controller.selection.length,
     491                    showGallery;
     492
     493                this.$el.toggleClass( 'with-toolbar', !! count );
     494
     495                // Check if every attachment in the selection is an image.
     496                showGallery = count > 1 && this.controller.selection.all( function( attachment ) {
     497                    return 'image' === attachment.get('type');
     498                });
     499
     500                this.toolbarView.get('create-new-gallery').$el.toggle( showGallery );
     501                insert = this.toolbarView.get('insert-into-post');
     502                insert.model.set( 'style', showGallery ? '' : 'primary' );
    466503            }, this );
    467504
Note: See TracChangeset for help on using the changeset viewer.