Diff: STRATO-apps/wordpress_03/app/wp-admin/js/widgets/media-gallery-widget.js
Keine Baseline-Datei – Diff nur gegen leer.
1
-
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
+