Changeset 21769

Timestamp:

09/06/2012 07:46:15 AM (11 years ago)

Author:

koopersmith

Message:

Adds UI for media modal toolbars, buttons, and the selected item(s) status.

Currently uses actions for inserting media into a post as an example (hence the raw text). To test a workflow that supports multiple selection, run the following in your browser's JavaScript console:

wp.media({ multiple: true });

see #21390, #21808.

Location:

trunk/wp-includes

Files:

• css/media-views.css (modified) (9 diffs)
• js/media-views.js (modified) (5 diffs)
• media.php (modified) (1 diff)

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

@@ -55 +55 @@
 
 /**
+ * Toolbar
+ */
+.media-toolbar {
+    position: relative;
+    z-index: 50;
+    height: 60px;
+    border-bottom: 1px solid #dfdfdf;
+}
+
+.media-toolbar-primary {
+    float: right;
+}
+
+.media-toolbar-secondary {
+    float: left;
+}
+
+.media-toolbar .media-button {
+    float: left;
+    margin-top: 19px;
+}
+
+.media-toolbar-primary .media-button {
+    margin-left: 10px;
+}
+
+.media-toolbar-secondary .media-button {
+    margin-right: 10px;
+}
+
+/**
  * Workspace
  */
@@ -99 +130 @@
     right: 0;
     border-color: #83B4D8;
+    box-shadow: 0 0 0 10px #fff;
 }
 
@@ -107 +139 @@
     right: 0;
     bottom: 0;
+    margin: 0 20px;
+}
+
+.media-workspace .attachments,
+.media-workspace .media-toolbar {
+    -webkit-transition-property: left, right, top, bottom, margin;
+    -moz-transition-property:    left, right, top, bottom, margin;
+    -ms-transition-property:     left, right, top, bottom, margin;
+    -o-transition-property:      left, right, top, bottom, margin;
+    transition-property:         left, right, top, bottom, margin;
+
+    -webkit-transition-duration: 0.2s;
+    -moz-transition-duration:    0.2s;
+    -ms-transition-duration:     0.2s;
+    -o-transition-duration:      0.2s;
+    transition-duration:         0.2s;
+}
+
+.media-workspace .attachments {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: auto;
+    width: auto;
+}
+
+.media-workspace.with-toolbar .attachments {
+    top: 61px;
+}
+
+.media-workspace .media-toolbar {
+    margin-top: -61px;
+}
+
+.media-workspace.with-toolbar .media-toolbar {
+    margin-top: 0;
+}
+
+.media-workspace .media-toolbar .add-to-gallery,
+.media-workspace .media-toolbar .create-new-gallery {
+    display: none;
 }
 
@@ -113 +188 @@
  */
 .attachments {
+    position: relative;
     width: 100%;
     height: 100%;
@@ -129 +205 @@
     float: left;
     margin: 0;
-    padding: 0 0 0 10px;
+    padding: 0;
     line-height: 50px;
     font-size: 18px;
@@ -136 +212 @@
 .attachments-header input {
     float: right;
-    margin-top: 10px;
-    margin-right: 10px;
+    margin-top: 12px;
+    line-height: 18px;
 }
 
@@ -147 +223 @@
     bottom: 0;
     overflow: auto;
-    margin: 0 10px 20px;
+    margin: 0 -10px 20px;
 }
 
@@ -170 +246 @@
 .attachment.selected {
     border-color: #21759b;
+}
+
+.attachment.selected:after {
+    content: '\2713';
+    display: block;
+    height: 24px;
+    width: 24px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    line-height: 24px;
+    font-size: 18px;
+    text-align: center;
+    color: #fff;
+    background: #21759b;
 }
 
@@ -277 +368 @@
     display: block;
 }
+
+/**
+ * Selection Preview
+ */
+
+.selection-preview {
+    position: relative;
+    height: 60px;
+    overflow: hidden;
+}
+
+.selected-img {
+    float: left;
+    position: relative;
+    margin-right: 14px;
+}
+
+.selection-preview img {
+    max-width: 40px;
+    max-height: 40px;
+    float: left;
+    margin-top: 6px;
+    margin-left: 1px;
+    border: 2px solid white;
+    box-shadow:
+        0 0 0 1px #ccc,
+        3px 3px 0 0 #fff,
+        3px 3px 0 1px #ccc,
+        6px 6px 0 0 #fff,
+        6px 6px 0 1px #ccc;
+}
+
+.selection-preview .selected-count-1 img {
+    margin-top: 8px;
+    box-shadow: 0 0 0 1px #ccc;
+}
+
+.selection-preview .selected-count-2 img {
+    margin-top: 7px;
+    box-shadow:
+        0 0 0 1px #ccc,
+        3px 3px 0 0 #fff,
+        3px 3px 0 1px #ccc;
+}
+
+.selection-preview .count {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    height: 16px;
+    min-width: 8px;
+    padding: 0 4px;
+    font-size: 12px;
+    text-align: center;
+    font-weight: bold;
+    color: #999;
+    background: #fff;
+    box-shadow: -1px -1px 2px -1px rgba( 0, 0, 0, 0.2 );
+}
+
+.selection-preview .clear-selection {
+    float: left;
+    line-height: 60px;
+}

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

