/*globals wp, _, Backbone */ /** * wp.media.controller.Library * * A state for choosing an attachment or group of attachments from the media library. * * @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. */ var l10n = wp.media.view.l10n, getUserSetting = window.getUserSetting, setUserSetting = window.setUserSetting, Library; Library = wp.media.controller.State.extend({ 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: defaultProps.align || getUserSetting( 'align', 'none' ), size: defaultProps.size || getUserSetting( 'imgsize', 'medium' ), link: defaultProps.link || getUserSetting( 'urlbutton', 'file' ) }; }, /** * Create a model to represent display settings (alignment, etc.) for an attachment. * * @since 3.5.0 * * @param {wp.media.model.Attachment} attachment * @returns {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 * @returns {Object} */ defaultDisplaySettings: function( attachment ) { var settings = this._defaultDisplaySettings; if ( settings.canEmbed = this.canEmbed( attachment ) ) { settings.link = 'embed'; } return settings; }, /** * Whether an attachment can be embedded (audio or video). * * @since 3.6.0 * * @param {wp.media.model.Attachment} attachment * @returns {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;