WordPress.org

Make WordPress Core

Changeset 22155


Ignore:
Timestamp:
10/10/2012 08:31:12 AM (8 years ago)
Author:
koopersmith
Message:

Gallery editing in the media modal.

The edit button on gallery MCE views will open a new instance of the media modal. Images can be removed, uploaded, and reordered. However, the "Add images from media library" button is not yet functional.

see #21390, #21809, #21815.

Location:
trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/js/media-upload.js

    r22120 r22155  
    9191// -----------------------------
    9292(function($){
    93     // Stores the editors' `wp.media.controller.Workflow` instaces.
     93    // Stores the editors' `wp.media.controller.Workflow` instances.
    9494    var workflows = {};
    9595
  • trunk/wp-includes/js/mce-view.js

    r22140 r22155  
    547547
    548548                shortcode: function( attachments ) {
    549                     var attrs = _.pick( attachments.props.toJSON(), 'include', 'exclude', 'orderby', 'order' ),
     549                    var props = attachments.props.toJSON(),
     550                        attrs = _.pick( props, 'include', 'exclude', 'orderby', 'order' ),
    550551                        shortcode;
    551552
     
    558559                    });
    559560
    560                     galleries[ shortcode.string() ] = attachments;
     561                    // Use a cloned version of the gallery.
     562                    galleries[ shortcode.string() ] = new wp.media.model.Attachments( attachments.models, {
     563                        props: props
     564                    });
     565
    561566                    return shortcode;
    562567                }
     
    575580
    576581            events: {
    577                 'click .close': 'remove'
     582                'click .close': 'remove',
     583                'click .edit':  'edit'
    578584            },
    579585
    580586            initialize: function() {
    581                 var view      = mceview.get('gallery'),
    582                     shortcode = this.options.shortcode;
    583 
    584                 this.attachments = view.gallery.attachments( shortcode, this.parent );
     587                this.update();
     588            },
     589
     590            update: function() {
     591                var view = mceview.get('gallery');
     592
     593                this.attachments = view.gallery.attachments( this.options.shortcode, this.parent );
    585594                this.attachments.more().done( _.bind( this.render, this ) );
    586595            },
     
    602611
    603612                this.$el.html( this.template( options ) );
     613            },
     614
     615            edit: function() {
     616                if ( ! wp.media.view || this.workflow )
     617                    return;
     618
     619                this.workflow = wp.media({
     620                    view:      'gallery',
     621                    selection: this.attachments.models,
     622                    title:     mceview.l10n.editGallery,
     623                    editing:   true,
     624                    multiple:  true
     625                });
     626
     627                // Create a single-use workflow. If the workflow is closed,
     628                // then detach it from the DOM and remove the reference.
     629                this.workflow.on( 'close', function() {
     630                    this.workflow.detach();
     631                    delete this.workflow;
     632                }, this );
     633
     634                // Update the `shortcode` and `attachments`.
     635                this.workflow.on( 'update:gallery', function( selection ) {
     636                    var view = mceview.get('gallery');
     637
     638                    this.options.shortcode = view.gallery.shortcode( selection );
     639                    this.update();
     640                }, this );
    604641            }
    605642        }
  • trunk/wp-includes/js/media-views.js

    r22143 r22155  
    120120        update: function( event ) {
    121121            this.close();
    122             this.trigger( 'update', this.selection );
    123             this.trigger( 'update:' + event, this.selection );
     122            this.trigger( 'update', this.selection, this );
     123            this.trigger( 'update:' + event, this.selection, this );
    124124            this.selection.clear();
    125125        },
     
    218218        attach: function() {
    219219            this.$el.appendTo( this.options.container );
     220            this.controller.trigger( 'attach', this.controller );
    220221        },
    221222
    222223        detach: function() {
    223224            this.$el.detach();
     225            this.controller.trigger( 'detach', this.controller );
    224226        },
    225227
    226228        open: function() {
    227229            this.$el.show();
     230            this.controller.trigger( 'open', this.controller );
    228231        },
    229232
    230233        close: function() {
    231234            this.$el.hide();
     235            this.controller.trigger( 'close', this.controller );
    232236        },
    233237
     
    278282            // Otherwise, `jQuery.html()` will unbind their events.
    279283            $( _.pluck( this._views, 'el' ) ).detach();
    280             this.$primary.html( _.pluck( views.primary, 'el' ) );
    281             this.$secondary.html( _.pluck( views.secondary, 'el' ) );
     284            this.$primary.html( _.pluck( views.primary || [], 'el' ) );
     285            this.$secondary.html( _.pluck( views.secondary || [], 'el' ) );
    282286
    283287            return this;
     
    737741        // to test multiple selections.
    738742        initToolbarView: function() {
    739             var controller = this.controller;
    740 
    741             this.toolbarView = new media.view.Toolbar({
    742                 items: {
    743                     'return-to-library': {
    744                         text:     l10n.returnToLibrary,
    745                         priority: -40,
    746 
    747                         click:  function() {
    748                             controller.render('library');
    749                         }
    750                     },
    751 
    752                     'insert-gallery-into-post': {
     743            var controller = this.controller,
     744                editing = controller.get('editing'),
     745                items = {
     746                    'update-gallery': {
    753747                        style:    'primary',
    754                         text:     l10n.insertGalleryIntoPost,
     748                        text:     editing ? l10n.updateGallery : l10n.insertGalleryIntoPost,
    755749                        priority: 40,
    756750                        click:    _.bind( controller.update, controller, 'gallery' )
     
    761755                        priority: 30
    762756                    }
    763                 }
     757                };
     758
     759            if ( ! editing ) {
     760                items['return-to-library'] = {
     761                    text:     l10n.returnToLibrary,
     762                    priority: -40,
     763
     764                    click:  function() {
     765                        controller.render('library');
     766                    }
     767                };
     768            }
     769
     770            this.toolbarView = new media.view.Toolbar({
     771                items: items
    764772            });
    765773
  • trunk/wp-includes/script-loader.php

    r22129 r22155  
    331331        'returnToLibrary'       => __( 'Return to media library' ),
    332332        'insertGalleryIntoPost' => __( 'Insert gallery into post' ),
     333        'updateGallery'         => __( 'Update gallery' ),
    333334        'addImagesFromLibrary'  => __( 'Add images from media library' ),
    334335    ) );
     
    338339    did_action( 'init' ) && $scripts->localize( 'mce-view', '_wpMceViewL10n', array(
    339340        'contentWidth' => isset( $GLOBALS['content_width'] ) ? $GLOBALS['content_width'] : 800,
     341        'editGallery'  => __( 'Edit Gallery' ),
    340342    ) );
    341343
Note: See TracChangeset for help on using the changeset viewer.