WordPress.org
Get WordPress

Make WordPress Core

Ticket #28842: 28842.2.diff

File 28842.2.diff, 14.4 KB (added by ericlewis, 12 years ago)

  • src/wp-includes/css/media-views.css 

    diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index 0f57613..e6583f0 100644
    a b  
    889889        box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba( 0, 0, 0, 0.4 );
    890890}
    891891
     892.media-grid-view .attachment .check {
     893        display: block;
     894}
     895
    892896.attachment .check div {
    893897        background-position: -1px 0;
    894898        height: 15px;
    … …  
    913917}
    914918
    915919.attachment.details .check,
    916 .media-grid-view .attachment .check {
     920.media-grid-view .attachment.selected .check {
    917921        background-color: #1e8cbe;
    918922        -webkit-box-shadow: 0 0 0 1px #fff,
    919923                                0 0 0 2px #1e8cbe;
    … …  
    921925                                0 0 0 2px #1e8cbe;
    922926}
    923927
    924 .attachment.details .check div,
    925928.media-grid-view .attachment .check div {
     929        background-position: 21px 0;
     930}
     931.attachment.details .check div,
     932.media-grid-view .attachment.selected .check div {
    926933        background-position: -21px 0;
    927934}
    928935
    929936.attachment.details .check:hover div,
    930 .media-grid-view .attachment .check:hover div {
     937.media-grid-view .attachment.selected .check:hover div {
    931938        background-position: -60px 0;
    932939}
    933940
    … …  
    10511058        display: inline-block;
    10521059}
    10531060
    1054 .attachment:hover .inline-toolbar {
     1061.attachment-preview:hover ~ .inline-toolbar {
    10551062        display: block;
    10561063}
    10571064
    … … video#inline-media-node { 
    25812588
    25822589/* Regions we don't use at all */
    25832590.media-grid-view .media-frame-title,
    2584 .media-grid-view .media-frame-toolbar,
    25852591.media-grid-view .media-frame-menu {
    25862592        display: none;
    25872593}
    … … video#inline-media-node { 
    26012607        margin-top: 0;
    26022608}
    26032609
     2610.media-grid-view .media-toolbar {
     2611        background: #fff;
     2612}
    26042613/**
    26052614 * Copied styles from the Add theme toolbar.
    26062615 *
    26072616 * This should be OOCSS'd so both use a shared selector.
    26082617 */
    2609 .media-grid-view .media-toolbar {
    2610         background: #fff;
     2618.media-grid-view .attachments-browser .media-toolbar {
    26112619        -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
    26122620        box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
    26132621        -webkit-box-sizing: border-box;
    … … video#inline-media-node { 
    26242632        border: none;
    26252633}
    26262634
     2635
     2636.media-grid-view .media-frame-toolbar {
     2637        border-top: 1px solid #ddd;
     2638        bottom: 0;
     2639        position: fixed;
     2640}
     2641
     2642.media-grid-view.hide-menu .media-frame-toolbar {
     2643        left: 160px;
     2644}
     2645
     2646.folded .media-grid-view .media-frame-toolbar {
     2647        left: 36px;
     2648}
     2649
    26272650.media-grid-view input[type="search"] {
    26282651        margin: 1px;
    26292652        padding: 3px 5px;
    … … video#inline-media-node { 
    26902713        font-weight: 300;
    26912714}
    26922715
    2693 .media-frame.mode-bulk-edit .attachment:hover .inline-toolbar {
     2716.media-frame.mode-bulk-edit .attachment-preview:hover ~ .inline-toolbar {
    26942717        display: none;
    26952718}
    26962719
    … … video#inline-media-node { 
    28652888        margin-top: 3px;
    28662889}
    28672890
     2891/**
     2892 * Media queries for media grid.
     2893 */
     2894
    28682895@media only screen and (max-width: 1120px) {
    2869         .media-grid-view .media-toolbar-primary,
    2870         .media-grid-view .media-toolbar-secondary {
     2896        .media-grid-view .attachments-browser .media-toolbar-primary,
     2897        .media-grid-view .attachments-browser .media-toolbar-secondary {
    28712898                float: none;
    28722899        }
    28732900
    … … video#inline-media-node { 
    28792906        }
    28802907}
    28812908
     2909@media only screen and (max-width: 900px) {
     2910        .auto-fold .media-grid-view .media-frame-toolbar {
     2911                left: 36px;
     2912        }
     2913}
     2914
     2915@media screen and (max-width: 782px) {
     2916        .auto-fold .media-grid-view .media-frame-toolbar {
     2917                left: 0;
     2918        }
     2919}
     2920 No newline at end of file

  • src/wp-includes/js/media-grid.js 

    diff --git a/src/wp-includes/js/media-grid.js b/src/wp-includes/js/media-grid.js
index 3521bbc..5262be2 100644
    a b  
    7070        });
    7171
    7272        /**
     73         * Library state with bulk selection.
     74         *
     75         * @constructor
     76         * @augments wp.media.controller.Library
     77         * @augments wp.media.controller.State
     78         * @augments Backbone.Model
     79         */
     80        media.controller.LibraryWithBulkSelect = media.controller.Library.extend({
     81                activate: function() {
     82                        wp.media.controller.Library.prototype.activate.apply( this, arguments );
     83                        this.get( 'selection' ).on( 'add remove reset', this.maybeBulkSelect, this );
     84                },
     85
     86                maybeBulkSelect: function() {
     87                        if ( this.get( 'selection' ).length ) {
     88                                this.frame.toolbar.mode( 'bulk-select' );
     89                        } else {
     90                                this.frame.toolbar.mode( 'hide' );
     91                        }
     92                }
     93        });
     94
     95        /**
    7396         * wp.media.view.MediaFrame.Manage
    7497         *
    7598         * A generic management frame workflow.
    … …  
    191214                },
    192215
    193216                createStates: function() {
    194                         var options = this.options,
    195                                 libraryState;
     217                        var options = this.options;
    196218
    197219                        if ( this.options.states ) {
    198220                                return;
    199221                        }
    200222
    201                         libraryState = new media.controller.Library({
    202                                 library:    media.query( options.library ),
    203                                 multiple:   options.multiple,
    204                                 title:      options.title,
    205                                 priority:   20,
    206                                 toolbar:    false,
    207                                 router:     false,
    208                                 content:    'browse',
    209                                 filterable: 'mime-types'
    210                         });
    211 
    212223                        // Add the default states.
    213224                        this.states.add([
    214                                 libraryState
     225                                new media.controller.LibraryWithBulkSelect({
     226                                        library:    media.query( options.library ),
     227                                        multiple:   options.multiple,
     228                                        title:      options.title,
     229                                        priority:   20,
     230
     231                                        toolbar:    'hide',
     232                                        router:     false,
     233                                        content:    'browse',
     234
     235                                        filterable: 'mime-types'
     236                                })
    215237                        ]);
    216238                },
    217239
    … …  
    219241                        this.on( 'content:create:browse', this.browseContent, this );
    220242                        this.on( 'content:render:edit-image', this.editImageContent, this );
    221243
     244                        this.on( 'toolbar:create:bulk-select', this.createToolbar, this );
     245                        this.on( 'toolbar:render:bulk-select', this.toolbarRenderBulkSelect, this );
     246                        this.on( 'toolbar:render:hide', this.toolbarRenderHide, this );
     247
    222248                        // Handle a frame-level event for editing an attachment.
    223249                        this.on( 'edit:attachment', this.editAttachment, this );
    224250                },
    … …  
    261287                                filters:    state.get('filterable'),
    262288                                display:    state.get('displaySettings'),
    263289                                dragInfo:   state.get('dragInfo'),
    264                                 bulkEdit:   true,
    265290                                sidebar:    false,
    266291
    267292                                suggestedWidth:  state.get('suggestedWidth'),
    … …  
    280305                        // after creating the wrapper view, load the actual editor via an ajax call
    281306                        view.loadEditor();
    282307
     308                },
     309
     310                setToolbarState: function() {
     311                        debugger;
     312                },
     313
     314                toolbarRenderBulkSelect: function( view ) {
     315                        this.$el.removeClass( 'hide-toolbar' );
     316
     317                        var controller = this;
     318
     319                        view.set( 'bulkDelete', {
     320                                style:    'primary',
     321                                priority: 80,
     322                                text:     l10n.bulkDelete,
     323                                requires: { selection: true },
     324
     325                                /**
     326                                 * @fires wp.media.controller.State#insert
     327                                 */
     328                                click: function() {
     329                                        var state = controller.state(),
     330                                                selection = state.get('selection');
     331
     332                                        while ( selection.length > 0 ) {
     333                                                selection.at(0).destroy();
     334                                        }
     335                                }
     336                        });
     337                },
     338
     339                toolbarRenderHide: function() {
     340                        this.$el.addClass( 'hide-toolbar' );
    283341                }
    284342        });
    285343
    … …  
    638696                }
    639697        });
    640698
    641         media.view.BulkSelectionToggleButton = media.view.Button.extend({
    642                 initialize: function() {
    643                         media.view.Button.prototype.initialize.apply( this, arguments );
    644                         this.listenTo( this.controller, 'bulk-edit:activate bulk-edit:deactivate', _.bind( this.toggleBulkEditHandler, this ) );
    645                 },
    646 
    647                 click: function() {
    648                         var bulkEditActive = this.controller.activeModes.where( { id: 'bulk-edit' } ).length;
    649                         media.view.Button.prototype.click.apply( this, arguments );
    650 
    651                         if ( bulkEditActive ) {
    652                                 this.controller.deactivateMode( 'bulk-edit' ).activateMode( 'edit' );
    653                         } else {
    654                                 this.controller.deactivateMode( 'edit' ).activateMode( 'bulk-edit' );
    655                         }
    656                 },
    657 
    658                 toggleBulkEditHandler: function() {
    659                         var bulkEditActive = this.controller.activeModes.where( { id: 'bulk-edit' } ).length;
    660                         if ( bulkEditActive ) {
    661                                 this.$el.addClass( 'button-primary' );
    662                         } else {
    663                                 this.$el.removeClass( 'button-primary' );
    664                                 this.controller.state().get('selection').reset();
    665                         }
    666                 }
    667         });
    668 
    669         media.view.BulkDeleteButton = media.view.Button.extend({
    670                 initialize: function() {
    671                         media.view.Button.prototype.initialize.apply( this, arguments );
    672                         this.$el.hide();
    673                         this.listenTo( this.controller, 'bulk-edit:activate bulk-edit:deactivate', _.bind( this.visibility, this ) );
    674                 },
    675 
    676                 click: function() {
    677                         media.view.Button.prototype.click.apply( this, arguments );
    678                         while (this.controller.state().get('selection').length > 0) {
    679                                 this.controller.state().get('selection').at(0).destroy();
    680                         }
    681                 },
    682 
    683                 visibility: function() {
    684                         var bulkEditActive = this.controller.activeModes.where( { id: 'bulk-edit' } ).length;
    685                         if ( bulkEditActive ) {
    686                                 this.$el.show();
    687                         } else {
    688                                 this.$el.hide();
    689                         }
    690                 }
    691         });
    692 
    693699}(jQuery, _, Backbone, wp));

  • src/wp-includes/js/media-views.js 

    diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js