@@ -140 +140 @@
 
     /**
+     * wp.media.view.Toolbar
+     */
+    media.view.Toolbar = Backbone.View.extend({
+        tagName:   'div',
+        className: 'media-toolbar',
+
+        initialize: function() {
+            this._views    = {};
+            this.$primary   = $('<div class="media-toolbar-primary" />').prependTo( this.$el );
+            this.$secondary = $('<div class="media-toolbar-secondary" />').prependTo( this.$el );
+
+            if ( this.options.items ) {
+                _.each( this.options.items, function( view, id ) {
+                    this.add( id, view, { silent: true } );
+                }, this );
+                this.render();
+            }
+        },
+
+        render: function() {
+            var views = _.chain( this._views ).sortBy( function( view ) {
+                return view.options.priority || 10;
+            }).groupBy( function( view ) {
+                return ( view.options.priority || 10 ) > 0 ? 'primary' : 'secondary';
+            }).value();
+
+            // Make sure to detach the elements we want to reuse.
+            // Otherwise, `jQuery.html()` will unbind their events.
+            $( _.pluck( this._views, 'el' ) ).detach();
+            this.$primary.html( _.pluck( views.primary, 'el' ) );
+            this.$secondary.html( _.pluck( views.secondary, 'el' ) );
+
+            return this;
+        },
+
+        add: function( id, view, options ) {
+            if ( ! ( view instanceof Backbone.View ) ) {
+                view.classes = [ id ].concat( view.classes || [] );
+                view = new media.view.Button( view ).render();
+            }
+
+            this._views[ id ] = view;
+            if ( ! options || ! options.silent )
+                this.render();
+            return this;
+        },
+
+        remove: function( id, options ) {
+            delete this._views[ id ];
+            if ( ! options || ! options.silent )
+                this.render();
+            return this;
+        }
+    });
+
+
+    /**
+     * wp.media.view.Button
+     */
+    media.view.Button = Backbone.View.extend({
+        tagName:    'a',
+        className:  'media-button',
+        attributes: { href: '#' },
+
+        events: {
+            'click': 'click'
+        },
+
+        initialize: function() {
+            _.defaults( this.options, {
+                style:   'secondary',
+                text:    '',
+                classes: []
+            });
+        },
+
+        render: function() {
+            var classes = [ this.className ];
+
+            if ( this.options.style )
+                classes.push( 'button-' + this.options.style );
+
+            classes = classes.concat( this.options.classes );
+            this.el.className = classes.join(' ');
+            this.$el.text( this.options.text );
+            return this;
+        },
+
+        click: function( event ) {
+            event.preventDefault();
+            if ( this.options.click )
+                this.options.click.apply( this, arguments );
+        }
+    });
+
+    /**
      * wp.media.view.Workspace
      */
@@ -159 +255 @@
                 uploader:  {}
             });
+
+            this.$content = $('<div class="existing-attachments" />');
+
+            // If this supports multiple attachments, initialize the sample toolbar view.
+            if ( this.controller.get('multiple') )
+                this.initToolbarView();
 
             this.attachmentsView = new media.view.Attachments({
@@ -168 +270 @@
             });
 
-            this.$content = $('<div class="existing-attachments" />');
             this.$content.append( this.attachmentsView.$el );
 
@@ -243 +344 @@
                 }
             }, this.options.uploader ) );
+        },
+
+        // Initializes the toolbar view. Currently uses defaults set for
+        // inserting media into a post. This should be pulled out into the
+        // appropriate workflow when the time comes, but is currently here
+        // to test multiple selections.
+        initToolbarView: function() {
+            this.toolbarView = new media.view.Toolbar({
+                items: {
+                    'selection-preview': new media.view.SelectionPreview({
+                        controller: this.controller,
+                        collection: this.controller.selection,
+                        priority: -40
+                    }),
+                    'insert-into-post': {
+                        style: 'primary',
+                        text:  'Insert into post',
+                        priority: 40
+                    },
+                    'create-new-gallery': {
+                        style: 'primary',
+                        text:  'Create a new gallery',
+                        priority: 30
+                    },
+                    'add-to-gallery': {
+                        text:  'Add to gallery',
+                        priority: 20
+                    }
+                }
+            });
+
+            this.controller.selection.on( 'add remove', function() {
+                this.$el.toggleClass( 'with-toolbar', !! this.controller.selection.length );
+            }, this );
+
+            this.$content.append( this.toolbarView.$el );
         }
     });
@@ -427 +564 @@
         }
     });
+
+    /**
+     * wp.media.view.SelectionPreview
+     */
+    media.view.SelectionPreview = Backbone.View.extend({
+        tagName:   'div',
+        className: 'selection-preview',
+        template:  media.template('media-selection-preview'),
+
+        events: {
+            'click .clear-selection': 'clear'
+        },
+
+        initialize: function() {
+            this.controller = this.options.controller;
+            this.collection.on( 'add change:url remove', this.render, this );
+            this.render();
+        },
+
+        render: function() {
+            var options = {},
+                first, sizes, amount;
+
+            // If nothing is selected, display nothing.
+            if ( ! this.collection.length ) {
+                this.$el.empty();
+                return this;
+            }
+
+            options.count = this.collection.length;
+            first = this.collection.first();
+            sizes = first.get('sizes');
+            options.thumbnail = ( sizes && sizes.thumbnail ) ? sizes.thumbnail.url : first.get('url');
+
+            this.$el.html( this.template( options ) );
+            return this;
+        },
+
+        clear: function( event ) {
+            event.preventDefault();
+            this.collection.clear();
+        }
+    });
 }(jQuery));

trunk/wp-includes/media.php

@@ -1650 +1650 @@
         <div class="describe"></div>
     </script>
+
+    <script type="text/html" id="tmpl-media-selection-preview">
+        <div class="selected-img selected-count-<%- count %>">
+            <% if ( thumbnail ) { %>
+                <img src="<%- thumbnail %>" />
+            <% } %>
+
+            <span class="count"><%- count %></span>
+        </div>
+        <a class="clear-selection" href="#"><?php _e('Clear selection'); ?></a>
+    </script>
     <?php
 }