WordPress.org

Make WordPress Core

Changeset 22340


Ignore:
Timestamp:
10/31/2012 07:22:25 PM (8 years ago)
Author:
koopersmith
Message:

Add gallery settings to the media modal.

  • Abstracts wp.media.view.AttachmentDisplaySettings into wp.media.view.Settings for managing lists of settings with button groups and select boxes. Settings can optionally be tied to a user setting (i.e. using getUserSetting).
  • Adds wp.media.view.Settings.AttachmentDisplay.
  • Adds wp.media.view.Settings.Gallery.

see #21390, #21815.

Location:
trunk/wp-includes
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-includes/js/mce-view.js

    r22320 r22340  
    591591                    var shortcodeString = shortcode.string(),
    592592                        result = galleries[ shortcodeString ],
    593                         attrs, args;
     593                        attrs, args, query;
    594594
    595595                    delete galleries[ shortcodeString ];
     
    618618                        args.parent = attrs.id || parent;
    619619
    620                     return media.query( args );
     620                    query = media.query( args );
     621                    query.props.set( _.pick( attrs, 'columns', 'link' ) );
     622                    return query;
    621623                },
    622624
    623625                shortcode: function( attachments ) {
    624626                    var props = attachments.props.toJSON(),
    625                         attrs = _.pick( props, 'include', 'exclude', 'orderby', 'order' ),
     627                        attrs = _.pick( props, 'include', 'exclude', 'orderby', 'order', 'link', 'columns' ),
    626628                        shortcode;
    627629
  • trunk/wp-includes/js/media-views.js

    r22339 r22340  
    283283
    284284            this.details();
     285            frame.sidebar().add({
     286                settings: new media.view.Settings.Gallery({
     287                    controller: frame,
     288                    model:      this.get('library').props,
     289                    priority:   40
     290                }).render()
     291            });
    285292        },
    286293
     
    753760                        {
    754761                            classes:  ['down-arrow'],
    755                             dropdown: new media.view.AttachmentDisplaySettings().render().$el,
     762                            dropdown: new media.view.Settings.AttachmentDisplay().render().$el,
    756763
    757764                            click: function( event ) {
     
    14451452
    14461453    /**
    1447      * wp.media.view.AttachmentDisplaySettings
    1448      */
    1449     media.view.AttachmentDisplaySettings = Backbone.View.extend({
     1454     * wp.media.view.Settings
     1455     */
     1456    media.view.Settings = Backbone.View.extend({
    14501457        tagName:   'div',
    14511458        className: 'attachment-display-settings',
     
    14531460
    14541461        events: {
    1455             'click button': 'updateHandler'
    1456         },
    1457 
    1458         settings:   {
     1462            'click button':    'updateHandler',
     1463            'change input':    'updateHandler',
     1464            'change select':   'updateHandler',
     1465            'change textarea': 'updateHandler'
     1466        },
     1467
     1468        settings: {},
     1469
     1470        initialize: function() {
     1471            var settings = this.settings;
     1472
     1473            this.model = this.model || new Backbone.Model();
     1474
     1475            _.each( settings, function( setting, key ) {
     1476                if ( setting.name )
     1477                    this.model.set( key, getUserSetting( setting.name, setting.fallback ) );
     1478                else
     1479                    this.model.set( key, this.model.get( key ) || setting.fallback );
     1480            }, this );
     1481
     1482            this.model.validate = function( attrs ) {
     1483                return _.any( attrs, function( value, key ) {
     1484                    return ! settings[ key ] || ! _.contains( settings[ key ].accepts, value );
     1485                });
     1486            };
     1487
     1488            this.model.on( 'change', function( model, options ) {
     1489                if ( ! options.changes )
     1490                    return;
     1491
     1492                _.each( _.keys( options.changes ), function( key ) {
     1493                    if ( settings[ key ] && settings[ key ].name )
     1494                        setUserSetting( settings[ key ].name, model.get( key ) );
     1495                });
     1496            }, this );
     1497
     1498            this.model.on( 'change', this.updateChanges, this );
     1499        },
     1500
     1501        render: function() {
     1502            this.$el.html( this.template( this.model.toJSON() ) );
     1503
     1504            // Select the correct values.
     1505            _( this.model.attributes ).chain().keys().each( this.update, this );
     1506            return this;
     1507        },
     1508
     1509        update: function( key ) {
     1510            var setting = this.settings[ key ],
     1511                $setting = this.$('[data-setting="' + key + '"]'),
     1512                $buttons;
     1513
     1514            if ( ! setting )
     1515                return;
     1516
     1517            if ( 'select' === setting.type ) {
     1518                $setting.find('[value="' + this.model.get( key ) + '"]').attr( 'selected', true );
     1519            } else {
     1520                $buttons = $setting.find('button').removeClass('active');
     1521                $buttons.filter( '[value="' + this.model.get( key ) + '"]' ).addClass('active');
     1522            }
     1523        },
     1524
     1525        updateHandler: function( event ) {
     1526            var $setting = $( event.target ).closest('[data-setting]');
     1527
     1528            event.preventDefault();
     1529
     1530            if ( $setting.length )
     1531                this.model.set( $setting.data('setting'), event.target.value );
     1532        },
     1533
     1534        updateChanges: function( model, options ) {
     1535            if ( options.changes )
     1536                _( options.changes ).chain().keys().each( this.update, this );
     1537        }
     1538    });
     1539
     1540    /**
     1541     * wp.media.view.Settings.AttachmentDisplay
     1542     */
     1543    media.view.Settings.AttachmentDisplay = media.view.Settings.extend({
     1544        className: 'attachment-display-settings',
     1545        template:  media.template('attachment-display-settings'),
     1546
     1547        settings: {
    14591548            align: {
    14601549                accepts:  ['left','center','right','none'],
     
    14731562                fallback: 'medium'
    14741563            }
    1475         },
    1476 
    1477         initialize: function() {
    1478             var settings = this.settings;
    1479 
    1480             this.model = new Backbone.Model();
    1481 
    1482             _.each( settings, function( setting, key ) {
    1483                 this.model.set( key, getUserSetting( setting.name, setting.fallback ) );
    1484             }, this );
    1485 
    1486             this.model.validate = function( attrs ) {
    1487                 return _.any( attrs, function( value, key ) {
    1488                     return ! settings[ key ] || ! _.contains( settings[ key ].accepts, value );
    1489                 });
    1490             };
    1491 
    1492             this.model.on( 'change', function( model, options ) {
    1493                 if ( ! options.changes )
    1494                     return;
    1495 
    1496                 _.each( _.keys( options.changes ), function( key ) {
    1497                     if ( settings[ key ] )
    1498                         setUserSetting( settings[ key ].name, model.get( key ) );
    1499                 });
    1500             }, this );
    1501 
    1502             this.model.on( 'change', this.updateChanges, this );
    1503         },
    1504 
    1505         render: function() {
    1506             this.$el.html( this.template( this.model.toJSON() ) );
    1507 
    1508             // Select the correct values.
    1509             _( this.model.attributes ).chain().keys().each( this.update, this );
    1510             return this;
    1511         },
    1512 
    1513         update: function( key ) {
    1514             var buttons = this.$('[data-setting="' + key + '"] button').removeClass('active');
    1515             buttons.filter( '[value="' + this.model.get( key ) + '"]' ).addClass('active');
    1516         },
    1517 
    1518         updateHandler: function( event ) {
    1519             var group = $( event.target ).closest('.button-group');
    1520 
    1521             event.preventDefault();
    1522 
    1523             if ( group.length )
    1524                 this.model.set( group.data('setting'), event.target.value );
    1525         },
    1526 
    1527         updateChanges: function( model, options ) {
    1528             if ( options.changes )
    1529                 _( options.changes ).chain().keys().each( this.update, this );
    1530         }
     1564        }
     1565    });
     1566
     1567    /**
     1568     * wp.media.view.Settings.Gallery
     1569     */
     1570    media.view.Settings.Gallery = media.view.Settings.extend({
     1571        className: 'gallery-settings',
     1572        template:  media.template('gallery-settings'),
     1573
     1574        settings: {
     1575            columns: {
     1576                accepts:  _.invoke( _.range( 1, 10 ), 'toString' ),
     1577                fallback: 3,
     1578                type:     'select'
     1579            },
     1580            link: {
     1581                accepts:  ['post','file'],
     1582                fallback: 'post'
     1583            }
     1584        }
     1585
     1586        // render: function() {
     1587        //  this.$el.html( this.template({
     1588        //      count: this.options.maxColumns
     1589        //  }) );
     1590
     1591        //  this.$('option[value="' + this.options.columns + '"]').attr( 'selected', true );
     1592        //  this.$('option[value="' + this.options.linkTo + '"]').addClass('active');
     1593        // }
    15311594    });
    15321595
  • trunk/wp-includes/media.php

    r22324 r22340  
    14351435    </script>
    14361436
     1437    <script type="text/html" id="tmpl-gallery-settings">
     1438        <h4><?php _e('Link To'); ?></h4>
     1439        <div class="link-to button-group button-large" data-setting="link">
     1440            <button class="button" value="post">
     1441                <?php esc_attr_e('Attachment Page'); ?>
     1442            </button>
     1443            <button class="button" value="file">
     1444                <?php esc_attr_e('Media File'); ?>
     1445            </button>
     1446        </div>
     1447
     1448        <h4><?php _e('Gallery Columns'); ?></h4>
     1449
     1450        <select class="columns" name="columns" data-setting="columns">
     1451            <% _.times( 9, function( i ) { %>
     1452                <option value="<%- i %>"><%- i %></option>
     1453            <% }); %>
     1454        </select>
     1455    </script>
     1456
    14371457    <script type="text/html" id="tmpl-editor-attachment">
    14381458        <div class="editor-attachment-preview">
Note: See TracChangeset for help on using the changeset viewer.