index 0f3246e..10a8385 100644
    a b  
    46194619                        'change [data-setting] select':   'updateSetting',
    46204620                        'change [data-setting] textarea': 'updateSetting',
    46214621                        'click .close':                   'removeFromLibrary',
    4622                         'click .check':                   'removeFromSelection',
     4622                        'click .check':                   'checkClickHandler',
    46234623                        'click a':                        'preventDefault',
    46244624                        'keydown':                        'toggleSelectionHandler'
    46254625                },
    … …  
    48794879                                return;
    48804880                        }
    48814881
    4882                         // In bulk edit mode (in media grid), attachments don't open the "details"
    4883                         // pane, so a `details` class is unnecessary on the attachment view.
    4884                         if ( ! this.controller.isModeActive( 'bulk-edit' ) ) {
    4885                                 details = selection.single();
    4886                                 this.$el.toggleClass( 'details', details === this.model );
    4887                         }
     4882                        details = selection.single();
     4883                        this.$el.toggleClass( 'details', details === this.model );
    48884884                },
    48894885                /**
    48904886                 * @param {Object} event
    … …  
    50155011
    50165012                        this.collection.remove( this.model );
    50175013                },
     5014
    50185015                /**
    5019                  * @param {Object} event
     5016                 * Add the model if it isn't in the selection, if it is in the selection,
     5017                 * remove it.
     5018                 *
     5019                 * @param  {[type]} event [description]
     5020                 * @return {[type]}       [description]
    50205021                 */
    5021                 removeFromSelection: function( event ) {
     5022                checkClickHandler: function ( event ) {
    50225023                        var selection = this.options.selection;
    50235024                        if ( ! selection ) {
    50245025                                return;
    50255026                        }
    5026 
    5027                         // Stop propagation so the model isn't selected.
    50285027                        event.stopPropagation();
    5029 
    5030                         selection.remove( this.model );
     5028                        if ( selection.where( { id: this.model.get( 'id' ) } ).length ) {
     5029                                selection.remove( this.model );
     5030                        } else {
     5031                                selection.add( this.model );
     5032                        }
    50315033                }
    50325034        });
    50335035
    … …  
    56565658                                        controller: this.controller,
    56575659                                        priority: -90
    56585660                                }).render() );
    5659 
    5660                                 this.toolbar.set( 'bulkSelectionToggleButton', new media.view.BulkSelectionToggleButton({
    5661                                         text: 'Bulk Edit',
    5662                                         controller: this.controller,
    5663                                         priority: -70
    5664                                 }).render() );
    5665 
    5666                                 this.toolbar.set( 'BulkDeleteButton', new media.view.BulkDeleteButton({
    5667                                         text: 'Bulk Delete',
    5668                                         controller: this.controller,
    5669                                         priority: -69
    5670                                 }).render() );
    56715661                        }
    56725662
    56735663                        filters = this.options.filters;

  • src/wp-includes/media-template.php 

    diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
