Changeset 22247

Timestamp:

10/16/2012 07:25:17 PM (12 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:

• css/buttons.css (modified) (3 diffs)
• css/media-views.css (modified) (2 diffs)
• js/media-views.js (modified) (6 diffs)
• media.php (modified) (1 diff)

trunk/wp-includes/css/buttons.css

@@ -230 +230 @@
 
 .button-group {
+    position: relative;
     display: inline-block;
     white-space: nowrap;
@@ -237 +238 @@
 
 .button-group > .button {
-    position: relative;
     display: inline-block;
     border-radius: 0;
@@ -270 +270 @@
     display: inline-block;
     font-size: 16px;
-    opacity: 0.8;
+    opacity: 0.9;
     margin: 0 -0.25em;
     text-align: center;
     vertical-align: middle;
 }
+
+.button .dropdown {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: 5px;
+    padding: 0.8em 1em;
+    border-radius: 3px;
+
+    background: #f5f5f5;
+    color: #333;
+    text-shadow: none;
+    box-shadow:
+        0 0 0 1px rgba( 0, 0, 0, 0.3 ),
+        1px 1px 2px rgba( 0, 0, 0, 0.1 );
+}
+
+.button.active .dropdown {
+    display: block;
+}
+
+.dropdown-flip-x .dropdown {
+    left: auto;
+    right: 0;
+}

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

@@ -87 +87 @@
 }
 
-.media-toolbar .media-button {
+.media-toolbar-primary > .media-button,
+.media-toolbar-primary > .media-button-group {
+    margin-left: 10px;
     float: left;
     margin-top: 16px;
 }
 
-.media-toolbar-primary .media-button {
-    margin-left: 10px;
-}
-
-.media-toolbar-secondary .media-button {
+.media-toolbar-secondary > .media-button,
+.media-toolbar-secondary > .media-button-group {
     margin-right: 10px;
+    float: left;
+    margin-top: 16px;
 }
 
@@ -517 +518 @@
     line-height: 60px;
 }
+
+/**
+ * Attachment Display Settings
+ */
+
+.attachment-display-settings,
+.button div.attachment-display-settings {
+    padding: 0 1em 1em;
+}
+
+.attachment-display-settings h3 {
+    font-weight: 200;
+    margin: 1.4em 0 0.4em;
+}
+
+.attachment-display-settings h4 {
+    margin: 1.4em 0 0.4em;
+}

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

@@ -351 +351 @@
             }, this );
 
+            if ( this.options.dropdown )
+                this.options.dropdown.addClass('dropdown');
+
             this.model.on( 'change', this.render, this );
         },
@@ -363 +366 @@
                 classes.push( 'button-' + this.model.get('size') );
 
-            classes = classes.concat( this.options.classes );
+            classes = _.uniq( classes.concat( this.options.classes ) );
             this.el.className = classes.join(' ');
 
+
+            // Detach the dropdown.
+            if ( this.options.dropdown )
+                this.options.dropdown.detach();
+
             this.$el.text( this.model.get('text') );
+
+            if ( this.options.dropdown )
+                this.$el.append( this.options.dropdown );
+
             return this;
         },
@@ -374 +386 @@
             if ( this.options.click )
                 this.options.click.apply( this, arguments );
+        }
+    });
+
+    /**
+     * wp.media.view.ButtonGroup
+     */
+    media.view.ButtonGroup = Backbone.View.extend({
+        tagName:   'div',
+        className: 'button-group button-large media-button-group',
+
+        initialize: function() {
+            this.buttons = _.map( this.options.buttons || [], function( button ) {
+                if ( button instanceof Backbone.View )
+                    return button;
+                else
+                    return new media.view.Button( button ).render();
+            });
+
+            delete this.options.buttons;
+
+            if ( this.options.classes )
+                this.$el.addClass( this.options.classes );
+        },
+
+        render: function() {
+            this.$el.html( $( _.pluck( this.buttons, 'el' ) ).detach() );
+            return this;
         }
     });
@@ -711 +750 @@
                     },
 
