/******/ (() => { // webpackBootstrap /******/ var __webpack_modules__ = ({ /***/ 1: /***/ ((module) => { var MenuItem = wp.media.view.MenuItem, PriorityList = wp.media.view.PriorityList, Menu; /** * wp.media.view.Menu * * @memberOf wp.media.view * * @class * @augments wp.media.view.PriorityList * @augments wp.media.View * @augments wp.Backbone.View * @augments Backbone.View */ Menu = PriorityList.extend(/** @lends wp.media.view.Menu.prototype */{ tagName: 'div', className: 'media-menu', property: 'state', ItemView: MenuItem, region: 'menu', attributes: { role: 'tablist', 'aria-orientation': 'horizontal' }, initialize: function() { this._views = {}; this.set( _.extend( {}, this._views, this.options.views ), { silent: true }); delete this.options.views; if ( ! this.options.silent ) { this.render(); } // Initialize the Focus Manager. this.focusManager = new wp.media.view.FocusManager( { el: this.el, mode: 'tabsNavigation' } ); // The menu is always rendered and can be visible or hidden on some frames. this.isVisible = true; }, /** * @param {Object} options * @param {string} id * @return {wp.media.View} */ toView: function( options, id ) { options = options || {}; options[ this.property ] = options[ this.property ] || id; return new this.ItemView( options ).render(); }, ready: function() { /** * call 'ready' directly on the parent class */ PriorityList.prototype.ready.apply( this, arguments ); this.visibility(); // Set up aria tabs initial attributes. this.focusManager.setupAriaTabs(); }, set: function() { /** * call 'set' directly on the parent class */ PriorityList.prototype.set.apply( this, arguments ); this.visibility(); }, unset: function() { /** * call 'unset' directly on the parent class */ PriorityList.prototype.unset.apply( this, arguments ); this.visibility(); }, visibility: function() { var region = this.region, view = this.controller[ region ].get(), views = this.views.get(), hide = ! views || views.length < 2; if ( this === view ) { // Flag this menu as hidden or visible. this.isVisible = ! hide; // Set or remove a CSS class to hide the menu. this.controller.$el.toggleClass( 'hide-' + region, hide ); } }, /** * @param {string} id */ select: function( id ) { var view = this.get( id ); if ( ! view ) { return; } this.deselect(); view.$el.addClass('active'); // Set up again the aria tabs initial attributes after the menu updates. this.focusManager.setupAriaTabs(); }, deselect: function() { this.$el.children().removeClass('active'); }, hide: function( id ) { var view = this.get( id ); if ( ! view ) { return; } view.$el.addClass('hidden'); }, show: function( id ) { var view = this.get( id ); if ( ! view ) { return; } view.$el.removeClass('hidden'); } }); module.exports = Menu; /***/ }), /***/ 168: /***/ ((module) => { var $ = Backbone.$, ButtonGroup; /** * wp.media.view.ButtonGroup * * @memberOf wp.media.view * * @class * @augments wp.media.View * @augments wp.Backbone.View * @augments Backbone.View */ ButtonGroup = wp.media.View.extend(/** @lends wp.media.view.ButtonGroup.prototype */{ tagName: 'div', className: 'button-group button-large media-button-group', initialize: function() { /** * @member {wp.media.view.Button[]} */ this.buttons = _.map( this.options.buttons || [], function( button ) { if ( button instanceof Backbone.View ) { return button; } else { return new wp.media.view.Button( button ).render(); } }); delete this.options.buttons; if ( this.options.classes ) { this.$el.addClass( this.options.classes ); } }, /** * @return {wp.media.view.ButtonGroup} */ render: function() { this.$el.html( $( _.pluck( this.buttons, 'el' ) ).detach() ); return this; } }); module.exports = ButtonGroup; /***/ }), /***/ 170: /***/ ((module) => { /** * wp.media.view.Heading * * A reusable heading component for the media library * * Used to add accessibility friendly headers in the media library/modal. * * @class * @augments wp.media.View * @augments wp.Backbone.View * @augments Backbone.View */ var Heading = wp.media.View.extend( { tagName: function() { return this.options.level || 'h1'; }, className: 'media-views-heading', initialize: function() { if ( this.options.className ) { this.$el.addClass( this.options.className ); } this.text = this.options.text; }, render: function() { this.$el.html( this.text ); return this; } } ); module.exports = Heading; /***/ }), /***/ 397: /***/ ((module) => { var Select = wp.media.view.Toolbar.Select, l10n = wp.media.view.l10n, Embed; /** * wp.media.view.Toolbar.Embed * * @memberOf wp.media.view.Toolbar * * @class * @augments wp.media.view.Toolbar.Select * @augments wp.media.view.Toolbar * @augments wp.media.View * @augments wp.Backbone.View * @augments Backbone.View */ Embed = Select.extend(/** @lends wp.media.view.Toolbar.Embed.prototype */{ initialize: function() { _.defaults( this.options, { text: l10n.insertIntoPost, requires: false }); // Call 'initialize' directly on the parent class. Select.prototype.initialize.apply( this, arguments ); }, refresh: function() { var url = this.controller.state().props.get('url'); this.get('select').model.set( 'disabled', ! url || url === 'http://' ); /** * call 'refresh' directly on the parent class */ Select.prototype.refresh.apply( this, arguments ); } }); module.exports = Embed; /***/ }), /***/ 443: /***/ ((module) => { var View = wp.media.view, SiteIconCropper; /** * wp.media.view.SiteIconCropper * * Uses the imgAreaSelect plugin to allow a user to crop a Site Icon. * * Takes imgAreaSelect options from * wp.customize.SiteIconControl.calculateImageSelectOptions. * * @memberOf wp.media.view * * @class * @augments wp.media.view.Cropper * @augments wp.media.View * @augments wp.Backbone.View * @augments Backbone.View */ SiteIconCropper = View.Cropper.extend(/** @lends wp.media.view.SiteIconCropper.prototype */{ className: 'crop-content site-icon', ready: function () { View.Cropper.prototype.ready.apply( this, arguments ); this.$( '.crop-image' ).on( 'load', _.bind( this.addSidebar, this ) ); }, addSidebar: function() { this.sidebar = new wp.media.view.Sidebar({ controller: this.controller }); this.sidebar.set( 'preview', new wp.media.view.SiteIconPreview({ controller: this.controller, attachment: this.options.attachment }) ); this.controller.cropperView.views.add( this.sidebar ); } }); module.exports = SiteIconCropper; /***/ }), /***/ 455: /***/ ((module) => { var MediaFrame = wp.media.view.MediaFrame, l10n = wp.media.view.l10n, Select; /** * wp.media.view.MediaFrame.Select * * A frame for selecting an item or items from the media library. * * @memberOf wp.media.view.MediaFrame * * @class * @augments wp.media.view.MediaFrame * @augments wp.media.view.Frame * @augments wp.media.View * @augments wp.Backbone.View * @augments Backbone.View * @mixes wp.media.controller.StateMachine */ Select = MediaFrame.extend(/** @lends wp.media.view.MediaFrame.Select.prototype */{ initialize: function() { // Call 'initialize' directly on the parent class. MediaFrame.prototype.initialize.apply( this, arguments ); _.defaults( this.options, { selection: [], library: {}, multiple: false, state: 'library' }); this.createSelection(); this.createStates(); this.bindHandlers(); }, /** * Attach a selection collection to the frame. * * A selection is a collection of attachments used for a specific purpose * by a media frame. e.g. Selecting an attachment (or many) to insert into * post content. * * @see media.model.Selection */ createSelection: function() { var selection = this.options.selection; if ( ! (selection instanceof wp.media.model.Selection) ) { this.options.selection = new wp.media.model.Selection( selection, { multiple: this.options.multiple }); } this._selection = { attachments: new wp.media.model.Attachments(), difference: [] }; }, editImageContent: function() { var image = this.state().get('image'), view = new wp.media.view.EditImage( { model: image, controller: this } ).render(); this.content.set( view ); // After creating the wrapper view, load the actual editor via an Ajax call. view.loadEditor(); }, /** * Create the default states on the frame. */ createStates: function() { var options = this.options; if ( this.options.states ) { return; } // Add the default states. this.states.add([ // Main states. new wp.media.controller.Library({ library: wp.media.query( options.library ), multiple: options.multiple, title: options.title, priority: 20 }), new wp.media.controller.EditImage( { model: options.editImage } ) ]); }, /** * Bind region mode event callbacks. * * @see media.controller.Region.render */ bindHandlers: function() { this.on( 'router:create:browse', this.createRouter, this ); this.on( 'router:render:browse', this.browseRouter, this ); this.on( 'content:create:browse', this.browseContent, this ); this.on( 'content:render:upload', this.uploadContent, this ); this.on( 'toolbar:create:select', this.createSelectToolbar, this ); this.on( 'content:render:edit-image', this.editImageContent, this ); }, /** * Render callback for the router region in the `browse` mode. * * @param {wp.media.view.Router} routerView */ browseRouter: function( routerView ) { routerView.set({ upload: { text: l10n.uploadFilesTitle, priority: 20 }, browse: { text: l10n.mediaLibraryTitle, priority: 40 } }); }, /** * Render callback for the content region in the `browse` mode. * * @param {wp.media.controller.Region} contentRegion */ browseContent: function( contentRegion ) { var state = this.state(); this.$el.removeClass('hide-toolbar'); // Browse our library of attachments. contentRegion.view = new wp.media.view.AttachmentsBrowser({ controller: this, collection: state.get('library'), selection: state.get('selection'), model: state, sortable: state.get('sortable'), search: state.get('searchable'), filters: state.get('filterable'), date: state.get('date'), display: state.has('display') ? state.get('display') : state.get('displaySettings'), dragInfo: state.get('dragInfo'), idealColumnWidth: state.get('idealColumnWidth'), suggestedWidth: state.get('suggestedWidth'), suggestedHeight: state.get('suggestedHeight'), AttachmentView: state.get('AttachmentView') }); }, /** * Render callback for the content region in the `upload` mode. */ uploadContent: function() { this.$el.removeClass( 'hide-toolbar' ); this.content.set( new wp.media.view.UploaderInline({ controller: this }) ); }, /** * Toolbars * * @param {Object} toolbar * @param {Object} [options={}] * @this wp.media.controller.Region */ createSelectToolbar: function( toolbar, options ) { options = options || this.options.button || {}; options.controller = this; toolbar.view = new wp.media.view.Toolbar.Select( options ); } }); module.exports = Select; /***/ }), /***/ 472: /***/ ((module) => { 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|webp|avif|heic|heif)$/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; /***/ }), /***/ 705: /***/ ((module) => { var State = wp.media.controller.State, Library = wp.media.controller.Library, l10n = wp.media.view.l10n, ImageDetails; /** * wp.media.controller.ImageDetails * * A state for editing the attachment display settings of an image that's been * inserted into the editor. * * @memberOf wp.media.controller * * @class * @augments wp.media.controller.State * @augments Backbone.Model * * @param {object} [attributes] The attributes hash passed to the state. * @param {string} [attributes.id=image-details] Unique identifier. * @param {string} [attributes.title=Image Details] Title for the state. Displays in the frame's title region. * @param {wp.media.model.Attachment} attributes.image The image's model. * @param {string|false} [attributes.content=image-details] Initial mode for the content region. * @param {string|false} [attributes.menu=false] Initial mode for the menu region. * @param {string|false} [attributes.router=false] Initial mode for the router region. * @param {string|false} [attributes.toolbar=image-details] Initial mode for the toolbar region. * @param {boolean} [attributes.editing=false] Unused. * @param {int} [attributes.priority=60] Unused. * * @todo This state inherits some defaults from media.controller.Library.prototype.defaults, * however this may not do anything. */ ImageDetails = State.extend(/** @lends wp.media.controller.ImageDetails.prototype */{ defaults: _.defaults({ id: 'image-details', title: l10n.imageDetailsTitle, content: 'image-details', menu: false, router: false, toolbar: 'image-details', editing: false, priority: 60 }, Library.prototype.defaults ), /** * @since 3.9.0 * * @param options Attributes */ initialize: function( options ) { this.image = options.image; State.prototype.initialize.apply( this, arguments ); }, /** * @since 3.9.0 */ activate: function() { this.frame.modal.$el.addClass('image-details'); } }); module.exports = ImageDetails; /***/ }), /***/ 718: /***/ ((module) => { var $ = jQuery; /** * wp.media.view.FocusManager * * @memberOf wp.media.view * * @class * @augments wp.media.View * @augments wp.Backbone.View * @augments Backbone.View */ var FocusManager = wp.media.View.extend(/** @lends wp.media.view.FocusManager.prototype */{ events: { 'keydown': 'focusManagementMode' }, /** * Initializes the Focus Manager. * * @param {Object} options The Focus Manager options. * * @since 5.3.0 * * @return {void} */ initialize: function( options ) { this.mode = options.mode || 'constrainTabbing'; this.tabsAutomaticActivation = options.tabsAutomaticActivation || false; }, /** * Determines which focus management mode to use. * * @since 5.3.0 * * @param {Object} event jQuery event object. * * @return {void} */ focusManagementMode: function( event ) { if ( this.mode === 'constrainTabbing' ) { this.constrainTabbing( event ); } if ( this.mode === 'tabsNavigation' ) { this.tabsNavigation( event ); } }, /** * Gets all the tabbable elements. * * @since 5.3.0 * * @return {Object} A jQuery collection of tabbable elements. */ getTabbables: function() { // Skip the file input added by Plupload. return this.$( ':tabbable' ).not( '.moxie-shim input[type="file"]' ); }, /** * Moves focus to the modal dialog. * * @since 3.5.0 * * @return {void} */ focus: function() { this.$( '.media-modal' ).trigger( 'focus' ); }, /** * Constrains navigation with the Tab key within the media view element. * * @since 4.0.0 * * @param {Object} event A keydown jQuery event. * * @return {void} */ constrainTabbing: function( event ) { var tabbables; // Look for the tab key. if ( 9 !== event.keyCode ) { return; } tabbables = this.getTabbables(); // Keep tab focus within media modal while it's open. if ( tabbables.last()[0] === event.target && ! event.shiftKey ) { tabbables.first().focus(); return false; } else if ( tabbables.first()[0] === event.target && event.shiftKey ) { tabbables.last().focus(); return false; } }, /** * Hides from assistive technologies all the body children. * * Sets an `aria-hidden="true"` attribute on all the body children except * the provided element and other elements that should not be hidden. * * The reason why we use `aria-hidden` is that `aria-modal="true"` is buggy * in Safari 11.1 and support is spotty in other browsers. Also, `aria-modal="true"` * prevents the `wp.a11y.speak()` ARIA live regions to work as they're outside * of the modal dialog and get hidden from assistive technologies. * * @since 5.2.3 * * @param {Object} visibleElement The jQuery object representing the element that should not be hidden. * * @return {void} */ setAriaHiddenOnBodyChildren: function( visibleElement ) { var bodyChildren, self = this; if ( this.isBodyAriaHidden ) { return; } // Get all the body children. bodyChildren = document.body.children; // Loop through the body children and hide the ones that should be hidden. _.each( bodyChildren, function( element ) { // Don't hide the modal element. if ( element === visibleElement[0] ) { return; } // Determine the body children to hide. if ( self.elementShouldBeHidden( element ) ) { element.setAttribute( 'aria-hidden', 'true' ); // Store the hidden elements. self.ariaHiddenElements.push( element ); } } ); this.isBodyAriaHidden = true; }, /** * Unhides from assistive technologies all the body children. * * Makes visible again to assistive technologies all the body children * previously hidden and stored in this.ariaHiddenElements. * * @since 5.2.3 * * @return {void} */ removeAriaHiddenFromBodyChildren: function() { _.each( this.ariaHiddenElements, function( element ) { element.removeAttribute( 'aria-hidden' ); } ); this.ariaHiddenElements = []; this.isBodyAriaHidden = false; }, /** * Determines if the passed element should not be hidden from assistive technologies. * * @since 5.2.3 * * @param {Object} element The DOM element that should be checked. * * @return {boolean} Whether the element should not be hidden from assistive technologies. */ elementShouldBeHidden: function( element ) { var role = element.getAttribute( 'role' ), liveRegionsRoles = [ 'alert', 'status', 'log', 'marquee', 'timer' ]; /* * Don't hide scripts, elements that already have `aria-hidden`, and * ARIA live regions. */ return ! ( element.tagName === 'SCRIPT' || element.hasAttribute( 'aria-hidden' ) || element.hasAttribute( 'aria-live' ) || liveRegionsRoles.indexOf( role ) !== -1 ); }, /** * Whether the body children are hidden from assistive technologies. * * @since 5.2.3 */ isBodyAriaHidden: false, /** * Stores an array of DOM elements that should be hidden from assistive * technologies, for example when the media modal dialog opens. * * @since 5.2.3 */ ariaHiddenElements: [], /** * Holds the jQuery collection of ARIA tabs. * * @since 5.3.0 */ tabs: $(), /** * Sets up tabs in an ARIA tabbed interface. * * @since 5.3.0 * * @param {Object} event jQuery event object. * * @return {void} */ setupAriaTabs: function() { this.tabs = this.$( '[role="tab"]' ); // Set up initial attributes. this.tabs.attr( { 'aria-selected': 'false', tabIndex: '-1' } ); // Set up attributes on the initially active tab. this.tabs.filter( '.active' ) .removeAttr( 'tabindex' ) .attr( 'aria-selected', 'true' ); }, /** * Enables arrows navigation within the ARIA tabbed interface. * * @since 5.3.0 * * @param {Object} event jQuery event object. * * @return {void} */ tabsNavigation: function( event ) { var orientation = 'horizontal', keys = [ 32, 35, 36, 37, 38, 39, 40 ]; // Return if not Spacebar, End, Home, or Arrow keys. if ( keys.indexOf( event.which ) === -1 ) { return; } // Determine navigation direction. if ( this.$el.attr( 'aria-orientation' ) === 'vertical' ) { orientation = 'vertical'; } // Make Up and Down arrow keys do nothing with horizontal tabs. if ( orientation === 'horizontal' && [ 38, 40 ].indexOf( event.which ) !== -1 ) { return; } // Make Left and Right arrow keys do nothing with vertical tabs. if ( orientation === 'vertical' && [ 37, 39 ].indexOf( event.which ) !== -1 ) { return; } this.switchTabs( event, this.tabs ); }, /** * Switches tabs in the ARIA tabbed interface. * * @since 5.3.0 * * @param {Object} event jQuery event object. * * @return {void} */ switchTabs: function( event ) { var key = event.which, index = this.tabs.index( $( event.target ) ), newIndex; switch ( key ) { // Space bar: Activate current targeted tab. case 32: { this.activateTab( this.tabs[ index ] ); break; } // End key: Activate last tab. case 35: { event.preventDefault(); this.activateTab( this.tabs[ this.tabs.length - 1 ] ); break; } // Home key: Activate first tab. case 36: { event.preventDefault(); this.activateTab( this.tabs[ 0 ] ); break; } // Left and up keys: Activate previous tab. case 37: case 38: { event.preventDefault(); newIndex = ( index - 1 ) < 0 ? this.tabs.length - 1 : index - 1; this.activateTab( this.tabs[ newIndex ] ); break; } // Right and down keys: Activate next tab. case 39: case 40: { event.preventDefault(); newIndex = ( index + 1 ) === this.tabs.length ? 0 : index + 1; this.activateTab( this.tabs[ newIndex ] ); break; } } }, /** * Sets a single tab to be focusable and semantically selected. * * @since 5.3.0 * * @param {Object} tab The tab DOM element. * * @return {void} */ activateTab: function( tab ) { if ( ! tab ) { return; } // The tab is a DOM element: no need for jQuery methods. tab.focus(); // Handle automatic activation. if ( this.tabsAutomaticActivation ) { tab.removeAttribute( 'tabindex' ); tab.setAttribute( 'aria-selected', 'true' ); tab.click(); return; } // Handle manual activation. $( tab ).on( 'click', function() { tab.removeAttribute( 'tabindex' ); tab.setAttribute( 'aria-selected', 'true' ); } ); } }); module.exports = FocusManager; /***/ }), /***/ 846: /***/ ((module) => { /** * wp.media.view.Button * * @memberOf wp.media.view * * @class * @augments wp.media.View * @augments wp.Backbone.View * @augments Backbone.View */ var Button = wp.media.View.extend(/** @lends wp.media.view.Button.prototype */{ tagName: 'button', className: 'media-button', attributes: { type: 'button' }, events: { 'click': 'click' }, defaults: { text: '', style: '', size: 'large', disabled: false }, initialize: function() { /** * Create a model with the provided `defaults`. * * @member {Backbone.Model} */ this.model = new Backbone.Model( this.defaults ); // If any of the `options` have a key from `defaults`, apply its // value to the `model` and remove it from the `options object. _.each( this.defaults, function( def, key ) { var value = this.options[ key ]; if ( _.isUndefined( value ) ) { return; } this.model.set( key, value ); delete this.options[ key ]; }, this ); this.listenTo( this.model, 'change', this.render ); }, /** * @return {wp.media.view.Button} Returns itself to allow chaining. */ render: function() { var classes = [ 'button', this.className ], model = this.model.toJSON(); if ( model.style ) { classes.push( 'button-' + model.style ); } if ( model.size ) { classes.push( 'button-' + model.size ); } classes = _.uniq( classes.concat( this.options.classes ) ); this.el.className = classes.join(' '); this.$el.attr( 'disabled', model.disabled ); this.$el.text( this.model.get('text') ); return this; }, /** * @param {Object} event */ click: function( event ) { if ( '#' === this.attributes.href ) { event.preventDefault(); } if ( this.options.click && ! this.model.get('disabled') ) { this.options.click.apply( this, arguments ); } } }); module.exports = Button; /***/ }), /***/ 1061: /***/ ((module) => { /** * wp.media.view.Frame * * A frame is a composite view consisting of one or more regions and one or more * states. * * @memberOf wp.media.view * * @see wp.media.controller.State * @see wp.media.controller.Region * * @class * @augments wp.media.View * @augments wp.Backbone.View * @augments Backbone.View * @mixes wp.media.controller.StateMachine */ var Frame = wp.media.View.extend(/** @lends wp.media.view.Frame.prototype */{ initialize: function() { _.defaults( this.options, { mode: [ 'select' ] }); this._createRegions(); this._createStates(); this._createModes(); }, _createRegions: function() { // Clone the regions array. this.regions = this.regions ? this.regions.slice() : []; // Initialize regions. _.each( this.regions, function( region ) { this[ region ] = new wp.media.controller.Region({ view: this, id: region, selector: '.media-frame-' + region }); }, this ); }, /** * Create the frame's states. * * @see wp.media.controller.State * @see wp.media.controller.StateMachine * * @fires wp.media.controller.State#ready */ _createStates: function() { // Create the default `states` collection. this.states = new Backbone.Collection( null, { model: wp.media.controller.State }); // Ensure states have a reference to the frame. this.states.on( 'add', function( model ) { model.frame = this; model.trigger('ready'); }, this ); if ( this.options.states ) { this.states.add( this.options.states ); } }, /** * A frame can be in a mode or multiple modes at one time. * * For example, the manage media frame can be in the `Bulk Select` or `Edit` mode. */ _createModes: function() { // Store active "modes" that the frame is in. Unrelated to region modes. this.activeModes = new Backbone.Collection(); this.activeModes.on( 'add remove reset', _.bind( this.triggerModeEvents, this ) ); _.each( this.options.mode, function( mode ) { this.activateMode( mode ); }, this ); }, /** * Reset all states on the frame to their defaults. * * @return {wp.media.view.Frame} Returns itself to allow chaining. */ reset: function() { this.states.invoke( 'trigger', 'reset' ); return this; }, /** * Map activeMode collection events to the frame. */ triggerModeEvents: function( model, collection, options ) { var collectionEvent, modeEventMap = { add: 'activate', remove: 'deactivate' }, eventToTrigger; // Probably a better way to do this. _.each( options, function( value, key ) { if ( value ) { collectionEvent = key; } } ); if ( ! _.has( modeEventMap, collectionEvent ) ) { return; } eventToTrigger = model.get('id') + ':' + modeEventMap[collectionEvent]; this.trigger( eventToTrigger ); }, /** * Activate a mode on the frame. * * @param string mode Mode ID. * @return {this} Returns itself to allow chaining. */ activateMode: function( mode ) { // Bail if the mode is already active. if ( this.isModeActive( mode ) ) { return; } this.activeModes.add( [ { id: mode } ] ); // Add a CSS class to the frame so elements can be styled for the mode. this.$el.addClass( 'mode-' + mode ); return this; }, /** * Deactivate a mode on the frame. * * @param string mode Mode ID. * @return {this} Returns itself to allow chaining. */ deactivateMode: function( mode ) { // Bail if the mode isn't active. if ( ! this.isModeActive( mode ) ) { return this; } this.activeModes.remove( this.activeModes.where( { id: mode } ) ); this.$el.removeClass( 'mode-' + mode ); /** * Frame mode deactivation event. * * @event wp.media.view.Frame#{mode}:deactivate */ this.trigger( mode + ':deactivate' ); return this; }, /** * Check if a mode is enabled on the frame. * * @param string mode Mode ID. * @return bool */ isModeActive: function( mode ) { return Boolean( this.activeModes.where( { id: mode } ).length ); } }); // Make the `Frame` a `StateMachine`. _.extend( Frame.prototype, wp.media.controller.StateMachine.prototype ); module.exports = Frame; /***/ }), /***/ 1169: /***/ ((module) => { var Attachment = wp.media.model.Attachment, Library = wp.media.controller.Library, l10n = wp.media.view.l10n, FeaturedImage; /** * wp.media.controller.FeaturedImage * * A state for selecting a featured image for a post. * * @memberOf wp.media.controller * * @class * @augments wp.media.controller.Library * @augments wp.media.controller.State * @augments Backbone.Model * * @param {object} [attributes] The attributes hash passed to the state. * @param {string} [attributes.id=featured-image] Unique identifier. * @param {string} [attributes.title=Set Featured Image] 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 images will be created. * @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=featured-image] Initial mode for the toolbar region. * @param {int} [attributes.priority=60] The priority for the state link in the media menu. * @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. */ FeaturedImage = Library.extend(/** @lends wp.media.controller.FeaturedImage.prototype */{ defaults: _.defaults({ id: 'featured-image', title: l10n.setFeaturedImageTitle, multiple: false, filterable: 'uploaded', toolbar: 'featured-image', priority: 60, syncSelection: true }, Library.prototype.defaults ), /** * @since 3.5.0 */ initialize: function() { var library, comparator; // If we haven't been provided a `library`, create a `Selection`. if ( ! this.get('library') ) { this.set( 'library', wp.media.query({ type: 'image' }) ); } Library.prototype.initialize.apply( this, arguments ); library = this.get('library'); comparator = library.comparator; // Overload the library's comparator to push items that are not in // the mirrored query to the front of the aggregate collection. library.comparator = function( a, b ) { var aInQuery = !! this.mirroring.get( a.cid ), bInQuery = !! this.mirroring.get( b.cid ); if ( ! aInQuery && bInQuery ) { return -1; } else if ( aInQuery && ! bInQuery ) { return 1; } else { return comparator.apply( this, arguments ); } }; // Add all items in the selection to the library, so any featured // images that are not initially loaded still appear. library.observe( this.get('selection') ); }, /** * @since 3.5.0 */ activate: function() { this.frame.on( 'open', this.updateSelection, this ); Library.prototype.activate.apply( this, arguments ); }, /** * @since 3.5.0 */ deactivate: function() { this.frame.off( 'open', this.updateSelection, this ); Library.prototype.deactivate.apply( this, arguments ); }, /** * @since 3.5.0 */ updateSelection: function() { var selection = this.get('selection'), id = wp.media.view.settings.post.featuredImageId, attachment; if ( '' !== id && -1 !== id ) { attachment = Attachment.get( id ); attachment.fetch(); } selection.reset( attachment ? [ attachment ] : [] ); } }); module.exports = FeaturedImage; /***/ }), /***/ 1368: /***/ ((module) => { var l10n = wp.media.view.l10n, Uploaded; /** * wp.media.view.AttachmentFilters.Uploaded * * @memberOf wp.media.view.AttachmentFilters * * @class * @augments wp.media.view.AttachmentFilters * @augments wp.media.View * @augments wp.Backbone.View * @augments Backbone.View */ Uploaded = wp.media.view.AttachmentFilters.extend(/** @lends wp.media.view.AttachmentFilters.Uploaded.prototype */{ createFilters: function() { var type = this.model.get('type'), types = wp.media.view.settings.mimeTypes, uid = window.userSettings ? parseInt( window.userSettings.uid, 10 ) : 0, text; if ( types && type ) { text = types[ type ]; } this.filters = { all: { text: text || l10n.allMediaItems, props: { uploadedTo: null, orderby: 'date', order: 'DESC', author: null }, priority: 10 }, uploaded: { text: l10n.uploadedToThisPost, props: { uploadedTo: wp.media.view.settings.post.id, orderby: 'menuOrder', order: 'ASC', author: null }, priority: 20 }, unattached: { text: l10n.unattached, props: { uploadedTo: 0, orderby: 'menuOrder', order: 'ASC', author: null }, priority: 50 } }; if ( uid ) { this.filters.mine = { text: l10n.mine, props: { orderby: 'date', order: 'DESC', author: uid }, priority: 50 }; } } }); module.exports = Uploaded; /***/ }), /***/ 1753: /***/ ((module) => { var View = wp.media.View, UploaderInline; /** * wp.media.view.UploaderInline * * The inline uploader that shows up in the 'Upload Files' tab. * * @memberOf wp.media.view * * @class * @augments wp.media.View * @augments wp.Backbone.View * @augments Backbone.View */ UploaderInline = View.extend(/** @lends wp.media.view.UploaderInline.prototype */{ tagName: 'div', className: 'uploader-inline', template: wp.template('uploader-inline'), events: { 'click .close': 'hide' }, initialize: function() { _.defaults( this.options, { message: '', status: true, canClose: false }); if ( ! this.options.$browser && this.controller.uploader ) { this.options.$browser = this.controller.uploader.$browser; } if ( _.isUndefined( this.options.postId ) ) { this.options.postId = wp.media.view.settings.post.id; } if ( this.options.status ) { this.views.set( '.upload-inline-status', new wp.media.view.UploaderStatus({ controller: this.controller }) ); } }, prepare: function() { var suggestedWidth = this.controller.state().get('suggestedWidth'), suggestedHeight = this.controller.state().get('suggestedHeight'), data = {}; data.message = this.options.message; data.canClose = this.options.canClose; if ( suggestedWidth && suggestedHeight ) { data.suggestedWidth = suggestedWidth; data.suggestedHeight = suggestedHeight; } return data; }, /** * @return {wp.media.view.UploaderInline} Returns itself to allow chaining. */ dispose: function() { if ( this.disposing ) { /** * call 'dispose' directly on the parent class */ return View.prototype.dispose.apply( this, arguments ); } /* * Run remove on `dispose`, so we can be sure to refresh the * uploader with a view-less DOM. Track whether we're disposing * so we don't trigger an infinite loop. */ this.disposing = true; return this.remove(); }, /** * @return {wp.media.view.UploaderInline} Returns itself to allow chaining. */ remove: function() { /** * call 'remove' directly on the parent class */ var result = View.prototype.remove.apply( this, arguments ); _.defer( _.bind( this.refresh, this ) ); return result; }, refresh: function() { var uploader = this.controller.uploader; if ( uploader ) { uploader.refresh(); } }, /** * @return {wp.media.view.UploaderInline} */ ready: function() { var $browser = this.options.$browser, $placeholder; if ( this.controller.uploader ) { $placeholder = this.$('.browser'); // Check if we've already replaced the placeholder. if ( $placeholder[0] === $browser[0] ) { return; } $browser.detach().text( $placeholder.text() ); $browser[0].className = $placeholder[0].className; $browser[0].setAttribute( 'aria-labelledby', $browser[0].id + ' ' + $placeholder[0].getAttribute('aria-labelledby') ); $placeholder.replaceWith( $browser.show() ); } this.refresh(); return this; }, show: function() { this.$el.removeClass( 'hidden' ); if ( this.controller.$uploaderToggler && this.controller.$uploaderToggler.length ) { this.controller.$uploaderToggler.attr( 'aria-expanded', 'true' ); } }, hide: function() { this.$el.addClass( 'hidden' ); if ( this.controller.$uploaderToggler && this.controller.$uploaderToggler.length ) { this.controller.$uploaderToggler .attr( 'aria-expanded', 'false' ) // Move focus back to the toggle button when closing the uploader. .trigger( 'focus' ); } } }); module.exports = UploaderInline; /***/ }), /***/ 1915: /***/ ((module) => { var View = wp.media.View, $ = Backbone.$, Settings; /** * wp.media.view.Settings * * @memberOf wp.media.view * * @class * @augments wp.media.View * @augments wp.Backbone.View * @augments Backbone.View */ Settings = View.extend(/** @lends wp.media.view.Settings.prototype */{ events: { 'click button': 'updateHandler', 'change input': 'updateHandler', 'change select': 'updateHandler', 'change textarea': 'updateHandler' }, initialize: function() { this.model = this.model || new Backbone.Model(); this.listenTo( this.model, 'change', this.updateChanges ); }, prepare: function() { return _.defaults({ model: this.model.toJSON() }, this.options ); }, /** * @return {wp.media.view.Settings} Returns itself to allow chaining. */ render: function() { View.prototype.render.apply( this, arguments ); // Select the correct values. _( this.model.attributes ).chain().keys().each( this.update, this ); return this; }, /** * @param {string} key */ update: function( key ) { var value = this.model.get( key ), $setting = this.$('[data-setting="' + key + '"]'), $buttons, $value; // Bail if we didn't find a matching setting. if ( ! $setting.length ) { return; } // Attempt to determine how the setting is rendered and update // the selected value. // Handle dropdowns. if ( $setting.is('select') ) { $value = $setting.find('[value="' + value + '"]'); if ( $value.length ) { $setting.find('option').prop( 'selected', false ); $value.prop( 'selected', true ); } else { // If we can't find the desired value, record what *is* selected. this.model.set( key, $setting.find(':selected').val() ); } // Handle button groups. } else if ( $setting.hasClass('button-group') ) { $buttons = $setting.find( 'button' ) .removeClass( 'active' ) .attr( 'aria-pressed', 'false' ); $buttons.filter( '[value="' + value + '"]' ) .addClass( 'active' ) .attr( 'aria-pressed', 'true' ); // Handle text inputs and textareas. } else if ( $setting.is('input[type="text"], textarea') ) { if ( ! $setting.is(':focus') ) { $setting.val( value ); } // Handle checkboxes. } else if ( $setting.is('input[type="checkbox"]') ) { $setting.prop( 'checked', !! value && 'false' !== value ); } }, /** * @param {Object} event */ updateHandler: function( event ) { var $setting = $( event.target ).closest('[data-setting]'), value = event.target.value, userSetting; event.preventDefault(); if ( ! $setting.length ) { return; } // Use the correct value for checkboxes. if ( $setting.is('input[type="checkbox"]') ) { value = $setting[0].checked; } // Update the corresponding setting. this.model.set( $setting.data('setting'), value ); // If the setting has a corresponding user setting, // update that as well. userSetting = $setting.data('userSetting'); if ( userSetting ) { window.setUserSetting( userSetting, value ); } }, updateChanges: function( model ) { if ( model.hasChanged() ) { _( model.changed ).chain().keys().each( this.update, this ); } } }); module.exports = Settings; /***/ }), /***/ 1982: /***/ ((module) => { /** * wp.media.view.Iframe * * @memberOf wp.media.view * * @class * @augments wp.media.View * @augments wp.Backbone.View * @augments Backbone.View */ var Iframe = wp.media.View.extend(/** @lends wp.media.view.Iframe.prototype */{ className: 'media-iframe', /** * @return {wp.media.view.Iframe} Returns itself to allow chaining. */ render: function() { this.views.detach(); this.$el.html( '