var l10n = wp.media.view.l10n,
getUserSetting = window.getUserSetting,
setUserSetting = window.setUserSetting,
Library;
/**
* wp.media.controller.Library
*
* A state for choosing an attachment or group of attachments from the media library.
*
* @memberOf wp.media.controller
*
* @class
* @augments wp.media.controller.State
* @augments Backbone.Model
* @mixes media.selectionSync
*
* @param {object} [attributes] The attributes hash passed to the state.
* @param {string} [attributes.id=library] Unique identifier.
* @param {string} [attributes.title=Media library] Title for the state. Displays in the media menu and the frame's title region.
* @param {wp.media.model.Attachments} [attributes.library] The attachments collection to browse.
* If one is not supplied, a collection of all attachments will be created.
* @param {wp.media.model.Selection|object} [attributes.selection] A collection to contain attachment selections within the state.
* If the 'selection' attribute is a plain JS object,
* a Selection will be created using its values as the selection instance's `props` model.
* Otherwise, it will copy the library's `props` model.
* @param {boolean} [attributes.multiple=false] Whether multi-select is enabled.
* @param {string} [attributes.content=upload] Initial mode for the content region.
* Overridden by persistent user setting if 'contentUserSetting' is true.
* @param {string} [attributes.menu=default] Initial mode for the menu region.
* @param {string} [attributes.router=browse] Initial mode for the router region.
* @param {string} [attributes.toolbar=select] Initial mode for the toolbar region.
* @param {boolean} [attributes.searchable=true] Whether the library is searchable.
* @param {boolean|string} [attributes.filterable=false] Whether the library is filterable, and if so what filters should be shown.
* Accepts 'all', 'uploaded', or 'unattached'.
* @param {boolean} [attributes.sortable=true] Whether the Attachments should be sortable. Depends on the orderby property being set to menuOrder on the attachments collection.
* @param {boolean} [attributes.autoSelect=true] Whether an uploaded attachment should be automatically added to the selection.
* @param {boolean} [attributes.describe=false] Whether to offer UI to describe attachments - e.g. captioning images in a gallery.
* @param {boolean} [attributes.contentUserSetting=true] Whether the content region's mode should be set and persisted per user.
* @param {boolean} [attributes.syncSelection=true] Whether the Attachments selection should be persisted from the last state.
*/
Library = wp.media.controller.State.extend(/** @lends wp.media.controller.Library.prototype */{
defaults: {
id: 'library',
title: l10n.mediaLibraryTitle,
multiple: false,
content: 'upload',
menu: 'default',
router: 'browse',
toolbar: 'select',
searchable: true,
filterable: false,
sortable: true,
autoSelect: true,
describe: false,
contentUserSetting: true,
syncSelection: true
},
/**
* If a library isn't provided, query all media items.
* If a selection instance isn't provided, create one.
*
* @since 3.5.0
*/
initialize: function() {
var selection = this.get('selection'),
props;
if ( ! this.get('library') ) {
this.set( 'library', wp.media.query() );
}
if ( ! ( selection instanceof wp.media.model.Selection ) ) {
props = selection;
if ( ! props ) {
props = this.get('library').props.toJSON();
props = _.omit( props, 'orderby', 'query' );
}
this.set( 'selection', new wp.media.model.Selection( null, {
multiple: this.get('multiple'),
props: props
}) );
}
this.resetDisplays();
},
/**
* @since 3.5.0
*/
activate: function() {
this.syncSelection();
wp.Uploader.queue.on( 'add', this.uploading, this );
this.get('selection').on( 'add remove reset', this.refreshContent, this );
if ( this.get( 'router' ) && this.get('contentUserSetting') ) {
this.frame.on( 'content:activate', this.saveContentMode, this );
this.set( 'content', getUserSetting( 'libraryContent', this.get('content') ) );
}
},
/**
* @since 3.5.0
*/
deactivate: function() {
this.recordSelection();
this.frame.off( 'content:activate', this.saveContentMode, this );
// Unbind all event handlers that use this state as the context
// from the selection.
this.get('selection').off( null, null, this );
wp.Uploader.queue.off( null, null, this );
},
/**
* Reset the library to its initial state.
*
* @since 3.5.0
*/
reset: function() {
this.get('selection').reset();
this.resetDisplays();
this.refreshContent();
},
/**
* Reset the attachment display settings defaults to the site options.
*
* If site options don't define them, fall back to a persistent user setting.
*
* @since 3.5.0
*/
resetDisplays: function() {
var defaultProps = wp.media.view.settings.defaultProps;
this._displays = [];
this._defaultDisplaySettings = {
align: getUserSetting( 'align', defaultProps.align ) || 'none',
size: getUserSetting( 'imgsize', defaultProps.size ) || 'medium',
link: getUserSetting( 'urlbutton', defaultProps.link ) || 'none'
};
},
/**
* Create a model to represent display settings (alignment, etc.) for an attachment.
*
* @since 3.5.0
*
* @param {wp.media.model.Attachment} attachment
* @return {Backbone.Model}
*/
display: function( attachment ) {
var displays = this._displays;
if ( ! displays[ attachment.cid ] ) {
displays[ attachment.cid ] = new Backbone.Model( this.defaultDisplaySettings( attachment ) );
}
return displays[ attachment.cid ];
},
/**
* Given an attachment, create attachment display settings properties.
*
* @since 3.6.0
*
* @param {wp.media.model.Attachment} attachment
* @return {Object}
*/
defaultDisplaySettings: function( attachment ) {
var settings = _.clone( this._defaultDisplaySettings );
settings.canEmbed = this.canEmbed( attachment );
if ( settings.canEmbed ) {
settings.link = 'embed';
} else if ( ! this.isImageAttachment( attachment ) && settings.link === 'none' ) {
settings.link = 'file';
}
return settings;
},
/**
* Whether an attachment is image.
*
* @since 4.4.1
*
* @param {wp.media.model.Attachment} attachment
* @return {Boolean}
*/
isImageAttachment: function( attachment ) {
// If uploading, we know the filename but not the mime type.
if ( attachment.get('uploading') ) {
return /\.(jpe?g|png|gif)$/i.test( attachment.get('filename') );
}
return attachment.get('type') === 'image';
},
/**
* Whether an attachment can be embedded (audio or video).
*
* @since 3.6.0
*
* @param {wp.media.model.Attachment} attachment
* @return {Boolean}
*/
canEmbed: function( attachment ) {
// If uploading, we know the filename but not the mime type.
if ( ! attachment.get('uploading') ) {
var type = attachment.get('type');
if ( type !== 'audio' && type !== 'video' ) {
return false;
}
}
return _.contains( wp.media.view.settings.embedExts, attachment.get('filename').split('.').pop() );
},
/**
* If the state is active, no items are selected, and the current
* content mode is not an option in the state's router (provided
* the state has a router), reset the content mode to the default.
*
* @since 3.5.0
*/
refreshContent: function() {
var selection = this.get('selection'),
frame = this.frame,
router = frame.router.get(),
mode = frame.content.mode();
if ( this.active && ! selection.length && router && ! router.get( mode ) ) {
this.frame.content.render( this.get('content') );
}
},
/**
* Callback handler when an attachment is uploaded.
*
* Switch to the Media Library if uploaded from the 'Upload Files' tab.
*
* Adds any uploading attachments to the selection.
*
* If the state only supports one attachment to be selected and multiple
* attachments are uploaded, the last attachment in the upload queue will
* be selected.
*
* @since 3.5.0
*
* @param {wp.media.model.Attachment} attachment
*/
uploading: function( attachment ) {
var content = this.frame.content;
if ( 'upload' === content.mode() ) {
this.frame.content.mode('browse');
}
if ( this.get( 'autoSelect' ) ) {
this.get('selection').add( attachment );
this.frame.trigger( 'library:selection:add' );
}
},
/**
* Persist the mode of the content region as a user setting.
*
* @since 3.5.0
*/
saveContentMode: function() {
if ( 'browse' !== this.get('router') ) {
return;
}
var mode = this.frame.content.mode(),
view = this.frame.router.get();
if ( view && view.get( mode ) ) {
setUserSetting( 'libraryContent', mode );
}
}
});
// Make selectionSync available on any Media Library state.
_.extend( Library.prototype, wp.media.selectionSync );
module.exports = Library;