1 (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
5 * wp.media.controller.CollectionAdd
7 * A state for adding attachments to a collection (e.g. video playlist).
10 * @augments wp.media.controller.Library
11 * @augments wp.media.controller.State
12 * @augments Backbone.Model
14 * @param {object} [attributes] The attributes hash passed to the state.
15 * @param {string} [attributes.id=library] Unique identifier.
16 * @param {string} attributes.title Title for the state. Displays in the frame's title region.
17 * @param {boolean} [attributes.multiple=add] Whether multi-select is enabled. @todo 'add' doesn't seem do anything special, and gets used as a boolean.
18 * @param {wp.media.model.Attachments} [attributes.library] The attachments collection to browse.
19 * If one is not supplied, a collection of attachments of the specified type will be created.
20 * @param {boolean|string} [attributes.filterable=uploaded] Whether the library is filterable, and if so what filters should be shown.
21 * Accepts 'all', 'uploaded', or 'unattached'.
22 * @param {string} [attributes.menu=gallery] Initial mode for the menu region.
23 * @param {string} [attributes.content=upload] Initial mode for the content region.
24 * Overridden by persistent user setting if 'contentUserSetting' is true.
25 * @param {string} [attributes.router=browse] Initial mode for the router region.
26 * @param {string} [attributes.toolbar=gallery-add] Initial mode for the toolbar region.
27 * @param {boolean} [attributes.searchable=true] Whether the library is searchable.
28 * @param {boolean} [attributes.sortable=true] Whether the Attachments should be sortable. Depends on the orderby property being set to menuOrder on the attachments collection.
29 * @param {boolean} [attributes.autoSelect=true] Whether an uploaded attachment should be automatically added to the selection.
30 * @param {boolean} [attributes.contentUserSetting=true] Whether the content region's mode should be set and persisted per user.
31 * @param {int} [attributes.priority=100] The priority for the state link in the media menu.
32 * @param {boolean} [attributes.syncSelection=false] Whether the Attachments selection should be persisted from the last state.
33 * Defaults to false because for this state, because the library of the Edit Gallery state is the selection.
34 * @param {string} attributes.type The collection's media type. (e.g. 'video').
35 * @param {string} attributes.collectionType The collection type. (e.g. 'playlist').
37 var Selection = wp.media.model.Selection,
38 Library = wp.media.controller.Library,
41 CollectionAdd = Library.extend({
42 defaults: _.defaults( {
43 // Selection defaults. @see media.model.Selection
45 // Attachments browser defaults. @see media.view.AttachmentsBrowser
46 filterable: 'uploaded',
50 }, Library.prototype.defaults ),
55 initialize: function() {
56 var collectionType = this.get('collectionType');
58 if ( 'video' === this.get( 'type' ) ) {
59 collectionType = 'video-' + collectionType;
62 this.set( 'id', collectionType + '-library' );
63 this.set( 'toolbar', collectionType + '-add' );
64 this.set( 'menu', collectionType );
66 // If we haven't been provided a `library`, create a `Selection`.
67 if ( ! this.get('library') ) {
68 this.set( 'library', wp.media.query({ type: this.get('type') }) );
70 Library.prototype.initialize.apply( this, arguments );
76 activate: function() {
77 var library = this.get('library'),
78 editLibrary = this.get('editLibrary'),
79 edit = this.frame.state( this.get('collectionType') + '-edit' ).get('library');
81 if ( editLibrary && editLibrary !== edit ) {
82 library.unobserve( editLibrary );
85 // Accepts attachments that exist in the original library and
86 // that do not exist in gallery's library.
87 library.validator = function( attachment ) {
88 return !! this.mirroring.get( attachment.cid ) && ! edit.get( attachment.cid ) && Selection.prototype.validator.apply( this, arguments );
91 // Reset the library to ensure that all attachments are re-added
92 // to the collection. Do so silently, as calling `observe` will
93 // trigger the `reset` event.
94 library.reset( library.mirroring.models, { silent: true });
95 library.observe( edit );
96 this.set('editLibrary', edit);
98 Library.prototype.activate.apply( this, arguments );
102 module.exports = CollectionAdd;
104 },{}],2:[function(require,module,exports){
105 /*globals wp, Backbone */
108 * wp.media.controller.CollectionEdit
110 * A state for editing a collection, which is used by audio and video playlists,
111 * and can be used for other collections.
114 * @augments wp.media.controller.Library
115 * @augments wp.media.controller.State
116 * @augments Backbone.Model
118 * @param {object} [attributes] The attributes hash passed to the state.
119 * @param {string} attributes.title Title for the state. Displays in the media menu and the frame's title region.
120 * @param {wp.media.model.Attachments} [attributes.library] The attachments collection to edit.
121 * If one is not supplied, an empty media.model.Selection collection is created.
122 * @param {boolean} [attributes.multiple=false] Whether multi-select is enabled.
123 * @param {string} [attributes.content=browse] Initial mode for the content region.
124 * @param {string} attributes.menu Initial mode for the menu region. @todo this needs a better explanation.
125 * @param {boolean} [attributes.searchable=false] Whether the library is searchable.
126 * @param {boolean} [attributes.sortable=true] Whether the Attachments should be sortable. Depends on the orderby property being set to menuOrder on the attachments collection.
127 * @param {boolean} [attributes.date=true] Whether to show the date filter in the browser's toolbar.
128 * @param {boolean} [attributes.describe=true] Whether to offer UI to describe the attachments - e.g. captioning images in a gallery.
129 * @param {boolean} [attributes.dragInfo=true] Whether to show instructional text about the attachments being sortable.
130 * @param {boolean} [attributes.dragInfoText] Instructional text about the attachments being sortable.
131 * @param {int} [attributes.idealColumnWidth=170] The ideal column width in pixels for attachments.
132 * @param {boolean} [attributes.editing=false] Whether the gallery is being created, or editing an existing instance.
133 * @param {int} [attributes.priority=60] The priority for the state link in the media menu.
134 * @param {boolean} [attributes.syncSelection=false] Whether the Attachments selection should be persisted from the last state.
135 * Defaults to false for this state, because the library passed in *is* the selection.
136 * @param {view} [attributes.SettingsView] The view to edit the collection instance settings (e.g. Playlist settings with "Show tracklist" checkbox).
137 * @param {view} [attributes.AttachmentView] The single `Attachment` view to be used in the `Attachments`.
138 * If none supplied, defaults to wp.media.view.Attachment.EditLibrary.
139 * @param {string} attributes.type The collection's media type. (e.g. 'video').
140 * @param {string} attributes.collectionType The collection type. (e.g. 'playlist').
142 var Library = wp.media.controller.Library,
143 l10n = wp.media.view.l10n,
147 CollectionEdit = Library.extend({
156 idealColumnWidth: 170,
166 initialize: function() {
167 var collectionType = this.get('collectionType');
169 if ( 'video' === this.get( 'type' ) ) {
170 collectionType = 'video-' + collectionType;
173 this.set( 'id', collectionType + '-edit' );
174 this.set( 'toolbar', collectionType + '-edit' );
176 // If we haven't been provided a `library`, create a `Selection`.
177 if ( ! this.get('library') ) {
178 this.set( 'library', new wp.media.model.Selection() );
180 // The single `Attachment` view to be used in the `Attachments` view.
181 if ( ! this.get('AttachmentView') ) {
182 this.set( 'AttachmentView', wp.media.view.Attachment.EditLibrary );
184 Library.prototype.initialize.apply( this, arguments );
190 activate: function() {
191 var library = this.get('library');
193 // Limit the library to images only.
194 library.props.set( 'type', this.get( 'type' ) );
196 // Watch for uploaded attachments.
197 this.get('library').observe( wp.Uploader.queue );
199 this.frame.on( 'content:render:browse', this.renderSettings, this );
201 Library.prototype.activate.apply( this, arguments );
207 deactivate: function() {
208 // Stop watching for uploaded attachments.
209 this.get('library').unobserve( wp.Uploader.queue );
211 this.frame.off( 'content:render:browse', this.renderSettings, this );
213 Library.prototype.deactivate.apply( this, arguments );
217 * Render the collection embed settings view in the browser sidebar.
219 * @todo This is against the pattern elsewhere in media. Typically the frame
220 * is responsible for adding region mode callbacks. Explain.
224 * @param {wp.media.view.attachmentsBrowser} The attachments browser view.
226 renderSettings: function( attachmentsBrowserView ) {
227 var library = this.get('library'),
228 collectionType = this.get('collectionType'),
229 dragInfoText = this.get('dragInfoText'),
230 SettingsView = this.get('SettingsView'),
233 if ( ! library || ! attachmentsBrowserView ) {
237 library[ collectionType ] = library[ collectionType ] || new Backbone.Model();
239 obj[ collectionType ] = new SettingsView({
241 model: library[ collectionType ],
245 attachmentsBrowserView.sidebar.set( obj );
247 if ( dragInfoText ) {
248 attachmentsBrowserView.toolbar.set( 'dragInfo', new wp.media.View({
249 el: $( '<div class="instructions">' + dragInfoText + '</div>' )[0],
254 // Add the 'Reverse order' button to the toolbar.
255 attachmentsBrowserView.toolbar.set( 'reverse', {
256 text: l10n.reverseOrder,
260 library.reset( library.toArray().reverse() );
266 module.exports = CollectionEdit;
268 },{}],3:[function(require,module,exports){
269 /*globals wp, _, Backbone */
272 * wp.media.controller.Cropper
274 * A state for cropping an image.
277 * @augments wp.media.controller.State
278 * @augments Backbone.Model
280 var l10n = wp.media.view.l10n,
283 Cropper = wp.media.controller.State.extend({
286 title: l10n.cropImage,
287 // Region mode defaults.
295 activate: function() {
296 this.frame.on( 'content:create:crop', this.createCropContent, this );
297 this.frame.on( 'close', this.removeCropper, this );
298 this.set('selection', new Backbone.Collection(this.frame._selection.single));
301 deactivate: function() {
302 this.frame.toolbar.mode('browse');
305 createCropContent: function() {
306 this.cropperView = new wp.media.view.Cropper({
308 attachment: this.get('selection').first()
310 this.cropperView.on('image-loaded', this.createCropToolbar, this);
311 this.frame.content.set(this.cropperView);
314 removeCropper: function() {
315 this.imgSelect.cancelSelection();
316 this.imgSelect.setOptions({remove: true});
317 this.imgSelect.update();
318 this.cropperView.remove();
320 createCropToolbar: function() {
321 var canSkipCrop, toolbarOptions;
323 canSkipCrop = this.get('canSkipCrop') || false;
326 controller: this.frame,
330 text: l10n.cropImage,
332 requires: { library: false, selection: false },
335 var controller = this.controller,
338 selection = controller.state().get('selection').first();
339 selection.set({cropDetails: controller.state().imgSelect.getSelection()});
341 this.$el.text(l10n.cropping);
342 this.$el.attr('disabled', true);
344 controller.state().doCrop( selection ).done( function( croppedImage ) {
345 controller.trigger('cropped', croppedImage );
347 }).fail( function() {
348 controller.trigger('content:error:crop');
356 _.extend( toolbarOptions.items, {
359 text: l10n.skipCropping,
361 requires: { library: false, selection: false },
363 var selection = this.controller.state().get('selection').first();
364 this.controller.state().cropperView.remove();
365 this.controller.trigger('skippedcrop', selection);
366 this.controller.close();
372 this.frame.toolbar.set( new wp.media.view.Toolbar(toolbarOptions) );
375 doCrop: function( attachment ) {
376 return wp.ajax.post( 'custom-header-crop', {
377 nonce: attachment.get('nonces').edit,
378 id: attachment.get('id'),
379 cropDetails: attachment.get('cropDetails')
384 module.exports = Cropper;
386 },{}],4:[function(require,module,exports){
390 * wp.media.controller.EditImage
392 * A state for editing (cropping, etc.) an image.
395 * @augments wp.media.controller.State
396 * @augments Backbone.Model
398 * @param {object} attributes The attributes hash passed to the state.
399 * @param {wp.media.model.Attachment} attributes.model The attachment.
400 * @param {string} [attributes.id=edit-image] Unique identifier.
401 * @param {string} [attributes.title=Edit Image] Title for the state. Displays in the media menu and the frame's title region.
402 * @param {string} [attributes.content=edit-image] Initial mode for the content region.
403 * @param {string} [attributes.toolbar=edit-image] Initial mode for the toolbar region.
404 * @param {string} [attributes.menu=false] Initial mode for the menu region.
405 * @param {string} [attributes.url] Unused. @todo Consider removal.
407 var l10n = wp.media.view.l10n,
410 EditImage = wp.media.controller.State.extend({
413 title: l10n.editImage,
415 toolbar: 'edit-image',
416 content: 'edit-image',
423 activate: function() {
424 this.listenTo( this.frame, 'toolbar:render:edit-image', this.toolbar );
430 deactivate: function() {
431 this.stopListening( this.frame );
437 toolbar: function() {
438 var frame = this.frame,
439 lastState = frame.lastState(),
440 previous = lastState && lastState.id;
442 frame.toolbar.set( new wp.media.view.Toolbar({
451 frame.setState( previous );
462 module.exports = EditImage;
464 },{}],5:[function(require,module,exports){
465 /*globals wp, _, Backbone */
468 * wp.media.controller.Embed
470 * A state for embedding media from a URL.
473 * @augments wp.media.controller.State
474 * @augments Backbone.Model
476 * @param {object} attributes The attributes hash passed to the state.
477 * @param {string} [attributes.id=embed] Unique identifier.
478 * @param {string} [attributes.title=Insert From URL] Title for the state. Displays in the media menu and the frame's title region.
479 * @param {string} [attributes.content=embed] Initial mode for the content region.
480 * @param {string} [attributes.menu=default] Initial mode for the menu region.
481 * @param {string} [attributes.toolbar=main-embed] Initial mode for the toolbar region.
482 * @param {string} [attributes.menu=false] Initial mode for the menu region.
483 * @param {int} [attributes.priority=120] The priority for the state link in the media menu.
484 * @param {string} [attributes.type=link] The type of embed. Currently only link is supported.
485 * @param {string} [attributes.url] The embed URL.
486 * @param {object} [attributes.metadata={}] Properties of the embed, which will override attributes.url if set.
488 var l10n = wp.media.view.l10n,
492 Embed = wp.media.controller.State.extend({
495 title: l10n.insertFromUrlTitle,
498 toolbar: 'main-embed',
505 // The amount of time used when debouncing the scan.
508 initialize: function(options) {
509 this.metadata = options.metadata;
510 this.debouncedScan = _.debounce( _.bind( this.scan, this ), this.sensitivity );
511 this.props = new Backbone.Model( this.metadata || { url: '' });
512 this.props.on( 'change:url', this.debouncedScan, this );
513 this.props.on( 'change:url', this.refresh, this );
514 this.on( 'scan', this.scanImage, this );
518 * Trigger a scan of the embedded URL's content for metadata required to embed.
520 * @fires wp.media.controller.Embed#scan
530 // Scan is triggered with the list of `attributes` to set on the
531 // state, useful for the 'type' attribute and 'scanners' attribute,
532 // an array of promise objects for asynchronous scan operations.
533 if ( this.props.get('url') ) {
534 this.trigger( 'scan', attributes );
537 if ( attributes.scanners.length ) {
538 scanners = attributes.scanners = $.when.apply( $, attributes.scanners );
539 scanners.always( function() {
540 if ( embed.get('scanners') === scanners ) {
541 embed.set( 'loading', false );
545 attributes.scanners = null;
548 attributes.loading = !! attributes.scanners;
549 this.set( attributes );
552 * Try scanning the embed as an image to discover its dimensions.
554 * @param {Object} attributes
556 scanImage: function( attributes ) {
557 var frame = this.frame,
559 url = this.props.get('url'),
561 deferred = $.Deferred();
563 attributes.scanners.push( deferred.promise() );
565 // Try to load the image and find its width/height.
566 image.onload = function() {
569 if ( state !== frame.state() || url !== state.props.get('url') ) {
583 image.onerror = deferred.reject;
587 refresh: function() {
588 this.frame.toolbar.get().refresh();
592 this.props.clear().set({ url: '' });
600 module.exports = Embed;
602 },{}],6:[function(require,module,exports){
606 * wp.media.controller.FeaturedImage
608 * A state for selecting a featured image for a post.
611 * @augments wp.media.controller.Library
612 * @augments wp.media.controller.State
613 * @augments Backbone.Model
615 * @param {object} [attributes] The attributes hash passed to the state.
616 * @param {string} [attributes.id=featured-image] Unique identifier.
617 * @param {string} [attributes.title=Set Featured Image] Title for the state. Displays in the media menu and the frame's title region.
618 * @param {wp.media.model.Attachments} [attributes.library] The attachments collection to browse.
619 * If one is not supplied, a collection of all images will be created.
620 * @param {boolean} [attributes.multiple=false] Whether multi-select is enabled.
621 * @param {string} [attributes.content=upload] Initial mode for the content region.
622 * Overridden by persistent user setting if 'contentUserSetting' is true.
623 * @param {string} [attributes.menu=default] Initial mode for the menu region.
624 * @param {string} [attributes.router=browse] Initial mode for the router region.
625 * @param {string} [attributes.toolbar=featured-image] Initial mode for the toolbar region.
626 * @param {int} [attributes.priority=60] The priority for the state link in the media menu.
627 * @param {boolean} [attributes.searchable=true] Whether the library is searchable.
628 * @param {boolean|string} [attributes.filterable=false] Whether the library is filterable, and if so what filters should be shown.
629 * Accepts 'all', 'uploaded', or 'unattached'.
630 * @param {boolean} [attributes.sortable=true] Whether the Attachments should be sortable. Depends on the orderby property being set to menuOrder on the attachments collection.
631 * @param {boolean} [attributes.autoSelect=true] Whether an uploaded attachment should be automatically added to the selection.
632 * @param {boolean} [attributes.describe=false] Whether to offer UI to describe attachments - e.g. captioning images in a gallery.
633 * @param {boolean} [attributes.contentUserSetting=true] Whether the content region's mode should be set and persisted per user.
634 * @param {boolean} [attributes.syncSelection=true] Whether the Attachments selection should be persisted from the last state.
636 var Attachment = wp.media.model.Attachment,
637 Library = wp.media.controller.Library,
638 l10n = wp.media.view.l10n,
641 FeaturedImage = Library.extend({
642 defaults: _.defaults({
643 id: 'featured-image',
644 title: l10n.setFeaturedImageTitle,
646 filterable: 'uploaded',
647 toolbar: 'featured-image',
650 }, Library.prototype.defaults ),
655 initialize: function() {
656 var library, comparator;
658 // If we haven't been provided a `library`, create a `Selection`.
659 if ( ! this.get('library') ) {
660 this.set( 'library', wp.media.query({ type: 'image' }) );
663 Library.prototype.initialize.apply( this, arguments );
665 library = this.get('library');
666 comparator = library.comparator;
668 // Overload the library's comparator to push items that are not in
669 // the mirrored query to the front of the aggregate collection.
670 library.comparator = function( a, b ) {
671 var aInQuery = !! this.mirroring.get( a.cid ),
672 bInQuery = !! this.mirroring.get( b.cid );
674 if ( ! aInQuery && bInQuery ) {
676 } else if ( aInQuery && ! bInQuery ) {
679 return comparator.apply( this, arguments );
683 // Add all items in the selection to the library, so any featured
684 // images that are not initially loaded still appear.
685 library.observe( this.get('selection') );
691 activate: function() {
692 this.updateSelection();
693 this.frame.on( 'open', this.updateSelection, this );
695 Library.prototype.activate.apply( this, arguments );
701 deactivate: function() {
702 this.frame.off( 'open', this.updateSelection, this );
704 Library.prototype.deactivate.apply( this, arguments );
710 updateSelection: function() {
711 var selection = this.get('selection'),
712 id = wp.media.view.settings.post.featuredImageId,
715 if ( '' !== id && -1 !== id ) {
716 attachment = Attachment.get( id );
720 selection.reset( attachment ? [ attachment ] : [] );
724 module.exports = FeaturedImage;
726 },{}],7:[function(require,module,exports){
730 * wp.media.controller.GalleryAdd
732 * A state for selecting more images to add to a gallery.
735 * @augments wp.media.controller.Library
736 * @augments wp.media.controller.State
737 * @augments Backbone.Model
739 * @param {object} [attributes] The attributes hash passed to the state.
740 * @param {string} [attributes.id=gallery-library] Unique identifier.
741 * @param {string} [attributes.title=Add to Gallery] Title for the state. Displays in the frame's title region.
742 * @param {boolean} [attributes.multiple=add] Whether multi-select is enabled. @todo 'add' doesn't seem do anything special, and gets used as a boolean.
743 * @param {wp.media.model.Attachments} [attributes.library] The attachments collection to browse.
744 * If one is not supplied, a collection of all images will be created.
745 * @param {boolean|string} [attributes.filterable=uploaded] Whether the library is filterable, and if so what filters should be shown.
746 * Accepts 'all', 'uploaded', or 'unattached'.
747 * @param {string} [attributes.menu=gallery] Initial mode for the menu region.
748 * @param {string} [attributes.content=upload] Initial mode for the content region.
749 * Overridden by persistent user setting if 'contentUserSetting' is true.
750 * @param {string} [attributes.router=browse] Initial mode for the router region.
751 * @param {string} [attributes.toolbar=gallery-add] Initial mode for the toolbar region.
752 * @param {boolean} [attributes.searchable=true] Whether the library is searchable.
753 * @param {boolean} [attributes.sortable=true] Whether the Attachments should be sortable. Depends on the orderby property being set to menuOrder on the attachments collection.
754 * @param {boolean} [attributes.autoSelect=true] Whether an uploaded attachment should be automatically added to the selection.
755 * @param {boolean} [attributes.contentUserSetting=true] Whether the content region's mode should be set and persisted per user.
756 * @param {int} [attributes.priority=100] The priority for the state link in the media menu.
757 * @param {boolean} [attributes.syncSelection=false] Whether the Attachments selection should be persisted from the last state.
758 * Defaults to false because for this state, because the library of the Edit Gallery state is the selection.
760 var Selection = wp.media.model.Selection,
761 Library = wp.media.controller.Library,
762 l10n = wp.media.view.l10n,
765 GalleryAdd = Library.extend({
766 defaults: _.defaults({
767 id: 'gallery-library',
768 title: l10n.addToGalleryTitle,
770 filterable: 'uploaded',
772 toolbar: 'gallery-add',
775 }, Library.prototype.defaults ),
780 initialize: function() {
781 // If a library wasn't supplied, create a library of images.
782 if ( ! this.get('library') ) {
783 this.set( 'library', wp.media.query({ type: 'image' }) );
786 Library.prototype.initialize.apply( this, arguments );
792 activate: function() {
793 var library = this.get('library'),
794 edit = this.frame.state('gallery-edit').get('library');
796 if ( this.editLibrary && this.editLibrary !== edit ) {
797 library.unobserve( this.editLibrary );
800 // Accepts attachments that exist in the original library and
801 // that do not exist in gallery's library.
802 library.validator = function( attachment ) {
803 return !! this.mirroring.get( attachment.cid ) && ! edit.get( attachment.cid ) && Selection.prototype.validator.apply( this, arguments );
806 // Reset the library to ensure that all attachments are re-added
807 // to the collection. Do so silently, as calling `observe` will
808 // trigger the `reset` event.
809 library.reset( library.mirroring.models, { silent: true });
810 library.observe( edit );
811 this.editLibrary = edit;
813 Library.prototype.activate.apply( this, arguments );
817 module.exports = GalleryAdd;
819 },{}],8:[function(require,module,exports){
823 * wp.media.controller.GalleryEdit
825 * A state for editing a gallery's images and settings.
828 * @augments wp.media.controller.Library
829 * @augments wp.media.controller.State
830 * @augments Backbone.Model
832 * @param {object} [attributes] The attributes hash passed to the state.
833 * @param {string} [attributes.id=gallery-edit] Unique identifier.
834 * @param {string} [attributes.title=Edit Gallery] Title for the state. Displays in the frame's title region.
835 * @param {wp.media.model.Attachments} [attributes.library] The collection of attachments in the gallery.
836 * If one is not supplied, an empty media.model.Selection collection is created.
837 * @param {boolean} [attributes.multiple=false] Whether multi-select is enabled.
838 * @param {boolean} [attributes.searchable=false] Whether the library is searchable.
839 * @param {boolean} [attributes.sortable=true] Whether the Attachments should be sortable. Depends on the orderby property being set to menuOrder on the attachments collection.
840 * @param {boolean} [attributes.date=true] Whether to show the date filter in the browser's toolbar.
841 * @param {string|false} [attributes.content=browse] Initial mode for the content region.
842 * @param {string|false} [attributes.toolbar=image-details] Initial mode for the toolbar region.
843 * @param {boolean} [attributes.describe=true] Whether to offer UI to describe attachments - e.g. captioning images in a gallery.
844 * @param {boolean} [attributes.displaySettings=true] Whether to show the attachment display settings interface.
845 * @param {boolean} [attributes.dragInfo=true] Whether to show instructional text about the attachments being sortable.
846 * @param {int} [attributes.idealColumnWidth=170] The ideal column width in pixels for attachments.
847 * @param {boolean} [attributes.editing=false] Whether the gallery is being created, or editing an existing instance.
848 * @param {int} [attributes.priority=60] The priority for the state link in the media menu.
849 * @param {boolean} [attributes.syncSelection=false] Whether the Attachments selection should be persisted from the last state.
850 * Defaults to false for this state, because the library passed in *is* the selection.
851 * @param {view} [attributes.AttachmentView] The single `Attachment` view to be used in the `Attachments`.
852 * If none supplied, defaults to wp.media.view.Attachment.EditLibrary.
854 var Library = wp.media.controller.Library,
855 l10n = wp.media.view.l10n,
858 GalleryEdit = Library.extend({
861 title: l10n.editGalleryTitle,
868 toolbar: 'gallery-edit',
870 displaySettings: true,
872 idealColumnWidth: 170,
881 initialize: function() {
882 // If we haven't been provided a `library`, create a `Selection`.
883 if ( ! this.get('library') ) {
884 this.set( 'library', new wp.media.model.Selection() );
887 // The single `Attachment` view to be used in the `Attachments` view.
888 if ( ! this.get('AttachmentView') ) {
889 this.set( 'AttachmentView', wp.media.view.Attachment.EditLibrary );
892 Library.prototype.initialize.apply( this, arguments );
898 activate: function() {
899 var library = this.get('library');
901 // Limit the library to images only.
902 library.props.set( 'type', 'image' );
904 // Watch for uploaded attachments.
905 this.get('library').observe( wp.Uploader.queue );
907 this.frame.on( 'content:render:browse', this.gallerySettings, this );
909 Library.prototype.activate.apply( this, arguments );
915 deactivate: function() {
916 // Stop watching for uploaded attachments.
917 this.get('library').unobserve( wp.Uploader.queue );
919 this.frame.off( 'content:render:browse', this.gallerySettings, this );
921 Library.prototype.deactivate.apply( this, arguments );
929 gallerySettings: function( browser ) {
930 if ( ! this.get('displaySettings') ) {
934 var library = this.get('library');
936 if ( ! library || ! browser ) {
940 library.gallery = library.gallery || new Backbone.Model();
942 browser.sidebar.set({
943 gallery: new wp.media.view.Settings.Gallery({
945 model: library.gallery,
950 browser.toolbar.set( 'reverse', {
951 text: l10n.reverseOrder,
955 library.reset( library.toArray().reverse() );
961 module.exports = GalleryEdit;
963 },{}],9:[function(require,module,exports){
967 * wp.media.controller.ImageDetails
969 * A state for editing the attachment display settings of an image that's been
970 * inserted into the editor.
973 * @augments wp.media.controller.State
974 * @augments Backbone.Model
976 * @param {object} [attributes] The attributes hash passed to the state.
977 * @param {string} [attributes.id=image-details] Unique identifier.
978 * @param {string} [attributes.title=Image Details] Title for the state. Displays in the frame's title region.
979 * @param {wp.media.model.Attachment} attributes.image The image's model.
980 * @param {string|false} [attributes.content=image-details] Initial mode for the content region.
981 * @param {string|false} [attributes.menu=false] Initial mode for the menu region.
982 * @param {string|false} [attributes.router=false] Initial mode for the router region.
983 * @param {string|false} [attributes.toolbar=image-details] Initial mode for the toolbar region.
984 * @param {boolean} [attributes.editing=false] Unused.
985 * @param {int} [attributes.priority=60] Unused.
987 * @todo This state inherits some defaults from media.controller.Library.prototype.defaults,
988 * however this may not do anything.
990 var State = wp.media.controller.State,
991 Library = wp.media.controller.Library,
992 l10n = wp.media.view.l10n,
995 ImageDetails = State.extend({
996 defaults: _.defaults({
998 title: l10n.imageDetailsTitle,
999 content: 'image-details',
1002 toolbar: 'image-details',
1005 }, Library.prototype.defaults ),
1010 * @param options Attributes
1012 initialize: function( options ) {
1013 this.image = options.image;
1014 State.prototype.initialize.apply( this, arguments );
1020 activate: function() {
1021 this.frame.modal.$el.addClass('image-details');
1025 module.exports = ImageDetails;
1027 },{}],10:[function(require,module,exports){
1028 /*globals wp, _, Backbone */
1031 * wp.media.controller.Library
1033 * A state for choosing an attachment or group of attachments from the media library.
1036 * @augments wp.media.controller.State
1037 * @augments Backbone.Model
1038 * @mixes media.selectionSync
1040 * @param {object} [attributes] The attributes hash passed to the state.
1041 * @param {string} [attributes.id=library] Unique identifier.
1042 * @param {string} [attributes.title=Media library] Title for the state. Displays in the media menu and the frame's title region.
1043 * @param {wp.media.model.Attachments} [attributes.library] The attachments collection to browse.
1044 * If one is not supplied, a collection of all attachments will be created.
1045 * @param {wp.media.model.Selection|object} [attributes.selection] A collection to contain attachment selections within the state.
1046 * If the 'selection' attribute is a plain JS object,
1047 * a Selection will be created using its values as the selection instance's `props` model.
1048 * Otherwise, it will copy the library's `props` model.
1049 * @param {boolean} [attributes.multiple=false] Whether multi-select is enabled.
1050 * @param {string} [attributes.content=upload] Initial mode for the content region.
1051 * Overridden by persistent user setting if 'contentUserSetting' is true.
1052 * @param {string} [attributes.menu=default] Initial mode for the menu region.
1053 * @param {string} [attributes.router=browse] Initial mode for the router region.
1054 * @param {string} [attributes.toolbar=select] Initial mode for the toolbar region.
1055 * @param {boolean} [attributes.searchable=true] Whether the library is searchable.
1056 * @param {boolean|string} [attributes.filterable=false] Whether the library is filterable, and if so what filters should be shown.
1057 * Accepts 'all', 'uploaded', or 'unattached'.
1058 * @param {boolean} [attributes.sortable=true] Whether the Attachments should be sortable. Depends on the orderby property being set to menuOrder on the attachments collection.
1059 * @param {boolean} [attributes.autoSelect=true] Whether an uploaded attachment should be automatically added to the selection.
1060 * @param {boolean} [attributes.describe=false] Whether to offer UI to describe attachments - e.g. captioning images in a gallery.
1061 * @param {boolean} [attributes.contentUserSetting=true] Whether the content region's mode should be set and persisted per user.
1062 * @param {boolean} [attributes.syncSelection=true] Whether the Attachments selection should be persisted from the last state.
1064 var l10n = wp.media.view.l10n,
1065 getUserSetting = window.getUserSetting,
1066 setUserSetting = window.setUserSetting,
1069 Library = wp.media.controller.State.extend({
1072 title: l10n.mediaLibraryTitle,
1083 contentUserSetting: true,
1088 * If a library isn't provided, query all media items.
1089 * If a selection instance isn't provided, create one.
1093 initialize: function() {
1094 var selection = this.get('selection'),
1097 if ( ! this.get('library') ) {
1098 this.set( 'library', wp.media.query() );
1101 if ( ! ( selection instanceof wp.media.model.Selection ) ) {
1105 props = this.get('library').props.toJSON();
1106 props = _.omit( props, 'orderby', 'query' );
1109 this.set( 'selection', new wp.media.model.Selection( null, {
1110 multiple: this.get('multiple'),
1115 this.resetDisplays();
1121 activate: function() {
1122 this.syncSelection();
1124 wp.Uploader.queue.on( 'add', this.uploading, this );
1126 this.get('selection').on( 'add remove reset', this.refreshContent, this );
1128 if ( this.get( 'router' ) && this.get('contentUserSetting') ) {
1129 this.frame.on( 'content:activate', this.saveContentMode, this );
1130 this.set( 'content', getUserSetting( 'libraryContent', this.get('content') ) );
1137 deactivate: function() {
1138 this.recordSelection();
1140 this.frame.off( 'content:activate', this.saveContentMode, this );
1142 // Unbind all event handlers that use this state as the context
1143 // from the selection.
1144 this.get('selection').off( null, null, this );
1146 wp.Uploader.queue.off( null, null, this );
1150 * Reset the library to its initial state.
1155 this.get('selection').reset();
1156 this.resetDisplays();
1157 this.refreshContent();
1161 * Reset the attachment display settings defaults to the site options.
1163 * If site options don't define them, fall back to a persistent user setting.
1167 resetDisplays: function() {
1168 var defaultProps = wp.media.view.settings.defaultProps;
1169 this._displays = [];
1170 this._defaultDisplaySettings = {
1171 align: defaultProps.align || getUserSetting( 'align', 'none' ),
1172 size: defaultProps.size || getUserSetting( 'imgsize', 'medium' ),
1173 link: defaultProps.link || getUserSetting( 'urlbutton', 'file' )
1178 * Create a model to represent display settings (alignment, etc.) for an attachment.
1182 * @param {wp.media.model.Attachment} attachment
1183 * @returns {Backbone.Model}
1185 display: function( attachment ) {
1186 var displays = this._displays;
1188 if ( ! displays[ attachment.cid ] ) {
1189 displays[ attachment.cid ] = new Backbone.Model( this.defaultDisplaySettings( attachment ) );
1191 return displays[ attachment.cid ];
1195 * Given an attachment, create attachment display settings properties.
1199 * @param {wp.media.model.Attachment} attachment
1202 defaultDisplaySettings: function( attachment ) {
1203 var settings = this._defaultDisplaySettings;
1204 if ( settings.canEmbed = this.canEmbed( attachment ) ) {
1205 settings.link = 'embed';
1211 * Whether an attachment can be embedded (audio or video).
1215 * @param {wp.media.model.Attachment} attachment
1216 * @returns {Boolean}
1218 canEmbed: function( attachment ) {
1219 // If uploading, we know the filename but not the mime type.
1220 if ( ! attachment.get('uploading') ) {
1221 var type = attachment.get('type');
1222 if ( type !== 'audio' && type !== 'video' ) {
1227 return _.contains( wp.media.view.settings.embedExts, attachment.get('filename').split('.').pop() );
1232 * If the state is active, no items are selected, and the current
1233 * content mode is not an option in the state's router (provided
1234 * the state has a router), reset the content mode to the default.
1238 refreshContent: function() {
1239 var selection = this.get('selection'),
1241 router = frame.router.get(),
1242 mode = frame.content.mode();
1244 if ( this.active && ! selection.length && router && ! router.get( mode ) ) {
1245 this.frame.content.render( this.get('content') );
1250 * Callback handler when an attachment is uploaded.
1252 * Switch to the Media Library if uploaded from the 'Upload Files' tab.
1254 * Adds any uploading attachments to the selection.
1256 * If the state only supports one attachment to be selected and multiple
1257 * attachments are uploaded, the last attachment in the upload queue will
1262 * @param {wp.media.model.Attachment} attachment
1264 uploading: function( attachment ) {
1265 var content = this.frame.content;
1267 if ( 'upload' === content.mode() ) {
1268 this.frame.content.mode('browse');
1271 if ( this.get( 'autoSelect' ) ) {
1272 this.get('selection').add( attachment );
1273 this.frame.trigger( 'library:selection:add' );
1278 * Persist the mode of the content region as a user setting.
1282 saveContentMode: function() {
1283 if ( 'browse' !== this.get('router') ) {
1287 var mode = this.frame.content.mode(),
1288 view = this.frame.router.get();
1290 if ( view && view.get( mode ) ) {
1291 setUserSetting( 'libraryContent', mode );
1296 // Make selectionSync available on any Media Library state.
1297 _.extend( Library.prototype, wp.media.selectionSync );
1299 module.exports = Library;
1301 },{}],11:[function(require,module,exports){
1305 * wp.media.controller.MediaLibrary
1308 * @augments wp.media.controller.Library
1309 * @augments wp.media.controller.State
1310 * @augments Backbone.Model
1312 var Library = wp.media.controller.Library,
1315 MediaLibrary = Library.extend({
1316 defaults: _.defaults({
1317 // Attachments browser defaults. @see media.view.AttachmentsBrowser
1318 filterable: 'uploaded',
1320 displaySettings: false,
1322 syncSelection: false
1323 }, Library.prototype.defaults ),
1330 initialize: function( options ) {
1331 this.media = options.media;
1332 this.type = options.type;
1333 this.set( 'library', wp.media.query({ type: this.type }) );
1335 Library.prototype.initialize.apply( this, arguments );
1341 activate: function() {
1342 // @todo this should use this.frame.
1343 if ( wp.media.frame.lastMime ) {
1344 this.set( 'library', wp.media.query({ type: wp.media.frame.lastMime }) );
1345 delete wp.media.frame.lastMime;
1347 Library.prototype.activate.apply( this, arguments );
1351 module.exports = MediaLibrary;
1353 },{}],12:[function(require,module,exports){
1354 /*globals Backbone, _ */
1357 * wp.media.controller.Region
1359 * A region is a persistent application layout area.
1361 * A region assumes one mode at any time, and can be switched to another.
1363 * When mode changes, events are triggered on the region's parent view.
1364 * The parent view will listen to specific events and fill the region with an
1365 * appropriate view depending on mode. For example, a frame listens for the
1366 * 'browse' mode t be activated on the 'content' view and then fills the region
1367 * with an AttachmentsBrowser view.
1371 * @param {object} options Options hash for the region.
1372 * @param {string} options.id Unique identifier for the region.
1373 * @param {Backbone.View} options.view A parent view the region exists within.
1374 * @param {string} options.selector jQuery selector for the region within the parent view.
1376 var Region = function( options ) {
1377 _.extend( this, _.pick( options || {}, 'id', 'view', 'selector' ) );
1380 // Use Backbone's self-propagating `extend` inheritance method.
1381 Region.extend = Backbone.Model.extend;
1383 _.extend( Region.prototype, {
1389 * @param {string} mode
1391 * @fires this.view#{this.id}:activate:{this._mode}
1392 * @fires this.view#{this.id}:activate
1393 * @fires this.view#{this.id}:deactivate:{this._mode}
1394 * @fires this.view#{this.id}:deactivate
1396 * @returns {wp.media.controller.Region} Returns itself to allow chaining.
1398 mode: function( mode ) {
1402 // Bail if we're trying to change to the current mode.
1403 if ( mode === this._mode ) {
1408 * Region mode deactivation event.
1410 * @event this.view#{this.id}:deactivate:{this._mode}
1411 * @event this.view#{this.id}:deactivate
1413 this.trigger('deactivate');
1416 this.render( mode );
1419 * Region mode activation event.
1421 * @event this.view#{this.id}:activate:{this._mode}
1422 * @event this.view#{this.id}:activate
1424 this.trigger('activate');
1432 * @param {string} mode
1434 * @fires this.view#{this.id}:create:{this._mode}
1435 * @fires this.view#{this.id}:create
1436 * @fires this.view#{this.id}:render:{this._mode}
1437 * @fires this.view#{this.id}:render
1439 * @returns {wp.media.controller.Region} Returns itself to allow chaining
1441 render: function( mode ) {
1442 // If the mode isn't active, activate it.
1443 if ( mode && mode !== this._mode ) {
1444 return this.mode( mode );
1447 var set = { view: null },
1451 * Create region view event.
1453 * Region view creation takes place in an event callback on the frame.
1455 * @event this.view#{this.id}:create:{this._mode}
1456 * @event this.view#{this.id}:create
1458 this.trigger( 'create', set );
1462 * Render region view event.
1464 * Region view creation takes place in an event callback on the frame.
1466 * @event this.view#{this.id}:create:{this._mode}
1467 * @event this.view#{this.id}:create
1469 this.trigger( 'render', view );
1477 * Get the region's view.
1481 * @returns {wp.media.View}
1484 return this.view.views.first( this.selector );
1488 * Set the region's view as a subview of the frame.
1492 * @param {Array|Object} views
1493 * @param {Object} [options={}]
1494 * @returns {wp.Backbone.Subviews} Subviews is returned to allow chaining
1496 set: function( views, options ) {
1498 options.add = false;
1500 return this.view.views.set( this.selector, views, options );
1504 * Trigger regional view events on the frame.
1508 * @param {string} event
1509 * @returns {undefined|wp.media.controller.Region} Returns itself to allow chaining.
1511 trigger: function( event ) {
1514 if ( ! this._mode ) {
1518 args = _.toArray( arguments );
1519 base = this.id + ':' + event;
1521 // Trigger `{this.id}:{event}:{this._mode}` event on the frame.
1522 args[0] = base + ':' + this._mode;
1523 this.view.trigger.apply( this.view, args );
1525 // Trigger `{this.id}:{event}` event on the frame.
1527 this.view.trigger.apply( this.view, args );
1532 module.exports = Region;
1534 },{}],13:[function(require,module,exports){
1538 * wp.media.controller.ReplaceImage
1540 * A state for replacing an image.
1543 * @augments wp.media.controller.Library
1544 * @augments wp.media.controller.State
1545 * @augments Backbone.Model
1547 * @param {object} [attributes] The attributes hash passed to the state.
1548 * @param {string} [attributes.id=replace-image] Unique identifier.
1549 * @param {string} [attributes.title=Replace Image] Title for the state. Displays in the media menu and the frame's title region.
1550 * @param {wp.media.model.Attachments} [attributes.library] The attachments collection to browse.
1551 * If one is not supplied, a collection of all images will be created.
1552 * @param {boolean} [attributes.multiple=false] Whether multi-select is enabled.
1553 * @param {string} [attributes.content=upload] Initial mode for the content region.
1554 * Overridden by persistent user setting if 'contentUserSetting' is true.
1555 * @param {string} [attributes.menu=default] Initial mode for the menu region.
1556 * @param {string} [attributes.router=browse] Initial mode for the router region.
1557 * @param {string} [attributes.toolbar=replace] Initial mode for the toolbar region.
1558 * @param {int} [attributes.priority=60] The priority for the state link in the media menu.
1559 * @param {boolean} [attributes.searchable=true] Whether the library is searchable.
1560 * @param {boolean|string} [attributes.filterable=uploaded] Whether the library is filterable, and if so what filters should be shown.
1561 * Accepts 'all', 'uploaded', or 'unattached'.
1562 * @param {boolean} [attributes.sortable=true] Whether the Attachments should be sortable. Depends on the orderby property being set to menuOrder on the attachments collection.
1563 * @param {boolean} [attributes.autoSelect=true] Whether an uploaded attachment should be automatically added to the selection.
1564 * @param {boolean} [attributes.describe=false] Whether to offer UI to describe attachments - e.g. captioning images in a gallery.
1565 * @param {boolean} [attributes.contentUserSetting=true] Whether the content region's mode should be set and persisted per user.
1566 * @param {boolean} [attributes.syncSelection=true] Whether the Attachments selection should be persisted from the last state.
1568 var Library = wp.media.controller.Library,
1569 l10n = wp.media.view.l10n,
1572 ReplaceImage = Library.extend({
1573 defaults: _.defaults({
1574 id: 'replace-image',
1575 title: l10n.replaceImageTitle,
1577 filterable: 'uploaded',
1582 }, Library.prototype.defaults ),
1589 initialize: function( options ) {
1590 var library, comparator;
1592 this.image = options.image;
1593 // If we haven't been provided a `library`, create a `Selection`.
1594 if ( ! this.get('library') ) {
1595 this.set( 'library', wp.media.query({ type: 'image' }) );
1598 Library.prototype.initialize.apply( this, arguments );
1600 library = this.get('library');
1601 comparator = library.comparator;
1603 // Overload the library's comparator to push items that are not in
1604 // the mirrored query to the front of the aggregate collection.
1605 library.comparator = function( a, b ) {
1606 var aInQuery = !! this.mirroring.get( a.cid ),
1607 bInQuery = !! this.mirroring.get( b.cid );
1609 if ( ! aInQuery && bInQuery ) {
1611 } else if ( aInQuery && ! bInQuery ) {
1614 return comparator.apply( this, arguments );
1618 // Add all items in the selection to the library, so any featured
1619 // images that are not initially loaded still appear.
1620 library.observe( this.get('selection') );
1626 activate: function() {
1627 this.updateSelection();
1628 Library.prototype.activate.apply( this, arguments );
1634 updateSelection: function() {
1635 var selection = this.get('selection'),
1636 attachment = this.image.attachment;
1638 selection.reset( attachment ? [ attachment ] : [] );
1642 module.exports = ReplaceImage;
1644 },{}],14:[function(require,module,exports){
1645 /*globals _, Backbone */
1648 * wp.media.controller.StateMachine
1650 * A state machine keeps track of state. It is in one state at a time,
1651 * and can change from one state to another.
1653 * States are stored as models in a Backbone collection.
1658 * @augments Backbone.Model
1660 * @mixes Backbone.Events
1662 * @param {Array} states
1664 var StateMachine = function( states ) {
1665 // @todo This is dead code. The states collection gets created in media.view.Frame._createStates.
1666 this.states = new Backbone.Collection( states );
1669 // Use Backbone's self-propagating `extend` inheritance method.
1670 StateMachine.extend = Backbone.Model.extend;
1672 _.extend( StateMachine.prototype, Backbone.Events, {
1676 * If no `id` is provided, returns the active state.
1678 * Implicitly creates states.
1680 * Ensure that the `states` collection exists so the `StateMachine`
1681 * can be used as a mixin.
1685 * @param {string} id
1686 * @returns {wp.media.controller.State} Returns a State model
1687 * from the StateMachine collection
1689 state: function( id ) {
1690 this.states = this.states || new Backbone.Collection();
1692 // Default to the active state.
1693 id = id || this._state;
1695 if ( id && ! this.states.get( id ) ) {
1696 this.states.add({ id: id });
1698 return this.states.get( id );
1702 * Sets the active state.
1704 * Bail if we're trying to select the current state, if we haven't
1705 * created the `states` collection, or are trying to select a state
1706 * that does not exist.
1710 * @param {string} id
1712 * @fires wp.media.controller.State#deactivate
1713 * @fires wp.media.controller.State#activate
1715 * @returns {wp.media.controller.StateMachine} Returns itself to allow chaining
1717 setState: function( id ) {
1718 var previous = this.state();
1720 if ( ( previous && id === previous.id ) || ! this.states || ! this.states.get( id ) ) {
1725 previous.trigger('deactivate');
1726 this._lastState = previous.id;
1730 this.state().trigger('activate');
1736 * Returns the previous active state.
1738 * Call the `state()` method with no parameters to retrieve the current
1743 * @returns {wp.media.controller.State} Returns a State model
1744 * from the StateMachine collection
1746 lastState: function() {
1747 if ( this._lastState ) {
1748 return this.state( this._lastState );
1753 // Map all event binding and triggering on a StateMachine to its `states` collection.
1754 _.each([ 'on', 'off', 'trigger' ], function( method ) {
1756 * @returns {wp.media.controller.StateMachine} Returns itself to allow chaining.
1758 StateMachine.prototype[ method ] = function() {
1759 // Ensure that the `states` collection exists so the `StateMachine`
1760 // can be used as a mixin.
1761 this.states = this.states || new Backbone.Collection();
1762 // Forward the method to the `states` collection.
1763 this.states[ method ].apply( this.states, arguments );
1768 module.exports = StateMachine;
1770 },{}],15:[function(require,module,exports){
1771 /*globals _, Backbone */
1774 * wp.media.controller.State
1776 * A state is a step in a workflow that when set will trigger the controllers
1777 * for the regions to be updated as specified in the frame.
1779 * A state has an event-driven lifecycle:
1781 * 'ready' triggers when a state is added to a state machine's collection.
1782 * 'activate' triggers when a state is activated by a state machine.
1783 * 'deactivate' triggers when a state is deactivated by a state machine.
1784 * 'reset' is not triggered automatically. It should be invoked by the
1785 * proper controller to reset the state to its default.
1788 * @augments Backbone.Model
1790 var State = Backbone.Model.extend({
1796 constructor: function() {
1797 this.on( 'activate', this._preActivate, this );
1798 this.on( 'activate', this.activate, this );
1799 this.on( 'activate', this._postActivate, this );
1800 this.on( 'deactivate', this._deactivate, this );
1801 this.on( 'deactivate', this.deactivate, this );
1802 this.on( 'reset', this.reset, this );
1803 this.on( 'ready', this._ready, this );
1804 this.on( 'ready', this.ready, this );
1806 * Call parent constructor with passed arguments
1808 Backbone.Model.apply( this, arguments );
1809 this.on( 'change:menu', this._updateMenu, this );
1812 * Ready event callback.
1817 ready: function() {},
1820 * Activate event callback.
1825 activate: function() {},
1828 * Deactivate event callback.
1833 deactivate: function() {},
1836 * Reset event callback.
1841 reset: function() {},
1847 _ready: function() {
1855 _preActivate: function() {
1863 _postActivate: function() {
1864 this.on( 'change:menu', this._menu, this );
1865 this.on( 'change:titleMode', this._title, this );
1866 this.on( 'change:content', this._content, this );
1867 this.on( 'change:toolbar', this._toolbar, this );
1869 this.frame.on( 'title:render:default', this._renderTitle, this );
1882 _deactivate: function() {
1883 this.active = false;
1885 this.frame.off( 'title:render:default', this._renderTitle, this );
1887 this.off( 'change:menu', this._menu, this );
1888 this.off( 'change:titleMode', this._title, this );
1889 this.off( 'change:content', this._content, this );
1890 this.off( 'change:toolbar', this._toolbar, this );
1897 _title: function() {
1898 this.frame.title.render( this.get('titleMode') || 'default' );
1905 _renderTitle: function( view ) {
1906 view.$el.text( this.get('title') || '' );
1913 _router: function() {
1914 var router = this.frame.router,
1915 mode = this.get('router'),
1918 this.frame.$el.toggleClass( 'hide-router', ! mode );
1923 this.frame.router.render( mode );
1925 view = router.get();
1926 if ( view && view.select ) {
1927 view.select( this.frame.content.mode() );
1936 var menu = this.frame.menu,
1937 mode = this.get('menu'),
1940 this.frame.$el.toggleClass( 'hide-menu', ! mode );
1948 if ( view && view.select ) {
1949 view.select( this.id );
1957 _updateMenu: function() {
1958 var previous = this.previous('menu'),
1959 menu = this.get('menu');
1962 this.frame.off( 'menu:render:' + previous, this._renderMenu, this );
1966 this.frame.on( 'menu:render:' + menu, this._renderMenu, this );
1971 * Create a view in the media menu for the state.
1976 * @param {media.view.Menu} view The menu view.
1978 _renderMenu: function( view ) {
1979 var menuItem = this.get('menuItem'),
1980 title = this.get('title'),
1981 priority = this.get('priority');
1983 if ( ! menuItem && title ) {
1984 menuItem = { text: title };
1987 menuItem.priority = priority;
1995 view.set( this.id, menuItem );
1999 _.each(['toolbar','content'], function( region ) {
2003 State.prototype[ '_' + region ] = function() {
2004 var mode = this.get( region );
2006 this.frame[ region ].render( mode );
2011 module.exports = State;
2013 },{}],16:[function(require,module,exports){
2017 * wp.media.selectionSync
2019 * Sync an attachments selection in a state with another state.
2021 * Allows for selecting multiple images in the Insert Media workflow, and then
2022 * switching to the Insert Gallery workflow while preserving the attachments selection.
2026 var selectionSync = {
2030 syncSelection: function() {
2031 var selection = this.get('selection'),
2032 manager = this.frame._selection;
2034 if ( ! this.get('syncSelection') || ! manager || ! selection ) {
2038 // If the selection supports multiple items, validate the stored
2039 // attachments based on the new selection's conditions. Record
2040 // the attachments that are not included; we'll maintain a
2041 // reference to those. Other attachments are considered in flux.
2042 if ( selection.multiple ) {
2043 selection.reset( [], { silent: true });
2044 selection.validateAll( manager.attachments );
2045 manager.difference = _.difference( manager.attachments.models, selection.models );
2048 // Sync the selection's single item with the master.
2049 selection.single( manager.single );
2053 * Record the currently active attachments, which is a combination
2054 * of the selection's attachments and the set of selected
2055 * attachments that this specific selection considered invalid.
2056 * Reset the difference and record the single attachment.
2060 recordSelection: function() {
2061 var selection = this.get('selection'),
2062 manager = this.frame._selection;
2064 if ( ! this.get('syncSelection') || ! manager || ! selection ) {
2068 if ( selection.multiple ) {
2069 manager.attachments.reset( selection.toArray().concat( manager.difference ) );
2070 manager.difference = [];
2072 manager.attachments.add( selection.toArray() );
2075 manager.single = selection._single;
2079 module.exports = selectionSync;
2081 },{}],17:[function(require,module,exports){
2082 /*globals wp, jQuery, _, Backbone */
2084 var media = wp.media,
2088 media.isTouchDevice = ( 'ontouchend' in document );
2090 // Link any localized strings.
2091 l10n = media.view.l10n = window._wpMediaViewsL10n || {};
2093 // Link any settings.
2094 media.view.settings = l10n.settings || {};
2095 delete l10n.settings;
2097 // Copy the `post` setting over to the model settings.
2098 media.model.settings.post = media.view.settings.post;
2100 // Check if the browser supports CSS 3.0 transitions
2101 $.support.transition = (function(){
2102 var style = document.documentElement.style,
2104 WebkitTransition: 'webkitTransitionEnd',
2105 MozTransition: 'transitionend',
2106 OTransition: 'oTransitionEnd otransitionend',
2107 transition: 'transitionend'
2110 transition = _.find( _.keys( transitions ), function( transition ) {
2111 return ! _.isUndefined( style[ transition ] );
2114 return transition && {
2115 end: transitions[ transition ]
2120 * A shared event bus used to provide events into
2121 * the media workflows that 3rd-party devs can use to hook
2124 media.events = _.extend( {}, Backbone.Events );
2127 * Makes it easier to bind events using transitions.
2129 * @param {string} selector
2130 * @param {Number} sensitivity
2131 * @returns {Promise}
2133 media.transition = function( selector, sensitivity ) {
2134 var deferred = $.Deferred();
2136 sensitivity = sensitivity || 2000;
2138 if ( $.support.transition ) {
2139 if ( ! (selector instanceof $) ) {
2140 selector = $( selector );
2143 // Resolve the deferred when the first element finishes animating.
2144 selector.first().one( $.support.transition.end, deferred.resolve );
2146 // Just in case the event doesn't trigger, fire a callback.
2147 _.delay( deferred.resolve, sensitivity );
2149 // Otherwise, execute on the spot.
2154 return deferred.promise();
2157 media.controller.Region = require( './controllers/region.js' );
2158 media.controller.StateMachine = require( './controllers/state-machine.js' );
2159 media.controller.State = require( './controllers/state.js' );
2161 media.selectionSync = require( './utils/selection-sync.js' );
2162 media.controller.Library = require( './controllers/library.js' );
2163 media.controller.ImageDetails = require( './controllers/image-details.js' );
2164 media.controller.GalleryEdit = require( './controllers/gallery-edit.js' );
2165 media.controller.GalleryAdd = require( './controllers/gallery-add.js' );
2166 media.controller.CollectionEdit = require( './controllers/collection-edit.js' );
2167 media.controller.CollectionAdd = require( './controllers/collection-add.js' );
2168 media.controller.FeaturedImage = require( './controllers/featured-image.js' );
2169 media.controller.ReplaceImage = require( './controllers/replace-image.js' );
2170 media.controller.EditImage = require( './controllers/edit-image.js' );
2171 media.controller.MediaLibrary = require( './controllers/media-library.js' );
2172 media.controller.Embed = require( './controllers/embed.js' );
2173 media.controller.Cropper = require( './controllers/cropper.js' );
2175 media.View = require( './views/view.js' );
2176 media.view.Frame = require( './views/frame.js' );
2177 media.view.MediaFrame = require( './views/media-frame.js' );
2178 media.view.MediaFrame.Select = require( './views/frame/select.js' );
2179 media.view.MediaFrame.Post = require( './views/frame/post.js' );
2180 media.view.MediaFrame.ImageDetails = require( './views/frame/image-details.js' );
2181 media.view.Modal = require( './views/modal.js' );
2182 media.view.FocusManager = require( './views/focus-manager.js' );
2183 media.view.UploaderWindow = require( './views/uploader/window.js' );
2184 media.view.EditorUploader = require( './views/uploader/editor.js' );
2185 media.view.UploaderInline = require( './views/uploader/inline.js' );
2186 media.view.UploaderStatus = require( './views/uploader/status.js' );
2187 media.view.UploaderStatusError = require( './views/uploader/status-error.js' );
2188 media.view.Toolbar = require( './views/toolbar.js' );
2189 media.view.Toolbar.Select = require( './views/toolbar/select.js' );
2190 media.view.Toolbar.Embed = require( './views/toolbar/embed.js' );
2191 media.view.Button = require( './views/button.js' );
2192 media.view.ButtonGroup = require( './views/button-group.js' );
2193 media.view.PriorityList = require( './views/priority-list.js' );
2194 media.view.MenuItem = require( './views/menu-item.js' );
2195 media.view.Menu = require( './views/menu.js' );
2196 media.view.RouterItem = require( './views/router-item.js' );
2197 media.view.Router = require( './views/router.js' );
2198 media.view.Sidebar = require( './views/sidebar.js' );
2199 media.view.Attachment = require( './views/attachment.js' );
2200 media.view.Attachment.Library = require( './views/attachment/library.js' );
2201 media.view.Attachment.EditLibrary = require( './views/attachment/edit-library.js' );
2202 media.view.Attachments = require( './views/attachments.js' );
2203 media.view.Search = require( './views/search.js' );
2204 media.view.AttachmentFilters = require( './views/attachment-filters.js' );
2205 media.view.DateFilter = require( './views/attachment-filters/date.js' );
2206 media.view.AttachmentFilters.Uploaded = require( './views/attachment-filters/uploaded.js' );
2207 media.view.AttachmentFilters.All = require( './views/attachment-filters/all.js' );
2208 media.view.AttachmentsBrowser = require( './views/attachments/browser.js' );
2209 media.view.Selection = require( './views/selection.js' );
2210 media.view.Attachment.Selection = require( './views/attachment/selection.js' );
2211 media.view.Attachments.Selection = require( './views/attachments/selection.js' );
2212 media.view.Attachment.EditSelection = require( './views/attachment/edit-selection.js' );
2213 media.view.Settings = require( './views/settings.js' );
2214 media.view.Settings.AttachmentDisplay = require( './views/settings/attachment-display.js' );
2215 media.view.Settings.Gallery = require( './views/settings/gallery.js' );
2216 media.view.Settings.Playlist = require( './views/settings/playlist.js' );
2217 media.view.Attachment.Details = require( './views/attachment/details.js' );
2218 media.view.AttachmentCompat = require( './views/attachment-compat.js' );
2219 media.view.Iframe = require( './views/iframe.js' );
2220 media.view.Embed = require( './views/embed.js' );
2221 media.view.Label = require( './views/label.js' );
2222 media.view.EmbedUrl = require( './views/embed/url.js' );
2223 media.view.EmbedLink = require( './views/embed/link.js' );
2224 media.view.EmbedImage = require( './views/embed/image.js' );
2225 media.view.ImageDetails = require( './views/image-details.js' );
2226 media.view.Cropper = require( './views/cropper.js' );
2227 media.view.EditImage = require( './views/edit-image.js' );
2228 media.view.Spinner = require( './views/spinner.js' );
2230 },{"./controllers/collection-add.js":1,"./controllers/collection-edit.js":2,"./controllers/cropper.js":3,"./controllers/edit-image.js":4,"./controllers/embed.js":5,"./controllers/featured-image.js":6,"./controllers/gallery-add.js":7,"./controllers/gallery-edit.js":8,"./controllers/image-details.js":9,"./controllers/library.js":10,"./controllers/media-library.js":11,"./controllers/region.js":12,"./controllers/replace-image.js":13,"./controllers/state-machine.js":14,"./controllers/state.js":15,"./utils/selection-sync.js":16,"./views/attachment-compat.js":18,"./views/attachment-filters.js":19,"./views/attachment-filters/all.js":20,"./views/attachment-filters/date.js":21,"./views/attachment-filters/uploaded.js":22,"./views/attachment.js":23,"./views/attachment/details.js":24,"./views/attachment/edit-library.js":25,"./views/attachment/edit-selection.js":26,"./views/attachment/library.js":27,"./views/attachment/selection.js":28,"./views/attachments.js":29,"./views/attachments/browser.js":30,"./views/attachments/selection.js":31,"./views/button-group.js":32,"./views/button.js":33,"./views/cropper.js":34,"./views/edit-image.js":35,"./views/embed.js":36,"./views/embed/image.js":37,"./views/embed/link.js":38,"./views/embed/url.js":39,"./views/focus-manager.js":40,"./views/frame.js":41,"./views/frame/image-details.js":42,"./views/frame/post.js":43,"./views/frame/select.js":44,"./views/iframe.js":45,"./views/image-details.js":46,"./views/label.js":47,"./views/media-frame.js":48,"./views/menu-item.js":49,"./views/menu.js":50,"./views/modal.js":51,"./views/priority-list.js":52,"./views/router-item.js":53,"./views/router.js":54,"./views/search.js":55,"./views/selection.js":56,"./views/settings.js":57,"./views/settings/attachment-display.js":58,"./views/settings/gallery.js":59,"./views/settings/playlist.js":60,"./views/sidebar.js":61,"./views/spinner.js":62,"./views/toolbar.js":63,"./views/toolbar/embed.js":64,"./views/toolbar/select.js":65,"./views/uploader/editor.js":66,"./views/uploader/inline.js":67,"./views/uploader/status-error.js":68,"./views/uploader/status.js":69,"./views/uploader/window.js":70,"./views/view.js":71}],18:[function(require,module,exports){
2234 * wp.media.view.AttachmentCompat
2236 * A view to display fields added via the `attachment_fields_to_edit` filter.
2239 * @augments wp.media.View
2240 * @augments wp.Backbone.View
2241 * @augments Backbone.View
2243 var View = wp.media.View,
2246 AttachmentCompat = View.extend({
2248 className: 'compat-item',
2251 'submit': 'preventDefault',
2252 'change input': 'save',
2253 'change select': 'save',
2254 'change textarea': 'save'
2257 initialize: function() {
2258 this.listenTo( this.model, 'change:compat', this.render );
2261 * @returns {wp.media.view.AttachmentCompat} Returns itself to allow chaining
2263 dispose: function() {
2264 if ( this.$(':focus').length ) {
2268 * call 'dispose' directly on the parent class
2270 return View.prototype.dispose.apply( this, arguments );
2273 * @returns {wp.media.view.AttachmentCompat} Returns itself to allow chaining
2275 render: function() {
2276 var compat = this.model.get('compat');
2277 if ( ! compat || ! compat.item ) {
2281 this.views.detach();
2282 this.$el.html( compat.item );
2283 this.views.render();
2287 * @param {Object} event
2289 preventDefault: function( event ) {
2290 event.preventDefault();
2293 * @param {Object} event
2295 save: function( event ) {
2299 event.preventDefault();
2302 _.each( this.$el.serializeArray(), function( pair ) {
2303 data[ pair.name ] = pair.value;
2306 this.controller.trigger( 'attachment:compat:waiting', ['waiting'] );
2307 this.model.saveCompat( data ).always( _.bind( this.postSave, this ) );
2310 postSave: function() {
2311 this.controller.trigger( 'attachment:compat:ready', ['ready'] );
2315 module.exports = AttachmentCompat;
2317 },{}],19:[function(require,module,exports){
2318 /*globals _, jQuery */
2321 * wp.media.view.AttachmentFilters
2324 * @augments wp.media.View
2325 * @augments wp.Backbone.View
2326 * @augments Backbone.View
2331 AttachmentFilters = wp.media.View.extend({
2333 className: 'attachment-filters',
2334 id: 'media-attachment-filters',
2342 initialize: function() {
2343 this.createFilters();
2344 _.extend( this.filters, this.options.filters );
2346 // Build `<option>` elements.
2347 this.$el.html( _.chain( this.filters ).map( function( filter, value ) {
2349 el: $( '<option></option>' ).val( value ).html( filter.text )[0],
2350 priority: filter.priority || 50
2352 }, this ).sortBy('priority').pluck('el').value() );
2354 this.listenTo( this.model, 'change', this.select );
2361 createFilters: function() {
2366 * When the selected filter changes, update the Attachment Query properties to match.
2368 change: function() {
2369 var filter = this.filters[ this.el.value ];
2371 this.model.set( filter.props );
2375 select: function() {
2376 var model = this.model,
2378 props = model.toJSON();
2380 _.find( this.filters, function( filter, id ) {
2381 var equal = _.all( filter.props, function( prop, key ) {
2382 return prop === ( _.isUndefined( props[ key ] ) ? null : props[ key ] );
2390 this.$el.val( value );
2394 module.exports = AttachmentFilters;
2396 },{}],20:[function(require,module,exports){
2400 * wp.media.view.AttachmentFilters.All
2403 * @augments wp.media.view.AttachmentFilters
2404 * @augments wp.media.View
2405 * @augments wp.Backbone.View
2406 * @augments Backbone.View
2408 var l10n = wp.media.view.l10n,
2411 All = wp.media.view.AttachmentFilters.extend({
2412 createFilters: function() {
2415 _.each( wp.media.view.settings.mimeTypes || {}, function( text, key ) {
2429 text: l10n.allMediaItems,
2440 if ( wp.media.view.settings.post.id ) {
2441 filters.uploaded = {
2442 text: l10n.uploadedToThisPost,
2446 uploadedTo: wp.media.view.settings.post.id,
2447 orderby: 'menuOrder',
2454 filters.unattached = {
2455 text: l10n.unattached,
2460 orderby: 'menuOrder',
2466 if ( wp.media.view.settings.mediaTrash &&
2467 this.controller.isModeActive( 'grid' ) ) {
2482 this.filters = filters;
2486 module.exports = All;
2488 },{}],21:[function(require,module,exports){
2492 * A filter dropdown for month/dates.
2495 * @augments wp.media.view.AttachmentFilters
2496 * @augments wp.media.View
2497 * @augments wp.Backbone.View
2498 * @augments Backbone.View
2500 var l10n = wp.media.view.l10n,
2503 DateFilter = wp.media.view.AttachmentFilters.extend({
2504 id: 'media-attachment-date-filters',
2506 createFilters: function() {
2508 _.each( wp.media.view.settings.months || {}, function( value, index ) {
2509 filters[ index ] = {
2513 monthnum: value.month
2518 text: l10n.allDates,
2525 this.filters = filters;
2529 module.exports = DateFilter;
2531 },{}],22:[function(require,module,exports){
2535 * wp.media.view.AttachmentFilters.Uploaded
2538 * @augments wp.media.view.AttachmentFilters
2539 * @augments wp.media.View
2540 * @augments wp.Backbone.View
2541 * @augments Backbone.View
2543 var l10n = wp.media.view.l10n,
2546 Uploaded = wp.media.view.AttachmentFilters.extend({
2547 createFilters: function() {
2548 var type = this.model.get('type'),
2549 types = wp.media.view.settings.mimeTypes,
2552 if ( types && type ) {
2553 text = types[ type ];
2558 text: text || l10n.allMediaItems,
2568 text: l10n.uploadedToThisPost,
2570 uploadedTo: wp.media.view.settings.post.id,
2571 orderby: 'menuOrder',
2578 text: l10n.unattached,
2581 orderby: 'menuOrder',
2590 module.exports = Uploaded;
2592 },{}],23:[function(require,module,exports){
2593 /*globals wp, _, jQuery */
2596 * wp.media.view.Attachment
2599 * @augments wp.media.View
2600 * @augments wp.Backbone.View
2601 * @augments Backbone.View
2603 var View = wp.media.View,
2607 Attachment = View.extend({
2609 className: 'attachment',
2610 template: wp.template('attachment'),
2612 attributes: function() {
2616 'aria-label': this.model.get( 'title' ),
2617 'aria-checked': false,
2618 'data-id': this.model.get( 'id' )
2623 'click .js--select-attachment': 'toggleSelectionHandler',
2624 'change [data-setting]': 'updateSetting',
2625 'change [data-setting] input': 'updateSetting',
2626 'change [data-setting] select': 'updateSetting',
2627 'change [data-setting] textarea': 'updateSetting',
2628 'click .close': 'removeFromLibrary',
2629 'click .check': 'checkClickHandler',
2630 'click a': 'preventDefault',
2631 'keydown .close': 'removeFromLibrary',
2632 'keydown': 'toggleSelectionHandler'
2637 initialize: function() {
2638 var selection = this.options.selection,
2639 options = _.defaults( this.options, {
2640 rerenderOnModelChange: true
2643 if ( options.rerenderOnModelChange ) {
2644 this.listenTo( this.model, 'change', this.render );
2646 this.listenTo( this.model, 'change:percent', this.progress );
2648 this.listenTo( this.model, 'change:title', this._syncTitle );
2649 this.listenTo( this.model, 'change:caption', this._syncCaption );
2650 this.listenTo( this.model, 'change:artist', this._syncArtist );
2651 this.listenTo( this.model, 'change:album', this._syncAlbum );
2653 // Update the selection.
2654 this.listenTo( this.model, 'add', this.select );
2655 this.listenTo( this.model, 'remove', this.deselect );
2657 selection.on( 'reset', this.updateSelect, this );
2658 // Update the model's details view.
2659 this.listenTo( this.model, 'selection:single selection:unsingle', this.details );
2660 this.details( this.model, this.controller.state().get('selection') );
2663 this.listenTo( this.controller, 'attachment:compat:waiting attachment:compat:ready', this.updateSave );
2666 * @returns {wp.media.view.Attachment} Returns itself to allow chaining
2668 dispose: function() {
2669 var selection = this.options.selection;
2671 // Make sure all settings are saved before removing the view.
2675 selection.off( null, null, this );
2678 * call 'dispose' directly on the parent class
2680 View.prototype.dispose.apply( this, arguments );
2684 * @returns {wp.media.view.Attachment} Returns itself to allow chaining
2686 render: function() {
2687 var options = _.defaults( this.model.toJSON(), {
2688 orientation: 'landscape',
2704 options.buttons = this.buttons;
2705 options.describe = this.controller.state().get('describe');
2707 if ( 'image' === options.type ) {
2708 options.size = this.imageSize();
2712 if ( options.nonces ) {
2713 options.can.remove = !! options.nonces['delete'];
2714 options.can.save = !! options.nonces.update;
2717 if ( this.controller.state().get('allowLocalEdits') ) {
2718 options.allowLocalEdits = true;
2721 if ( options.uploading && ! options.percent ) {
2722 options.percent = 0;
2725 this.views.detach();
2726 this.$el.html( this.template( options ) );
2728 this.$el.toggleClass( 'uploading', options.uploading );
2730 if ( options.uploading ) {
2731 this.$bar = this.$('.media-progress-bar div');
2736 // Check if the model is selected.
2737 this.updateSelect();
2739 // Update the save status.
2742 this.views.render();
2747 progress: function() {
2748 if ( this.$bar && this.$bar.length ) {
2749 this.$bar.width( this.model.get('percent') + '%' );
2754 * @param {Object} event
2756 toggleSelectionHandler: function( event ) {
2759 // Don't do anything inside inputs.
2760 if ( 'INPUT' === event.target.nodeName ) {
2764 // Catch arrow events
2765 if ( 37 === event.keyCode || 38 === event.keyCode || 39 === event.keyCode || 40 === event.keyCode ) {
2766 this.controller.trigger( 'attachment:keydown:arrow', event );
2770 // Catch enter and space events
2771 if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) {
2775 event.preventDefault();
2777 // In the grid view, bubble up an edit:attachment event to the controller.
2778 if ( this.controller.isModeActive( 'grid' ) ) {
2779 if ( this.controller.isModeActive( 'edit' ) ) {
2780 // Pass the current target to restore focus when closing
2781 this.controller.trigger( 'edit:attachment', this.model, event.currentTarget );
2785 if ( this.controller.isModeActive( 'select' ) ) {
2790 if ( event.shiftKey ) {
2792 } else if ( event.ctrlKey || event.metaKey ) {
2796 this.toggleSelection({
2800 this.controller.trigger( 'selection:toggle' );
2803 * @param {Object} options
2805 toggleSelection: function( options ) {
2806 var collection = this.collection,
2807 selection = this.options.selection,
2809 method = options && options.method,
2810 single, models, singleIndex, modelIndex;
2812 if ( ! selection ) {
2816 single = selection.single();
2817 method = _.isUndefined( method ) ? selection.multiple : method;
2819 // If the `method` is set to `between`, select all models that
2820 // exist between the current and the selected model.
2821 if ( 'between' === method && single && selection.multiple ) {
2822 // If the models are the same, short-circuit.
2823 if ( single === model ) {
2827 singleIndex = collection.indexOf( single );
2828 modelIndex = collection.indexOf( this.model );
2830 if ( singleIndex < modelIndex ) {
2831 models = collection.models.slice( singleIndex, modelIndex + 1 );
2833 models = collection.models.slice( modelIndex, singleIndex + 1 );
2836 selection.add( models );
2837 selection.single( model );
2840 // If the `method` is set to `toggle`, just flip the selection
2841 // status, regardless of whether the model is the single model.
2842 } else if ( 'toggle' === method ) {
2843 selection[ this.selected() ? 'remove' : 'add' ]( model );
2844 selection.single( model );
2846 } else if ( 'add' === method ) {
2847 selection.add( model );
2848 selection.single( model );
2852 // Fixes bug that loses focus when selecting a featured image
2857 if ( method !== 'add' ) {
2861 if ( this.selected() ) {
2862 // If the model is the single model, remove it.
2863 // If it is not the same as the single model,
2864 // it now becomes the single model.
2865 selection[ single === model ? 'remove' : 'single' ]( model );
2867 // If the model is not selected, run the `method` on the
2868 // selection. By default, we `reset` the selection, but the
2869 // `method` can be set to `add` the model to the selection.
2870 selection[ method ]( model );
2871 selection.single( model );
2875 updateSelect: function() {
2876 this[ this.selected() ? 'select' : 'deselect' ]();
2879 * @returns {unresolved|Boolean}
2881 selected: function() {
2882 var selection = this.options.selection;
2884 return !! selection.get( this.model.cid );
2888 * @param {Backbone.Model} model
2889 * @param {Backbone.Collection} collection
2891 select: function( model, collection ) {
2892 var selection = this.options.selection,
2893 controller = this.controller;
2895 // Check if a selection exists and if it's the collection provided.
2896 // If they're not the same collection, bail; we're in another
2897 // selection's event loop.
2898 if ( ! selection || ( collection && collection !== selection ) ) {
2902 // Bail if the model is already selected.
2903 if ( this.$el.hasClass( 'selected' ) ) {
2907 // Add 'selected' class to model, set aria-checked to true.
2908 this.$el.addClass( 'selected' ).attr( 'aria-checked', true );
2909 // Make the checkbox tabable, except in media grid (bulk select mode).
2910 if ( ! ( controller.isModeActive( 'grid' ) && controller.isModeActive( 'select' ) ) ) {
2911 this.$( '.check' ).attr( 'tabindex', '0' );
2915 * @param {Backbone.Model} model
2916 * @param {Backbone.Collection} collection
2918 deselect: function( model, collection ) {
2919 var selection = this.options.selection;
2921 // Check if a selection exists and if it's the collection provided.
2922 // If they're not the same collection, bail; we're in another
2923 // selection's event loop.
2924 if ( ! selection || ( collection && collection !== selection ) ) {
2927 this.$el.removeClass( 'selected' ).attr( 'aria-checked', false )
2928 .find( '.check' ).attr( 'tabindex', '-1' );
2931 * @param {Backbone.Model} model
2932 * @param {Backbone.Collection} collection
2934 details: function( model, collection ) {
2935 var selection = this.options.selection,
2938 if ( selection !== collection ) {
2942 details = selection.single();
2943 this.$el.toggleClass( 'details', details === this.model );
2946 * @param {Object} event
2948 preventDefault: function( event ) {
2949 event.preventDefault();
2952 * @param {string} size
2955 imageSize: function( size ) {
2956 var sizes = this.model.get('sizes'), matched = false;
2958 size = size || 'medium';
2960 // Use the provided image size if possible.
2962 if ( sizes[ size ] ) {
2963 matched = sizes[ size ];
2964 } else if ( sizes.large ) {
2965 matched = sizes.large;
2966 } else if ( sizes.thumbnail ) {
2967 matched = sizes.thumbnail;
2968 } else if ( sizes.full ) {
2969 matched = sizes.full;
2973 return _.clone( matched );
2978 url: this.model.get('url'),
2979 width: this.model.get('width'),
2980 height: this.model.get('height'),
2981 orientation: this.model.get('orientation')
2985 * @param {Object} event
2987 updateSetting: function( event ) {
2988 var $setting = $( event.target ).closest('[data-setting]'),
2991 if ( ! $setting.length ) {
2995 setting = $setting.data('setting');
2996 value = event.target.value;
2998 if ( this.model.get( setting ) !== value ) {
2999 this.save( setting, value );
3004 * Pass all the arguments to the model's save method.
3006 * Records the aggregate status of all save requests and updates the
3007 * view's classes accordingly.
3011 save = this._save = this._save || { status: 'ready' },
3012 request = this.model.save.apply( this.model, arguments ),
3013 requests = save.requests ? $.when( request, save.requests ) : request;
3015 // If we're waiting to remove 'Saved.', stop.
3016 if ( save.savedTimer ) {
3017 clearTimeout( save.savedTimer );
3020 this.updateSave('waiting');
3021 save.requests = requests;
3022 requests.always( function() {
3023 // If we've performed another request since this one, bail.
3024 if ( save.requests !== requests ) {
3028 view.updateSave( requests.state() === 'resolved' ? 'complete' : 'error' );
3029 save.savedTimer = setTimeout( function() {
3030 view.updateSave('ready');
3031 delete save.savedTimer;
3036 * @param {string} status
3037 * @returns {wp.media.view.Attachment} Returns itself to allow chaining
3039 updateSave: function( status ) {
3040 var save = this._save = this._save || { status: 'ready' };
3042 if ( status && status !== save.status ) {
3043 this.$el.removeClass( 'save-' + save.status );
3044 save.status = status;
3047 this.$el.addClass( 'save-' + save.status );
3051 updateAll: function() {
3052 var $settings = this.$('[data-setting]'),
3056 changed = _.chain( $settings ).map( function( el ) {
3057 var $input = $('input, textarea, select, [value]', el ),
3060 if ( ! $input.length ) {
3064 setting = $(el).data('setting');
3065 value = $input.val();
3067 // Record the value if it changed.
3068 if ( model.get( setting ) !== value ) {
3069 return [ setting, value ];
3071 }).compact().object().value();
3073 if ( ! _.isEmpty( changed ) ) {
3074 model.save( changed );
3078 * @param {Object} event
3080 removeFromLibrary: function( event ) {
3081 // Catch enter and space events
3082 if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) {
3086 // Stop propagation so the model isn't selected.
3087 event.stopPropagation();
3089 this.collection.remove( this.model );
3093 * Add the model if it isn't in the selection, if it is in the selection,
3096 * @param {[type]} event [description]
3097 * @return {[type]} [description]
3099 checkClickHandler: function ( event ) {
3100 var selection = this.options.selection;
3101 if ( ! selection ) {
3104 event.stopPropagation();
3105 if ( selection.where( { id: this.model.get( 'id' ) } ).length ) {
3106 selection.remove( this.model );
3107 // Move focus back to the attachment tile (from the check).
3110 selection.add( this.model );
3115 // Ensure settings remain in sync between attachment views.
3117 caption: '_syncCaption',
3118 title: '_syncTitle',
3119 artist: '_syncArtist',
3121 }, function( method, setting ) {
3123 * @param {Backbone.Model} model
3124 * @param {string} value
3125 * @returns {wp.media.view.Attachment} Returns itself to allow chaining
3127 Attachment.prototype[ method ] = function( model, value ) {
3128 var $setting = this.$('[data-setting="' + setting + '"]');
3130 if ( ! $setting.length ) {
3134 // If the updated value is in sync with the value in the DOM, there
3135 // is no need to re-render. If we're currently editing the value,
3136 // it will automatically be in sync, suppressing the re-render for
3137 // the view we're editing, while updating any others.
3138 if ( value === $setting.find('input, textarea, select, [value]').val() ) {
3142 return this.render();
3146 module.exports = Attachment;
3148 },{}],24:[function(require,module,exports){
3152 * wp.media.view.Attachment.Details
3155 * @augments wp.media.view.Attachment
3156 * @augments wp.media.View
3157 * @augments wp.Backbone.View
3158 * @augments Backbone.View
3160 var Attachment = wp.media.view.Attachment,
3161 l10n = wp.media.view.l10n,
3164 Details = Attachment.extend({
3166 className: 'attachment-details',
3167 template: wp.template('attachment-details'),
3169 attributes: function() {
3172 'data-id': this.model.get( 'id' )
3177 'change [data-setting]': 'updateSetting',
3178 'change [data-setting] input': 'updateSetting',
3179 'change [data-setting] select': 'updateSetting',
3180 'change [data-setting] textarea': 'updateSetting',
3181 'click .delete-attachment': 'deleteAttachment',
3182 'click .trash-attachment': 'trashAttachment',
3183 'click .untrash-attachment': 'untrashAttachment',
3184 'click .edit-attachment': 'editAttachment',
3185 'click .refresh-attachment': 'refreshAttachment',
3186 'keydown': 'toggleSelectionHandler'
3189 initialize: function() {
3190 this.options = _.defaults( this.options, {
3191 rerenderOnModelChange: false
3194 this.on( 'ready', this.initialFocus );
3195 // Call 'initialize' directly on the parent class.
3196 Attachment.prototype.initialize.apply( this, arguments );
3199 initialFocus: function() {
3200 if ( ! wp.media.isTouchDevice ) {
3201 this.$( ':input' ).eq( 0 ).focus();
3205 * @param {Object} event
3207 deleteAttachment: function( event ) {
3208 event.preventDefault();
3210 if ( window.confirm( l10n.warnDelete ) ) {
3211 this.model.destroy();
3212 // Keep focus inside media modal
3213 // after image is deleted
3214 this.controller.modal.focusManager.focus();
3218 * @param {Object} event
3220 trashAttachment: function( event ) {
3221 var library = this.controller.library;
3222 event.preventDefault();
3224 if ( wp.media.view.settings.mediaTrash &&
3225 'edit-metadata' === this.controller.content.mode() ) {
3227 this.model.set( 'status', 'trash' );
3228 this.model.save().done( function() {
3229 library._requery( true );
3232 this.model.destroy();
3236 * @param {Object} event
3238 untrashAttachment: function( event ) {
3239 var library = this.controller.library;
3240 event.preventDefault();
3242 this.model.set( 'status', 'inherit' );
3243 this.model.save().done( function() {
3244 library._requery( true );
3248 * @param {Object} event
3250 editAttachment: function( event ) {
3251 var editState = this.controller.states.get( 'edit-image' );
3252 if ( window.imageEdit && editState ) {
3253 event.preventDefault();
3255 editState.set( 'image', this.model );
3256 this.controller.setState( 'edit-image' );
3258 this.$el.addClass('needs-refresh');
3262 * @param {Object} event
3264 refreshAttachment: function( event ) {
3265 this.$el.removeClass('needs-refresh');
3266 event.preventDefault();
3270 * When reverse tabbing(shift+tab) out of the right details panel, deliver
3271 * the focus to the item in the list that was being edited.
3273 * @param {Object} event
3275 toggleSelectionHandler: function( event ) {
3276 if ( 'keydown' === event.type && 9 === event.keyCode && event.shiftKey && event.target === this.$( ':tabbable' ).get( 0 ) ) {
3277 this.controller.trigger( 'attachment:details:shift-tab', event );
3281 if ( 37 === event.keyCode || 38 === event.keyCode || 39 === event.keyCode || 40 === event.keyCode ) {
3282 this.controller.trigger( 'attachment:keydown:arrow', event );
3288 module.exports = Details;
3290 },{}],25:[function(require,module,exports){
3294 * wp.media.view.Attachment.EditLibrary
3297 * @augments wp.media.view.Attachment
3298 * @augments wp.media.View
3299 * @augments wp.Backbone.View
3300 * @augments Backbone.View
3302 var EditLibrary = wp.media.view.Attachment.extend({
3308 module.exports = EditLibrary;
3310 },{}],26:[function(require,module,exports){
3314 * wp.media.view.Attachments.EditSelection
3317 * @augments wp.media.view.Attachment.Selection
3318 * @augments wp.media.view.Attachment
3319 * @augments wp.media.View
3320 * @augments wp.Backbone.View
3321 * @augments Backbone.View
3323 var EditSelection = wp.media.view.Attachment.Selection.extend({
3329 module.exports = EditSelection;
3331 },{}],27:[function(require,module,exports){
3335 * wp.media.view.Attachment.Library
3338 * @augments wp.media.view.Attachment
3339 * @augments wp.media.View
3340 * @augments wp.Backbone.View
3341 * @augments Backbone.View
3343 var Library = wp.media.view.Attachment.extend({
3349 module.exports = Library;
3351 },{}],28:[function(require,module,exports){
3355 * wp.media.view.Attachment.Selection
3358 * @augments wp.media.view.Attachment
3359 * @augments wp.media.View
3360 * @augments wp.Backbone.View
3361 * @augments Backbone.View
3363 var Selection = wp.media.view.Attachment.extend({
3364 className: 'attachment selection',
3366 // On click, just select the model, instead of removing the model from
3368 toggleSelection: function() {
3369 this.options.selection.single( this.model );
3373 module.exports = Selection;
3375 },{}],29:[function(require,module,exports){
3376 /*globals wp, _, jQuery */
3379 * wp.media.view.Attachments
3382 * @augments wp.media.View
3383 * @augments wp.Backbone.View
3384 * @augments Backbone.View
3386 var View = wp.media.View,
3390 Attachments = View.extend({
3392 className: 'attachments',
3398 initialize: function() {
3399 this.el.id = _.uniqueId('__attachments-view-');
3401 _.defaults( this.options, {
3402 refreshSensitivity: wp.media.isTouchDevice ? 300 : 200,
3403 refreshThreshold: 3,
3404 AttachmentView: wp.media.view.Attachment,
3407 idealColumnWidth: $( window ).width() < 640 ? 135 : 150
3410 this._viewsByCid = {};
3411 this.$window = $( window );
3412 this.resizeEvent = 'resize.media-modal-columns';
3414 this.collection.on( 'add', function( attachment ) {
3415 this.views.add( this.createAttachmentView( attachment ), {
3416 at: this.collection.indexOf( attachment )
3420 this.collection.on( 'remove', function( attachment ) {
3421 var view = this._viewsByCid[ attachment.cid ];
3422 delete this._viewsByCid[ attachment.cid ];
3429 this.collection.on( 'reset', this.render, this );
3431 this.listenTo( this.controller, 'library:selection:add', this.attachmentFocus );
3433 // Throttle the scroll handler and bind this.
3434 this.scroll = _.chain( this.scroll ).bind( this ).throttle( this.options.refreshSensitivity ).value();
3436 this.options.scrollElement = this.options.scrollElement || this.el;
3437 $( this.options.scrollElement ).on( 'scroll', this.scroll );
3439 this.initSortable();
3441 _.bindAll( this, 'setColumns' );
3443 if ( this.options.resize ) {
3444 this.on( 'ready', this.bindEvents );
3445 this.controller.on( 'open', this.setColumns );
3447 // Call this.setColumns() after this view has been rendered in the DOM so
3448 // attachments get proper width applied.
3449 _.defer( this.setColumns, this );
3453 bindEvents: function() {
3454 this.$window.off( this.resizeEvent ).on( this.resizeEvent, _.debounce( this.setColumns, 50 ) );
3457 attachmentFocus: function() {
3458 this.$( 'li:first' ).focus();
3461 restoreFocus: function() {
3462 this.$( 'li.selected:first' ).focus();
3465 arrowEvent: function( event ) {
3466 var attachments = this.$el.children( 'li' ),
3467 perRow = this.columns,
3468 index = attachments.filter( ':focus' ).index(),
3469 row = ( index + 1 ) <= perRow ? 1 : Math.ceil( ( index + 1 ) / perRow );
3471 if ( index === -1 ) {
3476 if ( 37 === event.keyCode ) {
3477 if ( 0 === index ) {
3480 attachments.eq( index - 1 ).focus();
3484 if ( 38 === event.keyCode ) {
3488 attachments.eq( index - perRow ).focus();
3492 if ( 39 === event.keyCode ) {
3493 if ( attachments.length === index ) {
3496 attachments.eq( index + 1 ).focus();
3500 if ( 40 === event.keyCode ) {
3501 if ( Math.ceil( attachments.length / perRow ) === row ) {
3504 attachments.eq( index + perRow ).focus();
3508 dispose: function() {
3509 this.collection.props.off( null, null, this );
3510 if ( this.options.resize ) {
3511 this.$window.off( this.resizeEvent );
3515 * call 'dispose' directly on the parent class
3517 View.prototype.dispose.apply( this, arguments );
3520 setColumns: function() {
3521 var prev = this.columns,
3522 width = this.$el.width();
3525 this.columns = Math.min( Math.round( width / this.options.idealColumnWidth ), 12 ) || 1;
3527 if ( ! prev || prev !== this.columns ) {
3528 this.$el.closest( '.media-frame-content' ).attr( 'data-columns', this.columns );
3533 initSortable: function() {
3534 var collection = this.collection;
3536 if ( wp.media.isTouchDevice || ! this.options.sortable || ! $.fn.sortable ) {
3540 this.$el.sortable( _.extend({
3541 // If the `collection` has a `comparator`, disable sorting.
3542 disabled: !! collection.comparator,
3544 // Change the position of the attachment as soon as the
3545 // mouse pointer overlaps a thumbnail.
3546 tolerance: 'pointer',
3548 // Record the initial `index` of the dragged model.
3549 start: function( event, ui ) {
3550 ui.item.data('sortableIndexStart', ui.item.index());
3553 // Update the model's index in the collection.
3554 // Do so silently, as the view is already accurate.
3555 update: function( event, ui ) {
3556 var model = collection.at( ui.item.data('sortableIndexStart') ),
3557 comparator = collection.comparator;
3559 // Temporarily disable the comparator to prevent `add`
3561 delete collection.comparator;
3563 // Silently shift the model to its new index.
3564 collection.remove( model, {
3567 collection.add( model, {
3572 // Restore the comparator.
3573 collection.comparator = comparator;
3575 // Fire the `reset` event to ensure other collections sync.
3576 collection.trigger( 'reset', collection );
3578 // If the collection is sorted by menu order,
3579 // update the menu order.
3580 collection.saveMenuOrder();
3582 }, this.options.sortable ) );
3584 // If the `orderby` property is changed on the `collection`,
3585 // check to see if we have a `comparator`. If so, disable sorting.
3586 collection.props.on( 'change:orderby', function() {
3587 this.$el.sortable( 'option', 'disabled', !! collection.comparator );
3590 this.collection.props.on( 'change:orderby', this.refreshSortable, this );
3591 this.refreshSortable();
3594 refreshSortable: function() {
3595 if ( wp.media.isTouchDevice || ! this.options.sortable || ! $.fn.sortable ) {
3599 // If the `collection` has a `comparator`, disable sorting.
3600 var collection = this.collection,
3601 orderby = collection.props.get('orderby'),
3602 enabled = 'menuOrder' === orderby || ! collection.comparator;
3604 this.$el.sortable( 'option', 'disabled', ! enabled );
3608 * @param {wp.media.model.Attachment} attachment
3609 * @returns {wp.media.View}
3611 createAttachmentView: function( attachment ) {
3612 var view = new this.options.AttachmentView({
3613 controller: this.controller,
3615 collection: this.collection,
3616 selection: this.options.selection
3619 return this._viewsByCid[ attachment.cid ] = view;
3622 prepare: function() {
3623 // Create all of the Attachment views, and replace
3624 // the list in a single DOM operation.
3625 if ( this.collection.length ) {
3626 this.views.set( this.collection.map( this.createAttachmentView, this ) );
3628 // If there are no elements, clear the views and load some.
3631 this.collection.more().done( this.scroll );
3636 // Trigger the scroll event to check if we're within the
3637 // threshold to query for additional attachments.
3641 scroll: function() {
3643 el = this.options.scrollElement,
3644 scrollTop = el.scrollTop,
3647 // The scroll event occurs on the document, but the element
3648 // that should be checked is the document body.
3649 if ( el === document ) {
3651 scrollTop = $(document).scrollTop();
3654 if ( ! $(el).is(':visible') || ! this.collection.hasMore() ) {
3658 toolbar = this.views.parent.toolbar;
3660 // Show the spinner only if we are close to the bottom.
3661 if ( el.scrollHeight - ( scrollTop + el.clientHeight ) < el.clientHeight / 3 ) {
3662 toolbar.get('spinner').show();
3665 if ( el.scrollHeight < scrollTop + ( el.clientHeight * this.options.refreshThreshold ) ) {
3666 this.collection.more().done(function() {
3668 toolbar.get('spinner').hide();
3674 module.exports = Attachments;
3676 },{}],30:[function(require,module,exports){
3677 /*globals wp, _, jQuery */
3680 * wp.media.view.AttachmentsBrowser
3683 * @augments wp.media.View
3684 * @augments wp.Backbone.View
3685 * @augments Backbone.View
3687 * @param {object} [options] The options hash passed to the view.
3688 * @param {boolean|string} [options.filters=false] Which filters to show in the browser's toolbar.
3689 * Accepts 'uploaded' and 'all'.
3690 * @param {boolean} [options.search=true] Whether to show the search interface in the
3691 * browser's toolbar.
3692 * @param {boolean} [options.date=true] Whether to show the date filter in the
3693 * browser's toolbar.
3694 * @param {boolean} [options.display=false] Whether to show the attachments display settings
3695 * view in the sidebar.
3696 * @param {boolean|string} [options.sidebar=true] Whether to create a sidebar for the browser.
3697 * Accepts true, false, and 'errors'.
3699 var View = wp.media.View,
3700 mediaTrash = wp.media.view.settings.mediaTrash,
3701 l10n = wp.media.view.l10n,
3705 AttachmentsBrowser = View.extend({
3707 className: 'attachments-browser',
3709 initialize: function() {
3710 _.defaults( this.options, {
3716 AttachmentView: wp.media.view.Attachment.Library
3719 this.listenTo( this.controller, 'toggle:upload:attachment', _.bind( this.toggleUploader, this ) );
3720 this.controller.on( 'edit:selection', this.editSelection );
3721 this.createToolbar();
3722 if ( this.options.sidebar ) {
3723 this.createSidebar();
3725 this.createUploader();
3726 this.createAttachments();
3727 this.updateContent();
3729 if ( ! this.options.sidebar || 'errors' === this.options.sidebar ) {
3730 this.$el.addClass( 'hide-sidebar' );
3732 if ( 'errors' === this.options.sidebar ) {
3733 this.$el.addClass( 'sidebar-for-errors' );
3737 this.collection.on( 'add remove reset', this.updateContent, this );
3740 editSelection: function( modal ) {
3741 modal.$( '.media-button-backToLibrary' ).focus();
3745 * @returns {wp.media.view.AttachmentsBrowser} Returns itself to allow chaining
3747 dispose: function() {
3748 this.options.selection.off( null, null, this );
3749 View.prototype.dispose.apply( this, arguments );
3753 createToolbar: function() {
3754 var LibraryViewSwitcher, Filters, toolbarOptions;
3757 controller: this.controller
3760 if ( this.controller.isModeActive( 'grid' ) ) {
3761 toolbarOptions.className = 'media-toolbar wp-filter';
3765 * @member {wp.media.view.Toolbar}
3767 this.toolbar = new wp.media.view.Toolbar( toolbarOptions );
3769 this.views.add( this.toolbar );
3771 this.toolbar.set( 'spinner', new wp.media.view.Spinner({
3775 if ( -1 !== $.inArray( this.options.filters, [ 'uploaded', 'all' ] ) ) {
3776 // "Filters" will return a <select>, need to render
3777 // screen reader text before
3778 this.toolbar.set( 'filtersLabel', new wp.media.view.Label({
3779 value: l10n.filterByType,
3781 'for': 'media-attachment-filters'
3786 if ( 'uploaded' === this.options.filters ) {
3787 this.toolbar.set( 'filters', new wp.media.view.AttachmentFilters.Uploaded({
3788 controller: this.controller,
3789 model: this.collection.props,
3793 Filters = new wp.media.view.AttachmentFilters.All({
3794 controller: this.controller,
3795 model: this.collection.props,
3799 this.toolbar.set( 'filters', Filters.render() );
3803 // Feels odd to bring the global media library switcher into the Attachment
3804 // browser view. Is this a use case for doAction( 'add:toolbar-items:attachments-browser', this.toolbar );
3805 // which the controller can tap into and add this view?
3806 if ( this.controller.isModeActive( 'grid' ) ) {
3807 LibraryViewSwitcher = View.extend({
3808 className: 'view-switch media-grid-view-switch',
3809 template: wp.template( 'media-library-view-switcher')
3812 this.toolbar.set( 'libraryViewSwitcher', new LibraryViewSwitcher({
3813 controller: this.controller,
3817 // DateFilter is a <select>, screen reader text needs to be rendered before
3818 this.toolbar.set( 'dateFilterLabel', new wp.media.view.Label({
3819 value: l10n.filterByDate,
3821 'for': 'media-attachment-date-filters'
3825 this.toolbar.set( 'dateFilter', new wp.media.view.DateFilter({
3826 controller: this.controller,
3827 model: this.collection.props,
3831 // BulkSelection is a <div> with subviews, including screen reader text
3832 this.toolbar.set( 'selectModeToggleButton', new wp.media.view.SelectModeToggleButton({
3833 text: l10n.bulkSelect,
3834 controller: this.controller,
3838 this.toolbar.set( 'deleteSelectedButton', new wp.media.view.DeleteSelectedButton({
3842 text: mediaTrash ? l10n.trashSelected : l10n.deleteSelected,
3843 controller: this.controller,
3846 var changed = [], removed = [],
3847 selection = this.controller.state().get( 'selection' ),
3848 library = this.controller.state().get( 'library' );
3850 if ( ! selection.length ) {
3854 if ( ! mediaTrash && ! window.confirm( l10n.warnBulkDelete ) ) {
3859 'trash' !== selection.at( 0 ).get( 'status' ) &&
3860 ! window.confirm( l10n.warnBulkTrash ) ) {
3865 selection.each( function( model ) {
3866 if ( ! model.get( 'nonces' )['delete'] ) {
3867 removed.push( model );
3871 if ( mediaTrash && 'trash' === model.get( 'status' ) ) {
3872 model.set( 'status', 'inherit' );
3873 changed.push( model.save() );
3874 removed.push( model );
3875 } else if ( mediaTrash ) {
3876 model.set( 'status', 'trash' );
3877 changed.push( model.save() );
3878 removed.push( model );
3880 model.destroy({wait: true});
3884 if ( changed.length ) {
3885 selection.remove( removed );
3887 $.when.apply( null, changed ).then( _.bind( function() {
3888 library._requery( true );
3889 this.controller.trigger( 'selection:action:done' );
3892 this.controller.trigger( 'selection:action:done' );
3898 this.toolbar.set( 'deleteSelectedPermanentlyButton', new wp.media.view.DeleteSelectedPermanentlyButton({
3902 text: l10n.deleteSelected,
3903 controller: this.controller,
3906 var removed = [], selection = this.controller.state().get( 'selection' );
3908 if ( ! selection.length || ! window.confirm( l10n.warnBulkDelete ) ) {
3912 selection.each( function( model ) {
3913 if ( ! model.get( 'nonces' )['delete'] ) {
3914 removed.push( model );
3921 selection.remove( removed );
3922 this.controller.trigger( 'selection:action:done' );
3927 } else if ( this.options.date ) {
3928 // DateFilter is a <select>, screen reader text needs to be rendered before
3929 this.toolbar.set( 'dateFilterLabel', new wp.media.view.Label({
3930 value: l10n.filterByDate,
3932 'for': 'media-attachment-date-filters'
3936 this.toolbar.set( 'dateFilter', new wp.media.view.DateFilter({
3937 controller: this.controller,
3938 model: this.collection.props,
3943 if ( this.options.search ) {
3944 // Search is an input, screen reader text needs to be rendered before
3945 this.toolbar.set( 'searchLabel', new wp.media.view.Label({
3946 value: l10n.searchMediaLabel,
3948 'for': 'media-search-input'
3952 this.toolbar.set( 'search', new wp.media.view.Search({
3953 controller: this.controller,
3954 model: this.collection.props,
3959 if ( this.options.dragInfo ) {
3960 this.toolbar.set( 'dragInfo', new View({
3961 el: $( '<div class="instructions">' + l10n.dragInfo + '</div>' )[0],
3966 if ( this.options.suggestedWidth && this.options.suggestedHeight ) {
3967 this.toolbar.set( 'suggestedDimensions', new View({
3968 el: $( '<div class="instructions">' + l10n.suggestedDimensions + ' ' + this.options.suggestedWidth + ' × ' + this.options.suggestedHeight + '</div>' )[0],
3974 updateContent: function() {
3978 if ( this.controller.isModeActive( 'grid' ) ) {
3979 noItemsView = view.attachmentsNoResults;
3981 noItemsView = view.uploader;
3984 if ( ! this.collection.length ) {
3985 this.toolbar.get( 'spinner' ).show();
3986 this.dfd = this.collection.more().done( function() {
3987 if ( ! view.collection.length ) {
3988 noItemsView.$el.removeClass( 'hidden' );
3990 noItemsView.$el.addClass( 'hidden' );
3992 view.toolbar.get( 'spinner' ).hide();
3995 noItemsView.$el.addClass( 'hidden' );
3996 view.toolbar.get( 'spinner' ).hide();
4000 createUploader: function() {
4001 this.uploader = new wp.media.view.UploaderInline({
4002 controller: this.controller,
4004 message: this.controller.isModeActive( 'grid' ) ? '' : l10n.noItemsFound,
4005 canClose: this.controller.isModeActive( 'grid' )
4008 this.uploader.hide();
4009 this.views.add( this.uploader );
4012 toggleUploader: function() {
4013 if ( this.uploader.$el.hasClass( 'hidden' ) ) {
4014 this.uploader.show();
4016 this.uploader.hide();
4020 createAttachments: function() {
4021 this.attachments = new wp.media.view.Attachments({
4022 controller: this.controller,
4023 collection: this.collection,
4024 selection: this.options.selection,
4026 sortable: this.options.sortable,
4027 scrollElement: this.options.scrollElement,
4028 idealColumnWidth: this.options.idealColumnWidth,
4030 // The single `Attachment` view to be used in the `Attachments` view.
4031 AttachmentView: this.options.AttachmentView
4034 // Add keydown listener to the instance of the Attachments view
4035 this.attachments.listenTo( this.controller, 'attachment:keydown:arrow', this.attachments.arrowEvent );
4036 this.attachments.listenTo( this.controller, 'attachment:details:shift-tab', this.attachments.restoreFocus );
4038 this.views.add( this.attachments );
4041 if ( this.controller.isModeActive( 'grid' ) ) {
4042 this.attachmentsNoResults = new View({
4043 controller: this.controller,
4047 this.attachmentsNoResults.$el.addClass( 'hidden no-media' );
4048 this.attachmentsNoResults.$el.html( l10n.noMedia );
4050 this.views.add( this.attachmentsNoResults );
4054 createSidebar: function() {
4055 var options = this.options,
4056 selection = options.selection,
4057 sidebar = this.sidebar = new wp.media.view.Sidebar({
4058 controller: this.controller
4061 this.views.add( sidebar );
4063 if ( this.controller.uploader ) {
4064 sidebar.set( 'uploads', new wp.media.view.UploaderStatus({
4065 controller: this.controller,
4070 selection.on( 'selection:single', this.createSingle, this );
4071 selection.on( 'selection:unsingle', this.disposeSingle, this );
4073 if ( selection.single() ) {
4074 this.createSingle();
4078 createSingle: function() {
4079 var sidebar = this.sidebar,
4080 single = this.options.selection.single();
4082 sidebar.set( 'details', new wp.media.view.Attachment.Details({
4083 controller: this.controller,
4088 sidebar.set( 'compat', new wp.media.view.AttachmentCompat({
4089 controller: this.controller,
4094 if ( this.options.display ) {
4095 sidebar.set( 'display', new wp.media.view.Settings.AttachmentDisplay({
4096 controller: this.controller,
4097 model: this.model.display( single ),
4100 userSettings: this.model.get('displayUserSettings')
4104 // Show the sidebar on mobile
4105 if ( this.model.id === 'insert' ) {
4106 sidebar.$el.addClass( 'visible' );
4110 disposeSingle: function() {
4111 var sidebar = this.sidebar;
4112 sidebar.unset('details');
4113 sidebar.unset('compat');
4114 sidebar.unset('display');
4115 // Hide the sidebar on mobile
4116 sidebar.$el.removeClass( 'visible' );
4120 module.exports = AttachmentsBrowser;
4122 },{}],31:[function(require,module,exports){
4126 * wp.media.view.Attachments.Selection
4129 * @augments wp.media.view.Attachments
4130 * @augments wp.media.View
4131 * @augments wp.Backbone.View
4132 * @augments Backbone.View
4134 var Attachments = wp.media.view.Attachments,
4137 Selection = Attachments.extend({
4139 initialize: function() {
4140 _.defaults( this.options, {
4144 // The single `Attachment` view to be used in the `Attachments` view.
4145 AttachmentView: wp.media.view.Attachment.Selection
4147 // Call 'initialize' directly on the parent class.
4148 return Attachments.prototype.initialize.apply( this, arguments );
4152 module.exports = Selection;
4154 },{}],32:[function(require,module,exports){
4155 /*globals _, Backbone */
4158 * wp.media.view.ButtonGroup
4161 * @augments wp.media.View
4162 * @augments wp.Backbone.View
4163 * @augments Backbone.View
4168 ButtonGroup = wp.media.View.extend({
4170 className: 'button-group button-large media-button-group',
4172 initialize: function() {
4174 * @member {wp.media.view.Button[]}
4176 this.buttons = _.map( this.options.buttons || [], function( button ) {
4177 if ( button instanceof Backbone.View ) {
4180 return new wp.media.view.Button( button ).render();
4184 delete this.options.buttons;
4186 if ( this.options.classes ) {
4187 this.$el.addClass( this.options.classes );
4192 * @returns {wp.media.view.ButtonGroup}
4194 render: function() {
4195 this.$el.html( $( _.pluck( this.buttons, 'el' ) ).detach() );
4200 module.exports = ButtonGroup;
4202 },{}],33:[function(require,module,exports){
4203 /*globals _, Backbone */
4206 * wp.media.view.Button
4209 * @augments wp.media.View
4210 * @augments wp.Backbone.View
4211 * @augments Backbone.View
4213 var Button = wp.media.View.extend({
4215 className: 'media-button',
4216 attributes: { href: '#' },
4229 initialize: function() {
4231 * Create a model with the provided `defaults`.
4233 * @member {Backbone.Model}
4235 this.model = new Backbone.Model( this.defaults );
4237 // If any of the `options` have a key from `defaults`, apply its
4238 // value to the `model` and remove it from the `options object.
4239 _.each( this.defaults, function( def, key ) {
4240 var value = this.options[ key ];
4241 if ( _.isUndefined( value ) ) {
4245 this.model.set( key, value );
4246 delete this.options[ key ];
4249 this.listenTo( this.model, 'change', this.render );
4252 * @returns {wp.media.view.Button} Returns itself to allow chaining
4254 render: function() {
4255 var classes = [ 'button', this.className ],
4256 model = this.model.toJSON();
4258 if ( model.style ) {
4259 classes.push( 'button-' + model.style );
4263 classes.push( 'button-' + model.size );
4266 classes = _.uniq( classes.concat( this.options.classes ) );
4267 this.el.className = classes.join(' ');
4269 this.$el.attr( 'disabled', model.disabled );
4270 this.$el.text( this.model.get('text') );
4275 * @param {Object} event
4277 click: function( event ) {
4278 if ( '#' === this.attributes.href ) {
4279 event.preventDefault();
4282 if ( this.options.click && ! this.model.get('disabled') ) {
4283 this.options.click.apply( this, arguments );
4288 module.exports = Button;
4290 },{}],34:[function(require,module,exports){
4291 /*globals wp, _, jQuery */
4294 * wp.media.view.Cropper
4296 * Uses the imgAreaSelect plugin to allow a user to crop an image.
4298 * Takes imgAreaSelect options from
4299 * wp.customize.HeaderControl.calculateImageSelectOptions via
4300 * wp.customize.HeaderControl.openMM.
4303 * @augments wp.media.View
4304 * @augments wp.Backbone.View
4305 * @augments Backbone.View
4307 var View = wp.media.View,
4308 UploaderStatus = wp.media.view.UploaderStatus,
4309 l10n = wp.media.view.l10n,
4313 Cropper = View.extend({
4314 className: 'crop-content',
4315 template: wp.template('crop-content'),
4316 initialize: function() {
4317 _.bindAll(this, 'onImageLoad');
4320 this.controller.frame.on('content:error:crop', this.onError, this);
4321 this.$image = this.$el.find('.crop-image');
4322 this.$image.on('load', this.onImageLoad);
4323 $(window).on('resize.cropper', _.debounce(this.onImageLoad, 250));
4325 remove: function() {
4326 $(window).off('resize.cropper');
4329 View.prototype.remove.apply(this, arguments);
4331 prepare: function() {
4333 title: l10n.cropYourImage,
4334 url: this.options.attachment.get('url')
4337 onImageLoad: function() {
4338 var imgOptions = this.controller.get('imgSelectOptions');
4339 if (typeof imgOptions === 'function') {
4340 imgOptions = imgOptions(this.options.attachment, this.controller);
4343 imgOptions = _.extend(imgOptions, {parent: this.$el});
4344 this.trigger('image-loaded');
4345 this.controller.imgSelect = this.$image.imgAreaSelect(imgOptions);
4347 onError: function() {
4348 var filename = this.options.attachment.get('filename');
4350 this.views.add( '.upload-errors', new wp.media.view.UploaderStatusError({
4351 filename: UploaderStatus.prototype.filename(filename),
4352 message: window._wpMediaViewsL10n.cropError
4357 module.exports = Cropper;
4359 },{}],35:[function(require,module,exports){
4363 * wp.media.view.EditImage
4366 * @augments wp.media.View
4367 * @augments wp.Backbone.View
4368 * @augments Backbone.View
4370 var View = wp.media.View,
4373 EditImage = View.extend({
4374 className: 'image-editor',
4375 template: wp.template('image-editor'),
4377 initialize: function( options ) {
4378 this.editor = window.imageEdit;
4379 this.controller = options.controller;
4380 View.prototype.initialize.apply( this, arguments );
4383 prepare: function() {
4384 return this.model.toJSON();
4387 loadEditor: function() {
4388 var dfd = this.editor.open( this.model.get('id'), this.model.get('nonces').edit, this );
4389 dfd.done( _.bind( this.focus, this ) );
4393 this.$( '.imgedit-submit .button' ).eq( 0 ).focus();
4397 var lastState = this.controller.lastState();
4398 this.controller.setState( lastState );
4401 refresh: function() {
4406 var lastState = this.controller.lastState();
4408 this.model.fetch().done( _.bind( function() {
4409 this.controller.setState( lastState );
4415 module.exports = EditImage;
4417 },{}],36:[function(require,module,exports){
4419 * wp.media.view.Embed
4422 * @augments wp.media.View
4423 * @augments wp.Backbone.View
4424 * @augments Backbone.View
4426 var Embed = wp.media.View.extend({
4427 className: 'media-embed',
4429 initialize: function() {
4431 * @member {wp.media.view.EmbedUrl}
4433 this.url = new wp.media.view.EmbedUrl({
4434 controller: this.controller,
4435 model: this.model.props
4438 this.views.set([ this.url ]);
4440 this.listenTo( this.model, 'change:type', this.refresh );
4441 this.listenTo( this.model, 'change:loading', this.loading );
4445 * @param {Object} view
4447 settings: function( view ) {
4448 if ( this._settings ) {
4449 this._settings.remove();
4451 this._settings = view;
4452 this.views.add( view );
4455 refresh: function() {
4456 var type = this.model.get('type'),
4459 if ( 'image' === type ) {
4460 constructor = wp.media.view.EmbedImage;
4461 } else if ( 'link' === type ) {
4462 constructor = wp.media.view.EmbedLink;
4467 this.settings( new constructor({
4468 controller: this.controller,
4469 model: this.model.props,
4474 loading: function() {
4475 this.$el.toggleClass( 'embed-loading', this.model.get('loading') );
4479 module.exports = Embed;
4481 },{}],37:[function(require,module,exports){
4485 * wp.media.view.EmbedImage
4488 * @augments wp.media.view.Settings.AttachmentDisplay
4489 * @augments wp.media.view.Settings
4490 * @augments wp.media.View
4491 * @augments wp.Backbone.View
4492 * @augments Backbone.View
4494 var AttachmentDisplay = wp.media.view.Settings.AttachmentDisplay,
4497 EmbedImage = AttachmentDisplay.extend({
4498 className: 'embed-media-settings',
4499 template: wp.template('embed-image-settings'),
4501 initialize: function() {
4503 * Call `initialize` directly on parent class with passed arguments
4505 AttachmentDisplay.prototype.initialize.apply( this, arguments );
4506 this.listenTo( this.model, 'change:url', this.updateImage );
4509 updateImage: function() {
4510 this.$('img').attr( 'src', this.model.get('url') );
4514 module.exports = EmbedImage;
4516 },{}],38:[function(require,module,exports){
4517 /*globals wp, _, jQuery */
4520 * wp.media.view.EmbedLink
4523 * @augments wp.media.view.Settings
4524 * @augments wp.media.View
4525 * @augments wp.Backbone.View
4526 * @augments Backbone.View
4531 EmbedLink = wp.media.view.Settings.extend({
4532 className: 'embed-link-settings',
4533 template: wp.template('embed-link-settings'),
4535 initialize: function() {
4536 this.spinner = $('<span class="spinner" />');
4537 this.$el.append( this.spinner[0] );
4538 this.listenTo( this.model, 'change:url', this.updateoEmbed );
4541 updateoEmbed: _.debounce( function() {
4542 var url = this.model.get( 'url' );
4544 // clear out previous results
4545 this.$('.embed-container').hide().find('.embed-preview').empty();
4546 this.$( '.setting' ).hide();
4548 // only proceed with embed if the field contains more than 6 characters
4549 if ( url && url.length < 6 ) {
4557 // check if they haven't typed in 500 ms
4558 if ( $('#embed-url-field').val() !== this.model.get('url') ) {
4562 wp.ajax.send( 'parse-embed', {
4564 post_ID: wp.media.view.settings.post.id,
4565 shortcode: '[embed]' + this.model.get('url') + '[/embed]'
4568 .done( _.bind( this.renderoEmbed, this ) )
4569 .fail( _.bind( this.renderFail, this ) );
4572 renderFail: function () {
4573 this.$( '.link-text' ).show();
4576 renderoEmbed: function( response ) {
4577 var html = ( response && response.body ) || '';
4580 this.$('.embed-container').show().find('.embed-preview').html( html );
4587 module.exports = EmbedLink;
4589 },{}],39:[function(require,module,exports){
4590 /*globals wp, _, jQuery */
4593 * wp.media.view.EmbedUrl
4596 * @augments wp.media.View
4597 * @augments wp.Backbone.View
4598 * @augments Backbone.View
4600 var View = wp.media.View,
4604 EmbedUrl = View.extend({
4606 className: 'embed-url',
4614 initialize: function() {
4615 this.$input = $('<input id="embed-url-field" type="url" />').val( this.model.get('url') );
4616 this.input = this.$input[0];
4618 this.spinner = $('<span class="spinner" />')[0];
4619 this.$el.append([ this.input, this.spinner ]);
4621 this.listenTo( this.model, 'change:url', this.render );
4623 if ( this.model.get( 'url' ) ) {
4624 _.delay( _.bind( function () {
4625 this.model.trigger( 'change:url' );
4630 * @returns {wp.media.view.EmbedUrl} Returns itself to allow chaining
4632 render: function() {
4633 var $input = this.$input;
4635 if ( $input.is(':focus') ) {
4639 this.input.value = this.model.get('url') || 'http://';
4641 * Call `render` directly on parent class with passed arguments
4643 View.prototype.render.apply( this, arguments );
4648 if ( ! wp.media.isTouchDevice ) {
4653 url: function( event ) {
4654 this.model.set( 'url', event.target.value );
4658 * If the input is visible, focus and select its contents.
4661 var $input = this.$input;
4662 if ( $input.is(':visible') ) {
4663 $input.focus()[0].select();
4668 module.exports = EmbedUrl;
4670 },{}],40:[function(require,module,exports){
4672 * wp.media.view.FocusManager
4675 * @augments wp.media.View
4676 * @augments wp.Backbone.View
4677 * @augments Backbone.View
4679 var FocusManager = wp.media.View.extend({
4682 'keydown': 'constrainTabbing'
4685 focus: function() { // Reset focus on first left menu item
4686 this.$('.media-menu-item').first().focus();
4689 * @param {Object} event
4691 constrainTabbing: function( event ) {
4694 // Look for the tab key.
4695 if ( 9 !== event.keyCode ) {
4699 // Skip the file input added by Plupload.
4700 tabbables = this.$( ':tabbable' ).not( '.moxie-shim input[type="file"]' );
4702 // Keep tab focus within media modal while it's open
4703 if ( tabbables.last()[0] === event.target && ! event.shiftKey ) {
4704 tabbables.first().focus();
4706 } else if ( tabbables.first()[0] === event.target && event.shiftKey ) {
4707 tabbables.last().focus();
4714 module.exports = FocusManager;
4716 },{}],41:[function(require,module,exports){
4717 /*globals _, Backbone */
4720 * wp.media.view.Frame
4722 * A frame is a composite view consisting of one or more regions and one or more
4725 * @see wp.media.controller.State
4726 * @see wp.media.controller.Region
4729 * @augments wp.media.View
4730 * @augments wp.Backbone.View
4731 * @augments Backbone.View
4732 * @mixes wp.media.controller.StateMachine
4734 var Frame = wp.media.View.extend({
4735 initialize: function() {
4736 _.defaults( this.options, {
4739 this._createRegions();
4740 this._createStates();
4741 this._createModes();
4744 _createRegions: function() {
4745 // Clone the regions array.
4746 this.regions = this.regions ? this.regions.slice() : [];
4748 // Initialize regions.
4749 _.each( this.regions, function( region ) {
4750 this[ region ] = new wp.media.controller.Region({
4753 selector: '.media-frame-' + region
4758 * Create the frame's states.
4760 * @see wp.media.controller.State
4761 * @see wp.media.controller.StateMachine
4763 * @fires wp.media.controller.State#ready
4765 _createStates: function() {
4766 // Create the default `states` collection.
4767 this.states = new Backbone.Collection( null, {
4768 model: wp.media.controller.State
4771 // Ensure states have a reference to the frame.
4772 this.states.on( 'add', function( model ) {
4774 model.trigger('ready');
4777 if ( this.options.states ) {
4778 this.states.add( this.options.states );
4783 * A frame can be in a mode or multiple modes at one time.
4785 * For example, the manage media frame can be in the `Bulk Select` or `Edit` mode.
4787 _createModes: function() {
4788 // Store active "modes" that the frame is in. Unrelated to region modes.
4789 this.activeModes = new Backbone.Collection();
4790 this.activeModes.on( 'add remove reset', _.bind( this.triggerModeEvents, this ) );
4792 _.each( this.options.mode, function( mode ) {
4793 this.activateMode( mode );
4797 * Reset all states on the frame to their defaults.
4799 * @returns {wp.media.view.Frame} Returns itself to allow chaining
4802 this.states.invoke( 'trigger', 'reset' );
4806 * Map activeMode collection events to the frame.
4808 triggerModeEvents: function( model, collection, options ) {
4809 var collectionEvent,
4812 remove: 'deactivate'
4815 // Probably a better way to do this.
4816 _.each( options, function( value, key ) {
4818 collectionEvent = key;
4822 if ( ! _.has( modeEventMap, collectionEvent ) ) {
4826 eventToTrigger = model.get('id') + ':' + modeEventMap[collectionEvent];
4827 this.trigger( eventToTrigger );
4830 * Activate a mode on the frame.
4832 * @param string mode Mode ID.
4833 * @returns {this} Returns itself to allow chaining.
4835 activateMode: function( mode ) {
4836 // Bail if the mode is already active.
4837 if ( this.isModeActive( mode ) ) {
4840 this.activeModes.add( [ { id: mode } ] );
4841 // Add a CSS class to the frame so elements can be styled for the mode.
4842 this.$el.addClass( 'mode-' + mode );
4847 * Deactivate a mode on the frame.
4849 * @param string mode Mode ID.
4850 * @returns {this} Returns itself to allow chaining.
4852 deactivateMode: function( mode ) {
4853 // Bail if the mode isn't active.
4854 if ( ! this.isModeActive( mode ) ) {
4857 this.activeModes.remove( this.activeModes.where( { id: mode } ) );
4858 this.$el.removeClass( 'mode-' + mode );
4860 * Frame mode deactivation event.
4862 * @event this#{mode}:deactivate
4864 this.trigger( mode + ':deactivate' );
4869 * Check if a mode is enabled on the frame.
4871 * @param string mode Mode ID.
4874 isModeActive: function( mode ) {
4875 return Boolean( this.activeModes.where( { id: mode } ).length );
4879 // Make the `Frame` a `StateMachine`.
4880 _.extend( Frame.prototype, wp.media.controller.StateMachine.prototype );
4882 module.exports = Frame;
4884 },{}],42:[function(require,module,exports){
4888 * wp.media.view.MediaFrame.ImageDetails
4890 * A media frame for manipulating an image that's already been inserted
4894 * @augments wp.media.view.MediaFrame.Select
4895 * @augments wp.media.view.MediaFrame
4896 * @augments wp.media.view.Frame
4897 * @augments wp.media.View
4898 * @augments wp.Backbone.View
4899 * @augments Backbone.View
4900 * @mixes wp.media.controller.StateMachine
4902 var Select = wp.media.view.MediaFrame.Select,
4903 l10n = wp.media.view.l10n,
4906 ImageDetails = Select.extend({
4910 menu: 'image-details',
4911 content: 'image-details',
4912 toolbar: 'image-details',
4914 title: l10n.imageDetailsTitle,
4918 initialize: function( options ) {
4919 this.image = new wp.media.model.PostImage( options.metadata );
4920 this.options.selection = new wp.media.model.Selection( this.image.attachment, { multiple: false } );
4921 Select.prototype.initialize.apply( this, arguments );
4924 bindHandlers: function() {
4925 Select.prototype.bindHandlers.apply( this, arguments );
4926 this.on( 'menu:create:image-details', this.createMenu, this );
4927 this.on( 'content:create:image-details', this.imageDetailsContent, this );
4928 this.on( 'content:render:edit-image', this.editImageContent, this );
4929 this.on( 'toolbar:render:image-details', this.renderImageDetailsToolbar, this );
4930 // override the select toolbar
4931 this.on( 'toolbar:render:replace', this.renderReplaceImageToolbar, this );
4934 createStates: function() {
4936 new wp.media.controller.ImageDetails({
4940 new wp.media.controller.ReplaceImage({
4941 id: 'replace-image',
4942 library: wp.media.query( { type: 'image' } ),
4945 title: l10n.imageReplaceTitle,
4948 displaySettings: true
4950 new wp.media.controller.EditImage( {
4952 selection: this.options.selection
4957 imageDetailsContent: function( options ) {
4958 options.view = new wp.media.view.ImageDetails({
4960 model: this.state().image,
4961 attachment: this.state().image.attachment
4965 editImageContent: function() {
4966 var state = this.state(),
4967 model = state.get('image'),
4974 view = new wp.media.view.EditImage( { model: model, controller: this } ).render();
4976 this.content.set( view );
4978 // after bringing in the frame, load the actual editor via an ajax call
4983 renderImageDetailsToolbar: function() {
4984 this.toolbar.set( new wp.media.view.Toolbar({
4993 var controller = this.controller,
4994 state = controller.state();
4998 // not sure if we want to use wp.media.string.image which will create a shortcode or
4999 // perhaps wp.html.string to at least to build the <img />
5000 state.trigger( 'update', controller.image.toJSON() );
5002 // Restore and reset the default state.
5003 controller.setState( controller.options.state );
5011 renderReplaceImageToolbar: function() {
5013 lastState = frame.lastState(),
5014 previous = lastState && lastState.id;
5016 this.toolbar.set( new wp.media.view.Toolbar({
5024 frame.setState( previous );
5037 var controller = this.controller,
5038 state = controller.state(),
5039 selection = state.get( 'selection' ),
5040 attachment = selection.single();
5044 controller.image.changeAttachment( attachment, state.display( attachment ) );
5046 // not sure if we want to use wp.media.string.image which will create a shortcode or
5047 // perhaps wp.html.string to at least to build the <img />
5048 state.trigger( 'replace', controller.image.toJSON() );
5050 // Restore and reset the default state.
5051 controller.setState( controller.options.state );
5061 module.exports = ImageDetails;
5063 },{}],43:[function(require,module,exports){
5067 * wp.media.view.MediaFrame.Post
5069 * The frame for manipulating media on the Edit Post page.
5072 * @augments wp.media.view.MediaFrame.Select
5073 * @augments wp.media.view.MediaFrame
5074 * @augments wp.media.view.Frame
5075 * @augments wp.media.View
5076 * @augments wp.Backbone.View
5077 * @augments Backbone.View
5078 * @mixes wp.media.controller.StateMachine
5080 var Select = wp.media.view.MediaFrame.Select,
5081 Library = wp.media.controller.Library,
5082 l10n = wp.media.view.l10n,
5085 Post = Select.extend({
5086 initialize: function() {
5089 count: wp.media.view.settings.attachmentCounts.audio,
5093 count: wp.media.view.settings.attachmentCounts.video,
5094 state: 'video-playlist'
5098 _.defaults( this.options, {
5105 // Call 'initialize' directly on the parent class.
5106 Select.prototype.initialize.apply( this, arguments );
5107 this.createIframeStates();
5112 * Create the default states.
5114 createStates: function() {
5115 var options = this.options;
5121 title: l10n.insertMediaTitle,
5123 toolbar: 'main-insert',
5125 library: wp.media.query( options.library ),
5126 multiple: options.multiple ? 'reset' : false,
5129 // If the user isn't allowed to edit fields,
5130 // can they still edit it locally?
5131 allowLocalEdits: true,
5133 // Show the attachment display settings.
5134 displaySettings: true,
5135 // Update user settings when users adjust the
5136 // attachment display settings.
5137 displayUserSettings: true
5142 title: l10n.createGalleryTitle,
5144 toolbar: 'main-gallery',
5145 filterable: 'uploaded',
5149 library: wp.media.query( _.defaults({
5151 }, options.library ) )
5155 new wp.media.controller.Embed( { metadata: options.metadata } ),
5157 new wp.media.controller.EditImage( { model: options.editImage } ),
5160 new wp.media.controller.GalleryEdit({
5161 library: options.selection,
5162 editing: options.editing,
5166 new wp.media.controller.GalleryAdd(),
5170 title: l10n.createPlaylistTitle,
5172 toolbar: 'main-playlist',
5173 filterable: 'uploaded',
5177 library: wp.media.query( _.defaults({
5179 }, options.library ) )
5183 new wp.media.controller.CollectionEdit({
5185 collectionType: 'playlist',
5186 title: l10n.editPlaylistTitle,
5187 SettingsView: wp.media.view.Settings.Playlist,
5188 library: options.selection,
5189 editing: options.editing,
5191 dragInfoText: l10n.playlistDragInfo,
5195 new wp.media.controller.CollectionAdd({
5197 collectionType: 'playlist',
5198 title: l10n.addToPlaylistTitle
5202 id: 'video-playlist',
5203 title: l10n.createVideoPlaylistTitle,
5205 toolbar: 'main-video-playlist',
5206 filterable: 'uploaded',
5210 library: wp.media.query( _.defaults({
5212 }, options.library ) )
5215 new wp.media.controller.CollectionEdit({
5217 collectionType: 'playlist',
5218 title: l10n.editVideoPlaylistTitle,
5219 SettingsView: wp.media.view.Settings.Playlist,
5220 library: options.selection,
5221 editing: options.editing,
5222 menu: 'video-playlist',
5223 dragInfoText: l10n.videoPlaylistDragInfo,
5227 new wp.media.controller.CollectionAdd({
5229 collectionType: 'playlist',
5230 title: l10n.addToVideoPlaylistTitle
5234 if ( wp.media.view.settings.post.featuredImageId ) {
5235 this.states.add( new wp.media.controller.FeaturedImage() );
5239 bindHandlers: function() {
5240 var handlers, checkCounts;
5242 Select.prototype.bindHandlers.apply( this, arguments );
5244 this.on( 'activate', this.activate, this );
5246 // Only bother checking media type counts if one of the counts is zero
5247 checkCounts = _.find( this.counts, function( type ) {
5248 return type.count === 0;
5251 if ( typeof checkCounts !== 'undefined' ) {
5252 this.listenTo( wp.media.model.Attachments.all, 'change:type', this.mediaTypeCounts );
5255 this.on( 'menu:create:gallery', this.createMenu, this );
5256 this.on( 'menu:create:playlist', this.createMenu, this );
5257 this.on( 'menu:create:video-playlist', this.createMenu, this );
5258 this.on( 'toolbar:create:main-insert', this.createToolbar, this );
5259 this.on( 'toolbar:create:main-gallery', this.createToolbar, this );
5260 this.on( 'toolbar:create:main-playlist', this.createToolbar, this );
5261 this.on( 'toolbar:create:main-video-playlist', this.createToolbar, this );
5262 this.on( 'toolbar:create:featured-image', this.featuredImageToolbar, this );
5263 this.on( 'toolbar:create:main-embed', this.mainEmbedToolbar, this );
5267 'default': 'mainMenu',
5268 'gallery': 'galleryMenu',
5269 'playlist': 'playlistMenu',
5270 'video-playlist': 'videoPlaylistMenu'
5274 'embed': 'embedContent',
5275 'edit-image': 'editImageContent',
5276 'edit-selection': 'editSelectionContent'
5280 'main-insert': 'mainInsertToolbar',
5281 'main-gallery': 'mainGalleryToolbar',
5282 'gallery-edit': 'galleryEditToolbar',
5283 'gallery-add': 'galleryAddToolbar',
5284 'main-playlist': 'mainPlaylistToolbar',
5285 'playlist-edit': 'playlistEditToolbar',
5286 'playlist-add': 'playlistAddToolbar',
5287 'main-video-playlist': 'mainVideoPlaylistToolbar',
5288 'video-playlist-edit': 'videoPlaylistEditToolbar',
5289 'video-playlist-add': 'videoPlaylistAddToolbar'
5293 _.each( handlers, function( regionHandlers, region ) {
5294 _.each( regionHandlers, function( callback, handler ) {
5295 this.on( region + ':render:' + handler, this[ callback ], this );
5300 activate: function() {
5301 // Hide menu items for states tied to particular media types if there are no items
5302 _.each( this.counts, function( type ) {
5303 if ( type.count < 1 ) {
5304 this.menuItemVisibility( type.state, 'hide' );
5309 mediaTypeCounts: function( model, attr ) {
5310 if ( typeof this.counts[ attr ] !== 'undefined' && this.counts[ attr ].count < 1 ) {
5311 this.counts[ attr ].count++;
5312 this.menuItemVisibility( this.counts[ attr ].state, 'show' );
5318 * @param {wp.Backbone.View} view
5320 mainMenu: function( view ) {
5322 'library-separator': new wp.media.View({
5323 className: 'separator',
5329 menuItemVisibility: function( state, visibility ) {
5330 var menu = this.menu.get();
5331 if ( visibility === 'hide' ) {
5333 } else if ( visibility === 'show' ) {
5338 * @param {wp.Backbone.View} view
5340 galleryMenu: function( view ) {
5341 var lastState = this.lastState(),
5342 previous = lastState && lastState.id,
5347 text: l10n.cancelGalleryTitle,
5351 frame.setState( previous );
5356 // Keep focus inside media modal
5357 // after canceling a gallery
5358 this.controller.modal.focusManager.focus();
5361 separateCancel: new wp.media.View({
5362 className: 'separator',
5368 playlistMenu: function( view ) {
5369 var lastState = this.lastState(),
5370 previous = lastState && lastState.id,
5375 text: l10n.cancelPlaylistTitle,
5379 frame.setState( previous );
5385 separateCancel: new wp.media.View({
5386 className: 'separator',
5392 videoPlaylistMenu: function( view ) {
5393 var lastState = this.lastState(),
5394 previous = lastState && lastState.id,
5399 text: l10n.cancelVideoPlaylistTitle,
5403 frame.setState( previous );
5409 separateCancel: new wp.media.View({
5410 className: 'separator',
5417 embedContent: function() {
5418 var view = new wp.media.view.Embed({
5423 this.content.set( view );
5425 if ( ! wp.media.isTouchDevice ) {
5430 editSelectionContent: function() {
5431 var state = this.state(),
5432 selection = state.get('selection'),
5435 view = new wp.media.view.AttachmentsBrowser({
5437 collection: selection,
5438 selection: selection,
5445 AttachmentView: wp.media.view.Attachments.EditSelection
5448 view.toolbar.set( 'backToLibrary', {
5449 text: l10n.returnToLibrary,
5453 this.controller.content.mode('browse');
5457 // Browse our library of attachments.
5458 this.content.set( view );
5460 // Trigger the controller to set focus
5461 this.trigger( 'edit:selection', this );
5464 editImageContent: function() {
5465 var image = this.state().get('image'),
5466 view = new wp.media.view.EditImage( { model: image, controller: this } ).render();
5468 this.content.set( view );
5470 // after creating the wrapper view, load the actual editor via an ajax call
5478 * @param {wp.Backbone.View} view
5480 selectionStatusToolbar: function( view ) {
5481 var editable = this.state().get('editable');
5483 view.set( 'selection', new wp.media.view.Selection({
5485 collection: this.state().get('selection'),
5488 // If the selection is editable, pass the callback to
5489 // switch the content mode.
5490 editable: editable && function() {
5491 this.controller.content.mode('edit-selection');
5497 * @param {wp.Backbone.View} view
5499 mainInsertToolbar: function( view ) {
5500 var controller = this;
5502 this.selectionStatusToolbar( view );
5504 view.set( 'insert', {
5507 text: l10n.insertIntoPost,
5508 requires: { selection: true },
5511 * @fires wp.media.controller.State#insert
5514 var state = controller.state(),
5515 selection = state.get('selection');
5518 state.trigger( 'insert', selection ).reset();
5524 * @param {wp.Backbone.View} view
5526 mainGalleryToolbar: function( view ) {
5527 var controller = this;
5529 this.selectionStatusToolbar( view );
5531 view.set( 'gallery', {
5533 text: l10n.createNewGallery,
5535 requires: { selection: true },
5538 var selection = controller.state().get('selection'),
5539 edit = controller.state('gallery-edit'),
5540 models = selection.where({ type: 'image' });
5542 edit.set( 'library', new wp.media.model.Selection( models, {
5543 props: selection.props.toJSON(),
5547 this.controller.setState('gallery-edit');
5549 // Keep focus inside media modal
5550 // after jumping to gallery view
5551 this.controller.modal.focusManager.focus();
5556 mainPlaylistToolbar: function( view ) {
5557 var controller = this;
5559 this.selectionStatusToolbar( view );
5561 view.set( 'playlist', {
5563 text: l10n.createNewPlaylist,
5565 requires: { selection: true },
5568 var selection = controller.state().get('selection'),
5569 edit = controller.state('playlist-edit'),
5570 models = selection.where({ type: 'audio' });
5572 edit.set( 'library', new wp.media.model.Selection( models, {
5573 props: selection.props.toJSON(),
5577 this.controller.setState('playlist-edit');
5579 // Keep focus inside media modal
5580 // after jumping to playlist view
5581 this.controller.modal.focusManager.focus();
5586 mainVideoPlaylistToolbar: function( view ) {
5587 var controller = this;
5589 this.selectionStatusToolbar( view );
5591 view.set( 'video-playlist', {
5593 text: l10n.createNewVideoPlaylist,
5595 requires: { selection: true },
5598 var selection = controller.state().get('selection'),
5599 edit = controller.state('video-playlist-edit'),
5600 models = selection.where({ type: 'video' });
5602 edit.set( 'library', new wp.media.model.Selection( models, {
5603 props: selection.props.toJSON(),
5607 this.controller.setState('video-playlist-edit');
5609 // Keep focus inside media modal
5610 // after jumping to video playlist view
5611 this.controller.modal.focusManager.focus();
5616 featuredImageToolbar: function( toolbar ) {
5617 this.createSelectToolbar( toolbar, {
5618 text: l10n.setFeaturedImage,
5619 state: this.options.state
5623 mainEmbedToolbar: function( toolbar ) {
5624 toolbar.view = new wp.media.view.Toolbar.Embed({
5629 galleryEditToolbar: function() {
5630 var editing = this.state().get('editing');
5631 this.toolbar.set( new wp.media.view.Toolbar({
5636 text: editing ? l10n.updateGallery : l10n.insertGallery,
5638 requires: { library: true },
5641 * @fires wp.media.controller.State#update
5644 var controller = this.controller,
5645 state = controller.state();
5648 state.trigger( 'update', state.get('library') );
5650 // Restore and reset the default state.
5651 controller.setState( controller.options.state );
5659 galleryAddToolbar: function() {
5660 this.toolbar.set( new wp.media.view.Toolbar({
5665 text: l10n.addToGallery,
5667 requires: { selection: true },
5670 * @fires wp.media.controller.State#reset
5673 var controller = this.controller,
5674 state = controller.state(),
5675 edit = controller.state('gallery-edit');
5677 edit.get('library').add( state.get('selection').models );
5678 state.trigger('reset');
5679 controller.setState('gallery-edit');
5686 playlistEditToolbar: function() {
5687 var editing = this.state().get('editing');
5688 this.toolbar.set( new wp.media.view.Toolbar({
5693 text: editing ? l10n.updatePlaylist : l10n.insertPlaylist,
5695 requires: { library: true },
5698 * @fires wp.media.controller.State#update
5701 var controller = this.controller,
5702 state = controller.state();
5705 state.trigger( 'update', state.get('library') );
5707 // Restore and reset the default state.
5708 controller.setState( controller.options.state );
5716 playlistAddToolbar: function() {
5717 this.toolbar.set( new wp.media.view.Toolbar({
5722 text: l10n.addToPlaylist,
5724 requires: { selection: true },
5727 * @fires wp.media.controller.State#reset
5730 var controller = this.controller,
5731 state = controller.state(),
5732 edit = controller.state('playlist-edit');
5734 edit.get('library').add( state.get('selection').models );
5735 state.trigger('reset');
5736 controller.setState('playlist-edit');
5743 videoPlaylistEditToolbar: function() {
5744 var editing = this.state().get('editing');
5745 this.toolbar.set( new wp.media.view.Toolbar({
5750 text: editing ? l10n.updateVideoPlaylist : l10n.insertVideoPlaylist,
5752 requires: { library: true },
5755 var controller = this.controller,
5756 state = controller.state(),
5757 library = state.get('library');
5759 library.type = 'video';
5762 state.trigger( 'update', library );
5764 // Restore and reset the default state.
5765 controller.setState( controller.options.state );
5773 videoPlaylistAddToolbar: function() {
5774 this.toolbar.set( new wp.media.view.Toolbar({
5779 text: l10n.addToVideoPlaylist,
5781 requires: { selection: true },
5784 var controller = this.controller,
5785 state = controller.state(),
5786 edit = controller.state('video-playlist-edit');
5788 edit.get('library').add( state.get('selection').models );
5789 state.trigger('reset');
5790 controller.setState('video-playlist-edit');
5798 module.exports = Post;
5800 },{}],44:[function(require,module,exports){
5804 * wp.media.view.MediaFrame.Select
5806 * A frame for selecting an item or items from the media library.
5809 * @augments wp.media.view.MediaFrame
5810 * @augments wp.media.view.Frame
5811 * @augments wp.media.View
5812 * @augments wp.Backbone.View
5813 * @augments Backbone.View
5814 * @mixes wp.media.controller.StateMachine
5817 var MediaFrame = wp.media.view.MediaFrame,
5818 l10n = wp.media.view.l10n,
5821 Select = MediaFrame.extend({
5822 initialize: function() {
5823 // Call 'initialize' directly on the parent class.
5824 MediaFrame.prototype.initialize.apply( this, arguments );
5826 _.defaults( this.options, {
5833 this.createSelection();
5834 this.createStates();
5835 this.bindHandlers();
5839 * Attach a selection collection to the frame.
5841 * A selection is a collection of attachments used for a specific purpose
5842 * by a media frame. e.g. Selecting an attachment (or many) to insert into
5845 * @see media.model.Selection
5847 createSelection: function() {
5848 var selection = this.options.selection;
5850 if ( ! (selection instanceof wp.media.model.Selection) ) {
5851 this.options.selection = new wp.media.model.Selection( selection, {
5852 multiple: this.options.multiple
5857 attachments: new wp.media.model.Attachments(),
5863 * Create the default states on the frame.
5865 createStates: function() {
5866 var options = this.options;
5868 if ( this.options.states ) {
5872 // Add the default states.
5875 new wp.media.controller.Library({
5876 library: wp.media.query( options.library ),
5877 multiple: options.multiple,
5878 title: options.title,
5885 * Bind region mode event callbacks.
5887 * @see media.controller.Region.render
5889 bindHandlers: function() {
5890 this.on( 'router:create:browse', this.createRouter, this );
5891 this.on( 'router:render:browse', this.browseRouter, this );
5892 this.on( 'content:create:browse', this.browseContent, this );
5893 this.on( 'content:render:upload', this.uploadContent, this );
5894 this.on( 'toolbar:create:select', this.createSelectToolbar, this );
5898 * Render callback for the router region in the `browse` mode.
5900 * @param {wp.media.view.Router} routerView
5902 browseRouter: function( routerView ) {
5905 text: l10n.uploadFilesTitle,
5909 text: l10n.mediaLibraryTitle,
5916 * Render callback for the content region in the `browse` mode.
5918 * @param {wp.media.controller.Region} contentRegion
5920 browseContent: function( contentRegion ) {
5921 var state = this.state();
5923 this.$el.removeClass('hide-toolbar');
5925 // Browse our library of attachments.
5926 contentRegion.view = new wp.media.view.AttachmentsBrowser({
5928 collection: state.get('library'),
5929 selection: state.get('selection'),
5931 sortable: state.get('sortable'),
5932 search: state.get('searchable'),
5933 filters: state.get('filterable'),
5934 date: state.get('date'),
5935 display: state.has('display') ? state.get('display') : state.get('displaySettings'),
5936 dragInfo: state.get('dragInfo'),
5938 idealColumnWidth: state.get('idealColumnWidth'),
5939 suggestedWidth: state.get('suggestedWidth'),
5940 suggestedHeight: state.get('suggestedHeight'),
5942 AttachmentView: state.get('AttachmentView')
5947 * Render callback for the content region in the `upload` mode.
5949 uploadContent: function() {
5950 this.$el.removeClass( 'hide-toolbar' );
5951 this.content.set( new wp.media.view.UploaderInline({
5959 * @param {Object} toolbar
5960 * @param {Object} [options={}]
5961 * @this wp.media.controller.Region
5963 createSelectToolbar: function( toolbar, options ) {
5964 options = options || this.options.button || {};
5965 options.controller = this;
5967 toolbar.view = new wp.media.view.Toolbar.Select( options );
5971 module.exports = Select;
5973 },{}],45:[function(require,module,exports){
5975 * wp.media.view.Iframe
5978 * @augments wp.media.View
5979 * @augments wp.Backbone.View
5980 * @augments Backbone.View
5982 var Iframe = wp.media.View.extend({
5983 className: 'media-iframe',
5985 * @returns {wp.media.view.Iframe} Returns itself to allow chaining
5987 render: function() {
5988 this.views.detach();
5989 this.$el.html( '<iframe src="' + this.controller.state().get('src') + '" />' );
5990 this.views.render();
5995 module.exports = Iframe;
5997 },{}],46:[function(require,module,exports){
5998 /*globals wp, _, jQuery */
6001 * wp.media.view.ImageDetails
6004 * @augments wp.media.view.Settings.AttachmentDisplay
6005 * @augments wp.media.view.Settings
6006 * @augments wp.media.View
6007 * @augments wp.Backbone.View
6008 * @augments Backbone.View
6010 var AttachmentDisplay = wp.media.view.Settings.AttachmentDisplay,
6014 ImageDetails = AttachmentDisplay.extend({
6015 className: 'image-details',
6016 template: wp.template('image-details'),
6017 events: _.defaults( AttachmentDisplay.prototype.events, {
6018 'click .edit-attachment': 'editAttachment',
6019 'click .replace-attachment': 'replaceAttachment',
6020 'click .advanced-toggle': 'onToggleAdvanced',
6021 'change [data-setting="customWidth"]': 'onCustomSize',
6022 'change [data-setting="customHeight"]': 'onCustomSize',
6023 'keyup [data-setting="customWidth"]': 'onCustomSize',
6024 'keyup [data-setting="customHeight"]': 'onCustomSize'
6026 initialize: function() {
6027 // used in AttachmentDisplay.prototype.updateLinkTo
6028 this.options.attachment = this.model.attachment;
6029 this.listenTo( this.model, 'change:url', this.updateUrl );
6030 this.listenTo( this.model, 'change:link', this.toggleLinkSettings );
6031 this.listenTo( this.model, 'change:size', this.toggleCustomSize );
6033 AttachmentDisplay.prototype.initialize.apply( this, arguments );
6036 prepare: function() {
6037 var attachment = false;
6039 if ( this.model.attachment ) {
6040 attachment = this.model.attachment.toJSON();
6043 model: this.model.toJSON(),
6044 attachment: attachment
6048 render: function() {
6049 var args = arguments;
6051 if ( this.model.attachment && 'pending' === this.model.dfd.state() ) {
6053 .done( _.bind( function() {
6054 AttachmentDisplay.prototype.render.apply( this, args );
6057 .fail( _.bind( function() {
6058 this.model.attachment = false;
6059 AttachmentDisplay.prototype.render.apply( this, args );
6063 AttachmentDisplay.prototype.render.apply( this, arguments );
6070 postRender: function() {
6071 setTimeout( _.bind( this.resetFocus, this ), 10 );
6072 this.toggleLinkSettings();
6073 if ( window.getUserSetting( 'advImgDetails' ) === 'show' ) {
6074 this.toggleAdvanced( true );
6076 this.trigger( 'post-render' );
6079 resetFocus: function() {
6080 this.$( '.link-to-custom' ).blur();
6081 this.$( '.embed-media-settings' ).scrollTop( 0 );
6084 updateUrl: function() {
6085 this.$( '.image img' ).attr( 'src', this.model.get( 'url' ) );
6086 this.$( '.url' ).val( this.model.get( 'url' ) );
6089 toggleLinkSettings: function() {
6090 if ( this.model.get( 'link' ) === 'none' ) {
6091 this.$( '.link-settings' ).addClass('hidden');
6093 this.$( '.link-settings' ).removeClass('hidden');
6097 toggleCustomSize: function() {
6098 if ( this.model.get( 'size' ) !== 'custom' ) {
6099 this.$( '.custom-size' ).addClass('hidden');
6101 this.$( '.custom-size' ).removeClass('hidden');
6105 onCustomSize: function( event ) {
6106 var dimension = $( event.target ).data('setting'),
6107 num = $( event.target ).val(),
6110 // Ignore bogus input
6111 if ( ! /^\d+/.test( num ) || parseInt( num, 10 ) < 1 ) {
6112 event.preventDefault();
6116 if ( dimension === 'customWidth' ) {
6117 value = Math.round( 1 / this.model.get( 'aspectRatio' ) * num );
6118 this.model.set( 'customHeight', value, { silent: true } );
6119 this.$( '[data-setting="customHeight"]' ).val( value );
6121 value = Math.round( this.model.get( 'aspectRatio' ) * num );
6122 this.model.set( 'customWidth', value, { silent: true } );
6123 this.$( '[data-setting="customWidth"]' ).val( value );
6127 onToggleAdvanced: function( event ) {
6128 event.preventDefault();
6129 this.toggleAdvanced();
6132 toggleAdvanced: function( show ) {
6133 var $advanced = this.$el.find( '.advanced-section' ),
6136 if ( $advanced.hasClass('advanced-visible') || show === false ) {
6137 $advanced.removeClass('advanced-visible');
6138 $advanced.find('.advanced-settings').addClass('hidden');
6141 $advanced.addClass('advanced-visible');
6142 $advanced.find('.advanced-settings').removeClass('hidden');
6146 window.setUserSetting( 'advImgDetails', mode );
6149 editAttachment: function( event ) {
6150 var editState = this.controller.states.get( 'edit-image' );
6152 if ( window.imageEdit && editState ) {
6153 event.preventDefault();
6154 editState.set( 'image', this.model.attachment );
6155 this.controller.setState( 'edit-image' );
6159 replaceAttachment: function( event ) {
6160 event.preventDefault();
6161 this.controller.setState( 'replace-image' );
6165 module.exports = ImageDetails;
6167 },{}],47:[function(require,module,exports){
6169 * wp.media.view.Label
6172 * @augments wp.media.View
6173 * @augments wp.Backbone.View
6174 * @augments Backbone.View
6176 var Label = wp.media.View.extend({
6178 className: 'screen-reader-text',
6180 initialize: function() {
6181 this.value = this.options.value;
6184 render: function() {
6185 this.$el.html( this.value );
6191 module.exports = Label;
6193 },{}],48:[function(require,module,exports){
6194 /*globals wp, _, jQuery */
6197 * wp.media.view.MediaFrame
6199 * The frame used to create the media modal.
6202 * @augments wp.media.view.Frame
6203 * @augments wp.media.View
6204 * @augments wp.Backbone.View
6205 * @augments Backbone.View
6206 * @mixes wp.media.controller.StateMachine
6208 var Frame = wp.media.view.Frame,
6212 MediaFrame = Frame.extend({
6213 className: 'media-frame',
6214 template: wp.template('media-frame'),
6215 regions: ['menu','title','content','toolbar','router'],
6218 'click div.media-frame-title h1': 'toggleMenu'
6222 * @global wp.Uploader
6224 initialize: function() {
6225 Frame.prototype.initialize.apply( this, arguments );
6227 _.defaults( this.options, {
6233 // Ensure core UI is enabled.
6234 this.$el.addClass('wp-core-ui');
6236 // Initialize modal container view.
6237 if ( this.options.modal ) {
6238 this.modal = new wp.media.view.Modal({
6240 title: this.options.title
6243 this.modal.content( this );
6246 // Force the uploader off if the upload limit has been exceeded or
6247 // if the browser isn't supported.
6248 if ( wp.Uploader.limitExceeded || ! wp.Uploader.browser.supported ) {
6249 this.options.uploader = false;
6252 // Initialize window-wide uploader.
6253 if ( this.options.uploader ) {
6254 this.uploader = new wp.media.view.UploaderWindow({
6257 dropzone: this.modal ? this.modal.$el : this.$el,
6261 this.views.set( '.media-frame-uploader', this.uploader );
6264 this.on( 'attach', _.bind( this.views.ready, this.views ), this );
6266 // Bind default title creation.
6267 this.on( 'title:create:default', this.createTitle, this );
6268 this.title.mode('default');
6270 this.on( 'title:render', function( view ) {
6271 view.$el.append( '<span class="dashicons dashicons-arrow-down"></span>' );
6274 // Bind default menu.
6275 this.on( 'menu:create:default', this.createMenu, this );
6278 * @returns {wp.media.view.MediaFrame} Returns itself to allow chaining
6280 render: function() {
6281 // Activate the default state if no active state exists.
6282 if ( ! this.state() && this.options.state ) {
6283 this.setState( this.options.state );
6286 * call 'render' directly on the parent class
6288 return Frame.prototype.render.apply( this, arguments );
6291 * @param {Object} title
6292 * @this wp.media.controller.Region
6294 createTitle: function( title ) {
6295 title.view = new wp.media.View({
6301 * @param {Object} menu
6302 * @this wp.media.controller.Region
6304 createMenu: function( menu ) {
6305 menu.view = new wp.media.view.Menu({
6310 toggleMenu: function() {
6311 this.$el.find( '.media-menu' ).toggleClass( 'visible' );
6315 * @param {Object} toolbar
6316 * @this wp.media.controller.Region
6318 createToolbar: function( toolbar ) {
6319 toolbar.view = new wp.media.view.Toolbar({
6324 * @param {Object} router
6325 * @this wp.media.controller.Region
6327 createRouter: function( router ) {
6328 router.view = new wp.media.view.Router({
6333 * @param {Object} options
6335 createIframeStates: function( options ) {
6336 var settings = wp.media.view.settings,
6337 tabs = settings.tabs,
6338 tabUrl = settings.tabUrl,
6341 if ( ! tabs || ! tabUrl ) {
6345 // Add the post ID to the tab URL if it exists.
6346 $postId = $('#post_ID');
6347 if ( $postId.length ) {
6348 tabUrl += '&post_id=' + $postId.val();
6351 // Generate the tab states.
6352 _.each( tabs, function( title, id ) {
6353 this.state( 'iframe:' + id ).set( _.defaults({
6355 src: tabUrl + '&tab=' + id,
6362 this.on( 'content:create:iframe', this.iframeContent, this );
6363 this.on( 'content:deactivate:iframe', this.iframeContentCleanup, this );
6364 this.on( 'menu:render:default', this.iframeMenu, this );
6365 this.on( 'open', this.hijackThickbox, this );
6366 this.on( 'close', this.restoreThickbox, this );
6370 * @param {Object} content
6371 * @this wp.media.controller.Region
6373 iframeContent: function( content ) {
6374 this.$el.addClass('hide-toolbar');
6375 content.view = new wp.media.view.Iframe({
6380 iframeContentCleanup: function() {
6381 this.$el.removeClass('hide-toolbar');
6384 iframeMenu: function( view ) {
6391 _.each( wp.media.view.settings.tabs, function( title, id ) {
6392 views[ 'iframe:' + id ] = {
6393 text: this.state( 'iframe:' + id ).get('title'),
6401 hijackThickbox: function() {
6404 if ( ! window.tb_remove || this._tb_remove ) {
6408 this._tb_remove = window.tb_remove;
6409 window.tb_remove = function() {
6412 frame.setState( frame.options.state );
6413 frame._tb_remove.call( window );
6417 restoreThickbox: function() {
6418 if ( ! this._tb_remove ) {
6422 window.tb_remove = this._tb_remove;
6423 delete this._tb_remove;
6427 // Map some of the modal's methods to the frame.
6428 _.each(['open','close','attach','detach','escape'], function( method ) {
6430 * @returns {wp.media.view.MediaFrame} Returns itself to allow chaining
6432 MediaFrame.prototype[ method ] = function() {
6434 this.modal[ method ].apply( this.modal, arguments );
6440 module.exports = MediaFrame;
6442 },{}],49:[function(require,module,exports){
6446 * wp.media.view.MenuItem
6449 * @augments wp.media.View
6450 * @augments wp.Backbone.View
6451 * @augments Backbone.View
6456 MenuItem = wp.media.View.extend({
6458 className: 'media-menu-item',
6468 * @param {Object} event
6470 _click: function( event ) {
6471 var clickOverride = this.options.click;
6474 event.preventDefault();
6477 if ( clickOverride ) {
6478 clickOverride.call( this );
6483 // When selecting a tab along the left side,
6484 // focus should be transferred into the main panel
6485 if ( ! wp.media.isTouchDevice ) {
6486 $('.media-frame-content input').first().focus();
6491 var state = this.options.state;
6494 this.controller.setState( state );
6495 this.views.parent.$el.removeClass( 'visible' ); // TODO: or hide on any click, see below
6499 * @returns {wp.media.view.MenuItem} returns itself to allow chaining
6501 render: function() {
6502 var options = this.options;
6504 if ( options.text ) {
6505 this.$el.text( options.text );
6506 } else if ( options.html ) {
6507 this.$el.html( options.html );
6514 module.exports = MenuItem;
6516 },{}],50:[function(require,module,exports){
6518 * wp.media.view.Menu
6521 * @augments wp.media.view.PriorityList
6522 * @augments wp.media.View
6523 * @augments wp.Backbone.View
6524 * @augments Backbone.View
6526 var MenuItem = wp.media.view.MenuItem,
6527 PriorityList = wp.media.view.PriorityList,
6530 Menu = PriorityList.extend({
6532 className: 'media-menu',
6537 /* TODO: alternatively hide on any click anywhere
6543 this.$el.removeClass( 'visible' );
6548 * @param {Object} options
6549 * @param {string} id
6550 * @returns {wp.media.View}
6552 toView: function( options, id ) {
6553 options = options || {};
6554 options[ this.property ] = options[ this.property ] || id;
6555 return new this.ItemView( options ).render();
6560 * call 'ready' directly on the parent class
6562 PriorityList.prototype.ready.apply( this, arguments );
6568 * call 'set' directly on the parent class
6570 PriorityList.prototype.set.apply( this, arguments );
6576 * call 'unset' directly on the parent class
6578 PriorityList.prototype.unset.apply( this, arguments );
6582 visibility: function() {
6583 var region = this.region,
6584 view = this.controller[ region ].get(),
6585 views = this.views.get(),
6586 hide = ! views || views.length < 2;
6588 if ( this === view ) {
6589 this.controller.$el.toggleClass( 'hide-' + region, hide );
6593 * @param {string} id
6595 select: function( id ) {
6596 var view = this.get( id );
6603 view.$el.addClass('active');
6606 deselect: function() {
6607 this.$el.children().removeClass('active');
6610 hide: function( id ) {
6611 var view = this.get( id );
6617 view.$el.addClass('hidden');
6620 show: function( id ) {
6621 var view = this.get( id );
6627 view.$el.removeClass('hidden');
6631 module.exports = Menu;
6633 },{}],51:[function(require,module,exports){
6634 /*globals wp, _, jQuery */
6637 * wp.media.view.Modal
6639 * A modal view, which the media modal uses as its default container.
6642 * @augments wp.media.View
6643 * @augments wp.Backbone.View
6644 * @augments Backbone.View
6649 Modal = wp.media.View.extend({
6651 template: wp.template('media-modal'),
6658 'click .media-modal-backdrop, .media-modal-close': 'escapeHandler',
6659 'keydown': 'keydown'
6662 initialize: function() {
6663 _.defaults( this.options, {
6664 container: document.body,
6670 this.focusManager = new wp.media.view.FocusManager({
6677 prepare: function() {
6679 title: this.options.title
6684 * @returns {wp.media.view.Modal} Returns itself to allow chaining
6686 attach: function() {
6687 if ( this.views.attached ) {
6691 if ( ! this.views.rendered ) {
6695 this.$el.appendTo( this.options.container );
6697 // Manually mark the view as attached and trigger ready.
6698 this.views.attached = true;
6701 return this.propagate('attach');
6705 * @returns {wp.media.view.Modal} Returns itself to allow chaining
6707 detach: function() {
6708 if ( this.$el.is(':visible') ) {
6713 this.views.attached = false;
6714 return this.propagate('detach');
6718 * @returns {wp.media.view.Modal} Returns itself to allow chaining
6722 options = this.options,
6725 if ( $el.is(':visible') ) {
6729 if ( ! this.views.attached ) {
6733 // If the `freeze` option is set, record the window's scroll position.
6734 if ( options.freeze ) {
6736 scrollTop: $( window ).scrollTop()
6740 // Disable page scrolling.
6741 $( 'body' ).addClass( 'modal-open' );
6745 // Try to close the onscreen keyboard
6746 if ( 'ontouchend' in document ) {
6747 if ( ( mceEditor = window.tinymce && window.tinymce.activeEditor ) && ! mceEditor.isHidden() && mceEditor.iframeElement ) {
6748 mceEditor.iframeElement.focus();
6749 mceEditor.iframeElement.blur();
6751 setTimeout( function() {
6752 mceEditor.iframeElement.blur();
6759 return this.propagate('open');
6763 * @param {Object} options
6764 * @returns {wp.media.view.Modal} Returns itself to allow chaining
6766 close: function( options ) {
6767 var freeze = this._freeze;
6769 if ( ! this.views.attached || ! this.$el.is(':visible') ) {
6773 // Enable page scrolling.
6774 $( 'body' ).removeClass( 'modal-open' );
6776 // Hide modal and remove restricted media modal tab focus once it's closed
6777 this.$el.hide().undelegate( 'keydown' );
6779 // Put focus back in useful location once modal is closed
6780 $('#wpbody-content').focus();
6782 this.propagate('close');
6784 // If the `freeze` option is set, restore the container's scroll position.
6786 $( window ).scrollTop( freeze.scrollTop );
6789 if ( options && options.escape ) {
6790 this.propagate('escape');
6796 * @returns {wp.media.view.Modal} Returns itself to allow chaining
6798 escape: function() {
6799 return this.close({ escape: true });
6802 * @param {Object} event
6804 escapeHandler: function( event ) {
6805 event.preventDefault();
6810 * @param {Array|Object} content Views to register to '.media-modal-content'
6811 * @returns {wp.media.view.Modal} Returns itself to allow chaining
6813 content: function( content ) {
6814 this.views.set( '.media-modal-content', content );
6819 * Triggers a modal event and if the `propagate` option is set,
6820 * forwards events to the modal's controller.
6822 * @param {string} id
6823 * @returns {wp.media.view.Modal} Returns itself to allow chaining
6825 propagate: function( id ) {
6828 if ( this.options.propagate ) {
6829 this.controller.trigger( id );
6835 * @param {Object} event
6837 keydown: function( event ) {
6838 // Close the modal when escape is pressed.
6839 if ( 27 === event.which && this.$el.is(':visible') ) {
6841 event.stopImmediatePropagation();
6846 module.exports = Modal;
6848 },{}],52:[function(require,module,exports){
6849 /*globals _, Backbone */
6852 * wp.media.view.PriorityList
6855 * @augments wp.media.View
6856 * @augments wp.Backbone.View
6857 * @augments Backbone.View
6859 var PriorityList = wp.media.View.extend({
6862 initialize: function() {
6865 this.set( _.extend( {}, this._views, this.options.views ), { silent: true });
6866 delete this.options.views;
6868 if ( ! this.options.silent ) {
6873 * @param {string} id
6874 * @param {wp.media.View|Object} view
6875 * @param {Object} options
6876 * @returns {wp.media.view.PriorityList} Returns itself to allow chaining
6878 set: function( id, view, options ) {
6879 var priority, views, index;
6881 options = options || {};
6883 // Accept an object with an `id` : `view` mapping.
6884 if ( _.isObject( id ) ) {
6885 _.each( id, function( view, id ) {
6886 this.set( id, view );
6891 if ( ! (view instanceof Backbone.View) ) {
6892 view = this.toView( view, id, options );
6894 view.controller = view.controller || this.controller;
6898 priority = view.options.priority || 10;
6899 views = this.views.get() || [];
6901 _.find( views, function( existing, i ) {
6902 if ( existing.options.priority > priority ) {
6908 this._views[ id ] = view;
6909 this.views.add( view, {
6910 at: _.isNumber( index ) ? index : views.length || 0
6916 * @param {string} id
6917 * @returns {wp.media.View}
6919 get: function( id ) {
6920 return this._views[ id ];
6923 * @param {string} id
6924 * @returns {wp.media.view.PriorityList}
6926 unset: function( id ) {
6927 var view = this.get( id );
6933 delete this._views[ id ];
6937 * @param {Object} options
6938 * @returns {wp.media.View}
6940 toView: function( options ) {
6941 return new wp.media.View( options );
6945 module.exports = PriorityList;
6947 },{}],53:[function(require,module,exports){
6949 * wp.media.view.RouterItem
6952 * @augments wp.media.view.MenuItem
6953 * @augments wp.media.View
6954 * @augments wp.Backbone.View
6955 * @augments Backbone.View
6957 var RouterItem = wp.media.view.MenuItem.extend({
6959 * On click handler to activate the content region's corresponding mode.
6962 var contentMode = this.options.contentMode;
6963 if ( contentMode ) {
6964 this.controller.content.mode( contentMode );
6969 module.exports = RouterItem;
6971 },{}],54:[function(require,module,exports){
6975 * wp.media.view.Router
6978 * @augments wp.media.view.Menu
6979 * @augments wp.media.view.PriorityList
6980 * @augments wp.media.View
6981 * @augments wp.Backbone.View
6982 * @augments Backbone.View
6984 var Menu = wp.media.view.Menu,
6987 Router = Menu.extend({
6989 className: 'media-router',
6990 property: 'contentMode',
6991 ItemView: wp.media.view.RouterItem,
6994 initialize: function() {
6995 this.controller.on( 'content:render', this.update, this );
6996 // Call 'initialize' directly on the parent class.
6997 Menu.prototype.initialize.apply( this, arguments );
7000 update: function() {
7001 var mode = this.controller.content.mode();
7003 this.select( mode );
7008 module.exports = Router;
7010 },{}],55:[function(require,module,exports){
7014 * wp.media.view.Search
7017 * @augments wp.media.View
7018 * @augments wp.Backbone.View
7019 * @augments Backbone.View
7021 var l10n = wp.media.view.l10n,
7024 Search = wp.media.View.extend({
7026 className: 'search',
7027 id: 'media-search-input',
7031 placeholder: l10n.search
7042 * @returns {wp.media.view.Search} Returns itself to allow chaining
7044 render: function() {
7045 this.el.value = this.model.escape('search');
7049 search: function( event ) {
7050 if ( event.target.value ) {
7051 this.model.set( 'search', event.target.value );
7053 this.model.unset('search');
7058 module.exports = Search;
7060 },{}],56:[function(require,module,exports){
7061 /*globals wp, _, Backbone */
7064 * wp.media.view.Selection
7067 * @augments wp.media.View
7068 * @augments wp.Backbone.View
7069 * @augments Backbone.View
7071 var l10n = wp.media.view.l10n,
7074 Selection = wp.media.View.extend({
7076 className: 'media-selection',
7077 template: wp.template('media-selection'),
7080 'click .edit-selection': 'edit',
7081 'click .clear-selection': 'clear'
7084 initialize: function() {
7085 _.defaults( this.options, {
7091 * @member {wp.media.view.Attachments.Selection}
7093 this.attachments = new wp.media.view.Attachments.Selection({
7094 controller: this.controller,
7095 collection: this.collection,
7096 selection: this.collection,
7097 model: new Backbone.Model()
7100 this.views.set( '.selection-view', this.attachments );
7101 this.collection.on( 'add remove reset', this.refresh, this );
7102 this.controller.on( 'content:activate', this.refresh, this );
7109 refresh: function() {
7110 // If the selection hasn't been rendered, bail.
7111 if ( ! this.$el.children().length ) {
7115 var collection = this.collection,
7116 editing = 'edit-selection' === this.controller.content.mode();
7118 // If nothing is selected, display nothing.
7119 this.$el.toggleClass( 'empty', ! collection.length );
7120 this.$el.toggleClass( 'one', 1 === collection.length );
7121 this.$el.toggleClass( 'editing', editing );
7123 this.$('.count').text( l10n.selected.replace('%d', collection.length) );
7126 edit: function( event ) {
7127 event.preventDefault();
7128 if ( this.options.editable ) {
7129 this.options.editable.call( this, this.collection );
7133 clear: function( event ) {
7134 event.preventDefault();
7135 this.collection.reset();
7137 // Keep focus inside media modal
7138 // after clear link is selected
7139 this.controller.modal.focusManager.focus();
7143 module.exports = Selection;
7145 },{}],57:[function(require,module,exports){
7146 /*globals _, Backbone */
7149 * wp.media.view.Settings
7152 * @augments wp.media.View
7153 * @augments wp.Backbone.View
7154 * @augments Backbone.View
7156 var View = wp.media.View,
7160 Settings = View.extend({
7162 'click button': 'updateHandler',
7163 'change input': 'updateHandler',
7164 'change select': 'updateHandler',
7165 'change textarea': 'updateHandler'
7168 initialize: function() {
7169 this.model = this.model || new Backbone.Model();
7170 this.listenTo( this.model, 'change', this.updateChanges );
7173 prepare: function() {
7175 model: this.model.toJSON()
7179 * @returns {wp.media.view.Settings} Returns itself to allow chaining
7181 render: function() {
7182 View.prototype.render.apply( this, arguments );
7183 // Select the correct values.
7184 _( this.model.attributes ).chain().keys().each( this.update, this );
7188 * @param {string} key
7190 update: function( key ) {
7191 var value = this.model.get( key ),
7192 $setting = this.$('[data-setting="' + key + '"]'),
7195 // Bail if we didn't find a matching setting.
7196 if ( ! $setting.length ) {
7200 // Attempt to determine how the setting is rendered and update
7201 // the selected value.
7203 // Handle dropdowns.
7204 if ( $setting.is('select') ) {
7205 $value = $setting.find('[value="' + value + '"]');
7207 if ( $value.length ) {
7208 $setting.find('option').prop( 'selected', false );
7209 $value.prop( 'selected', true );
7211 // If we can't find the desired value, record what *is* selected.
7212 this.model.set( key, $setting.find(':selected').val() );
7215 // Handle button groups.
7216 } else if ( $setting.hasClass('button-group') ) {
7217 $buttons = $setting.find('button').removeClass('active');
7218 $buttons.filter( '[value="' + value + '"]' ).addClass('active');
7220 // Handle text inputs and textareas.
7221 } else if ( $setting.is('input[type="text"], textarea') ) {
7222 if ( ! $setting.is(':focus') ) {
7223 $setting.val( value );
7225 // Handle checkboxes.
7226 } else if ( $setting.is('input[type="checkbox"]') ) {
7227 $setting.prop( 'checked', !! value && 'false' !== value );
7231 * @param {Object} event
7233 updateHandler: function( event ) {
7234 var $setting = $( event.target ).closest('[data-setting]'),
7235 value = event.target.value,
7238 event.preventDefault();
7240 if ( ! $setting.length ) {
7244 // Use the correct value for checkboxes.
7245 if ( $setting.is('input[type="checkbox"]') ) {
7246 value = $setting[0].checked;
7249 // Update the corresponding setting.
7250 this.model.set( $setting.data('setting'), value );
7252 // If the setting has a corresponding user setting,
7253 // update that as well.
7254 if ( userSetting = $setting.data('userSetting') ) {
7255 window.setUserSetting( userSetting, value );
7259 updateChanges: function( model ) {
7260 if ( model.hasChanged() ) {
7261 _( model.changed ).chain().keys().each( this.update, this );
7266 module.exports = Settings;
7268 },{}],58:[function(require,module,exports){
7272 * wp.media.view.Settings.AttachmentDisplay
7275 * @augments wp.media.view.Settings
7276 * @augments wp.media.View
7277 * @augments wp.Backbone.View
7278 * @augments Backbone.View
7280 var Settings = wp.media.view.Settings,
7283 AttachmentDisplay = Settings.extend({
7284 className: 'attachment-display-settings',
7285 template: wp.template('attachment-display-settings'),
7287 initialize: function() {
7288 var attachment = this.options.attachment;
7290 _.defaults( this.options, {
7293 // Call 'initialize' directly on the parent class.
7294 Settings.prototype.initialize.apply( this, arguments );
7295 this.listenTo( this.model, 'change:link', this.updateLinkTo );
7298 attachment.on( 'change:uploading', this.render, this );
7302 dispose: function() {
7303 var attachment = this.options.attachment;
7305 attachment.off( null, null, this );
7308 * call 'dispose' directly on the parent class
7310 Settings.prototype.dispose.apply( this, arguments );
7313 * @returns {wp.media.view.AttachmentDisplay} Returns itself to allow chaining
7315 render: function() {
7316 var attachment = this.options.attachment;
7318 _.extend( this.options, {
7319 sizes: attachment.get('sizes'),
7320 type: attachment.get('type')
7324 * call 'render' directly on the parent class
7326 Settings.prototype.render.call( this );
7327 this.updateLinkTo();
7331 updateLinkTo: function() {
7332 var linkTo = this.model.get('link'),
7333 $input = this.$('.link-to-custom'),
7334 attachment = this.options.attachment;
7336 if ( 'none' === linkTo || 'embed' === linkTo || ( ! attachment && 'custom' !== linkTo ) ) {
7337 $input.addClass( 'hidden' );
7342 if ( 'post' === linkTo ) {
7343 $input.val( attachment.get('link') );
7344 } else if ( 'file' === linkTo ) {
7345 $input.val( attachment.get('url') );
7346 } else if ( ! this.model.get('linkUrl') ) {
7347 $input.val('http://');
7350 $input.prop( 'readonly', 'custom' !== linkTo );
7353 $input.removeClass( 'hidden' );
7355 // If the input is visible, focus and select its contents.
7356 if ( ! wp.media.isTouchDevice && $input.is(':visible') ) {
7357 $input.focus()[0].select();
7362 module.exports = AttachmentDisplay;
7364 },{}],59:[function(require,module,exports){
7368 * wp.media.view.Settings.Gallery
7371 * @augments wp.media.view.Settings
7372 * @augments wp.media.View
7373 * @augments wp.Backbone.View
7374 * @augments Backbone.View
7376 var Gallery = wp.media.view.Settings.extend({
7377 className: 'collection-settings gallery-settings',
7378 template: wp.template('gallery-settings')
7381 module.exports = Gallery;
7383 },{}],60:[function(require,module,exports){
7387 * wp.media.view.Settings.Playlist
7390 * @augments wp.media.view.Settings
7391 * @augments wp.media.View
7392 * @augments wp.Backbone.View
7393 * @augments Backbone.View
7395 var Playlist = wp.media.view.Settings.extend({
7396 className: 'collection-settings playlist-settings',
7397 template: wp.template('playlist-settings')
7400 module.exports = Playlist;
7402 },{}],61:[function(require,module,exports){
7404 * wp.media.view.Sidebar
7407 * @augments wp.media.view.PriorityList
7408 * @augments wp.media.View
7409 * @augments wp.Backbone.View
7410 * @augments Backbone.View
7412 var Sidebar = wp.media.view.PriorityList.extend({
7413 className: 'media-sidebar'
7416 module.exports = Sidebar;
7418 },{}],62:[function(require,module,exports){
7422 * wp.media.view.Spinner
7425 * @augments wp.media.View
7426 * @augments wp.Backbone.View
7427 * @augments Backbone.View
7429 var Spinner = wp.media.View.extend({
7431 className: 'spinner',
7432 spinnerTimeout: false,
7436 if ( ! this.spinnerTimeout ) {
7437 this.spinnerTimeout = _.delay(function( $el ) {
7438 $el.addClass( 'is-active' );
7439 }, this.delay, this.$el );
7446 this.$el.removeClass( 'is-active' );
7447 this.spinnerTimeout = clearTimeout( this.spinnerTimeout );
7453 module.exports = Spinner;
7455 },{}],63:[function(require,module,exports){
7456 /*globals _, Backbone */
7459 * wp.media.view.Toolbar
7461 * A toolbar which consists of a primary and a secondary section. Each sections
7462 * can be filled with views.
7465 * @augments wp.media.View
7466 * @augments wp.Backbone.View
7467 * @augments Backbone.View
7469 var View = wp.media.View,
7472 Toolbar = View.extend({
7474 className: 'media-toolbar',
7476 initialize: function() {
7477 var state = this.controller.state(),
7478 selection = this.selection = state.get('selection'),
7479 library = this.library = state.get('library');
7483 // The toolbar is composed of two `PriorityList` views.
7484 this.primary = new wp.media.view.PriorityList();
7485 this.secondary = new wp.media.view.PriorityList();
7486 this.primary.$el.addClass('media-toolbar-primary search-form');
7487 this.secondary.$el.addClass('media-toolbar-secondary');
7489 this.views.set([ this.secondary, this.primary ]);
7491 if ( this.options.items ) {
7492 this.set( this.options.items, { silent: true });
7495 if ( ! this.options.silent ) {
7500 selection.on( 'add remove reset', this.refresh, this );
7504 library.on( 'add remove reset', this.refresh, this );
7508 * @returns {wp.media.view.Toolbar} Returns itsef to allow chaining
7510 dispose: function() {
7511 if ( this.selection ) {
7512 this.selection.off( null, null, this );
7515 if ( this.library ) {
7516 this.library.off( null, null, this );
7519 * call 'dispose' directly on the parent class
7521 return View.prototype.dispose.apply( this, arguments );
7529 * @param {string} id
7530 * @param {Backbone.View|Object} view
7531 * @param {Object} [options={}]
7532 * @returns {wp.media.view.Toolbar} Returns itself to allow chaining
7534 set: function( id, view, options ) {
7536 options = options || {};
7538 // Accept an object with an `id` : `view` mapping.
7539 if ( _.isObject( id ) ) {
7540 _.each( id, function( view, id ) {
7541 this.set( id, view, { silent: true });
7545 if ( ! ( view instanceof Backbone.View ) ) {
7546 view.classes = [ 'media-button-' + id ].concat( view.classes || [] );
7547 view = new wp.media.view.Button( view ).render();
7550 view.controller = view.controller || this.controller;
7552 this._views[ id ] = view;
7554 list = view.options.priority < 0 ? 'secondary' : 'primary';
7555 this[ list ].set( id, view, options );
7558 if ( ! options.silent ) {
7565 * @param {string} id
7566 * @returns {wp.media.view.Button}
7568 get: function( id ) {
7569 return this._views[ id ];
7572 * @param {string} id
7573 * @param {Object} options
7574 * @returns {wp.media.view.Toolbar} Returns itself to allow chaining
7576 unset: function( id, options ) {
7577 delete this._views[ id ];
7578 this.primary.unset( id, options );
7579 this.secondary.unset( id, options );
7581 if ( ! options || ! options.silent ) {
7587 refresh: function() {
7588 var state = this.controller.state(),
7589 library = state.get('library'),
7590 selection = state.get('selection');
7592 _.each( this._views, function( button ) {
7593 if ( ! button.model || ! button.options || ! button.options.requires ) {
7597 var requires = button.options.requires,
7600 // Prevent insertion of attachments if any of them are still uploading
7601 disabled = _.some( selection.models, function( attachment ) {
7602 return attachment.get('uploading') === true;
7605 if ( requires.selection && selection && ! selection.length ) {
7607 } else if ( requires.library && library && ! library.length ) {
7610 button.model.set( 'disabled', disabled );
7615 module.exports = Toolbar;
7617 },{}],64:[function(require,module,exports){
7621 * wp.media.view.Toolbar.Embed
7624 * @augments wp.media.view.Toolbar.Select
7625 * @augments wp.media.view.Toolbar
7626 * @augments wp.media.View
7627 * @augments wp.Backbone.View
7628 * @augments Backbone.View
7630 var Select = wp.media.view.Toolbar.Select,
7631 l10n = wp.media.view.l10n,
7634 Embed = Select.extend({
7635 initialize: function() {
7636 _.defaults( this.options, {
7637 text: l10n.insertIntoPost,
7640 // Call 'initialize' directly on the parent class.
7641 Select.prototype.initialize.apply( this, arguments );
7644 refresh: function() {
7645 var url = this.controller.state().props.get('url');
7646 this.get('select').model.set( 'disabled', ! url || url === 'http://' );
7648 * call 'refresh' directly on the parent class
7650 Select.prototype.refresh.apply( this, arguments );
7654 module.exports = Embed;
7656 },{}],65:[function(require,module,exports){
7660 * wp.media.view.Toolbar.Select
7663 * @augments wp.media.view.Toolbar
7664 * @augments wp.media.View
7665 * @augments wp.Backbone.View
7666 * @augments Backbone.View
7668 var Toolbar = wp.media.view.Toolbar,
7669 l10n = wp.media.view.l10n,
7672 Select = Toolbar.extend({
7673 initialize: function() {
7674 var options = this.options;
7676 _.bindAll( this, 'clickSelect' );
7678 _.defaults( options, {
7685 // Does the button rely on the selection?
7691 options.items = _.defaults( options.items || {}, {
7696 click: this.clickSelect,
7697 requires: options.requires
7700 // Call 'initialize' directly on the parent class.
7701 Toolbar.prototype.initialize.apply( this, arguments );
7704 clickSelect: function() {
7705 var options = this.options,
7706 controller = this.controller;
7708 if ( options.close ) {
7712 if ( options.event ) {
7713 controller.state().trigger( options.event );
7716 if ( options.state ) {
7717 controller.setState( options.state );
7720 if ( options.reset ) {
7726 module.exports = Select;
7728 },{}],66:[function(require,module,exports){
7729 /*globals wp, _, jQuery */
7732 * Creates a dropzone on WP editor instances (elements with .wp-editor-wrap
7733 * or #wp-fullscreen-body) and relays drag'n'dropped files to a media workflow.
7735 * wp.media.view.EditorUploader
7738 * @augments wp.media.View
7739 * @augments wp.Backbone.View
7740 * @augments Backbone.View
7742 var View = wp.media.View,
7743 l10n = wp.media.view.l10n,
7747 EditorUploader = View.extend({
7749 className: 'uploader-editor',
7750 template: wp.template( 'uploader-editor' ),
7753 overContainer: false,
7754 overDropzone: false,
7758 * Bind drag'n'drop events to callbacks.
7760 initialize: function() {
7761 this.initialized = false;
7763 // Bail if not enabled or UA does not support drag'n'drop or File API.
7764 if ( ! window.tinyMCEPreInit || ! window.tinyMCEPreInit.dragDropUpload || ! this.browserSupport() ) {
7768 this.$document = $(document);
7769 this.dropzones = [];
7772 this.$document.on( 'drop', '.uploader-editor', _.bind( this.drop, this ) );
7773 this.$document.on( 'dragover', '.uploader-editor', _.bind( this.dropzoneDragover, this ) );
7774 this.$document.on( 'dragleave', '.uploader-editor', _.bind( this.dropzoneDragleave, this ) );
7775 this.$document.on( 'click', '.uploader-editor', _.bind( this.click, this ) );
7777 this.$document.on( 'dragover', _.bind( this.containerDragover, this ) );
7778 this.$document.on( 'dragleave', _.bind( this.containerDragleave, this ) );
7780 this.$document.on( 'dragstart dragend drop', _.bind( function( event ) {
7781 this.localDrag = event.type === 'dragstart';
7784 this.initialized = true;
7789 * Check browser support for drag'n'drop.
7793 browserSupport: function() {
7794 var supports = false, div = document.createElement('div');
7796 supports = ( 'draggable' in div ) || ( 'ondragstart' in div && 'ondrop' in div );
7797 supports = supports && !! ( window.File && window.FileList && window.FileReader );
7801 isDraggingFile: function( event ) {
7802 if ( this.draggingFile !== null ) {
7803 return this.draggingFile;
7806 if ( _.isUndefined( event.originalEvent ) || _.isUndefined( event.originalEvent.dataTransfer ) ) {
7810 this.draggingFile = _.indexOf( event.originalEvent.dataTransfer.types, 'Files' ) > -1 &&
7811 _.indexOf( event.originalEvent.dataTransfer.types, 'text/plain' ) === -1;
7813 return this.draggingFile;
7816 refresh: function( e ) {
7818 for ( dropzone_id in this.dropzones ) {
7819 // Hide the dropzones only if dragging has left the screen.
7820 this.dropzones[ dropzone_id ].toggle( this.overContainer || this.overDropzone );
7823 if ( ! _.isUndefined( e ) ) {
7824 $( e.target ).closest( '.uploader-editor' ).toggleClass( 'droppable', this.overDropzone );
7827 if ( ! this.overContainer && ! this.overDropzone ) {
7828 this.draggingFile = null;
7834 render: function() {
7835 if ( ! this.initialized ) {
7839 View.prototype.render.apply( this, arguments );
7840 $( '.wp-editor-wrap, #wp-fullscreen-body' ).each( _.bind( this.attach, this ) );
7844 attach: function( index, editor ) {
7845 // Attach a dropzone to an editor.
7846 var dropzone = this.$el.clone();
7847 this.dropzones.push( dropzone );
7848 $( editor ).append( dropzone );
7853 * When a file is dropped on the editor uploader, open up an editor media workflow
7854 * and upload the file immediately.
7856 * @param {jQuery.Event} event The 'drop' event.
7858 drop: function( event ) {
7859 var $wrap = null, uploadView;
7861 this.containerDragleave( event );
7862 this.dropzoneDragleave( event );
7864 this.files = event.originalEvent.dataTransfer.files;
7865 if ( this.files.length < 1 ) {
7869 // Set the active editor to the drop target.
7870 $wrap = $( event.target ).parents( '.wp-editor-wrap' );
7871 if ( $wrap.length > 0 && $wrap[0].id ) {
7872 window.wpActiveEditor = $wrap[0].id.slice( 3, -5 );
7875 if ( ! this.workflow ) {
7876 this.workflow = wp.media.editor.open( 'content', {
7879 title: l10n.addMedia,
7882 uploadView = this.workflow.uploader;
7883 if ( uploadView.uploader && uploadView.uploader.ready ) {
7884 this.addFiles.apply( this );
7886 this.workflow.on( 'uploader:ready', this.addFiles, this );
7889 this.workflow.state().reset();
7890 this.addFiles.apply( this );
7891 this.workflow.open();
7898 * Add the files to the uploader.
7900 addFiles: function() {
7901 if ( this.files.length ) {
7902 this.workflow.uploader.uploader.uploader.addFile( _.toArray( this.files ) );
7908 containerDragover: function( event ) {
7909 if ( this.localDrag || ! this.isDraggingFile( event ) ) {
7913 this.overContainer = true;
7917 containerDragleave: function() {
7918 this.overContainer = false;
7920 // Throttle dragleave because it's called when bouncing from some elements to others.
7921 _.delay( _.bind( this.refresh, this ), 50 );
7924 dropzoneDragover: function( event ) {
7925 if ( this.localDrag || ! this.isDraggingFile( event ) ) {
7929 this.overDropzone = true;
7930 this.refresh( event );
7934 dropzoneDragleave: function( e ) {
7935 this.overDropzone = false;
7936 _.delay( _.bind( this.refresh, this, e ), 50 );
7939 click: function( e ) {
7940 // In the rare case where the dropzone gets stuck, hide it on click.
7941 this.containerDragleave( e );
7942 this.dropzoneDragleave( e );
7943 this.localDrag = false;
7947 module.exports = EditorUploader;
7949 },{}],67:[function(require,module,exports){
7953 * wp.media.view.UploaderInline
7955 * The inline uploader that shows up in the 'Upload Files' tab.
7958 * @augments wp.media.View
7959 * @augments wp.Backbone.View
7960 * @augments Backbone.View
7962 var View = wp.media.View,
7965 UploaderInline = View.extend({
7967 className: 'uploader-inline',
7968 template: wp.template('uploader-inline'),
7971 'click .close': 'hide'
7974 initialize: function() {
7975 _.defaults( this.options, {
7981 if ( ! this.options.$browser && this.controller.uploader ) {
7982 this.options.$browser = this.controller.uploader.$browser;
7985 if ( _.isUndefined( this.options.postId ) ) {
7986 this.options.postId = wp.media.view.settings.post.id;
7989 if ( this.options.status ) {
7990 this.views.set( '.upload-inline-status', new wp.media.view.UploaderStatus({
7991 controller: this.controller
7996 prepare: function() {
7997 var suggestedWidth = this.controller.state().get('suggestedWidth'),
7998 suggestedHeight = this.controller.state().get('suggestedHeight'),
8001 data.message = this.options.message;
8002 data.canClose = this.options.canClose;
8004 if ( suggestedWidth && suggestedHeight ) {
8005 data.suggestedWidth = suggestedWidth;
8006 data.suggestedHeight = suggestedHeight;
8012 * @returns {wp.media.view.UploaderInline} Returns itself to allow chaining
8014 dispose: function() {
8015 if ( this.disposing ) {
8017 * call 'dispose' directly on the parent class
8019 return View.prototype.dispose.apply( this, arguments );
8022 // Run remove on `dispose`, so we can be sure to refresh the
8023 // uploader with a view-less DOM. Track whether we're disposing
8024 // so we don't trigger an infinite loop.
8025 this.disposing = true;
8026 return this.remove();
8029 * @returns {wp.media.view.UploaderInline} Returns itself to allow chaining
8031 remove: function() {
8033 * call 'remove' directly on the parent class
8035 var result = View.prototype.remove.apply( this, arguments );
8037 _.defer( _.bind( this.refresh, this ) );
8041 refresh: function() {
8042 var uploader = this.controller.uploader;
8049 * @returns {wp.media.view.UploaderInline}
8052 var $browser = this.options.$browser,
8055 if ( this.controller.uploader ) {
8056 $placeholder = this.$('.browser');
8058 // Check if we've already replaced the placeholder.
8059 if ( $placeholder[0] === $browser[0] ) {
8063 $browser.detach().text( $placeholder.text() );
8064 $browser[0].className = $placeholder[0].className;
8065 $placeholder.replaceWith( $browser.show() );
8072 this.$el.removeClass( 'hidden' );
8075 this.$el.addClass( 'hidden' );
8080 module.exports = UploaderInline;
8082 },{}],68:[function(require,module,exports){
8086 * wp.media.view.UploaderStatusError
8089 * @augments wp.media.View
8090 * @augments wp.Backbone.View
8091 * @augments Backbone.View
8093 var UploaderStatusError = wp.media.View.extend({
8094 className: 'upload-error',
8095 template: wp.template('uploader-status-error')
8098 module.exports = UploaderStatusError;
8100 },{}],69:[function(require,module,exports){
8104 * wp.media.view.UploaderStatus
8106 * An uploader status for on-going uploads.
8109 * @augments wp.media.View
8110 * @augments wp.Backbone.View
8111 * @augments Backbone.View
8113 var View = wp.media.View,
8116 UploaderStatus = View.extend({
8117 className: 'media-uploader-status',
8118 template: wp.template('uploader-status'),
8121 'click .upload-dismiss-errors': 'dismiss'
8124 initialize: function() {
8125 this.queue = wp.Uploader.queue;
8126 this.queue.on( 'add remove reset', this.visibility, this );
8127 this.queue.on( 'add remove reset change:percent', this.progress, this );
8128 this.queue.on( 'add remove reset change:uploading', this.info, this );
8130 this.errors = wp.Uploader.errors;
8131 this.errors.reset();
8132 this.errors.on( 'add remove reset', this.visibility, this );
8133 this.errors.on( 'add', this.error, this );
8136 * @global wp.Uploader
8137 * @returns {wp.media.view.UploaderStatus}
8139 dispose: function() {
8140 wp.Uploader.queue.off( null, null, this );
8142 * call 'dispose' directly on the parent class
8144 View.prototype.dispose.apply( this, arguments );
8148 visibility: function() {
8149 this.$el.toggleClass( 'uploading', !! this.queue.length );
8150 this.$el.toggleClass( 'errors', !! this.errors.length );
8151 this.$el.toggle( !! this.queue.length || !! this.errors.length );
8156 '$bar': '.media-progress-bar div',
8157 '$index': '.upload-index',
8158 '$total': '.upload-total',
8159 '$filename': '.upload-filename'
8160 }, function( selector, key ) {
8161 this[ key ] = this.$( selector );
8169 progress: function() {
8170 var queue = this.queue,
8173 if ( ! $bar || ! queue.length ) {
8177 $bar.width( ( queue.reduce( function( memo, attachment ) {
8178 if ( ! attachment.get('uploading') ) {
8182 var percent = attachment.get('percent');
8183 return memo + ( _.isNumber( percent ) ? percent : 100 );
8184 }, 0 ) / queue.length ) + '%' );
8188 var queue = this.queue,
8191 if ( ! queue.length ) {
8195 active = this.queue.find( function( attachment, i ) {
8197 return attachment.get('uploading');
8200 this.$index.text( index + 1 );
8201 this.$total.text( queue.length );
8202 this.$filename.html( active ? this.filename( active.get('filename') ) : '' );
8205 * @param {string} filename
8208 filename: function( filename ) {
8209 return wp.media.truncate( _.escape( filename ), 24 );
8212 * @param {Backbone.Model} error
8214 error: function( error ) {
8215 this.views.add( '.upload-errors', new wp.media.view.UploaderStatusError({
8216 filename: this.filename( error.get('file').name ),
8217 message: error.get('message')
8222 * @global wp.Uploader
8224 * @param {Object} event
8226 dismiss: function( event ) {
8227 var errors = this.views.get('.upload-errors');
8229 event.preventDefault();
8232 _.invoke( errors, 'remove' );
8234 wp.Uploader.errors.reset();
8238 module.exports = UploaderStatus;
8240 },{}],70:[function(require,module,exports){
8241 /*globals wp, _, jQuery */
8244 * wp.media.view.UploaderWindow
8246 * An uploader window that allows for dragging and dropping media.
8249 * @augments wp.media.View
8250 * @augments wp.Backbone.View
8251 * @augments Backbone.View
8253 * @param {object} [options] Options hash passed to the view.
8254 * @param {object} [options.uploader] Uploader properties.
8255 * @param {jQuery} [options.uploader.browser]
8256 * @param {jQuery} [options.uploader.dropzone] jQuery collection of the dropzone.
8257 * @param {object} [options.uploader.params]
8262 UploaderWindow = wp.media.View.extend({
8264 className: 'uploader-window',
8265 template: wp.template('uploader-window'),
8267 initialize: function() {
8270 this.$browser = $('<a href="#" class="browser" />').hide().appendTo('body');
8272 uploader = this.options.uploader = _.defaults( this.options.uploader || {}, {
8274 browser: this.$browser,
8278 // Ensure the dropzone is a jQuery collection.
8279 if ( uploader.dropzone && ! (uploader.dropzone instanceof $) ) {
8280 uploader.dropzone = $( uploader.dropzone );
8283 this.controller.on( 'activate', this.refresh, this );
8285 this.controller.on( 'detach', function() {
8286 this.$browser.remove();
8290 refresh: function() {
8291 if ( this.uploader ) {
8292 this.uploader.refresh();
8297 var postId = wp.media.view.settings.post.id,
8300 // If the uploader already exists, bail.
8301 if ( this.uploader ) {
8306 this.options.uploader.params.post_id = postId;
8308 this.uploader = new wp.Uploader( this.options.uploader );
8310 dropzone = this.uploader.dropzone;
8311 dropzone.on( 'dropzone:enter', _.bind( this.show, this ) );
8312 dropzone.on( 'dropzone:leave', _.bind( this.hide, this ) );
8314 $( this.uploader ).on( 'uploader:ready', _.bind( this._ready, this ) );
8317 _ready: function() {
8318 this.controller.trigger( 'uploader:ready' );
8322 var $el = this.$el.show();
8324 // Ensure that the animation is triggered by waiting until
8325 // the transparent element is painted into the DOM.
8326 _.defer( function() {
8327 $el.css({ opacity: 1 });
8332 var $el = this.$el.css({ opacity: 0 });
8334 wp.media.transition( $el ).done( function() {
8335 // Transition end events are subject to race conditions.
8336 // Make sure that the value is set as intended.
8337 if ( '0' === $el.css('opacity') ) {
8342 // https://core.trac.wordpress.org/ticket/27341
8343 _.delay( function() {
8344 if ( '0' === $el.css('opacity') && $el.is(':visible') ) {
8351 module.exports = UploaderWindow;
8353 },{}],71:[function(require,module,exports){
8359 * The base view class for media.
8361 * Undelegating events, removing events from the model, and
8362 * removing events from the controller mirror the code for
8363 * `Backbone.View.dispose` in Backbone 0.9.8 development.
8365 * This behavior has since been removed, and should not be used
8366 * outside of the media manager.
8369 * @augments wp.Backbone.View
8370 * @augments Backbone.View
8372 var View = wp.Backbone.View.extend({
8373 constructor: function( options ) {
8374 if ( options && options.controller ) {
8375 this.controller = options.controller;
8377 wp.Backbone.View.apply( this, arguments );
8380 * @todo The internal comment mentions this might have been a stop-gap
8381 * before Backbone 0.9.8 came out. Figure out if Backbone core takes
8382 * care of this in Backbone.View now.
8384 * @returns {wp.media.View} Returns itself to allow chaining
8386 dispose: function() {
8387 // Undelegating events, removing events from the model, and
8388 // removing events from the controller mirror the code for
8389 // `Backbone.View.dispose` in Backbone 0.9.8 development.
8390 this.undelegateEvents();
8392 if ( this.model && this.model.off ) {
8393 this.model.off( null, null, this );
8396 if ( this.collection && this.collection.off ) {
8397 this.collection.off( null, null, this );
8400 // Unbind controller events.
8401 if ( this.controller && this.controller.off ) {
8402 this.controller.off( null, null, this );
8408 * @returns {wp.media.View} Returns itself to allow chaining
8410 remove: function() {
8413 * call 'remove' directly on the parent class
8415 return wp.Backbone.View.prototype.remove.apply( this, arguments );
8419 module.exports = View;