WordPress.org

Make WordPress Core

Changeset 21769


Ignore:
Timestamp:
09/06/2012 07:46:15 AM (8 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:
3 edited

Legend:

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

    r21683 r21769  
    5555
    5656/**
     57 * Toolbar
     58 */
     59.media-toolbar {
     60    position: relative;
     61    z-index: 50;
     62    height: 60px;
     63    border-bottom: 1px solid #dfdfdf;
     64}
     65
     66.media-toolbar-primary {
     67    float: right;
     68}
     69
     70.media-toolbar-secondary {
     71    float: left;
     72}
     73
     74.media-toolbar .media-button {
     75    float: left;
     76    margin-top: 19px;
     77}
     78
     79.media-toolbar-primary .media-button {
     80    margin-left: 10px;
     81}
     82
     83.media-toolbar-secondary .media-button {
     84    margin-right: 10px;
     85}
     86
     87/**
    5788 * Workspace
    5889 */
     
    99130    right: 0;
    100131    border-color: #83B4D8;
     132    box-shadow: 0 0 0 10px #fff;
    101133}
    102134
     
    107139    right: 0;
    108140    bottom: 0;
     141    margin: 0 20px;
     142}
     143
     144.media-workspace .attachments,
     145.media-workspace .media-toolbar {
     146    -webkit-transition-property: left, right, top, bottom, margin;
     147    -moz-transition-property:    left, right, top, bottom, margin;
     148    -ms-transition-property:     left, right, top, bottom, margin;
     149    -o-transition-property:      left, right, top, bottom, margin;
     150    transition-property:         left, right, top, bottom, margin;
     151
     152    -webkit-transition-duration: 0.2s;
     153    -moz-transition-duration:    0.2s;
     154    -ms-transition-duration:     0.2s;
     155    -o-transition-duration:      0.2s;
     156    transition-duration:         0.2s;
     157}
     158
     159.media-workspace .attachments {
     160    position: absolute;
     161    top: 0;
     162    left: 0;
     163    right: 0;
     164    bottom: 0;
     165    height: auto;
     166    width: auto;
     167}
     168
     169.media-workspace.with-toolbar .attachments {
     170    top: 61px;
     171}
     172
     173.media-workspace .media-toolbar {
     174    margin-top: -61px;
     175}
     176
     177.media-workspace.with-toolbar .media-toolbar {
     178    margin-top: 0;
     179}
     180
     181.media-workspace .media-toolbar .add-to-gallery,
     182.media-workspace .media-toolbar .create-new-gallery {
     183    display: none;
    109184}
    110185
     
    113188 */
    114189.attachments {
     190    position: relative;
    115191    width: 100%;
    116192    height: 100%;
     
    129205    float: left;
    130206    margin: 0;
    131     padding: 0 0 0 10px;
     207    padding: 0;
    132208    line-height: 50px;
    133209    font-size: 18px;
     
    136212.attachments-header input {
    137213    float: right;
    138     margin-top: 10px;
    139     margin-right: 10px;
     214    margin-top: 12px;
     215    line-height: 18px;
    140216}
    141217
     
    147223    bottom: 0;
    148224    overflow: auto;
    149     margin: 0 10px 20px;
     225    margin: 0 -10px 20px;
    150226}
    151227
     
    170246.attachment.selected {
    171247    border-color: #21759b;
     248}
     249
     250.attachment.selected:after {
     251    content: '\2713';
     252    display: block;
     253    height: 24px;
     254    width: 24px;
     255    position: absolute;
     256    top: 0;
     257    left: 0;
     258    line-height: 24px;
     259    font-size: 18px;
     260    text-align: center;
     261    color: #fff;
     262    background: #21759b;
    172263}
    173264
     
    277368    display: block;
    278369}
     370
     371/**
     372 * Selection Preview
     373 */
     374
     375.selection-preview {
     376    position: relative;
     377    height: 60px;
     378    overflow: hidden;
     379}
     380
     381.selected-img {
     382    float: left;
     383    position: relative;
     384    margin-right: 14px;
     385}
     386
     387.selection-preview img {
     388    max-width: 40px;
     389    max-height: 40px;
     390    float: left;
     391    margin-top: 6px;
     392    margin-left: 1px;
     393    border: 2px solid white;
     394    box-shadow:
     395        0 0 0 1px #ccc,
     396        3px 3px 0 0 #fff,
     397        3px 3px 0 1px #ccc,
     398        6px 6px 0 0 #fff,
     399        6px 6px 0 1px #ccc;
     400}
     401
     402.selection-preview .selected-count-1 img {
     403    margin-top: 8px;
     404    box-shadow: 0 0 0 1px #ccc;
     405}
     406
     407.selection-preview .selected-count-2 img {
     408    margin-top: 7px;
     409    box-shadow:
     410        0 0 0 1px #ccc,
     411        3px 3px 0 0 #fff,
     412        3px 3px 0 1px #ccc;
     413}
     414
     415.selection-preview .count {
     416    position: absolute;
     417    bottom: 0;
     418    right: 0;
     419    height: 16px;
     420    min-width: 8px;
     421    padding: 0 4px;
     422    font-size: 12px;
     423    text-align: center;
     424    font-weight: bold;
     425    color: #999;
     426    background: #fff;
     427    box-shadow: -1px -1px 2px -1px rgba( 0, 0, 0, 0.2 );
     428}
     429
     430.selection-preview .clear-selection {
     431    float: left;
     432    line-height: 60px;
     433}
  • trunk/wp-includes/js/media-views.js

    r21683 r21769  
    140140
    141141    /**
     142     * wp.media.view.Toolbar
     143     */
     144    media.view.Toolbar = Backbone.View.extend({
     145        tagName:   'div',
     146        className: 'media-toolbar',
     147
     148        initialize: function() {
     149            this._views    = {};
     150            this.$primary   = $('<div class="media-toolbar-primary" />').prependTo( this.$el );
     151            this.$secondary = $('<div class="media-toolbar-secondary" />').prependTo( this.$el );
     152
     153            if ( this.options.items ) {
     154                _.each( this.options.items, function( view, id ) {
     155                    this.add( id, view, { silent: true } );
     156                }, this );
     157                this.render();
     158            }
     159        },
     160
     161        render: function() {
     162            var views = _.chain( this._views ).sortBy( function( view ) {
     163                return view.options.priority || 10;
     164            }).groupBy( function( view ) {
     165                return ( view.options.priority || 10 ) > 0 ? 'primary' : 'secondary';
     166            }).value();
     167
     168            // Make sure to detach the elements we want to reuse.
     169            // Otherwise, `jQuery.html()` will unbind their events.
     170            $( _.pluck( this._views, 'el' ) ).detach();
     171            this.$primary.html( _.pluck( views.primary, 'el' ) );
     172            this.$secondary.html( _.pluck( views.secondary, 'el' ) );
     173
     174            return this;
     175        },
     176
     177        add: function( id, view, options ) {
     178            if ( ! ( view instanceof Backbone.View ) ) {
     179                view.classes = [ id ].concat( view.classes || [] );
     180                view = new media.view.Button( view ).render();
     181            }
     182
     183            this._views[ id ] = view;
     184            if ( ! options || ! options.silent )
     185                this.render();
     186            return this;
     187        },
     188
     189        remove: function( id, options ) {
     190            delete this._views[ id ];
     191            if ( ! options || ! options.silent )
     192                this.render();
     193            return this;
     194        }
     195    });
     196
     197
     198    /**
     199     * wp.media.view.Button
     200     */
     201    media.view.Button = Backbone.View.extend({
     202        tagName:    'a',
     203        className:  'media-button',
     204        attributes: { href: '#' },
     205
     206        events: {
     207            'click': 'click'
     208        },
     209
     210        initialize: function() {
     211            _.defaults( this.options, {
     212                style:   'secondary',
     213                text:    '',
     214                classes: []
     215            });
     216        },
     217
     218        render: function() {
     219            var classes = [ this.className ];
     220
     221            if ( this.options.style )
     222                classes.push( 'button-' + this.options.style );
     223
     224            classes = classes.concat( this.options.classes );
     225            this.el.className = classes.join(' ');
     226            this.$el.text( this.options.text );
     227            return this;
     228        },
     229
     230        click: function( event ) {
     231            event.preventDefault();
     232            if ( this.options.click )
     233                this.options.click.apply( this, arguments );
     234        }
     235    });
     236
     237    /**
    142238     * wp.media.view.Workspace
    143239     */
     
    159255                uploader:  {}
    160256            });
     257
     258            this.$content = $('<div class="existing-attachments" />');
     259
     260            // If this supports multiple attachments, initialize the sample toolbar view.
     261            if ( this.controller.get('multiple') )
     262                this.initToolbarView();
    161263
    162264            this.attachmentsView = new media.view.Attachments({
     
    168270            });
    169271
    170             this.$content = $('<div class="existing-attachments" />');
    171272            this.$content.append( this.attachmentsView.$el );
    172273
     
    243344                }
    244345            }, this.options.uploader ) );
     346        },
     347
     348        // Initializes the toolbar view. Currently uses defaults set for
     349        // inserting media into a post. This should be pulled out into the
     350        // appropriate workflow when the time comes, but is currently here
     351        // to test multiple selections.
     352        initToolbarView: function() {
     353            this.toolbarView = new media.view.Toolbar({
     354                items: {
     355                    'selection-preview': new media.view.SelectionPreview({
     356                        controller: this.controller,
     357                        collection: this.controller.selection,
     358                        priority: -40
     359                    }),
     360                    'insert-into-post': {
     361                        style: 'primary',
     362                        text:  'Insert into post',
     363                        priority: 40
     364                    },
     365                    'create-new-gallery': {
     366                        style: 'primary',
     367                        text:  'Create a new gallery',
     368                        priority: 30
     369                    },
     370                    'add-to-gallery': {
     371                        text:  'Add to gallery',
     372                        priority: 20
     373                    }
     374                }
     375            });
     376
     377            this.controller.selection.on( 'add remove', function() {
     378                this.$el.toggleClass( 'with-toolbar', !! this.controller.selection.length );
     379            }, this );
     380
     381            this.$content.append( this.toolbarView.$el );
    245382        }
    246383    });
     
    427564        }
    428565    });
     566
     567    /**
     568     * wp.media.view.SelectionPreview
     569     */
     570    media.view.SelectionPreview = Backbone.View.extend({
     571        tagName:   'div',
     572        className: 'selection-preview',
     573        template:  media.template('media-selection-preview'),
     574
     575        events: {
     576            'click .clear-selection': 'clear'
     577        },
     578
     579        initialize: function() {
     580            this.controller = this.options.controller;
     581            this.collection.on( 'add change:url remove', this.render, this );
     582            this.render();
     583        },
     584
     585        render: function() {
     586            var options = {},
     587                first, sizes, amount;
     588
     589            // If nothing is selected, display nothing.
     590            if ( ! this.collection.length ) {
     591                this.$el.empty();
     592                return this;
     593            }
     594
     595            options.count = this.collection.length;
     596            first = this.collection.first();
     597            sizes = first.get('sizes');
     598            options.thumbnail = ( sizes && sizes.thumbnail ) ? sizes.thumbnail.url : first.get('url');
     599
     600            this.$el.html( this.template( options ) );
     601            return this;
     602        },
     603
     604        clear: function( event ) {
     605            event.preventDefault();
     606            this.collection.clear();
     607        }
     608    });
    429609}(jQuery));
  • trunk/wp-includes/media.php

    r21735 r21769  
    16501650        <div class="describe"></div>
    16511651    </script>
     1652
     1653    <script type="text/html" id="tmpl-media-selection-preview">
     1654        <div class="selected-img selected-count-<%- count %>">
     1655            <% if ( thumbnail ) { %>
     1656                <img src="<%- thumbnail %>" />
     1657            <% } %>
     1658
     1659            <span class="count"><%- count %></span>
     1660        </div>
     1661        <a class="clear-selection" href="#"><?php _e('Clear selection'); ?></a>
     1662    </script>
    16521663    <?php
    16531664}
Note: See TracChangeset for help on using the changeset viewer.