-                    'insert-into-post': {
-                        text:     l10n.insertIntoPost,
+                    'insert-into-post': new media.view.ButtonGroup({
                         priority: 30,
-                        click:    _.bind( controller.update, controller, 'insert' )
-                    },
+                        classes:  'dropdown-flip-x',
+                        buttons:  [
+                            {
+                                text:  l10n.insertIntoPost,
+                                click: _.bind( controller.update, controller, 'insert' )
+                            },
+                            {
+                                classes:  ['down-arrow'],
+                                dropdown: new media.view.AttachmentDisplaySettings().render().$el,
+
+                                click: function( event ) {
+                                    var $el = this.$el;
+
+                                    if ( ! $( event.target ).closest('.dropdown').length )
+                                        $el.toggleClass('active');
+
+                                    // Stop the event from propagating further so we can bind
+                                    // a one-time event to the body (and ensure that a click
+                                    // on the dropdown won't trigger said event).
+                                    event.stopPropagation();
+
+                                    if ( $el.is(':visible') ) {
+                                        $(document.body).one( 'click', function() {
+                                            $el.removeClass('active');
+                                        });
+                                    }
+                                }
+                            }
+                        ]
+                    }).render(),
 
                     'add-to-gallery': {
@@ -737 +803 @@
                 this.toolbarView.get('create-new-gallery').$el.toggle( showGallery );
                 insert = this.toolbarView.get('insert-into-post');
-                insert.model.set( 'style', showGallery ? '' : 'primary' );
+                _.each( insert.buttons, function( button ) {
+                    button.model.set( 'style', showGallery ? '' : 'primary' );
+                });
             }, this );
 
@@ -1035 +1103 @@
         }
     });
+
+
+    /**
+     * wp.media.view.AttachmentDisplaySettings
+     */
+    media.view.AttachmentDisplaySettings = Backbone.View.extend({
+        tagName:   'div',
+        className: 'attachment-display-settings',
+        template:  media.template('attachment-display-settings'),
+
+        events: {
+            'click button': 'updateHandler'
+        },
+
+        settings:   {
+            align: {
+                accepts:  ['left','center','right','none'],
+                name:     'align',
+                fallback: 'none'
+            },
+            link: {
+                accepts:  ['post','file','none'],
+                name:     'urlbutton',
+                fallback: 'post'
+            },
+            size: {
+                // @todo: Dynamically generate these.
+                accepts:  ['thumbnail','medium','large','full'],
+                name:     'imgsize',
+                fallback: 'medium'
+            }
+        },
+
+        initialize: function() {
+            var settings = this.settings;
+
+            this.model = new Backbone.Model();
+
+            _.each( settings, function( setting, key ) {
+                this.model.set( key, getUserSetting( setting.name, setting.fallback ) );
+            }, this );
+
+            this.model.validate = function( attrs ) {
+                return _.any( attrs, function( value, key ) {
+                    return ! settings[ key ] || ! _.contains( settings[ key ].accepts, value );
+                });
+            };
+
+            this.model.on( 'change', function( model, options ) {
+                if ( ! options.changes )
+                    return;
+
+                _.each( _.keys( options.changes ), function( key ) {
+                    if ( settings[ key ] )
+                        setUserSetting( settings[ key ].name, model.get( key ) );
+                });
+            }, this );
+
+            this.model.on( 'change', this.updateChanges, this );
+        },
+
+        render: function() {
+            this.$el.html( this.template( this.model.toJSON() ) );
+
+            // Select the correct values.
+            _( this.model.attributes ).chain().keys().each( this.update, this );
+            return this;
+        },
+
+        update: function( key ) {
+            var buttons = this.$('[data-setting="' + key + '"] button').removeClass('active');
+            buttons.filter( '[value="' + this.model.get( key ) + '"]' ).addClass('active');
+        },
+
+        updateHandler: function( event ) {
+            var group = $( event.target ).closest('.button-group');
+
+            event.preventDefault();
+
+            if ( group.length )
+                this.model.set( group.data('setting'), event.target.value );
+        },
+
+        updateChanges: function( model, options ) {
+            if ( options.changes )
+                _( options.changes ).chain().keys().each( this.update, this );
+        }
+    });
 }(jQuery));

trunk/wp-includes/media.php

@@ -1378 +1378 @@
     </script>
 
+    <script type="text/html" id="tmpl-attachment-display-settings">
+        <h4><?php _e('Alignment'); ?></h4>
+        <div class="alignment button-group button-large" data-setting="align">
+            <button class="button" value="left">
+                <?php esc_attr_e('Left'); ?>
+            </button>
+            <button class="button" value="center">
+                <?php esc_attr_e('Center'); ?>
+            </button>
+            <button class="button" value="right">
+                <?php esc_attr_e('Right'); ?>
+            </button>
+            <button class="button" value="none">
+                <?php esc_attr_e('None'); ?>
+            </button>
+        </div>
+
+        <h4><?php _e('Link To'); ?></h4>
+        <div class="link-to button-group button-large" data-setting="link">
+            <button class="button" value="post">
+                <?php esc_attr_e('Attachment Page'); ?>
+            </button>
+            <button class="button" value="file">
+                <?php esc_attr_e('Media File'); ?>
+            </button>
+            <button class="button" value="none">
+                <?php esc_attr_e('None'); ?>
+            </button>
+        </div>
+    </script>
+
     <script type="text/html" id="tmpl-editor-attachment">
         <div class="editor-attachment-preview">