1 /******/ (function(modules) { // webpackBootstrap

     1 /******/ (function() { // webpackBootstrap

     2 /******/ 	// The module cache

     2 /******/ 	var __webpack_modules__ = ({

     3 /******/ 	var installedModules = {};

     3 

     4 /******/

     4 /***/ 1517:

     5 /******/ 	// The require function

     5 /***/ (function(module) {

     6 /******/ 	function __webpack_require__(moduleId) {

     6 

     7 /******/

     7 var Selection = wp.media.model.Selection,

     8 /******/ 		// Check if module is in cache

     8 	Library = wp.media.controller.Library,

     9 /******/ 		if(installedModules[moduleId]) {

     9 	CollectionAdd;

    10 /******/ 			return installedModules[moduleId].exports;

    11 /******/ 		}

    12 /******/ 		// Create a new module (and put it into the cache)

    13 /******/ 		var module = installedModules[moduleId] = {

    14 /******/ 			i: moduleId,

    15 /******/ 			l: false,

    16 /******/ 			exports: {}

    17 /******/ 		};

    18 /******/

    19 /******/ 		// Execute the module function

    20 /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

    21 /******/

    22 /******/ 		// Flag the module as loaded

    23 /******/ 		module.l = true;

    24 /******/

    25 /******/ 		// Return the exports of the module

    26 /******/ 		return module.exports;

    27 /******/ 	}

    28 /******/

    29 /******/

    30 /******/ 	// expose the modules object (__webpack_modules__)

    31 /******/ 	__webpack_require__.m = modules;

    32 /******/

    33 /******/ 	// expose the module cache

    34 /******/ 	__webpack_require__.c = installedModules;

    35 /******/

    36 /******/ 	// define getter function for harmony exports

    37 /******/ 	__webpack_require__.d = function(exports, name, getter) {

    38 /******/ 		if(!__webpack_require__.o(exports, name)) {

    39 /******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });

    40 /******/ 		}

    41 /******/ 	};

    42 /******/

    43 /******/ 	// define __esModule on exports

    44 /******/ 	__webpack_require__.r = function(exports) {

    45 /******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {

    46 /******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

    47 /******/ 		}

    48 /******/ 		Object.defineProperty(exports, '__esModule', { value: true });

    49 /******/ 	};

    50 /******/

    51 /******/ 	// create a fake namespace object

    52 /******/ 	// mode & 1: value is a module id, require it

    53 /******/ 	// mode & 2: merge all properties of value into the ns

    54 /******/ 	// mode & 4: return value when already ns object

    55 /******/ 	// mode & 8|1: behave like require

    56 /******/ 	__webpack_require__.t = function(value, mode) {

    57 /******/ 		if(mode & 1) value = __webpack_require__(value);

    58 /******/ 		if(mode & 8) return value;

    59 /******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;

    60 /******/ 		var ns = Object.create(null);

    61 /******/ 		__webpack_require__.r(ns);

    62 /******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });

    63 /******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));

    64 /******/ 		return ns;

    65 /******/ 	};

    66 /******/

    67 /******/ 	// getDefaultExport function for compatibility with non-harmony modules

    68 /******/ 	__webpack_require__.n = function(module) {

    69 /******/ 		var getter = module && module.__esModule ?

    70 /******/ 			function getDefault() { return module['default']; } :

    71 /******/ 			function getModuleExports() { return module; };

    72 /******/ 		__webpack_require__.d(getter, 'a', getter);

    73 /******/ 		return getter;

    74 /******/ 	};

    75 /******/

    76 /******/ 	// Object.prototype.hasOwnProperty.call

    77 /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };

    78 /******/

    79 /******/ 	// __webpack_public_path__

    80 /******/ 	__webpack_require__.p = "";

    81 /******/

    82 /******/

    83 /******/ 	// Load entry module and return exports

    84 /******/ 	return __webpack_require__(__webpack_require__.s = 3);

    85 /******/ })

    86 /************************************************************************/

    87 /******/ ({

    88 

    89 /***/ "+B8m":

    90 /***/ (function(module, exports) {

    91 

    92 var AttachmentDisplay = wp.media.view.Settings.AttachmentDisplay,

    93 	EmbedImage;

    96  * wp.media.view.EmbedImage

    12  * wp.media.controller.CollectionAdd

    97  *

    13  *

    98  * @memberOf wp.media.view

    14  * A state for adding attachments to a collection (e.g. video playlist).

    15  *

    16  * @memberOf wp.media.controller

   101  * @augments wp.media.view.Settings.AttachmentDisplay

    19  * @augments wp.media.controller.Library

   102  * @augments wp.media.view.Settings

    20  * @augments wp.media.controller.State

   103  * @augments wp.media.View

    21  * @augments Backbone.Model

   104  * @augments wp.Backbone.View

    22  *

   105  * @augments Backbone.View

    23  * @param {object}                     [attributes]                         The attributes hash passed to the state.

    24  * @param {string}                     [attributes.id=library]              Unique identifier.

    25  * @param {string}                     attributes.title                     Title for the state. Displays in the frame's title region.

    26  * @param {boolean}                    [attributes.multiple=add]            Whether multi-select is enabled. @todo 'add' doesn't seem do anything special, and gets used as a boolean.

    27  * @param {wp.media.model.Attachments} [attributes.library]                 The attachments collection to browse.

    28  *                                                                          If one is not supplied, a collection of attachments of the specified type will be created.

    29  * @param {boolean|string}             [attributes.filterable=uploaded]     Whether the library is filterable, and if so what filters should be shown.

    30  *                                                                          Accepts 'all', 'uploaded', or 'unattached'.

    31  * @param {string}                     [attributes.menu=gallery]            Initial mode for the menu region.

    32  * @param {string}                     [attributes.content=upload]          Initial mode for the content region.

    33  *                                                                          Overridden by persistent user setting if 'contentUserSetting' is true.

    34  * @param {string}                     [attributes.router=browse]           Initial mode for the router region.

    35  * @param {string}                     [attributes.toolbar=gallery-add]     Initial mode for the toolbar region.

    36  * @param {boolean}                    [attributes.searchable=true]         Whether the library is searchable.

    37  * @param {boolean}                    [attributes.sortable=true]           Whether the Attachments should be sortable. Depends on the orderby property being set to menuOrder on the attachments collection.

    38  * @param {boolean}                    [attributes.autoSelect=true]         Whether an uploaded attachment should be automatically added to the selection.

    39  * @param {boolean}                    [attributes.contentUserSetting=true] Whether the content region's mode should be set and persisted per user.

    40  * @param {int}                        [attributes.priority=100]            The priority for the state link in the media menu.

    41  * @param {boolean}                    [attributes.syncSelection=false]     Whether the Attachments selection should be persisted from the last state.

    42  *                                                                          Defaults to false because for this state, because the library of the Edit Gallery state is the selection.

    43  * @param {string}                     attributes.type                      The collection's media type. (e.g. 'video').

    44  * @param {string}                     attributes.collectionType            The collection type. (e.g. 'playlist').

   107 EmbedImage = AttachmentDisplay.extend(/** @lends wp.media.view.EmbedImage.prototype */{

    46 CollectionAdd = Library.extend(/** @lends wp.media.controller.CollectionAdd.prototype */{

   108 	className: 'embed-media-settings',

    47 	defaults: _.defaults( {

   109 	template:  wp.template('embed-image-settings'),

    48 		// Selection defaults. @see media.model.Selection

   110 

    49 		multiple:      'add',

    50 		// Attachments browser defaults. @see media.view.AttachmentsBrowser

    51 		filterable:    'uploaded',

    52 

    53 		priority:      100,

    54 		syncSelection: false

    55 	}, Library.prototype.defaults ),

    56 

    57 	/**

    58 	 * @since 3.9.0

    59 	 */

   112 		/**

    61 		var collectionType = this.get('collectionType');

   113 		 * Call `initialize` directly on parent class with passed arguments

    62 

    63 		if ( 'video' === this.get( 'type' ) ) {

    64 			collectionType = 'video-' + collectionType;

    65 		}

    66 

    67 		this.set( 'id', collectionType + '-library' );

    68 		this.set( 'toolbar', collectionType + '-add' );

    69 		this.set( 'menu', collectionType );

    70 

    71 		// If we haven't been provided a `library`, create a `Selection`.

    72 		if ( ! this.get('library') ) {

    73 			this.set( 'library', wp.media.query({ type: this.get('type') }) );

    74 		}

    75 		Library.prototype.initialize.apply( this, arguments );

    76 	},

    77 

    78 	/**

    79 	 * @since 3.9.0

    80 	 */

    81 	activate: function() {

    82 		var library = this.get('library'),

    83 			editLibrary = this.get('editLibrary'),

    84 			edit = this.frame.state( this.get('collectionType') + '-edit' ).get('library');

    85 

    86 		if ( editLibrary && editLibrary !== edit ) {

    87 			library.unobserve( editLibrary );

    88 		}

    89 

    90 		// Accepts attachments that exist in the original library and

    91 		// that do not exist in gallery's library.

    92 		library.validator = function( attachment ) {

    93 			return !! this.mirroring.get( attachment.cid ) && ! edit.get( attachment.cid ) && Selection.prototype.validator.apply( this, arguments );

    94 		};

    95 

    96 		/*

    97 		 * Reset the library to ensure that all attachments are re-added

    98 		 * to the collection. Do so silently, as calling `observe` will

    99 		 * trigger the `reset` event.

   115 		AttachmentDisplay.prototype.initialize.apply( this, arguments );

   101 		library.reset( library.mirroring.models, { silent: true });

   116 		this.listenTo( this.model, 'change:url', this.updateImage );

   102 		library.observe( edit );

   117 	},

   103 		this.set('editLibrary', edit);

   118 

   104 

   119 	updateImage: function() {

   105 		Library.prototype.activate.apply( this, arguments );

   120 		this.$('img').attr( 'src', this.model.get('url') );

   124 module.exports = EmbedImage;

   109 module.exports = CollectionAdd;

   129 /***/ "+mQJ":

   114 /***/ 1817:

   130 /***/ (function(module, exports) {

   115 /***/ (function(module) {

   131 

   116 

   132 var View = wp.media.View,

   117 var Library = wp.media.controller.Library,

   118 	l10n = wp.media.view.l10n,

   134 	l10n = wp.media.view.l10n,

   120 	CollectionEdit;

   135 	EmbedUrl;

   138  * wp.media.view.EmbedUrl

   123  * wp.media.controller.CollectionEdit

   139  *

   124  *

   140  * @memberOf wp.media.view

   125  * A state for editing a collection, which is used by audio and video playlists,

   126  * and can be used for other collections.

   127  *

   128  * @memberOf wp.media.controller

   143  * @augments wp.media.View

   131  * @augments wp.media.controller.Library

   144  * @augments wp.Backbone.View

   132  * @augments wp.media.controller.State

   145  * @augments Backbone.View

   133  * @augments Backbone.Model

   134  *

   135  * @param {object}                     [attributes]                      The attributes hash passed to the state.

   136  * @param {string}                     attributes.title                  Title for the state. Displays in the media menu and the frame's title region.

   137  * @param {wp.media.model.Attachments} [attributes.library]              The attachments collection to edit.

   138  *                                                                       If one is not supplied, an empty media.model.Selection collection is created.

   139  * @param {boolean}                    [attributes.multiple=false]       Whether multi-select is enabled.

   140  * @param {string}                     [attributes.content=browse]       Initial mode for the content region.

   141  * @param {string}                     attributes.menu                   Initial mode for the menu region. @todo this needs a better explanation.

   142  * @param {boolean}                    [attributes.searchable=false]     Whether the library is searchable.

   143  * @param {boolean}                    [attributes.sortable=true]        Whether the Attachments should be sortable. Depends on the orderby property being set to menuOrder on the attachments collection.

   144  * @param {boolean}                    [attributes.date=true]            Whether to show the date filter in the browser's toolbar.

   145  * @param {boolean}                    [attributes.describe=true]        Whether to offer UI to describe the attachments - e.g. captioning images in a gallery.

   146  * @param {boolean}                    [attributes.dragInfo=true]        Whether to show instructional text about the attachments being sortable.

   147  * @param {boolean}                    [attributes.dragInfoText]         Instructional text about the attachments being sortable.

   148  * @param {int}                        [attributes.idealColumnWidth=170] The ideal column width in pixels for attachments.

   149  * @param {boolean}                    [attributes.editing=false]        Whether the gallery is being created, or editing an existing instance.

   150  * @param {int}                        [attributes.priority=60]          The priority for the state link in the media menu.

   151  * @param {boolean}                    [attributes.syncSelection=false]  Whether the Attachments selection should be persisted from the last state.

   152  *                                                                       Defaults to false for this state, because the library passed in  *is* the selection.

   153  * @param {view}                       [attributes.SettingsView]         The view to edit the collection instance settings (e.g. Playlist settings with "Show tracklist" checkbox).

   154  * @param {view}                       [attributes.AttachmentView]       The single `Attachment` view to be used in the `Attachments`.

   155  *                                                                       If none supplied, defaults to wp.media.view.Attachment.EditLibrary.

   156  * @param {string}                     attributes.type                   The collection's media type. (e.g. 'video').

   157  * @param {string}                     attributes.collectionType         The collection type. (e.g. 'playlist').

   147 EmbedUrl = View.extend(/** @lends wp.media.view.EmbedUrl.prototype */{

   159 CollectionEdit = Library.extend(/** @lends wp.media.controller.CollectionEdit.prototype */{

   148 	tagName:   'span',

   160 	defaults: {

   149 	className: 'embed-url',

   161 		multiple:         false,

   150 

   162 		sortable:         true,

   151 	events: {

   163 		date:             false,

   152 		'input': 'url'

   164 		searchable:       false,

   153 	},

   165 		content:          'browse',

   154 

   166 		describe:         true,

   167 		dragInfo:         true,

   168 		idealColumnWidth: 170,

   169 		editing:          false,

   170 		priority:         60,

   171 		SettingsView:     false,

   172 		syncSelection:    false

   173 	},

   174 

   175 	/**

   176 	 * @since 3.9.0

   177 	 */

   156 		this.$input = $( '<input id="embed-url-field" type="url" />' )

   179 		var collectionType = this.get('collectionType');

   157 			.attr( 'aria-label', l10n.insertFromUrlTitle )

   180 

   158 			.val( this.model.get('url') );

   181 		if ( 'video' === this.get( 'type' ) ) {

   159 		this.input = this.$input[0];

   182 			collectionType = 'video-' + collectionType;

   160 

   183 		}

   161 		this.spinner = $('<span class="spinner" />')[0];

   184 

   162 		this.$el.append([ this.input, this.spinner ]);

   185 		this.set( 'id', collectionType + '-edit' );

   163 

   186 		this.set( 'toolbar', collectionType + '-edit' );

   164 		this.listenTo( this.model, 'change:url', this.render );

   187 

   165 

   188 		// If we haven't been provided a `library`, create a `Selection`.

   166 		if ( this.model.get( 'url' ) ) {

   189 		if ( ! this.get('library') ) {

   167 			_.delay( _.bind( function () {

   190 			this.set( 'library', new wp.media.model.Selection() );

   168 				this.model.trigger( 'change:url' );

   191 		}

   169 			}, this ), 500 );

   192 		// The single `Attachment` view to be used in the `Attachments` view.

   170 		}

   193 		if ( ! this.get('AttachmentView') ) {

   171 	},

   194 			this.set( 'AttachmentView', wp.media.view.Attachment.EditLibrary );

   172 	/**

   195 		}

   173 	 * @return {wp.media.view.EmbedUrl} Returns itself to allow chaining.

   196 		Library.prototype.initialize.apply( this, arguments );

   174 	 */

   197 	},

   175 	render: function() {

   198 

   176 		var $input = this.$input;

   199 	/**

   177 

   200 	 * @since 3.9.0

   178 		if ( $input.is(':focus') ) {

   201 	 */

   202 	activate: function() {

   203 		var library = this.get('library');

   204 

   205 		// Limit the library to images only.

   206 		library.props.set( 'type', this.get( 'type' ) );

   207 

   208 		// Watch for uploaded attachments.

   209 		this.get('library').observe( wp.Uploader.queue );

   210 

   211 		this.frame.on( 'content:render:browse', this.renderSettings, this );

   212 

   213 		Library.prototype.activate.apply( this, arguments );

   214 	},

   215 

   216 	/**

   217 	 * @since 3.9.0

   218 	 */

   219 	deactivate: function() {

   220 		// Stop watching for uploaded attachments.

   221 		this.get('library').unobserve( wp.Uploader.queue );

   222 

   223 		this.frame.off( 'content:render:browse', this.renderSettings, this );

   224 

   225 		Library.prototype.deactivate.apply( this, arguments );

   226 	},

   227 

   228 	/**

   229 	 * Render the collection embed settings view in the browser sidebar.

   230 	 *

   231 	 * @todo This is against the pattern elsewhere in media. Typically the frame

   232 	 *       is responsible for adding region mode callbacks. Explain.

   233 	 *

   234 	 * @since 3.9.0

   235 	 *

   236 	 * @param {wp.media.view.attachmentsBrowser} The attachments browser view.

   237 	 */

   238 	renderSettings: function( attachmentsBrowserView ) {

   239 		var library = this.get('library'),

   240 			collectionType = this.get('collectionType'),

   241 			dragInfoText = this.get('dragInfoText'),

   242 			SettingsView = this.get('SettingsView'),

   243 			obj = {};

   244 

   245 		if ( ! library || ! attachmentsBrowserView ) {

   182 		this.input.value = this.model.get('url') || 'http://';

   249 		library[ collectionType ] = library[ collectionType ] || new Backbone.Model();

   183 		/**

   250 

   184 		 * Call `render` directly on parent class with passed arguments

   251 		obj[ collectionType ] = new SettingsView({

   185 		 */

   252 			controller: this,

   186 		View.prototype.render.apply( this, arguments );

   253 			model:      library[ collectionType ],

   187 		return this;

   254 			priority:   40

   188 	},

   189 

   190 	url: function( event ) {

   191 		var url = event.target.value || '';

   192 		this.model.set( 'url', url.trim() );

   193 	}

   194 });

   195 

   196 module.exports = EmbedUrl;

   197 

   198 

   199 /***/ }),

   200 

   201 /***/ "04Ix":

   202 /***/ (function(module, exports) {

   203 

   204 var _n = wp.i18n._n,

   205 	sprintf = wp.i18n.sprintf,

   206 	Selection;

   207 

   208 /**

   209  * wp.media.view.Selection

   210  *

   211  * @memberOf wp.media.view

   212  *

   213  * @class

   214  * @augments wp.media.View

   215  * @augments wp.Backbone.View

   216  * @augments Backbone.View

   217  */

   218 Selection = wp.media.View.extend(/** @lends wp.media.view.Selection.prototype */{

   219 	tagName:   'div',

   220 	className: 'media-selection',

   221 	template:  wp.template('media-selection'),

   222 

   223 	events: {

   224 		'click .edit-selection':  'edit',

   225 		'click .clear-selection': 'clear'

   226 	},

   227 

   228 	initialize: function() {

   229 		_.defaults( this.options, {

   230 			editable:  false,

   231 			clearable: true

   234 		/**

   257 		attachmentsBrowserView.sidebar.set( obj );

   235 		 * @member {wp.media.view.Attachments.Selection}

   258 

   236 		 */

   259 		if ( dragInfoText ) {

   237 		this.attachments = new wp.media.view.Attachments.Selection({

   260 			attachmentsBrowserView.toolbar.set( 'dragInfo', new wp.media.View({

   238 			controller: this.controller,

   261 				el: $( '<div class="instructions">' + dragInfoText + '</div>' )[0],

   239 			collection: this.collection,

   262 				priority: -40

   240 			selection:  this.collection,

   263 			}) );

   241 			model:      new Backbone.Model()

   264 		}

   242 		});

   265 

   243 

   266 		// Add the 'Reverse order' button to the toolbar.

   244 		this.views.set( '.selection-view', this.attachments );

   267 		attachmentsBrowserView.toolbar.set( 'reverse', {

   245 		this.collection.on( 'add remove reset', this.refresh, this );

   268 			text:     l10n.reverseOrder,

   246 		this.controller.on( 'content:activate', this.refresh, this );

   269 			priority: 80,

   247 	},

   270 

   248 

   271 			click: function() {

   249 	ready: function() {

   272 				library.reset( library.toArray().reverse() );

   250 		this.refresh();

   251 	},

   252 

   253 	refresh: function() {

   254 		// If the selection hasn't been rendered, bail.

   255 		if ( ! this.$el.children().length ) {

   256 			return;

   257 		}

   258 

   259 		var collection = this.collection,

   260 			editing = 'edit-selection' === this.controller.content.mode();

   261 

   262 		// If nothing is selected, display nothing.

   263 		this.$el.toggleClass( 'empty', ! collection.length );

   264 		this.$el.toggleClass( 'one', 1 === collection.length );

   265 		this.$el.toggleClass( 'editing', editing );

   266 

   267 		this.$( '.count' ).text(

   268 			/* translators: %s: Number of selected media attachments. */

   269 			sprintf( _n( '%s item selected', '%s items selected', collection.length ), collection.length )

   270 		);

   271 	},

   272 

   273 	edit: function( event ) {

   274 		event.preventDefault();

   275 		if ( this.options.editable ) {

   276 			this.options.editable.call( this, this.collection );

   277 		}

   278 	},

   279 

   280 	clear: function( event ) {

   281 		event.preventDefault();

   282 		this.collection.reset();

   283 

   284 		// Move focus to the modal.

   285 		this.controller.modal.focusManager.focus();

   286 	}

   287 });

   288 

   289 module.exports = Selection;

   290 

   291 

   292 /***/ }),

   293 

   294 /***/ "1S4+":

   295 /***/ (function(module, exports) {

   296 

   297 var $ = jQuery,

   298 	AttachmentFilters;

   299 

   300 /**

   301  * wp.media.view.AttachmentFilters

   302  *

   303  * @memberOf wp.media.view

   304  *

   305  * @class

   306  * @augments wp.media.View

   307  * @augments wp.Backbone.View

   308  * @augments Backbone.View

   309  */

   310 AttachmentFilters = wp.media.View.extend(/** @lends wp.media.view.AttachmentFilters.prototype */{

   311 	tagName:   'select',

   312 	className: 'attachment-filters',

   313 	id:        'media-attachment-filters',

   314 

   315 	events: {

   316 		change: 'change'

   317 	},

   318 

   319 	keys: [],

   320 

   321 	initialize: function() {

   322 		this.createFilters();

   323 		_.extend( this.filters, this.options.filters );

   324 

   325 		// Build `<option>` elements.

   326 		this.$el.html( _.chain( this.filters ).map( function( filter, value ) {

   327 			return {

   328 				el: $( '<option></option>' ).val( value ).html( filter.text )[0],

   329 				priority: filter.priority || 50

   330 			};

   331 		}, this ).sortBy('priority').pluck('el').value() );

   332 

   333 		this.listenTo( this.model, 'change', this.select );

   334 		this.select();

   335 	},

   336 

   337 	/**

   338 	 * @abstract

   339 	 */

   340 	createFilters: function() {

   341 		this.filters = {};

   342 	},

   343 

   344 	/**

   345 	 * When the selected filter changes, update the Attachment Query properties to match.

   346 	 */

   347 	change: function() {

   348 		var filter = this.filters[ this.el.value ];

   349 		if ( filter ) {

   350 			this.model.set( filter.props );

   351 		}

   352 	},

   353 

   354 	select: function() {

   355 		var model = this.model,

   356 			value = 'all',

   357 			props = model.toJSON();

   358 

   359 		_.find( this.filters, function( filter, id ) {

   360 			var equal = _.all( filter.props, function( prop, key ) {

   361 				return prop === ( _.isUndefined( props[ key ] ) ? null : props[ key ] );

   362 			});

   363 

   364 			if ( equal ) {

   365 				return value = id;

   641 module.exports = Toolbar;

   278 module.exports = CollectionEdit;

   646 /***/ "2jku":

   283 /***/ 2288:

   647 /***/ (function(module, exports) {

   284 /***/ (function(module) {

   285 

   286 var l10n = wp.media.view.l10n,

   287 	Cropper;

   650  * wp.media.view.Attachment.Library

   290  * wp.media.controller.Cropper

   651  *

   291  *

   652  * @memberOf wp.media.view.Attachment

   292  * A class for cropping an image when called from the header media customization panel.

   293  *

   294  * @memberOf wp.media.controller

   655  * @augments wp.media.view.Attachment

   297  * @augments wp.media.controller.State

   656  * @augments wp.media.View

   298  * @augments Backbone.Model

   657  * @augments wp.Backbone.View

   658  * @augments Backbone.View

   660 var Library = wp.media.view.Attachment.extend(/** @lends wp.media.view.Attachment.Library.prototype */{

   300 Cropper = wp.media.controller.State.extend(/** @lends wp.media.controller.Cropper.prototype */{

   661 	buttons: {

   301 	defaults: {

   662 		check: true

   302 		id:          'cropper',

   303 		title:       l10n.cropImage,

   304 		// Region mode defaults.

   305 		toolbar:     'crop',

   306 		content:     'crop',

   307 		router:      false,

   308 		canSkipCrop: false,

   309 

   310 		// Default doCrop Ajax arguments to allow the Customizer (for example) to inject state.

   311 		doCropArgs: {}

   312 	},

   313 

   314 	/**

   315 	 * Shows the crop image window when called from the Add new image button.

   316 	 *

   317 	 * @since 4.2.0

   318 	 *

   319 	 * @return {void}

   320 	 */

   321 	activate: function() {

   322 		this.frame.on( 'content:create:crop', this.createCropContent, this );

   323 		this.frame.on( 'close', this.removeCropper, this );

   324 		this.set('selection', new Backbone.Collection(this.frame._selection.single));

   325 	},

   326 

   327 	/**

   328 	 * Changes the state of the toolbar window to browse mode.

   329 	 *

   330 	 * @since 4.2.0

   331 	 *

   332 	 * @return {void}

   333 	 */

   334 	deactivate: function() {

   335 		this.frame.toolbar.mode('browse');

   336 	},

   337 

   338 	/**

   339 	 * Creates the crop image window.

   340 	 *

   341 	 * Initialized when clicking on the Select and Crop button.

   342 	 *

   343 	 * @since 4.2.0

   344 	 *

   345 	 * @fires crop window

   346 	 *

   347 	 * @return {void}

   348 	 */

   349 	createCropContent: function() {

   350 		this.cropperView = new wp.media.view.Cropper({

   351 			controller: this,

   352 			attachment: this.get('selection').first()

   353 		});

   354 		this.cropperView.on('image-loaded', this.createCropToolbar, this);

   355 		this.frame.content.set(this.cropperView);

   356 

   357 	},

   358 

   359 	/**

   360 	 * Removes the image selection and closes the cropping window.

   361 	 *

   362 	 * @since 4.2.0

   363 	 *

   364 	 * @return {void}

   365 	 */

   366 	removeCropper: function() {

   367 		this.imgSelect.cancelSelection();

   368 		this.imgSelect.setOptions({remove: true});

   369 		this.imgSelect.update();

   370 		this.cropperView.remove();

   371 	},

   372 

   373 	/**

   374 	 * Checks if cropping can be skipped and creates crop toolbar accordingly.

   375 	 *

   376 	 * @since 4.2.0

   377 	 *

   378 	 * @return {void}

   379 	 */

   380 	createCropToolbar: function() {

   381 		var canSkipCrop, toolbarOptions;

   382 

   383 		canSkipCrop = this.get('canSkipCrop') || false;

   384 

   385 		toolbarOptions = {

   386 			controller: this.frame,

   387 			items: {

   388 				insert: {

   389 					style:    'primary',

   390 					text:     l10n.cropImage,

   391 					priority: 80,

   392 					requires: { library: false, selection: false },

   393 

   394 					click: function() {

   395 						var controller = this.controller,

   396 							selection;

   397 

   398 						selection = controller.state().get('selection').first();

   399 						selection.set({cropDetails: controller.state().imgSelect.getSelection()});

   400 

   401 						this.$el.text(l10n.cropping);

   402 						this.$el.attr('disabled', true);

   403 

   404 						controller.state().doCrop( selection ).done( function( croppedImage ) {

   405 							controller.trigger('cropped', croppedImage );

   406 							controller.close();

   407 						}).fail( function() {

   408 							controller.trigger('content:error:crop');

   409 						});

   410 					}

   411 				}

   412 			}

   413 		};

   414 

   415 		if ( canSkipCrop ) {

   416 			_.extend( toolbarOptions.items, {

   417 				skip: {

   418 					style:      'secondary',

   419 					text:       l10n.skipCropping,

   420 					priority:   70,

   421 					requires:   { library: false, selection: false },

   422 					click:      function() {

   423 						var selection = this.controller.state().get('selection').first();

   424 						this.controller.state().cropperView.remove();

   425 						this.controller.trigger('skippedcrop', selection);

   426 						this.controller.close();

   427 					}

   428 				}

   429 			});

   430 		}

   431 

   432 		this.frame.toolbar.set( new wp.media.view.Toolbar(toolbarOptions) );

   433 	},

   434 

   435 	/**

   436 	 * Creates an object with the image attachment and crop properties.

   437 	 *

   438 	 * @since 4.2.0

   439 	 *

   440 	 * @return {$.promise} A jQuery promise with the custom header crop details.

   441 	 */

   442 	doCrop: function( attachment ) {

   443 		return wp.ajax.post( 'custom-header-crop', _.extend(

   444 			{},

   445 			this.defaults.doCropArgs,

   446 			{

   447 				nonce: attachment.get( 'nonces' ).edit,

   448 				id: attachment.get( 'id' ),

   449 				cropDetails: attachment.get( 'cropDetails' )

   450 			}

   451 		) );

   666 module.exports = Library;

   455 module.exports = Cropper;

   671 /***/ 3:

   460 /***/ 6934:

   672 /***/ (function(module, exports, __webpack_require__) {

   461 /***/ (function(module) {

   673 

   462 

   674 module.exports = __webpack_require__("tg/Y");

   463 var Controller = wp.media.controller,

   675 

   464 	CustomizeImageCropper;

   676 

   677 /***/ }),

   678 

   679 /***/ "3nJM":

   680 /***/ (function(module, exports) {

   681 

   682 var $ = jQuery;

   685  * wp.media.view.FocusManager

   467  * A state for cropping an image in the customizer.

   686  *

   468  *

   687  * @memberOf wp.media.view

   469  * @since 4.3.0

   688  *

   470  *

   689  * @class

   471  * @constructs wp.media.controller.CustomizeImageCropper

   690  * @augments wp.media.View

   472  * @memberOf wp.media.controller

   691  * @augments wp.Backbone.View

   473  * @augments wp.media.controller.CustomizeImageCropper.Cropper

   692  * @augments Backbone.View

   474  * @inheritDoc

   694 var FocusManager = wp.media.View.extend(/** @lends wp.media.view.FocusManager.prototype */{

   476 CustomizeImageCropper = Controller.Cropper.extend(/** @lends wp.media.controller.CustomizeImageCropper.prototype */{

   695 

   477 	/**

   696 	events: {

   478 	 * Posts the crop details to the admin.

   697 		'keydown': 'focusManagementMode'

   479 	 *

   698 	},

   480 	 * Uses crop measurements when flexible in both directions.

   699 

   481 	 * Constrains flexible side based on image ratio and size of the fixed side.

   700 	/**

   482 	 *

   701 	 * Initializes the Focus Manager.

   483 	 * @since 4.3.0

   702 	 *

   484 	 *

   703 	 * @param {Object} options The Focus Manager options.

   485 	 * @param {Object} attachment The attachment to crop.

   704 	 *

   486 	 *

   705 	 * @since 5.3.0

   487 	 * @return {$.promise} A jQuery promise that represents the crop image request.

   706 	 *

   488 	 */

   707 	 * @return {void}

   489 	doCrop: function( attachment ) {

   708 	 */

   490 		var cropDetails = attachment.get( 'cropDetails' ),

   709 	initialize: function( options ) {

   491 			control = this.get( 'control' ),

   710 		this.mode                    = options.mode || 'constrainTabbing';

   492 			ratio = cropDetails.width / cropDetails.height;

   711 		this.tabsAutomaticActivation = options.tabsAutomaticActivation || false;

   493 

   712 	},

   494 		// Use crop measurements when flexible in both directions.

   713 

   495 		if ( control.params.flex_width && control.params.flex_height ) {

   714  	/**

   496 			cropDetails.dst_width  = cropDetails.width;

   715 	 * Determines which focus management mode to use.

   497 			cropDetails.dst_height = cropDetails.height;

   716 	 *

   498 

   717 	 * @since 5.3.0

   499 		// Constrain flexible side based on image ratio and size of the fixed side.

   718 	 *

   500 		} else {

   719 	 * @param {Object} event jQuery event object.

   501 			cropDetails.dst_width  = control.params.flex_width  ? control.params.height * ratio : control.params.width;

   720 	 *

   502 			cropDetails.dst_height = control.params.flex_height ? control.params.width  / ratio : control.params.height;

   721 	 * @return {void}

   503 		}

   722 	 */

   504 

   723 	focusManagementMode: function( event ) {

   505 		return wp.ajax.post( 'crop-image', {

   724 		if ( this.mode === 'constrainTabbing' ) {

   506 			wp_customize: 'on',

   725 			this.constrainTabbing( event );

   507 			nonce: attachment.get( 'nonces' ).edit,

   726 		}

   508 			id: attachment.get( 'id' ),

   727 

   509 			context: control.id,

   728 		if ( this.mode === 'tabsNavigation' ) {

   510 			cropDetails: cropDetails

   729 			this.tabsNavigation( event );

   730 		}

   731 	},

   732 

   733 	/**

   734 	 * Gets all the tabbable elements.

   735 	 *

   736 	 * @since 5.3.0

   737 	 *

   738 	 * @return {Object} A jQuery collection of tabbable elements.

   739 	 */

   740 	getTabbables: function() {

   741 		// Skip the file input added by Plupload.

   742 		return this.$( ':tabbable' ).not( '.moxie-shim input[type="file"]' );

   743 	},

   744 

   745 	/**

   746 	 * Moves focus to the modal dialog.

   747 	 *

   748 	 * @since 3.5.0

   749 	 *

   750 	 * @return {void}

   751 	 */

   752 	focus: function() {

   753 		this.$( '.media-modal' ).trigger( 'focus' );

   754 	},

   755 

   756 	/**

   757 	 * Constrains navigation with the Tab key within the media view element.

   758 	 *

   759 	 * @since 4.0.0

   760 	 *

   761 	 * @param {Object} event A keydown jQuery event.

   762 	 *

   763 	 * @return {void}

   764 	 */

   765 	constrainTabbing: function( event ) {

   766 		var tabbables;

   767 

   768 		// Look for the tab key.

   769 		if ( 9 !== event.keyCode ) {

   770 			return;

   771 		}

   772 

   773 		tabbables = this.getTabbables();

   774 

   775 		// Keep tab focus within media modal while it's open.

   776 		if ( tabbables.last()[0] === event.target && ! event.shiftKey ) {

   777 			tabbables.first().focus();

   778 			return false;

   779 		} else if ( tabbables.first()[0] === event.target && event.shiftKey ) {

   780 			tabbables.last().focus();

   781 			return false;

   782 		}

   783 	},

   784 

   785 	/**

   786 	 * Hides from assistive technologies all the body children.

   787 	 *

   788 	 * Sets an `aria-hidden="true"` attribute on all the body children except

   789 	 * the provided element and other elements that should not be hidden.

   790 	 *

   791 	 * The reason why we use `aria-hidden` is that `aria-modal="true"` is buggy

   792 	 * in Safari 11.1 and support is spotty in other browsers. Also, `aria-modal="true"`

   793 	 * prevents the `wp.a11y.speak()` ARIA live regions to work as they're outside

   794 	 * of the modal dialog and get hidden from assistive technologies.

   795 	 *

   796 	 * @since 5.2.3

   797 	 *

   798 	 * @param {Object} visibleElement The jQuery object representing the element that should not be hidden.

   799 	 *

   800 	 * @return {void}

   801 	 */

   802 	setAriaHiddenOnBodyChildren: function( visibleElement ) {

   803 		var bodyChildren,

   804 			self = this;

   805 

   806 		if ( this.isBodyAriaHidden ) {

   807 			return;

   808 		}

   809 

   810 		// Get all the body children.

   811 		bodyChildren = document.body.children;

   812 

   813 		// Loop through the body children and hide the ones that should be hidden.

   814 		_.each( bodyChildren, function( element ) {

   815 			// Don't hide the modal element.

   816 			if ( element === visibleElement[0] ) {

   817 				return;

   818 			}

   819 

   820 			// Determine the body children to hide.

   821 			if ( self.elementShouldBeHidden( element ) ) {

   822 				element.setAttribute( 'aria-hidden', 'true' );

   823 				// Store the hidden elements.

   824 				self.ariaHiddenElements.push( element );

   825 			}