| | 1 | (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ |
| | 2 | /* global _wpMediaViewsL10n, _wpmejsSettings, MediaElementPlayer */ |
| | 3 | |
| | 4 | (function($, _, Backbone) { |
| | 5 | var media = wp.media, |
| | 6 | baseSettings = {}, |
| | 7 | l10n = typeof _wpMediaViewsL10n === 'undefined' ? {} : _wpMediaViewsL10n; |
| | 8 | |
| | 9 | if ( ! _.isUndefined( window._wpmejsSettings ) ) { |
| | 10 | baseSettings = _wpmejsSettings; |
| | 11 | } |
| | 12 | |
| | 13 | /** |
| | 14 | * @mixin |
| | 15 | */ |
| | 16 | wp.media.mixin = { |
| | 17 | mejsSettings: baseSettings, |
| | 18 | |
| | 19 | removeAllPlayers: function() { |
| | 20 | var p; |
| | 21 | |
| | 22 | if ( window.mejs && window.mejs.players ) { |
| | 23 | for ( p in window.mejs.players ) { |
| | 24 | window.mejs.players[p].pause(); |
| | 25 | this.removePlayer( window.mejs.players[p] ); |
| | 26 | } |
| | 27 | } |
| | 28 | }, |
| | 29 | |
| | 30 | /** |
| | 31 | * Override the MediaElement method for removing a player. |
| | 32 | * MediaElement tries to pull the audio/video tag out of |
| | 33 | * its container and re-add it to the DOM. |
| | 34 | */ |
| | 35 | removePlayer: function(t) { |
| | 36 | var featureIndex, feature; |
| | 37 | |
| | 38 | if ( ! t.options ) { |
| | 39 | return; |
| | 40 | } |
| | 41 | |
| | 42 | // invoke features cleanup |
| | 43 | for ( featureIndex in t.options.features ) { |
| | 44 | feature = t.options.features[featureIndex]; |
| | 45 | if ( t['clean' + feature] ) { |
| | 46 | try { |
| | 47 | t['clean' + feature](t); |
| | 48 | } catch (e) {} |
| | 49 | } |
| | 50 | } |
| | 51 | |
| | 52 | if ( ! t.isDynamic ) { |
| | 53 | t.$node.remove(); |
| | 54 | } |
| | 55 | |
| | 56 | if ( 'native' !== t.media.pluginType ) { |
| | 57 | t.media.remove(); |
| | 58 | } |
| | 59 | |
| | 60 | delete window.mejs.players[t.id]; |
| | 61 | |
| | 62 | t.container.remove(); |
| | 63 | t.globalUnbind(); |
| | 64 | delete t.node.player; |
| | 65 | }, |
| | 66 | |
| | 67 | /** |
| | 68 | * Allows any class that has set 'player' to a MediaElementPlayer |
| | 69 | * instance to remove the player when listening to events. |
| | 70 | * |
| | 71 | * Examples: modal closes, shortcode properties are removed, etc. |
| | 72 | */ |
| | 73 | unsetPlayers : function() { |
| | 74 | if ( this.players && this.players.length ) { |
| | 75 | _.each( this.players, function (player) { |
| | 76 | player.pause(); |
| | 77 | wp.media.mixin.removePlayer( player ); |
| | 78 | } ); |
| | 79 | this.players = []; |
| | 80 | } |
| | 81 | } |
| | 82 | }; |
| | 83 | |
| | 84 | /** |
| | 85 | * Autowire "collection"-type shortcodes |
| | 86 | */ |
| | 87 | wp.media.playlist = new wp.media.collection({ |
| | 88 | tag: 'playlist', |
| | 89 | editTitle : l10n.editPlaylistTitle, |
| | 90 | defaults : { |
| | 91 | id: wp.media.view.settings.post.id, |
| | 92 | style: 'light', |
| | 93 | tracklist: true, |
| | 94 | tracknumbers: true, |
| | 95 | images: true, |
| | 96 | artists: true, |
| | 97 | type: 'audio' |
| | 98 | } |
| | 99 | }); |
| | 100 | |
| | 101 | /** |
| | 102 | * Shortcode modeling for audio |
| | 103 | * `edit()` prepares the shortcode for the media modal |
| | 104 | * `shortcode()` builds the new shortcode after update |
| | 105 | * |
| | 106 | * @namespace |
| | 107 | */ |
| | 108 | wp.media.audio = { |
| | 109 | coerce : wp.media.coerce, |
| | 110 | |
| | 111 | defaults : { |
| | 112 | id : wp.media.view.settings.post.id, |
| | 113 | src : '', |
| | 114 | loop : false, |
| | 115 | autoplay : false, |
| | 116 | preload : 'none', |
| | 117 | width : 400 |
| | 118 | }, |
| | 119 | |
| | 120 | edit : function( data ) { |
| | 121 | var frame, shortcode = wp.shortcode.next( 'audio', data ).shortcode; |
| | 122 | |
| | 123 | frame = wp.media({ |
| | 124 | frame: 'audio', |
| | 125 | state: 'audio-details', |
| | 126 | metadata: _.defaults( shortcode.attrs.named, this.defaults ) |
| | 127 | }); |
| | 128 | |
| | 129 | return frame; |
| | 130 | }, |
| | 131 | |
| | 132 | shortcode : function( model ) { |
| | 133 | var self = this, content; |
| | 134 | |
| | 135 | _.each( this.defaults, function( value, key ) { |
| | 136 | model[ key ] = self.coerce( model, key ); |
| | 137 | |
| | 138 | if ( value === model[ key ] ) { |
| | 139 | delete model[ key ]; |
| | 140 | } |
| | 141 | }); |
| | 142 | |
| | 143 | content = model.content; |
| | 144 | delete model.content; |
| | 145 | |
| | 146 | return new wp.shortcode({ |
| | 147 | tag: 'audio', |
| | 148 | attrs: model, |
| | 149 | content: content |
| | 150 | }); |
| | 151 | } |
| | 152 | }; |
| | 153 | |
| | 154 | /** |
| | 155 | * Shortcode modeling for video |
| | 156 | * `edit()` prepares the shortcode for the media modal |
| | 157 | * `shortcode()` builds the new shortcode after update |
| | 158 | * |
| | 159 | * @namespace |
| | 160 | */ |
| | 161 | wp.media.video = { |
| | 162 | coerce : wp.media.coerce, |
| | 163 | |
| | 164 | defaults : { |
| | 165 | id : wp.media.view.settings.post.id, |
| | 166 | src : '', |
| | 167 | poster : '', |
| | 168 | loop : false, |
| | 169 | autoplay : false, |
| | 170 | preload : 'metadata', |
| | 171 | content : '', |
| | 172 | width : 640, |
| | 173 | height : 360 |
| | 174 | }, |
| | 175 | |
| | 176 | edit : function( data ) { |
| | 177 | var frame, |
| | 178 | shortcode = wp.shortcode.next( 'video', data ).shortcode, |
| | 179 | attrs; |
| | 180 | |
| | 181 | attrs = shortcode.attrs.named; |
| | 182 | attrs.content = shortcode.content; |
| | 183 | |
| | 184 | frame = wp.media({ |
| | 185 | frame: 'video', |
| | 186 | state: 'video-details', |
| | 187 | metadata: _.defaults( attrs, this.defaults ) |
| | 188 | }); |
| | 189 | |
| | 190 | return frame; |
| | 191 | }, |
| | 192 | |
| | 193 | shortcode : function( model ) { |
| | 194 | var self = this, content; |
| | 195 | |
| | 196 | _.each( this.defaults, function( value, key ) { |
| | 197 | model[ key ] = self.coerce( model, key ); |
| | 198 | |
| | 199 | if ( value === model[ key ] ) { |
| | 200 | delete model[ key ]; |
| | 201 | } |
| | 202 | }); |
| | 203 | |
| | 204 | content = model.content; |
| | 205 | delete model.content; |
| | 206 | |
| | 207 | return new wp.shortcode({ |
| | 208 | tag: 'video', |
| | 209 | attrs: model, |
| | 210 | content: content |
| | 211 | }); |
| | 212 | } |
| | 213 | }; |
| | 214 | |
| | 215 | media.model.PostMedia = require( './models/post-media.js' ); |
| | 216 | media.controller.AudioDetails = require( './controllers/audio-details.js' ); |
| | 217 | media.controller.VideoDetails = require( './controllers/video-details.js' ); |
| | 218 | media.view.MediaFrame.MediaDetails = require( './views/frame/media-details.js' ); |
| | 219 | media.view.MediaFrame.AudioDetails = require( './views/frame/audio-details.js' ); |
| | 220 | media.view.MediaFrame.VideoDetails = require( './views/frame/video-details.js' ); |
| | 221 | media.view.MediaDetails = require( './views/media-details.js' ); |
| | 222 | media.view.AudioDetails = require( './views/audio-details.js' ); |
| | 223 | media.view.VideoDetails = require( './views/video-details.js' ); |
| | 224 | |
| | 225 | }(jQuery, _, Backbone)); |
| | 226 | |
| | 227 | },{"./controllers/audio-details.js":2,"./controllers/video-details.js":8,"./models/post-media.js":11,"./views/audio-details.js":25,"./views/frame/audio-details.js":29,"./views/frame/media-details.js":30,"./views/frame/video-details.js":32,"./views/media-details.js":35,"./views/video-details.js":54}],2:[function(require,module,exports){ |
| | 228 | /** |
| | 229 | * The controller for the Audio Details state |
| | 230 | * |
| | 231 | * @constructor |
| | 232 | * @augments wp.media.controller.State |
| | 233 | * @augments Backbone.Model |
| | 234 | */ |
| | 235 | var State = require( './state.js' ), |
| | 236 | l10n = wp.media.view.l10n, |
| | 237 | AudioDetails; |
| | 238 | |
| | 239 | AudioDetails = State.extend({ |
| | 240 | defaults: { |
| | 241 | id: 'audio-details', |
| | 242 | toolbar: 'audio-details', |
| | 243 | title: l10n.audioDetailsTitle, |
| | 244 | content: 'audio-details', |
| | 245 | menu: 'audio-details', |
| | 246 | router: false, |
| | 247 | priority: 60 |
| | 248 | }, |
| | 249 | |
| | 250 | initialize: function( options ) { |
| | 251 | this.media = options.media; |
| | 252 | State.prototype.initialize.apply( this, arguments ); |
| | 253 | } |
| | 254 | }); |
| | 255 | |
| | 256 | module.exports = AudioDetails; |
| | 257 | |
| | 258 | },{"./state.js":7}],3:[function(require,module,exports){ |
| | 259 | /** |
| | 260 | * wp.media.controller.Library |
| | 261 | * |
| | 262 | * A state for choosing an attachment or group of attachments from the media library. |
| | 263 | * |
| | 264 | * @class |
| | 265 | * @augments wp.media.controller.State |
| | 266 | * @augments Backbone.Model |
| | 267 | * @mixes media.selectionSync |
| | 268 | * |
| | 269 | * @param {object} [attributes] The attributes hash passed to the state. |
| | 270 | * @param {string} [attributes.id=library] Unique identifier. |
| | 271 | * @param {string} [attributes.title=Media library] Title for the state. Displays in the media menu and the frame's title region. |
| | 272 | * @param {wp.media.model.Attachments} [attributes.library] The attachments collection to browse. |
| | 273 | * If one is not supplied, a collection of all attachments will be created. |
| | 274 | * @param {wp.media.model.Selection|object} [attributes.selection] A collection to contain attachment selections within the state. |
| | 275 | * If the 'selection' attribute is a plain JS object, |
| | 276 | * a Selection will be created using its values as the selection instance's `props` model. |
| | 277 | * Otherwise, it will copy the library's `props` model. |
| | 278 | * @param {boolean} [attributes.multiple=false] Whether multi-select is enabled. |
| | 279 | * @param {string} [attributes.content=upload] Initial mode for the content region. |
| | 280 | * Overridden by persistent user setting if 'contentUserSetting' is true. |
| | 281 | * @param {string} [attributes.menu=default] Initial mode for the menu region. |
| | 282 | * @param {string} [attributes.router=browse] Initial mode for the router region. |
| | 283 | * @param {string} [attributes.toolbar=select] Initial mode for the toolbar region. |
| | 284 | * @param {boolean} [attributes.searchable=true] Whether the library is searchable. |
| | 285 | * @param {boolean|string} [attributes.filterable=false] Whether the library is filterable, and if so what filters should be shown. |
| | 286 | * Accepts 'all', 'uploaded', or 'unattached'. |
| | 287 | * @param {boolean} [attributes.sortable=true] Whether the Attachments should be sortable. Depends on the orderby property being set to menuOrder on the attachments collection. |
| | 288 | * @param {boolean} [attributes.autoSelect=true] Whether an uploaded attachment should be automatically added to the selection. |
| | 289 | * @param {boolean} [attributes.describe=false] Whether to offer UI to describe attachments - e.g. captioning images in a gallery. |
| | 290 | * @param {boolean} [attributes.contentUserSetting=true] Whether the content region's mode should be set and persisted per user. |
| | 291 | * @param {boolean} [attributes.syncSelection=true] Whether the Attachments selection should be persisted from the last state. |
| | 292 | */ |
| | 293 | var selectionSync = require( '../utils/selection-sync.js' ), |
| | 294 | SelectionModel = require( '../models/selection.js' ), |
| | 295 | State = require( './state.js' ), |
| | 296 | l10n = wp.media.view.l10n, |
| | 297 | Library; |
| | 298 | |
| | 299 | Library = State.extend({ |
| | 300 | defaults: { |
| | 301 | id: 'library', |
| | 302 | title: l10n.mediaLibraryTitle, |
| | 303 | multiple: false, |
| | 304 | content: 'upload', |
| | 305 | menu: 'default', |
| | 306 | router: 'browse', |
| | 307 | toolbar: 'select', |
| | 308 | searchable: true, |
| | 309 | filterable: false, |
| | 310 | sortable: true, |
| | 311 | autoSelect: true, |
| | 312 | describe: false, |
| | 313 | contentUserSetting: true, |
| | 314 | syncSelection: true |
| | 315 | }, |
| | 316 | |
| | 317 | /** |
| | 318 | * If a library isn't provided, query all media items. |
| | 319 | * If a selection instance isn't provided, create one. |
| | 320 | * |
| | 321 | * @since 3.5.0 |
| | 322 | */ |
| | 323 | initialize: function() { |
| | 324 | var selection = this.get('selection'), |
| | 325 | props; |
| | 326 | |
| | 327 | if ( ! this.get('library') ) { |
| | 328 | this.set( 'library', wp.media.query() ); |
| | 329 | } |
| | 330 | |
| | 331 | if ( ! (selection instanceof SelectionModel) ) { |
| | 332 | props = selection; |
| | 333 | |
| | 334 | if ( ! props ) { |
| | 335 | props = this.get('library').props.toJSON(); |
| | 336 | props = _.omit( props, 'orderby', 'query' ); |
| | 337 | } |
| | 338 | |
| | 339 | this.set( 'selection', new SelectionModel( null, { |
| | 340 | multiple: this.get('multiple'), |
| | 341 | props: props |
| | 342 | }) ); |
| | 343 | } |
| | 344 | |
| | 345 | this.resetDisplays(); |
| | 346 | }, |
| | 347 | |
| | 348 | /** |
| | 349 | * @since 3.5.0 |
| | 350 | */ |
| | 351 | activate: function() { |
| | 352 | this.syncSelection(); |
| | 353 | |
| | 354 | wp.Uploader.queue.on( 'add', this.uploading, this ); |
| | 355 | |
| | 356 | this.get('selection').on( 'add remove reset', this.refreshContent, this ); |
| | 357 | |
| | 358 | if ( this.get( 'router' ) && this.get('contentUserSetting') ) { |
| | 359 | this.frame.on( 'content:activate', this.saveContentMode, this ); |
| | 360 | this.set( 'content', getUserSetting( 'libraryContent', this.get('content') ) ); |
| | 361 | } |
| | 362 | }, |
| | 363 | |
| | 364 | /** |
| | 365 | * @since 3.5.0 |
| | 366 | */ |
| | 367 | deactivate: function() { |
| | 368 | this.recordSelection(); |
| | 369 | |
| | 370 | this.frame.off( 'content:activate', this.saveContentMode, this ); |
| | 371 | |
| | 372 | // Unbind all event handlers that use this state as the context |
| | 373 | // from the selection. |
| | 374 | this.get('selection').off( null, null, this ); |
| | 375 | |
| | 376 | wp.Uploader.queue.off( null, null, this ); |
| | 377 | }, |
| | 378 | |
| | 379 | /** |
| | 380 | * Reset the library to its initial state. |
| | 381 | * |
| | 382 | * @since 3.5.0 |
| | 383 | */ |
| | 384 | reset: function() { |
| | 385 | this.get('selection').reset(); |
| | 386 | this.resetDisplays(); |
| | 387 | this.refreshContent(); |
| | 388 | }, |
| | 389 | |
| | 390 | /** |
| | 391 | * Reset the attachment display settings defaults to the site options. |
| | 392 | * |
| | 393 | * If site options don't define them, fall back to a persistent user setting. |
| | 394 | * |
| | 395 | * @since 3.5.0 |
| | 396 | */ |
| | 397 | resetDisplays: function() { |
| | 398 | var defaultProps = wp.media.view.settings.defaultProps; |
| | 399 | this._displays = []; |
| | 400 | this._defaultDisplaySettings = { |
| | 401 | align: defaultProps.align || getUserSetting( 'align', 'none' ), |
| | 402 | size: defaultProps.size || getUserSetting( 'imgsize', 'medium' ), |
| | 403 | link: defaultProps.link || getUserSetting( 'urlbutton', 'file' ) |
| | 404 | }; |
| | 405 | }, |
| | 406 | |
| | 407 | /** |
| | 408 | * Create a model to represent display settings (alignment, etc.) for an attachment. |
| | 409 | * |
| | 410 | * @since 3.5.0 |
| | 411 | * |
| | 412 | * @param {wp.media.model.Attachment} attachment |
| | 413 | * @returns {Backbone.Model} |
| | 414 | */ |
| | 415 | display: function( attachment ) { |
| | 416 | var displays = this._displays; |
| | 417 | |
| | 418 | if ( ! displays[ attachment.cid ] ) { |
| | 419 | displays[ attachment.cid ] = new Backbone.Model( this.defaultDisplaySettings( attachment ) ); |
| | 420 | } |
| | 421 | return displays[ attachment.cid ]; |
| | 422 | }, |
| | 423 | |
| | 424 | /** |
| | 425 | * Given an attachment, create attachment display settings properties. |
| | 426 | * |
| | 427 | * @since 3.6.0 |
| | 428 | * |
| | 429 | * @param {wp.media.model.Attachment} attachment |
| | 430 | * @returns {Object} |
| | 431 | */ |
| | 432 | defaultDisplaySettings: function( attachment ) { |
| | 433 | var settings = this._defaultDisplaySettings; |
| | 434 | if ( settings.canEmbed = this.canEmbed( attachment ) ) { |
| | 435 | settings.link = 'embed'; |
| | 436 | } |
| | 437 | return settings; |
| | 438 | }, |
| | 439 | |
| | 440 | /** |
| | 441 | * Whether an attachment can be embedded (audio or video). |
| | 442 | * |
| | 443 | * @since 3.6.0 |
| | 444 | * |
| | 445 | * @param {wp.media.model.Attachment} attachment |
| | 446 | * @returns {Boolean} |
| | 447 | */ |
| | 448 | canEmbed: function( attachment ) { |
| | 449 | // If uploading, we know the filename but not the mime type. |
| | 450 | if ( ! attachment.get('uploading') ) { |
| | 451 | var type = attachment.get('type'); |
| | 452 | if ( type !== 'audio' && type !== 'video' ) { |
| | 453 | return false; |
| | 454 | } |
| | 455 | } |
| | 456 | |
| | 457 | return _.contains( wp.media.view.settings.embedExts, attachment.get('filename').split('.').pop() ); |
| | 458 | }, |
| | 459 | |
| | 460 | |
| | 461 | /** |
| | 462 | * If the state is active, no items are selected, and the current |
| | 463 | * content mode is not an option in the state's router (provided |
| | 464 | * the state has a router), reset the content mode to the default. |
| | 465 | * |
| | 466 | * @since 3.5.0 |
| | 467 | */ |
| | 468 | refreshContent: function() { |
| | 469 | var selection = this.get('selection'), |
| | 470 | frame = this.frame, |
| | 471 | router = frame.router.get(), |
| | 472 | mode = frame.content.mode(); |
| | 473 | |
| | 474 | if ( this.active && ! selection.length && router && ! router.get( mode ) ) { |
| | 475 | this.frame.content.render( this.get('content') ); |
| | 476 | } |
| | 477 | }, |
| | 478 | |
| | 479 | /** |
| | 480 | * Callback handler when an attachment is uploaded. |
| | 481 | * |
| | 482 | * Switch to the Media Library if uploaded from the 'Upload Files' tab. |
| | 483 | * |
| | 484 | * Adds any uploading attachments to the selection. |
| | 485 | * |
| | 486 | * If the state only supports one attachment to be selected and multiple |
| | 487 | * attachments are uploaded, the last attachment in the upload queue will |
| | 488 | * be selected. |
| | 489 | * |
| | 490 | * @since 3.5.0 |
| | 491 | * |
| | 492 | * @param {wp.media.model.Attachment} attachment |
| | 493 | */ |
| | 494 | uploading: function( attachment ) { |
| | 495 | var content = this.frame.content; |
| | 496 | |
| | 497 | if ( 'upload' === content.mode() ) { |
| | 498 | this.frame.content.mode('browse'); |
| | 499 | } |
| | 500 | |
| | 501 | if ( this.get( 'autoSelect' ) ) { |
| | 502 | this.get('selection').add( attachment ); |
| | 503 | this.frame.trigger( 'library:selection:add' ); |
| | 504 | } |
| | 505 | }, |
| | 506 | |
| | 507 | /** |
| | 508 | * Persist the mode of the content region as a user setting. |
| | 509 | * |
| | 510 | * @since 3.5.0 |
| | 511 | */ |
| | 512 | saveContentMode: function() { |
| | 513 | if ( 'browse' !== this.get('router') ) { |
| | 514 | return; |
| | 515 | } |
| | 516 | |
| | 517 | var mode = this.frame.content.mode(), |
| | 518 | view = this.frame.router.get(); |
| | 519 | |
| | 520 | if ( view && view.get( mode ) ) { |
| | 521 | setUserSetting( 'libraryContent', mode ); |
| | 522 | } |
| | 523 | } |
| | 524 | }); |
| | 525 | |
| | 526 | // Make selectionSync available on any Media Library state. |
| | 527 | _.extend( Library.prototype, selectionSync ); |
| | 528 | |
| | 529 | module.exports = Library; |
| | 530 | },{"../models/selection.js":13,"../utils/selection-sync.js":14,"./state.js":7}],4:[function(require,module,exports){ |
| | 531 | /** |
| | 532 | * wp.media.controller.MediaLibrary |
| | 533 | * |
| | 534 | * @class |
| | 535 | * @augments wp.media.controller.Library |
| | 536 | * @augments wp.media.controller.State |
| | 537 | * @augments Backbone.Model |
| | 538 | */ |
| | 539 | var Library = require( './library.js' ), |
| | 540 | MediaLibrary; |
| | 541 | |
| | 542 | MediaLibrary = Library.extend({ |
| | 543 | defaults: _.defaults({ |
| | 544 | // Attachments browser defaults. @see media.view.AttachmentsBrowser |
| | 545 | filterable: 'uploaded', |
| | 546 | |
| | 547 | displaySettings: false, |
| | 548 | priority: 80, |
| | 549 | syncSelection: false |
| | 550 | }, Library.prototype.defaults ), |
| | 551 | |
| | 552 | /** |
| | 553 | * @since 3.9.0 |
| | 554 | * |
| | 555 | * @param options |
| | 556 | */ |
| | 557 | initialize: function( options ) { |
| | 558 | this.media = options.media; |
| | 559 | this.type = options.type; |
| | 560 | this.set( 'library', wp.media.query({ type: this.type }) ); |
| | 561 | |
| | 562 | Library.prototype.initialize.apply( this, arguments ); |
| | 563 | }, |
| | 564 | |
| | 565 | /** |
| | 566 | * @since 3.9.0 |
| | 567 | */ |
| | 568 | activate: function() { |
| | 569 | // @todo this should use this.frame. |
| | 570 | if ( wp.media.frame.lastMime ) { |
| | 571 | this.set( 'library', wp.media.query({ type: wp.media.frame.lastMime }) ); |
| | 572 | delete wp.media.frame.lastMime; |
| | 573 | } |
| | 574 | Library.prototype.activate.apply( this, arguments ); |
| | 575 | } |
| | 576 | }); |
| | 577 | |
| | 578 | module.exports = MediaLibrary; |
| | 579 | },{"./library.js":3}],5:[function(require,module,exports){ |
| | 580 | /** |
| | 581 | * wp.media.controller.Region |
| | 582 | * |
| | 583 | * A region is a persistent application layout area. |
| | 584 | * |
| | 585 | * A region assumes one mode at any time, and can be switched to another. |
| | 586 | * |
| | 587 | * When mode changes, events are triggered on the region's parent view. |
| | 588 | * The parent view will listen to specific events and fill the region with an |
| | 589 | * appropriate view depending on mode. For example, a frame listens for the |
| | 590 | * 'browse' mode t be activated on the 'content' view and then fills the region |
| | 591 | * with an AttachmentsBrowser view. |
| | 592 | * |
| | 593 | * @class |
| | 594 | * |
| | 595 | * @param {object} options Options hash for the region. |
| | 596 | * @param {string} options.id Unique identifier for the region. |
| | 597 | * @param {Backbone.View} options.view A parent view the region exists within. |
| | 598 | * @param {string} options.selector jQuery selector for the region within the parent view. |
| | 599 | */ |
| | 600 | var Region = function( options ) { |
| | 601 | _.extend( this, _.pick( options || {}, 'id', 'view', 'selector' ) ); |
| | 602 | }; |
| | 603 | |
| | 604 | // Use Backbone's self-propagating `extend` inheritance method. |
| | 605 | Region.extend = Backbone.Model.extend; |
| | 606 | |
| | 607 | _.extend( Region.prototype, { |
| | 608 | /** |
| | 609 | * Activate a mode. |
| | 610 | * |
| | 611 | * @since 3.5.0 |
| | 612 | * |
| | 613 | * @param {string} mode |
| | 614 | * |
| | 615 | * @fires this.view#{this.id}:activate:{this._mode} |
| | 616 | * @fires this.view#{this.id}:activate |
| | 617 | * @fires this.view#{this.id}:deactivate:{this._mode} |
| | 618 | * @fires this.view#{this.id}:deactivate |
| | 619 | * |
| | 620 | * @returns {wp.media.controller.Region} Returns itself to allow chaining. |
| | 621 | */ |
| | 622 | mode: function( mode ) { |
| | 623 | if ( ! mode ) { |
| | 624 | return this._mode; |
| | 625 | } |
| | 626 | // Bail if we're trying to change to the current mode. |
| | 627 | if ( mode === this._mode ) { |
| | 628 | return this; |
| | 629 | } |
| | 630 | |
| | 631 | /** |
| | 632 | * Region mode deactivation event. |
| | 633 | * |
| | 634 | * @event this.view#{this.id}:deactivate:{this._mode} |
| | 635 | * @event this.view#{this.id}:deactivate |
| | 636 | */ |
| | 637 | this.trigger('deactivate'); |
| | 638 | |
| | 639 | this._mode = mode; |
| | 640 | this.render( mode ); |
| | 641 | |
| | 642 | /** |
| | 643 | * Region mode activation event. |
| | 644 | * |
| | 645 | * @event this.view#{this.id}:activate:{this._mode} |
| | 646 | * @event this.view#{this.id}:activate |
| | 647 | */ |
| | 648 | this.trigger('activate'); |
| | 649 | return this; |
| | 650 | }, |
| | 651 | /** |
| | 652 | * Render a mode. |
| | 653 | * |
| | 654 | * @since 3.5.0 |
| | 655 | * |
| | 656 | * @param {string} mode |
| | 657 | * |
| | 658 | * @fires this.view#{this.id}:create:{this._mode} |
| | 659 | * @fires this.view#{this.id}:create |
| | 660 | * @fires this.view#{this.id}:render:{this._mode} |
| | 661 | * @fires this.view#{this.id}:render |
| | 662 | * |
| | 663 | * @returns {wp.media.controller.Region} Returns itself to allow chaining |
| | 664 | */ |
| | 665 | render: function( mode ) { |
| | 666 | // If the mode isn't active, activate it. |
| | 667 | if ( mode && mode !== this._mode ) { |
| | 668 | return this.mode( mode ); |
| | 669 | } |
| | 670 | |
| | 671 | var set = { view: null }, |
| | 672 | view; |
| | 673 | |
| | 674 | /** |
| | 675 | * Create region view event. |
| | 676 | * |
| | 677 | * Region view creation takes place in an event callback on the frame. |
| | 678 | * |
| | 679 | * @event this.view#{this.id}:create:{this._mode} |
| | 680 | * @event this.view#{this.id}:create |
| | 681 | */ |
| | 682 | this.trigger( 'create', set ); |
| | 683 | view = set.view; |
| | 684 | |
| | 685 | /** |
| | 686 | * Render region view event. |
| | 687 | * |
| | 688 | * Region view creation takes place in an event callback on the frame. |
| | 689 | * |
| | 690 | * @event this.view#{this.id}:create:{this._mode} |
| | 691 | * @event this.view#{this.id}:create |
| | 692 | */ |
| | 693 | this.trigger( 'render', view ); |
| | 694 | if ( view ) { |
| | 695 | this.set( view ); |
| | 696 | } |
| | 697 | return this; |
| | 698 | }, |
| | 699 | |
| | 700 | /** |
| | 701 | * Get the region's view. |
| | 702 | * |
| | 703 | * @since 3.5.0 |
| | 704 | * |
| | 705 | * @returns {wp.media.View} |
| | 706 | */ |
| | 707 | get: function() { |
| | 708 | return this.view.views.first( this.selector ); |
| | 709 | }, |
| | 710 | |
| | 711 | /** |
| | 712 | * Set the region's view as a subview of the frame. |
| | 713 | * |
| | 714 | * @since 3.5.0 |
| | 715 | * |
| | 716 | * @param {Array|Object} views |
| | 717 | * @param {Object} [options={}] |
| | 718 | * @returns {wp.Backbone.Subviews} Subviews is returned to allow chaining |
| | 719 | */ |
| | 720 | set: function( views, options ) { |
| | 721 | if ( options ) { |
| | 722 | options.add = false; |
| | 723 | } |
| | 724 | return this.view.views.set( this.selector, views, options ); |
| | 725 | }, |
| | 726 | |
| | 727 | /** |
| | 728 | * Trigger regional view events on the frame. |
| | 729 | * |
| | 730 | * @since 3.5.0 |
| | 731 | * |
| | 732 | * @param {string} event |
| | 733 | * @returns {undefined|wp.media.controller.Region} Returns itself to allow chaining. |
| | 734 | */ |
| | 735 | trigger: function( event ) { |
| | 736 | var base, args; |
| | 737 | |
| | 738 | if ( ! this._mode ) { |
| | 739 | return; |
| | 740 | } |
| | 741 | |
| | 742 | args = _.toArray( arguments ); |
| | 743 | base = this.id + ':' + event; |
| | 744 | |
| | 745 | // Trigger `{this.id}:{event}:{this._mode}` event on the frame. |
| | 746 | args[0] = base + ':' + this._mode; |
| | 747 | this.view.trigger.apply( this.view, args ); |
| | 748 | |
| | 749 | // Trigger `{this.id}:{event}` event on the frame. |
| | 750 | args[0] = base; |
| | 751 | this.view.trigger.apply( this.view, args ); |
| | 752 | return this; |
| | 753 | } |
| | 754 | }); |
| | 755 | |
| | 756 | module.exports = Region; |
| | 757 | },{}],6:[function(require,module,exports){ |
| | 758 | /** |
| | 759 | * wp.media.controller.StateMachine |
| | 760 | * |
| | 761 | * A state machine keeps track of state. It is in one state at a time, |
| | 762 | * and can change from one state to another. |
| | 763 | * |
| | 764 | * States are stored as models in a Backbone collection. |
| | 765 | * |
| | 766 | * @since 3.5.0 |
| | 767 | * |
| | 768 | * @class |
| | 769 | * @augments Backbone.Model |
| | 770 | * @mixin |
| | 771 | * @mixes Backbone.Events |
| | 772 | * |
| | 773 | * @param {Array} states |
| | 774 | */ |
| | 775 | var StateMachine = function( states ) { |
| | 776 | // @todo This is dead code. The states collection gets created in media.view.Frame._createStates. |
| | 777 | this.states = new Backbone.Collection( states ); |
| | 778 | }; |
| | 779 | |
| | 780 | // Use Backbone's self-propagating `extend` inheritance method. |
| | 781 | StateMachine.extend = Backbone.Model.extend; |
| | 782 | |
| | 783 | _.extend( StateMachine.prototype, Backbone.Events, { |
| | 784 | /** |
| | 785 | * Fetch a state. |
| | 786 | * |
| | 787 | * If no `id` is provided, returns the active state. |
| | 788 | * |
| | 789 | * Implicitly creates states. |
| | 790 | * |
| | 791 | * Ensure that the `states` collection exists so the `StateMachine` |
| | 792 | * can be used as a mixin. |
| | 793 | * |
| | 794 | * @since 3.5.0 |
| | 795 | * |
| | 796 | * @param {string} id |
| | 797 | * @returns {wp.media.controller.State} Returns a State model |
| | 798 | * from the StateMachine collection |
| | 799 | */ |
| | 800 | state: function( id ) { |
| | 801 | this.states = this.states || new Backbone.Collection(); |
| | 802 | |
| | 803 | // Default to the active state. |
| | 804 | id = id || this._state; |
| | 805 | |
| | 806 | if ( id && ! this.states.get( id ) ) { |
| | 807 | this.states.add({ id: id }); |
| | 808 | } |
| | 809 | return this.states.get( id ); |
| | 810 | }, |
| | 811 | |
| | 812 | /** |
| | 813 | * Sets the active state. |
| | 814 | * |
| | 815 | * Bail if we're trying to select the current state, if we haven't |
| | 816 | * created the `states` collection, or are trying to select a state |
| | 817 | * that does not exist. |
| | 818 | * |
| | 819 | * @since 3.5.0 |
| | 820 | * |
| | 821 | * @param {string} id |
| | 822 | * |
| | 823 | * @fires wp.media.controller.State#deactivate |
| | 824 | * @fires wp.media.controller.State#activate |
| | 825 | * |
| | 826 | * @returns {wp.media.controller.StateMachine} Returns itself to allow chaining |
| | 827 | */ |
| | 828 | setState: function( id ) { |
| | 829 | var previous = this.state(); |
| | 830 | |
| | 831 | if ( ( previous && id === previous.id ) || ! this.states || ! this.states.get( id ) ) { |
| | 832 | return this; |
| | 833 | } |
| | 834 | |
| | 835 | if ( previous ) { |
| | 836 | previous.trigger('deactivate'); |
| | 837 | this._lastState = previous.id; |
| | 838 | } |
| | 839 | |
| | 840 | this._state = id; |
| | 841 | this.state().trigger('activate'); |
| | 842 | |
| | 843 | return this; |
| | 844 | }, |
| | 845 | |
| | 846 | /** |
| | 847 | * Returns the previous active state. |
| | 848 | * |
| | 849 | * Call the `state()` method with no parameters to retrieve the current |
| | 850 | * active state. |
| | 851 | * |
| | 852 | * @since 3.5.0 |
| | 853 | * |
| | 854 | * @returns {wp.media.controller.State} Returns a State model |
| | 855 | * from the StateMachine collection |
| | 856 | */ |
| | 857 | lastState: function() { |
| | 858 | if ( this._lastState ) { |
| | 859 | return this.state( this._lastState ); |
| | 860 | } |
| | 861 | } |
| | 862 | }); |
| | 863 | |
| | 864 | // Map all event binding and triggering on a StateMachine to its `states` collection. |
| | 865 | _.each([ 'on', 'off', 'trigger' ], function( method ) { |
| | 866 | /** |
| | 867 | * @returns {wp.media.controller.StateMachine} Returns itself to allow chaining. |
| | 868 | */ |
| | 869 | StateMachine.prototype[ method ] = function() { |
| | 870 | // Ensure that the `states` collection exists so the `StateMachine` |
| | 871 | // can be used as a mixin. |
| | 872 | this.states = this.states || new Backbone.Collection(); |
| | 873 | // Forward the method to the `states` collection. |
| | 874 | this.states[ method ].apply( this.states, arguments ); |
| | 875 | return this; |
| | 876 | }; |
| | 877 | }); |
| | 878 | |
| | 879 | module.exports = StateMachine; |
| | 880 | },{}],7:[function(require,module,exports){ |
| | 881 | /** |
| | 882 | * wp.media.controller.State |
| | 883 | * |
| | 884 | * A state is a step in a workflow that when set will trigger the controllers |
| | 885 | * for the regions to be updated as specified in the frame. |
| | 886 | * |
| | 887 | * A state has an event-driven lifecycle: |
| | 888 | * |
| | 889 | * 'ready' triggers when a state is added to a state machine's collection. |
| | 890 | * 'activate' triggers when a state is activated by a state machine. |
| | 891 | * 'deactivate' triggers when a state is deactivated by a state machine. |
| | 892 | * 'reset' is not triggered automatically. It should be invoked by the |
| | 893 | * proper controller to reset the state to its default. |
| | 894 | * |
| | 895 | * @class |
| | 896 | * @augments Backbone.Model |
| | 897 | */ |
| | 898 | var State = Backbone.Model.extend({ |
| | 899 | /** |
| | 900 | * Constructor. |
| | 901 | * |
| | 902 | * @since 3.5.0 |
| | 903 | */ |
| | 904 | constructor: function() { |
| | 905 | this.on( 'activate', this._preActivate, this ); |
| | 906 | this.on( 'activate', this.activate, this ); |
| | 907 | this.on( 'activate', this._postActivate, this ); |
| | 908 | this.on( 'deactivate', this._deactivate, this ); |
| | 909 | this.on( 'deactivate', this.deactivate, this ); |
| | 910 | this.on( 'reset', this.reset, this ); |
| | 911 | this.on( 'ready', this._ready, this ); |
| | 912 | this.on( 'ready', this.ready, this ); |
| | 913 | /** |
| | 914 | * Call parent constructor with passed arguments |
| | 915 | */ |
| | 916 | Backbone.Model.apply( this, arguments ); |
| | 917 | this.on( 'change:menu', this._updateMenu, this ); |
| | 918 | }, |
| | 919 | /** |
| | 920 | * Ready event callback. |
| | 921 | * |
| | 922 | * @abstract |
| | 923 | * @since 3.5.0 |
| | 924 | */ |
| | 925 | ready: function() {}, |
| | 926 | |
| | 927 | /** |
| | 928 | * Activate event callback. |
| | 929 | * |
| | 930 | * @abstract |
| | 931 | * @since 3.5.0 |
| | 932 | */ |
| | 933 | activate: function() {}, |
| | 934 | |
| | 935 | /** |
| | 936 | * Deactivate event callback. |
| | 937 | * |
| | 938 | * @abstract |
| | 939 | * @since 3.5.0 |
| | 940 | */ |
| | 941 | deactivate: function() {}, |
| | 942 | |
| | 943 | /** |
| | 944 | * Reset event callback. |
| | 945 | * |
| | 946 | * @abstract |
| | 947 | * @since 3.5.0 |
| | 948 | */ |
| | 949 | reset: function() {}, |
| | 950 | |
| | 951 | /** |
| | 952 | * @access private |
| | 953 | * @since 3.5.0 |
| | 954 | */ |
| | 955 | _ready: function() { |
| | 956 | this._updateMenu(); |
| | 957 | }, |
| | 958 | |
| | 959 | /** |
| | 960 | * @access private |
| | 961 | * @since 3.5.0 |
| | 962 | */ |
| | 963 | _preActivate: function() { |
| | 964 | this.active = true; |
| | 965 | }, |
| | 966 | |
| | 967 | /** |
| | 968 | * @access private |
| | 969 | * @since 3.5.0 |
| | 970 | */ |
| | 971 | _postActivate: function() { |
| | 972 | this.on( 'change:menu', this._menu, this ); |
| | 973 | this.on( 'change:titleMode', this._title, this ); |
| | 974 | this.on( 'change:content', this._content, this ); |
| | 975 | this.on( 'change:toolbar', this._toolbar, this ); |
| | 976 | |
| | 977 | this.frame.on( 'title:render:default', this._renderTitle, this ); |
| | 978 | |
| | 979 | this._title(); |
| | 980 | this._menu(); |
| | 981 | this._toolbar(); |
| | 982 | this._content(); |
| | 983 | this._router(); |
| | 984 | }, |
| | 985 | |
| | 986 | /** |
| | 987 | * @access private |
| | 988 | * @since 3.5.0 |
| | 989 | */ |
| | 990 | _deactivate: function() { |
| | 991 | this.active = false; |
| | 992 | |
| | 993 | this.frame.off( 'title:render:default', this._renderTitle, this ); |
| | 994 | |
| | 995 | this.off( 'change:menu', this._menu, this ); |
| | 996 | this.off( 'change:titleMode', this._title, this ); |
| | 997 | this.off( 'change:content', this._content, this ); |
| | 998 | this.off( 'change:toolbar', this._toolbar, this ); |
| | 999 | }, |
| | 1000 | |
| | 1001 | /** |
| | 1002 | * @access private |
| | 1003 | * @since 3.5.0 |
| | 1004 | */ |
| | 1005 | _title: function() { |
| | 1006 | this.frame.title.render( this.get('titleMode') || 'default' ); |
| | 1007 | }, |
| | 1008 | |
| | 1009 | /** |
| | 1010 | * @access private |
| | 1011 | * @since 3.5.0 |
| | 1012 | */ |
| | 1013 | _renderTitle: function( view ) { |
| | 1014 | view.$el.text( this.get('title') || '' ); |
| | 1015 | }, |
| | 1016 | |
| | 1017 | /** |
| | 1018 | * @access private |
| | 1019 | * @since 3.5.0 |
| | 1020 | */ |
| | 1021 | _router: function() { |
| | 1022 | var router = this.frame.router, |
| | 1023 | mode = this.get('router'), |
| | 1024 | view; |
| | 1025 | |
| | 1026 | this.frame.$el.toggleClass( 'hide-router', ! mode ); |
| | 1027 | if ( ! mode ) { |
| | 1028 | return; |
| | 1029 | } |
| | 1030 | |
| | 1031 | this.frame.router.render( mode ); |
| | 1032 | |
| | 1033 | view = router.get(); |
| | 1034 | if ( view && view.select ) { |
| | 1035 | view.select( this.frame.content.mode() ); |
| | 1036 | } |
| | 1037 | }, |
| | 1038 | |
| | 1039 | /** |
| | 1040 | * @access private |
| | 1041 | * @since 3.5.0 |
| | 1042 | */ |
| | 1043 | _menu: function() { |
| | 1044 | var menu = this.frame.menu, |
| | 1045 | mode = this.get('menu'), |
| | 1046 | view; |
| | 1047 | |
| | 1048 | this.frame.$el.toggleClass( 'hide-menu', ! mode ); |
| | 1049 | if ( ! mode ) { |
| | 1050 | return; |
| | 1051 | } |
| | 1052 | |
| | 1053 | menu.mode( mode ); |
| | 1054 | |
| | 1055 | view = menu.get(); |
| | 1056 | if ( view && view.select ) { |
| | 1057 | view.select( this.id ); |
| | 1058 | } |
| | 1059 | }, |
| | 1060 | |
| | 1061 | /** |
| | 1062 | * @access private |
| | 1063 | * @since 3.5.0 |
| | 1064 | */ |
| | 1065 | _updateMenu: function() { |
| | 1066 | var previous = this.previous('menu'), |
| | 1067 | menu = this.get('menu'); |
| | 1068 | |
| | 1069 | if ( previous ) { |
| | 1070 | this.frame.off( 'menu:render:' + previous, this._renderMenu, this ); |
| | 1071 | } |
| | 1072 | |
| | 1073 | if ( menu ) { |
| | 1074 | this.frame.on( 'menu:render:' + menu, this._renderMenu, this ); |
| | 1075 | } |
| | 1076 | }, |
| | 1077 | |
| | 1078 | /** |
| | 1079 | * Create a view in the media menu for the state. |
| | 1080 | * |
| | 1081 | * @access private |
| | 1082 | * @since 3.5.0 |
| | 1083 | * |
| | 1084 | * @param {media.view.Menu} view The menu view. |
| | 1085 | */ |
| | 1086 | _renderMenu: function( view ) { |
| | 1087 | var menuItem = this.get('menuItem'), |
| | 1088 | title = this.get('title'), |
| | 1089 | priority = this.get('priority'); |
| | 1090 | |
| | 1091 | if ( ! menuItem && title ) { |
| | 1092 | menuItem = { text: title }; |
| | 1093 | |
| | 1094 | if ( priority ) { |
| | 1095 | menuItem.priority = priority; |
| | 1096 | } |
| | 1097 | } |
| | 1098 | |
| | 1099 | if ( ! menuItem ) { |
| | 1100 | return; |
| | 1101 | } |
| | 1102 | |
| | 1103 | view.set( this.id, menuItem ); |
| | 1104 | } |
| | 1105 | }); |
| | 1106 | |
| | 1107 | _.each(['toolbar','content'], function( region ) { |
| | 1108 | /** |
| | 1109 | * @access private |
| | 1110 | */ |
| | 1111 | State.prototype[ '_' + region ] = function() { |
| | 1112 | var mode = this.get( region ); |
| | 1113 | if ( mode ) { |
| | 1114 | this.frame[ region ].render( mode ); |
| | 1115 | } |
| | 1116 | }; |
| | 1117 | }); |
| | 1118 | |
| | 1119 | module.exports = State; |
| | 1120 | },{}],8:[function(require,module,exports){ |
| | 1121 | /** |
| | 1122 | * The controller for the Video Details state |
| | 1123 | * |
| | 1124 | * @constructor |
| | 1125 | * @augments wp.media.controller.State |
| | 1126 | * @augments Backbone.Model |
| | 1127 | */ |
| | 1128 | var State = require( './state.js' ), |
| | 1129 | l10n = wp.media.view.l10n, |
| | 1130 | VideoDetails; |
| | 1131 | |
| | 1132 | VideoDetails = State.extend({ |
| | 1133 | defaults: { |
| | 1134 | id: 'video-details', |
| | 1135 | toolbar: 'video-details', |
| | 1136 | title: l10n.videoDetailsTitle, |
| | 1137 | content: 'video-details', |
| | 1138 | menu: 'video-details', |
| | 1139 | router: false, |
| | 1140 | priority: 60 |
| | 1141 | }, |
| | 1142 | |
| | 1143 | initialize: function( options ) { |
| | 1144 | this.media = options.media; |
| | 1145 | State.prototype.initialize.apply( this, arguments ); |
| | 1146 | } |
| | 1147 | }); |
| | 1148 | |
| | 1149 | module.exports = VideoDetails; |
| | 1150 | },{"./state.js":7}],9:[function(require,module,exports){ |
| | 1151 | /** |
| | 1152 | * wp.media.model.Attachment |
| | 1153 | * |
| | 1154 | * @class |
| | 1155 | * @augments Backbone.Model |
| | 1156 | */ |
| | 1157 | var $ = jQuery, |
| | 1158 | Attachment; |
| | 1159 | |
| | 1160 | Attachment = Backbone.Model.extend({ |
| | 1161 | /** |
| | 1162 | * Triggered when attachment details change |
| | 1163 | * Overrides Backbone.Model.sync |
| | 1164 | * |
| | 1165 | * @param {string} method |
| | 1166 | * @param {wp.media.model.Attachment} model |
| | 1167 | * @param {Object} [options={}] |
| | 1168 | * |
| | 1169 | * @returns {Promise} |
| | 1170 | */ |
| | 1171 | sync: function( method, model, options ) { |
| | 1172 | // If the attachment does not yet have an `id`, return an instantly |
| | 1173 | // rejected promise. Otherwise, all of our requests will fail. |
| | 1174 | if ( _.isUndefined( this.id ) ) { |
| | 1175 | return $.Deferred().rejectWith( this ).promise(); |
| | 1176 | } |
| | 1177 | |
| | 1178 | // Overload the `read` request so Attachment.fetch() functions correctly. |
| | 1179 | if ( 'read' === method ) { |
| | 1180 | options = options || {}; |
| | 1181 | options.context = this; |
| | 1182 | options.data = _.extend( options.data || {}, { |
| | 1183 | action: 'get-attachment', |
| | 1184 | id: this.id |
| | 1185 | }); |
| | 1186 | return wp.media.ajax( options ); |
| | 1187 | |
| | 1188 | // Overload the `update` request so properties can be saved. |
| | 1189 | } else if ( 'update' === method ) { |
| | 1190 | // If we do not have the necessary nonce, fail immeditately. |
| | 1191 | if ( ! this.get('nonces') || ! this.get('nonces').update ) { |
| | 1192 | return $.Deferred().rejectWith( this ).promise(); |
| | 1193 | } |
| | 1194 | |
| | 1195 | options = options || {}; |
| | 1196 | options.context = this; |
| | 1197 | |
| | 1198 | // Set the action and ID. |
| | 1199 | options.data = _.extend( options.data || {}, { |
| | 1200 | action: 'save-attachment', |
| | 1201 | id: this.id, |
| | 1202 | nonce: this.get('nonces').update, |
| | 1203 | post_id: wp.media.model.settings.post.id |
| | 1204 | }); |
| | 1205 | |
| | 1206 | // Record the values of the changed attributes. |
| | 1207 | if ( model.hasChanged() ) { |
| | 1208 | options.data.changes = {}; |
| | 1209 | |
| | 1210 | _.each( model.changed, function( value, key ) { |
| | 1211 | options.data.changes[ key ] = this.get( key ); |
| | 1212 | }, this ); |
| | 1213 | } |
| | 1214 | |
| | 1215 | return wp.media.ajax( options ); |
| | 1216 | |
| | 1217 | // Overload the `delete` request so attachments can be removed. |
| | 1218 | // This will permanently delete an attachment. |
| | 1219 | } else if ( 'delete' === method ) { |
| | 1220 | options = options || {}; |
| | 1221 | |
| | 1222 | if ( ! options.wait ) { |
| | 1223 | this.destroyed = true; |
| | 1224 | } |
| | 1225 | |
| | 1226 | options.context = this; |
| | 1227 | options.data = _.extend( options.data || {}, { |
| | 1228 | action: 'delete-post', |
| | 1229 | id: this.id, |
| | 1230 | _wpnonce: this.get('nonces')['delete'] |
| | 1231 | }); |
| | 1232 | |
| | 1233 | return wp.media.ajax( options ).done( function() { |
| | 1234 | this.destroyed = true; |
| | 1235 | }).fail( function() { |
| | 1236 | this.destroyed = false; |
| | 1237 | }); |
| | 1238 | |
| | 1239 | // Otherwise, fall back to `Backbone.sync()`. |
| | 1240 | } else { |
| | 1241 | /** |
| | 1242 | * Call `sync` directly on Backbone.Model |
| | 1243 | */ |
| | 1244 | return Backbone.Model.prototype.sync.apply( this, arguments ); |
| | 1245 | } |
| | 1246 | }, |
| | 1247 | /** |
| | 1248 | * Convert date strings into Date objects. |
| | 1249 | * |
| | 1250 | * @param {Object} resp The raw response object, typically returned by fetch() |
| | 1251 | * @returns {Object} The modified response object, which is the attributes hash |
| | 1252 | * to be set on the model. |
| | 1253 | */ |
| | 1254 | parse: function( resp ) { |
| | 1255 | if ( ! resp ) { |
| | 1256 | return resp; |
| | 1257 | } |
| | 1258 | |
| | 1259 | resp.date = new Date( resp.date ); |
| | 1260 | resp.modified = new Date( resp.modified ); |
| | 1261 | return resp; |
| | 1262 | }, |
| | 1263 | /** |
| | 1264 | * @param {Object} data The properties to be saved. |
| | 1265 | * @param {Object} options Sync options. e.g. patch, wait, success, error. |
| | 1266 | * |
| | 1267 | * @this Backbone.Model |
| | 1268 | * |
| | 1269 | * @returns {Promise} |
| | 1270 | */ |
| | 1271 | saveCompat: function( data, options ) { |
| | 1272 | var model = this; |
| | 1273 | |
| | 1274 | // If we do not have the necessary nonce, fail immeditately. |
| | 1275 | if ( ! this.get('nonces') || ! this.get('nonces').update ) { |
| | 1276 | return $.Deferred().rejectWith( this ).promise(); |
| | 1277 | } |
| | 1278 | |
| | 1279 | return media.post( 'save-attachment-compat', _.defaults({ |
| | 1280 | id: this.id, |
| | 1281 | nonce: this.get('nonces').update, |
| | 1282 | post_id: wp.media.model.settings.post.id |
| | 1283 | }, data ) ).done( function( resp, status, xhr ) { |
| | 1284 | model.set( model.parse( resp, xhr ), options ); |
| | 1285 | }); |
| | 1286 | } |
| | 1287 | }, { |
| | 1288 | /** |
| | 1289 | * Create a new model on the static 'all' attachments collection and return it. |
| | 1290 | * |
| | 1291 | * @static |
| | 1292 | * @param {Object} attrs |
| | 1293 | * @returns {wp.media.model.Attachment} |
| | 1294 | */ |
| | 1295 | create: function( attrs ) { |
| | 1296 | var Attachments = require( './attachments.js' ); |
| | 1297 | return Attachments.all.push( attrs ); |
| | 1298 | }, |
| | 1299 | /** |
| | 1300 | * Create a new model on the static 'all' attachments collection and return it. |
| | 1301 | * |
| | 1302 | * If this function has already been called for the id, |
| | 1303 | * it returns the specified attachment. |
| | 1304 | * |
| | 1305 | * @static |
| | 1306 | * @param {string} id A string used to identify a model. |
| | 1307 | * @param {Backbone.Model|undefined} attachment |
| | 1308 | * @returns {wp.media.model.Attachment} |
| | 1309 | */ |
| | 1310 | get: _.memoize( function( id, attachment ) { |
| | 1311 | var Attachments = require( './attachments.js' ); |
| | 1312 | return Attachments.all.push( attachment || { id: id } ); |
| | 1313 | }) |
| | 1314 | }); |
| | 1315 | |
| | 1316 | module.exports = Attachment; |
| | 1317 | },{"./attachments.js":10}],10:[function(require,module,exports){ |
| | 1318 | /** |
| | 1319 | * wp.media.model.Attachments |
| | 1320 | * |
| | 1321 | * A collection of attachments. |
| | 1322 | * |
| | 1323 | * This collection has no persistence with the server without supplying |
| | 1324 | * 'options.props.query = true', which will mirror the collection |
| | 1325 | * to an Attachments Query collection - @see wp.media.model.Attachments.mirror(). |
| | 1326 | * |
| | 1327 | * @class |
| | 1328 | * @augments Backbone.Collection |
| | 1329 | * |
| | 1330 | * @param {array} [models] Models to initialize with the collection. |
| | 1331 | * @param {object} [options] Options hash for the collection. |
| | 1332 | * @param {string} [options.props] Options hash for the initial query properties. |
| | 1333 | * @param {string} [options.props.order] Initial order (ASC or DESC) for the collection. |
| | 1334 | * @param {string} [options.props.orderby] Initial attribute key to order the collection by. |
| | 1335 | * @param {string} [options.props.query] Whether the collection is linked to an attachments query. |
| | 1336 | * @param {string} [options.observe] |
| | 1337 | * @param {string} [options.filters] |
| | 1338 | * |
| | 1339 | */ |
| | 1340 | var Attachment = require( './attachment.js' ), |
| | 1341 | Attachments; |
| | 1342 | |
| | 1343 | Attachments = Backbone.Collection.extend({ |
| | 1344 | /** |
| | 1345 | * @type {wp.media.model.Attachment} |
| | 1346 | */ |
| | 1347 | model: Attachment, |
| | 1348 | /** |
| | 1349 | * @param {Array} [models=[]] Array of models used to populate the collection. |
| | 1350 | * @param {Object} [options={}] |
| | 1351 | */ |
| | 1352 | initialize: function( models, options ) { |
| | 1353 | options = options || {}; |
| | 1354 | |
| | 1355 | this.props = new Backbone.Model(); |
| | 1356 | this.filters = options.filters || {}; |
| | 1357 | |
| | 1358 | // Bind default `change` events to the `props` model. |
| | 1359 | this.props.on( 'change', this._changeFilteredProps, this ); |
| | 1360 | |
| | 1361 | this.props.on( 'change:order', this._changeOrder, this ); |
| | 1362 | this.props.on( 'change:orderby', this._changeOrderby, this ); |
| | 1363 | this.props.on( 'change:query', this._changeQuery, this ); |
| | 1364 | |
| | 1365 | this.props.set( _.defaults( options.props || {} ) ); |
| | 1366 | |
| | 1367 | if ( options.observe ) { |
| | 1368 | this.observe( options.observe ); |
| | 1369 | } |
| | 1370 | }, |
| | 1371 | /** |
| | 1372 | * Sort the collection when the order attribute changes. |
| | 1373 | * |
| | 1374 | * @access private |
| | 1375 | */ |
| | 1376 | _changeOrder: function() { |
| | 1377 | if ( this.comparator ) { |
| | 1378 | this.sort(); |
| | 1379 | } |
| | 1380 | }, |
| | 1381 | /** |
| | 1382 | * Set the default comparator only when the `orderby` property is set. |
| | 1383 | * |
| | 1384 | * @access private |
| | 1385 | * |
| | 1386 | * @param {Backbone.Model} model |
| | 1387 | * @param {string} orderby |
| | 1388 | */ |
| | 1389 | _changeOrderby: function( model, orderby ) { |
| | 1390 | // If a different comparator is defined, bail. |
| | 1391 | if ( this.comparator && this.comparator !== Attachments.comparator ) { |
| | 1392 | return; |
| | 1393 | } |
| | 1394 | |
| | 1395 | if ( orderby && 'post__in' !== orderby ) { |
| | 1396 | this.comparator = Attachments.comparator; |
| | 1397 | } else { |
| | 1398 | delete this.comparator; |
| | 1399 | } |
| | 1400 | }, |
| | 1401 | /** |
| | 1402 | * If the `query` property is set to true, query the server using |
| | 1403 | * the `props` values, and sync the results to this collection. |
| | 1404 | * |
| | 1405 | * @access private |
| | 1406 | * |
| | 1407 | * @param {Backbone.Model} model |
| | 1408 | * @param {Boolean} query |
| | 1409 | */ |
| | 1410 | _changeQuery: function( model, query ) { |
| | 1411 | if ( query ) { |
| | 1412 | this.props.on( 'change', this._requery, this ); |
| | 1413 | this._requery(); |
| | 1414 | } else { |
| | 1415 | this.props.off( 'change', this._requery, this ); |
| | 1416 | } |
| | 1417 | }, |
| | 1418 | /** |
| | 1419 | * @access private |
| | 1420 | * |
| | 1421 | * @param {Backbone.Model} model |
| | 1422 | */ |
| | 1423 | _changeFilteredProps: function( model ) { |
| | 1424 | // If this is a query, updating the collection will be handled by |
| | 1425 | // `this._requery()`. |
| | 1426 | if ( this.props.get('query') ) { |
| | 1427 | return; |
| | 1428 | } |
| | 1429 | |
| | 1430 | var changed = _.chain( model.changed ).map( function( t, prop ) { |
| | 1431 | var filter = Attachments.filters[ prop ], |
| | 1432 | term = model.get( prop ); |
| | 1433 | |
| | 1434 | if ( ! filter ) { |
| | 1435 | return; |
| | 1436 | } |
| | 1437 | |
| | 1438 | if ( term && ! this.filters[ prop ] ) { |
| | 1439 | this.filters[ prop ] = filter; |
| | 1440 | } else if ( ! term && this.filters[ prop ] === filter ) { |
| | 1441 | delete this.filters[ prop ]; |
| | 1442 | } else { |
| | 1443 | return; |
| | 1444 | } |
| | 1445 | |
| | 1446 | // Record the change. |
| | 1447 | return true; |
| | 1448 | }, this ).any().value(); |
| | 1449 | |
| | 1450 | if ( ! changed ) { |
| | 1451 | return; |
| | 1452 | } |
| | 1453 | |
| | 1454 | // If no `Attachments` model is provided to source the searches |
| | 1455 | // from, then automatically generate a source from the existing |
| | 1456 | // models. |
| | 1457 | if ( ! this._source ) { |
| | 1458 | this._source = new Attachments( this.models ); |
| | 1459 | } |
| | 1460 | |
| | 1461 | this.reset( this._source.filter( this.validator, this ) ); |
| | 1462 | }, |
| | 1463 | |
| | 1464 | validateDestroyed: false, |
| | 1465 | /** |
| | 1466 | * Checks whether an attachment is valid. |
| | 1467 | * |
| | 1468 | * @param {wp.media.model.Attachment} attachment |
| | 1469 | * @returns {Boolean} |
| | 1470 | */ |
| | 1471 | validator: function( attachment ) { |
| | 1472 | if ( ! this.validateDestroyed && attachment.destroyed ) { |
| | 1473 | return false; |
| | 1474 | } |
| | 1475 | return _.all( this.filters, function( filter ) { |
| | 1476 | return !! filter.call( this, attachment ); |
| | 1477 | }, this ); |
| | 1478 | }, |
| | 1479 | /** |
| | 1480 | * Add or remove an attachment to the collection depending on its validity. |
| | 1481 | * |
| | 1482 | * @param {wp.media.model.Attachment} attachment |
| | 1483 | * @param {Object} options |
| | 1484 | * @returns {wp.media.model.Attachments} Returns itself to allow chaining |
| | 1485 | */ |
| | 1486 | validate: function( attachment, options ) { |
| | 1487 | var valid = this.validator( attachment ), |
| | 1488 | hasAttachment = !! this.get( attachment.cid ); |
| | 1489 | |
| | 1490 | if ( ! valid && hasAttachment ) { |
| | 1491 | this.remove( attachment, options ); |
| | 1492 | } else if ( valid && ! hasAttachment ) { |
| | 1493 | this.add( attachment, options ); |
| | 1494 | } |
| | 1495 | |
| | 1496 | return this; |
| | 1497 | }, |
| | 1498 | |
| | 1499 | /** |
| | 1500 | * Add or remove all attachments from another collection depending on each one's validity. |
| | 1501 | * |
| | 1502 | * @param {wp.media.model.Attachments} attachments |
| | 1503 | * @param {object} [options={}] |
| | 1504 | * |
| | 1505 | * @fires wp.media.model.Attachments#reset |
| | 1506 | * |
| | 1507 | * @returns {wp.media.model.Attachments} Returns itself to allow chaining |
| | 1508 | */ |
| | 1509 | validateAll: function( attachments, options ) { |
| | 1510 | options = options || {}; |
| | 1511 | |
| | 1512 | _.each( attachments.models, function( attachment ) { |
| | 1513 | this.validate( attachment, { silent: true }); |
| | 1514 | }, this ); |
| | 1515 | |
| | 1516 | if ( ! options.silent ) { |
| | 1517 | this.trigger( 'reset', this, options ); |
| | 1518 | } |
| | 1519 | return this; |
| | 1520 | }, |
| | 1521 | /** |
| | 1522 | * Start observing another attachments collection change events |
| | 1523 | * and replicate them on this collection. |
| | 1524 | * |
| | 1525 | * @param {wp.media.model.Attachments} The attachments collection to observe. |
| | 1526 | * @returns {wp.media.model.Attachments} Returns itself to allow chaining. |
| | 1527 | */ |
| | 1528 | observe: function( attachments ) { |
| | 1529 | this.observers = this.observers || []; |
| | 1530 | this.observers.push( attachments ); |
| | 1531 | |
| | 1532 | attachments.on( 'add change remove', this._validateHandler, this ); |
| | 1533 | attachments.on( 'reset', this._validateAllHandler, this ); |
| | 1534 | this.validateAll( attachments ); |
| | 1535 | return this; |
| | 1536 | }, |
| | 1537 | /** |
| | 1538 | * Stop replicating collection change events from another attachments collection. |
| | 1539 | * |
| | 1540 | * @param {wp.media.model.Attachments} The attachments collection to stop observing. |
| | 1541 | * @returns {wp.media.model.Attachments} Returns itself to allow chaining |
| | 1542 | */ |
| | 1543 | unobserve: function( attachments ) { |
| | 1544 | if ( attachments ) { |
| | 1545 | attachments.off( null, null, this ); |
| | 1546 | this.observers = _.without( this.observers, attachments ); |
| | 1547 | |
| | 1548 | } else { |
| | 1549 | _.each( this.observers, function( attachments ) { |
| | 1550 | attachments.off( null, null, this ); |
| | 1551 | }, this ); |
| | 1552 | delete this.observers; |
| | 1553 | } |
| | 1554 | |
| | 1555 | return this; |
| | 1556 | }, |
| | 1557 | /** |
| | 1558 | * @access private |
| | 1559 | * |
| | 1560 | * @param {wp.media.model.Attachments} attachment |
| | 1561 | * @param {wp.media.model.Attachments} attachments |
| | 1562 | * @param {Object} options |
| | 1563 | * |
| | 1564 | * @returns {wp.media.model.Attachments} Returns itself to allow chaining |
| | 1565 | */ |
| | 1566 | _validateHandler: function( attachment, attachments, options ) { |
| | 1567 | // If we're not mirroring this `attachments` collection, |
| | 1568 | // only retain the `silent` option. |
| | 1569 | options = attachments === this.mirroring ? options : { |
| | 1570 | silent: options && options.silent |
| | 1571 | }; |
| | 1572 | |
| | 1573 | return this.validate( attachment, options ); |
| | 1574 | }, |
| | 1575 | /** |
| | 1576 | * @access private |
| | 1577 | * |
| | 1578 | * @param {wp.media.model.Attachments} attachments |
| | 1579 | * @param {Object} options |
| | 1580 | * @returns {wp.media.model.Attachments} Returns itself to allow chaining |
| | 1581 | */ |
| | 1582 | _validateAllHandler: function( attachments, options ) { |
| | 1583 | return this.validateAll( attachments, options ); |
| | 1584 | }, |
| | 1585 | /** |
| | 1586 | * Start mirroring another attachments collection, clearing out any models already |
| | 1587 | * in the collection. |
| | 1588 | * |
| | 1589 | * @param {wp.media.model.Attachments} The attachments collection to mirror. |
| | 1590 | * @returns {wp.media.model.Attachments} Returns itself to allow chaining |
| | 1591 | */ |
| | 1592 | mirror: function( attachments ) { |
| | 1593 | if ( this.mirroring && this.mirroring === attachments ) { |
| | 1594 | return this; |
| | 1595 | } |
| | 1596 | |
| | 1597 | this.unmirror(); |
| | 1598 | this.mirroring = attachments; |
| | 1599 | |
| | 1600 | // Clear the collection silently. A `reset` event will be fired |
| | 1601 | // when `observe()` calls `validateAll()`. |
| | 1602 | this.reset( [], { silent: true } ); |
| | 1603 | this.observe( attachments ); |
| | 1604 | |
| | 1605 | return this; |
| | 1606 | }, |
| | 1607 | /** |
| | 1608 | * Stop mirroring another attachments collection. |
| | 1609 | */ |
| | 1610 | unmirror: function() { |
| | 1611 | if ( ! this.mirroring ) { |
| | 1612 | return; |
| | 1613 | } |
| | 1614 | |
| | 1615 | this.unobserve( this.mirroring ); |
| | 1616 | delete this.mirroring; |
| | 1617 | }, |
| | 1618 | /** |
| | 1619 | * Retrive more attachments from the server for the collection. |
| | 1620 | * |
| | 1621 | * Only works if the collection is mirroring a Query Attachments collection, |
| | 1622 | * and forwards to its `more` method. This collection class doesn't have |
| | 1623 | * server persistence by itself. |
| | 1624 | * |
| | 1625 | * @param {object} options |
| | 1626 | * @returns {Promise} |
| | 1627 | */ |
| | 1628 | more: function( options ) { |
| | 1629 | var deferred = jQuery.Deferred(), |
| | 1630 | mirroring = this.mirroring, |
| | 1631 | attachments = this; |
| | 1632 | |
| | 1633 | if ( ! mirroring || ! mirroring.more ) { |
| | 1634 | return deferred.resolveWith( this ).promise(); |
| | 1635 | } |
| | 1636 | // If we're mirroring another collection, forward `more` to |
| | 1637 | // the mirrored collection. Account for a race condition by |
| | 1638 | // checking if we're still mirroring that collection when |
| | 1639 | // the request resolves. |
| | 1640 | mirroring.more( options ).done( function() { |
| | 1641 | if ( this === attachments.mirroring ) |
| | 1642 | deferred.resolveWith( this ); |
| | 1643 | }); |
| | 1644 | |
| | 1645 | return deferred.promise(); |
| | 1646 | }, |
| | 1647 | /** |
| | 1648 | * Whether there are more attachments that haven't been sync'd from the server |
| | 1649 | * that match the collection's query. |
| | 1650 | * |
| | 1651 | * Only works if the collection is mirroring a Query Attachments collection, |
| | 1652 | * and forwards to its `hasMore` method. This collection class doesn't have |
| | 1653 | * server persistence by itself. |
| | 1654 | * |
| | 1655 | * @returns {boolean} |
| | 1656 | */ |
| | 1657 | hasMore: function() { |
| | 1658 | return this.mirroring ? this.mirroring.hasMore() : false; |
| | 1659 | }, |
| | 1660 | /** |
| | 1661 | * A custom AJAX-response parser. |
| | 1662 | * |
| | 1663 | * See trac ticket #24753 |
| | 1664 | * |
| | 1665 | * @param {Object|Array} resp The raw response Object/Array. |
| | 1666 | * @param {Object} xhr |
| | 1667 | * @returns {Array} The array of model attributes to be added to the collection |
| | 1668 | */ |
| | 1669 | parse: function( resp, xhr ) { |
| | 1670 | if ( ! _.isArray( resp ) ) { |
| | 1671 | resp = [resp]; |
| | 1672 | } |
| | 1673 | |
| | 1674 | return _.map( resp, function( attrs ) { |
| | 1675 | var id, attachment, newAttributes; |
| | 1676 | |
| | 1677 | if ( attrs instanceof Backbone.Model ) { |
| | 1678 | id = attrs.get( 'id' ); |
| | 1679 | attrs = attrs.attributes; |
| | 1680 | } else { |
| | 1681 | id = attrs.id; |
| | 1682 | } |
| | 1683 | |
| | 1684 | attachment = Attachment.get( id ); |
| | 1685 | newAttributes = attachment.parse( attrs, xhr ); |
| | 1686 | |
| | 1687 | if ( ! _.isEqual( attachment.attributes, newAttributes ) ) { |
| | 1688 | attachment.set( newAttributes ); |
| | 1689 | } |
| | 1690 | |
| | 1691 | return attachment; |
| | 1692 | }); |
| | 1693 | }, |
| | 1694 | /** |
| | 1695 | * If the collection is a query, create and mirror an Attachments Query collection. |
| | 1696 | * |
| | 1697 | * @access private |
| | 1698 | */ |
| | 1699 | _requery: function( refresh ) { |
| | 1700 | var props, Query; |
| | 1701 | if ( this.props.get('query') ) { |
| | 1702 | Query = require( './query.js' ); |
| | 1703 | props = this.props.toJSON(); |
| | 1704 | props.cache = ( true !== refresh ); |
| | 1705 | this.mirror( Query.get( props ) ); |
| | 1706 | } |
| | 1707 | }, |
| | 1708 | /** |
| | 1709 | * If this collection is sorted by `menuOrder`, recalculates and saves |
| | 1710 | * the menu order to the database. |
| | 1711 | * |
| | 1712 | * @returns {undefined|Promise} |
| | 1713 | */ |
| | 1714 | saveMenuOrder: function() { |
| | 1715 | if ( 'menuOrder' !== this.props.get('orderby') ) { |
| | 1716 | return; |
| | 1717 | } |
| | 1718 | |
| | 1719 | // Removes any uploading attachments, updates each attachment's |
| | 1720 | // menu order, and returns an object with an { id: menuOrder } |
| | 1721 | // mapping to pass to the request. |
| | 1722 | var attachments = this.chain().filter( function( attachment ) { |
| | 1723 | return ! _.isUndefined( attachment.id ); |
| | 1724 | }).map( function( attachment, index ) { |
| | 1725 | // Indices start at 1. |
| | 1726 | index = index + 1; |
| | 1727 | attachment.set( 'menuOrder', index ); |
| | 1728 | return [ attachment.id, index ]; |
| | 1729 | }).object().value(); |
| | 1730 | |
| | 1731 | if ( _.isEmpty( attachments ) ) { |
| | 1732 | return; |
| | 1733 | } |
| | 1734 | |
| | 1735 | return wp.media.post( 'save-attachment-order', { |
| | 1736 | nonce: wp.media.model.settings.post.nonce, |
| | 1737 | post_id: wp.media.model.settings.post.id, |
| | 1738 | attachments: attachments |
| | 1739 | }); |
| | 1740 | } |
| | 1741 | }, { |
| | 1742 | /** |
| | 1743 | * A function to compare two attachment models in an attachments collection. |
| | 1744 | * |
| | 1745 | * Used as the default comparator for instances of wp.media.model.Attachments |
| | 1746 | * and its subclasses. @see wp.media.model.Attachments._changeOrderby(). |
| | 1747 | * |
| | 1748 | * @static |
| | 1749 | * |
| | 1750 | * @param {Backbone.Model} a |
| | 1751 | * @param {Backbone.Model} b |
| | 1752 | * @param {Object} options |
| | 1753 | * @returns {Number} -1 if the first model should come before the second, |
| | 1754 | * 0 if they are of the same rank and |
| | 1755 | * 1 if the first model should come after. |
| | 1756 | */ |
| | 1757 | comparator: function( a, b, options ) { |
| | 1758 | var key = this.props.get('orderby'), |
| | 1759 | order = this.props.get('order') || 'DESC', |
| | 1760 | ac = a.cid, |
| | 1761 | bc = b.cid; |
| | 1762 | |
| | 1763 | a = a.get( key ); |
| | 1764 | b = b.get( key ); |
| | 1765 | |
| | 1766 | if ( 'date' === key || 'modified' === key ) { |
| | 1767 | a = a || new Date(); |
| | 1768 | b = b || new Date(); |
| | 1769 | } |
| | 1770 | |
| | 1771 | // If `options.ties` is set, don't enforce the `cid` tiebreaker. |
| | 1772 | if ( options && options.ties ) { |
| | 1773 | ac = bc = null; |
| | 1774 | } |
| | 1775 | |
| | 1776 | return ( 'DESC' === order ) ? wp.media.compare( a, b, ac, bc ) : wp.media.compare( b, a, bc, ac ); |
| | 1777 | }, |
| | 1778 | /** |
| | 1779 | * @namespace |
| | 1780 | */ |
| | 1781 | filters: { |
| | 1782 | /** |
| | 1783 | * @static |
| | 1784 | * Note that this client-side searching is *not* equivalent |
| | 1785 | * to our server-side searching. |
| | 1786 | * |
| | 1787 | * @param {wp.media.model.Attachment} attachment |
| | 1788 | * |
| | 1789 | * @this wp.media.model.Attachments |
| | 1790 | * |
| | 1791 | * @returns {Boolean} |
| | 1792 | */ |
| | 1793 | search: function( attachment ) { |
| | 1794 | if ( ! this.props.get('search') ) { |
| | 1795 | return true; |
| | 1796 | } |
| | 1797 | |
| | 1798 | return _.any(['title','filename','description','caption','name'], function( key ) { |
| | 1799 | var value = attachment.get( key ); |
| | 1800 | return value && -1 !== value.search( this.props.get('search') ); |
| | 1801 | }, this ); |
| | 1802 | }, |
| | 1803 | /** |
| | 1804 | * @static |
| | 1805 | * @param {wp.media.model.Attachment} attachment |
| | 1806 | * |
| | 1807 | * @this wp.media.model.Attachments |
| | 1808 | * |
| | 1809 | * @returns {Boolean} |
| | 1810 | */ |
| | 1811 | type: function( attachment ) { |
| | 1812 | var type = this.props.get('type'); |
| | 1813 | return ! type || -1 !== type.indexOf( attachment.get('type') ); |
| | 1814 | }, |
| | 1815 | /** |
| | 1816 | * @static |
| | 1817 | * @param {wp.media.model.Attachment} attachment |
| | 1818 | * |
| | 1819 | * @this wp.media.model.Attachments |
| | 1820 | * |
| | 1821 | * @returns {Boolean} |
| | 1822 | */ |
| | 1823 | uploadedTo: function( attachment ) { |
| | 1824 | var uploadedTo = this.props.get('uploadedTo'); |
| | 1825 | if ( _.isUndefined( uploadedTo ) ) { |
| | 1826 | return true; |
| | 1827 | } |
| | 1828 | |
| | 1829 | return uploadedTo === attachment.get('uploadedTo'); |
| | 1830 | }, |
| | 1831 | /** |
| | 1832 | * @static |
| | 1833 | * @param {wp.media.model.Attachment} attachment |
| | 1834 | * |
| | 1835 | * @this wp.media.model.Attachments |
| | 1836 | * |
| | 1837 | * @returns {Boolean} |
| | 1838 | */ |
| | 1839 | status: function( attachment ) { |
| | 1840 | var status = this.props.get('status'); |
| | 1841 | if ( _.isUndefined( status ) ) { |
| | 1842 | return true; |
| | 1843 | } |
| | 1844 | |
| | 1845 | return status === attachment.get('status'); |
| | 1846 | } |
| | 1847 | } |
| | 1848 | }); |
| | 1849 | |
| | 1850 | module.exports = Attachments; |
| | 1851 | },{"./attachment.js":9,"./query.js":12}],11:[function(require,module,exports){ |
| | 1852 | /** |
| | 1853 | * Shared model class for audio and video. Updates the model after |
| | 1854 | * "Add Audio|Video Source" and "Replace Audio|Video" states return |
| | 1855 | * |
| | 1856 | * @constructor |
| | 1857 | * @augments Backbone.Model |
| | 1858 | */ |
| | 1859 | var PostMedia = Backbone.Model.extend({ |
| | 1860 | initialize: function() { |
| | 1861 | this.attachment = false; |
| | 1862 | }, |
| | 1863 | |
| | 1864 | setSource: function( attachment ) { |
| | 1865 | this.attachment = attachment; |
| | 1866 | this.extension = attachment.get( 'filename' ).split('.').pop(); |
| | 1867 | |
| | 1868 | if ( this.get( 'src' ) && this.extension === this.get( 'src' ).split('.').pop() ) { |
| | 1869 | this.unset( 'src' ); |
| | 1870 | } |
| | 1871 | |
| | 1872 | if ( _.contains( wp.media.view.settings.embedExts, this.extension ) ) { |
| | 1873 | this.set( this.extension, this.attachment.get( 'url' ) ); |
| | 1874 | } else { |
| | 1875 | this.unset( this.extension ); |
| | 1876 | } |
| | 1877 | }, |
| | 1878 | |
| | 1879 | changeAttachment: function( attachment ) { |
| | 1880 | var self = this; |
| | 1881 | |
| | 1882 | this.setSource( attachment ); |
| | 1883 | |
| | 1884 | this.unset( 'src' ); |
| | 1885 | _.each( _.without( wp.media.view.settings.embedExts, this.extension ), function( ext ) { |
| | 1886 | self.unset( ext ); |
| | 1887 | } ); |
| | 1888 | } |
| | 1889 | }); |
| | 1890 | |
| | 1891 | module.exports = PostMedia; |
| | 1892 | },{}],12:[function(require,module,exports){ |
| | 1893 | /** |
| | 1894 | * wp.media.model.Query |
| | 1895 | * |
| | 1896 | * A collection of attachments that match the supplied query arguments. |
| | 1897 | * |
| | 1898 | * Note: Do NOT change this.args after the query has been initialized. |
| | 1899 | * Things will break. |
| | 1900 | * |
| | 1901 | * @class |
| | 1902 | * @augments wp.media.model.Attachments |
| | 1903 | * @augments Backbone.Collection |
| | 1904 | * |
| | 1905 | * @param {array} [models] Models to initialize with the collection. |
| | 1906 | * @param {object} [options] Options hash. |
| | 1907 | * @param {object} [options.args] Attachments query arguments. |
| | 1908 | * @param {object} [options.args.posts_per_page] |
| | 1909 | */ |
| | 1910 | var Attachments = require( './attachments.js' ), |
| | 1911 | Query; |
| | 1912 | |
| | 1913 | Query = Attachments.extend({ |
| | 1914 | /** |
| | 1915 | * @global wp.Uploader |
| | 1916 | * |
| | 1917 | * @param {array} [models=[]] Array of initial models to populate the collection. |
| | 1918 | * @param {object} [options={}] |
| | 1919 | */ |
| | 1920 | initialize: function( models, options ) { |
| | 1921 | var allowed; |
| | 1922 | |
| | 1923 | options = options || {}; |
| | 1924 | Attachments.prototype.initialize.apply( this, arguments ); |
| | 1925 | |
| | 1926 | this.args = options.args; |
| | 1927 | this._hasMore = true; |
| | 1928 | this.created = new Date(); |
| | 1929 | |
| | 1930 | this.filters.order = function( attachment ) { |
| | 1931 | var orderby = this.props.get('orderby'), |
| | 1932 | order = this.props.get('order'); |
| | 1933 | |
| | 1934 | if ( ! this.comparator ) { |
| | 1935 | return true; |
| | 1936 | } |
| | 1937 | |
| | 1938 | // We want any items that can be placed before the last |
| | 1939 | // item in the set. If we add any items after the last |
| | 1940 | // item, then we can't guarantee the set is complete. |
| | 1941 | if ( this.length ) { |
| | 1942 | return 1 !== this.comparator( attachment, this.last(), { ties: true }); |
| | 1943 | |
| | 1944 | // Handle the case where there are no items yet and |
| | 1945 | // we're sorting for recent items. In that case, we want |
| | 1946 | // changes that occurred after we created the query. |
| | 1947 | } else if ( 'DESC' === order && ( 'date' === orderby || 'modified' === orderby ) ) { |
| | 1948 | return attachment.get( orderby ) >= this.created; |
| | 1949 | |
| | 1950 | // If we're sorting by menu order and we have no items, |
| | 1951 | // accept any items that have the default menu order (0). |
| | 1952 | } else if ( 'ASC' === order && 'menuOrder' === orderby ) { |
| | 1953 | return attachment.get( orderby ) === 0; |
| | 1954 | } |
| | 1955 | |
| | 1956 | // Otherwise, we don't want any items yet. |
| | 1957 | return false; |
| | 1958 | }; |
| | 1959 | |
| | 1960 | // Observe the central `wp.Uploader.queue` collection to watch for |
| | 1961 | // new matches for the query. |
| | 1962 | // |
| | 1963 | // Only observe when a limited number of query args are set. There |
| | 1964 | // are no filters for other properties, so observing will result in |
| | 1965 | // false positives in those queries. |
| | 1966 | allowed = [ 's', 'order', 'orderby', 'posts_per_page', 'post_mime_type', 'post_parent' ]; |
| | 1967 | if ( wp.Uploader && _( this.args ).chain().keys().difference( allowed ).isEmpty().value() ) { |
| | 1968 | this.observe( wp.Uploader.queue ); |
| | 1969 | } |
| | 1970 | }, |
| | 1971 | /** |
| | 1972 | * Whether there are more attachments that haven't been sync'd from the server |
| | 1973 | * that match the collection's query. |
| | 1974 | * |
| | 1975 | * @returns {boolean} |
| | 1976 | */ |
| | 1977 | hasMore: function() { |
| | 1978 | return this._hasMore; |
| | 1979 | }, |
| | 1980 | /** |
| | 1981 | * Fetch more attachments from the server for the collection. |
| | 1982 | * |
| | 1983 | * @param {object} [options={}] |
| | 1984 | * @returns {Promise} |
| | 1985 | */ |
| | 1986 | more: function( options ) { |
| | 1987 | var query = this; |
| | 1988 | |
| | 1989 | // If there is already a request pending, return early with the Deferred object. |
| | 1990 | if ( this._more && 'pending' === this._more.state() ) { |
| | 1991 | return this._more; |
| | 1992 | } |
| | 1993 | |
| | 1994 | if ( ! this.hasMore() ) { |
| | 1995 | return jQuery.Deferred().resolveWith( this ).promise(); |
| | 1996 | } |
| | 1997 | |
| | 1998 | options = options || {}; |
| | 1999 | options.remove = false; |
| | 2000 | |
| | 2001 | return this._more = this.fetch( options ).done( function( resp ) { |
| | 2002 | if ( _.isEmpty( resp ) || -1 === this.args.posts_per_page || resp.length < this.args.posts_per_page ) { |
| | 2003 | query._hasMore = false; |
| | 2004 | } |
| | 2005 | }); |
| | 2006 | }, |
| | 2007 | /** |
| | 2008 | * Overrides Backbone.Collection.sync |
| | 2009 | * Overrides wp.media.model.Attachments.sync |
| | 2010 | * |
| | 2011 | * @param {String} method |
| | 2012 | * @param {Backbone.Model} model |
| | 2013 | * @param {Object} [options={}] |
| | 2014 | * @returns {Promise} |
| | 2015 | */ |
| | 2016 | sync: function( method, model, options ) { |
| | 2017 | var args, fallback; |
| | 2018 | |
| | 2019 | // Overload the read method so Attachment.fetch() functions correctly. |
| | 2020 | if ( 'read' === method ) { |
| | 2021 | options = options || {}; |
| | 2022 | options.context = this; |
| | 2023 | options.data = _.extend( options.data || {}, { |
| | 2024 | action: 'query-attachments', |
| | 2025 | post_id: wp.media.model.settings.post.id |
| | 2026 | }); |
| | 2027 | |
| | 2028 | // Clone the args so manipulation is non-destructive. |
| | 2029 | args = _.clone( this.args ); |
| | 2030 | |
| | 2031 | // Determine which page to query. |
| | 2032 | if ( -1 !== args.posts_per_page ) { |
| | 2033 | args.paged = Math.floor( this.length / args.posts_per_page ) + 1; |
| | 2034 | } |
| | 2035 | |
| | 2036 | options.data.query = args; |
| | 2037 | return wp.media.ajax( options ); |
| | 2038 | |
| | 2039 | // Otherwise, fall back to Backbone.sync() |
| | 2040 | } else { |
| | 2041 | /** |
| | 2042 | * Call wp.media.model.Attachments.sync or Backbone.sync |
| | 2043 | */ |
| | 2044 | fallback = Attachments.prototype.sync ? Attachments.prototype : Backbone; |
| | 2045 | return fallback.sync.apply( this, arguments ); |
| | 2046 | } |
| | 2047 | } |
| | 2048 | }, { |
| | 2049 | /** |
| | 2050 | * @readonly |
| | 2051 | */ |
| | 2052 | defaultProps: { |
| | 2053 | orderby: 'date', |
| | 2054 | order: 'DESC' |
| | 2055 | }, |
| | 2056 | /** |
| | 2057 | * @readonly |
| | 2058 | */ |
| | 2059 | defaultArgs: { |
| | 2060 | posts_per_page: 40 |
| | 2061 | }, |
| | 2062 | /** |
| | 2063 | * @readonly |
| | 2064 | */ |
| | 2065 | orderby: { |
| | 2066 | allowed: [ 'name', 'author', 'date', 'title', 'modified', 'uploadedTo', 'id', 'post__in', 'menuOrder' ], |
| | 2067 | /** |
| | 2068 | * A map of JavaScript orderby values to their WP_Query equivalents. |
| | 2069 | * @type {Object} |
| | 2070 | */ |
| | 2071 | valuemap: { |
| | 2072 | 'id': 'ID', |
| | 2073 | 'uploadedTo': 'parent', |
| | 2074 | 'menuOrder': 'menu_order ID' |
| | 2075 | } |
| | 2076 | }, |
| | 2077 | /** |
| | 2078 | * A map of JavaScript query properties to their WP_Query equivalents. |
| | 2079 | * |
| | 2080 | * @readonly |
| | 2081 | */ |
| | 2082 | propmap: { |
| | 2083 | 'search': 's', |
| | 2084 | 'type': 'post_mime_type', |
| | 2085 | 'perPage': 'posts_per_page', |
| | 2086 | 'menuOrder': 'menu_order', |
| | 2087 | 'uploadedTo': 'post_parent', |
| | 2088 | 'status': 'post_status', |
| | 2089 | 'include': 'post__in', |
| | 2090 | 'exclude': 'post__not_in' |
| | 2091 | }, |
| | 2092 | /** |
| | 2093 | * Creates and returns an Attachments Query collection given the properties. |
| | 2094 | * |
| | 2095 | * Caches query objects and reuses where possible. |
| | 2096 | * |
| | 2097 | * @static |
| | 2098 | * @method |
| | 2099 | * |
| | 2100 | * @param {object} [props] |
| | 2101 | * @param {Object} [props.cache=true] Whether to use the query cache or not. |
| | 2102 | * @param {Object} [props.order] |
| | 2103 | * @param {Object} [props.orderby] |
| | 2104 | * @param {Object} [props.include] |
| | 2105 | * @param {Object} [props.exclude] |
| | 2106 | * @param {Object} [props.s] |
| | 2107 | * @param {Object} [props.post_mime_type] |
| | 2108 | * @param {Object} [props.posts_per_page] |
| | 2109 | * @param {Object} [props.menu_order] |
| | 2110 | * @param {Object} [props.post_parent] |
| | 2111 | * @param {Object} [props.post_status] |
| | 2112 | * @param {Object} [options] |
| | 2113 | * |
| | 2114 | * @returns {wp.media.model.Query} A new Attachments Query collection. |
| | 2115 | */ |
| | 2116 | get: (function(){ |
| | 2117 | /** |
| | 2118 | * @static |
| | 2119 | * @type Array |
| | 2120 | */ |
| | 2121 | var queries = []; |
| | 2122 | |
| | 2123 | /** |
| | 2124 | * @returns {Query} |
| | 2125 | */ |
| | 2126 | return function( props, options ) { |
| | 2127 | var args = {}, |
| | 2128 | orderby = Query.orderby, |
| | 2129 | defaults = Query.defaultProps, |
| | 2130 | query, |
| | 2131 | cache = !! props.cache || _.isUndefined( props.cache ); |
| | 2132 | |
| | 2133 | // Remove the `query` property. This isn't linked to a query, |
| | 2134 | // this *is* the query. |
| | 2135 | delete props.query; |
| | 2136 | delete props.cache; |
| | 2137 | |
| | 2138 | // Fill default args. |
| | 2139 | _.defaults( props, defaults ); |
| | 2140 | |
| | 2141 | // Normalize the order. |
| | 2142 | props.order = props.order.toUpperCase(); |
| | 2143 | if ( 'DESC' !== props.order && 'ASC' !== props.order ) { |
| | 2144 | props.order = defaults.order.toUpperCase(); |
| | 2145 | } |
| | 2146 | |
| | 2147 | // Ensure we have a valid orderby value. |
| | 2148 | if ( ! _.contains( orderby.allowed, props.orderby ) ) { |
| | 2149 | props.orderby = defaults.orderby; |
| | 2150 | } |
| | 2151 | |
| | 2152 | _.each( [ 'include', 'exclude' ], function( prop ) { |
| | 2153 | if ( props[ prop ] && ! _.isArray( props[ prop ] ) ) { |
| | 2154 | props[ prop ] = [ props[ prop ] ]; |
| | 2155 | } |
| | 2156 | } ); |
| | 2157 | |
| | 2158 | // Generate the query `args` object. |
| | 2159 | // Correct any differing property names. |
| | 2160 | _.each( props, function( value, prop ) { |
| | 2161 | if ( _.isNull( value ) ) { |
| | 2162 | return; |
| | 2163 | } |
| | 2164 | |
| | 2165 | args[ Query.propmap[ prop ] || prop ] = value; |
| | 2166 | }); |
| | 2167 | |
| | 2168 | // Fill any other default query args. |
| | 2169 | _.defaults( args, Query.defaultArgs ); |
| | 2170 | |
| | 2171 | // `props.orderby` does not always map directly to `args.orderby`. |
| | 2172 | // Substitute exceptions specified in orderby.keymap. |
| | 2173 | args.orderby = orderby.valuemap[ props.orderby ] || props.orderby; |
| | 2174 | |
| | 2175 | // Search the query cache for a matching query. |
| | 2176 | if ( cache ) { |
| | 2177 | query = _.find( queries, function( query ) { |
| | 2178 | return _.isEqual( query.args, args ); |
| | 2179 | }); |
| | 2180 | } else { |
| | 2181 | queries = []; |
| | 2182 | } |
| | 2183 | |
| | 2184 | // Otherwise, create a new query and add it to the cache. |
| | 2185 | if ( ! query ) { |
| | 2186 | query = new Query( [], _.extend( options || {}, { |
| | 2187 | props: props, |
| | 2188 | args: args |
| | 2189 | } ) ); |
| | 2190 | queries.push( query ); |
| | 2191 | } |
| | 2192 | |
| | 2193 | return query; |
| | 2194 | }; |
| | 2195 | }()) |
| | 2196 | }); |
| | 2197 | |
| | 2198 | module.exports = Query; |
| | 2199 | },{"./attachments.js":10}],13:[function(require,module,exports){ |
| | 2200 | /** |
| | 2201 | * wp.media.model.Selection |
| | 2202 | * |
| | 2203 | * A selection of attachments. |
| | 2204 | * |
| | 2205 | * @class |
| | 2206 | * @augments wp.media.model.Attachments |
| | 2207 | * @augments Backbone.Collection |
| | 2208 | */ |
| | 2209 | var Attachments = require( './attachments.js' ), |
| | 2210 | Selection; |
| | 2211 | |
| | 2212 | Selection = Attachments.extend({ |
| | 2213 | /** |
| | 2214 | * Refresh the `single` model whenever the selection changes. |
| | 2215 | * Binds `single` instead of using the context argument to ensure |
| | 2216 | * it receives no parameters. |
| | 2217 | * |
| | 2218 | * @param {Array} [models=[]] Array of models used to populate the collection. |
| | 2219 | * @param {Object} [options={}] |
| | 2220 | */ |
| | 2221 | initialize: function( models, options ) { |
| | 2222 | /** |
| | 2223 | * call 'initialize' directly on the parent class |
| | 2224 | */ |
| | 2225 | Attachments.prototype.initialize.apply( this, arguments ); |
| | 2226 | this.multiple = options && options.multiple; |
| | 2227 | |
| | 2228 | this.on( 'add remove reset', _.bind( this.single, this, false ) ); |
| | 2229 | }, |
| | 2230 | |
| | 2231 | /** |
| | 2232 | * If the workflow does not support multi-select, clear out the selection |
| | 2233 | * before adding a new attachment to it. |
| | 2234 | * |
| | 2235 | * @param {Array} models |
| | 2236 | * @param {Object} options |
| | 2237 | * @returns {wp.media.model.Attachment[]} |
| | 2238 | */ |
| | 2239 | add: function( models, options ) { |
| | 2240 | if ( ! this.multiple ) { |
| | 2241 | this.remove( this.models ); |
| | 2242 | } |
| | 2243 | /** |
| | 2244 | * call 'add' directly on the parent class |
| | 2245 | */ |
| | 2246 | return Attachments.prototype.add.call( this, models, options ); |
| | 2247 | }, |
| | 2248 | |
| | 2249 | /** |
| | 2250 | * Fired when toggling (clicking on) an attachment in the modal. |
| | 2251 | * |
| | 2252 | * @param {undefined|boolean|wp.media.model.Attachment} model |
| | 2253 | * |
| | 2254 | * @fires wp.media.model.Selection#selection:single |
| | 2255 | * @fires wp.media.model.Selection#selection:unsingle |
| | 2256 | * |
| | 2257 | * @returns {Backbone.Model} |
| | 2258 | */ |
| | 2259 | single: function( model ) { |
| | 2260 | var previous = this._single; |
| | 2261 | |
| | 2262 | // If a `model` is provided, use it as the single model. |
| | 2263 | if ( model ) { |
| | 2264 | this._single = model; |
| | 2265 | } |
| | 2266 | // If the single model isn't in the selection, remove it. |
| | 2267 | if ( this._single && ! this.get( this._single.cid ) ) { |
| | 2268 | delete this._single; |
| | 2269 | } |
| | 2270 | |
| | 2271 | this._single = this._single || this.last(); |
| | 2272 | |
| | 2273 | // If single has changed, fire an event. |
| | 2274 | if ( this._single !== previous ) { |
| | 2275 | if ( previous ) { |
| | 2276 | previous.trigger( 'selection:unsingle', previous, this ); |
| | 2277 | |
| | 2278 | // If the model was already removed, trigger the collection |
| | 2279 | // event manually. |
| | 2280 | if ( ! this.get( previous.cid ) ) { |
| | 2281 | this.trigger( 'selection:unsingle', previous, this ); |
| | 2282 | } |
| | 2283 | } |
| | 2284 | if ( this._single ) { |
| | 2285 | this._single.trigger( 'selection:single', this._single, this ); |
| | 2286 | } |
| | 2287 | } |
| | 2288 | |
| | 2289 | // Return the single model, or the last model as a fallback. |
| | 2290 | return this._single; |
| | 2291 | } |
| | 2292 | }); |
| | 2293 | |
| | 2294 | module.exports = Selection; |
| | 2295 | },{"./attachments.js":10}],14:[function(require,module,exports){ |
| | 2296 | /** |
| | 2297 | * wp.media.selectionSync |
| | 2298 | * |
| | 2299 | * Sync an attachments selection in a state with another state. |
| | 2300 | * |
| | 2301 | * Allows for selecting multiple images in the Insert Media workflow, and then |
| | 2302 | * switching to the Insert Gallery workflow while preserving the attachments selection. |
| | 2303 | * |
| | 2304 | * @mixin |
| | 2305 | */ |
| | 2306 | var selectionSync = { |
| | 2307 | /** |
| | 2308 | * @since 3.5.0 |
| | 2309 | */ |
| | 2310 | syncSelection: function() { |
| | 2311 | var selection = this.get('selection'), |
| | 2312 | manager = this.frame._selection; |
| | 2313 | |
| | 2314 | if ( ! this.get('syncSelection') || ! manager || ! selection ) { |
| | 2315 | return; |
| | 2316 | } |
| | 2317 | |
| | 2318 | // If the selection supports multiple items, validate the stored |
| | 2319 | // attachments based on the new selection's conditions. Record |
| | 2320 | // the attachments that are not included; we'll maintain a |
| | 2321 | // reference to those. Other attachments are considered in flux. |
| | 2322 | if ( selection.multiple ) { |
| | 2323 | selection.reset( [], { silent: true }); |
| | 2324 | selection.validateAll( manager.attachments ); |
| | 2325 | manager.difference = _.difference( manager.attachments.models, selection.models ); |
| | 2326 | } |
| | 2327 | |
| | 2328 | // Sync the selection's single item with the master. |
| | 2329 | selection.single( manager.single ); |
| | 2330 | }, |
| | 2331 | |
| | 2332 | /** |
| | 2333 | * Record the currently active attachments, which is a combination |
| | 2334 | * of the selection's attachments and the set of selected |
| | 2335 | * attachments that this specific selection considered invalid. |
| | 2336 | * Reset the difference and record the single attachment. |
| | 2337 | * |
| | 2338 | * @since 3.5.0 |
| | 2339 | */ |
| | 2340 | recordSelection: function() { |
| | 2341 | var selection = this.get('selection'), |
| | 2342 | manager = this.frame._selection; |
| | 2343 | |
| | 2344 | if ( ! this.get('syncSelection') || ! manager || ! selection ) { |
| | 2345 | return; |
| | 2346 | } |
| | 2347 | |
| | 2348 | if ( selection.multiple ) { |
| | 2349 | manager.attachments.reset( selection.toArray().concat( manager.difference ) ); |
| | 2350 | manager.difference = []; |
| | 2351 | } else { |
| | 2352 | manager.attachments.add( selection.toArray() ); |
| | 2353 | } |
| | 2354 | |
| | 2355 | manager.single = selection._single; |
| | 2356 | } |
| | 2357 | }; |
| | 2358 | |
| | 2359 | module.exports = selectionSync; |
| | 2360 | },{}],15:[function(require,module,exports){ |
| | 2361 | /** |
| | 2362 | * wp.media.view.AttachmentCompat |
| | 2363 | * |
| | 2364 | * A view to display fields added via the `attachment_fields_to_edit` filter. |
| | 2365 | * |
| | 2366 | * @class |
| | 2367 | * @augments wp.media.View |
| | 2368 | * @augments wp.Backbone.View |
| | 2369 | * @augments Backbone.View |
| | 2370 | */ |
| | 2371 | var View = require( './view.js' ), |
| | 2372 | AttachmentCompat; |
| | 2373 | |
| | 2374 | AttachmentCompat = View.extend({ |
| | 2375 | tagName: 'form', |
| | 2376 | className: 'compat-item', |
| | 2377 | |
| | 2378 | events: { |
| | 2379 | 'submit': 'preventDefault', |
| | 2380 | 'change input': 'save', |
| | 2381 | 'change select': 'save', |
| | 2382 | 'change textarea': 'save' |
| | 2383 | }, |
| | 2384 | |
| | 2385 | initialize: function() { |
| | 2386 | this.model.on( 'change:compat', this.render, this ); |
| | 2387 | }, |
| | 2388 | /** |
| | 2389 | * @returns {wp.media.view.AttachmentCompat} Returns itself to allow chaining |
| | 2390 | */ |
| | 2391 | dispose: function() { |
| | 2392 | if ( this.$(':focus').length ) { |
| | 2393 | this.save(); |
| | 2394 | } |
| | 2395 | /** |
| | 2396 | * call 'dispose' directly on the parent class |
| | 2397 | */ |
| | 2398 | return View.prototype.dispose.apply( this, arguments ); |
| | 2399 | }, |
| | 2400 | /** |
| | 2401 | * @returns {wp.media.view.AttachmentCompat} Returns itself to allow chaining |
| | 2402 | */ |
| | 2403 | render: function() { |
| | 2404 | var compat = this.model.get('compat'); |
| | 2405 | if ( ! compat || ! compat.item ) { |
| | 2406 | return; |
| | 2407 | } |
| | 2408 | |
| | 2409 | this.views.detach(); |
| | 2410 | this.$el.html( compat.item ); |
| | 2411 | this.views.render(); |
| | 2412 | return this; |
| | 2413 | }, |
| | 2414 | /** |
| | 2415 | * @param {Object} event |
| | 2416 | */ |
| | 2417 | preventDefault: function( event ) { |
| | 2418 | event.preventDefault(); |
| | 2419 | }, |
| | 2420 | /** |
| | 2421 | * @param {Object} event |
| | 2422 | */ |
| | 2423 | save: function( event ) { |
| | 2424 | var data = {}; |
| | 2425 | |
| | 2426 | if ( event ) { |
| | 2427 | event.preventDefault(); |
| | 2428 | } |
| | 2429 | |
| | 2430 | _.each( this.$el.serializeArray(), function( pair ) { |
| | 2431 | data[ pair.name ] = pair.value; |
| | 2432 | }); |
| | 2433 | |
| | 2434 | this.controller.trigger( 'attachment:compat:waiting', ['waiting'] ); |
| | 2435 | this.model.saveCompat( data ).always( _.bind( this.postSave, this ) ); |
| | 2436 | }, |
| | 2437 | |
| | 2438 | postSave: function() { |
| | 2439 | this.controller.trigger( 'attachment:compat:ready', ['ready'] ); |
| | 2440 | } |
| | 2441 | }); |
| | 2442 | |
| | 2443 | module.exports = AttachmentCompat; |
| | 2444 | },{"./view.js":55}],16:[function(require,module,exports){ |
| | 2445 | /** |
| | 2446 | * wp.media.view.AttachmentFilters |
| | 2447 | * |
| | 2448 | * @class |
| | 2449 | * @augments wp.media.View |
| | 2450 | * @augments wp.Backbone.View |
| | 2451 | * @augments Backbone.View |
| | 2452 | */ |
| | 2453 | var View = require( './view.js' ), |
| | 2454 | $ = jQuery, |
| | 2455 | AttachmentFilters; |
| | 2456 | |
| | 2457 | AttachmentFilters = View.extend({ |
| | 2458 | tagName: 'select', |
| | 2459 | className: 'attachment-filters', |
| | 2460 | id: 'media-attachment-filters', |
| | 2461 | |
| | 2462 | events: { |
| | 2463 | change: 'change' |
| | 2464 | }, |
| | 2465 | |
| | 2466 | keys: [], |
| | 2467 | |
| | 2468 | initialize: function() { |
| | 2469 | this.createFilters(); |
| | 2470 | _.extend( this.filters, this.options.filters ); |
| | 2471 | |
| | 2472 | // Build `<option>` elements. |
| | 2473 | this.$el.html( _.chain( this.filters ).map( function( filter, value ) { |
| | 2474 | return { |
| | 2475 | el: $( '<option></option>' ).val( value ).html( filter.text )[0], |
| | 2476 | priority: filter.priority || 50 |
| | 2477 | }; |
| | 2478 | }, this ).sortBy('priority').pluck('el').value() ); |
| | 2479 | |
| | 2480 | this.model.on( 'change', this.select, this ); |
| | 2481 | this.select(); |
| | 2482 | }, |
| | 2483 | |
| | 2484 | /** |
| | 2485 | * @abstract |
| | 2486 | */ |
| | 2487 | createFilters: function() { |
| | 2488 | this.filters = {}; |
| | 2489 | }, |
| | 2490 | |
| | 2491 | /** |
| | 2492 | * When the selected filter changes, update the Attachment Query properties to match. |
| | 2493 | */ |
| | 2494 | change: function() { |
| | 2495 | var filter = this.filters[ this.el.value ]; |
| | 2496 | if ( filter ) { |
| | 2497 | this.model.set( filter.props ); |
| | 2498 | } |
| | 2499 | }, |
| | 2500 | |
| | 2501 | select: function() { |
| | 2502 | var model = this.model, |
| | 2503 | value = 'all', |
| | 2504 | props = model.toJSON(); |
| | 2505 | |
| | 2506 | _.find( this.filters, function( filter, id ) { |
| | 2507 | var equal = _.all( filter.props, function( prop, key ) { |
| | 2508 | return prop === ( _.isUndefined( props[ key ] ) ? null : props[ key ] ); |
| | 2509 | }); |
| | 2510 | |
| | 2511 | if ( equal ) { |
| | 2512 | return value = id; |
| | 2513 | } |
| | 2514 | }); |
| | 2515 | |
| | 2516 | this.$el.val( value ); |
| | 2517 | } |
| | 2518 | }); |
| | 2519 | |
| | 2520 | module.exports = AttachmentFilters; |
| | 2521 | },{"./view.js":55}],17:[function(require,module,exports){ |
| | 2522 | /** |
| | 2523 | * wp.media.view.AttachmentFilters.All |
| | 2524 | * |
| | 2525 | * @class |
| | 2526 | * @augments wp.media.view.AttachmentFilters |
| | 2527 | * @augments wp.media.View |
| | 2528 | * @augments wp.Backbone.View |
| | 2529 | * @augments Backbone.View |
| | 2530 | */ |
| | 2531 | var AttachmentFilters = require( '../attachment-filters.js' ), |
| | 2532 | l10n = wp.media.view.l10n, |
| | 2533 | All; |
| | 2534 | |
| | 2535 | All = AttachmentFilters.extend({ |
| | 2536 | createFilters: function() { |
| | 2537 | var filters = {}; |
| | 2538 | |
| | 2539 | _.each( wp.media.view.settings.mimeTypes || {}, function( text, key ) { |
| | 2540 | filters[ key ] = { |
| | 2541 | text: text, |
| | 2542 | props: { |
| | 2543 | status: null, |
| | 2544 | type: key, |
| | 2545 | uploadedTo: null, |
| | 2546 | orderby: 'date', |
| | 2547 | order: 'DESC' |
| | 2548 | } |
| | 2549 | }; |
| | 2550 | }); |
| | 2551 | |
| | 2552 | filters.all = { |
| | 2553 | text: l10n.allMediaItems, |
| | 2554 | props: { |
| | 2555 | status: null, |
| | 2556 | type: null, |
| | 2557 | uploadedTo: null, |
| | 2558 | orderby: 'date', |
| | 2559 | order: 'DESC' |
| | 2560 | }, |
| | 2561 | priority: 10 |
| | 2562 | }; |
| | 2563 | |
| | 2564 | if ( wp.media.view.settings.post.id ) { |
| | 2565 | filters.uploaded = { |
| | 2566 | text: l10n.uploadedToThisPost, |
| | 2567 | props: { |
| | 2568 | status: null, |
| | 2569 | type: null, |
| | 2570 | uploadedTo: wp.media.view.settings.post.id, |
| | 2571 | orderby: 'menuOrder', |
| | 2572 | order: 'ASC' |
| | 2573 | }, |
| | 2574 | priority: 20 |
| | 2575 | }; |
| | 2576 | } |
| | 2577 | |
| | 2578 | filters.unattached = { |
| | 2579 | text: l10n.unattached, |
| | 2580 | props: { |
| | 2581 | status: null, |
| | 2582 | uploadedTo: 0, |
| | 2583 | type: null, |
| | 2584 | orderby: 'menuOrder', |
| | 2585 | order: 'ASC' |
| | 2586 | }, |
| | 2587 | priority: 50 |
| | 2588 | }; |
| | 2589 | |
| | 2590 | if ( wp.media.view.settings.mediaTrash && |
| | 2591 | this.controller.isModeActive( 'grid' ) ) { |
| | 2592 | |
| | 2593 | filters.trash = { |
| | 2594 | text: l10n.trash, |
| | 2595 | props: { |
| | 2596 | uploadedTo: null, |
| | 2597 | status: 'trash', |
| | 2598 | type: null, |
| | 2599 | orderby: 'date', |
| | 2600 | order: 'DESC' |
| | 2601 | }, |
| | 2602 | priority: 50 |
| | 2603 | }; |
| | 2604 | } |
| | 2605 | |
| | 2606 | this.filters = filters; |
| | 2607 | } |
| | 2608 | }); |
| | 2609 | |
| | 2610 | module.exports = All; |
| | 2611 | },{"../attachment-filters.js":16}],18:[function(require,module,exports){ |
| | 2612 | /** |
| | 2613 | * A filter dropdown for month/dates. |
| | 2614 | * |
| | 2615 | * @class |
| | 2616 | * @augments wp.media.view.AttachmentFilters |
| | 2617 | * @augments wp.media.View |
| | 2618 | * @augments wp.Backbone.View |
| | 2619 | * @augments Backbone.View |
| | 2620 | */ |
| | 2621 | var AttachmentFilters = require( '../attachment-filters.js' ), |
| | 2622 | l10n = wp.media.view.l10n, |
| | 2623 | DateFilter; |
| | 2624 | |
| | 2625 | DateFilter = AttachmentFilters.extend({ |
| | 2626 | id: 'media-attachment-date-filters', |
| | 2627 | |
| | 2628 | createFilters: function() { |
| | 2629 | var filters = {}; |
| | 2630 | _.each( wp.media.view.settings.months || {}, function( value, index ) { |
| | 2631 | filters[ index ] = { |
| | 2632 | text: value.text, |
| | 2633 | props: { |
| | 2634 | year: value.year, |
| | 2635 | monthnum: value.month |
| | 2636 | } |
| | 2637 | }; |
| | 2638 | }); |
| | 2639 | filters.all = { |
| | 2640 | text: l10n.allDates, |
| | 2641 | props: { |
| | 2642 | monthnum: false, |
| | 2643 | year: false |
| | 2644 | }, |
| | 2645 | priority: 10 |
| | 2646 | }; |
| | 2647 | this.filters = filters; |
| | 2648 | } |
| | 2649 | }); |
| | 2650 | |
| | 2651 | module.exports = DateFilter; |
| | 2652 | },{"../attachment-filters.js":16}],19:[function(require,module,exports){ |
| | 2653 | /** |
| | 2654 | * wp.media.view.AttachmentFilters.Uploaded |
| | 2655 | * |
| | 2656 | * @class |
| | 2657 | * @augments wp.media.view.AttachmentFilters |
| | 2658 | * @augments wp.media.View |
| | 2659 | * @augments wp.Backbone.View |
| | 2660 | * @augments Backbone.View |
| | 2661 | */ |
| | 2662 | var AttachmentFilters = require( '../attachment-filters.js' ), |
| | 2663 | l10n = wp.media.view.l10n, |
| | 2664 | Uploaded; |
| | 2665 | |
| | 2666 | Uploaded = AttachmentFilters.extend({ |
| | 2667 | createFilters: function() { |
| | 2668 | var type = this.model.get('type'), |
| | 2669 | types = wp.media.view.settings.mimeTypes, |
| | 2670 | text; |
| | 2671 | |
| | 2672 | if ( types && type ) { |
| | 2673 | text = types[ type ]; |
| | 2674 | } |
| | 2675 | |
| | 2676 | this.filters = { |
| | 2677 | all: { |
| | 2678 | text: text || l10n.allMediaItems, |
| | 2679 | props: { |
| | 2680 | uploadedTo: null, |
| | 2681 | orderby: 'date', |
| | 2682 | order: 'DESC' |
| | 2683 | }, |
| | 2684 | priority: 10 |
| | 2685 | }, |
| | 2686 | |
| | 2687 | uploaded: { |
| | 2688 | text: l10n.uploadedToThisPost, |
| | 2689 | props: { |
| | 2690 | uploadedTo: wp.media.view.settings.post.id, |
| | 2691 | orderby: 'menuOrder', |
| | 2692 | order: 'ASC' |
| | 2693 | }, |
| | 2694 | priority: 20 |
| | 2695 | }, |
| | 2696 | |
| | 2697 | unattached: { |
| | 2698 | text: l10n.unattached, |
| | 2699 | props: { |
| | 2700 | uploadedTo: 0, |
| | 2701 | orderby: 'menuOrder', |
| | 2702 | order: 'ASC' |
| | 2703 | }, |
| | 2704 | priority: 50 |
| | 2705 | } |
| | 2706 | }; |
| | 2707 | } |
| | 2708 | }); |
| | 2709 | |
| | 2710 | module.exports = Uploaded; |
| | 2711 | },{"../attachment-filters.js":16}],20:[function(require,module,exports){ |
| | 2712 | /** |
| | 2713 | * wp.media.view.Attachment |
| | 2714 | * |
| | 2715 | * @class |
| | 2716 | * @augments wp.media.View |
| | 2717 | * @augments wp.Backbone.View |
| | 2718 | * @augments Backbone.View |
| | 2719 | */ |
| | 2720 | var View = require( './view.js' ), |
| | 2721 | $ = jQuery, |
| | 2722 | Attachment; |
| | 2723 | |
| | 2724 | Attachment = View.extend({ |
| | 2725 | tagName: 'li', |
| | 2726 | className: 'attachment', |
| | 2727 | template: wp.template('attachment'), |
| | 2728 | |
| | 2729 | attributes: function() { |
| | 2730 | return { |
| | 2731 | 'tabIndex': 0, |
| | 2732 | 'role': 'checkbox', |
| | 2733 | 'aria-label': this.model.get( 'title' ), |
| | 2734 | 'aria-checked': false, |
| | 2735 | 'data-id': this.model.get( 'id' ) |
| | 2736 | }; |
| | 2737 | }, |
| | 2738 | |
| | 2739 | events: { |
| | 2740 | 'click .js--select-attachment': 'toggleSelectionHandler', |
| | 2741 | 'change [data-setting]': 'updateSetting', |
| | 2742 | 'change [data-setting] input': 'updateSetting', |
| | 2743 | 'change [data-setting] select': 'updateSetting', |
| | 2744 | 'change [data-setting] textarea': 'updateSetting', |
| | 2745 | 'click .close': 'removeFromLibrary', |
| | 2746 | 'click .check': 'checkClickHandler', |
| | 2747 | 'click a': 'preventDefault', |
| | 2748 | 'keydown .close': 'removeFromLibrary', |
| | 2749 | 'keydown': 'toggleSelectionHandler' |
| | 2750 | }, |
| | 2751 | |
| | 2752 | buttons: {}, |
| | 2753 | |
| | 2754 | initialize: function() { |
| | 2755 | var selection = this.options.selection, |
| | 2756 | options = _.defaults( this.options, { |
| | 2757 | rerenderOnModelChange: true |
| | 2758 | } ); |
| | 2759 | |
| | 2760 | if ( options.rerenderOnModelChange ) { |
| | 2761 | this.model.on( 'change', this.render, this ); |
| | 2762 | } else { |
| | 2763 | this.model.on( 'change:percent', this.progress, this ); |
| | 2764 | } |
| | 2765 | this.model.on( 'change:title', this._syncTitle, this ); |
| | 2766 | this.model.on( 'change:caption', this._syncCaption, this ); |
| | 2767 | this.model.on( 'change:artist', this._syncArtist, this ); |
| | 2768 | this.model.on( 'change:album', this._syncAlbum, this ); |
| | 2769 | |
| | 2770 | // Update the selection. |
| | 2771 | this.model.on( 'add', this.select, this ); |
| | 2772 | this.model.on( 'remove', this.deselect, this ); |
| | 2773 | if ( selection ) { |
| | 2774 | selection.on( 'reset', this.updateSelect, this ); |
| | 2775 | // Update the model's details view. |
| | 2776 | this.model.on( 'selection:single selection:unsingle', this.details, this ); |
| | 2777 | this.details( this.model, this.controller.state().get('selection') ); |
| | 2778 | } |
| | 2779 | |
| | 2780 | this.listenTo( this.controller, 'attachment:compat:waiting attachment:compat:ready', this.updateSave ); |
| | 2781 | }, |
| | 2782 | /** |
| | 2783 | * @returns {wp.media.view.Attachment} Returns itself to allow chaining |
| | 2784 | */ |
| | 2785 | dispose: function() { |
| | 2786 | var selection = this.options.selection; |
| | 2787 | |
| | 2788 | // Make sure all settings are saved before removing the view. |
| | 2789 | this.updateAll(); |
| | 2790 | |
| | 2791 | if ( selection ) { |
| | 2792 | selection.off( null, null, this ); |
| | 2793 | } |
| | 2794 | /** |
| | 2795 | * call 'dispose' directly on the parent class |
| | 2796 | */ |
| | 2797 | View.prototype.dispose.apply( this, arguments ); |
| | 2798 | return this; |
| | 2799 | }, |
| | 2800 | /** |
| | 2801 | * @returns {wp.media.view.Attachment} Returns itself to allow chaining |
| | 2802 | */ |
| | 2803 | render: function() { |
| | 2804 | var options = _.defaults( this.model.toJSON(), { |
| | 2805 | orientation: 'landscape', |
| | 2806 | uploading: false, |
| | 2807 | type: '', |
| | 2808 | subtype: '', |
| | 2809 | icon: '', |
| | 2810 | filename: '', |
| | 2811 | caption: '', |
| | 2812 | title: '', |
| | 2813 | dateFormatted: '', |
| | 2814 | width: '', |
| | 2815 | height: '', |
| | 2816 | compat: false, |
| | 2817 | alt: '', |
| | 2818 | description: '' |
| | 2819 | }, this.options ); |
| | 2820 | |
| | 2821 | options.buttons = this.buttons; |
| | 2822 | options.describe = this.controller.state().get('describe'); |
| | 2823 | |
| | 2824 | if ( 'image' === options.type ) { |
| | 2825 | options.size = this.imageSize(); |
| | 2826 | } |
| | 2827 | |
| | 2828 | options.can = {}; |
| | 2829 | if ( options.nonces ) { |
| | 2830 | options.can.remove = !! options.nonces['delete']; |
| | 2831 | options.can.save = !! options.nonces.update; |
| | 2832 | } |
| | 2833 | |
| | 2834 | if ( this.controller.state().get('allowLocalEdits') ) { |
| | 2835 | options.allowLocalEdits = true; |
| | 2836 | } |
| | 2837 | |
| | 2838 | if ( options.uploading && ! options.percent ) { |
| | 2839 | options.percent = 0; |
| | 2840 | } |
| | 2841 | |
| | 2842 | this.views.detach(); |
| | 2843 | this.$el.html( this.template( options ) ); |
| | 2844 | |
| | 2845 | this.$el.toggleClass( 'uploading', options.uploading ); |
| | 2846 | |
| | 2847 | if ( options.uploading ) { |
| | 2848 | this.$bar = this.$('.media-progress-bar div'); |
| | 2849 | } else { |
| | 2850 | delete this.$bar; |
| | 2851 | } |
| | 2852 | |
| | 2853 | // Check if the model is selected. |
| | 2854 | this.updateSelect(); |
| | 2855 | |
| | 2856 | // Update the save status. |
| | 2857 | this.updateSave(); |
| | 2858 | |
| | 2859 | this.views.render(); |
| | 2860 | |
| | 2861 | return this; |
| | 2862 | }, |
| | 2863 | |
| | 2864 | progress: function() { |
| | 2865 | if ( this.$bar && this.$bar.length ) { |
| | 2866 | this.$bar.width( this.model.get('percent') + '%' ); |
| | 2867 | } |
| | 2868 | }, |
| | 2869 | |
| | 2870 | /** |
| | 2871 | * @param {Object} event |
| | 2872 | */ |
| | 2873 | toggleSelectionHandler: function( event ) { |
| | 2874 | var method; |
| | 2875 | |
| | 2876 | // Don't do anything inside inputs. |
| | 2877 | if ( 'INPUT' === event.target.nodeName ) { |
| | 2878 | return; |
| | 2879 | } |
| | 2880 | |
| | 2881 | // Catch arrow events |
| | 2882 | if ( 37 === event.keyCode || 38 === event.keyCode || 39 === event.keyCode || 40 === event.keyCode ) { |
| | 2883 | this.controller.trigger( 'attachment:keydown:arrow', event ); |
| | 2884 | return; |
| | 2885 | } |
| | 2886 | |
| | 2887 | // Catch enter and space events |
| | 2888 | if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) { |
| | 2889 | return; |
| | 2890 | } |
| | 2891 | |
| | 2892 | event.preventDefault(); |
| | 2893 | |
| | 2894 | // In the grid view, bubble up an edit:attachment event to the controller. |
| | 2895 | if ( this.controller.isModeActive( 'grid' ) ) { |
| | 2896 | if ( this.controller.isModeActive( 'edit' ) ) { |
| | 2897 | // Pass the current target to restore focus when closing |
| | 2898 | this.controller.trigger( 'edit:attachment', this.model, event.currentTarget ); |
| | 2899 | return; |
| | 2900 | } |
| | 2901 | |
| | 2902 | if ( this.controller.isModeActive( 'select' ) ) { |
| | 2903 | method = 'toggle'; |
| | 2904 | } |
| | 2905 | } |
| | 2906 | |
| | 2907 | if ( event.shiftKey ) { |
| | 2908 | method = 'between'; |
| | 2909 | } else if ( event.ctrlKey || event.metaKey ) { |
| | 2910 | method = 'toggle'; |
| | 2911 | } |
| | 2912 | |
| | 2913 | this.toggleSelection({ |
| | 2914 | method: method |
| | 2915 | }); |
| | 2916 | |
| | 2917 | this.controller.trigger( 'selection:toggle' ); |
| | 2918 | }, |
| | 2919 | /** |
| | 2920 | * @param {Object} options |
| | 2921 | */ |
| | 2922 | toggleSelection: function( options ) { |
| | 2923 | var collection = this.collection, |
| | 2924 | selection = this.options.selection, |
| | 2925 | model = this.model, |
| | 2926 | method = options && options.method, |
| | 2927 | single, models, singleIndex, modelIndex; |
| | 2928 | |
| | 2929 | if ( ! selection ) { |
| | 2930 | return; |
| | 2931 | } |
| | 2932 | |
| | 2933 | single = selection.single(); |
| | 2934 | method = _.isUndefined( method ) ? selection.multiple : method; |
| | 2935 | |
| | 2936 | // If the `method` is set to `between`, select all models that |
| | 2937 | // exist between the current and the selected model. |
| | 2938 | if ( 'between' === method && single && selection.multiple ) { |
| | 2939 | // If the models are the same, short-circuit. |
| | 2940 | if ( single === model ) { |
| | 2941 | return; |
| | 2942 | } |
| | 2943 | |
| | 2944 | singleIndex = collection.indexOf( single ); |
| | 2945 | modelIndex = collection.indexOf( this.model ); |
| | 2946 | |
| | 2947 | if ( singleIndex < modelIndex ) { |
| | 2948 | models = collection.models.slice( singleIndex, modelIndex + 1 ); |
| | 2949 | } else { |
| | 2950 | models = collection.models.slice( modelIndex, singleIndex + 1 ); |
| | 2951 | } |
| | 2952 | |
| | 2953 | selection.add( models ); |
| | 2954 | selection.single( model ); |
| | 2955 | return; |
| | 2956 | |
| | 2957 | // If the `method` is set to `toggle`, just flip the selection |
| | 2958 | // status, regardless of whether the model is the single model. |
| | 2959 | } else if ( 'toggle' === method ) { |
| | 2960 | selection[ this.selected() ? 'remove' : 'add' ]( model ); |
| | 2961 | selection.single( model ); |
| | 2962 | return; |
| | 2963 | } else if ( 'add' === method ) { |
| | 2964 | selection.add( model ); |
| | 2965 | selection.single( model ); |
| | 2966 | return; |
| | 2967 | } |
| | 2968 | |
| | 2969 | // Fixes bug that loses focus when selecting a featured image |
| | 2970 | if ( ! method ) { |
| | 2971 | method = 'add'; |
| | 2972 | } |
| | 2973 | |
| | 2974 | if ( method !== 'add' ) { |
| | 2975 | method = 'reset'; |
| | 2976 | } |
| | 2977 | |
| | 2978 | if ( this.selected() ) { |
| | 2979 | // If the model is the single model, remove it. |
| | 2980 | // If it is not the same as the single model, |
| | 2981 | // it now becomes the single model. |
| | 2982 | selection[ single === model ? 'remove' : 'single' ]( model ); |
| | 2983 | } else { |
| | 2984 | // If the model is not selected, run the `method` on the |
| | 2985 | // selection. By default, we `reset` the selection, but the |
| | 2986 | // `method` can be set to `add` the model to the selection. |
| | 2987 | selection[ method ]( model ); |
| | 2988 | selection.single( model ); |
| | 2989 | } |
| | 2990 | }, |
| | 2991 | |
| | 2992 | updateSelect: function() { |
| | 2993 | this[ this.selected() ? 'select' : 'deselect' ](); |
| | 2994 | }, |
| | 2995 | /** |
| | 2996 | * @returns {unresolved|Boolean} |
| | 2997 | */ |
| | 2998 | selected: function() { |
| | 2999 | var selection = this.options.selection; |
| | 3000 | if ( selection ) { |
| | 3001 | return !! selection.get( this.model.cid ); |
| | 3002 | } |
| | 3003 | }, |
| | 3004 | /** |
| | 3005 | * @param {Backbone.Model} model |
| | 3006 | * @param {Backbone.Collection} collection |
| | 3007 | */ |
| | 3008 | select: function( model, collection ) { |
| | 3009 | var selection = this.options.selection, |
| | 3010 | controller = this.controller; |
| | 3011 | |
| | 3012 | // Check if a selection exists and if it's the collection provided. |
| | 3013 | // If they're not the same collection, bail; we're in another |
| | 3014 | // selection's event loop. |
| | 3015 | if ( ! selection || ( collection && collection !== selection ) ) { |
| | 3016 | return; |
| | 3017 | } |
| | 3018 | |
| | 3019 | // Bail if the model is already selected. |
| | 3020 | if ( this.$el.hasClass( 'selected' ) ) { |
| | 3021 | return; |
| | 3022 | } |
| | 3023 | |
| | 3024 | // Add 'selected' class to model, set aria-checked to true. |
| | 3025 | this.$el.addClass( 'selected' ).attr( 'aria-checked', true ); |
| | 3026 | // Make the checkbox tabable, except in media grid (bulk select mode). |
| | 3027 | if ( ! ( controller.isModeActive( 'grid' ) && controller.isModeActive( 'select' ) ) ) { |
| | 3028 | this.$( '.check' ).attr( 'tabindex', '0' ); |
| | 3029 | } |
| | 3030 | }, |
| | 3031 | /** |
| | 3032 | * @param {Backbone.Model} model |
| | 3033 | * @param {Backbone.Collection} collection |
| | 3034 | */ |
| | 3035 | deselect: function( model, collection ) { |
| | 3036 | var selection = this.options.selection; |
| | 3037 | |
| | 3038 | // Check if a selection exists and if it's the collection provided. |
| | 3039 | // If they're not the same collection, bail; we're in another |
| | 3040 | // selection's event loop. |
| | 3041 | if ( ! selection || ( collection && collection !== selection ) ) { |
| | 3042 | return; |
| | 3043 | } |
| | 3044 | this.$el.removeClass( 'selected' ).attr( 'aria-checked', false ) |
| | 3045 | .find( '.check' ).attr( 'tabindex', '-1' ); |
| | 3046 | }, |
| | 3047 | /** |
| | 3048 | * @param {Backbone.Model} model |
| | 3049 | * @param {Backbone.Collection} collection |
| | 3050 | */ |
| | 3051 | details: function( model, collection ) { |
| | 3052 | var selection = this.options.selection, |
| | 3053 | details; |
| | 3054 | |
| | 3055 | if ( selection !== collection ) { |
| | 3056 | return; |
| | 3057 | } |
| | 3058 | |
| | 3059 | details = selection.single(); |
| | 3060 | this.$el.toggleClass( 'details', details === this.model ); |
| | 3061 | }, |
| | 3062 | /** |
| | 3063 | * @param {Object} event |
| | 3064 | */ |
| | 3065 | preventDefault: function( event ) { |
| | 3066 | event.preventDefault(); |
| | 3067 | }, |
| | 3068 | /** |
| | 3069 | * @param {string} size |
| | 3070 | * @returns {Object} |
| | 3071 | */ |
| | 3072 | imageSize: function( size ) { |
| | 3073 | var sizes = this.model.get('sizes'); |
| | 3074 | |
| | 3075 | size = size || 'medium'; |
| | 3076 | |
| | 3077 | // Use the provided image size if possible. |
| | 3078 | if ( sizes && sizes[ size ] ) { |
| | 3079 | return _.clone( sizes[ size ] ); |
| | 3080 | } else { |
| | 3081 | return { |
| | 3082 | url: this.model.get('url'), |
| | 3083 | width: this.model.get('width'), |
| | 3084 | height: this.model.get('height'), |
| | 3085 | orientation: this.model.get('orientation') |
| | 3086 | }; |
| | 3087 | } |
| | 3088 | }, |
| | 3089 | /** |
| | 3090 | * @param {Object} event |
| | 3091 | */ |
| | 3092 | updateSetting: function( event ) { |
| | 3093 | var $setting = $( event.target ).closest('[data-setting]'), |
| | 3094 | setting, value; |
| | 3095 | |
| | 3096 | if ( ! $setting.length ) { |
| | 3097 | return; |
| | 3098 | } |
| | 3099 | |
| | 3100 | setting = $setting.data('setting'); |
| | 3101 | value = event.target.value; |
| | 3102 | |
| | 3103 | if ( this.model.get( setting ) !== value ) { |
| | 3104 | this.save( setting, value ); |
| | 3105 | } |
| | 3106 | }, |
| | 3107 | |
| | 3108 | /** |
| | 3109 | * Pass all the arguments to the model's save method. |
| | 3110 | * |
| | 3111 | * Records the aggregate status of all save requests and updates the |
| | 3112 | * view's classes accordingly. |
| | 3113 | */ |
| | 3114 | save: function() { |
| | 3115 | var view = this, |
| | 3116 | save = this._save = this._save || { status: 'ready' }, |
| | 3117 | request = this.model.save.apply( this.model, arguments ), |
| | 3118 | requests = save.requests ? $.when( request, save.requests ) : request; |
| | 3119 | |
| | 3120 | // If we're waiting to remove 'Saved.', stop. |
| | 3121 | if ( save.savedTimer ) { |
| | 3122 | clearTimeout( save.savedTimer ); |
| | 3123 | } |
| | 3124 | |
| | 3125 | this.updateSave('waiting'); |
| | 3126 | save.requests = requests; |
| | 3127 | requests.always( function() { |
| | 3128 | // If we've performed another request since this one, bail. |
| | 3129 | if ( save.requests !== requests ) { |
| | 3130 | return; |
| | 3131 | } |
| | 3132 | |
| | 3133 | view.updateSave( requests.state() === 'resolved' ? 'complete' : 'error' ); |
| | 3134 | save.savedTimer = setTimeout( function() { |
| | 3135 | view.updateSave('ready'); |
| | 3136 | delete save.savedTimer; |
| | 3137 | }, 2000 ); |
| | 3138 | }); |
| | 3139 | }, |
| | 3140 | /** |
| | 3141 | * @param {string} status |
| | 3142 | * @returns {wp.media.view.Attachment} Returns itself to allow chaining |
| | 3143 | */ |
| | 3144 | updateSave: function( status ) { |
| | 3145 | var save = this._save = this._save || { status: 'ready' }; |
| | 3146 | |
| | 3147 | if ( status && status !== save.status ) { |
| | 3148 | this.$el.removeClass( 'save-' + save.status ); |
| | 3149 | save.status = status; |
| | 3150 | } |
| | 3151 | |
| | 3152 | this.$el.addClass( 'save-' + save.status ); |
| | 3153 | return this; |
| | 3154 | }, |
| | 3155 | |
| | 3156 | updateAll: function() { |
| | 3157 | var $settings = this.$('[data-setting]'), |
| | 3158 | model = this.model, |
| | 3159 | changed; |
| | 3160 | |
| | 3161 | changed = _.chain( $settings ).map( function( el ) { |
| | 3162 | var $input = $('input, textarea, select, [value]', el ), |
| | 3163 | setting, value; |
| | 3164 | |
| | 3165 | if ( ! $input.length ) { |
| | 3166 | return; |
| | 3167 | } |
| | 3168 | |
| | 3169 | setting = $(el).data('setting'); |
| | 3170 | value = $input.val(); |
| | 3171 | |
| | 3172 | // Record the value if it changed. |
| | 3173 | if ( model.get( setting ) !== value ) { |
| | 3174 | return [ setting, value ]; |
| | 3175 | } |
| | 3176 | }).compact().object().value(); |
| | 3177 | |
| | 3178 | if ( ! _.isEmpty( changed ) ) { |
| | 3179 | model.save( changed ); |
| | 3180 | } |
| | 3181 | }, |
| | 3182 | /** |
| | 3183 | * @param {Object} event |
| | 3184 | */ |
| | 3185 | removeFromLibrary: function( event ) { |
| | 3186 | // Catch enter and space events |
| | 3187 | if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) { |
| | 3188 | return; |
| | 3189 | } |
| | 3190 | |
| | 3191 | // Stop propagation so the model isn't selected. |
| | 3192 | event.stopPropagation(); |
| | 3193 | |
| | 3194 | this.collection.remove( this.model ); |
| | 3195 | }, |
| | 3196 | |
| | 3197 | /** |
| | 3198 | * Add the model if it isn't in the selection, if it is in the selection, |
| | 3199 | * remove it. |
| | 3200 | * |
| | 3201 | * @param {[type]} event [description] |
| | 3202 | * @return {[type]} [description] |
| | 3203 | */ |
| | 3204 | checkClickHandler: function ( event ) { |
| | 3205 | var selection = this.options.selection; |
| | 3206 | if ( ! selection ) { |
| | 3207 | return; |
| | 3208 | } |
| | 3209 | event.stopPropagation(); |
| | 3210 | if ( selection.where( { id: this.model.get( 'id' ) } ).length ) { |
| | 3211 | selection.remove( this.model ); |
| | 3212 | // Move focus back to the attachment tile (from the check). |
| | 3213 | this.$el.focus(); |
| | 3214 | } else { |
| | 3215 | selection.add( this.model ); |
| | 3216 | } |
| | 3217 | } |
| | 3218 | }); |
| | 3219 | |
| | 3220 | // Ensure settings remain in sync between attachment views. |
| | 3221 | _.each({ |
| | 3222 | caption: '_syncCaption', |
| | 3223 | title: '_syncTitle', |
| | 3224 | artist: '_syncArtist', |
| | 3225 | album: '_syncAlbum' |
| | 3226 | }, function( method, setting ) { |
| | 3227 | /** |
| | 3228 | * @param {Backbone.Model} model |
| | 3229 | * @param {string} value |
| | 3230 | * @returns {wp.media.view.Attachment} Returns itself to allow chaining |
| | 3231 | */ |
| | 3232 | Attachment.prototype[ method ] = function( model, value ) { |
| | 3233 | var $setting = this.$('[data-setting="' + setting + '"]'); |
| | 3234 | |
| | 3235 | if ( ! $setting.length ) { |
| | 3236 | return this; |
| | 3237 | } |
| | 3238 | |
| | 3239 | // If the updated value is in sync with the value in the DOM, there |
| | 3240 | // is no need to re-render. If we're currently editing the value, |
| | 3241 | // it will automatically be in sync, suppressing the re-render for |
| | 3242 | // the view we're editing, while updating any others. |
| | 3243 | if ( value === $setting.find('input, textarea, select, [value]').val() ) { |
| | 3244 | return this; |
| | 3245 | } |
| | 3246 | |
| | 3247 | return this.render(); |
| | 3248 | }; |
| | 3249 | }); |
| | 3250 | |
| | 3251 | module.exports = Attachment; |
| | 3252 | },{"./view.js":55}],21:[function(require,module,exports){ |
| | 3253 | /** |
| | 3254 | * wp.media.view.Attachment.Details |
| | 3255 | * |
| | 3256 | * @class |
| | 3257 | * @augments wp.media.view.Attachment |
| | 3258 | * @augments wp.media.View |
| | 3259 | * @augments wp.Backbone.View |
| | 3260 | * @augments Backbone.View |
| | 3261 | */ |
| | 3262 | var Attachment = require( '../attachment.js' ), |
| | 3263 | l10n = wp.media.view.l10n, |
| | 3264 | Details; |
| | 3265 | |
| | 3266 | Details = Attachment.extend({ |
| | 3267 | tagName: 'div', |
| | 3268 | className: 'attachment-details', |
| | 3269 | template: wp.template('attachment-details'), |
| | 3270 | |
| | 3271 | attributes: function() { |
| | 3272 | return { |
| | 3273 | 'tabIndex': 0, |
| | 3274 | 'data-id': this.model.get( 'id' ) |
| | 3275 | }; |
| | 3276 | }, |
| | 3277 | |
| | 3278 | events: { |
| | 3279 | 'change [data-setting]': 'updateSetting', |
| | 3280 | 'change [data-setting] input': 'updateSetting', |
| | 3281 | 'change [data-setting] select': 'updateSetting', |
| | 3282 | 'change [data-setting] textarea': 'updateSetting', |
| | 3283 | 'click .delete-attachment': 'deleteAttachment', |
| | 3284 | 'click .trash-attachment': 'trashAttachment', |
| | 3285 | 'click .untrash-attachment': 'untrashAttachment', |
| | 3286 | 'click .edit-attachment': 'editAttachment', |
| | 3287 | 'click .refresh-attachment': 'refreshAttachment', |
| | 3288 | 'keydown': 'toggleSelectionHandler' |
| | 3289 | }, |
| | 3290 | |
| | 3291 | initialize: function() { |
| | 3292 | this.options = _.defaults( this.options, { |
| | 3293 | rerenderOnModelChange: false |
| | 3294 | }); |
| | 3295 | |
| | 3296 | this.on( 'ready', this.initialFocus ); |
| | 3297 | // Call 'initialize' directly on the parent class. |
| | 3298 | Attachment.prototype.initialize.apply( this, arguments ); |
| | 3299 | }, |
| | 3300 | |
| | 3301 | initialFocus: function() { |
| | 3302 | if ( ! wp.media.isTouchDevice ) { |
| | 3303 | this.$( ':input' ).eq( 0 ).focus(); |
| | 3304 | } |
| | 3305 | }, |
| | 3306 | /** |
| | 3307 | * @param {Object} event |
| | 3308 | */ |
| | 3309 | deleteAttachment: function( event ) { |
| | 3310 | event.preventDefault(); |
| | 3311 | |
| | 3312 | if ( confirm( l10n.warnDelete ) ) { |
| | 3313 | this.model.destroy(); |
| | 3314 | // Keep focus inside media modal |
| | 3315 | // after image is deleted |
| | 3316 | this.controller.modal.focusManager.focus(); |
| | 3317 | } |
| | 3318 | }, |
| | 3319 | /** |
| | 3320 | * @param {Object} event |
| | 3321 | */ |
| | 3322 | trashAttachment: function( event ) { |
| | 3323 | var library = this.controller.library; |
| | 3324 | event.preventDefault(); |
| | 3325 | |
| | 3326 | if ( wp.media.view.settings.mediaTrash && |
| | 3327 | 'edit-metadata' === this.controller.content.mode() ) { |
| | 3328 | |
| | 3329 | this.model.set( 'status', 'trash' ); |
| | 3330 | this.model.save().done( function() { |
| | 3331 | library._requery( true ); |
| | 3332 | } ); |
| | 3333 | } else { |
| | 3334 | this.model.destroy(); |
| | 3335 | } |
| | 3336 | }, |
| | 3337 | /** |
| | 3338 | * @param {Object} event |
| | 3339 | */ |
| | 3340 | untrashAttachment: function( event ) { |
| | 3341 | var library = this.controller.library; |
| | 3342 | event.preventDefault(); |
| | 3343 | |
| | 3344 | this.model.set( 'status', 'inherit' ); |
| | 3345 | this.model.save().done( function() { |
| | 3346 | library._requery( true ); |
| | 3347 | } ); |
| | 3348 | }, |
| | 3349 | /** |
| | 3350 | * @param {Object} event |
| | 3351 | */ |
| | 3352 | editAttachment: function( event ) { |
| | 3353 | var editState = this.controller.states.get( 'edit-image' ); |
| | 3354 | if ( window.imageEdit && editState ) { |
| | 3355 | event.preventDefault(); |
| | 3356 | |
| | 3357 | editState.set( 'image', this.model ); |
| | 3358 | this.controller.setState( 'edit-image' ); |
| | 3359 | } else { |
| | 3360 | this.$el.addClass('needs-refresh'); |
| | 3361 | } |
| | 3362 | }, |
| | 3363 | /** |
| | 3364 | * @param {Object} event |
| | 3365 | */ |
| | 3366 | refreshAttachment: function( event ) { |
| | 3367 | this.$el.removeClass('needs-refresh'); |
| | 3368 | event.preventDefault(); |
| | 3369 | this.model.fetch(); |
| | 3370 | }, |
| | 3371 | /** |
| | 3372 | * When reverse tabbing(shift+tab) out of the right details panel, deliver |
| | 3373 | * the focus to the item in the list that was being edited. |
| | 3374 | * |
| | 3375 | * @param {Object} event |
| | 3376 | */ |
| | 3377 | toggleSelectionHandler: function( event ) { |
| | 3378 | if ( 'keydown' === event.type && 9 === event.keyCode && event.shiftKey && event.target === this.$( ':tabbable' ).get( 0 ) ) { |
| | 3379 | this.controller.trigger( 'attachment:details:shift-tab', event ); |
| | 3380 | return false; |
| | 3381 | } |
| | 3382 | |
| | 3383 | if ( 37 === event.keyCode || 38 === event.keyCode || 39 === event.keyCode || 40 === event.keyCode ) { |
| | 3384 | this.controller.trigger( 'attachment:keydown:arrow', event ); |
| | 3385 | return; |
| | 3386 | } |
| | 3387 | } |
| | 3388 | }); |
| | 3389 | |
| | 3390 | module.exports = Details; |
| | 3391 | },{"../attachment.js":20}],22:[function(require,module,exports){ |
| | 3392 | /** |
| | 3393 | * wp.media.view.Attachment.Library |
| | 3394 | * |
| | 3395 | * @class |
| | 3396 | * @augments wp.media.view.Attachment |
| | 3397 | * @augments wp.media.View |
| | 3398 | * @augments wp.Backbone.View |
| | 3399 | * @augments Backbone.View |
| | 3400 | */ |
| | 3401 | var Attachment = require( '../attachment.js' ), |
| | 3402 | Library; |
| | 3403 | |
| | 3404 | Library = Attachment.extend({ |
| | 3405 | buttons: { |
| | 3406 | check: true |
| | 3407 | } |
| | 3408 | }); |
| | 3409 | |
| | 3410 | module.exports = Library; |
| | 3411 | },{"../attachment.js":20}],23:[function(require,module,exports){ |
| | 3412 | /** |
| | 3413 | * wp.media.view.Attachments |
| | 3414 | * |
| | 3415 | * @class |
| | 3416 | * @augments wp.media.View |
| | 3417 | * @augments wp.Backbone.View |
| | 3418 | * @augments Backbone.View |
| | 3419 | */ |
| | 3420 | var View = require( './view.js' ), |
| | 3421 | Attachment = require( './attachment.js' ), |
| | 3422 | $ = jQuery, |
| | 3423 | Attachments; |
| | 3424 | |
| | 3425 | Attachments = View.extend({ |
| | 3426 | tagName: 'ul', |
| | 3427 | className: 'attachments', |
| | 3428 | |
| | 3429 | attributes: { |
| | 3430 | tabIndex: -1 |
| | 3431 | }, |
| | 3432 | |
| | 3433 | initialize: function() { |
| | 3434 | this.el.id = _.uniqueId('__attachments-view-'); |
| | 3435 | |
| | 3436 | _.defaults( this.options, { |
| | 3437 | refreshSensitivity: wp.media.isTouchDevice ? 300 : 200, |
| | 3438 | refreshThreshold: 3, |
| | 3439 | AttachmentView: Attachment, |
| | 3440 | sortable: false, |
| | 3441 | resize: true, |
| | 3442 | idealColumnWidth: $( window ).width() < 640 ? 135 : 150 |
| | 3443 | }); |
| | 3444 | |
| | 3445 | this._viewsByCid = {}; |
| | 3446 | this.$window = $( window ); |
| | 3447 | this.resizeEvent = 'resize.media-modal-columns'; |
| | 3448 | |
| | 3449 | this.collection.on( 'add', function( attachment ) { |
| | 3450 | this.views.add( this.createAttachmentView( attachment ), { |
| | 3451 | at: this.collection.indexOf( attachment ) |
| | 3452 | }); |
| | 3453 | }, this ); |
| | 3454 | |
| | 3455 | this.collection.on( 'remove', function( attachment ) { |
| | 3456 | var view = this._viewsByCid[ attachment.cid ]; |
| | 3457 | delete this._viewsByCid[ attachment.cid ]; |
| | 3458 | |
| | 3459 | if ( view ) { |
| | 3460 | view.remove(); |
| | 3461 | } |
| | 3462 | }, this ); |
| | 3463 | |
| | 3464 | this.collection.on( 'reset', this.render, this ); |
| | 3465 | |
| | 3466 | this.listenTo( this.controller, 'library:selection:add', this.attachmentFocus ); |
| | 3467 | |
| | 3468 | // Throttle the scroll handler and bind this. |
| | 3469 | this.scroll = _.chain( this.scroll ).bind( this ).throttle( this.options.refreshSensitivity ).value(); |
| | 3470 | |
| | 3471 | this.options.scrollElement = this.options.scrollElement || this.el; |
| | 3472 | $( this.options.scrollElement ).on( 'scroll', this.scroll ); |
| | 3473 | |
| | 3474 | this.initSortable(); |
| | 3475 | |
| | 3476 | _.bindAll( this, 'setColumns' ); |
| | 3477 | |
| | 3478 | if ( this.options.resize ) { |
| | 3479 | this.on( 'ready', this.bindEvents ); |
| | 3480 | this.controller.on( 'open', this.setColumns ); |
| | 3481 | |
| | 3482 | // Call this.setColumns() after this view has been rendered in the DOM so |
| | 3483 | // attachments get proper width applied. |
| | 3484 | _.defer( this.setColumns, this ); |
| | 3485 | } |
| | 3486 | }, |
| | 3487 | |
| | 3488 | bindEvents: function() { |
| | 3489 | this.$window.off( this.resizeEvent ).on( this.resizeEvent, _.debounce( this.setColumns, 50 ) ); |
| | 3490 | }, |
| | 3491 | |
| | 3492 | attachmentFocus: function() { |
| | 3493 | this.$( 'li:first' ).focus(); |
| | 3494 | }, |
| | 3495 | |
| | 3496 | restoreFocus: function() { |
| | 3497 | this.$( 'li.selected:first' ).focus(); |
| | 3498 | }, |
| | 3499 | |
| | 3500 | arrowEvent: function( event ) { |
| | 3501 | var attachments = this.$el.children( 'li' ), |
| | 3502 | perRow = this.columns, |
| | 3503 | index = attachments.filter( ':focus' ).index(), |
| | 3504 | row = ( index + 1 ) <= perRow ? 1 : Math.ceil( ( index + 1 ) / perRow ); |
| | 3505 | |
| | 3506 | if ( index === -1 ) { |
| | 3507 | return; |
| | 3508 | } |
| | 3509 | |
| | 3510 | // Left arrow |
| | 3511 | if ( 37 === event.keyCode ) { |
| | 3512 | if ( 0 === index ) { |
| | 3513 | return; |
| | 3514 | } |
| | 3515 | attachments.eq( index - 1 ).focus(); |
| | 3516 | } |
| | 3517 | |
| | 3518 | // Up arrow |
| | 3519 | if ( 38 === event.keyCode ) { |
| | 3520 | if ( 1 === row ) { |
| | 3521 | return; |
| | 3522 | } |
| | 3523 | attachments.eq( index - perRow ).focus(); |
| | 3524 | } |
| | 3525 | |
| | 3526 | // Right arrow |
| | 3527 | if ( 39 === event.keyCode ) { |
| | 3528 | if ( attachments.length === index ) { |
| | 3529 | return; |
| | 3530 | } |
| | 3531 | attachments.eq( index + 1 ).focus(); |
| | 3532 | } |
| | 3533 | |
| | 3534 | // Down arrow |
| | 3535 | if ( 40 === event.keyCode ) { |
| | 3536 | if ( Math.ceil( attachments.length / perRow ) === row ) { |
| | 3537 | return; |
| | 3538 | } |
| | 3539 | attachments.eq( index + perRow ).focus(); |
| | 3540 | } |
| | 3541 | }, |
| | 3542 | |
| | 3543 | dispose: function() { |
| | 3544 | this.collection.props.off( null, null, this ); |
| | 3545 | if ( this.options.resize ) { |
| | 3546 | this.$window.off( this.resizeEvent ); |
| | 3547 | } |
| | 3548 | |
| | 3549 | /** |
| | 3550 | * call 'dispose' directly on the parent class |
| | 3551 | */ |
| | 3552 | View.prototype.dispose.apply( this, arguments ); |
| | 3553 | }, |
| | 3554 | |
| | 3555 | setColumns: function() { |
| | 3556 | var prev = this.columns, |
| | 3557 | width = this.$el.width(); |
| | 3558 | |
| | 3559 | if ( width ) { |
| | 3560 | this.columns = Math.min( Math.round( width / this.options.idealColumnWidth ), 12 ) || 1; |
| | 3561 | |
| | 3562 | if ( ! prev || prev !== this.columns ) { |
| | 3563 | this.$el.closest( '.media-frame-content' ).attr( 'data-columns', this.columns ); |
| | 3564 | } |
| | 3565 | } |
| | 3566 | }, |
| | 3567 | |
| | 3568 | initSortable: function() { |
| | 3569 | var collection = this.collection; |
| | 3570 | |
| | 3571 | if ( wp.media.isTouchDevice || ! this.options.sortable || ! $.fn.sortable ) { |
| | 3572 | return; |
| | 3573 | } |
| | 3574 | |
| | 3575 | this.$el.sortable( _.extend({ |
| | 3576 | // If the `collection` has a `comparator`, disable sorting. |
| | 3577 | disabled: !! collection.comparator, |
| | 3578 | |
| | 3579 | // Change the position of the attachment as soon as the |
| | 3580 | // mouse pointer overlaps a thumbnail. |
| | 3581 | tolerance: 'pointer', |
| | 3582 | |
| | 3583 | // Record the initial `index` of the dragged model. |
| | 3584 | start: function( event, ui ) { |
| | 3585 | ui.item.data('sortableIndexStart', ui.item.index()); |
| | 3586 | }, |
| | 3587 | |
| | 3588 | // Update the model's index in the collection. |
| | 3589 | // Do so silently, as the view is already accurate. |
| | 3590 | update: function( event, ui ) { |
| | 3591 | var model = collection.at( ui.item.data('sortableIndexStart') ), |
| | 3592 | comparator = collection.comparator; |
| | 3593 | |
| | 3594 | // Temporarily disable the comparator to prevent `add` |
| | 3595 | // from re-sorting. |
| | 3596 | delete collection.comparator; |
| | 3597 | |
| | 3598 | // Silently shift the model to its new index. |
| | 3599 | collection.remove( model, { |
| | 3600 | silent: true |
| | 3601 | }); |
| | 3602 | collection.add( model, { |
| | 3603 | silent: true, |
| | 3604 | at: ui.item.index() |
| | 3605 | }); |
| | 3606 | |
| | 3607 | // Restore the comparator. |
| | 3608 | collection.comparator = comparator; |
| | 3609 | |
| | 3610 | // Fire the `reset` event to ensure other collections sync. |
| | 3611 | collection.trigger( 'reset', collection ); |
| | 3612 | |
| | 3613 | // If the collection is sorted by menu order, |
| | 3614 | // update the menu order. |
| | 3615 | collection.saveMenuOrder(); |
| | 3616 | } |
| | 3617 | }, this.options.sortable ) ); |
| | 3618 | |
| | 3619 | // If the `orderby` property is changed on the `collection`, |
| | 3620 | // check to see if we have a `comparator`. If so, disable sorting. |
| | 3621 | collection.props.on( 'change:orderby', function() { |
| | 3622 | this.$el.sortable( 'option', 'disabled', !! collection.comparator ); |
| | 3623 | }, this ); |
| | 3624 | |
| | 3625 | this.collection.props.on( 'change:orderby', this.refreshSortable, this ); |
| | 3626 | this.refreshSortable(); |
| | 3627 | }, |
| | 3628 | |
| | 3629 | refreshSortable: function() { |
| | 3630 | if ( wp.media.isTouchDevice || ! this.options.sortable || ! $.fn.sortable ) { |
| | 3631 | return; |
| | 3632 | } |
| | 3633 | |
| | 3634 | // If the `collection` has a `comparator`, disable sorting. |
| | 3635 | var collection = this.collection, |
| | 3636 | orderby = collection.props.get('orderby'), |
| | 3637 | enabled = 'menuOrder' === orderby || ! collection.comparator; |
| | 3638 | |
| | 3639 | this.$el.sortable( 'option', 'disabled', ! enabled ); |
| | 3640 | }, |
| | 3641 | |
| | 3642 | /** |
| | 3643 | * @param {wp.media.model.Attachment} attachment |
| | 3644 | * @returns {wp.media.View} |
| | 3645 | */ |
| | 3646 | createAttachmentView: function( attachment ) { |
| | 3647 | var view = new this.options.AttachmentView({ |
| | 3648 | controller: this.controller, |
| | 3649 | model: attachment, |
| | 3650 | collection: this.collection, |
| | 3651 | selection: this.options.selection |
| | 3652 | }); |
| | 3653 | |
| | 3654 | return this._viewsByCid[ attachment.cid ] = view; |
| | 3655 | }, |
| | 3656 | |
| | 3657 | prepare: function() { |
| | 3658 | // Create all of the Attachment views, and replace |
| | 3659 | // the list in a single DOM operation. |
| | 3660 | if ( this.collection.length ) { |
| | 3661 | this.views.set( this.collection.map( this.createAttachmentView, this ) ); |
| | 3662 | |
| | 3663 | // If there are no elements, clear the views and load some. |
| | 3664 | } else { |
| | 3665 | this.views.unset(); |
| | 3666 | this.collection.more().done( this.scroll ); |
| | 3667 | } |
| | 3668 | }, |
| | 3669 | |
| | 3670 | ready: function() { |
| | 3671 | // Trigger the scroll event to check if we're within the |
| | 3672 | // threshold to query for additional attachments. |
| | 3673 | this.scroll(); |
| | 3674 | }, |
| | 3675 | |
| | 3676 | scroll: function() { |
| | 3677 | var view = this, |
| | 3678 | el = this.options.scrollElement, |
| | 3679 | scrollTop = el.scrollTop, |
| | 3680 | toolbar; |
| | 3681 | |
| | 3682 | // The scroll event occurs on the document, but the element |
| | 3683 | // that should be checked is the document body. |
| | 3684 | if ( el == document ) { |
| | 3685 | el = document.body; |
| | 3686 | scrollTop = $(document).scrollTop(); |
| | 3687 | } |
| | 3688 | |
| | 3689 | if ( ! $(el).is(':visible') || ! this.collection.hasMore() ) { |
| | 3690 | return; |
| | 3691 | } |
| | 3692 | |
| | 3693 | toolbar = this.views.parent.toolbar; |
| | 3694 | |
| | 3695 | // Show the spinner only if we are close to the bottom. |
| | 3696 | if ( el.scrollHeight - ( scrollTop + el.clientHeight ) < el.clientHeight / 3 ) { |
| | 3697 | toolbar.get('spinner').show(); |
| | 3698 | } |
| | 3699 | |
| | 3700 | if ( el.scrollHeight < scrollTop + ( el.clientHeight * this.options.refreshThreshold ) ) { |
| | 3701 | this.collection.more().done(function() { |
| | 3702 | view.scroll(); |
| | 3703 | toolbar.get('spinner').hide(); |
| | 3704 | }); |
| | 3705 | } |
| | 3706 | } |
| | 3707 | }); |
| | 3708 | |
| | 3709 | module.exports = Attachments; |
| | 3710 | },{"./attachment.js":20,"./view.js":55}],24:[function(require,module,exports){ |
| | 3711 | /** |
| | 3712 | * wp.media.view.AttachmentsBrowser |
| | 3713 | * |
| | 3714 | * @class |
| | 3715 | * @augments wp.media.View |
| | 3716 | * @augments wp.Backbone.View |
| | 3717 | * @augments Backbone.View |
| | 3718 | * |
| | 3719 | * @param {object} options |
| | 3720 | * @param {object} [options.filters=false] Which filters to show in the browser's toolbar. |
| | 3721 | * Accepts 'uploaded' and 'all'. |
| | 3722 | * @param {object} [options.search=true] Whether to show the search interface in the |
| | 3723 | * browser's toolbar. |
| | 3724 | * @param {object} [options.display=false] Whether to show the attachments display settings |
| | 3725 | * view in the sidebar. |
| | 3726 | * @param {bool|string} [options.sidebar=true] Whether to create a sidebar for the browser. |
| | 3727 | * Accepts true, false, and 'errors'. |
| | 3728 | */ |
| | 3729 | var View = require( '../view.js' ), |
| | 3730 | Library = require( '../attachment/library.js' ), |
| | 3731 | Toolbar = require( '../toolbar.js' ), |
| | 3732 | Spinner = require( '../spinner.js' ), |
| | 3733 | Search = require( '../search.js' ), |
| | 3734 | Label = require( '../label.js' ), |
| | 3735 | Uploaded = require( '../attachment-filters/uploaded.js' ), |
| | 3736 | All = require( '../attachment-filters/all.js' ), |
| | 3737 | DateFilter = require( '../attachment-filters/date.js' ), |
| | 3738 | UploaderInline = require( '../uploader/inline.js' ), |
| | 3739 | Attachments = require( '../attachments.js' ), |
| | 3740 | Sidebar = require( '../sidebar.js' ), |
| | 3741 | UploaderStatus = require( '../uploader/status.js' ), |
| | 3742 | Details = require( '../attachment/details.js' ), |
| | 3743 | AttachmentCompat = require( '../attachment-compat.js' ), |
| | 3744 | AttachmentDisplay = require( '../settings/attachment-display.js' ), |
| | 3745 | mediaTrash = wp.media.view.settings.mediaTrash, |
| | 3746 | l10n = wp.media.view.l10n, |
| | 3747 | $ = jQuery, |
| | 3748 | AttachmentsBrowser; |
| | 3749 | |
| | 3750 | AttachmentsBrowser = View.extend({ |
| | 3751 | tagName: 'div', |
| | 3752 | className: 'attachments-browser', |
| | 3753 | |
| | 3754 | initialize: function() { |
| | 3755 | _.defaults( this.options, { |
| | 3756 | filters: false, |
| | 3757 | search: true, |
| | 3758 | display: false, |
| | 3759 | sidebar: true, |
| | 3760 | AttachmentView: Library |
| | 3761 | }); |
| | 3762 | |
| | 3763 | this.listenTo( this.controller, 'toggle:upload:attachment', _.bind( this.toggleUploader, this ) ); |
| | 3764 | this.controller.on( 'edit:selection', this.editSelection ); |
| | 3765 | this.createToolbar(); |
| | 3766 | if ( this.options.sidebar ) { |
| | 3767 | this.createSidebar(); |
| | 3768 | } |
| | 3769 | this.createUploader(); |
| | 3770 | this.createAttachments(); |
| | 3771 | this.updateContent(); |
| | 3772 | |
| | 3773 | if ( ! this.options.sidebar || 'errors' === this.options.sidebar ) { |
| | 3774 | this.$el.addClass( 'hide-sidebar' ); |
| | 3775 | |
| | 3776 | if ( 'errors' === this.options.sidebar ) { |
| | 3777 | this.$el.addClass( 'sidebar-for-errors' ); |
| | 3778 | } |
| | 3779 | } |
| | 3780 | |
| | 3781 | this.collection.on( 'add remove reset', this.updateContent, this ); |
| | 3782 | }, |
| | 3783 | |
| | 3784 | editSelection: function( modal ) { |
| | 3785 | modal.$( '.media-button-backToLibrary' ).focus(); |
| | 3786 | }, |
| | 3787 | |
| | 3788 | /** |
| | 3789 | * @returns {wp.media.view.AttachmentsBrowser} Returns itself to allow chaining |
| | 3790 | */ |
| | 3791 | dispose: function() { |
| | 3792 | this.options.selection.off( null, null, this ); |
| | 3793 | View.prototype.dispose.apply( this, arguments ); |
| | 3794 | return this; |
| | 3795 | }, |
| | 3796 | |
| | 3797 | createToolbar: function() { |
| | 3798 | var LibraryViewSwitcher, Filters, toolbarOptions; |
| | 3799 | |
| | 3800 | toolbarOptions = { |
| | 3801 | controller: this.controller |
| | 3802 | }; |
| | 3803 | |
| | 3804 | if ( this.controller.isModeActive( 'grid' ) ) { |
| | 3805 | toolbarOptions.className = 'media-toolbar wp-filter'; |
| | 3806 | } |
| | 3807 | |
| | 3808 | /** |
| | 3809 | * @member {wp.media.view.Toolbar} |
| | 3810 | */ |
| | 3811 | this.toolbar = new Toolbar( toolbarOptions ); |
| | 3812 | |
| | 3813 | this.views.add( this.toolbar ); |
| | 3814 | |
| | 3815 | this.toolbar.set( 'spinner', new Spinner({ |
| | 3816 | priority: -60 |
| | 3817 | }) ); |
| | 3818 | |
| | 3819 | if ( -1 !== $.inArray( this.options.filters, [ 'uploaded', 'all' ] ) ) { |
| | 3820 | // "Filters" will return a <select>, need to render |
| | 3821 | // screen reader text before |
| | 3822 | this.toolbar.set( 'filtersLabel', new Label({ |
| | 3823 | value: l10n.filterByType, |
| | 3824 | attributes: { |
| | 3825 | 'for': 'media-attachment-filters' |
| | 3826 | }, |
| | 3827 | priority: -80 |
| | 3828 | }).render() ); |
| | 3829 | |
| | 3830 | if ( 'uploaded' === this.options.filters ) { |
| | 3831 | this.toolbar.set( 'filters', new Uploaded({ |
| | 3832 | controller: this.controller, |
| | 3833 | model: this.collection.props, |
| | 3834 | priority: -80 |
| | 3835 | }).render() ); |
| | 3836 | } else { |
| | 3837 | Filters = new All({ |
| | 3838 | controller: this.controller, |
| | 3839 | model: this.collection.props, |
| | 3840 | priority: -80 |
| | 3841 | }); |
| | 3842 | |
| | 3843 | this.toolbar.set( 'filters', Filters.render() ); |
| | 3844 | } |
| | 3845 | } |
| | 3846 | |
| | 3847 | // Feels odd to bring the global media library switcher into the Attachment |
| | 3848 | // browser view. Is this a use case for doAction( 'add:toolbar-items:attachments-browser', this.toolbar ); |
| | 3849 | // which the controller can tap into and add this view? |
| | 3850 | if ( this.controller.isModeActive( 'grid' ) ) { |
| | 3851 | LibraryViewSwitcher = View.extend({ |
| | 3852 | className: 'view-switch media-grid-view-switch', |
| | 3853 | template: wp.template( 'media-library-view-switcher') |
| | 3854 | }); |
| | 3855 | |
| | 3856 | this.toolbar.set( 'libraryViewSwitcher', new LibraryViewSwitcher({ |
| | 3857 | controller: this.controller, |
| | 3858 | priority: -90 |
| | 3859 | }).render() ); |
| | 3860 | |
| | 3861 | // DateFilter is a <select>, screen reader text needs to be rendered before |
| | 3862 | this.toolbar.set( 'dateFilterLabel', new Label({ |
| | 3863 | value: l10n.filterByDate, |
| | 3864 | attributes: { |
| | 3865 | 'for': 'media-attachment-date-filters' |
| | 3866 | }, |
| | 3867 | priority: -75 |
| | 3868 | }).render() ); |
| | 3869 | this.toolbar.set( 'dateFilter', new DateFilter({ |
| | 3870 | controller: this.controller, |
| | 3871 | model: this.collection.props, |
| | 3872 | priority: -75 |
| | 3873 | }).render() ); |
| | 3874 | |
| | 3875 | // BulkSelection is a <div> with subviews, including screen reader text |
| | 3876 | this.toolbar.set( 'selectModeToggleButton', new wp.media.view.SelectModeToggleButton({ |
| | 3877 | text: l10n.bulkSelect, |
| | 3878 | controller: this.controller, |
| | 3879 | priority: -70 |
| | 3880 | }).render() ); |
| | 3881 | |
| | 3882 | this.toolbar.set( 'deleteSelectedButton', new wp.media.view.DeleteSelectedButton({ |
| | 3883 | filters: Filters, |
| | 3884 | style: 'primary', |
| | 3885 | disabled: true, |
| | 3886 | text: mediaTrash ? l10n.trashSelected : l10n.deleteSelected, |
| | 3887 | controller: this.controller, |
| | 3888 | priority: -60, |
| | 3889 | click: function() { |
| | 3890 | var changed = [], removed = [], self = this, |
| | 3891 | selection = this.controller.state().get( 'selection' ), |
| | 3892 | library = this.controller.state().get( 'library' ); |
| | 3893 | |
| | 3894 | if ( ! selection.length ) { |
| | 3895 | return; |
| | 3896 | } |
| | 3897 | |
| | 3898 | if ( ! mediaTrash && ! confirm( l10n.warnBulkDelete ) ) { |
| | 3899 | return; |
| | 3900 | } |
| | 3901 | |
| | 3902 | if ( mediaTrash && |
| | 3903 | 'trash' !== selection.at( 0 ).get( 'status' ) && |
| | 3904 | ! confirm( l10n.warnBulkTrash ) ) { |
| | 3905 | |
| | 3906 | return; |
| | 3907 | } |
| | 3908 | |
| | 3909 | selection.each( function( model ) { |
| | 3910 | if ( ! model.get( 'nonces' )['delete'] ) { |
| | 3911 | removed.push( model ); |
| | 3912 | return; |
| | 3913 | } |
| | 3914 | |
| | 3915 | if ( mediaTrash && 'trash' === model.get( 'status' ) ) { |
| | 3916 | model.set( 'status', 'inherit' ); |
| | 3917 | changed.push( model.save() ); |
| | 3918 | removed.push( model ); |
| | 3919 | } else if ( mediaTrash ) { |
| | 3920 | model.set( 'status', 'trash' ); |
| | 3921 | changed.push( model.save() ); |
| | 3922 | removed.push( model ); |
| | 3923 | } else { |
| | 3924 | model.destroy({wait: true}); |
| | 3925 | } |
| | 3926 | } ); |
| | 3927 | |
| | 3928 | if ( changed.length ) { |
| | 3929 | selection.remove( removed ); |
| | 3930 | |
| | 3931 | $.when.apply( null, changed ).then( function() { |
| | 3932 | library._requery( true ); |
| | 3933 | self.controller.trigger( 'selection:action:done' ); |
| | 3934 | } ); |
| | 3935 | } else { |
| | 3936 | this.controller.trigger( 'selection:action:done' ); |
| | 3937 | } |
| | 3938 | } |
| | 3939 | }).render() ); |
| | 3940 | |
| | 3941 | if ( mediaTrash ) { |
| | 3942 | this.toolbar.set( 'deleteSelectedPermanentlyButton', new wp.media.view.DeleteSelectedPermanentlyButton({ |
| | 3943 | filters: Filters, |
| | 3944 | style: 'primary', |
| | 3945 | disabled: true, |
| | 3946 | text: l10n.deleteSelected, |
| | 3947 | controller: this.controller, |
| | 3948 | priority: -55, |
| | 3949 | click: function() { |
| | 3950 | var removed = [], selection = this.controller.state().get( 'selection' ); |
| | 3951 | |
| | 3952 | if ( ! selection.length || ! confirm( l10n.warnBulkDelete ) ) { |
| | 3953 | return; |
| | 3954 | } |
| | 3955 | |
| | 3956 | selection.each( function( model ) { |
| | 3957 | if ( ! model.get( 'nonces' )['delete'] ) { |
| | 3958 | removed.push( model ); |
| | 3959 | return; |
| | 3960 | } |
| | 3961 | |
| | 3962 | model.destroy(); |
| | 3963 | } ); |
| | 3964 | |
| | 3965 | selection.remove( removed ); |
| | 3966 | this.controller.trigger( 'selection:action:done' ); |
| | 3967 | } |
| | 3968 | }).render() ); |
| | 3969 | } |
| | 3970 | |
| | 3971 | } else { |
| | 3972 | // DateFilter is a <select>, screen reader text needs to be rendered before |
| | 3973 | this.toolbar.set( 'dateFilterLabel', new Label({ |
| | 3974 | value: l10n.filterByDate, |
| | 3975 | attributes: { |
| | 3976 | 'for': 'media-attachment-date-filters' |
| | 3977 | }, |
| | 3978 | priority: -75 |
| | 3979 | }).render() ); |
| | 3980 | this.toolbar.set( 'dateFilter', new DateFilter({ |
| | 3981 | controller: this.controller, |
| | 3982 | model: this.collection.props, |
| | 3983 | priority: -75 |
| | 3984 | }).render() ); |
| | 3985 | } |
| | 3986 | |
| | 3987 | if ( this.options.search ) { |
| | 3988 | // Search is an input, screen reader text needs to be rendered before |
| | 3989 | this.toolbar.set( 'searchLabel', new Label({ |
| | 3990 | value: l10n.searchMediaLabel, |
| | 3991 | attributes: { |
| | 3992 | 'for': 'media-search-input' |
| | 3993 | }, |
| | 3994 | priority: 60 |
| | 3995 | }).render() ); |
| | 3996 | this.toolbar.set( 'search', new Search({ |
| | 3997 | controller: this.controller, |
| | 3998 | model: this.collection.props, |
| | 3999 | priority: 60 |
| | 4000 | }).render() ); |
| | 4001 | } |
| | 4002 | |
| | 4003 | if ( this.options.dragInfo ) { |
| | 4004 | this.toolbar.set( 'dragInfo', new View({ |
| | 4005 | el: $( '<div class="instructions">' + l10n.dragInfo + '</div>' )[0], |
| | 4006 | priority: -40 |
| | 4007 | }) ); |
| | 4008 | } |
| | 4009 | |
| | 4010 | if ( this.options.suggestedWidth && this.options.suggestedHeight ) { |
| | 4011 | this.toolbar.set( 'suggestedDimensions', new View({ |
| | 4012 | el: $( '<div class="instructions">' + l10n.suggestedDimensions + ' ' + this.options.suggestedWidth + ' × ' + this.options.suggestedHeight + '</div>' )[0], |
| | 4013 | priority: -40 |
| | 4014 | }) ); |
| | 4015 | } |
| | 4016 | }, |
| | 4017 | |
| | 4018 | updateContent: function() { |
| | 4019 | var view = this, |
| | 4020 | noItemsView; |
| | 4021 | |
| | 4022 | if ( this.controller.isModeActive( 'grid' ) ) { |
| | 4023 | noItemsView = view.attachmentsNoResults; |
| | 4024 | } else { |
| | 4025 | noItemsView = view.uploader; |
| | 4026 | } |
| | 4027 | |
| | 4028 | if ( ! this.collection.length ) { |
| | 4029 | this.toolbar.get( 'spinner' ).show(); |
| | 4030 | this.dfd = this.collection.more().done( function() { |
| | 4031 | if ( ! view.collection.length ) { |
| | 4032 | noItemsView.$el.removeClass( 'hidden' ); |
| | 4033 | } else { |
| | 4034 | noItemsView.$el.addClass( 'hidden' ); |
| | 4035 | } |
| | 4036 | view.toolbar.get( 'spinner' ).hide(); |
| | 4037 | } ); |
| | 4038 | } else { |
| | 4039 | noItemsView.$el.addClass( 'hidden' ); |
| | 4040 | view.toolbar.get( 'spinner' ).hide(); |
| | 4041 | } |
| | 4042 | }, |
| | 4043 | |
| | 4044 | createUploader: function() { |
| | 4045 | this.uploader = new UploaderInline({ |
| | 4046 | controller: this.controller, |
| | 4047 | status: false, |
| | 4048 | message: this.controller.isModeActive( 'grid' ) ? '' : l10n.noItemsFound, |
| | 4049 | canClose: this.controller.isModeActive( 'grid' ) |
| | 4050 | }); |
| | 4051 | |
| | 4052 | this.uploader.hide(); |
| | 4053 | this.views.add( this.uploader ); |
| | 4054 | }, |
| | 4055 | |
| | 4056 | toggleUploader: function() { |
| | 4057 | if ( this.uploader.$el.hasClass( 'hidden' ) ) { |
| | 4058 | this.uploader.show(); |
| | 4059 | } else { |
| | 4060 | this.uploader.hide(); |
| | 4061 | } |
| | 4062 | }, |
| | 4063 | |
| | 4064 | createAttachments: function() { |
| | 4065 | this.attachments = new Attachments({ |
| | 4066 | controller: this.controller, |
| | 4067 | collection: this.collection, |
| | 4068 | selection: this.options.selection, |
| | 4069 | model: this.model, |
| | 4070 | sortable: this.options.sortable, |
| | 4071 | scrollElement: this.options.scrollElement, |
| | 4072 | idealColumnWidth: this.options.idealColumnWidth, |
| | 4073 | |
| | 4074 | // The single `Attachment` view to be used in the `Attachments` view. |
| | 4075 | AttachmentView: this.options.AttachmentView |
| | 4076 | }); |
| | 4077 | |
| | 4078 | // Add keydown listener to the instance of the Attachments view |
| | 4079 | this.attachments.listenTo( this.controller, 'attachment:keydown:arrow', this.attachments.arrowEvent ); |
| | 4080 | this.attachments.listenTo( this.controller, 'attachment:details:shift-tab', this.attachments.restoreFocus ); |
| | 4081 | |
| | 4082 | this.views.add( this.attachments ); |
| | 4083 | |
| | 4084 | |
| | 4085 | if ( this.controller.isModeActive( 'grid' ) ) { |
| | 4086 | this.attachmentsNoResults = new View({ |
| | 4087 | controller: this.controller, |
| | 4088 | tagName: 'p' |
| | 4089 | }); |
| | 4090 | |
| | 4091 | this.attachmentsNoResults.$el.addClass( 'hidden no-media' ); |
| | 4092 | this.attachmentsNoResults.$el.html( l10n.noMedia ); |
| | 4093 | |
| | 4094 | this.views.add( this.attachmentsNoResults ); |
| | 4095 | } |
| | 4096 | }, |
| | 4097 | |
| | 4098 | createSidebar: function() { |
| | 4099 | var options = this.options, |
| | 4100 | selection = options.selection, |
| | 4101 | sidebar = this.sidebar = new Sidebar({ |
| | 4102 | controller: this.controller |
| | 4103 | }); |
| | 4104 | |
| | 4105 | this.views.add( sidebar ); |
| | 4106 | |
| | 4107 | if ( this.controller.uploader ) { |
| | 4108 | sidebar.set( 'uploads', new UploaderStatus({ |
| | 4109 | controller: this.controller, |
| | 4110 | priority: 40 |
| | 4111 | }) ); |
| | 4112 | } |
| | 4113 | |
| | 4114 | selection.on( 'selection:single', this.createSingle, this ); |
| | 4115 | selection.on( 'selection:unsingle', this.disposeSingle, this ); |
| | 4116 | |
| | 4117 | if ( selection.single() ) { |
| | 4118 | this.createSingle(); |
| | 4119 | } |
| | 4120 | }, |
| | 4121 | |
| | 4122 | createSingle: function() { |
| | 4123 | var sidebar = this.sidebar, |
| | 4124 | single = this.options.selection.single(); |
| | 4125 | |
| | 4126 | sidebar.set( 'details', new Details({ |
| | 4127 | controller: this.controller, |
| | 4128 | model: single, |
| | 4129 | priority: 80 |
| | 4130 | }) ); |
| | 4131 | |
| | 4132 | sidebar.set( 'compat', new AttachmentCompat({ |
| | 4133 | controller: this.controller, |
| | 4134 | model: single, |
| | 4135 | priority: 120 |
| | 4136 | }) ); |
| | 4137 | |
| | 4138 | if ( this.options.display ) { |
| | 4139 | sidebar.set( 'display', new AttachmentDisplay({ |
| | 4140 | controller: this.controller, |
| | 4141 | model: this.model.display( single ), |
| | 4142 | attachment: single, |
| | 4143 | priority: 160, |
| | 4144 | userSettings: this.model.get('displayUserSettings') |
| | 4145 | }) ); |
| | 4146 | } |
| | 4147 | |
| | 4148 | // Show the sidebar on mobile |
| | 4149 | if ( this.model.id === 'insert' ) { |
| | 4150 | sidebar.$el.addClass( 'visible' ); |
| | 4151 | } |
| | 4152 | }, |
| | 4153 | |
| | 4154 | disposeSingle: function() { |
| | 4155 | var sidebar = this.sidebar; |
| | 4156 | sidebar.unset('details'); |
| | 4157 | sidebar.unset('compat'); |
| | 4158 | sidebar.unset('display'); |
| | 4159 | // Hide the sidebar on mobile |
| | 4160 | sidebar.$el.removeClass( 'visible' ); |
| | 4161 | } |
| | 4162 | }); |
| | 4163 | |
| | 4164 | module.exports = AttachmentsBrowser; |
| | 4165 | },{"../attachment-compat.js":15,"../attachment-filters/all.js":17,"../attachment-filters/date.js":18,"../attachment-filters/uploaded.js":19,"../attachment/details.js":21,"../attachment/library.js":22,"../attachments.js":23,"../label.js":34,"../search.js":43,"../settings/attachment-display.js":45,"../sidebar.js":46,"../spinner.js":47,"../toolbar.js":48,"../uploader/inline.js":50,"../uploader/status.js":52,"../view.js":55}],25:[function(require,module,exports){ |
| | 4166 | /** |
| | 4167 | * wp.media.view.AudioDetails |
| | 4168 | * |
| | 4169 | * @constructor |
| | 4170 | * @augments wp.media.view.MediaDetails |
| | 4171 | * @augments wp.media.view.Settings.AttachmentDisplay |
| | 4172 | * @augments wp.media.view.Settings |
| | 4173 | * @augments wp.media.View |
| | 4174 | * @augments wp.Backbone.View |
| | 4175 | * @augments Backbone.View |
| | 4176 | */ |
| | 4177 | var MediaDetails = require( './media-details' ), |
| | 4178 | AudioDetails; |
| | 4179 | |
| | 4180 | AudioDetails = MediaDetails.extend({ |
| | 4181 | className: 'audio-details', |
| | 4182 | template: wp.template('audio-details'), |
| | 4183 | |
| | 4184 | setMedia: function() { |
| | 4185 | var audio = this.$('.wp-audio-shortcode'); |
| | 4186 | |
| | 4187 | if ( audio.find( 'source' ).length ) { |
| | 4188 | if ( audio.is(':hidden') ) { |
| | 4189 | audio.show(); |
| | 4190 | } |
| | 4191 | this.media = MediaDetails.prepareSrc( audio.get(0) ); |
| | 4192 | } else { |
| | 4193 | audio.hide(); |
| | 4194 | this.media = false; |
| | 4195 | } |
| | 4196 | |
| | 4197 | return this; |
| | 4198 | } |
| | 4199 | }); |
| | 4200 | |
| | 4201 | module.exports = AudioDetails; |
| | 4202 | },{"./media-details":35}],26:[function(require,module,exports){ |
| | 4203 | /** |
| | 4204 | * wp.media.view.Button |
| | 4205 | * |
| | 4206 | * @class |
| | 4207 | * @augments wp.media.View |
| | 4208 | * @augments wp.Backbone.View |
| | 4209 | * @augments Backbone.View |
| | 4210 | */ |
| | 4211 | var View = require( './view.js' ), |
| | 4212 | Button; |
| | 4213 | |
| | 4214 | Button = View.extend({ |
| | 4215 | tagName: 'a', |
| | 4216 | className: 'media-button', |
| | 4217 | attributes: { href: '#' }, |
| | 4218 | |
| | 4219 | events: { |
| | 4220 | 'click': 'click' |
| | 4221 | }, |
| | 4222 | |
| | 4223 | defaults: { |
| | 4224 | text: '', |
| | 4225 | style: '', |
| | 4226 | size: 'large', |
| | 4227 | disabled: false |
| | 4228 | }, |
| | 4229 | |
| | 4230 | initialize: function() { |
| | 4231 | /** |
| | 4232 | * Create a model with the provided `defaults`. |
| | 4233 | * |
| | 4234 | * @member {Backbone.Model} |
| | 4235 | */ |
| | 4236 | this.model = new Backbone.Model( this.defaults ); |
| | 4237 | |
| | 4238 | // If any of the `options` have a key from `defaults`, apply its |
| | 4239 | // value to the `model` and remove it from the `options object. |
| | 4240 | _.each( this.defaults, function( def, key ) { |
| | 4241 | var value = this.options[ key ]; |
| | 4242 | if ( _.isUndefined( value ) ) { |
| | 4243 | return; |
| | 4244 | } |
| | 4245 | |
| | 4246 | this.model.set( key, value ); |
| | 4247 | delete this.options[ key ]; |
| | 4248 | }, this ); |
| | 4249 | |
| | 4250 | this.model.on( 'change', this.render, this ); |
| | 4251 | }, |
| | 4252 | /** |
| | 4253 | * @returns {wp.media.view.Button} Returns itself to allow chaining |
| | 4254 | */ |
| | 4255 | render: function() { |
| | 4256 | var classes = [ 'button', this.className ], |
| | 4257 | model = this.model.toJSON(); |
| | 4258 | |
| | 4259 | if ( model.style ) { |
| | 4260 | classes.push( 'button-' + model.style ); |
| | 4261 | } |
| | 4262 | |
| | 4263 | if ( model.size ) { |
| | 4264 | classes.push( 'button-' + model.size ); |
| | 4265 | } |
| | 4266 | |
| | 4267 | classes = _.uniq( classes.concat( this.options.classes ) ); |
| | 4268 | this.el.className = classes.join(' '); |
| | 4269 | |
| | 4270 | this.$el.attr( 'disabled', model.disabled ); |
| | 4271 | this.$el.text( this.model.get('text') ); |
| | 4272 | |
| | 4273 | return this; |
| | 4274 | }, |
| | 4275 | /** |
| | 4276 | * @param {Object} event |
| | 4277 | */ |
| | 4278 | click: function( event ) { |
| | 4279 | if ( '#' === this.attributes.href ) { |
| | 4280 | event.preventDefault(); |
| | 4281 | } |
| | 4282 | |
| | 4283 | if ( this.options.click && ! this.model.get('disabled') ) { |
| | 4284 | this.options.click.apply( this, arguments ); |
| | 4285 | } |
| | 4286 | } |
| | 4287 | }); |
| | 4288 | |
| | 4289 | module.exports = Button; |
| | 4290 | },{"./view.js":55}],27:[function(require,module,exports){ |
| | 4291 | /** |
| | 4292 | * wp.media.view.FocusManager |
| | 4293 | * |
| | 4294 | * @class |
| | 4295 | * @augments wp.media.View |
| | 4296 | * @augments wp.Backbone.View |
| | 4297 | * @augments Backbone.View |
| | 4298 | */ |
| | 4299 | var View = require( './view.js' ), |
| | 4300 | FocusManager; |
| | 4301 | |
| | 4302 | FocusManager = View.extend({ |
| | 4303 | |
| | 4304 | events: { |
| | 4305 | 'keydown': 'constrainTabbing' |
| | 4306 | }, |
| | 4307 | |
| | 4308 | focus: function() { // Reset focus on first left menu item |
| | 4309 | this.$('.media-menu-item').first().focus(); |
| | 4310 | }, |
| | 4311 | /** |
| | 4312 | * @param {Object} event |
| | 4313 | */ |
| | 4314 | constrainTabbing: function( event ) { |
| | 4315 | var tabbables; |
| | 4316 | |
| | 4317 | // Look for the tab key. |
| | 4318 | if ( 9 !== event.keyCode ) { |
| | 4319 | return; |
| | 4320 | } |
| | 4321 | |
| | 4322 | tabbables = this.$( ':tabbable' ); |
| | 4323 | |
| | 4324 | // Keep tab focus within media modal while it's open |
| | 4325 | if ( tabbables.last()[0] === event.target && ! event.shiftKey ) { |
| | 4326 | tabbables.first().focus(); |
| | 4327 | return false; |
| | 4328 | } else if ( tabbables.first()[0] === event.target && event.shiftKey ) { |
| | 4329 | tabbables.last().focus(); |
| | 4330 | return false; |
| | 4331 | } |
| | 4332 | } |
| | 4333 | |
| | 4334 | }); |
| | 4335 | |
| | 4336 | module.exports = FocusManager; |
| | 4337 | },{"./view.js":55}],28:[function(require,module,exports){ |
| | 4338 | /** |
| | 4339 | * wp.media.view.Frame |
| | 4340 | * |
| | 4341 | * A frame is a composite view consisting of one or more regions and one or more |
| | 4342 | * states. |
| | 4343 | * |
| | 4344 | * @see wp.media.controller.State |
| | 4345 | * @see wp.media.controller.Region |
| | 4346 | * |
| | 4347 | * @class |
| | 4348 | * @augments wp.media.View |
| | 4349 | * @augments wp.Backbone.View |
| | 4350 | * @augments Backbone.View |
| | 4351 | * @mixes wp.media.controller.StateMachine |
| | 4352 | */ |
| | 4353 | var StateMachine = require( '../controllers/state-machine.js' ), |
| | 4354 | State = require( '../controllers/state.js' ), |
| | 4355 | Region = require( '../controllers/region.js' ), |
| | 4356 | View = require( './view.js' ), |
| | 4357 | Frame; |
| | 4358 | |
| | 4359 | Frame = View.extend({ |
| | 4360 | initialize: function() { |
| | 4361 | _.defaults( this.options, { |
| | 4362 | mode: [ 'select' ] |
| | 4363 | }); |
| | 4364 | this._createRegions(); |
| | 4365 | this._createStates(); |
| | 4366 | this._createModes(); |
| | 4367 | }, |
| | 4368 | |
| | 4369 | _createRegions: function() { |
| | 4370 | // Clone the regions array. |
| | 4371 | this.regions = this.regions ? this.regions.slice() : []; |
| | 4372 | |
| | 4373 | // Initialize regions. |
| | 4374 | _.each( this.regions, function( region ) { |
| | 4375 | this[ region ] = new Region({ |
| | 4376 | view: this, |
| | 4377 | id: region, |
| | 4378 | selector: '.media-frame-' + region |
| | 4379 | }); |
| | 4380 | }, this ); |
| | 4381 | }, |
| | 4382 | /** |
| | 4383 | * Create the frame's states. |
| | 4384 | * |
| | 4385 | * @see wp.media.controller.State |
| | 4386 | * @see wp.media.controller.StateMachine |
| | 4387 | * |
| | 4388 | * @fires wp.media.controller.State#ready |
| | 4389 | */ |
| | 4390 | _createStates: function() { |
| | 4391 | // Create the default `states` collection. |
| | 4392 | this.states = new Backbone.Collection( null, { |
| | 4393 | model: State |
| | 4394 | }); |
| | 4395 | |
| | 4396 | // Ensure states have a reference to the frame. |
| | 4397 | this.states.on( 'add', function( model ) { |
| | 4398 | model.frame = this; |
| | 4399 | model.trigger('ready'); |
| | 4400 | }, this ); |
| | 4401 | |
| | 4402 | if ( this.options.states ) { |
| | 4403 | this.states.add( this.options.states ); |
| | 4404 | } |
| | 4405 | }, |
| | 4406 | |
| | 4407 | /** |
| | 4408 | * A frame can be in a mode or multiple modes at one time. |
| | 4409 | * |
| | 4410 | * For example, the manage media frame can be in the `Bulk Select` or `Edit` mode. |
| | 4411 | */ |
| | 4412 | _createModes: function() { |
| | 4413 | // Store active "modes" that the frame is in. Unrelated to region modes. |
| | 4414 | this.activeModes = new Backbone.Collection(); |
| | 4415 | this.activeModes.on( 'add remove reset', _.bind( this.triggerModeEvents, this ) ); |
| | 4416 | |
| | 4417 | _.each( this.options.mode, function( mode ) { |
| | 4418 | this.activateMode( mode ); |
| | 4419 | }, this ); |
| | 4420 | }, |
| | 4421 | /** |
| | 4422 | * Reset all states on the frame to their defaults. |
| | 4423 | * |
| | 4424 | * @returns {wp.media.view.Frame} Returns itself to allow chaining |
| | 4425 | */ |
| | 4426 | reset: function() { |
| | 4427 | this.states.invoke( 'trigger', 'reset' ); |
| | 4428 | return this; |
| | 4429 | }, |
| | 4430 | /** |
| | 4431 | * Map activeMode collection events to the frame. |
| | 4432 | */ |
| | 4433 | triggerModeEvents: function( model, collection, options ) { |
| | 4434 | var collectionEvent, |
| | 4435 | modeEventMap = { |
| | 4436 | add: 'activate', |
| | 4437 | remove: 'deactivate' |
| | 4438 | }, |
| | 4439 | eventToTrigger; |
| | 4440 | // Probably a better way to do this. |
| | 4441 | _.each( options, function( value, key ) { |
| | 4442 | if ( value ) { |
| | 4443 | collectionEvent = key; |
| | 4444 | } |
| | 4445 | } ); |
| | 4446 | |
| | 4447 | if ( ! _.has( modeEventMap, collectionEvent ) ) { |
| | 4448 | return; |
| | 4449 | } |
| | 4450 | |
| | 4451 | eventToTrigger = model.get('id') + ':' + modeEventMap[collectionEvent]; |
| | 4452 | this.trigger( eventToTrigger ); |
| | 4453 | }, |
| | 4454 | /** |
| | 4455 | * Activate a mode on the frame. |
| | 4456 | * |
| | 4457 | * @param string mode Mode ID. |
| | 4458 | * @returns {this} Returns itself to allow chaining. |
| | 4459 | */ |
| | 4460 | activateMode: function( mode ) { |
| | 4461 | // Bail if the mode is already active. |
| | 4462 | if ( this.isModeActive( mode ) ) { |
| | 4463 | return; |
| | 4464 | } |
| | 4465 | this.activeModes.add( [ { id: mode } ] ); |
| | 4466 | // Add a CSS class to the frame so elements can be styled for the mode. |
| | 4467 | this.$el.addClass( 'mode-' + mode ); |
| | 4468 | |
| | 4469 | return this; |
| | 4470 | }, |
| | 4471 | /** |
| | 4472 | * Deactivate a mode on the frame. |
| | 4473 | * |
| | 4474 | * @param string mode Mode ID. |
| | 4475 | * @returns {this} Returns itself to allow chaining. |
| | 4476 | */ |
| | 4477 | deactivateMode: function( mode ) { |
| | 4478 | // Bail if the mode isn't active. |
| | 4479 | if ( ! this.isModeActive( mode ) ) { |
| | 4480 | return this; |
| | 4481 | } |
| | 4482 | this.activeModes.remove( this.activeModes.where( { id: mode } ) ); |
| | 4483 | this.$el.removeClass( 'mode-' + mode ); |
| | 4484 | /** |
| | 4485 | * Frame mode deactivation event. |
| | 4486 | * |
| | 4487 | * @event this#{mode}:deactivate |
| | 4488 | */ |
| | 4489 | this.trigger( mode + ':deactivate' ); |
| | 4490 | |
| | 4491 | return this; |
| | 4492 | }, |
| | 4493 | /** |
| | 4494 | * Check if a mode is enabled on the frame. |
| | 4495 | * |
| | 4496 | * @param string mode Mode ID. |
| | 4497 | * @return bool |
| | 4498 | */ |
| | 4499 | isModeActive: function( mode ) { |
| | 4500 | return Boolean( this.activeModes.where( { id: mode } ).length ); |
| | 4501 | } |
| | 4502 | }); |
| | 4503 | |
| | 4504 | // Make the `Frame` a `StateMachine`. |
| | 4505 | _.extend( Frame.prototype, StateMachine.prototype ); |
| | 4506 | |
| | 4507 | module.exports = Frame; |
| | 4508 | },{"../controllers/region.js":5,"../controllers/state-machine.js":6,"../controllers/state.js":7,"./view.js":55}],29:[function(require,module,exports){ |
| | 4509 | /** |
| | 4510 | * wp.media.view.MediaFrame.AudioDetails |
| | 4511 | * |
| | 4512 | * @constructor |
| | 4513 | * @augments wp.media.view.MediaFrame.MediaDetails |
| | 4514 | * @augments wp.media.view.MediaFrame.Select |
| | 4515 | * @augments wp.media.view.MediaFrame |
| | 4516 | * @augments wp.media.view.Frame |
| | 4517 | * @augments wp.media.View |
| | 4518 | * @augments wp.Backbone.View |
| | 4519 | * @augments Backbone.View |
| | 4520 | * @mixes wp.media.controller.StateMachine |
| | 4521 | */ |
| | 4522 | var MediaDetails = require( './media-details' ), |
| | 4523 | MediaLibrary = require( '../../controllers/media-library.js' ), |
| | 4524 | AudioDetailsView = require( '../audio-details.js' ), |
| | 4525 | AudioDetailsController = require( '../../controllers/audio-details.js' ), |
| | 4526 | l10n = wp.media.view.l10n, |
| | 4527 | AudioDetails; |
| | 4528 | |
| | 4529 | AudioDetails = MediaDetails.extend({ |
| | 4530 | defaults: { |
| | 4531 | id: 'audio', |
| | 4532 | url: '', |
| | 4533 | menu: 'audio-details', |
| | 4534 | content: 'audio-details', |
| | 4535 | toolbar: 'audio-details', |
| | 4536 | type: 'link', |
| | 4537 | title: l10n.audioDetailsTitle, |
| | 4538 | priority: 120 |
| | 4539 | }, |
| | 4540 | |
| | 4541 | initialize: function( options ) { |
| | 4542 | options.DetailsView = AudioDetailsView; |
| | 4543 | options.cancelText = l10n.audioDetailsCancel; |
| | 4544 | options.addText = l10n.audioAddSourceTitle; |
| | 4545 | |
| | 4546 | MediaDetails.prototype.initialize.call( this, options ); |
| | 4547 | }, |
| | 4548 | |
| | 4549 | bindHandlers: function() { |
| | 4550 | MediaDetails.prototype.bindHandlers.apply( this, arguments ); |
| | 4551 | |
| | 4552 | this.on( 'toolbar:render:replace-audio', this.renderReplaceToolbar, this ); |
| | 4553 | this.on( 'toolbar:render:add-audio-source', this.renderAddSourceToolbar, this ); |
| | 4554 | }, |
| | 4555 | |
| | 4556 | createStates: function() { |
| | 4557 | this.states.add([ |
| | 4558 | new AudioDetailsController( { |
| | 4559 | media: this.media |
| | 4560 | } ), |
| | 4561 | |
| | 4562 | new MediaLibrary( { |
| | 4563 | type: 'audio', |
| | 4564 | id: 'replace-audio', |
| | 4565 | title: l10n.audioReplaceTitle, |
| | 4566 | toolbar: 'replace-audio', |
| | 4567 | media: this.media, |
| | 4568 | menu: 'audio-details' |
| | 4569 | } ), |
| | 4570 | |
| | 4571 | new MediaLibrary( { |
| | 4572 | type: 'audio', |
| | 4573 | id: 'add-audio-source', |
| | 4574 | title: l10n.audioAddSourceTitle, |
| | 4575 | toolbar: 'add-audio-source', |
| | 4576 | media: this.media, |
| | 4577 | menu: false |
| | 4578 | } ) |
| | 4579 | ]); |
| | 4580 | } |
| | 4581 | }); |
| | 4582 | |
| | 4583 | module.exports = AudioDetails; |
| | 4584 | },{"../../controllers/audio-details.js":2,"../../controllers/media-library.js":4,"../audio-details.js":25,"./media-details":30}],30:[function(require,module,exports){ |
| | 4585 | /** |
| | 4586 | * wp.media.view.MediaFrame.MediaDetails |
| | 4587 | * |
| | 4588 | * @constructor |
| | 4589 | * @augments wp.media.view.MediaFrame.Select |
| | 4590 | * @augments wp.media.view.MediaFrame |
| | 4591 | * @augments wp.media.view.Frame |
| | 4592 | * @augments wp.media.View |
| | 4593 | * @augments wp.Backbone.View |
| | 4594 | * @augments Backbone.View |
| | 4595 | * @mixes wp.media.controller.StateMachine |
| | 4596 | */ |
| | 4597 | var View = require( '../view.js' ), |
| | 4598 | Toolbar = require( '../toolbar.js' ), |
| | 4599 | Select = require( './select.js' ), |
| | 4600 | Selection = require( '../../models/selection.js' ), |
| | 4601 | PostMedia = require( '../../models/post-media.js' ), |
| | 4602 | l10n = wp.media.view.l10n, |
| | 4603 | MediaDetails; |
| | 4604 | |
| | 4605 | MediaDetails = Select.extend({ |
| | 4606 | defaults: { |
| | 4607 | id: 'media', |
| | 4608 | url: '', |
| | 4609 | menu: 'media-details', |
| | 4610 | content: 'media-details', |
| | 4611 | toolbar: 'media-details', |
| | 4612 | type: 'link', |
| | 4613 | priority: 120 |
| | 4614 | }, |
| | 4615 | |
| | 4616 | initialize: function( options ) { |
| | 4617 | this.DetailsView = options.DetailsView; |
| | 4618 | this.cancelText = options.cancelText; |
| | 4619 | this.addText = options.addText; |
| | 4620 | |
| | 4621 | this.media = new PostMedia( options.metadata ); |
| | 4622 | this.options.selection = new Selection( this.media.attachment, { multiple: false } ); |
| | 4623 | Select.prototype.initialize.apply( this, arguments ); |
| | 4624 | }, |
| | 4625 | |
| | 4626 | bindHandlers: function() { |
| | 4627 | var menu = this.defaults.menu; |
| | 4628 | |
| | 4629 | Select.prototype.bindHandlers.apply( this, arguments ); |
| | 4630 | |
| | 4631 | this.on( 'menu:create:' + menu, this.createMenu, this ); |
| | 4632 | this.on( 'content:render:' + menu, this.renderDetailsContent, this ); |
| | 4633 | this.on( 'menu:render:' + menu, this.renderMenu, this ); |
| | 4634 | this.on( 'toolbar:render:' + menu, this.renderDetailsToolbar, this ); |
| | 4635 | }, |
| | 4636 | |
| | 4637 | renderDetailsContent: function() { |
| | 4638 | var view = new this.DetailsView({ |
| | 4639 | controller: this, |
| | 4640 | model: this.state().media, |
| | 4641 | attachment: this.state().media.attachment |
| | 4642 | }).render(); |
| | 4643 | |
| | 4644 | this.content.set( view ); |
| | 4645 | }, |
| | 4646 | |
| | 4647 | renderMenu: function( view ) { |
| | 4648 | var lastState = this.lastState(), |
| | 4649 | previous = lastState && lastState.id, |
| | 4650 | frame = this; |
| | 4651 | |
| | 4652 | view.set({ |
| | 4653 | cancel: { |
| | 4654 | text: this.cancelText, |
| | 4655 | priority: 20, |
| | 4656 | click: function() { |
| | 4657 | if ( previous ) { |
| | 4658 | frame.setState( previous ); |
| | 4659 | } else { |
| | 4660 | frame.close(); |
| | 4661 | } |
| | 4662 | } |
| | 4663 | }, |
| | 4664 | separateCancel: new View({ |
| | 4665 | className: 'separator', |
| | 4666 | priority: 40 |
| | 4667 | }) |
| | 4668 | }); |
| | 4669 | |
| | 4670 | }, |
| | 4671 | |
| | 4672 | setPrimaryButton: function(text, handler) { |
| | 4673 | this.toolbar.set( new Toolbar({ |
| | 4674 | controller: this, |
| | 4675 | items: { |
| | 4676 | button: { |
| | 4677 | style: 'primary', |
| | 4678 | text: text, |
| | 4679 | priority: 80, |
| | 4680 | click: function() { |
| | 4681 | var controller = this.controller; |
| | 4682 | handler.call( this, controller, controller.state() ); |
| | 4683 | // Restore and reset the default state. |
| | 4684 | controller.setState( controller.options.state ); |
| | 4685 | controller.reset(); |
| | 4686 | } |
| | 4687 | } |
| | 4688 | } |
| | 4689 | }) ); |
| | 4690 | }, |
| | 4691 | |
| | 4692 | renderDetailsToolbar: function() { |
| | 4693 | this.setPrimaryButton( l10n.update, function( controller, state ) { |
| | 4694 | controller.close(); |
| | 4695 | state.trigger( 'update', controller.media.toJSON() ); |
| | 4696 | } ); |
| | 4697 | }, |
| | 4698 | |
| | 4699 | renderReplaceToolbar: function() { |
| | 4700 | this.setPrimaryButton( l10n.replace, function( controller, state ) { |
| | 4701 | var attachment = state.get( 'selection' ).single(); |
| | 4702 | controller.media.changeAttachment( attachment ); |
| | 4703 | state.trigger( 'replace', controller.media.toJSON() ); |
| | 4704 | } ); |
| | 4705 | }, |
| | 4706 | |
| | 4707 | renderAddSourceToolbar: function() { |
| | 4708 | this.setPrimaryButton( this.addText, function( controller, state ) { |
| | 4709 | var attachment = state.get( 'selection' ).single(); |
| | 4710 | controller.media.setSource( attachment ); |
| | 4711 | state.trigger( 'add-source', controller.media.toJSON() ); |
| | 4712 | } ); |
| | 4713 | } |
| | 4714 | }); |
| | 4715 | |
| | 4716 | module.exports = MediaDetails; |
| | 4717 | },{"../../models/post-media.js":11,"../../models/selection.js":13,"../toolbar.js":48,"../view.js":55,"./select.js":31}],31:[function(require,module,exports){ |
| | 4718 | /** |
| | 4719 | * wp.media.view.MediaFrame.Select |
| | 4720 | * |
| | 4721 | * A frame for selecting an item or items from the media library. |
| | 4722 | * |
| | 4723 | * @class |
| | 4724 | * @augments wp.media.view.MediaFrame |
| | 4725 | * @augments wp.media.view.Frame |
| | 4726 | * @augments wp.media.View |
| | 4727 | * @augments wp.Backbone.View |
| | 4728 | * @augments Backbone.View |
| | 4729 | * @mixes wp.media.controller.StateMachine |
| | 4730 | */ |
| | 4731 | |
| | 4732 | var MediaFrame = require( '../media-frame.js' ), |
| | 4733 | Library = require( '../../controllers/library.js' ), |
| | 4734 | AttachmentsModel = require( '../../models/attachments.js' ), |
| | 4735 | SelectionModel = require( '../../models/selection.js' ), |
| | 4736 | AttachmentsBrowser = require( '../attachments/browser.js' ), |
| | 4737 | UploaderInline = require( '../uploader/inline.js' ), |
| | 4738 | ToolbarSelect = require( '../toolbar/select.js' ), |
| | 4739 | l10n = wp.media.view.l10n, |
| | 4740 | Select; |
| | 4741 | |
| | 4742 | Select = MediaFrame.extend({ |
| | 4743 | initialize: function() { |
| | 4744 | // Call 'initialize' directly on the parent class. |
| | 4745 | MediaFrame.prototype.initialize.apply( this, arguments ); |
| | 4746 | |
| | 4747 | _.defaults( this.options, { |
| | 4748 | selection: [], |
| | 4749 | library: {}, |
| | 4750 | multiple: false, |
| | 4751 | state: 'library' |
| | 4752 | }); |
| | 4753 | |
| | 4754 | this.createSelection(); |
| | 4755 | this.createStates(); |
| | 4756 | this.bindHandlers(); |
| | 4757 | }, |
| | 4758 | |
| | 4759 | /** |
| | 4760 | * Attach a selection collection to the frame. |
| | 4761 | * |
| | 4762 | * A selection is a collection of attachments used for a specific purpose |
| | 4763 | * by a media frame. e.g. Selecting an attachment (or many) to insert into |
| | 4764 | * post content. |
| | 4765 | * |
| | 4766 | * @see media.model.Selection |
| | 4767 | */ |
| | 4768 | createSelection: function() { |
| | 4769 | var selection = this.options.selection; |
| | 4770 | |
| | 4771 | if ( ! (selection instanceof SelectionModel) ) { |
| | 4772 | this.options.selection = new SelectionModel( selection, { |
| | 4773 | multiple: this.options.multiple |
| | 4774 | }); |
| | 4775 | } |
| | 4776 | |
| | 4777 | this._selection = { |
| | 4778 | attachments: new AttachmentsModel(), |
| | 4779 | difference: [] |
| | 4780 | }; |
| | 4781 | }, |
| | 4782 | |
| | 4783 | /** |
| | 4784 | * Create the default states on the frame. |
| | 4785 | */ |
| | 4786 | createStates: function() { |
| | 4787 | var options = this.options; |
| | 4788 | |
| | 4789 | if ( this.options.states ) { |
| | 4790 | return; |
| | 4791 | } |
| | 4792 | |
| | 4793 | // Add the default states. |
| | 4794 | this.states.add([ |
| | 4795 | // Main states. |
| | 4796 | new Library({ |
| | 4797 | library: wp.media.query( options.library ), |
| | 4798 | multiple: options.multiple, |
| | 4799 | title: options.title, |
| | 4800 | priority: 20 |
| | 4801 | }) |
| | 4802 | ]); |
| | 4803 | }, |
| | 4804 | |
| | 4805 | /** |
| | 4806 | * Bind region mode event callbacks. |
| | 4807 | * |
| | 4808 | * @see media.controller.Region.render |
| | 4809 | */ |
| | 4810 | bindHandlers: function() { |
| | 4811 | this.on( 'router:create:browse', this.createRouter, this ); |
| | 4812 | this.on( 'router:render:browse', this.browseRouter, this ); |
| | 4813 | this.on( 'content:create:browse', this.browseContent, this ); |
| | 4814 | this.on( 'content:render:upload', this.uploadContent, this ); |
| | 4815 | this.on( 'toolbar:create:select', this.createSelectToolbar, this ); |
| | 4816 | }, |
| | 4817 | |
| | 4818 | /** |
| | 4819 | * Render callback for the router region in the `browse` mode. |
| | 4820 | * |
| | 4821 | * @param {wp.media.view.Router} routerView |
| | 4822 | */ |
| | 4823 | browseRouter: function( routerView ) { |
| | 4824 | routerView.set({ |
| | 4825 | upload: { |
| | 4826 | text: l10n.uploadFilesTitle, |
| | 4827 | priority: 20 |
| | 4828 | }, |
| | 4829 | browse: { |
| | 4830 | text: l10n.mediaLibraryTitle, |
| | 4831 | priority: 40 |
| | 4832 | } |
| | 4833 | }); |
| | 4834 | }, |
| | 4835 | |
| | 4836 | /** |
| | 4837 | * Render callback for the content region in the `browse` mode. |
| | 4838 | * |
| | 4839 | * @param {wp.media.controller.Region} contentRegion |
| | 4840 | */ |
| | 4841 | browseContent: function( contentRegion ) { |
| | 4842 | var state = this.state(); |
| | 4843 | |
| | 4844 | this.$el.removeClass('hide-toolbar'); |
| | 4845 | |
| | 4846 | // Browse our library of attachments. |
| | 4847 | contentRegion.view = new AttachmentsBrowser({ |
| | 4848 | controller: this, |
| | 4849 | collection: state.get('library'), |
| | 4850 | selection: state.get('selection'), |
| | 4851 | model: state, |
| | 4852 | sortable: state.get('sortable'), |
| | 4853 | search: state.get('searchable'), |
| | 4854 | filters: state.get('filterable'), |
| | 4855 | display: state.has('display') ? state.get('display') : state.get('displaySettings'), |
| | 4856 | dragInfo: state.get('dragInfo'), |
| | 4857 | |
| | 4858 | idealColumnWidth: state.get('idealColumnWidth'), |
| | 4859 | suggestedWidth: state.get('suggestedWidth'), |
| | 4860 | suggestedHeight: state.get('suggestedHeight'), |
| | 4861 | |
| | 4862 | AttachmentView: state.get('AttachmentView') |
| | 4863 | }); |
| | 4864 | }, |
| | 4865 | |
| | 4866 | /** |
| | 4867 | * Render callback for the content region in the `upload` mode. |
| | 4868 | */ |
| | 4869 | uploadContent: function() { |
| | 4870 | this.$el.removeClass( 'hide-toolbar' ); |
| | 4871 | this.content.set( new UploaderInline({ |
| | 4872 | controller: this |
| | 4873 | }) ); |
| | 4874 | }, |
| | 4875 | |
| | 4876 | /** |
| | 4877 | * Toolbars |
| | 4878 | * |
| | 4879 | * @param {Object} toolbar |
| | 4880 | * @param {Object} [options={}] |
| | 4881 | * @this wp.media.controller.Region |
| | 4882 | */ |
| | 4883 | createSelectToolbar: function( toolbar, options ) { |
| | 4884 | options = options || this.options.button || {}; |
| | 4885 | options.controller = this; |
| | 4886 | |
| | 4887 | toolbar.view = new ToolbarSelect( options ); |
| | 4888 | } |
| | 4889 | }); |
| | 4890 | |
| | 4891 | module.exports = Select; |
| | 4892 | },{"../../controllers/library.js":3,"../../models/attachments.js":10,"../../models/selection.js":13,"../attachments/browser.js":24,"../media-frame.js":36,"../toolbar/select.js":49,"../uploader/inline.js":50}],32:[function(require,module,exports){ |
| | 4893 | /** |
| | 4894 | * wp.media.view.MediaFrame.VideoDetails |
| | 4895 | * |
| | 4896 | * @constructor |
| | 4897 | * @augments wp.media.view.MediaFrame.MediaDetails |
| | 4898 | * @augments wp.media.view.MediaFrame.Select |
| | 4899 | * @augments wp.media.view.MediaFrame |
| | 4900 | * @augments wp.media.view.Frame |
| | 4901 | * @augments wp.media.View |
| | 4902 | * @augments wp.Backbone.View |
| | 4903 | * @augments Backbone.View |
| | 4904 | * @mixes wp.media.controller.StateMachine |
| | 4905 | */ |
| | 4906 | var MediaDetails = require( './media-details' ), |
| | 4907 | MediaLibrary = require( '../../controllers/media-library.js' ), |
| | 4908 | VideoDetailsView = require( '../video-details.js' ), |
| | 4909 | VideoDetailsController = require( '../../controllers/video-details.js' ), |
| | 4910 | l10n = wp.media.view.l10n, |
| | 4911 | VideoDetails; |
| | 4912 | |
| | 4913 | VideoDetails = MediaDetails.extend({ |
| | 4914 | defaults: { |
| | 4915 | id: 'video', |
| | 4916 | url: '', |
| | 4917 | menu: 'video-details', |
| | 4918 | content: 'video-details', |
| | 4919 | toolbar: 'video-details', |
| | 4920 | type: 'link', |
| | 4921 | title: l10n.videoDetailsTitle, |
| | 4922 | priority: 120 |
| | 4923 | }, |
| | 4924 | |
| | 4925 | initialize: function( options ) { |
| | 4926 | options.DetailsView = VideoDetailsView; |
| | 4927 | options.cancelText = l10n.videoDetailsCancel; |
| | 4928 | options.addText = l10n.videoAddSourceTitle; |
| | 4929 | |
| | 4930 | MediaDetails.prototype.initialize.call( this, options ); |
| | 4931 | }, |
| | 4932 | |
| | 4933 | bindHandlers: function() { |
| | 4934 | MediaDetails.prototype.bindHandlers.apply( this, arguments ); |
| | 4935 | |
| | 4936 | this.on( 'toolbar:render:replace-video', this.renderReplaceToolbar, this ); |
| | 4937 | this.on( 'toolbar:render:add-video-source', this.renderAddSourceToolbar, this ); |
| | 4938 | this.on( 'toolbar:render:select-poster-image', this.renderSelectPosterImageToolbar, this ); |
| | 4939 | this.on( 'toolbar:render:add-track', this.renderAddTrackToolbar, this ); |
| | 4940 | }, |
| | 4941 | |
| | 4942 | createStates: function() { |
| | 4943 | this.states.add([ |
| | 4944 | new VideoDetailsController({ |
| | 4945 | media: this.media |
| | 4946 | }), |
| | 4947 | |
| | 4948 | new MediaLibrary( { |
| | 4949 | type: 'video', |
| | 4950 | id: 'replace-video', |
| | 4951 | title: l10n.videoReplaceTitle, |
| | 4952 | toolbar: 'replace-video', |
| | 4953 | media: this.media, |
| | 4954 | menu: 'video-details' |
| | 4955 | } ), |
| | 4956 | |
| | 4957 | new MediaLibrary( { |
| | 4958 | type: 'video', |
| | 4959 | id: 'add-video-source', |
| | 4960 | title: l10n.videoAddSourceTitle, |
| | 4961 | toolbar: 'add-video-source', |
| | 4962 | media: this.media, |
| | 4963 | menu: false |
| | 4964 | } ), |
| | 4965 | |
| | 4966 | new MediaLibrary( { |
| | 4967 | type: 'image', |
| | 4968 | id: 'select-poster-image', |
| | 4969 | title: l10n.videoSelectPosterImageTitle, |
| | 4970 | toolbar: 'select-poster-image', |
| | 4971 | media: this.media, |
| | 4972 | menu: 'video-details' |
| | 4973 | } ), |
| | 4974 | |
| | 4975 | new MediaLibrary( { |
| | 4976 | type: 'text', |
| | 4977 | id: 'add-track', |
| | 4978 | title: l10n.videoAddTrackTitle, |
| | 4979 | toolbar: 'add-track', |
| | 4980 | media: this.media, |
| | 4981 | menu: 'video-details' |
| | 4982 | } ) |
| | 4983 | ]); |
| | 4984 | }, |
| | 4985 | |
| | 4986 | renderSelectPosterImageToolbar: function() { |
| | 4987 | this.setPrimaryButton( l10n.videoSelectPosterImageTitle, function( controller, state ) { |
| | 4988 | var urls = [], attachment = state.get( 'selection' ).single(); |
| | 4989 | |
| | 4990 | controller.media.set( 'poster', attachment.get( 'url' ) ); |
| | 4991 | state.trigger( 'set-poster-image', controller.media.toJSON() ); |
| | 4992 | |
| | 4993 | _.each( wp.media.view.settings.embedExts, function (ext) { |
| | 4994 | if ( controller.media.get( ext ) ) { |
| | 4995 | urls.push( controller.media.get( ext ) ); |
| | 4996 | } |
| | 4997 | } ); |
| | 4998 | |
| | 4999 | wp.ajax.send( 'set-attachment-thumbnail', { |
| | 5000 | data : { |
| | 5001 | urls: urls, |
| | 5002 | thumbnail_id: attachment.get( 'id' ) |
| | 5003 | } |
| | 5004 | } ); |
| | 5005 | } ); |
| | 5006 | }, |
| | 5007 | |
| | 5008 | renderAddTrackToolbar: function() { |
| | 5009 | this.setPrimaryButton( l10n.videoAddTrackTitle, function( controller, state ) { |
| | 5010 | var attachment = state.get( 'selection' ).single(), |
| | 5011 | content = controller.media.get( 'content' ); |
| | 5012 | |
| | 5013 | if ( -1 === content.indexOf( attachment.get( 'url' ) ) ) { |
| | 5014 | content += [ |
| | 5015 | '<track srclang="en" label="English"kind="subtitles" src="', |
| | 5016 | attachment.get( 'url' ), |
| | 5017 | '" />' |
| | 5018 | ].join(''); |
| | 5019 | |
| | 5020 | controller.media.set( 'content', content ); |
| | 5021 | } |
| | 5022 | state.trigger( 'add-track', controller.media.toJSON() ); |
| | 5023 | } ); |
| | 5024 | } |
| | 5025 | }); |
| | 5026 | |
| | 5027 | module.exports = VideoDetails; |
| | 5028 | },{"../../controllers/media-library.js":4,"../../controllers/video-details.js":8,"../video-details.js":54,"./media-details":30}],33:[function(require,module,exports){ |
| | 5029 | /** |
| | 5030 | * wp.media.view.Iframe |
| | 5031 | * |
| | 5032 | * @class |
| | 5033 | * @augments wp.media.View |
| | 5034 | * @augments wp.Backbone.View |
| | 5035 | * @augments Backbone.View |
| | 5036 | */ |
| | 5037 | var View = require( './view.js' ), |
| | 5038 | Iframe; |
| | 5039 | |
| | 5040 | Iframe = View.extend({ |
| | 5041 | className: 'media-iframe', |
| | 5042 | /** |
| | 5043 | * @returns {wp.media.view.Iframe} Returns itself to allow chaining |
| | 5044 | */ |
| | 5045 | render: function() { |
| | 5046 | this.views.detach(); |
| | 5047 | this.$el.html( '<iframe src="' + this.controller.state().get('src') + '" />' ); |
| | 5048 | this.views.render(); |
| | 5049 | return this; |
| | 5050 | } |
| | 5051 | }); |
| | 5052 | |
| | 5053 | module.exports = Iframe; |
| | 5054 | },{"./view.js":55}],34:[function(require,module,exports){ |
| | 5055 | /** |
| | 5056 | * @class |
| | 5057 | * @augments wp.media.View |
| | 5058 | * @augments wp.Backbone.View |
| | 5059 | * @augments Backbone.View |
| | 5060 | */ |
| | 5061 | var View = require( './view.js' ), |
| | 5062 | Label; |
| | 5063 | |
| | 5064 | Label = View.extend({ |
| | 5065 | tagName: 'label', |
| | 5066 | className: 'screen-reader-text', |
| | 5067 | |
| | 5068 | initialize: function() { |
| | 5069 | this.value = this.options.value; |
| | 5070 | }, |
| | 5071 | |
| | 5072 | render: function() { |
| | 5073 | this.$el.html( this.value ); |
| | 5074 | |
| | 5075 | return this; |
| | 5076 | } |
| | 5077 | }); |
| | 5078 | |
| | 5079 | module.exports = Label; |
| | 5080 | },{"./view.js":55}],35:[function(require,module,exports){ |
| | 5081 | /** |
| | 5082 | * wp.media.view.MediaDetails |
| | 5083 | * |
| | 5084 | * @constructor |
| | 5085 | * @augments wp.media.view.Settings.AttachmentDisplay |
| | 5086 | * @augments wp.media.view.Settings |
| | 5087 | * @augments wp.media.View |
| | 5088 | * @augments wp.Backbone.View |
| | 5089 | * @augments Backbone.View |
| | 5090 | */ |
| | 5091 | var AttachmentDisplay = require( './settings/attachment-display.js' ), |
| | 5092 | $ = jQuery, |
| | 5093 | MediaDetails; |
| | 5094 | |
| | 5095 | MediaDetails = AttachmentDisplay.extend({ |
| | 5096 | initialize: function() { |
| | 5097 | _.bindAll(this, 'success'); |
| | 5098 | this.players = []; |
| | 5099 | this.listenTo( this.controller, 'close', wp.media.mixin.unsetPlayers ); |
| | 5100 | this.on( 'ready', this.setPlayer ); |
| | 5101 | this.on( 'media:setting:remove', wp.media.mixin.unsetPlayers, this ); |
| | 5102 | this.on( 'media:setting:remove', this.render ); |
| | 5103 | this.on( 'media:setting:remove', this.setPlayer ); |
| | 5104 | this.events = _.extend( this.events, { |
| | 5105 | 'click .remove-setting' : 'removeSetting', |
| | 5106 | 'change .content-track' : 'setTracks', |
| | 5107 | 'click .remove-track' : 'setTracks', |
| | 5108 | 'click .add-media-source' : 'addSource' |
| | 5109 | } ); |
| | 5110 | |
| | 5111 | AttachmentDisplay.prototype.initialize.apply( this, arguments ); |
| | 5112 | }, |
| | 5113 | |
| | 5114 | prepare: function() { |
| | 5115 | return _.defaults({ |
| | 5116 | model: this.model.toJSON() |
| | 5117 | }, this.options ); |
| | 5118 | }, |
| | 5119 | |
| | 5120 | /** |
| | 5121 | * Remove a setting's UI when the model unsets it |
| | 5122 | * |
| | 5123 | * @fires wp.media.view.MediaDetails#media:setting:remove |
| | 5124 | * |
| | 5125 | * @param {Event} e |
| | 5126 | */ |
| | 5127 | removeSetting : function(e) { |
| | 5128 | var wrap = $( e.currentTarget ).parent(), setting; |
| | 5129 | setting = wrap.find( 'input' ).data( 'setting' ); |
| | 5130 | |
| | 5131 | if ( setting ) { |
| | 5132 | this.model.unset( setting ); |
| | 5133 | this.trigger( 'media:setting:remove', this ); |
| | 5134 | } |
| | 5135 | |
| | 5136 | wrap.remove(); |
| | 5137 | }, |
| | 5138 | |
| | 5139 | /** |
| | 5140 | * |
| | 5141 | * @fires wp.media.view.MediaDetails#media:setting:remove |
| | 5142 | */ |
| | 5143 | setTracks : function() { |
| | 5144 | var tracks = ''; |
| | 5145 | |
| | 5146 | _.each( this.$('.content-track'), function(track) { |
| | 5147 | tracks += $( track ).val(); |
| | 5148 | } ); |
| | 5149 | |
| | 5150 | this.model.set( 'content', tracks ); |
| | 5151 | this.trigger( 'media:setting:remove', this ); |
| | 5152 | }, |
| | 5153 | |
| | 5154 | addSource : function( e ) { |
| | 5155 | this.controller.lastMime = $( e.currentTarget ).data( 'mime' ); |
| | 5156 | this.controller.setState( 'add-' + this.controller.defaults.id + '-source' ); |
| | 5157 | }, |
| | 5158 | |
| | 5159 | /** |
| | 5160 | * @global MediaElementPlayer |
| | 5161 | */ |
| | 5162 | setPlayer : function() { |
| | 5163 | if ( ! this.players.length && this.media ) { |
| | 5164 | this.players.push( new MediaElementPlayer( this.media, this.settings ) ); |
| | 5165 | } |
| | 5166 | }, |
| | 5167 | |
| | 5168 | /** |
| | 5169 | * @abstract |
| | 5170 | */ |
| | 5171 | setMedia : function() { |
| | 5172 | return this; |
| | 5173 | }, |
| | 5174 | |
| | 5175 | success : function(mejs) { |
| | 5176 | var autoplay = mejs.attributes.autoplay && 'false' !== mejs.attributes.autoplay; |
| | 5177 | |
| | 5178 | if ( 'flash' === mejs.pluginType && autoplay ) { |
| | 5179 | mejs.addEventListener( 'canplay', function() { |
| | 5180 | mejs.play(); |
| | 5181 | }, false ); |
| | 5182 | } |
| | 5183 | |
| | 5184 | this.mejs = mejs; |
| | 5185 | }, |
| | 5186 | |
| | 5187 | /** |
| | 5188 | * @returns {media.view.MediaDetails} Returns itself to allow chaining |
| | 5189 | */ |
| | 5190 | render: function() { |
| | 5191 | var self = this; |
| | 5192 | |
| | 5193 | AttachmentDisplay.prototype.render.apply( this, arguments ); |
| | 5194 | setTimeout( function() { self.resetFocus(); }, 10 ); |
| | 5195 | |
| | 5196 | this.settings = _.defaults( { |
| | 5197 | success : this.success |
| | 5198 | }, wp.media.mixin.mejsSettings ); |
| | 5199 | |
| | 5200 | return this.setMedia(); |
| | 5201 | }, |
| | 5202 | |
| | 5203 | resetFocus: function() { |
| | 5204 | this.$( '.embed-media-settings' ).scrollTop( 0 ); |
| | 5205 | } |
| | 5206 | }, { |
| | 5207 | instances : 0, |
| | 5208 | /** |
| | 5209 | * When multiple players in the DOM contain the same src, things get weird. |
| | 5210 | * |
| | 5211 | * @param {HTMLElement} elem |
| | 5212 | * @returns {HTMLElement} |
| | 5213 | */ |
| | 5214 | prepareSrc : function( elem ) { |
| | 5215 | var i = MediaDetails.instances++; |
| | 5216 | _.each( $( elem ).find( 'source' ), function( source ) { |
| | 5217 | source.src = [ |
| | 5218 | source.src, |
| | 5219 | source.src.indexOf('?') > -1 ? '&' : '?', |
| | 5220 | '_=', |
| | 5221 | i |
| | 5222 | ].join(''); |
| | 5223 | } ); |
| | 5224 | |
| | 5225 | return elem; |
| | 5226 | } |
| | 5227 | }); |
| | 5228 | |
| | 5229 | module.exports = MediaDetails; |
| | 5230 | },{"./settings/attachment-display.js":45}],36:[function(require,module,exports){ |
| | 5231 | /** |
| | 5232 | * wp.media.view.MediaFrame |
| | 5233 | * |
| | 5234 | * The frame used to create the media modal. |
| | 5235 | * |
| | 5236 | * @class |
| | 5237 | * @augments wp.media.view.Frame |
| | 5238 | * @augments wp.media.View |
| | 5239 | * @augments wp.Backbone.View |
| | 5240 | * @augments Backbone.View |
| | 5241 | * @mixes wp.media.controller.StateMachine |
| | 5242 | */ |
| | 5243 | var View = require( './view.js' ), |
| | 5244 | Frame = require( './frame.js' ), |
| | 5245 | Modal = require( './modal.js' ), |
| | 5246 | UploaderWindow = require( './uploader/window.js' ), |
| | 5247 | Menu = require( './menu.js' ), |
| | 5248 | Toolbar = require( './toolbar.js' ), |
| | 5249 | Router = require( './router.js' ), |
| | 5250 | Iframe = require( './iframe.js' ), |
| | 5251 | $ = jQuery, |
| | 5252 | MediaFrame; |
| | 5253 | |
| | 5254 | MediaFrame = Frame.extend({ |
| | 5255 | className: 'media-frame', |
| | 5256 | template: wp.template('media-frame'), |
| | 5257 | regions: ['menu','title','content','toolbar','router'], |
| | 5258 | |
| | 5259 | events: { |
| | 5260 | 'click div.media-frame-title h1': 'toggleMenu' |
| | 5261 | }, |
| | 5262 | |
| | 5263 | /** |
| | 5264 | * @global wp.Uploader |
| | 5265 | */ |
| | 5266 | initialize: function() { |
| | 5267 | Frame.prototype.initialize.apply( this, arguments ); |
| | 5268 | |
| | 5269 | _.defaults( this.options, { |
| | 5270 | title: '', |
| | 5271 | modal: true, |
| | 5272 | uploader: true |
| | 5273 | }); |
| | 5274 | |
| | 5275 | // Ensure core UI is enabled. |
| | 5276 | this.$el.addClass('wp-core-ui'); |
| | 5277 | |
| | 5278 | // Initialize modal container view. |
| | 5279 | if ( this.options.modal ) { |
| | 5280 | this.modal = new Modal({ |
| | 5281 | controller: this, |
| | 5282 | title: this.options.title |
| | 5283 | }); |
| | 5284 | |
| | 5285 | this.modal.content( this ); |
| | 5286 | } |
| | 5287 | |
| | 5288 | // Force the uploader off if the upload limit has been exceeded or |
| | 5289 | // if the browser isn't supported. |
| | 5290 | if ( wp.Uploader.limitExceeded || ! wp.Uploader.browser.supported ) { |
| | 5291 | this.options.uploader = false; |
| | 5292 | } |
| | 5293 | |
| | 5294 | // Initialize window-wide uploader. |
| | 5295 | if ( this.options.uploader ) { |
| | 5296 | this.uploader = new UploaderWindow({ |
| | 5297 | controller: this, |
| | 5298 | uploader: { |
| | 5299 | dropzone: this.modal ? this.modal.$el : this.$el, |
| | 5300 | container: this.$el |
| | 5301 | } |
| | 5302 | }); |
| | 5303 | this.views.set( '.media-frame-uploader', this.uploader ); |
| | 5304 | } |
| | 5305 | |
| | 5306 | this.on( 'attach', _.bind( this.views.ready, this.views ), this ); |
| | 5307 | |
| | 5308 | // Bind default title creation. |
| | 5309 | this.on( 'title:create:default', this.createTitle, this ); |
| | 5310 | this.title.mode('default'); |
| | 5311 | |
| | 5312 | this.on( 'title:render', function( view ) { |
| | 5313 | view.$el.append( '<span class="dashicons dashicons-arrow-down"></span>' ); |
| | 5314 | }); |
| | 5315 | |
| | 5316 | // Bind default menu. |
| | 5317 | this.on( 'menu:create:default', this.createMenu, this ); |
| | 5318 | }, |
| | 5319 | /** |
| | 5320 | * @returns {wp.media.view.MediaFrame} Returns itself to allow chaining |
| | 5321 | */ |
| | 5322 | render: function() { |
| | 5323 | // Activate the default state if no active state exists. |
| | 5324 | if ( ! this.state() && this.options.state ) { |
| | 5325 | this.setState( this.options.state ); |
| | 5326 | } |
| | 5327 | /** |
| | 5328 | * call 'render' directly on the parent class |
| | 5329 | */ |
| | 5330 | return Frame.prototype.render.apply( this, arguments ); |
| | 5331 | }, |
| | 5332 | /** |
| | 5333 | * @param {Object} title |
| | 5334 | * @this wp.media.controller.Region |
| | 5335 | */ |
| | 5336 | createTitle: function( title ) { |
| | 5337 | title.view = new View({ |
| | 5338 | controller: this, |
| | 5339 | tagName: 'h1' |
| | 5340 | }); |
| | 5341 | }, |
| | 5342 | /** |
| | 5343 | * @param {Object} menu |
| | 5344 | * @this wp.media.controller.Region |
| | 5345 | */ |
| | 5346 | createMenu: function( menu ) { |
| | 5347 | menu.view = new Menu({ |
| | 5348 | controller: this |
| | 5349 | }); |
| | 5350 | }, |
| | 5351 | |
| | 5352 | toggleMenu: function() { |
| | 5353 | this.$el.find( '.media-menu' ).toggleClass( 'visible' ); |
| | 5354 | }, |
| | 5355 | |
| | 5356 | /** |
| | 5357 | * @param {Object} toolbar |
| | 5358 | * @this wp.media.controller.Region |
| | 5359 | */ |
| | 5360 | createToolbar: function( toolbar ) { |
| | 5361 | toolbar.view = new Toolbar({ |
| | 5362 | controller: this |
| | 5363 | }); |
| | 5364 | }, |
| | 5365 | /** |
| | 5366 | * @param {Object} router |
| | 5367 | * @this wp.media.controller.Region |
| | 5368 | */ |
| | 5369 | createRouter: function( router ) { |
| | 5370 | router.view = new Router({ |
| | 5371 | controller: this |
| | 5372 | }); |
| | 5373 | }, |
| | 5374 | /** |
| | 5375 | * @param {Object} options |
| | 5376 | */ |
| | 5377 | createIframeStates: function( options ) { |
| | 5378 | var settings = wp.media.view.settings, |
| | 5379 | tabs = settings.tabs, |
| | 5380 | tabUrl = settings.tabUrl, |
| | 5381 | $postId; |
| | 5382 | |
| | 5383 | if ( ! tabs || ! tabUrl ) { |
| | 5384 | return; |
| | 5385 | } |
| | 5386 | |
| | 5387 | // Add the post ID to the tab URL if it exists. |
| | 5388 | $postId = $('#post_ID'); |
| | 5389 | if ( $postId.length ) { |
| | 5390 | tabUrl += '&post_id=' + $postId.val(); |
| | 5391 | } |
| | 5392 | |
| | 5393 | // Generate the tab states. |
| | 5394 | _.each( tabs, function( title, id ) { |
| | 5395 | this.state( 'iframe:' + id ).set( _.defaults({ |
| | 5396 | tab: id, |
| | 5397 | src: tabUrl + '&tab=' + id, |
| | 5398 | title: title, |
| | 5399 | content: 'iframe', |
| | 5400 | menu: 'default' |
| | 5401 | }, options ) ); |
| | 5402 | }, this ); |
| | 5403 | |
| | 5404 | this.on( 'content:create:iframe', this.iframeContent, this ); |
| | 5405 | this.on( 'content:deactivate:iframe', this.iframeContentCleanup, this ); |
| | 5406 | this.on( 'menu:render:default', this.iframeMenu, this ); |
| | 5407 | this.on( 'open', this.hijackThickbox, this ); |
| | 5408 | this.on( 'close', this.restoreThickbox, this ); |
| | 5409 | }, |
| | 5410 | |
| | 5411 | /** |
| | 5412 | * @param {Object} content |
| | 5413 | * @this wp.media.controller.Region |
| | 5414 | */ |
| | 5415 | iframeContent: function( content ) { |
| | 5416 | this.$el.addClass('hide-toolbar'); |
| | 5417 | content.view = new Iframe({ |
| | 5418 | controller: this |
| | 5419 | }); |
| | 5420 | }, |
| | 5421 | |
| | 5422 | iframeContentCleanup: function() { |
| | 5423 | this.$el.removeClass('hide-toolbar'); |
| | 5424 | }, |
| | 5425 | |
| | 5426 | iframeMenu: function( view ) { |
| | 5427 | var views = {}; |
| | 5428 | |
| | 5429 | if ( ! view ) { |
| | 5430 | return; |
| | 5431 | } |
| | 5432 | |
| | 5433 | _.each( wp.media.view.settings.tabs, function( title, id ) { |
| | 5434 | views[ 'iframe:' + id ] = { |
| | 5435 | text: this.state( 'iframe:' + id ).get('title'), |
| | 5436 | priority: 200 |
| | 5437 | }; |
| | 5438 | }, this ); |
| | 5439 | |
| | 5440 | view.set( views ); |
| | 5441 | }, |
| | 5442 | |
| | 5443 | hijackThickbox: function() { |
| | 5444 | var frame = this; |
| | 5445 | |
| | 5446 | if ( ! window.tb_remove || this._tb_remove ) { |
| | 5447 | return; |
| | 5448 | } |
| | 5449 | |
| | 5450 | this._tb_remove = window.tb_remove; |
| | 5451 | window.tb_remove = function() { |
| | 5452 | frame.close(); |
| | 5453 | frame.reset(); |
| | 5454 | frame.setState( frame.options.state ); |
| | 5455 | frame._tb_remove.call( window ); |
| | 5456 | }; |
| | 5457 | }, |
| | 5458 | |
| | 5459 | restoreThickbox: function() { |
| | 5460 | if ( ! this._tb_remove ) { |
| | 5461 | return; |
| | 5462 | } |
| | 5463 | |
| | 5464 | window.tb_remove = this._tb_remove; |
| | 5465 | delete this._tb_remove; |
| | 5466 | } |
| | 5467 | }); |
| | 5468 | |
| | 5469 | // Map some of the modal's methods to the frame. |
| | 5470 | _.each(['open','close','attach','detach','escape'], function( method ) { |
| | 5471 | /** |
| | 5472 | * @returns {wp.media.view.MediaFrame} Returns itself to allow chaining |
| | 5473 | */ |
| | 5474 | MediaFrame.prototype[ method ] = function() { |
| | 5475 | if ( this.modal ) { |
| | 5476 | this.modal[ method ].apply( this.modal, arguments ); |
| | 5477 | } |
| | 5478 | return this; |
| | 5479 | }; |
| | 5480 | }); |
| | 5481 | |
| | 5482 | module.exports = MediaFrame; |
| | 5483 | },{"./frame.js":28,"./iframe.js":33,"./menu.js":38,"./modal.js":39,"./router.js":42,"./toolbar.js":48,"./uploader/window.js":53,"./view.js":55}],37:[function(require,module,exports){ |
| | 5484 | /** |
| | 5485 | * wp.media.view.MenuItem |
| | 5486 | * |
| | 5487 | * @class |
| | 5488 | * @augments wp.media.View |
| | 5489 | * @augments wp.Backbone.View |
| | 5490 | * @augments Backbone.View |
| | 5491 | */ |
| | 5492 | var View = require( './view.js' ), |
| | 5493 | $ = jQuery, |
| | 5494 | MenuItem; |
| | 5495 | |
| | 5496 | MenuItem = View.extend({ |
| | 5497 | tagName: 'a', |
| | 5498 | className: 'media-menu-item', |
| | 5499 | |
| | 5500 | attributes: { |
| | 5501 | href: '#' |
| | 5502 | }, |
| | 5503 | |
| | 5504 | events: { |
| | 5505 | 'click': '_click' |
| | 5506 | }, |
| | 5507 | /** |
| | 5508 | * @param {Object} event |
| | 5509 | */ |
| | 5510 | _click: function( event ) { |
| | 5511 | var clickOverride = this.options.click; |
| | 5512 | |
| | 5513 | if ( event ) { |
| | 5514 | event.preventDefault(); |
| | 5515 | } |
| | 5516 | |
| | 5517 | if ( clickOverride ) { |
| | 5518 | clickOverride.call( this ); |
| | 5519 | } else { |
| | 5520 | this.click(); |
| | 5521 | } |
| | 5522 | |
| | 5523 | // When selecting a tab along the left side, |
| | 5524 | // focus should be transferred into the main panel |
| | 5525 | if ( ! wp.media.isTouchDevice ) { |
| | 5526 | $('.media-frame-content input').first().focus(); |
| | 5527 | } |
| | 5528 | }, |
| | 5529 | |
| | 5530 | click: function() { |
| | 5531 | var state = this.options.state; |
| | 5532 | |
| | 5533 | if ( state ) { |
| | 5534 | this.controller.setState( state ); |
| | 5535 | this.views.parent.$el.removeClass( 'visible' ); // TODO: or hide on any click, see below |
| | 5536 | } |
| | 5537 | }, |
| | 5538 | /** |
| | 5539 | * @returns {wp.media.view.MenuItem} returns itself to allow chaining |
| | 5540 | */ |
| | 5541 | render: function() { |
| | 5542 | var options = this.options; |
| | 5543 | |
| | 5544 | if ( options.text ) { |
| | 5545 | this.$el.text( options.text ); |
| | 5546 | } else if ( options.html ) { |
| | 5547 | this.$el.html( options.html ); |
| | 5548 | } |
| | 5549 | |
| | 5550 | return this; |
| | 5551 | } |
| | 5552 | }); |
| | 5553 | |
| | 5554 | module.exports = MenuItem; |
| | 5555 | },{"./view.js":55}],38:[function(require,module,exports){ |
| | 5556 | /** |
| | 5557 | * wp.media.view.Menu |
| | 5558 | * |
| | 5559 | * @class |
| | 5560 | * @augments wp.media.view.PriorityList |
| | 5561 | * @augments wp.media.View |
| | 5562 | * @augments wp.Backbone.View |
| | 5563 | * @augments Backbone.View |
| | 5564 | */ |
| | 5565 | var MenuItem = require( './menu-item.js' ), |
| | 5566 | PriorityList = require( './priority-list.js' ), |
| | 5567 | Menu; |
| | 5568 | |
| | 5569 | Menu = PriorityList.extend({ |
| | 5570 | tagName: 'div', |
| | 5571 | className: 'media-menu', |
| | 5572 | property: 'state', |
| | 5573 | ItemView: MenuItem, |
| | 5574 | region: 'menu', |
| | 5575 | |
| | 5576 | /* TODO: alternatively hide on any click anywhere |
| | 5577 | events: { |
| | 5578 | 'click': 'click' |
| | 5579 | }, |
| | 5580 | |
| | 5581 | click: function() { |
| | 5582 | this.$el.removeClass( 'visible' ); |
| | 5583 | }, |
| | 5584 | */ |
| | 5585 | |
| | 5586 | /** |
| | 5587 | * @param {Object} options |
| | 5588 | * @param {string} id |
| | 5589 | * @returns {wp.media.View} |
| | 5590 | */ |
| | 5591 | toView: function( options, id ) { |
| | 5592 | options = options || {}; |
| | 5593 | options[ this.property ] = options[ this.property ] || id; |
| | 5594 | return new this.ItemView( options ).render(); |
| | 5595 | }, |
| | 5596 | |
| | 5597 | ready: function() { |
| | 5598 | /** |
| | 5599 | * call 'ready' directly on the parent class |
| | 5600 | */ |
| | 5601 | PriorityList.prototype.ready.apply( this, arguments ); |
| | 5602 | this.visibility(); |
| | 5603 | }, |
| | 5604 | |
| | 5605 | set: function() { |
| | 5606 | /** |
| | 5607 | * call 'set' directly on the parent class |
| | 5608 | */ |
| | 5609 | PriorityList.prototype.set.apply( this, arguments ); |
| | 5610 | this.visibility(); |
| | 5611 | }, |
| | 5612 | |
| | 5613 | unset: function() { |
| | 5614 | /** |
| | 5615 | * call 'unset' directly on the parent class |
| | 5616 | */ |
| | 5617 | PriorityList.prototype.unset.apply( this, arguments ); |
| | 5618 | this.visibility(); |
| | 5619 | }, |
| | 5620 | |
| | 5621 | visibility: function() { |
| | 5622 | var region = this.region, |
| | 5623 | view = this.controller[ region ].get(), |
| | 5624 | views = this.views.get(), |
| | 5625 | hide = ! views || views.length < 2; |
| | 5626 | |
| | 5627 | if ( this === view ) { |
| | 5628 | this.controller.$el.toggleClass( 'hide-' + region, hide ); |
| | 5629 | } |
| | 5630 | }, |
| | 5631 | /** |
| | 5632 | * @param {string} id |
| | 5633 | */ |
| | 5634 | select: function( id ) { |
| | 5635 | var view = this.get( id ); |
| | 5636 | |
| | 5637 | if ( ! view ) { |
| | 5638 | return; |
| | 5639 | } |
| | 5640 | |
| | 5641 | this.deselect(); |
| | 5642 | view.$el.addClass('active'); |
| | 5643 | }, |
| | 5644 | |
| | 5645 | deselect: function() { |
| | 5646 | this.$el.children().removeClass('active'); |
| | 5647 | }, |
| | 5648 | |
| | 5649 | hide: function( id ) { |
| | 5650 | & |