index 8764219..1ed1f1b 100644
    a b function wp_print_media_templates() { 
    386386        </script>
    387387
    388388        <script type="text/html" id="tmpl-attachment">
    389                 <# if ( _.contains( data.controller.options.mode, 'grid' ) ) { #>
    390                 <div class="inline-toolbar js--select-attachment">
    391                         <div class="dashicons dashicons-edit edit edit-media"></div>
    392                 </div>
    393                 <# } #>
    394389                <div class="attachment-preview js--select-attachment type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
    395390                        <# if ( data.uploading ) { #>
    396391                                <div class="media-progress-bar"><div></div></div>
    … … function wp_print_media_templates() { 
    413408                        <# if ( data.buttons.close ) { #>
    414409                                <a class="close media-modal-icon" href="#" title="<?php esc_attr_e('Remove'); ?>"></a>
    415410                        <# } #>
    416 
    417                         <# if ( data.buttons.check ) { #>
    418                                 <a class="check" href="#" title="<?php esc_attr_e('Deselect'); ?>" tabindex="-1"><div class="media-modal-icon"></div></a>
    419                         <# } #>
    420411                </div>
     412                <# if ( _.contains( data.controller.options.mode, 'grid' ) ) { #>
     413                <div class="inline-toolbar js--select-attachment">
     414                        <div class="dashicons dashicons-edit edit edit-media"></div>
     415                </div>
     416                <# } #>
     417                <# if ( data.buttons.check ) { #>
     418                        <a class="check" href="#" title="<?php esc_attr_e('Deselect'); ?>" tabindex="-1"><div class="media-modal-icon"></div></a>
     419                <# } #>
    421420                <#
    422421                var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';
    423422                if ( data.describe ) {

  • src/wp-includes/media.php 

    diff --git a/src/wp-includes/media.php b/src/wp-includes/media.php
index c327008..abe003e 100644
    a b function wp_enqueue_media( $args = array() ) { 
    28962896                'uploadImagesTitle' => __( 'Upload Images' ),
    28972897
    28982898                // Library
    2899                 'mediaLibraryTitle'  => __( 'Media Library' ),
    2900                 'insertMediaTitle'   => __( 'Insert Media' ),
    2901                 'createNewGallery'   => __( 'Create a new gallery' ),
    2902                 'createNewPlaylist'   => __( 'Create a new playlist' ),
    2903                 'createNewVideoPlaylist'   => __( 'Create a new video playlist' ),
    2904                 'returnToLibrary'    => __( '&#8592; Return to library' ),
    2905                 'allMediaItems'      => __( 'All media items' ),
    2906                 'allMediaTypes'      => __( 'All media types' ),
    2907                 'noItemsFound'       => __( 'No items found.' ),
    2908                 'insertIntoPost'     => $hier ? __( 'Insert into page' ) : __( 'Insert into post' ),
    2909                 'uploadedToThisPost' => $hier ? __( 'Uploaded to this page' ) : __( 'Uploaded to this post' ),
    2910                 'warnDelete' =>      __( "You are about to permanently delete this item.\n  'Cancel' to stop, 'OK' to delete." ),
     2899                'mediaLibraryTitle'      => __( 'Media Library' ),
     2900                'insertMediaTitle'       => __( 'Insert Media' ),
     2901                'createNewGallery'       => __( 'Create a new gallery' ),
     2902                'createNewPlaylist'      => __( 'Create a new playlist' ),
     2903                'createNewVideoPlaylist' => __( 'Create a new video playlist' ),
     2904                'returnToLibrary'        => __( '&#8592; Return to library' ),
     2905                'allMediaItems'          => __( 'All media items' ),
     2906                'allMediaTypes'          => __( 'All media types' ),
     2907                'noItemsFound'           => __( 'No items found.' ),
     2908                'insertIntoPost'         => $hier ? __( 'Insert into page' ) : __( 'Insert into post' ),
     2909                'uploadedToThisPost'     => $hier ? __( 'Uploaded to this page' ) : __( 'Uploaded to this post' ),
     2910                'warnDelete'             => __( "You are about to permanently delete this item.\n  'Cancel' to stop, 'OK' to delete." ),
     2911                'bulkDelete'             => __( "Bulk Delete" ),
    29112912
    29122913                // From URL
    29132914                'insertFromUrlTitle' => __( 'Insert from URL' ),