1/**
  2 * @output wp-admin/js/widgets/media-gallery-widget.js
  3 */
  4
  5/* eslint consistent-this: [ "error", "control" ] */
  6(function( component ) {
  7	'use strict';
  8
  9	var GalleryWidgetModel, GalleryWidgetControl, GalleryDetailsMediaFrame;
 10
 11	/**
 12	 * Custom gallery details frame.
 13	 *
 14	 * @since 4.9.0
 15	 * @class    wp.mediaWidgets~GalleryDetailsMediaFrame
 16	 * @augments wp.media.view.MediaFrame.Post
 17	 */
 18	GalleryDetailsMediaFrame = wp.media.view.MediaFrame.Post.extend(/** @lends wp.mediaWidgets~GalleryDetailsMediaFrame.prototype */{
 19
 20		/**
 21		 * Create the default states.
 22		 *
 23		 * @since 4.9.0
 24		 * @return {void}
 25		 */
 26		createStates: function createStates() {
 27			this.states.add([
 28				new wp.media.controller.Library({
 29					id:         'gallery',
 30					title:      wp.media.view.l10n.createGalleryTitle,
 31					priority:   40,
 32					toolbar:    'main-gallery',
 33					filterable: 'uploaded',
 34					multiple:   'add',
 35					editable:   true,
 36
 37					library:  wp.media.query( _.defaults({
 38						type: 'image'
 39					}, this.options.library ) )
 40				}),
 41
 42				// Gallery states.
 43				new wp.media.controller.GalleryEdit({
 44					library: this.options.selection,
 45					editing: this.options.editing,
 46					menu:    'gallery'
 47				}),
 48
 49				new wp.media.controller.GalleryAdd()
 50			]);
 51		}
 52	} );
 53
 54	/**
 55	 * Gallery widget model.
 56	 *
 57	 * See WP_Widget_Gallery::enqueue_admin_scripts() for amending prototype from PHP exports.
 58	 *
 59	 * @since 4.9.0
 60	 *
 61	 * @class    wp.mediaWidgets.modelConstructors.media_gallery
 62	 * @augments wp.mediaWidgets.MediaWidgetModel
 63	 */
 64	GalleryWidgetModel = component.MediaWidgetModel.extend(/** @lends wp.mediaWidgets.modelConstructors.media_gallery.prototype */{} );
 65
 66	GalleryWidgetControl = component.MediaWidgetControl.extend(/** @lends wp.mediaWidgets.controlConstructors.media_gallery.prototype */{
 67
 68		/**
 69		 * View events.
 70		 *
 71		 * @since 4.9.0
 72		 * @type {object}
 73		 */
 74		events: _.extend( {}, component.MediaWidgetControl.prototype.events, {
 75			'click .media-widget-gallery-preview': 'editMedia'
 76		} ),
 77
 78		/**
 79		 * Gallery widget control.
 80		 *
 81		 * See WP_Widget_Gallery::enqueue_admin_scripts() for amending prototype from PHP exports.
 82		 *
 83		 * @constructs wp.mediaWidgets.controlConstructors.media_gallery
 84		 * @augments   wp.mediaWidgets.MediaWidgetControl
 85		 *
 86		 * @since 4.9.0
 87		 * @param {Object}         options - Options.
 88		 * @param {Backbone.Model} options.model - Model.
 89		 * @param {jQuery}         options.el - Control field container element.
 90		 * @param {jQuery}         options.syncContainer - Container element where fields are synced for the server.
 91		 * @return {void}
 92		 */
 93		initialize: function initialize( options ) {
 94			var control = this;
 95
 96			component.MediaWidgetControl.prototype.initialize.call( control, options );
 97
 98			_.bindAll( control, 'updateSelectedAttachments', 'handleAttachmentDestroy' );
 99			control.selectedAttachments = new wp.media.model.Attachments();
100			control.model.on( 'change:ids', control.updateSelectedAttachments );
101			control.selectedAttachments.on( 'change', control.renderPreview );
102			control.selectedAttachments.on( 'reset', control.renderPreview );
103			control.updateSelectedAttachments();
104
105			/*
106			 * Refresh a Gallery widget partial when the user modifies one of the selected attachments.
107			 * This ensures that when an attachment's caption is updated in the media modal the Gallery
108			 * widget in the preview will then be refreshed to show the change. Normally doing this
109			 * would not be necessary because all of the state should be contained inside the changeset,
110			 * as everything done in the Customizer should not make a change to the site unless the
111			 * changeset itself is published. Attachments are a current exception to this rule.
112			 * For a proposal to include attachments in the customized state, see #37887.
113			 */
114			if ( wp.customize && wp.customize.previewer ) {
115				control.selectedAttachments.on( 'change', function() {
116					wp.customize.previewer.send( 'refresh-widget-partial', control.model.get( 'widget_id' ) );
117				} );
118			}
119		},
120
121		/**
122		 * Update the selected attachments if necessary.
123		 *
124		 * @since 4.9.0
125		 * @return {void}
126		 */
127		updateSelectedAttachments: function updateSelectedAttachments() {
128			var control = this, newIds, oldIds, removedIds, addedIds, addedQuery;
129
130			newIds = control.model.get( 'ids' );
131			oldIds = _.pluck( control.selectedAttachments.models, 'id' );
132
133			removedIds = _.difference( oldIds, newIds );
134			_.each( removedIds, function( removedId ) {
135				control.selectedAttachments.remove( control.selectedAttachments.get( removedId ) );
136			});
137
138			addedIds = _.difference( newIds, oldIds );
139			if ( addedIds.length ) {
140				addedQuery = wp.media.query({
141					order: 'ASC',
142					orderby: 'post__in',
143					perPage: -1,
144					post__in: newIds,
145					query: true,
146					type: 'image'
147				});
148				addedQuery.more().done( function() {
149					control.selectedAttachments.reset( addedQuery.models );
150				});
151			}
152		},
153
154		/**
155		 * Render preview.
156		 *
157		 * @since 4.9.0
158		 * @return {void}
159		 */
160		renderPreview: function renderPreview() {
161			var control = this, previewContainer, previewTemplate, data;
162
163			previewContainer = control.$el.find( '.media-widget-preview' );
164			previewTemplate = wp.template( 'wp-media-widget-gallery-preview' );
165
166			data = control.previewTemplateProps.toJSON();
167			data.attachments = {};
168			control.selectedAttachments.each( function( attachment ) {
169				data.attachments[ attachment.id ] = attachment.toJSON();
170			} );
171
172			previewContainer.html( previewTemplate( data ) );
173		},
174
175		/**
176		 * Determine whether there are selected attachments.
177		 *
178		 * @since 4.9.0
179		 * @return {boolean} Selected.
180		 */
181		isSelected: function isSelected() {
182			var control = this;
183
184			if ( control.model.get( 'error' ) ) {
185				return false;
186			}
187
188			return control.model.get( 'ids' ).length > 0;
189		},
190
191		/**
192		 * Open the media select frame to edit images.
193		 *
194		 * @since 4.9.0
195		 * @return {void}
196		 */
197		editMedia: function editMedia() {
198			var control = this, selection, mediaFrame, mediaFrameProps;
199
200			selection = new wp.media.model.Selection( control.selectedAttachments.models, {
201				multiple: true
202			});
203
204			mediaFrameProps = control.mapModelToMediaFrameProps( control.model.toJSON() );
205			selection.gallery = new Backbone.Model( mediaFrameProps );
206			if ( mediaFrameProps.size ) {
207				control.displaySettings.set( 'size', mediaFrameProps.size );
208			}
209			mediaFrame = new GalleryDetailsMediaFrame({
210				frame: 'manage',
211				text: control.l10n.add_to_widget,
212				selection: selection,
213				mimeType: control.mime_type,
214				selectedDisplaySettings: control.displaySettings,
215				showDisplaySettings: control.showDisplaySettings,
216				metadata: mediaFrameProps,
217				editing:   true,
218				multiple:  true,
219				state: 'gallery-edit'
220			});
221			wp.media.frame = mediaFrame; // See wp.media().
222
223			// Handle selection of a media item.
224			mediaFrame.on( 'update', function onUpdate( newSelection ) {
225				var state = mediaFrame.state(), resultSelection;
226
227				resultSelection = newSelection || state.get( 'selection' );
228				if ( ! resultSelection ) {
229					return;
230				}
231
232				// Copy orderby_random from gallery state.
233				if ( resultSelection.gallery ) {
234					control.model.set( control.mapMediaToModelProps( resultSelection.gallery.toJSON() ) );
235				}
236
237				// Directly update selectedAttachments to prevent needing to do additional request.
238				control.selectedAttachments.reset( resultSelection.models );
239
240				// Update models in the widget instance.
241				control.model.set( {
242					ids: _.pluck( resultSelection.models, 'id' )
243				} );
244			} );
245
246			mediaFrame.$el.addClass( 'media-widget' );
247			mediaFrame.open();
248
249			if ( selection ) {
250				selection.on( 'destroy', control.handleAttachmentDestroy );
251			}
252		},
253
254		/**
255		 * Open the media select frame to chose an item.
256		 *
257		 * @since 4.9.0
258		 * @return {void}
259		 */
260		selectMedia: function selectMedia() {
261			var control = this, selection, mediaFrame, mediaFrameProps;
262			selection = new wp.media.model.Selection( control.selectedAttachments.models, {
263				multiple: true
264			});
265
266			mediaFrameProps = control.mapModelToMediaFrameProps( control.model.toJSON() );
267			if ( mediaFrameProps.size ) {
268				control.displaySettings.set( 'size', mediaFrameProps.size );
269			}
270			mediaFrame = new GalleryDetailsMediaFrame({
271				frame: 'select',
272				text: control.l10n.add_to_widget,
273				selection: selection,
274				mimeType: control.mime_type,
275				selectedDisplaySettings: control.displaySettings,
276				showDisplaySettings: control.showDisplaySettings,
277				metadata: mediaFrameProps,
278				state: 'gallery'
279			});
280			wp.media.frame = mediaFrame; // See wp.media().
281
282			// Handle selection of a media item.
283			mediaFrame.on( 'update', function onUpdate( newSelection ) {
284				var state = mediaFrame.state(), resultSelection;
285
286				resultSelection = newSelection || state.get( 'selection' );
287				if ( ! resultSelection ) {
288					return;
289				}
290
291				// Copy orderby_random from gallery state.
292				if ( resultSelection.gallery ) {
293					control.model.set( control.mapMediaToModelProps( resultSelection.gallery.toJSON() ) );
294				}
295
296				// Directly update selectedAttachments to prevent needing to do additional request.
297				control.selectedAttachments.reset( resultSelection.models );
298
299				// Update widget instance.
300				control.model.set( {
301					ids: _.pluck( resultSelection.models, 'id' )
302				} );
303			} );
304
305			mediaFrame.$el.addClass( 'media-widget' );
306			mediaFrame.open();
307
308			if ( selection ) {
309				selection.on( 'destroy', control.handleAttachmentDestroy );
310			}
311
312			/*
313			 * Make sure focus is set inside of modal so that hitting Esc will close
314			 * the modal and not inadvertently cause the widget to collapse in the customizer.
315			 */
316			mediaFrame.$el.find( ':focusable:first' ).focus();
317		},
318
319		/**
320		 * Clear the selected attachment when it is deleted in the media select frame.
321		 *
322		 * @since 4.9.0
323		 * @param {wp.media.models.Attachment} attachment - Attachment.
324		 * @return {void}
325		 */
326		handleAttachmentDestroy: function handleAttachmentDestroy( attachment ) {
327			var control = this;
328			control.model.set( {
329				ids: _.difference(
330					control.model.get( 'ids' ),
331					[ attachment.id ]
332				)
333			} );
334		}
335	} );
336
337	// Exports.
338	component.controlConstructors.media_gallery = GalleryWidgetControl;
339	component.modelConstructors.media_gallery = GalleryWidgetModel;
340
341})( wp.mediaWidgets );
342