WordPress.org

Make WordPress Core

Changeset 22101


Ignore:
Timestamp:
10/03/2012 04:21:50 AM (8 years ago)
Author:
koopersmith
Message:

Allow galleries to be reordered by drag and drop.

An Attachments view now accepts a sortable property. Manual sorting is only enabled when the corresponding collection doesn't have a comparator.

jQuery UI sortable must be enqueued for sorting to work.

see #21390, #21809.

File:
1 edited

Legend:

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

    r22053 r22101  
    500500        template:  media.template('media-workspace'),
    501501
    502         // The single `Attachment` view to be used in the `Attachments` view.
    503         AttachmentView: media.view.Attachment,
     502        // The `options` to be passed to `Attachments` view.
     503        attachmentsView: {},
    504504
    505505        events: {
     
    512512
    513513            _.defaults( this.options, {
    514                 selectOne: false,
    515                 uploader:  {}
     514                selectOne:       false,
     515                uploader:        {},
     516                attachmentsView: {}
    516517            });
    517518
    518519            this.$content = $('<div class="existing-attachments" />');
    519520
    520             this.attachmentsView = new media.view.Attachments({
     521            // Generate the `options` passed to the `Attachments` view.
     522            // Order of priority from lowest to highest: the provided defaults,
     523            // the prototypal `attachmentsView` property, the `attachmentsView`
     524            // option for the current instance, and then the `controller` and
     525            // `collection` keys, to ensure they're correctly set.
     526            this.attachmentsView = _.extend( {
     527                directions: this.controller.get('multiple') ? l10n.selectMediaMultiple : l10n.selectMediaSingular
     528            }, this.attachmentsView, this.options.attachmentsView, {
    521529                controller: this.controller,
    522                 directions: this.controller.get('multiple') ? l10n.selectMediaMultiple : l10n.selectMediaSingular,
    523                 collection: this.collection,
    524 
    525                 AttachmentView: this.AttachmentView
     530                collection: this.collection
    526531            });
    527532
     533            // Initialize the `Attachments` view.
     534            this.attachmentsView = new media.view.Attachments( this.attachmentsView );
    528535            this.$content.append( this.attachmentsView.$el );
    529536
     
    582589     */
    583590    media.view.Workspace.Library = media.view.Workspace.extend({
    584         // The single `Attachment` view to be used in the `Attachments` view.
    585         AttachmentView: media.view.Attachment.Library,
     591
     592        attachmentsView: {
     593            // The single `Attachment` view to be used in the `Attachments` view.
     594            AttachmentView: media.view.Attachment.Library
     595        },
    586596
    587597        initialize: function() {
     
    655665     */
    656666    media.view.Workspace.Gallery = media.view.Workspace.extend({
    657         // The single `Attachment` view to be used in the `Attachments` view.
    658         AttachmentView: media.view.Attachment.Gallery,
     667
     668        attachmentsView: {
     669            // The single `Attachment` view to be used in the `Attachments` view.
     670            AttachmentView: media.view.Attachment.Gallery,
     671            sortable:       true
     672        },
    659673
    660674        initialize: function() {
     
    719733                refreshSensitivity: 200,
    720734                refreshThreshold:   3,
    721                 AttachmentView:     media.view.Attachment
     735                AttachmentView:     media.view.Attachment,
     736                sortable:           false
    722737            });
    723738
     
    735750            this.scroll = _.chain( this.scroll ).bind( this ).throttle( this.options.refreshSensitivity ).value();
    736751            this.$list.on( 'scroll.attachments', this.scroll );
     752
     753            this.initSortable();
     754        },
     755
     756        initSortable: function() {
     757            var collection = this.collection,
     758                from;
     759
     760            if ( ! this.options.sortable || ! $.fn.sortable )
     761                return;
     762
     763            this.$list.sortable({
     764                // If the `collection` has a `comparator`, disable sorting.
     765                disabled: !! collection.comparator,
     766
     767                // Prevent attachments from being dragged outside the bounding
     768                // box of the list.
     769                containment: this.$list,
     770
     771                // Change the position of the attachment as soon as the
     772                // mouse pointer overlaps a thumbnail.
     773                tolerance: 'pointer',
     774
     775                // Record the initial `index` of the dragged model.
     776                start: function( event, ui ) {
     777                    from = ui.item.index();
     778                },
     779
     780                // Update the model's index in the collection.
     781                // Do so silently, as the view is already accurate.
     782                update: function( event, ui ) {
     783                    var model = collection.at( from );
     784
     785                    collection.remove( model, {
     786                        silent: true
     787                    }).add( model, {
     788                        at:     ui.item.index(),
     789                        silent: true
     790                    });
     791                }
     792            });
     793
     794            // If the `orderby` property is changed on the `collection`,
     795            // check to see if we have a `comparator`. If so, disable sorting.
     796            collection.props.on( 'change:orderby', function() {
     797                this.$list.sortable( 'option', 'disabled', !! collection.comparator );
     798            }, this );
    737799        },
    738800
Note: See TracChangeset for help on using the changeset viewer.