WordPress/wp-admin/js/widgets/media-gallery-widget.js
Weston Ruter bb97df7b5f Widgets: Introduce Gallery widget for displaying image galleries.
* Galleries are managed in the widget in the same way they are managed in the post editor, both using the media manager.
* Gallery widget is merged from the Core Media Widgets v0.2.0 feature plugin and it extends `WP_Widget_Media` in the same way as is done for image, audio, and video widgets.
* Model syncing logic is updated to support booleans and arrays (of integers).
* Placeholder areas in media widgets are now clickable shortcuts for selecting media.
* Image widget placeholder is updated to match gallery widget where clicking preview is shortcut for editing media.

Props westonruter, joemcgill, timmydcrawford, m1tk00, obenland, melchoyce.
See #32417.
Fixes #41914.

Built from https://develop.svn.wordpress.org/trunk@41590


git-svn-id: http://core.svn.wordpress.org/trunk@41423 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2017-09-25 06:28:45 +00:00

326 lines
8.9 KiB
JavaScript

/* eslint consistent-this: [ "error", "control" ] */
(function( component ) {
'use strict';
var GalleryWidgetModel, GalleryWidgetControl, GalleryDetailsMediaFrame;
/**
* Custom gallery details frame.
*
* @since 4.9.0
* @class GalleryDetailsMediaFrame
* @constructor
*/
GalleryDetailsMediaFrame = wp.media.view.MediaFrame.Post.extend( {
/**
* Create the default states.
*
* @since 4.9.0
* @returns {void}
*/
createStates: function createStates() {
this.states.add([
new wp.media.controller.Library({
id: 'gallery',
title: wp.media.view.l10n.createGalleryTitle,
priority: 40,
toolbar: 'main-gallery',
filterable: 'uploaded',
multiple: 'add',
editable: true,
library: wp.media.query( _.defaults({
type: 'image'
}, this.options.library ) )
}),
// Gallery states.
new wp.media.controller.GalleryEdit({
library: this.options.selection,
editing: this.options.editing,
menu: 'gallery'
}),
new wp.media.controller.GalleryAdd()
]);
}
} );
/**
* Gallery widget model.
*
* See WP_Widget_Gallery::enqueue_admin_scripts() for amending prototype from PHP exports.
*
* @since 4.9.0
* @class GalleryWidgetModel
* @constructor
*/
GalleryWidgetModel = component.MediaWidgetModel.extend( {} );
/**
* Gallery widget control.
*
* See WP_Widget_Gallery::enqueue_admin_scripts() for amending prototype from PHP exports.
*
* @since 4.9.0
* @class GalleryWidgetControl
* @constructor
*/
GalleryWidgetControl = component.MediaWidgetControl.extend( {
/**
* View events.
*
* @since 4.9.0
* @type {object}
*/
events: _.extend( {}, component.MediaWidgetControl.prototype.events, {
'click .media-widget-gallery-preview': 'editMedia'
} ),
/**
* Initialize.
*
* @since 4.9.0
* @param {Object} options - Options.
* @param {Backbone.Model} options.model - Model.
* @param {jQuery} options.el - Control field container element.
* @param {jQuery} options.syncContainer - Container element where fields are synced for the server.
* @returns {void}
*/
initialize: function initialize( options ) {
var control = this;
component.MediaWidgetControl.prototype.initialize.call( control, options );
_.bindAll( control, 'updateSelectedAttachments', 'handleAttachmentDestroy' );
control.selectedAttachments = new wp.media.model.Attachments();
control.model.on( 'change:ids', control.updateSelectedAttachments );
control.selectedAttachments.on( 'change', control.renderPreview );
control.selectedAttachments.on( 'reset', control.renderPreview );
control.updateSelectedAttachments();
},
/**
* Update the selected attachments if necessary.
*
* @since 4.9.0
* @returns {void}
*/
updateSelectedAttachments: function updateSelectedAttachments() {
var control = this, newIds, oldIds, removedIds, addedIds, addedQuery;
newIds = control.model.get( 'ids' );
oldIds = _.pluck( control.selectedAttachments.models, 'id' );
removedIds = _.difference( oldIds, newIds );
_.each( removedIds, function( removedId ) {
control.selectedAttachments.remove( control.selectedAttachments.get( removedId ) );
});
addedIds = _.difference( newIds, oldIds );
if ( addedIds.length ) {
addedQuery = wp.media.query({
order: 'ASC',
orderby: 'post__in',
perPage: -1,
post__in: newIds,
query: true,
type: 'image'
});
addedQuery.more().done( function() {
control.selectedAttachments.reset( addedQuery.models );
});
}
},
/**
* Render preview.
*
* @since 4.9.0
* @returns {void}
*/
renderPreview: function renderPreview() {
var control = this, previewContainer, previewTemplate, data;
previewContainer = control.$el.find( '.media-widget-preview' );
previewTemplate = wp.template( 'wp-media-widget-gallery-preview' );
data = control.previewTemplateProps.toJSON();
data.attachments = {};
control.selectedAttachments.each( function( attachment ) {
data.attachments[ attachment.id ] = attachment.toJSON();
} );
previewContainer.html( previewTemplate( data ) );
},
/**
* Determine whether there are selected attachments.
*
* @since 4.9.0
* @returns {boolean} Selected.
*/
isSelected: function isSelected() {
var control = this;
if ( control.model.get( 'error' ) ) {
return false;
}
return control.model.get( 'ids' ).length > 0;
},
/**
* Open the media select frame to edit images.
*
* @since 4.9.0
* @returns {void}
*/
editMedia: function editMedia() {
var control = this, selection, mediaFrame, mediaFrameProps;
selection = new wp.media.model.Selection( control.selectedAttachments.models, {
multiple: true
});
mediaFrameProps = control.mapModelToMediaFrameProps( control.model.toJSON() );
selection.gallery = new Backbone.Model( _.pick( mediaFrameProps, 'columns', 'link', 'size', '_orderbyRandom' ) );
if ( mediaFrameProps.size ) {
control.displaySettings.set( 'size', mediaFrameProps.size );
}
mediaFrame = new GalleryDetailsMediaFrame({
frame: 'manage',
text: control.l10n.add_to_widget,
selection: selection,
mimeType: control.mime_type,
selectedDisplaySettings: control.displaySettings,
showDisplaySettings: control.showDisplaySettings,
metadata: mediaFrameProps,
editing: true,
multiple: true,
state: 'gallery-edit'
});
wp.media.frame = mediaFrame; // See wp.media().
// Handle selection of a media item.
mediaFrame.on( 'update', function onUpdate( newSelection ) {
var state = mediaFrame.state(), resultSelection;
resultSelection = newSelection || state.get( 'selection' );
if ( ! resultSelection ) {
return;
}
// Copy orderby_random from gallery state.
if ( resultSelection.gallery ) {
control.model.set( control.mapMediaToModelProps( resultSelection.gallery.toJSON() ) );
}
// Directly update selectedAttachments to prevent needing to do additional request.
control.selectedAttachments.reset( resultSelection.models );
// Update models in the widget instance.
control.model.set( {
ids: _.pluck( resultSelection.models, 'id' )
} );
} );
mediaFrame.$el.addClass( 'media-widget' );
mediaFrame.open();
if ( selection ) {
selection.on( 'destroy', control.handleAttachmentDestroy );
}
},
/**
* Open the media select frame to chose an item.
*
* @since 4.9.0
* @returns {void}
*/
selectMedia: function selectMedia() {
var control = this, selection, mediaFrame, mediaFrameProps;
selection = new wp.media.model.Selection( control.selectedAttachments.models, {
multiple: true
});
mediaFrameProps = control.mapModelToMediaFrameProps( control.model.toJSON() );
if ( mediaFrameProps.size ) {
control.displaySettings.set( 'size', mediaFrameProps.size );
}
mediaFrame = new GalleryDetailsMediaFrame({
frame: 'select',
text: control.l10n.add_to_widget,
selection: selection,
mimeType: control.mime_type,
selectedDisplaySettings: control.displaySettings,
showDisplaySettings: control.showDisplaySettings,
metadata: mediaFrameProps,
state: 'gallery'
});
wp.media.frame = mediaFrame; // See wp.media().
// Handle selection of a media item.
mediaFrame.on( 'update', function onUpdate( newSelection ) {
var state = mediaFrame.state(), resultSelection;
resultSelection = newSelection || state.get( 'selection' );
if ( ! resultSelection ) {
return;
}
// Copy orderby_random from gallery state.
if ( resultSelection.gallery ) {
control.model.set( control.mapMediaToModelProps( resultSelection.gallery.toJSON() ) );
}
// Directly update selectedAttachments to prevent needing to do additional request.
control.selectedAttachments.reset( resultSelection.models );
// Update widget instance.
control.model.set( {
ids: _.pluck( resultSelection.models, 'id' )
} );
} );
mediaFrame.$el.addClass( 'media-widget' );
mediaFrame.open();
if ( selection ) {
selection.on( 'destroy', control.handleAttachmentDestroy );
}
/*
* Make sure focus is set inside of modal so that hitting Esc will close
* the modal and not inadvertently cause the widget to collapse in the customizer.
*/
mediaFrame.$el.find( ':focusable:first' ).focus();
},
/**
* Clear the selected attachment when it is deleted in the media select frame.
*
* @since 4.9.0
* @param {wp.media.models.Attachment} attachment - Attachment.
* @returns {void}
*/
handleAttachmentDestroy: function handleAttachmentDestroy( attachment ) {
var control = this;
control.model.set( {
ids: _.difference(
control.model.get( 'ids' ),
[ attachment.id ]
)
} );
}
} );
// Exports.
component.controlConstructors.media_gallery = GalleryWidgetControl;
component.modelConstructors.media_gallery = GalleryWidgetModel;
})( wp.mediaWidgets );