WordPress.org

Make WordPress Core

Changeset 22247


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

Add attachment display settings to the media modal.

  • Add a media view for button groups.
  • Add button dropdown containers.
  • Add a dropdown property to the button media model.

fixes #22206, #21814, see #21390, #21813, #21598.

Location:
trunk/wp-includes
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-includes/css/buttons.css

    r22245 r22247  
    230230
    231231.button-group {
     232    position: relative;
    232233    display: inline-block;
    233234    white-space: nowrap;
     
    237238
    238239.button-group > .button {
    239     position: relative;
    240240    display: inline-block;
    241241    border-radius: 0;
     
    270270    display: inline-block;
    271271    font-size: 16px;
    272     opacity: 0.8;
     272    opacity: 0.9;
    273273    margin: 0 -0.25em;
    274274    text-align: center;
    275275    vertical-align: middle;
    276276}
     277
     278.button .dropdown {
     279    display: none;
     280    position: absolute;
     281    top: 100%;
     282    left: 0;
     283    margin-top: 5px;
     284    padding: 0.8em 1em;
     285    border-radius: 3px;
     286
     287    background: #f5f5f5;
     288    color: #333;
     289    text-shadow: none;
     290    box-shadow:
     291        0 0 0 1px rgba( 0, 0, 0, 0.3 ),
     292        1px 1px 2px rgba( 0, 0, 0, 0.1 );
     293}
     294
     295.button.active .dropdown {
     296    display: block;
     297}
     298
     299.dropdown-flip-x .dropdown {
     300    left: auto;
     301    right: 0;
     302}
  • trunk/wp-includes/css/media-views.css

    r22184 r22247  
    8787}
    8888
    89 .media-toolbar .media-button {
     89.media-toolbar-primary > .media-button,
     90.media-toolbar-primary > .media-button-group {
     91    margin-left: 10px;
    9092    float: left;
    9193    margin-top: 16px;
    9294}
    9395
    94 .media-toolbar-primary .media-button {
    95     margin-left: 10px;
    96 }
    97 
    98 .media-toolbar-secondary .media-button {
     96.media-toolbar-secondary > .media-button,
     97.media-toolbar-secondary > .media-button-group {
    9998    margin-right: 10px;
     99    float: left;
     100    margin-top: 16px;
    100101}
    101102
     
    517518    line-height: 60px;
    518519}
     520
     521/**
     522 * Attachment Display Settings
     523 */
     524
     525.attachment-display-settings,
     526.button div.attachment-display-settings {
     527    padding: 0 1em 1em;
     528}
     529
     530.attachment-display-settings h3 {
     531    font-weight: 200;
     532    margin: 1.4em 0 0.4em;
     533}
     534
     535.attachment-display-settings h4 {
     536    margin: 1.4em 0 0.4em;
     537}
  • trunk/wp-includes/js/media-views.js

    r22183 r22247  
    351351            }, this );
    352352
     353            if ( this.options.dropdown )
     354                this.options.dropdown.addClass('dropdown');
     355
    353356            this.model.on( 'change', this.render, this );
    354357        },
     
    363366                classes.push( 'button-' + this.model.get('size') );
    364367
    365             classes = classes.concat( this.options.classes );
     368            classes = _.uniq( classes.concat( this.options.classes ) );
    366369            this.el.className = classes.join(' ');
    367370
     371
     372            // Detach the dropdown.
     373            if ( this.options.dropdown )
     374                this.options.dropdown.detach();
     375
    368376            this.$el.text( this.model.get('text') );
     377
     378            if ( this.options.dropdown )
     379                this.$el.append( this.options.dropdown );
     380
    369381            return this;
    370382        },
     
    374386            if ( this.options.click )
    375387                this.options.click.apply( this, arguments );
     388        }
     389    });
     390
     391    /**
     392     * wp.media.view.ButtonGroup
     393     */
     394    media.view.ButtonGroup = Backbone.View.extend({
     395        tagName:   'div',
     396        className: 'button-group button-large media-button-group',
     397
     398        initialize: function() {
     399            this.buttons = _.map( this.options.buttons || [], function( button ) {
     400                if ( button instanceof Backbone.View )
     401                    return button;
     402                else
     403                    return new media.view.Button( button ).render();
     404            });
     405
     406            delete this.options.buttons;
     407
     408            if ( this.options.classes )
     409                this.$el.addClass( this.options.classes );
     410        },
     411
     412        render: function() {
     413            this.$el.html( $( _.pluck( this.buttons, 'el' ) ).detach() );
     414            return this;
    376415        }
    377416    });
     
    711750                    },
    712751
    713                     'insert-into-post': {
    714                         text:     l10n.insertIntoPost,
     752                    'insert-into-post': new media.view.ButtonGroup({
    715753                        priority: 30,
    716                         click:    _.bind( controller.update, controller, 'insert' )
    717                     },
     754                        classes:  'dropdown-flip-x',
     755                        buttons:  [
     756                            {
     757                                text:  l10n.insertIntoPost,
     758                                click: _.bind( controller.update, controller, 'insert' )
     759                            },
     760                            {
     761                                classes:  ['down-arrow'],
     762                                dropdown: new media.view.AttachmentDisplaySettings().render().$el,
     763
     764                                click: function( event ) {
     765                                    var $el = this.$el;
     766
     767                                    if ( ! $( event.target ).closest('.dropdown').length )
     768                                        $el.toggleClass('active');
     769
     770                                    // Stop the event from propagating further so we can bind
     771                                    // a one-time event to the body (and ensure that a click
     772                                    // on the dropdown won't trigger said event).
     773                                    event.stopPropagation();
     774
     775                                    if ( $el.is(':visible') ) {
     776                                        $(document.body).one( 'click', function() {
     777                                            $el.removeClass('active');
     778                                        });
     779                                    }
     780                                }
     781                            }
     782                        ]
     783                    }).render(),
    718784
    719785                    'add-to-gallery': {
     
    737803                this.toolbarView.get('create-new-gallery').$el.toggle( showGallery );
    738804                insert = this.toolbarView.get('insert-into-post');
    739                 insert.model.set( 'style', showGallery ? '' : 'primary' );
     805                _.each( insert.buttons, function( button ) {
     806                    button.model.set( 'style', showGallery ? '' : 'primary' );
     807                });
    740808            }, this );
    741809
     
    10351103        }
    10361104    });
     1105
     1106
     1107    /**
     1108     * wp.media.view.AttachmentDisplaySettings
     1109     */
     1110    media.view.AttachmentDisplaySettings = Backbone.View.extend({
     1111        tagName:   'div',
     1112        className: 'attachment-display-settings',
     1113        template:  media.template('attachment-display-settings'),
     1114
     1115        events: {
     1116            'click button': 'updateHandler'
     1117        },
     1118
     1119        settings:   {
     1120            align: {
     1121                accepts:  ['left','center','right','none'],
     1122                name:     'align',
     1123                fallback: 'none'
     1124            },
     1125            link: {
     1126                accepts:  ['post','file','none'],
     1127                name:     'urlbutton',
     1128                fallback: 'post'
     1129            },
     1130            size: {
     1131                // @todo: Dynamically generate these.
     1132                accepts:  ['thumbnail','medium','large','full'],
     1133                name:     'imgsize',
     1134                fallback: 'medium'
     1135            }
     1136        },
     1137
     1138        initialize: function() {
     1139            var settings = this.settings;
     1140
     1141            this.model = new Backbone.Model();
     1142
     1143            _.each( settings, function( setting, key ) {
     1144                this.model.set( key, getUserSetting( setting.name, setting.fallback ) );
     1145            }, this );
     1146
     1147            this.model.validate = function( attrs ) {
     1148                return _.any( attrs, function( value, key ) {
     1149                    return ! settings[ key ] || ! _.contains( settings[ key ].accepts, value );
     1150                });
     1151            };
     1152
     1153            this.model.on( 'change', function( model, options ) {
     1154                if ( ! options.changes )
     1155                    return;
     1156
     1157                _.each( _.keys( options.changes ), function( key ) {
     1158                    if ( settings[ key ] )
     1159                        setUserSetting( settings[ key ].name, model.get( key ) );
     1160                });
     1161            }, this );
     1162
     1163            this.model.on( 'change', this.updateChanges, this );
     1164        },
     1165
     1166        render: function() {
     1167            this.$el.html( this.template( this.model.toJSON() ) );
     1168
     1169            // Select the correct values.
     1170            _( this.model.attributes ).chain().keys().each( this.update, this );
     1171            return this;
     1172        },
     1173
     1174        update: function( key ) {
     1175            var buttons = this.$('[data-setting="' + key + '"] button').removeClass('active');
     1176            buttons.filter( '[value="' + this.model.get( key ) + '"]' ).addClass('active');
     1177        },
     1178
     1179        updateHandler: function( event ) {
     1180            var group = $( event.target ).closest('.button-group');
     1181
     1182            event.preventDefault();
     1183
     1184            if ( group.length )
     1185                this.model.set( group.data('setting'), event.target.value );
     1186        },
     1187
     1188        updateChanges: function( model, options ) {
     1189            if ( options.changes )
     1190                _( options.changes ).chain().keys().each( this.update, this );
     1191        }
     1192    });
    10371193}(jQuery));
  • trunk/wp-includes/media.php

    r22225 r22247  
    13781378    </script>
    13791379
     1380    <script type="text/html" id="tmpl-attachment-display-settings">
     1381        <h4><?php _e('Alignment'); ?></h4>
     1382        <div class="alignment button-group button-large" data-setting="align">
     1383            <button class="button" value="left">
     1384                <?php esc_attr_e('Left'); ?>
     1385            </button>
     1386            <button class="button" value="center">
     1387                <?php esc_attr_e('Center'); ?>
     1388            </button>
     1389            <button class="button" value="right">
     1390                <?php esc_attr_e('Right'); ?>
     1391            </button>
     1392            <button class="button" value="none">
     1393                <?php esc_attr_e('None'); ?>
     1394            </button>
     1395        </div>
     1396
     1397        <h4><?php _e('Link To'); ?></h4>
     1398        <div class="link-to button-group button-large" data-setting="link">
     1399            <button class="button" value="post">
     1400                <?php esc_attr_e('Attachment Page'); ?>
     1401            </button>
     1402            <button class="button" value="file">
     1403                <?php esc_attr_e('Media File'); ?>
     1404            </button>
     1405            <button class="button" value="none">
     1406                <?php esc_attr_e('None'); ?>
     1407            </button>
     1408        </div>
     1409    </script>
     1410
    13801411    <script type="text/html" id="tmpl-editor-attachment">
    13811412        <div class="editor-attachment-preview">
Note: See TracChangeset for help on using the changeset viewer.