2014-03-06 11:06:14 -05:00
|
|
|
/* global _wpMediaViewsL10n, _wpmejsSettings, MediaElementPlayer,
|
|
|
|
confirm, getUserSetting, setUserSetting */
|
2014-03-05 10:06:14 -05:00
|
|
|
(function($, _){
|
2014-01-20 18:42:11 -05:00
|
|
|
var media = wp.media, l10n;
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
|
2012-09-26 21:11:04 -04:00
|
|
|
// Link any localized strings.
|
2012-11-19 20:48:37 -05:00
|
|
|
l10n = media.view.l10n = typeof _wpMediaViewsL10n === 'undefined' ? {} : _wpMediaViewsL10n;
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
|
2012-11-10 02:51:37 -05:00
|
|
|
// Link any settings.
|
|
|
|
media.view.settings = l10n.settings || {};
|
|
|
|
delete l10n.settings;
|
|
|
|
|
2012-12-03 02:17:10 -05:00
|
|
|
// Copy the `post` setting over to the model settings.
|
|
|
|
media.model.settings.post = media.view.settings.post;
|
2012-11-27 09:58:08 -05:00
|
|
|
|
2012-10-28 19:29:17 -04:00
|
|
|
// Check if the browser supports CSS 3.0 transitions
|
|
|
|
$.support.transition = (function(){
|
|
|
|
var style = document.documentElement.style,
|
|
|
|
transitions = {
|
|
|
|
WebkitTransition: 'webkitTransitionEnd',
|
|
|
|
MozTransition: 'transitionend',
|
|
|
|
OTransition: 'oTransitionEnd otransitionend',
|
|
|
|
transition: 'transitionend'
|
|
|
|
}, transition;
|
|
|
|
|
|
|
|
transition = _.find( _.keys( transitions ), function( transition ) {
|
|
|
|
return ! _.isUndefined( style[ transition ] );
|
|
|
|
});
|
|
|
|
|
|
|
|
return transition && {
|
|
|
|
end: transitions[ transition ]
|
|
|
|
};
|
|
|
|
}());
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* Makes it easier to bind events using transitions.
|
|
|
|
*
|
|
|
|
* @param {string} selector
|
|
|
|
* @param {Number} sensitivity
|
|
|
|
* @returns {Promise}
|
|
|
|
*/
|
2012-11-22 05:56:10 -05:00
|
|
|
media.transition = function( selector, sensitivity ) {
|
2012-10-28 19:29:17 -04:00
|
|
|
var deferred = $.Deferred();
|
|
|
|
|
2012-11-22 05:56:10 -05:00
|
|
|
sensitivity = sensitivity || 2000;
|
|
|
|
|
2012-10-28 19:29:17 -04:00
|
|
|
if ( $.support.transition ) {
|
2014-02-06 00:32:12 -05:00
|
|
|
if ( ! (selector instanceof $) ) {
|
2012-10-28 19:29:17 -04:00
|
|
|
selector = $( selector );
|
2014-02-06 00:32:12 -05:00
|
|
|
}
|
2012-10-28 19:29:17 -04:00
|
|
|
|
|
|
|
// Resolve the deferred when the first element finishes animating.
|
|
|
|
selector.first().one( $.support.transition.end, deferred.resolve );
|
|
|
|
|
2012-11-22 05:56:10 -05:00
|
|
|
// Just in case the event doesn't trigger, fire a callback.
|
|
|
|
_.delay( deferred.resolve, sensitivity );
|
|
|
|
|
2012-10-28 19:29:17 -04:00
|
|
|
// Otherwise, execute on the spot.
|
|
|
|
} else {
|
|
|
|
deferred.resolve();
|
|
|
|
}
|
|
|
|
|
|
|
|
return deferred.promise();
|
|
|
|
};
|
|
|
|
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
/**
|
|
|
|
* ========================================================================
|
|
|
|
* CONTROLLERS
|
|
|
|
* ========================================================================
|
|
|
|
*/
|
|
|
|
|
2012-11-07 15:14:41 -05:00
|
|
|
/**
|
|
|
|
* wp.media.controller.Region
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments Backbone.Model
|
|
|
|
*
|
|
|
|
* @param {Object} [options={}]
|
2012-11-07 15:14:41 -05:00
|
|
|
*/
|
|
|
|
media.controller.Region = function( options ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
_.extend( this, _.pick( options || {}, 'id', 'view', 'selector' ) );
|
2012-11-07 15:14:41 -05:00
|
|
|
};
|
|
|
|
|
|
|
|
// Use Backbone's self-propagating `extend` inheritance method.
|
|
|
|
media.controller.Region.extend = Backbone.Model.extend;
|
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
_.extend( media.controller.Region.prototype, {
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* Switch modes
|
|
|
|
*
|
|
|
|
* @param {string} mode
|
|
|
|
*
|
|
|
|
* @fires wp.media.controller.Region#{id}:activate:{mode}
|
|
|
|
* @fires wp.media.controller.Region#{id}:deactivate:{mode}
|
|
|
|
*
|
|
|
|
* @returns {wp.media.controller.Region} Returns itself to allow chaining
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
mode: function( mode ) {
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! mode ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
return this._mode;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 20:26:03 -05:00
|
|
|
// Bail if we're trying to change to the current mode.
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( mode === this._mode ) {
|
2012-11-08 09:15:09 -05:00
|
|
|
return this;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-07 15:14:41 -05:00
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
this.trigger('deactivate');
|
|
|
|
this._mode = mode;
|
|
|
|
this.render( mode );
|
|
|
|
this.trigger('activate');
|
|
|
|
return this;
|
2012-11-07 15:14:41 -05:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* Render a new mode, the view is set in the `create` callback method
|
|
|
|
* of the extending class
|
|
|
|
*
|
|
|
|
* If no mode is provided, just re-render the current mode.
|
|
|
|
* If the provided mode isn't active, perform a full switch.
|
|
|
|
*
|
|
|
|
* @param {string} mode
|
|
|
|
*
|
|
|
|
* @fires wp.media.controller.Region#{id}:create:{mode}
|
|
|
|
* @fires wp.media.controller.Region#{id}:render:{mode}
|
|
|
|
*
|
|
|
|
* @returns {wp.media.controller.Region} Returns itself to allow chaining
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
render: function( mode ) {
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( mode && mode !== this._mode ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
return this.mode( mode );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-07 15:14:41 -05:00
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
var set = { view: null },
|
|
|
|
view;
|
2012-11-07 15:14:41 -05:00
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
this.trigger( 'create', set );
|
|
|
|
view = set.view;
|
|
|
|
this.trigger( 'render', view );
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( view ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
this.set( view );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 20:26:03 -05:00
|
|
|
return this;
|
|
|
|
},
|
2012-11-07 15:14:41 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {wp.media.View} Returns the selector's first subview
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
get: function() {
|
|
|
|
return this.view.views.first( this.selector );
|
|
|
|
},
|
2012-11-07 15:14:41 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Array|Object} views
|
|
|
|
* @param {Object} [options={}]
|
|
|
|
* @returns {wp.Backbone.Subviews} Subviews is returned to allow chaining
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
set: function( views, options ) {
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( options ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
options.add = false;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 20:26:03 -05:00
|
|
|
return this.view.views.set( this.selector, views, options );
|
2012-11-07 15:14:41 -05:00
|
|
|
},
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* Helper function to trigger view events based on {id}:{event}:{mode}
|
|
|
|
*
|
|
|
|
* @param {string} event
|
|
|
|
* @returns {undefined|wp.media.controller.Region} Returns itself to allow chaining
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
trigger: function( event ) {
|
2013-11-14 00:54:10 -05:00
|
|
|
var base, args;
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! this._mode ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 20:26:03 -05:00
|
|
|
|
2013-11-14 00:54:10 -05:00
|
|
|
args = _.toArray( arguments );
|
2012-12-03 20:26:03 -05:00
|
|
|
base = this.id + ':' + event;
|
|
|
|
|
|
|
|
// Trigger `region:action:mode` event.
|
|
|
|
args[0] = base + ':' + this._mode;
|
|
|
|
this.view.trigger.apply( this.view, args );
|
|
|
|
|
|
|
|
// Trigger `region:action` event.
|
|
|
|
args[0] = base;
|
|
|
|
this.view.trigger.apply( this.view, args );
|
|
|
|
return this;
|
2012-11-07 15:14:41 -05:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
/**
|
2012-10-28 19:29:17 -04:00
|
|
|
* wp.media.controller.StateMachine
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments Backbone.Model
|
|
|
|
* @mixin
|
|
|
|
* @mixes Backbone.Events
|
|
|
|
*
|
|
|
|
* @param {Array} states
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
*/
|
2012-10-28 19:29:17 -04:00
|
|
|
media.controller.StateMachine = function( states ) {
|
|
|
|
this.states = new Backbone.Collection( states );
|
|
|
|
};
|
|
|
|
|
|
|
|
// Use Backbone's self-propagating `extend` inheritance method.
|
|
|
|
media.controller.StateMachine.extend = Backbone.Model.extend;
|
|
|
|
|
2012-11-07 15:14:41 -05:00
|
|
|
// Add events to the `StateMachine`.
|
|
|
|
_.extend( media.controller.StateMachine.prototype, Backbone.Events, {
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* Fetch a state.
|
|
|
|
*
|
|
|
|
* If no `id` is provided, returns the active state.
|
|
|
|
*
|
|
|
|
* Implicitly creates states.
|
|
|
|
*
|
|
|
|
* Ensure that the `states` collection exists so the `StateMachine`
|
|
|
|
* can be used as a mixin.
|
|
|
|
*
|
|
|
|
* @param {string} id
|
|
|
|
* @returns {wp.media.controller.State} Returns a State model
|
2014-02-06 00:32:12 -05:00
|
|
|
* from the StateMachine collection
|
2014-01-20 18:42:11 -05:00
|
|
|
*/
|
2012-11-30 10:19:11 -05:00
|
|
|
state: function( id ) {
|
2012-10-28 19:29:17 -04:00
|
|
|
this.states = this.states || new Backbone.Collection();
|
|
|
|
|
2012-11-30 10:19:11 -05:00
|
|
|
// Default to the active state.
|
|
|
|
id = id || this._state;
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( id && ! this.states.get( id ) ) {
|
2012-10-28 19:29:17 -04:00
|
|
|
this.states.add({ id: id });
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-10-28 19:29:17 -04:00
|
|
|
return this.states.get( id );
|
|
|
|
},
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* Sets the active state.
|
|
|
|
*
|
|
|
|
* Bail if we're trying to select the current state, if we haven't
|
|
|
|
* created the `states` collection, or are trying to select a state
|
|
|
|
* that does not exist.
|
|
|
|
*
|
|
|
|
* @param {string} id
|
|
|
|
*
|
|
|
|
* @fires wp.media.controller.State#deactivate
|
|
|
|
* @fires wp.media.controller.State#activate
|
|
|
|
*
|
|
|
|
* @returns {wp.media.controller.StateMachine} Returns itself to allow chaining
|
|
|
|
*/
|
2012-11-30 10:19:11 -05:00
|
|
|
setState: function( id ) {
|
|
|
|
var previous = this.state();
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ( previous && id === previous.id ) || ! this.states || ! this.states.get( id ) ) {
|
2012-12-02 21:38:10 -05:00
|
|
|
return this;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-10-28 19:29:17 -04:00
|
|
|
|
2012-11-07 15:14:41 -05:00
|
|
|
if ( previous ) {
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
previous.trigger('deactivate');
|
2012-11-30 10:19:11 -05:00
|
|
|
this._lastState = previous.id;
|
2012-11-07 15:14:41 -05:00
|
|
|
}
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
|
|
|
|
this._state = id;
|
|
|
|
this.state().trigger('activate');
|
2012-12-02 21:38:10 -05:00
|
|
|
|
|
|
|
return this;
|
2012-11-07 15:14:41 -05:00
|
|
|
},
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* Returns the previous active state.
|
|
|
|
*
|
|
|
|
* Call the `state()` method with no parameters to retrieve the current
|
|
|
|
* active state.
|
|
|
|
*
|
|
|
|
* @returns {wp.media.controller.State} Returns a State model
|
2014-02-06 00:32:12 -05:00
|
|
|
* from the StateMachine collection
|
2014-01-20 18:42:11 -05:00
|
|
|
*/
|
2012-11-30 10:19:11 -05:00
|
|
|
lastState: function() {
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( this._lastState ) {
|
2012-11-30 10:19:11 -05:00
|
|
|
return this.state( this._lastState );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-10-28 19:29:17 -04:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// Map methods from the `states` collection to the `StateMachine` itself.
|
|
|
|
_.each([ 'on', 'off', 'trigger' ], function( method ) {
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {wp.media.controller.StateMachine} Returns itself to allow chaining
|
|
|
|
*/
|
2012-10-28 19:29:17 -04:00
|
|
|
media.controller.StateMachine.prototype[ method ] = function() {
|
|
|
|
// Ensure that the `states` collection exists so the `StateMachine`
|
|
|
|
// can be used as a mixin.
|
|
|
|
this.states = this.states || new Backbone.Collection();
|
|
|
|
// Forward the method to the `states` collection.
|
|
|
|
this.states[ method ].apply( this.states, arguments );
|
|
|
|
return this;
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* wp.media.controller.State
|
|
|
|
*
|
2014-02-07 15:21:12 -05:00
|
|
|
* A state is a step in a workflow that when set will trigger
|
|
|
|
* the controllers for the regions to be updated as specified. This
|
|
|
|
* class is the base class that the various states used in the media
|
|
|
|
* modals extend.
|
|
|
|
*
|
2014-01-20 18:42:11 -05:00
|
|
|
* @constructor
|
|
|
|
* @augments Backbone.Model
|
|
|
|
*/
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
media.controller.State = Backbone.Model.extend({
|
2012-12-03 20:26:03 -05:00
|
|
|
constructor: function() {
|
|
|
|
this.on( 'activate', this._preActivate, this );
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
this.on( 'activate', this.activate, this );
|
2012-12-03 20:26:03 -05:00
|
|
|
this.on( 'activate', this._postActivate, this );
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
this.on( 'deactivate', this._deactivate, this );
|
|
|
|
this.on( 'deactivate', this.deactivate, this );
|
2012-11-07 15:14:41 -05:00
|
|
|
this.on( 'reset', this.reset, this );
|
2012-12-03 20:26:03 -05:00
|
|
|
this.on( 'ready', this._ready, this );
|
|
|
|
this.on( 'ready', this.ready, this );
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* Call parent constructor with passed arguments
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
Backbone.Model.apply( this, arguments );
|
2013-03-03 02:04:06 -05:00
|
|
|
this.on( 'change:menu', this._updateMenu, this );
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
},
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @abstract
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
ready: function() {},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @abstract
|
|
|
|
*/
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
activate: function() {},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @abstract
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
deactivate: function() {},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @abstract
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
reset: function() {},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @access private
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
_ready: function() {
|
|
|
|
this._updateMenu();
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @access private
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
_preActivate: function() {
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
this.active = true;
|
2012-12-03 20:26:03 -05:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @access private
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
_postActivate: function() {
|
|
|
|
this.on( 'change:menu', this._menu, this );
|
|
|
|
this.on( 'change:titleMode', this._title, this );
|
|
|
|
this.on( 'change:content', this._content, this );
|
|
|
|
this.on( 'change:toolbar', this._toolbar, this );
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
this.frame.on( 'title:render:default', this._renderTitle, this );
|
|
|
|
|
|
|
|
this._title();
|
|
|
|
this._menu();
|
|
|
|
this._toolbar();
|
|
|
|
this._content();
|
|
|
|
this._router();
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @access private
|
|
|
|
*/
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
_deactivate: function() {
|
|
|
|
this.active = false;
|
2012-12-03 20:26:03 -05:00
|
|
|
|
|
|
|
this.frame.off( 'title:render:default', this._renderTitle, this );
|
|
|
|
|
|
|
|
this.off( 'change:menu', this._menu, this );
|
|
|
|
this.off( 'change:titleMode', this._title, this );
|
|
|
|
this.off( 'change:content', this._content, this );
|
|
|
|
this.off( 'change:toolbar', this._toolbar, this );
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @access private
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
_title: function() {
|
|
|
|
this.frame.title.render( this.get('titleMode') || 'default' );
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @access private
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
_renderTitle: function( view ) {
|
|
|
|
view.$el.text( this.get('title') || '' );
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @access private
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
_router: function() {
|
|
|
|
var router = this.frame.router,
|
|
|
|
mode = this.get('router'),
|
|
|
|
view;
|
|
|
|
|
|
|
|
this.frame.$el.toggleClass( 'hide-router', ! mode );
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! mode ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 20:26:03 -05:00
|
|
|
|
|
|
|
this.frame.router.render( mode );
|
|
|
|
|
|
|
|
view = router.get();
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( view && view.select ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
view.select( this.frame.content.mode() );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 20:26:03 -05:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @access private
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
_menu: function() {
|
2012-11-07 15:14:41 -05:00
|
|
|
var menu = this.frame.menu,
|
|
|
|
mode = this.get('menu'),
|
|
|
|
view;
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! mode ) {
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
menu.mode( mode );
|
2012-11-07 15:14:41 -05:00
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
view = menu.get();
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( view && view.select ) {
|
2012-11-07 15:14:41 -05:00
|
|
|
view.select( this.id );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 20:26:03 -05:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @access private
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
_updateMenu: function() {
|
|
|
|
var previous = this.previous('menu'),
|
|
|
|
menu = this.get('menu');
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( previous ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
this.frame.off( 'menu:render:' + previous, this._renderMenu, this );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 20:26:03 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( menu ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
this.frame.on( 'menu:render:' + menu, this._renderMenu, this );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 20:26:03 -05:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @access private
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
_renderMenu: function( view ) {
|
|
|
|
var menuItem = this.get('menuItem'),
|
|
|
|
title = this.get('title'),
|
|
|
|
priority = this.get('priority');
|
|
|
|
|
|
|
|
if ( ! menuItem && title ) {
|
|
|
|
menuItem = { text: title };
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( priority ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
menuItem.priority = priority;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 20:26:03 -05:00
|
|
|
}
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! menuItem ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 20:26:03 -05:00
|
|
|
|
|
|
|
view.set( this.id, menuItem );
|
2012-11-07 15:14:41 -05:00
|
|
|
}
|
|
|
|
});
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
|
2012-11-22 01:30:25 -05:00
|
|
|
_.each(['toolbar','content'], function( region ) {
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @access private
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
media.controller.State.prototype[ '_' + region ] = function() {
|
2012-11-07 15:14:41 -05:00
|
|
|
var mode = this.get( region );
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( mode ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
this.frame[ region ].render( mode );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-07 15:14:41 -05:00
|
|
|
};
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
});
|
|
|
|
|
2014-03-06 17:55:14 -05:00
|
|
|
media.selectionSync = {
|
|
|
|
syncSelection: function() {
|
|
|
|
var selection = this.get('selection'),
|
|
|
|
manager = this.frame._selection;
|
|
|
|
|
|
|
|
if ( ! this.get('syncSelection') || ! manager || ! selection ) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// If the selection supports multiple items, validate the stored
|
|
|
|
// attachments based on the new selection's conditions. Record
|
|
|
|
// the attachments that are not included; we'll maintain a
|
|
|
|
// reference to those. Other attachments are considered in flux.
|
|
|
|
if ( selection.multiple ) {
|
|
|
|
selection.reset( [], { silent: true });
|
|
|
|
selection.validateAll( manager.attachments );
|
|
|
|
manager.difference = _.difference( manager.attachments.models, selection.models );
|
|
|
|
}
|
|
|
|
|
|
|
|
// Sync the selection's single item with the master.
|
|
|
|
selection.single( manager.single );
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Record the currently active attachments, which is a combination
|
|
|
|
* of the selection's attachments and the set of selected
|
|
|
|
* attachments that this specific selection considered invalid.
|
|
|
|
* Reset the difference and record the single attachment.
|
|
|
|
*/
|
|
|
|
recordSelection: function() {
|
|
|
|
var selection = this.get('selection'),
|
|
|
|
manager = this.frame._selection;
|
|
|
|
|
|
|
|
if ( ! this.get('syncSelection') || ! manager || ! selection ) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if ( selection.multiple ) {
|
|
|
|
manager.attachments.reset( selection.toArray().concat( manager.difference ) );
|
|
|
|
manager.difference = [];
|
|
|
|
} else {
|
|
|
|
manager.attachments.add( selection.toArray() );
|
|
|
|
}
|
|
|
|
|
|
|
|
manager.single = selection._single;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* wp.media.controller.Library
|
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.controller.State
|
|
|
|
* @augments Backbone.Model
|
|
|
|
*/
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
media.controller.Library = media.controller.State.extend({
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
defaults: {
|
2012-11-10 04:11:33 -05:00
|
|
|
id: 'library',
|
2012-12-03 20:26:03 -05:00
|
|
|
multiple: false, // false, 'add', 'reset'
|
2012-11-10 04:11:33 -05:00
|
|
|
describe: false,
|
2012-12-03 20:26:03 -05:00
|
|
|
toolbar: 'select',
|
2012-11-10 04:11:33 -05:00
|
|
|
sidebar: 'settings',
|
2012-12-03 20:26:03 -05:00
|
|
|
content: 'upload',
|
|
|
|
router: 'browse',
|
2012-12-05 04:43:10 -05:00
|
|
|
menu: 'default',
|
2012-11-20 08:49:35 -05:00
|
|
|
searchable: true,
|
2012-11-22 04:32:21 -05:00
|
|
|
filterable: false,
|
2012-12-03 20:26:03 -05:00
|
|
|
sortable: true,
|
|
|
|
title: l10n.mediaLibraryTitle,
|
|
|
|
|
|
|
|
// Uses a user setting to override the content mode.
|
|
|
|
contentUserSetting: true,
|
|
|
|
|
|
|
|
// Sync the selection from the last state when 'multiple' matches.
|
2012-12-05 22:55:37 -05:00
|
|
|
syncSelection: true
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
},
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* If a library isn't provided, query all media items.
|
|
|
|
* If a selection instance isn't provided, create one.
|
|
|
|
*/
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
initialize: function() {
|
2012-12-05 22:55:37 -05:00
|
|
|
var selection = this.get('selection'),
|
|
|
|
props;
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! this.get('library') ) {
|
2012-10-28 19:29:17 -04:00
|
|
|
this.set( 'library', media.query() );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-09-11 17:13:07 -04:00
|
|
|
|
2012-12-05 22:55:37 -05:00
|
|
|
if ( ! (selection instanceof media.model.Selection) ) {
|
|
|
|
props = selection;
|
|
|
|
|
|
|
|
if ( ! props ) {
|
|
|
|
props = this.get('library').props.toJSON();
|
|
|
|
props = _.omit( props, 'orderby', 'query' );
|
|
|
|
}
|
|
|
|
|
|
|
|
// If the `selection` attribute is set to an object,
|
|
|
|
// it will use those values as the selection instance's
|
|
|
|
// `props` model. Otherwise, it will copy the library's
|
|
|
|
// `props` model.
|
|
|
|
this.set( 'selection', new media.model.Selection( null, {
|
|
|
|
multiple: this.get('multiple'),
|
|
|
|
props: props
|
|
|
|
}) );
|
|
|
|
}
|
|
|
|
|
2014-02-06 00:32:12 -05:00
|
|
|
if ( ! this.get('edge') ) {
|
2012-10-29 14:05:03 -04:00
|
|
|
this.set( 'edge', 120 );
|
2014-02-06 00:32:12 -05:00
|
|
|
}
|
2012-10-29 14:05:03 -04:00
|
|
|
|
2014-02-06 00:32:12 -05:00
|
|
|
if ( ! this.get('gutter') ) {
|
2012-10-30 17:09:45 -04:00
|
|
|
this.set( 'gutter', 8 );
|
2014-02-06 00:32:12 -05:00
|
|
|
}
|
2012-10-29 14:05:03 -04:00
|
|
|
|
2012-11-22 01:30:25 -05:00
|
|
|
this.resetDisplays();
|
2012-10-28 19:29:17 -04:00
|
|
|
},
|
2012-09-26 17:40:02 -04:00
|
|
|
|
2012-10-28 19:29:17 -04:00
|
|
|
activate: function() {
|
2012-12-05 22:55:37 -05:00
|
|
|
this.syncSelection();
|
2012-11-08 20:23:20 -05:00
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
wp.Uploader.queue.on( 'add', this.uploading, this );
|
2012-10-30 19:36:38 -04:00
|
|
|
|
2012-12-04 11:21:57 -05:00
|
|
|
this.get('selection').on( 'add remove reset', this.refreshContent, this );
|
2012-11-04 21:43:47 -05:00
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
if ( this.get('contentUserSetting') ) {
|
|
|
|
this.frame.on( 'content:activate', this.saveContentMode, this );
|
|
|
|
this.set( 'content', getUserSetting( 'libraryContent', this.get('content') ) );
|
|
|
|
}
|
2012-10-29 11:13:02 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
deactivate: function() {
|
2012-12-05 22:55:37 -05:00
|
|
|
this.recordSelection();
|
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
this.frame.off( 'content:activate', this.saveContentMode, this );
|
|
|
|
|
2012-11-05 20:19:39 -05:00
|
|
|
// Unbind all event handlers that use this state as the context
|
|
|
|
// from the selection.
|
|
|
|
this.get('selection').off( null, null, this );
|
2012-11-12 00:57:12 -05:00
|
|
|
|
2012-11-21 03:17:45 -05:00
|
|
|
wp.Uploader.queue.off( null, null, this );
|
2012-10-29 11:13:02 -04:00
|
|
|
},
|
|
|
|
|
2012-11-07 15:14:41 -05:00
|
|
|
reset: function() {
|
2012-12-03 00:32:25 -05:00
|
|
|
this.get('selection').reset();
|
2012-11-22 01:30:25 -05:00
|
|
|
this.resetDisplays();
|
2012-12-03 20:26:03 -05:00
|
|
|
this.refreshContent();
|
2012-11-04 21:43:47 -05:00
|
|
|
},
|
|
|
|
|
2012-11-22 01:30:25 -05:00
|
|
|
resetDisplays: function() {
|
2013-01-04 03:02:16 -05:00
|
|
|
var defaultProps = media.view.settings.defaultProps;
|
2012-11-22 01:30:25 -05:00
|
|
|
this._displays = [];
|
|
|
|
this._defaultDisplaySettings = {
|
2013-01-04 03:02:16 -05:00
|
|
|
align: defaultProps.align || getUserSetting( 'align', 'none' ),
|
|
|
|
size: defaultProps.size || getUserSetting( 'imgsize', 'medium' ),
|
|
|
|
link: defaultProps.link || getUserSetting( 'urlbutton', 'file' )
|
2012-11-22 01:30:25 -05:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {wp.media.model.Attachment} attachment
|
|
|
|
* @returns {Backbone.Model}
|
|
|
|
*/
|
2012-11-22 01:30:25 -05:00
|
|
|
display: function( attachment ) {
|
|
|
|
var displays = this._displays;
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! displays[ attachment.cid ] ) {
|
2013-07-23 01:39:08 -04:00
|
|
|
displays[ attachment.cid ] = new Backbone.Model( this.defaultDisplaySettings( attachment ) );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-22 01:30:25 -05:00
|
|
|
return displays[ attachment.cid ];
|
|
|
|
},
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {wp.media.model.Attachment} attachment
|
|
|
|
* @returns {Object}
|
|
|
|
*/
|
2013-07-23 01:39:08 -04:00
|
|
|
defaultDisplaySettings: function( attachment ) {
|
2013-11-14 00:54:10 -05:00
|
|
|
var settings = this._defaultDisplaySettings;
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( settings.canEmbed = this.canEmbed( attachment ) ) {
|
2013-07-23 01:39:08 -04:00
|
|
|
settings.link = 'embed';
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2013-07-23 01:39:08 -04:00
|
|
|
return settings;
|
|
|
|
},
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {wp.media.model.Attachment} attachment
|
|
|
|
* @returns {Boolean}
|
|
|
|
*/
|
2013-07-23 01:39:08 -04:00
|
|
|
canEmbed: function( attachment ) {
|
2013-07-23 13:29:55 -04:00
|
|
|
// If uploading, we know the filename but not the mime type.
|
|
|
|
if ( ! attachment.get('uploading') ) {
|
|
|
|
var type = attachment.get('type');
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( type !== 'audio' && type !== 'video' ) {
|
2013-07-23 13:29:55 -04:00
|
|
|
return false;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2013-07-23 13:29:55 -04:00
|
|
|
}
|
2013-07-23 01:39:08 -04:00
|
|
|
|
|
|
|
return _.contains( media.view.settings.embedExts, attachment.get('filename').split('.').pop() );
|
|
|
|
},
|
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* If the state is active, no items are selected, and the current
|
|
|
|
* content mode is not an option in the state's router (provided
|
|
|
|
* the state has a router), reset the content mode to the default.
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
refreshContent: function() {
|
2012-11-14 21:36:06 -05:00
|
|
|
var selection = this.get('selection'),
|
2012-12-03 20:26:03 -05:00
|
|
|
frame = this.frame,
|
2012-12-04 19:22:11 -05:00
|
|
|
router = frame.router.get(),
|
2012-12-03 20:26:03 -05:00
|
|
|
mode = frame.content.mode();
|
2012-11-14 21:36:06 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( this.active && ! selection.length && router && ! router.get( mode ) ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
this.frame.content.render( this.get('content') );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 20:26:03 -05:00
|
|
|
},
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* If the uploader was selected, navigate to the browser.
|
|
|
|
*
|
|
|
|
* Automatically select any uploading attachments.
|
|
|
|
*
|
|
|
|
* Selections that don't support multiple attachments automatically
|
|
|
|
* limit themselves to one attachment (in this case, the last
|
|
|
|
* attachment in the upload queue).
|
|
|
|
*
|
|
|
|
* @param {wp.media.model.Attachment} attachment
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
uploading: function( attachment ) {
|
|
|
|
var content = this.frame.content;
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( 'upload' === content.mode() ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
this.frame.content.mode('browse');
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2013-01-04 01:44:21 -05:00
|
|
|
this.get('selection').add( attachment );
|
2012-11-05 20:19:39 -05:00
|
|
|
},
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* Only track the browse router on library states.
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
saveContentMode: function() {
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( 'browse' !== this.get('router') ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 20:26:03 -05:00
|
|
|
|
|
|
|
var mode = this.frame.content.mode(),
|
|
|
|
view = this.frame.router.get();
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( view && view.get( mode ) ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
setUserSetting( 'libraryContent', mode );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-10-28 19:29:17 -04:00
|
|
|
}
|
|
|
|
});
|
2012-09-11 17:13:07 -04:00
|
|
|
|
2014-03-06 17:55:14 -05:00
|
|
|
_.extend( media.controller.Library.prototype, media.selectionSync );
|
|
|
|
|
2014-01-28 18:21:13 -05:00
|
|
|
/**
|
|
|
|
* wp.media.controller.ImageDetails
|
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.controller.State
|
|
|
|
* @augments Backbone.Model
|
|
|
|
*/
|
|
|
|
media.controller.ImageDetails = media.controller.State.extend({
|
|
|
|
defaults: _.defaults({
|
|
|
|
id: 'image-details',
|
|
|
|
toolbar: 'image-details',
|
|
|
|
title: l10n.imageDetailsTitle,
|
|
|
|
content: 'image-details',
|
|
|
|
menu: 'image-details',
|
|
|
|
router: false,
|
|
|
|
attachment: false,
|
|
|
|
priority: 60,
|
|
|
|
editing: false
|
|
|
|
}, media.controller.Library.prototype.defaults ),
|
|
|
|
|
|
|
|
initialize: function( options ) {
|
|
|
|
this.image = options.image;
|
|
|
|
media.controller.State.prototype.initialize.apply( this, arguments );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2014-03-05 10:06:14 -05:00
|
|
|
/**
|
|
|
|
* wp.media.controller.AudioDetails
|
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.controller.State
|
|
|
|
* @augments Backbone.Model
|
|
|
|
*/
|
|
|
|
media.controller.AudioDetails = media.controller.State.extend({
|
|
|
|
defaults: _.defaults({
|
|
|
|
id: 'audio-details',
|
|
|
|
toolbar: 'audio-details',
|
|
|
|
title: l10n.audioDetailsTitle,
|
|
|
|
content: 'audio-details',
|
|
|
|
menu: 'audio-details',
|
|
|
|
router: false,
|
|
|
|
attachment: false,
|
|
|
|
priority: 60,
|
|
|
|
editing: false
|
|
|
|
}, media.controller.Library.prototype.defaults ),
|
|
|
|
|
|
|
|
initialize: function( options ) {
|
2014-03-09 00:25:15 -05:00
|
|
|
this.media = options.media;
|
2014-03-05 10:06:14 -05:00
|
|
|
media.controller.State.prototype.initialize.apply( this, arguments );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.controller.VideoDetails
|
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.controller.State
|
|
|
|
* @augments Backbone.Model
|
|
|
|
*/
|
|
|
|
media.controller.VideoDetails = media.controller.State.extend({
|
|
|
|
defaults: _.defaults({
|
|
|
|
id: 'video-details',
|
|
|
|
toolbar: 'video-details',
|
|
|
|
title: l10n.videoDetailsTitle,
|
|
|
|
content: 'video-details',
|
|
|
|
menu: 'video-details',
|
|
|
|
router: false,
|
|
|
|
attachment: false,
|
|
|
|
priority: 60,
|
|
|
|
editing: false
|
|
|
|
}, media.controller.Library.prototype.defaults ),
|
|
|
|
|
|
|
|
initialize: function( options ) {
|
2014-03-09 00:25:15 -05:00
|
|
|
this.media = options.media;
|
2014-03-05 10:06:14 -05:00
|
|
|
media.controller.State.prototype.initialize.apply( this, arguments );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2014-02-20 13:25:14 -05:00
|
|
|
/**
|
|
|
|
* wp.media.controller.CollectionEdit
|
|
|
|
*
|
2014-03-02 18:11:14 -05:00
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.controller.Library
|
|
|
|
* @augments wp.media.controller.State
|
|
|
|
* @augments Backbone.Model
|
2014-02-20 13:25:14 -05:00
|
|
|
*/
|
2014-03-02 18:11:14 -05:00
|
|
|
media.controller.CollectionEdit = media.controller.Library.extend({
|
|
|
|
defaults: {
|
|
|
|
multiple: false,
|
|
|
|
describe: true,
|
|
|
|
edge: 199,
|
|
|
|
editing: false,
|
|
|
|
sortable: true,
|
|
|
|
searchable: false,
|
|
|
|
content: 'browse',
|
|
|
|
priority: 60,
|
|
|
|
dragInfo: true,
|
|
|
|
SettingsView: false,
|
|
|
|
|
|
|
|
// Don't sync the selection, as the Edit {Collection} library
|
|
|
|
// *is* the selection.
|
|
|
|
syncSelection: false
|
|
|
|
},
|
2014-02-20 13:25:14 -05:00
|
|
|
|
2014-03-02 18:11:14 -05:00
|
|
|
initialize: function() {
|
|
|
|
var collectionType = this.get('collectionType');
|
2014-02-20 13:25:14 -05:00
|
|
|
|
2014-03-02 18:11:14 -05:00
|
|
|
this.set( 'id', collectionType + '-edit' );
|
|
|
|
this.set( 'toolbar', collectionType + '-edit' );
|
2014-02-20 13:25:14 -05:00
|
|
|
|
2014-03-02 18:11:14 -05:00
|
|
|
// If we haven't been provided a `library`, create a `Selection`.
|
|
|
|
if ( ! this.get('library') ) {
|
|
|
|
this.set( 'library', new media.model.Selection() );
|
|
|
|
}
|
|
|
|
// The single `Attachment` view to be used in the `Attachments` view.
|
|
|
|
if ( ! this.get('AttachmentView') ) {
|
|
|
|
this.set( 'AttachmentView', media.view.Attachment.EditLibrary );
|
|
|
|
}
|
|
|
|
media.controller.Library.prototype.initialize.apply( this, arguments );
|
|
|
|
},
|
2014-02-20 13:25:14 -05:00
|
|
|
|
2014-03-02 18:11:14 -05:00
|
|
|
activate: function() {
|
|
|
|
var library = this.get('library');
|
2014-02-20 13:25:14 -05:00
|
|
|
|
2014-03-02 18:11:14 -05:00
|
|
|
// Limit the library to images only.
|
|
|
|
library.props.set( 'type', this.get( 'type' ) );
|
2014-02-20 13:25:14 -05:00
|
|
|
|
2014-03-02 18:11:14 -05:00
|
|
|
// Watch for uploaded attachments.
|
|
|
|
this.get('library').observe( wp.Uploader.queue );
|
2014-02-20 13:25:14 -05:00
|
|
|
|
2014-03-02 18:11:14 -05:00
|
|
|
this.frame.on( 'content:render:browse', this.renderSettings, this );
|
2014-02-20 13:25:14 -05:00
|
|
|
|
2014-03-02 18:11:14 -05:00
|
|
|
media.controller.Library.prototype.activate.apply( this, arguments );
|
|
|
|
},
|
2014-02-20 13:25:14 -05:00
|
|
|
|
2014-03-02 18:11:14 -05:00
|
|
|
deactivate: function() {
|
|
|
|
// Stop watching for uploaded attachments.
|
|
|
|
this.get('library').unobserve( wp.Uploader.queue );
|
2014-02-20 13:25:14 -05:00
|
|
|
|
2014-03-02 18:11:14 -05:00
|
|
|
this.frame.off( 'content:render:browse', this.renderSettings, this );
|
2014-02-20 13:25:14 -05:00
|
|
|
|
2014-03-02 18:11:14 -05:00
|
|
|
media.controller.Library.prototype.deactivate.apply( this, arguments );
|
|
|
|
},
|
2014-02-20 13:25:14 -05:00
|
|
|
|
2014-03-02 18:11:14 -05:00
|
|
|
renderSettings: function( browser ) {
|
|
|
|
var library = this.get('library'),
|
|
|
|
collectionType = this.get('collectionType'),
|
|
|
|
dragInfoText = this.get('dragInfoText'),
|
|
|
|
SettingsView = this.get('SettingsView'),
|
|
|
|
obj = {};
|
2014-02-20 13:25:14 -05:00
|
|
|
|
2014-03-02 18:11:14 -05:00
|
|
|
if ( ! library || ! browser ) {
|
|
|
|
return;
|
|
|
|
}
|
2014-02-20 13:25:14 -05:00
|
|
|
|
2014-03-02 18:11:14 -05:00
|
|
|
library[ collectionType ] = library[ collectionType ] || new Backbone.Model();
|
2014-02-20 13:25:14 -05:00
|
|
|
|
2014-03-02 18:11:14 -05:00
|
|
|
obj[ collectionType ] = new SettingsView({
|
|
|
|
controller: this,
|
|
|
|
model: library[ collectionType ],
|
|
|
|
priority: 40
|
|
|
|
});
|
2014-02-20 13:25:14 -05:00
|
|
|
|
2014-03-02 18:11:14 -05:00
|
|
|
browser.sidebar.set( obj );
|
|
|
|
|
|
|
|
if ( dragInfoText ) {
|
|
|
|
browser.toolbar.set( 'dragInfo', new media.View({
|
|
|
|
el: $( '<div class="instructions">' + dragInfoText + '</div>' )[0],
|
|
|
|
priority: -40
|
|
|
|
}) );
|
2014-02-25 12:32:14 -05:00
|
|
|
}
|
2014-03-02 18:11:14 -05:00
|
|
|
|
|
|
|
browser.toolbar.set( 'reverse', {
|
|
|
|
text: l10n.reverseOrder,
|
|
|
|
priority: 80,
|
|
|
|
|
|
|
|
click: function() {
|
|
|
|
library.reset( library.toArray().reverse() );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
2014-02-20 13:25:14 -05:00
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.controller.CollectionAdd
|
|
|
|
*
|
2014-02-27 18:04:13 -05:00
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.controller.Library
|
|
|
|
* @augments wp.media.controller.State
|
|
|
|
* @augments Backbone.Model
|
2014-02-20 13:25:14 -05:00
|
|
|
*/
|
2014-03-02 18:11:14 -05:00
|
|
|
media.controller.CollectionAdd = media.controller.Library.extend({
|
|
|
|
defaults: _.defaults( {
|
|
|
|
filterable: 'uploaded',
|
|
|
|
multiple: 'add',
|
|
|
|
priority: 100,
|
|
|
|
syncSelection: false
|
|
|
|
}, media.controller.Library.prototype.defaults ),
|
2014-02-20 13:25:14 -05:00
|
|
|
|
2014-03-02 18:11:14 -05:00
|
|
|
initialize: function() {
|
|
|
|
var collectionType = this.get('collectionType');
|
2014-02-20 13:25:14 -05:00
|
|
|
|
2014-03-02 18:11:14 -05:00
|
|
|
this.set( 'id', collectionType + '-library' );
|
|
|
|
this.set( 'toolbar', collectionType + '-add' );
|
|
|
|
this.set( 'menu', collectionType );
|
2014-02-20 13:25:14 -05:00
|
|
|
|
2014-03-02 18:11:14 -05:00
|
|
|
// If we haven't been provided a `library`, create a `Selection`.
|
|
|
|
if ( ! this.get('library') ) {
|
|
|
|
this.set( 'library', media.query({ type: this.get('type') }) );
|
|
|
|
}
|
|
|
|
media.controller.Library.prototype.initialize.apply( this, arguments );
|
|
|
|
},
|
2014-02-20 13:25:14 -05:00
|
|
|
|
2014-03-02 18:11:14 -05:00
|
|
|
activate: function() {
|
|
|
|
var library = this.get('library'),
|
|
|
|
editLibrary = this.get('editLibrary'),
|
|
|
|
edit = this.frame.state( this.get('collectionType') + '-edit' ).get('library');
|
2014-02-20 13:25:14 -05:00
|
|
|
|
2014-03-02 18:11:14 -05:00
|
|
|
if ( editLibrary && editLibrary !== edit ) {
|
|
|
|
library.unobserve( editLibrary );
|
2014-02-25 12:32:14 -05:00
|
|
|
}
|
2014-02-20 13:25:14 -05:00
|
|
|
|
2014-03-02 18:11:14 -05:00
|
|
|
// Accepts attachments that exist in the original library and
|
|
|
|
// that do not exist in gallery's library.
|
|
|
|
library.validator = function( attachment ) {
|
|
|
|
return !! this.mirroring.get( attachment.cid ) && ! edit.get( attachment.cid ) && media.model.Selection.prototype.validator.apply( this, arguments );
|
|
|
|
};
|
2012-09-11 17:13:07 -04:00
|
|
|
|
2014-03-02 18:11:14 -05:00
|
|
|
// Reset the library to ensure that all attachments are re-added
|
|
|
|
// to the collection. Do so silently, as calling `observe` will
|
|
|
|
// trigger the `reset` event.
|
|
|
|
library.reset( library.mirroring.models, { silent: true });
|
|
|
|
library.observe( edit );
|
|
|
|
this.set('editLibrary', edit);
|
2014-02-24 13:08:16 -05:00
|
|
|
|
2014-03-02 18:11:14 -05:00
|
|
|
media.controller.Library.prototype.activate.apply( this, arguments );
|
2014-02-24 13:08:16 -05:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* wp.media.controller.FeaturedImage
|
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.controller.Library
|
|
|
|
* @augments wp.media.controller.State
|
|
|
|
* @augments Backbone.Model
|
|
|
|
*/
|
2012-12-02 21:38:10 -05:00
|
|
|
media.controller.FeaturedImage = media.controller.Library.extend({
|
|
|
|
defaults: _.defaults({
|
|
|
|
id: 'featured-image',
|
|
|
|
filterable: 'uploaded',
|
|
|
|
multiple: false,
|
2012-12-03 20:26:03 -05:00
|
|
|
toolbar: 'featured-image',
|
2012-12-05 14:07:48 -05:00
|
|
|
title: l10n.setFeaturedImageTitle,
|
2012-12-05 22:55:37 -05:00
|
|
|
priority: 60,
|
2014-03-06 17:55:14 -05:00
|
|
|
syncSelection: true
|
2012-12-02 21:38:10 -05:00
|
|
|
}, media.controller.Library.prototype.defaults ),
|
|
|
|
|
|
|
|
initialize: function() {
|
2012-12-03 02:04:34 -05:00
|
|
|
var library, comparator;
|
|
|
|
|
2012-12-02 21:38:10 -05:00
|
|
|
// If we haven't been provided a `library`, create a `Selection`.
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! this.get('library') ) {
|
2012-12-02 21:38:10 -05:00
|
|
|
this.set( 'library', media.query({ type: 'image' }) );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2014-02-07 15:21:12 -05:00
|
|
|
|
2012-12-02 21:38:10 -05:00
|
|
|
media.controller.Library.prototype.initialize.apply( this, arguments );
|
2012-12-03 02:04:34 -05:00
|
|
|
|
|
|
|
library = this.get('library');
|
|
|
|
comparator = library.comparator;
|
|
|
|
|
|
|
|
// Overload the library's comparator to push items that are not in
|
|
|
|
// the mirrored query to the front of the aggregate collection.
|
|
|
|
library.comparator = function( a, b ) {
|
2013-03-03 02:04:06 -05:00
|
|
|
var aInQuery = !! this.mirroring.get( a.cid ),
|
|
|
|
bInQuery = !! this.mirroring.get( b.cid );
|
2012-12-03 02:04:34 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! aInQuery && bInQuery ) {
|
2012-12-03 02:04:34 -05:00
|
|
|
return -1;
|
2014-01-20 18:42:11 -05:00
|
|
|
} else if ( aInQuery && ! bInQuery ) {
|
2012-12-03 02:04:34 -05:00
|
|
|
return 1;
|
2014-01-20 18:42:11 -05:00
|
|
|
} else {
|
2012-12-03 02:04:34 -05:00
|
|
|
return comparator.apply( this, arguments );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 02:04:34 -05:00
|
|
|
};
|
|
|
|
|
|
|
|
// Add all items in the selection to the library, so any featured
|
|
|
|
// images that are not initially loaded still appear.
|
|
|
|
library.observe( this.get('selection') );
|
2012-12-02 21:38:10 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
activate: function() {
|
2012-12-05 04:43:10 -05:00
|
|
|
this.updateSelection();
|
|
|
|
this.frame.on( 'open', this.updateSelection, this );
|
2014-02-07 15:21:12 -05:00
|
|
|
|
2012-12-05 04:43:10 -05:00
|
|
|
media.controller.Library.prototype.activate.apply( this, arguments );
|
|
|
|
},
|
|
|
|
|
|
|
|
deactivate: function() {
|
|
|
|
this.frame.off( 'open', this.updateSelection, this );
|
2014-02-07 15:21:12 -05:00
|
|
|
|
2012-12-05 04:43:10 -05:00
|
|
|
media.controller.Library.prototype.deactivate.apply( this, arguments );
|
|
|
|
},
|
|
|
|
|
|
|
|
updateSelection: function() {
|
2012-12-02 21:38:10 -05:00
|
|
|
var selection = this.get('selection'),
|
2012-12-03 02:17:10 -05:00
|
|
|
id = media.view.settings.post.featuredImageId,
|
2012-12-02 21:38:10 -05:00
|
|
|
attachment;
|
|
|
|
|
|
|
|
if ( '' !== id && -1 !== id ) {
|
2014-01-20 18:42:11 -05:00
|
|
|
attachment = media.model.Attachment.get( id );
|
2012-12-02 21:38:10 -05:00
|
|
|
attachment.fetch();
|
|
|
|
}
|
|
|
|
|
|
|
|
selection.reset( attachment ? [ attachment ] : [] );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2014-01-28 16:17:12 -05:00
|
|
|
/**
|
|
|
|
* wp.media.controller.ReplaceImage
|
|
|
|
*
|
|
|
|
* Replace a selected single image
|
|
|
|
*
|
2014-01-28 18:21:13 -05:00
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.controller.Library
|
|
|
|
* @augments wp.media.controller.State
|
|
|
|
* @augments Backbone.Model
|
|
|
|
*/
|
2014-01-28 16:17:12 -05:00
|
|
|
media.controller.ReplaceImage = media.controller.Library.extend({
|
|
|
|
defaults: _.defaults({
|
|
|
|
id: 'replace-image',
|
|
|
|
filterable: 'uploaded',
|
|
|
|
multiple: false,
|
|
|
|
toolbar: 'replace',
|
|
|
|
title: l10n.replaceImageTitle,
|
|
|
|
priority: 60,
|
2014-03-06 17:55:14 -05:00
|
|
|
syncSelection: true
|
2014-01-28 16:17:12 -05:00
|
|
|
}, media.controller.Library.prototype.defaults ),
|
|
|
|
|
|
|
|
initialize: function( options ) {
|
|
|
|
var library, comparator;
|
|
|
|
|
|
|
|
this.image = options.image;
|
|
|
|
// If we haven't been provided a `library`, create a `Selection`.
|
|
|
|
if ( ! this.get('library') ) {
|
|
|
|
this.set( 'library', media.query({ type: 'image' }) );
|
|
|
|
}
|
2014-02-07 15:21:12 -05:00
|
|
|
|
2014-01-28 16:17:12 -05:00
|
|
|
media.controller.Library.prototype.initialize.apply( this, arguments );
|
|
|
|
|
|
|
|
library = this.get('library');
|
|
|
|
comparator = library.comparator;
|
|
|
|
|
|
|
|
// Overload the library's comparator to push items that are not in
|
|
|
|
// the mirrored query to the front of the aggregate collection.
|
|
|
|
library.comparator = function( a, b ) {
|
|
|
|
var aInQuery = !! this.mirroring.get( a.cid ),
|
|
|
|
bInQuery = !! this.mirroring.get( b.cid );
|
|
|
|
|
|
|
|
if ( ! aInQuery && bInQuery ) {
|
|
|
|
return -1;
|
|
|
|
} else if ( aInQuery && ! bInQuery ) {
|
|
|
|
return 1;
|
|
|
|
} else {
|
|
|
|
return comparator.apply( this, arguments );
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
// Add all items in the selection to the library, so any featured
|
|
|
|
// images that are not initially loaded still appear.
|
|
|
|
library.observe( this.get('selection') );
|
|
|
|
},
|
|
|
|
|
|
|
|
activate: function() {
|
|
|
|
this.updateSelection();
|
|
|
|
media.controller.Library.prototype.activate.apply( this, arguments );
|
|
|
|
},
|
|
|
|
|
|
|
|
updateSelection: function() {
|
|
|
|
var selection = this.get('selection'),
|
|
|
|
attachment = this.image.attachment;
|
|
|
|
|
|
|
|
selection.reset( attachment ? [ attachment ] : [] );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2014-03-06 17:55:14 -05:00
|
|
|
/**
|
|
|
|
* wp.media.controller.EditImage
|
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.controller.State
|
|
|
|
* @augments Backbone.Model
|
|
|
|
*/
|
|
|
|
media.controller.EditImage = media.controller.State.extend({
|
|
|
|
defaults: {
|
|
|
|
id: 'edit-image',
|
|
|
|
url: '',
|
|
|
|
menu: false,
|
|
|
|
toolbar: 'edit-image',
|
|
|
|
title: l10n.editImage,
|
|
|
|
content: 'edit-image',
|
|
|
|
syncSelection: true
|
|
|
|
},
|
|
|
|
|
|
|
|
activate: function() {
|
|
|
|
if ( ! this.get('selection') ) {
|
|
|
|
this.set( 'selection', new media.model.Selection() );
|
|
|
|
}
|
|
|
|
this.listenTo( this.frame, 'toolbar:render:edit-image', this.toolbar );
|
|
|
|
this.syncSelection();
|
|
|
|
},
|
|
|
|
|
|
|
|
deactivate: function() {
|
|
|
|
this.stopListening( this.frame );
|
|
|
|
},
|
|
|
|
|
|
|
|
toolbar: function() {
|
|
|
|
var frame = this.frame,
|
|
|
|
lastState = frame.lastState(),
|
|
|
|
previous = lastState && lastState.id;
|
|
|
|
|
|
|
|
frame.toolbar.set( new media.view.Toolbar({
|
|
|
|
controller: frame,
|
|
|
|
items: {
|
|
|
|
back: {
|
|
|
|
style: 'primary',
|
|
|
|
text: l10n.back,
|
|
|
|
priority: 20,
|
|
|
|
click: function() {
|
|
|
|
if ( previous ) {
|
|
|
|
frame.setState( previous );
|
|
|
|
} else {
|
|
|
|
frame.close();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}) );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
_.extend( media.controller.EditImage.prototype, media.selectionSync );
|
|
|
|
|
2014-03-05 10:06:14 -05:00
|
|
|
/**
|
2014-03-09 00:25:15 -05:00
|
|
|
* wp.media.controller.MediaLibrary
|
2014-03-05 10:06:14 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.controller.Library
|
|
|
|
* @augments wp.media.controller.State
|
|
|
|
* @augments Backbone.Model
|
|
|
|
*/
|
2014-03-09 00:25:15 -05:00
|
|
|
media.controller.MediaLibrary = media.controller.Library.extend({
|
2014-03-05 10:06:14 -05:00
|
|
|
defaults: _.defaults({
|
|
|
|
filterable: 'uploaded',
|
2014-03-09 00:25:15 -05:00
|
|
|
priority: 80,
|
|
|
|
syncSelection: false,
|
2014-03-09 06:32:15 -04:00
|
|
|
displaySettings: false
|
2014-03-05 10:06:14 -05:00
|
|
|
}, media.controller.Library.prototype.defaults ),
|
|
|
|
|
|
|
|
initialize: function( options ) {
|
2014-03-09 00:25:15 -05:00
|
|
|
this.media = options.media;
|
|
|
|
this.set( 'library', media.query({ type: options.type }) );
|
2014-03-05 10:06:14 -05:00
|
|
|
|
|
|
|
media.controller.Library.prototype.initialize.apply( this, arguments );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* wp.media.controller.Embed
|
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.controller.State
|
|
|
|
* @augments Backbone.Model
|
|
|
|
*/
|
2012-11-12 00:57:12 -05:00
|
|
|
media.controller.Embed = media.controller.State.extend({
|
|
|
|
defaults: {
|
|
|
|
id: 'embed',
|
|
|
|
url: '',
|
2012-12-05 04:43:10 -05:00
|
|
|
menu: 'default',
|
2012-11-12 00:57:12 -05:00
|
|
|
content: 'embed',
|
|
|
|
toolbar: 'main-embed',
|
2012-12-03 20:26:03 -05:00
|
|
|
type: 'link',
|
|
|
|
|
2012-12-05 14:07:48 -05:00
|
|
|
title: l10n.insertFromUrlTitle,
|
2012-12-03 20:26:03 -05:00
|
|
|
priority: 120
|
2012-11-12 00:57:12 -05:00
|
|
|
},
|
|
|
|
|
2012-11-12 22:33:41 -05:00
|
|
|
// The amount of time used when debouncing the scan.
|
|
|
|
sensitivity: 200,
|
|
|
|
|
2012-11-12 00:57:12 -05:00
|
|
|
initialize: function() {
|
2012-11-12 22:33:41 -05:00
|
|
|
this.debouncedScan = _.debounce( _.bind( this.scan, this ), this.sensitivity );
|
2012-12-03 20:26:03 -05:00
|
|
|
this.props = new Backbone.Model({ url: '' });
|
|
|
|
this.props.on( 'change:url', this.debouncedScan, this );
|
2012-12-04 12:45:24 -05:00
|
|
|
this.props.on( 'change:url', this.refresh, this );
|
2012-11-12 22:33:41 -05:00
|
|
|
this.on( 'scan', this.scanImage, this );
|
2012-11-12 00:57:12 -05:00
|
|
|
},
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @fires wp.media.controller.Embed#scan
|
|
|
|
*/
|
2012-11-12 00:57:12 -05:00
|
|
|
scan: function() {
|
2012-12-06 18:12:59 -05:00
|
|
|
var scanners,
|
|
|
|
embed = this,
|
|
|
|
attributes = {
|
|
|
|
type: 'link',
|
|
|
|
scanners: []
|
|
|
|
};
|
2012-11-12 00:57:12 -05:00
|
|
|
|
2012-12-06 18:12:59 -05:00
|
|
|
// Scan is triggered with the list of `attributes` to set on the
|
|
|
|
// state, useful for the 'type' attribute and 'scanners' attribute,
|
|
|
|
// an array of promise objects for asynchronous scan operations.
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( this.props.get('url') ) {
|
2012-12-06 18:12:59 -05:00
|
|
|
this.trigger( 'scan', attributes );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-06 18:12:59 -05:00
|
|
|
|
|
|
|
if ( attributes.scanners.length ) {
|
|
|
|
scanners = attributes.scanners = $.when.apply( $, attributes.scanners );
|
|
|
|
scanners.always( function() {
|
2014-02-06 00:32:12 -05:00
|
|
|
if ( embed.get('scanners') === scanners ) {
|
2012-12-06 18:12:59 -05:00
|
|
|
embed.set( 'loading', false );
|
2014-02-06 00:32:12 -05:00
|
|
|
}
|
2012-12-06 18:12:59 -05:00
|
|
|
});
|
|
|
|
} else {
|
|
|
|
attributes.scanners = null;
|
|
|
|
}
|
|
|
|
|
|
|
|
attributes.loading = !! attributes.scanners;
|
2012-11-12 00:57:12 -05:00
|
|
|
this.set( attributes );
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Object} attributes
|
|
|
|
*/
|
2012-11-12 22:33:41 -05:00
|
|
|
scanImage: function( attributes ) {
|
|
|
|
var frame = this.frame,
|
|
|
|
state = this,
|
2012-12-03 20:26:03 -05:00
|
|
|
url = this.props.get('url'),
|
2012-12-06 18:12:59 -05:00
|
|
|
image = new Image(),
|
|
|
|
deferred = $.Deferred();
|
|
|
|
|
|
|
|
attributes.scanners.push( deferred.promise() );
|
2012-11-12 22:33:41 -05:00
|
|
|
|
2012-12-04 18:07:41 -05:00
|
|
|
// Try to load the image and find its width/height.
|
2012-11-12 22:33:41 -05:00
|
|
|
image.onload = function() {
|
2012-12-06 18:12:59 -05:00
|
|
|
deferred.resolve();
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( state !== frame.state() || url !== state.props.get('url') ) {
|
2012-11-21 09:32:52 -05:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-21 09:32:52 -05:00
|
|
|
|
|
|
|
state.set({
|
2012-12-06 18:12:59 -05:00
|
|
|
type: 'image'
|
|
|
|
});
|
|
|
|
|
|
|
|
state.props.set({
|
2012-11-21 09:32:52 -05:00
|
|
|
width: image.width,
|
|
|
|
height: image.height
|
|
|
|
});
|
2012-11-12 22:33:41 -05:00
|
|
|
};
|
|
|
|
|
2012-12-06 18:12:59 -05:00
|
|
|
image.onerror = deferred.reject;
|
2012-11-12 22:33:41 -05:00
|
|
|
image.src = url;
|
|
|
|
},
|
|
|
|
|
2012-12-04 12:45:24 -05:00
|
|
|
refresh: function() {
|
|
|
|
this.frame.toolbar.get().refresh();
|
|
|
|
},
|
|
|
|
|
2012-11-12 00:57:12 -05:00
|
|
|
reset: function() {
|
2012-12-04 23:43:51 -05:00
|
|
|
this.props.clear().set({ url: '' });
|
2012-12-02 21:38:10 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( this.active ) {
|
2012-12-04 12:45:24 -05:00
|
|
|
this.refresh();
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-12 00:57:12 -05:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2014-03-11 00:13:16 -04:00
|
|
|
/**
|
|
|
|
* wp.media.controller.Cropper
|
|
|
|
*
|
|
|
|
* Allows for a cropping step.
|
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.controller.State
|
|
|
|
* @augments Backbone.Model
|
|
|
|
*/
|
|
|
|
media.controller.Cropper = media.controller.State.extend({
|
|
|
|
defaults: {
|
|
|
|
id: 'cropper',
|
|
|
|
title: l10n.cropImage,
|
|
|
|
toolbar: 'crop',
|
|
|
|
content: 'crop',
|
|
|
|
router: false,
|
|
|
|
canSkipCrop: false
|
|
|
|
},
|
|
|
|
|
|
|
|
activate: function() {
|
|
|
|
this.frame.on( 'content:create:crop', this.createCropContent, this );
|
|
|
|
this.frame.on( 'close', this.removeCropper, this );
|
|
|
|
this.set('selection', new Backbone.Collection(this.frame._selection.single));
|
|
|
|
},
|
|
|
|
|
|
|
|
deactivate: function() {
|
|
|
|
this.frame.toolbar.mode('browse');
|
|
|
|
},
|
|
|
|
|
|
|
|
createCropContent: function() {
|
|
|
|
this.cropperView = new wp.media.view.Cropper({controller: this,
|
|
|
|
attachment: this.get('selection').first() });
|
|
|
|
this.cropperView.on('image-loaded', this.createCropToolbar, this);
|
|
|
|
this.frame.content.set(this.cropperView);
|
|
|
|
|
|
|
|
},
|
|
|
|
removeCropper: function() {
|
|
|
|
this.imgSelect.cancelSelection();
|
|
|
|
this.imgSelect.setOptions({remove: true});
|
|
|
|
this.imgSelect.update();
|
|
|
|
this.cropperView.remove();
|
|
|
|
},
|
|
|
|
createCropToolbar: function() {
|
|
|
|
var canSkipCrop, toolbarOptions;
|
|
|
|
|
|
|
|
canSkipCrop = this.get('canSkipCrop') || false;
|
|
|
|
|
|
|
|
toolbarOptions = {
|
|
|
|
controller: this.frame,
|
|
|
|
items: {
|
|
|
|
insert: {
|
|
|
|
style: 'primary',
|
|
|
|
text: l10n.cropImage,
|
|
|
|
priority: 80,
|
|
|
|
requires: { library: false, selection: false },
|
|
|
|
|
|
|
|
click: function() {
|
|
|
|
var self = this,
|
|
|
|
selection = this.controller.state().get('selection').first();
|
|
|
|
|
|
|
|
selection.set({cropDetails: this.controller.state().imgSelect.getSelection()});
|
|
|
|
|
|
|
|
this.$el.text(l10n.cropping);
|
|
|
|
this.$el.attr('disabled', true);
|
|
|
|
this.controller.state().doCrop( selection ).done( function( croppedImage ) {
|
|
|
|
self.controller.trigger('cropped', croppedImage );
|
|
|
|
self.controller.close();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
if ( canSkipCrop ) {
|
|
|
|
_.extend( toolbarOptions.items, {
|
|
|
|
skip: {
|
|
|
|
style: 'secondary',
|
|
|
|
text: l10n.skipCropping,
|
|
|
|
priority: 70,
|
|
|
|
requires: { library: false, selection: false },
|
|
|
|
click: function() {
|
|
|
|
var selection = this.controller.state().get('selection').first();
|
|
|
|
this.controller.state().cropperView.remove();
|
|
|
|
this.controller.trigger('skippedcrop', selection);
|
|
|
|
this.controller.close();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
this.frame.toolbar.set( new wp.media.view.Toolbar(toolbarOptions) );
|
|
|
|
},
|
|
|
|
|
|
|
|
doCrop: function( attachment ) {
|
|
|
|
return wp.ajax.post( 'custom-header-crop', {
|
|
|
|
nonce: attachment.get('nonces').edit,
|
|
|
|
id: attachment.get('id'),
|
|
|
|
cropDetails: attachment.get('cropDetails')
|
|
|
|
} );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-11-07 15:14:41 -05:00
|
|
|
/**
|
|
|
|
* ========================================================================
|
|
|
|
* VIEWS
|
|
|
|
* ========================================================================
|
|
|
|
*/
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* wp.media.View
|
|
|
|
* -------------
|
|
|
|
*
|
|
|
|
* The base view class.
|
|
|
|
*
|
|
|
|
* Undelegating events, removing events from the model, and
|
|
|
|
* removing events from the controller mirror the code for
|
|
|
|
* `Backbone.View.dispose` in Backbone 0.9.8 development.
|
|
|
|
*
|
|
|
|
* This behavior has since been removed, and should not be used
|
|
|
|
* outside of the media manager.
|
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
|
|
|
*/
|
2013-05-26 02:34:33 -04:00
|
|
|
media.View = wp.Backbone.View.extend({
|
2013-05-25 17:38:12 -04:00
|
|
|
constructor: function( options ) {
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( options && options.controller ) {
|
2013-05-25 17:38:12 -04:00
|
|
|
this.controller = options.controller;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2013-05-26 02:34:33 -04:00
|
|
|
wp.Backbone.View.apply( this, arguments );
|
2013-05-25 17:38:12 -04:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {wp.media.View} Returns itself to allow chaining
|
|
|
|
*/
|
2013-05-25 17:38:12 -04:00
|
|
|
dispose: function() {
|
|
|
|
// Undelegating events, removing events from the model, and
|
|
|
|
// removing events from the controller mirror the code for
|
|
|
|
// `Backbone.View.dispose` in Backbone 0.9.8 development.
|
|
|
|
this.undelegateEvents();
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( this.model && this.model.off ) {
|
2013-05-25 17:38:12 -04:00
|
|
|
this.model.off( null, null, this );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2013-05-25 17:38:12 -04:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( this.collection && this.collection.off ) {
|
2013-05-25 17:38:12 -04:00
|
|
|
this.collection.off( null, null, this );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2013-05-25 17:38:12 -04:00
|
|
|
|
|
|
|
// Unbind controller events.
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( this.controller && this.controller.off ) {
|
2013-05-25 17:38:12 -04:00
|
|
|
this.controller.off( null, null, this );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2013-05-25 17:38:12 -04:00
|
|
|
|
|
|
|
return this;
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {wp.media.View} Returns itself to allow chaining
|
|
|
|
*/
|
2013-05-25 17:38:12 -04:00
|
|
|
remove: function() {
|
|
|
|
this.dispose();
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* call 'remove' directly on the parent class
|
|
|
|
*/
|
2013-05-26 02:34:33 -04:00
|
|
|
return wp.Backbone.View.prototype.remove.apply( this, arguments );
|
2013-05-25 17:38:12 -04:00
|
|
|
}
|
|
|
|
});
|
2012-11-18 19:36:47 -05:00
|
|
|
|
2012-11-07 15:14:41 -05:00
|
|
|
/**
|
|
|
|
* wp.media.view.Frame
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
2014-02-07 15:21:12 -05:00
|
|
|
* A frame is a composite view consisting of one or more regions and one or more
|
|
|
|
* states. Only one state can be active at any given moment.
|
|
|
|
*
|
2014-01-20 18:42:11 -05:00
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
|
|
|
* @mixes wp.media.controller.StateMachine
|
2012-11-07 15:14:41 -05:00
|
|
|
*/
|
2012-11-18 19:36:47 -05:00
|
|
|
media.view.Frame = media.View.extend({
|
2012-11-01 21:20:01 -04:00
|
|
|
initialize: function() {
|
2012-11-07 15:14:41 -05:00
|
|
|
this._createRegions();
|
|
|
|
this._createStates();
|
2012-11-01 21:20:01 -04:00
|
|
|
},
|
|
|
|
|
2012-11-07 15:14:41 -05:00
|
|
|
_createRegions: function() {
|
|
|
|
// Clone the regions array.
|
|
|
|
this.regions = this.regions ? this.regions.slice() : [];
|
|
|
|
|
|
|
|
// Initialize regions.
|
|
|
|
_.each( this.regions, function( region ) {
|
|
|
|
this[ region ] = new media.controller.Region({
|
2012-12-03 20:26:03 -05:00
|
|
|
view: this,
|
|
|
|
id: region,
|
|
|
|
selector: '.media-frame-' + region
|
2012-11-07 15:14:41 -05:00
|
|
|
});
|
|
|
|
}, this );
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @fires wp.media.controller.State#ready
|
|
|
|
*/
|
2012-11-07 15:14:41 -05:00
|
|
|
_createStates: function() {
|
|
|
|
// Create the default `states` collection.
|
2012-11-10 02:51:37 -05:00
|
|
|
this.states = new Backbone.Collection( null, {
|
|
|
|
model: media.controller.State
|
|
|
|
});
|
2012-11-07 15:14:41 -05:00
|
|
|
|
|
|
|
// Ensure states have a reference to the frame.
|
|
|
|
this.states.on( 'add', function( model ) {
|
|
|
|
model.frame = this;
|
2012-12-03 20:26:03 -05:00
|
|
|
model.trigger('ready');
|
2012-11-07 15:14:41 -05:00
|
|
|
}, this );
|
2012-12-05 04:43:10 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( this.options.states ) {
|
2012-12-05 04:43:10 -05:00
|
|
|
this.states.add( this.options.states );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-01 21:20:01 -04:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {wp.media.view.Frame} Returns itself to allow chaining
|
|
|
|
*/
|
2012-11-07 15:14:41 -05:00
|
|
|
reset: function() {
|
|
|
|
this.states.invoke( 'trigger', 'reset' );
|
2012-11-09 04:47:12 -05:00
|
|
|
return this;
|
2012-11-07 15:14:41 -05:00
|
|
|
}
|
2012-11-01 21:20:01 -04:00
|
|
|
});
|
|
|
|
|
2012-11-07 15:14:41 -05:00
|
|
|
// Make the `Frame` a `StateMachine`.
|
|
|
|
_.extend( media.view.Frame.prototype, media.controller.StateMachine.prototype );
|
2012-09-11 17:13:07 -04:00
|
|
|
|
2012-10-28 19:29:17 -04:00
|
|
|
/**
|
2012-11-07 15:14:41 -05:00
|
|
|
* wp.media.view.MediaFrame
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
2014-02-07 15:21:12 -05:00
|
|
|
* Type of frame used to create the media modal.
|
|
|
|
*
|
2014-01-20 18:42:11 -05:00
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.view.Frame
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
|
|
|
* @mixes wp.media.controller.StateMachine
|
2012-10-28 19:29:17 -04:00
|
|
|
*/
|
2012-11-07 15:14:41 -05:00
|
|
|
media.view.MediaFrame = media.view.Frame.extend({
|
2012-10-28 19:29:17 -04:00
|
|
|
className: 'media-frame',
|
2012-11-18 19:36:47 -05:00
|
|
|
template: media.template('media-frame'),
|
2012-12-03 20:26:03 -05:00
|
|
|
regions: ['menu','title','content','toolbar','router'],
|
2012-09-11 17:13:07 -04:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @global wp.Uploader
|
|
|
|
*/
|
2012-10-28 19:29:17 -04:00
|
|
|
initialize: function() {
|
2014-02-07 15:21:12 -05:00
|
|
|
|
2012-11-07 15:14:41 -05:00
|
|
|
media.view.Frame.prototype.initialize.apply( this, arguments );
|
|
|
|
|
2012-10-28 19:29:17 -04:00
|
|
|
_.defaults( this.options, {
|
2012-11-07 15:14:41 -05:00
|
|
|
title: '',
|
|
|
|
modal: true,
|
|
|
|
uploader: true
|
2012-10-28 19:29:17 -04:00
|
|
|
});
|
|
|
|
|
2012-11-30 08:40:59 -05:00
|
|
|
// Ensure core UI is enabled.
|
|
|
|
this.$el.addClass('wp-core-ui');
|
|
|
|
|
2012-11-07 15:14:41 -05:00
|
|
|
// Initialize modal container view.
|
|
|
|
if ( this.options.modal ) {
|
|
|
|
this.modal = new media.view.Modal({
|
|
|
|
controller: this,
|
|
|
|
title: this.options.title
|
|
|
|
});
|
2012-12-02 21:38:10 -05:00
|
|
|
|
|
|
|
this.modal.content( this );
|
2012-11-07 15:14:41 -05:00
|
|
|
}
|
|
|
|
|
2012-11-22 06:46:03 -05:00
|
|
|
// Force the uploader off if the upload limit has been exceeded or
|
|
|
|
// if the browser isn't supported.
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( wp.Uploader.limitExceeded || ! wp.Uploader.browser.supported ) {
|
2012-11-22 06:46:03 -05:00
|
|
|
this.options.uploader = false;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-22 06:46:03 -05:00
|
|
|
|
2012-11-07 15:14:41 -05:00
|
|
|
// Initialize window-wide uploader.
|
|
|
|
if ( this.options.uploader ) {
|
|
|
|
this.uploader = new media.view.UploaderWindow({
|
2012-11-21 15:34:46 -05:00
|
|
|
controller: this,
|
2012-11-07 15:14:41 -05:00
|
|
|
uploader: {
|
2012-11-16 05:30:36 -05:00
|
|
|
dropzone: this.modal ? this.modal.$el : this.$el,
|
|
|
|
container: this.$el
|
2012-11-07 15:14:41 -05:00
|
|
|
}
|
|
|
|
});
|
2012-11-21 15:27:49 -05:00
|
|
|
this.views.set( '.media-frame-uploader', this.uploader );
|
2012-11-07 15:14:41 -05:00
|
|
|
}
|
2012-11-19 19:53:02 -05:00
|
|
|
|
|
|
|
this.on( 'attach', _.bind( this.views.ready, this.views ), this );
|
2012-12-03 20:26:03 -05:00
|
|
|
|
|
|
|
// Bind default title creation.
|
|
|
|
this.on( 'title:create:default', this.createTitle, this );
|
|
|
|
this.title.mode('default');
|
2012-12-05 04:43:10 -05:00
|
|
|
|
|
|
|
// Bind default menu.
|
|
|
|
this.on( 'menu:create:default', this.createMenu, this );
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {wp.media.view.MediaFrame} Returns itself to allow chaining
|
|
|
|
*/
|
2012-12-02 23:38:10 -05:00
|
|
|
render: function() {
|
|
|
|
// Activate the default state if no active state exists.
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! this.state() && this.options.state ) {
|
2012-12-02 23:38:10 -05:00
|
|
|
this.setState( this.options.state );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
|
|
|
/**
|
|
|
|
* call 'render' directly on the parent class
|
|
|
|
*/
|
2012-12-02 23:38:10 -05:00
|
|
|
return media.view.Frame.prototype.render.apply( this, arguments );
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Object} title
|
|
|
|
* @this wp.media.controller.Region
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
createTitle: function( title ) {
|
|
|
|
title.view = new media.View({
|
|
|
|
controller: this,
|
|
|
|
tagName: 'h1'
|
|
|
|
});
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Object} menu
|
|
|
|
* @this wp.media.controller.Region
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
createMenu: function( menu ) {
|
|
|
|
menu.view = new media.view.Menu({
|
|
|
|
controller: this
|
|
|
|
});
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Object} toolbar
|
|
|
|
* @this wp.media.controller.Region
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
createToolbar: function( toolbar ) {
|
2012-12-04 11:21:57 -05:00
|
|
|
toolbar.view = new media.view.Toolbar({
|
2012-12-03 20:26:03 -05:00
|
|
|
controller: this
|
|
|
|
});
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Object} router
|
|
|
|
* @this wp.media.controller.Region
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
createRouter: function( router ) {
|
|
|
|
router.view = new media.view.Router({
|
|
|
|
controller: this
|
|
|
|
});
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Object} options
|
|
|
|
*/
|
2012-11-10 02:51:37 -05:00
|
|
|
createIframeStates: function( options ) {
|
|
|
|
var settings = media.view.settings,
|
|
|
|
tabs = settings.tabs,
|
|
|
|
tabUrl = settings.tabUrl,
|
|
|
|
$postId;
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! tabs || ! tabUrl ) {
|
2012-11-10 02:51:37 -05:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-10 02:51:37 -05:00
|
|
|
|
|
|
|
// Add the post ID to the tab URL if it exists.
|
|
|
|
$postId = $('#post_ID');
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( $postId.length ) {
|
2012-11-10 02:51:37 -05:00
|
|
|
tabUrl += '&post_id=' + $postId.val();
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-10 02:51:37 -05:00
|
|
|
|
|
|
|
// Generate the tab states.
|
|
|
|
_.each( tabs, function( title, id ) {
|
2013-11-14 00:54:10 -05:00
|
|
|
this.state( 'iframe:' + id ).set( _.defaults({
|
2012-11-10 02:51:37 -05:00
|
|
|
tab: id,
|
|
|
|
src: tabUrl + '&tab=' + id,
|
|
|
|
title: title,
|
|
|
|
content: 'iframe',
|
2012-12-05 04:43:10 -05:00
|
|
|
menu: 'default'
|
2012-11-10 02:51:37 -05:00
|
|
|
}, options ) );
|
|
|
|
}, this );
|
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
this.on( 'content:create:iframe', this.iframeContent, this );
|
2012-12-05 04:43:10 -05:00
|
|
|
this.on( 'menu:render:default', this.iframeMenu, this );
|
2012-11-10 02:51:37 -05:00
|
|
|
this.on( 'open', this.hijackThickbox, this );
|
|
|
|
this.on( 'close', this.restoreThickbox, this );
|
|
|
|
},
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Object} content
|
|
|
|
* @this wp.media.controller.Region
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
iframeContent: function( content ) {
|
2012-11-22 01:30:25 -05:00
|
|
|
this.$el.addClass('hide-toolbar');
|
2012-12-03 20:26:03 -05:00
|
|
|
content.view = new media.view.Iframe({
|
2012-11-10 02:51:37 -05:00
|
|
|
controller: this
|
2012-12-03 20:26:03 -05:00
|
|
|
});
|
2012-11-10 02:51:37 -05:00
|
|
|
},
|
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
iframeMenu: function( view ) {
|
2012-11-10 02:51:37 -05:00
|
|
|
var views = {};
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! view ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 20:26:03 -05:00
|
|
|
|
2012-11-10 02:51:37 -05:00
|
|
|
_.each( media.view.settings.tabs, function( title, id ) {
|
|
|
|
views[ 'iframe:' + id ] = {
|
2012-11-30 10:19:11 -05:00
|
|
|
text: this.state( 'iframe:' + id ).get('title'),
|
2012-11-10 02:51:37 -05:00
|
|
|
priority: 200
|
|
|
|
};
|
|
|
|
}, this );
|
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
view.set( views );
|
2012-11-10 02:51:37 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
hijackThickbox: function() {
|
|
|
|
var frame = this;
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! window.tb_remove || this._tb_remove ) {
|
2012-11-10 02:51:37 -05:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-10 02:51:37 -05:00
|
|
|
|
|
|
|
this._tb_remove = window.tb_remove;
|
|
|
|
window.tb_remove = function() {
|
|
|
|
frame.close();
|
|
|
|
frame.reset();
|
2012-11-30 10:19:11 -05:00
|
|
|
frame.setState( frame.options.state );
|
2012-11-10 02:51:37 -05:00
|
|
|
frame._tb_remove.call( window );
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
restoreThickbox: function() {
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! this._tb_remove ) {
|
2012-11-10 02:51:37 -05:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-10 02:51:37 -05:00
|
|
|
|
|
|
|
window.tb_remove = this._tb_remove;
|
|
|
|
delete this._tb_remove;
|
2012-11-07 15:14:41 -05:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// Map some of the modal's methods to the frame.
|
2012-12-02 21:38:10 -05:00
|
|
|
_.each(['open','close','attach','detach','escape'], function( method ) {
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {wp.media.view.MediaFrame} Returns itself to allow chaining
|
|
|
|
*/
|
2013-11-14 00:54:10 -05:00
|
|
|
media.view.MediaFrame.prototype[ method ] = function() {
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( this.modal ) {
|
2012-11-07 15:14:41 -05:00
|
|
|
this.modal[ method ].apply( this.modal, arguments );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-07 15:14:41 -05:00
|
|
|
return this;
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
|
|
|
/**
|
2012-11-09 04:47:12 -05:00
|
|
|
* wp.media.view.MediaFrame.Select
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
2014-02-07 15:21:12 -05:00
|
|
|
* Type of media frame that is used to select an item or items from the media library
|
|
|
|
*
|
2014-01-20 18:42:11 -05:00
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.view.MediaFrame
|
|
|
|
* @augments wp.media.view.Frame
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
|
|
|
* @mixes wp.media.controller.StateMachine
|
2012-11-07 15:14:41 -05:00
|
|
|
*/
|
2012-11-09 04:47:12 -05:00
|
|
|
media.view.MediaFrame.Select = media.view.MediaFrame.extend({
|
2012-11-07 15:14:41 -05:00
|
|
|
initialize: function() {
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* call 'initialize' directly on the parent class
|
|
|
|
*/
|
2012-11-07 15:14:41 -05:00
|
|
|
media.view.MediaFrame.prototype.initialize.apply( this, arguments );
|
|
|
|
|
|
|
|
_.defaults( this.options, {
|
|
|
|
selection: [],
|
|
|
|
library: {},
|
2012-12-04 11:21:57 -05:00
|
|
|
multiple: false,
|
|
|
|
state: 'library'
|
2012-11-07 15:14:41 -05:00
|
|
|
});
|
|
|
|
|
|
|
|
this.createSelection();
|
|
|
|
this.createStates();
|
2012-11-08 21:11:37 -05:00
|
|
|
this.bindHandlers();
|
2012-11-07 15:14:41 -05:00
|
|
|
},
|
|
|
|
|
2012-11-09 04:47:12 -05:00
|
|
|
createSelection: function() {
|
2013-11-14 00:54:10 -05:00
|
|
|
var selection = this.options.selection;
|
2012-11-09 04:47:12 -05:00
|
|
|
|
|
|
|
if ( ! (selection instanceof media.model.Selection) ) {
|
|
|
|
this.options.selection = new media.model.Selection( selection, {
|
|
|
|
multiple: this.options.multiple
|
|
|
|
});
|
|
|
|
}
|
2012-12-05 22:55:37 -05:00
|
|
|
|
|
|
|
this._selection = {
|
2014-01-20 18:42:11 -05:00
|
|
|
attachments: new media.model.Attachments(),
|
2012-12-05 22:55:37 -05:00
|
|
|
difference: []
|
|
|
|
};
|
2012-11-09 04:47:12 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
createStates: function() {
|
2012-11-21 13:29:53 -05:00
|
|
|
var options = this.options;
|
2012-11-09 04:47:12 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( this.options.states ) {
|
2012-12-05 04:43:10 -05:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-05 04:43:10 -05:00
|
|
|
|
2012-11-09 04:47:12 -05:00
|
|
|
// Add the default states.
|
|
|
|
this.states.add([
|
|
|
|
// Main states.
|
2012-11-21 14:21:08 -05:00
|
|
|
new media.controller.Library({
|
2012-11-21 13:29:53 -05:00
|
|
|
library: media.query( options.library ),
|
2012-12-03 20:26:03 -05:00
|
|
|
multiple: options.multiple,
|
|
|
|
title: options.title,
|
|
|
|
priority: 20
|
2012-11-21 13:29:53 -05:00
|
|
|
})
|
2012-11-09 04:47:12 -05:00
|
|
|
]);
|
|
|
|
},
|
|
|
|
|
2012-11-07 15:14:41 -05:00
|
|
|
bindHandlers: function() {
|
2012-12-03 20:26:03 -05:00
|
|
|
this.on( 'router:create:browse', this.createRouter, this );
|
|
|
|
this.on( 'router:render:browse', this.browseRouter, this );
|
|
|
|
this.on( 'content:create:browse', this.browseContent, this );
|
|
|
|
this.on( 'content:render:upload', this.uploadContent, this );
|
|
|
|
this.on( 'toolbar:create:select', this.createSelectToolbar, this );
|
2012-11-09 04:47:12 -05:00
|
|
|
},
|
2012-11-07 15:14:41 -05:00
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
// Routers
|
|
|
|
browseRouter: function( view ) {
|
|
|
|
view.set({
|
|
|
|
upload: {
|
|
|
|
text: l10n.uploadFilesTitle,
|
|
|
|
priority: 20
|
|
|
|
},
|
|
|
|
browse: {
|
|
|
|
text: l10n.mediaLibraryTitle,
|
|
|
|
priority: 40
|
2012-11-09 04:47:12 -05:00
|
|
|
}
|
2012-12-03 20:26:03 -05:00
|
|
|
});
|
2012-11-09 04:47:12 -05:00
|
|
|
},
|
2012-11-07 15:14:41 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* Content
|
|
|
|
*
|
|
|
|
* @param {Object} content
|
|
|
|
* @this wp.media.controller.Region
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
browseContent: function( content ) {
|
2012-11-09 04:47:12 -05:00
|
|
|
var state = this.state();
|
2012-11-08 09:15:09 -05:00
|
|
|
|
2012-11-30 01:01:47 -05:00
|
|
|
this.$el.removeClass('hide-toolbar');
|
|
|
|
|
2012-11-09 04:47:12 -05:00
|
|
|
// Browse our library of attachments.
|
2012-12-03 20:26:03 -05:00
|
|
|
content.view = new media.view.AttachmentsBrowser({
|
2012-11-09 04:47:12 -05:00
|
|
|
controller: this,
|
|
|
|
collection: state.get('library'),
|
2012-11-14 21:36:06 -05:00
|
|
|
selection: state.get('selection'),
|
2012-11-09 04:47:12 -05:00
|
|
|
model: state,
|
|
|
|
sortable: state.get('sortable'),
|
2012-11-10 04:11:33 -05:00
|
|
|
search: state.get('searchable'),
|
2012-11-20 08:49:35 -05:00
|
|
|
filters: state.get('filterable'),
|
2012-11-22 01:30:25 -05:00
|
|
|
display: state.get('displaySettings'),
|
2012-12-03 20:26:03 -05:00
|
|
|
dragInfo: state.get('dragInfo'),
|
2012-11-08 21:11:37 -05:00
|
|
|
|
2012-11-09 04:47:12 -05:00
|
|
|
AttachmentView: state.get('AttachmentView')
|
2012-12-03 20:26:03 -05:00
|
|
|
});
|
2012-11-09 04:47:12 -05:00
|
|
|
},
|
2012-11-08 21:11:37 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
*
|
|
|
|
* @this wp.media.controller.Region
|
|
|
|
*/
|
2012-11-09 04:47:12 -05:00
|
|
|
uploadContent: function() {
|
2012-12-03 20:26:03 -05:00
|
|
|
this.$el.removeClass('hide-toolbar');
|
|
|
|
this.content.set( new media.view.UploaderInline({
|
2012-11-09 04:47:12 -05:00
|
|
|
controller: this
|
2012-11-19 17:48:11 -05:00
|
|
|
}) );
|
2012-09-27 00:09:43 -04:00
|
|
|
},
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* Toolbars
|
|
|
|
*
|
|
|
|
* @param {Object} toolbar
|
|
|
|
* @param {Object} [options={}]
|
|
|
|
* @this wp.media.controller.Region
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
createSelectToolbar: function( toolbar, options ) {
|
2012-12-04 11:21:57 -05:00
|
|
|
options = options || this.options.button || {};
|
|
|
|
options.controller = this;
|
2012-11-09 04:47:12 -05:00
|
|
|
|
2012-12-04 11:21:57 -05:00
|
|
|
toolbar.view = new media.view.Toolbar.Select( options );
|
2012-11-09 04:47:12 -05:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.view.MediaFrame.Post
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.view.MediaFrame.Select
|
|
|
|
* @augments wp.media.view.MediaFrame
|
|
|
|
* @augments wp.media.view.Frame
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
|
|
|
* @mixes wp.media.controller.StateMachine
|
2012-11-09 04:47:12 -05:00
|
|
|
*/
|
|
|
|
media.view.MediaFrame.Post = media.view.MediaFrame.Select.extend({
|
|
|
|
initialize: function() {
|
|
|
|
_.defaults( this.options, {
|
|
|
|
multiple: true,
|
2012-12-04 11:21:57 -05:00
|
|
|
editing: false,
|
|
|
|
state: 'insert'
|
2012-11-09 04:47:12 -05:00
|
|
|
});
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* call 'initialize' directly on the parent class
|
|
|
|
*/
|
2012-11-09 04:47:12 -05:00
|
|
|
media.view.MediaFrame.Select.prototype.initialize.apply( this, arguments );
|
2012-11-10 02:51:37 -05:00
|
|
|
this.createIframeStates();
|
2012-10-28 19:29:17 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
createStates: function() {
|
2012-12-05 22:55:37 -05:00
|
|
|
var options = this.options;
|
2012-11-08 20:44:02 -05:00
|
|
|
|
2012-10-28 19:29:17 -04:00
|
|
|
// Add the default states.
|
|
|
|
this.states.add([
|
2012-11-08 20:44:02 -05:00
|
|
|
// Main states.
|
2012-11-21 13:29:53 -05:00
|
|
|
new media.controller.Library({
|
2012-12-03 20:26:03 -05:00
|
|
|
id: 'insert',
|
|
|
|
title: l10n.insertMediaTitle,
|
|
|
|
priority: 20,
|
|
|
|
toolbar: 'main-insert',
|
|
|
|
filterable: 'all',
|
2012-11-20 08:49:35 -05:00
|
|
|
library: media.query( options.library ),
|
2012-12-03 20:26:03 -05:00
|
|
|
multiple: options.multiple ? 'reset' : false,
|
2012-11-20 08:49:35 -05:00
|
|
|
editable: true,
|
2012-11-21 13:29:53 -05:00
|
|
|
|
2012-12-05 05:29:24 -05:00
|
|
|
// If the user isn't allowed to edit fields,
|
|
|
|
// can they still edit it locally?
|
|
|
|
allowLocalEdits: true,
|
|
|
|
|
2012-11-22 01:30:25 -05:00
|
|
|
// Show the attachment display settings.
|
|
|
|
displaySettings: true,
|
2012-11-21 13:29:53 -05:00
|
|
|
// Update user settings when users adjust the
|
|
|
|
// attachment display settings.
|
|
|
|
displayUserSettings: true
|
|
|
|
}),
|
2012-11-07 15:14:41 -05:00
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
new media.controller.Library({
|
|
|
|
id: 'gallery',
|
|
|
|
title: l10n.createGalleryTitle,
|
|
|
|
priority: 40,
|
|
|
|
toolbar: 'main-gallery',
|
|
|
|
filterable: 'uploaded',
|
|
|
|
multiple: 'add',
|
2012-12-04 13:23:47 -05:00
|
|
|
editable: false,
|
2012-12-03 20:26:03 -05:00
|
|
|
|
|
|
|
library: media.query( _.defaults({
|
|
|
|
type: 'image'
|
2012-12-05 22:55:37 -05:00
|
|
|
}, options.library ) )
|
2012-11-21 13:29:53 -05:00
|
|
|
}),
|
2012-11-07 15:14:41 -05:00
|
|
|
|
2012-11-12 00:57:12 -05:00
|
|
|
// Embed states.
|
|
|
|
new media.controller.Embed(),
|
|
|
|
|
2014-03-06 17:55:14 -05:00
|
|
|
new media.controller.EditImage( { selection: options.selection } ),
|
|
|
|
|
2012-11-08 20:44:02 -05:00
|
|
|
// Gallery states.
|
2014-03-02 18:11:14 -05:00
|
|
|
new media.controller.CollectionEdit({
|
|
|
|
type: 'image',
|
|
|
|
collectionType: 'gallery',
|
|
|
|
title: l10n.editGalleryTitle,
|
|
|
|
SettingsView: media.view.Settings.Gallery,
|
|
|
|
library: options.selection,
|
|
|
|
editing: options.editing,
|
|
|
|
menu: 'gallery'
|
2012-11-07 15:14:41 -05:00
|
|
|
}),
|
|
|
|
|
2014-02-27 18:04:13 -05:00
|
|
|
new media.controller.CollectionAdd({
|
2014-03-02 18:11:14 -05:00
|
|
|
type: 'image',
|
|
|
|
collectionType: 'gallery',
|
|
|
|
title: l10n.addToGalleryTitle
|
2014-02-27 18:04:13 -05:00
|
|
|
}),
|
2014-02-24 13:08:16 -05:00
|
|
|
|
|
|
|
new media.controller.Library({
|
|
|
|
id: 'playlist',
|
|
|
|
title: l10n.createPlaylistTitle,
|
|
|
|
priority: 60,
|
|
|
|
toolbar: 'main-playlist',
|
|
|
|
filterable: 'uploaded',
|
|
|
|
multiple: 'add',
|
|
|
|
editable: false,
|
|
|
|
|
|
|
|
library: media.query( _.defaults({
|
|
|
|
type: 'audio'
|
|
|
|
}, options.library ) )
|
|
|
|
}),
|
|
|
|
|
|
|
|
// Playlist states.
|
2014-03-02 18:11:14 -05:00
|
|
|
new media.controller.CollectionEdit({
|
|
|
|
type: 'audio',
|
|
|
|
collectionType: 'playlist',
|
|
|
|
title: l10n.editPlaylistTitle,
|
|
|
|
SettingsView: media.view.Settings.Playlist,
|
|
|
|
library: options.selection,
|
|
|
|
editing: options.editing,
|
|
|
|
menu: 'playlist',
|
|
|
|
dragInfoText: l10n.playlistDragInfo,
|
|
|
|
dragInfo: false
|
2014-02-24 13:08:16 -05:00
|
|
|
}),
|
|
|
|
|
2014-02-27 18:04:13 -05:00
|
|
|
new media.controller.CollectionAdd({
|
|
|
|
type: 'audio',
|
2014-03-02 18:11:14 -05:00
|
|
|
collectionType: 'playlist',
|
2014-02-27 18:04:13 -05:00
|
|
|
title: l10n.addToPlaylistTitle
|
|
|
|
}),
|
2014-02-24 13:08:16 -05:00
|
|
|
|
|
|
|
new media.controller.Library({
|
|
|
|
id: 'video-playlist',
|
|
|
|
title: l10n.createVideoPlaylistTitle,
|
|
|
|
priority: 60,
|
|
|
|
toolbar: 'main-video-playlist',
|
|
|
|
filterable: 'uploaded',
|
|
|
|
multiple: 'add',
|
|
|
|
editable: false,
|
|
|
|
|
|
|
|
library: media.query( _.defaults({
|
|
|
|
type: 'video'
|
|
|
|
}, options.library ) )
|
|
|
|
}),
|
|
|
|
|
|
|
|
// Video Playlist states.
|
2014-03-02 18:11:14 -05:00
|
|
|
new media.controller.CollectionEdit({
|
|
|
|
type: 'video',
|
|
|
|
collectionType: 'video-playlist',
|
|
|
|
title: l10n.editVideoPlaylistTitle,
|
|
|
|
SettingsView: media.view.Settings.Playlist,
|
|
|
|
library: options.selection,
|
|
|
|
editing: options.editing,
|
|
|
|
menu: 'video-playlist',
|
|
|
|
dragInfoText: l10n.videoPlaylistDragInfo,
|
|
|
|
dragInfo: false
|
2014-02-24 13:08:16 -05:00
|
|
|
}),
|
|
|
|
|
2014-02-27 18:04:13 -05:00
|
|
|
new media.controller.CollectionAdd({
|
2014-03-02 18:11:14 -05:00
|
|
|
type: 'video',
|
|
|
|
collectionType: 'video-playlist',
|
|
|
|
title: l10n.addToVideoPlaylistTitle
|
2014-02-27 18:04:13 -05:00
|
|
|
})
|
2012-10-28 19:29:17 -04:00
|
|
|
]);
|
2012-12-02 21:38:10 -05:00
|
|
|
|
|
|
|
|
2012-12-03 02:17:10 -05:00
|
|
|
if ( media.view.settings.post.featuredImageId ) {
|
2012-12-05 04:43:10 -05:00
|
|
|
this.states.add( new media.controller.FeaturedImage() );
|
2012-12-02 21:38:10 -05:00
|
|
|
}
|
2012-10-28 19:29:17 -04:00
|
|
|
},
|
|
|
|
|
2012-11-09 04:47:12 -05:00
|
|
|
bindHandlers: function() {
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* call 'bindHandlers' directly on the parent class
|
|
|
|
*/
|
2012-11-09 04:47:12 -05:00
|
|
|
media.view.MediaFrame.Select.prototype.bindHandlers.apply( this, arguments );
|
2012-12-03 20:26:03 -05:00
|
|
|
this.on( 'menu:create:gallery', this.createMenu, this );
|
2014-02-24 13:08:16 -05:00
|
|
|
this.on( 'menu:create:playlist', this.createMenu, this );
|
|
|
|
this.on( 'menu:create:video-playlist', this.createMenu, this );
|
2012-12-04 11:21:57 -05:00
|
|
|
this.on( 'toolbar:create:main-insert', this.createToolbar, this );
|
2014-02-25 12:32:14 -05:00
|
|
|
this.on( 'toolbar:create:main-gallery', this.createToolbar, this );
|
|
|
|
this.on( 'toolbar:create:main-playlist', this.createToolbar, this );
|
|
|
|
this.on( 'toolbar:create:main-video-playlist', this.createToolbar, this );
|
2012-12-04 11:21:57 -05:00
|
|
|
this.on( 'toolbar:create:featured-image', this.featuredImageToolbar, this );
|
|
|
|
this.on( 'toolbar:create:main-embed', this.mainEmbedToolbar, this );
|
2012-11-09 04:47:12 -05:00
|
|
|
|
|
|
|
var handlers = {
|
2014-01-20 18:42:11 -05:00
|
|
|
menu: {
|
|
|
|
'default': 'mainMenu',
|
2014-02-24 13:08:16 -05:00
|
|
|
'gallery': 'galleryMenu',
|
|
|
|
'playlist': 'playlistMenu',
|
|
|
|
'video-playlist': 'videoPlaylistMenu'
|
2014-01-20 18:42:11 -05:00
|
|
|
},
|
2012-11-09 04:47:12 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
content: {
|
|
|
|
'embed': 'embedContent',
|
2014-03-06 17:55:14 -05:00
|
|
|
'edit-image': 'editImageContent',
|
2014-01-20 18:42:11 -05:00
|
|
|
'edit-selection': 'editSelectionContent'
|
|
|
|
},
|
2012-11-09 04:47:12 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
toolbar: {
|
|
|
|
'main-insert': 'mainInsertToolbar',
|
|
|
|
'main-gallery': 'mainGalleryToolbar',
|
|
|
|
'gallery-edit': 'galleryEditToolbar',
|
2014-02-24 13:08:16 -05:00
|
|
|
'gallery-add': 'galleryAddToolbar',
|
|
|
|
'main-playlist': 'mainPlaylistToolbar',
|
|
|
|
'playlist-edit': 'playlistEditToolbar',
|
|
|
|
'playlist-add': 'playlistAddToolbar',
|
|
|
|
'main-video-playlist': 'mainVideoPlaylistToolbar',
|
|
|
|
'video-playlist-edit': 'videoPlaylistEditToolbar',
|
|
|
|
'video-playlist-add': 'videoPlaylistAddToolbar'
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
|
|
|
};
|
2012-11-09 04:47:12 -05:00
|
|
|
|
|
|
|
_.each( handlers, function( regionHandlers, region ) {
|
|
|
|
_.each( regionHandlers, function( callback, handler ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
this.on( region + ':render:' + handler, this[ callback ], this );
|
2012-11-09 04:47:12 -05:00
|
|
|
}, this );
|
|
|
|
}, this );
|
|
|
|
},
|
|
|
|
|
|
|
|
// Menus
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {wp.Backbone.View} view
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
mainMenu: function( view ) {
|
|
|
|
view.set({
|
2012-12-02 21:38:10 -05:00
|
|
|
'library-separator': new media.View({
|
2012-11-09 04:47:12 -05:00
|
|
|
className: 'separator',
|
2012-12-02 21:38:10 -05:00
|
|
|
priority: 100
|
2012-12-03 20:26:03 -05:00
|
|
|
})
|
|
|
|
});
|
2012-11-07 15:14:41 -05:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {wp.Backbone.View} view
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
galleryMenu: function( view ) {
|
2012-11-30 10:19:11 -05:00
|
|
|
var lastState = this.lastState(),
|
|
|
|
previous = lastState && lastState.id,
|
2012-11-07 15:14:41 -05:00
|
|
|
frame = this;
|
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
view.set({
|
|
|
|
cancel: {
|
|
|
|
text: l10n.cancelGalleryTitle,
|
|
|
|
priority: 20,
|
|
|
|
click: function() {
|
2014-02-06 00:32:12 -05:00
|
|
|
if ( previous ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
frame.setState( previous );
|
2014-02-06 00:32:12 -05:00
|
|
|
} else {
|
2012-12-03 20:26:03 -05:00
|
|
|
frame.close();
|
2014-02-06 00:32:12 -05:00
|
|
|
}
|
2012-10-28 19:29:17 -04:00
|
|
|
}
|
2012-12-03 20:26:03 -05:00
|
|
|
},
|
|
|
|
separateCancel: new media.View({
|
|
|
|
className: 'separator',
|
|
|
|
priority: 40
|
|
|
|
})
|
|
|
|
});
|
2012-11-07 15:14:41 -05:00
|
|
|
},
|
2012-10-28 19:29:17 -04:00
|
|
|
|
2014-02-24 13:08:16 -05:00
|
|
|
playlistMenu: function( view ) {
|
|
|
|
var lastState = this.lastState(),
|
|
|
|
previous = lastState && lastState.id,
|
|
|
|
frame = this;
|
|
|
|
|
|
|
|
view.set({
|
|
|
|
cancel: {
|
|
|
|
text: l10n.cancelPlaylistTitle,
|
|
|
|
priority: 20,
|
|
|
|
click: function() {
|
2014-03-02 18:07:15 -05:00
|
|
|
if ( previous ) {
|
2014-02-24 13:08:16 -05:00
|
|
|
frame.setState( previous );
|
2014-03-02 18:07:15 -05:00
|
|
|
} else {
|
2014-02-24 13:08:16 -05:00
|
|
|
frame.close();
|
2014-03-02 18:07:15 -05:00
|
|
|
}
|
2014-02-24 13:08:16 -05:00
|
|
|
}
|
|
|
|
},
|
|
|
|
separateCancel: new media.View({
|
|
|
|
className: 'separator',
|
2014-03-02 18:13:14 -05:00
|
|
|
priority: 40
|
2014-02-24 13:08:16 -05:00
|
|
|
})
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
videoPlaylistMenu: function( view ) {
|
|
|
|
var lastState = this.lastState(),
|
|
|
|
previous = lastState && lastState.id,
|
|
|
|
frame = this;
|
|
|
|
|
|
|
|
view.set({
|
|
|
|
cancel: {
|
|
|
|
text: l10n.cancelVideoPlaylistTitle,
|
|
|
|
priority: 20,
|
|
|
|
click: function() {
|
2014-03-02 18:07:15 -05:00
|
|
|
if ( previous ) {
|
2014-02-24 13:08:16 -05:00
|
|
|
frame.setState( previous );
|
2014-03-02 18:07:15 -05:00
|
|
|
} else {
|
2014-02-24 13:08:16 -05:00
|
|
|
frame.close();
|
2014-03-02 18:07:15 -05:00
|
|
|
}
|
2014-02-24 13:08:16 -05:00
|
|
|
}
|
|
|
|
},
|
|
|
|
separateCancel: new media.View({
|
|
|
|
className: 'separator',
|
2014-03-02 18:13:14 -05:00
|
|
|
priority: 40
|
2014-02-24 13:08:16 -05:00
|
|
|
})
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2012-11-07 15:14:41 -05:00
|
|
|
// Content
|
2012-11-12 00:57:12 -05:00
|
|
|
embedContent: function() {
|
|
|
|
var view = new media.view.Embed({
|
|
|
|
controller: this,
|
|
|
|
model: this.state()
|
|
|
|
}).render();
|
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
this.content.set( view );
|
2012-11-12 00:57:12 -05:00
|
|
|
view.url.focus();
|
|
|
|
},
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
|
2012-11-14 21:36:06 -05:00
|
|
|
editSelectionContent: function() {
|
|
|
|
var state = this.state(),
|
|
|
|
selection = state.get('selection'),
|
|
|
|
view;
|
|
|
|
|
|
|
|
view = new media.view.AttachmentsBrowser({
|
|
|
|
controller: this,
|
|
|
|
collection: selection,
|
|
|
|
selection: selection,
|
|
|
|
model: state,
|
|
|
|
sortable: true,
|
|
|
|
search: false,
|
2012-12-03 20:26:03 -05:00
|
|
|
dragInfo: true,
|
2012-11-14 21:36:06 -05:00
|
|
|
|
|
|
|
AttachmentView: media.view.Attachment.EditSelection
|
|
|
|
}).render();
|
|
|
|
|
|
|
|
view.toolbar.set( 'backToLibrary', {
|
|
|
|
text: l10n.returnToLibrary,
|
|
|
|
priority: -100,
|
|
|
|
|
|
|
|
click: function() {
|
|
|
|
this.controller.content.mode('browse');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// Browse our library of attachments.
|
2012-12-03 20:26:03 -05:00
|
|
|
this.content.set( view );
|
|
|
|
},
|
|
|
|
|
2014-03-06 17:55:14 -05:00
|
|
|
editImageContent: function() {
|
|
|
|
var selection = this.state().get('selection'),
|
|
|
|
view = new media.view.EditImage( { model: selection.single(), controller: this } ).render();
|
|
|
|
|
|
|
|
this.content.set( view );
|
|
|
|
|
|
|
|
// after creating the wrapper view, load the actual editor via an ajax call
|
|
|
|
view.loadEditor();
|
|
|
|
|
|
|
|
},
|
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
// Toolbars
|
2014-01-20 18:42:11 -05:00
|
|
|
|
|
|
|
/**
|
|
|
|
* @param {wp.Backbone.View} view
|
|
|
|
*/
|
2012-12-04 11:21:57 -05:00
|
|
|
selectionStatusToolbar: function( view ) {
|
|
|
|
var editable = this.state().get('editable');
|
|
|
|
|
|
|
|
view.set( 'selection', new media.view.Selection({
|
2012-12-03 20:26:03 -05:00
|
|
|
controller: this,
|
2012-12-04 11:21:57 -05:00
|
|
|
collection: this.state().get('selection'),
|
|
|
|
priority: -40,
|
|
|
|
|
|
|
|
// If the selection is editable, pass the callback to
|
|
|
|
// switch the content mode.
|
|
|
|
editable: editable && function() {
|
|
|
|
this.controller.content.mode('edit-selection');
|
|
|
|
}
|
|
|
|
}).render() );
|
2012-11-14 21:36:06 -05:00
|
|
|
},
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {wp.Backbone.View} view
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
mainInsertToolbar: function( view ) {
|
|
|
|
var controller = this;
|
2012-11-09 07:37:21 -05:00
|
|
|
|
2012-12-04 11:21:57 -05:00
|
|
|
this.selectionStatusToolbar( view );
|
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
view.set( 'insert', {
|
|
|
|
style: 'primary',
|
|
|
|
priority: 80,
|
|
|
|
text: l10n.insertIntoPost,
|
2012-12-04 11:21:57 -05:00
|
|
|
requires: { selection: true },
|
2012-11-12 00:57:12 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @fires wp.media.controller.State#insert
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
click: function() {
|
|
|
|
var state = controller.state(),
|
|
|
|
selection = state.get('selection');
|
2012-11-09 07:37:21 -05:00
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
controller.close();
|
|
|
|
state.trigger( 'insert', selection ).reset();
|
|
|
|
}
|
|
|
|
});
|
2012-11-08 09:15:09 -05:00
|
|
|
},
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {wp.Backbone.View} view
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
mainGalleryToolbar: function( view ) {
|
|
|
|
var controller = this;
|
|
|
|
|
2012-12-04 11:21:57 -05:00
|
|
|
this.selectionStatusToolbar( view );
|
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
view.set( 'gallery', {
|
|
|
|
style: 'primary',
|
|
|
|
text: l10n.createNewGallery,
|
|
|
|
priority: 60,
|
2012-12-04 11:21:57 -05:00
|
|
|
requires: { selection: true },
|
2012-12-03 20:26:03 -05:00
|
|
|
|
|
|
|
click: function() {
|
|
|
|
var selection = controller.state().get('selection'),
|
|
|
|
edit = controller.state('gallery-edit'),
|
|
|
|
models = selection.where({ type: 'image' });
|
|
|
|
|
|
|
|
edit.set( 'library', new media.model.Selection( models, {
|
|
|
|
props: selection.props.toJSON(),
|
|
|
|
multiple: true
|
|
|
|
}) );
|
|
|
|
|
|
|
|
this.controller.setState('gallery-edit');
|
|
|
|
}
|
|
|
|
});
|
2012-11-07 15:14:41 -05:00
|
|
|
},
|
|
|
|
|
2014-02-24 13:08:16 -05:00
|
|
|
mainPlaylistToolbar: function( view ) {
|
|
|
|
var controller = this;
|
|
|
|
|
|
|
|
this.selectionStatusToolbar( view );
|
|
|
|
|
|
|
|
view.set( 'playlist', {
|
|
|
|
style: 'primary',
|
|
|
|
text: l10n.createNewPlaylist,
|
|
|
|
priority: 100,
|
|
|
|
requires: { selection: true },
|
|
|
|
|
|
|
|
click: function() {
|
|
|
|
var selection = controller.state().get('selection'),
|
|
|
|
edit = controller.state('playlist-edit'),
|
|
|
|
models = selection.where({ type: 'audio' });
|
|
|
|
|
|
|
|
edit.set( 'library', new media.model.Selection( models, {
|
|
|
|
props: selection.props.toJSON(),
|
|
|
|
multiple: true
|
|
|
|
}) );
|
|
|
|
|
|
|
|
this.controller.setState('playlist-edit');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
mainVideoPlaylistToolbar: function( view ) {
|
|
|
|
var controller = this;
|
|
|
|
|
|
|
|
this.selectionStatusToolbar( view );
|
|
|
|
|
|
|
|
view.set( 'video-playlist', {
|
|
|
|
style: 'primary',
|
|
|
|
text: l10n.createNewVideoPlaylist,
|
|
|
|
priority: 100,
|
|
|
|
requires: { selection: true },
|
|
|
|
|
|
|
|
click: function() {
|
|
|
|
var selection = controller.state().get('selection'),
|
|
|
|
edit = controller.state('video-playlist-edit'),
|
|
|
|
models = selection.where({ type: 'video' });
|
|
|
|
|
|
|
|
edit.set( 'library', new media.model.Selection( models, {
|
|
|
|
props: selection.props.toJSON(),
|
|
|
|
multiple: true
|
|
|
|
}) );
|
|
|
|
|
|
|
|
this.controller.setState('video-playlist-edit');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2012-12-04 11:21:57 -05:00
|
|
|
featuredImageToolbar: function( toolbar ) {
|
|
|
|
this.createSelectToolbar( toolbar, {
|
|
|
|
text: l10n.setFeaturedImage,
|
2013-03-03 02:36:21 -05:00
|
|
|
state: this.options.state
|
2012-12-04 11:21:57 -05:00
|
|
|
});
|
2012-12-02 21:38:10 -05:00
|
|
|
},
|
|
|
|
|
2012-12-04 11:21:57 -05:00
|
|
|
mainEmbedToolbar: function( toolbar ) {
|
|
|
|
toolbar.view = new media.view.Toolbar.Embed({
|
2012-11-12 00:57:12 -05:00
|
|
|
controller: this
|
2012-12-04 11:21:57 -05:00
|
|
|
});
|
2012-11-12 00:57:12 -05:00
|
|
|
},
|
2012-11-08 20:44:02 -05:00
|
|
|
|
2012-11-07 15:14:41 -05:00
|
|
|
galleryEditToolbar: function() {
|
|
|
|
var editing = this.state().get('editing');
|
2012-12-03 20:26:03 -05:00
|
|
|
this.toolbar.set( new media.view.Toolbar({
|
2012-11-07 15:14:41 -05:00
|
|
|
controller: this,
|
|
|
|
items: {
|
|
|
|
insert: {
|
|
|
|
style: 'primary',
|
|
|
|
text: editing ? l10n.updateGallery : l10n.insertGallery,
|
|
|
|
priority: 80,
|
2012-12-04 11:21:57 -05:00
|
|
|
requires: { library: true },
|
2012-11-07 15:14:41 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @fires wp.media.controller.State#update
|
|
|
|
*/
|
2012-11-07 15:14:41 -05:00
|
|
|
click: function() {
|
|
|
|
var controller = this.controller,
|
|
|
|
state = controller.state();
|
|
|
|
|
|
|
|
controller.close();
|
|
|
|
state.trigger( 'update', state.get('library') );
|
|
|
|
|
2013-03-03 02:36:21 -05:00
|
|
|
// Restore and reset the default state.
|
|
|
|
controller.setState( controller.options.state );
|
2012-11-07 15:14:41 -05:00
|
|
|
controller.reset();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}) );
|
|
|
|
},
|
|
|
|
|
|
|
|
galleryAddToolbar: function() {
|
2012-12-03 20:26:03 -05:00
|
|
|
this.toolbar.set( new media.view.Toolbar({
|
2012-11-07 15:14:41 -05:00
|
|
|
controller: this,
|
|
|
|
items: {
|
|
|
|
insert: {
|
|
|
|
style: 'primary',
|
|
|
|
text: l10n.addToGallery,
|
|
|
|
priority: 80,
|
2012-12-05 04:25:17 -05:00
|
|
|
requires: { selection: true },
|
2012-11-07 15:14:41 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @fires wp.media.controller.State#reset
|
|
|
|
*/
|
2012-11-07 15:14:41 -05:00
|
|
|
click: function() {
|
|
|
|
var controller = this.controller,
|
|
|
|
state = controller.state(),
|
2012-11-30 10:19:11 -05:00
|
|
|
edit = controller.state('gallery-edit');
|
2012-11-07 15:14:41 -05:00
|
|
|
|
|
|
|
edit.get('library').add( state.get('selection').models );
|
|
|
|
state.trigger('reset');
|
2012-12-03 20:26:03 -05:00
|
|
|
controller.setState('gallery-edit');
|
2012-11-07 15:14:41 -05:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}) );
|
2014-02-24 13:08:16 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
playlistEditToolbar: function() {
|
|
|
|
var editing = this.state().get('editing');
|
|
|
|
this.toolbar.set( new media.view.Toolbar({
|
|
|
|
controller: this,
|
|
|
|
items: {
|
|
|
|
insert: {
|
|
|
|
style: 'primary',
|
|
|
|
text: editing ? l10n.updatePlaylist : l10n.insertPlaylist,
|
|
|
|
priority: 80,
|
|
|
|
requires: { library: true },
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @fires wp.media.controller.State#update
|
|
|
|
*/
|
|
|
|
click: function() {
|
|
|
|
var controller = this.controller,
|
|
|
|
state = controller.state();
|
|
|
|
|
|
|
|
controller.close();
|
|
|
|
state.trigger( 'update', state.get('library') );
|
|
|
|
|
|
|
|
// Restore and reset the default state.
|
|
|
|
controller.setState( controller.options.state );
|
|
|
|
controller.reset();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}) );
|
|
|
|
},
|
|
|
|
|
|
|
|
playlistAddToolbar: function() {
|
|
|
|
this.toolbar.set( new media.view.Toolbar({
|
|
|
|
controller: this,
|
|
|
|
items: {
|
|
|
|
insert: {
|
|
|
|
style: 'primary',
|
|
|
|
text: l10n.addToPlaylist,
|
|
|
|
priority: 80,
|
|
|
|
requires: { selection: true },
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @fires wp.media.controller.State#reset
|
|
|
|
*/
|
|
|
|
click: function() {
|
|
|
|
var controller = this.controller,
|
|
|
|
state = controller.state(),
|
|
|
|
edit = controller.state('playlist-edit');
|
|
|
|
|
|
|
|
edit.get('library').add( state.get('selection').models );
|
|
|
|
state.trigger('reset');
|
|
|
|
controller.setState('playlist-edit');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}) );
|
|
|
|
},
|
|
|
|
|
|
|
|
videoPlaylistEditToolbar: function() {
|
|
|
|
var editing = this.state().get('editing');
|
|
|
|
this.toolbar.set( new media.view.Toolbar({
|
|
|
|
controller: this,
|
|
|
|
items: {
|
|
|
|
insert: {
|
|
|
|
style: 'primary',
|
|
|
|
text: editing ? l10n.updateVideoPlaylist : l10n.insertVideoPlaylist,
|
|
|
|
priority: 140,
|
|
|
|
requires: { library: true },
|
|
|
|
|
|
|
|
click: function() {
|
|
|
|
var controller = this.controller,
|
|
|
|
state = controller.state();
|
|
|
|
|
|
|
|
controller.close();
|
|
|
|
state.trigger( 'update', state.get('library') );
|
|
|
|
|
|
|
|
// Restore and reset the default state.
|
|
|
|
controller.setState( controller.options.state );
|
|
|
|
controller.reset();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}) );
|
|
|
|
},
|
2014-01-28 16:17:12 -05:00
|
|
|
|
2014-02-24 13:08:16 -05:00
|
|
|
videoPlaylistAddToolbar: function() {
|
|
|
|
this.toolbar.set( new media.view.Toolbar({
|
|
|
|
controller: this,
|
|
|
|
items: {
|
|
|
|
insert: {
|
|
|
|
style: 'primary',
|
|
|
|
text: l10n.addToVideoPlaylist,
|
|
|
|
priority: 140,
|
|
|
|
requires: { selection: true },
|
|
|
|
|
|
|
|
click: function() {
|
|
|
|
var controller = this.controller,
|
|
|
|
state = controller.state(),
|
|
|
|
edit = controller.state('video-playlist-edit');
|
|
|
|
|
|
|
|
edit.get('library').add( state.get('selection').models );
|
|
|
|
state.trigger('reset');
|
|
|
|
controller.setState('video-playlist-edit');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}) );
|
|
|
|
}
|
2014-01-28 16:17:12 -05:00
|
|
|
});
|
|
|
|
|
2014-03-05 13:37:15 -05:00
|
|
|
/**
|
|
|
|
* wp.media.view.MediaFrame.ImageDetails
|
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.view.MediaFrame.Select
|
|
|
|
* @augments wp.media.view.MediaFrame
|
|
|
|
* @augments wp.media.view.Frame
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
|
|
|
* @mixes wp.media.controller.StateMachine
|
|
|
|
*/
|
2014-01-28 16:17:12 -05:00
|
|
|
media.view.MediaFrame.ImageDetails = media.view.MediaFrame.Select.extend({
|
|
|
|
defaults: {
|
|
|
|
id: 'image',
|
|
|
|
url: '',
|
|
|
|
menu: 'image-details',
|
|
|
|
content: 'image-details',
|
|
|
|
toolbar: 'image-details',
|
|
|
|
type: 'link',
|
|
|
|
title: l10n.imageDetailsTitle,
|
|
|
|
priority: 120
|
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function( options ) {
|
|
|
|
this.image = new media.model.PostImage( options.metadata );
|
|
|
|
this.options.selection = new media.model.Selection( this.image.attachment, { multiple: false } );
|
|
|
|
media.view.MediaFrame.Select.prototype.initialize.apply( this, arguments );
|
|
|
|
},
|
|
|
|
|
|
|
|
bindHandlers: function() {
|
|
|
|
media.view.MediaFrame.Select.prototype.bindHandlers.apply( this, arguments );
|
|
|
|
this.on( 'menu:create:image-details', this.createMenu, this );
|
|
|
|
this.on( 'content:render:image-details', this.renderImageDetailsContent, this );
|
2014-03-06 17:55:14 -05:00
|
|
|
this.on( 'content:render:edit-image', this.editImageContent, this );
|
2014-01-28 16:17:12 -05:00
|
|
|
this.on( 'menu:render:image-details', this.renderMenu, this );
|
|
|
|
this.on( 'toolbar:render:image-details', this.renderImageDetailsToolbar, this );
|
|
|
|
// override the select toolbar
|
|
|
|
this.on( 'toolbar:render:replace', this.renderReplaceImageToolbar, this );
|
|
|
|
},
|
|
|
|
|
|
|
|
createStates: function() {
|
|
|
|
this.states.add([
|
|
|
|
new media.controller.ImageDetails({
|
|
|
|
image: this.image,
|
|
|
|
editable: false,
|
|
|
|
menu: 'image-details'
|
|
|
|
}),
|
|
|
|
new media.controller.ReplaceImage({
|
|
|
|
id: 'replace-image',
|
|
|
|
library: media.query( { type: 'image' } ),
|
|
|
|
image: this.image,
|
|
|
|
multiple: false,
|
|
|
|
title: l10n.imageReplaceTitle,
|
|
|
|
menu: 'image-details',
|
|
|
|
toolbar: 'replace',
|
|
|
|
priority: 80,
|
|
|
|
displaySettings: true
|
2014-03-06 17:55:14 -05:00
|
|
|
}),
|
|
|
|
new media.controller.EditImage( {
|
|
|
|
image: this.image,
|
|
|
|
selection: this.options.selection
|
|
|
|
} )
|
2014-01-28 16:17:12 -05:00
|
|
|
]);
|
|
|
|
},
|
|
|
|
|
|
|
|
renderImageDetailsContent: function() {
|
|
|
|
var view = new media.view.ImageDetails({
|
|
|
|
controller: this,
|
|
|
|
model: this.state().image,
|
|
|
|
attachment: this.state().image.attachment
|
|
|
|
}).render();
|
|
|
|
|
|
|
|
this.content.set( view );
|
|
|
|
|
|
|
|
},
|
|
|
|
|
2014-03-06 17:55:14 -05:00
|
|
|
editImageContent: function() {
|
|
|
|
var state = this.state(),
|
|
|
|
attachment = state.get('image').attachment,
|
|
|
|
model,
|
|
|
|
view;
|
|
|
|
|
|
|
|
if ( ! attachment ) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
model = state.get('selection').single();
|
|
|
|
|
|
|
|
if ( ! model ) {
|
|
|
|
model = attachment;
|
|
|
|
}
|
|
|
|
|
|
|
|
view = new media.view.EditImage( { model: model, controller: this } ).render();
|
|
|
|
|
|
|
|
this.content.set( view );
|
|
|
|
|
|
|
|
// after bringing in the frame, load the actual editor via an ajax call
|
|
|
|
view.loadEditor();
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
2014-01-28 16:17:12 -05:00
|
|
|
renderMenu: function( view ) {
|
|
|
|
var lastState = this.lastState(),
|
|
|
|
previous = lastState && lastState.id,
|
|
|
|
frame = this;
|
|
|
|
|
|
|
|
view.set({
|
|
|
|
cancel: {
|
|
|
|
text: l10n.imageDetailsCancel,
|
|
|
|
priority: 20,
|
|
|
|
click: function() {
|
|
|
|
if ( previous ) {
|
|
|
|
frame.setState( previous );
|
|
|
|
} else {
|
|
|
|
frame.close();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
separateCancel: new media.View({
|
|
|
|
className: 'separator',
|
|
|
|
priority: 40
|
|
|
|
})
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
renderImageDetailsToolbar: function() {
|
|
|
|
this.toolbar.set( new media.view.Toolbar({
|
|
|
|
controller: this,
|
|
|
|
items: {
|
|
|
|
select: {
|
|
|
|
style: 'primary',
|
|
|
|
text: l10n.update,
|
|
|
|
priority: 80,
|
|
|
|
|
|
|
|
click: function() {
|
|
|
|
var controller = this.controller,
|
|
|
|
state = controller.state();
|
|
|
|
|
|
|
|
controller.close();
|
|
|
|
|
|
|
|
// not sure if we want to use wp.media.string.image which will create a shortcode or
|
|
|
|
// perhaps wp.html.string to at least to build the <img />
|
|
|
|
state.trigger( 'update', controller.image.toJSON() );
|
|
|
|
|
|
|
|
// Restore and reset the default state.
|
|
|
|
controller.setState( controller.options.state );
|
|
|
|
controller.reset();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}) );
|
|
|
|
},
|
|
|
|
|
|
|
|
renderReplaceImageToolbar: function() {
|
|
|
|
this.toolbar.set( new media.view.Toolbar({
|
|
|
|
controller: this,
|
|
|
|
items: {
|
|
|
|
replace: {
|
|
|
|
style: 'primary',
|
|
|
|
text: l10n.replace,
|
|
|
|
priority: 80,
|
|
|
|
|
|
|
|
click: function() {
|
|
|
|
var controller = this.controller,
|
|
|
|
state = controller.state(),
|
|
|
|
selection = state.get( 'selection' ),
|
|
|
|
attachment = selection.single();
|
|
|
|
|
|
|
|
controller.close();
|
|
|
|
|
|
|
|
controller.image.changeAttachment( attachment, state.display( attachment ) );
|
|
|
|
|
|
|
|
// not sure if we want to use wp.media.string.image which will create a shortcode or
|
|
|
|
// perhaps wp.html.string to at least to build the <img />
|
|
|
|
state.trigger( 'replace', controller.image.toJSON() );
|
|
|
|
|
|
|
|
// Restore and reset the default state.
|
|
|
|
controller.setState( controller.options.state );
|
|
|
|
controller.reset();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}) );
|
|
|
|
}
|
|
|
|
|
2012-10-28 19:29:17 -04:00
|
|
|
});
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
|
2014-03-05 13:37:15 -05:00
|
|
|
/**
|
2014-03-09 01:05:14 -05:00
|
|
|
* wp.media.view.MediaFrame.MediaDetails
|
2014-03-05 13:37:15 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.view.MediaFrame.Select
|
|
|
|
* @augments wp.media.view.MediaFrame
|
|
|
|
* @augments wp.media.view.Frame
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
|
|
|
* @mixes wp.media.controller.StateMachine
|
|
|
|
*/
|
2014-03-09 01:05:14 -05:00
|
|
|
media.view.MediaFrame.MediaDetails = media.view.MediaFrame.Select.extend({
|
2014-03-05 10:06:14 -05:00
|
|
|
defaults: {
|
2014-03-09 01:05:14 -05:00
|
|
|
id: 'media',
|
2014-03-05 10:06:14 -05:00
|
|
|
url: '',
|
2014-03-09 01:05:14 -05:00
|
|
|
menu: 'media-details',
|
|
|
|
content: 'media-details',
|
|
|
|
toolbar: 'media-details',
|
2014-03-05 10:06:14 -05:00
|
|
|
type: 'link',
|
|
|
|
priority: 120
|
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function( options ) {
|
2014-03-09 01:05:14 -05:00
|
|
|
this.DetailsView = options.DetailsView;
|
|
|
|
this.cancelText = options.cancelText;
|
|
|
|
this.addText = options.addText;
|
|
|
|
|
2014-03-09 00:25:15 -05:00
|
|
|
this.media = new media.model.PostMedia( options.metadata );
|
|
|
|
this.options.selection = new media.model.Selection( this.media.attachment, { multiple: false } );
|
2014-03-05 10:06:14 -05:00
|
|
|
media.view.MediaFrame.Select.prototype.initialize.apply( this, arguments );
|
|
|
|
},
|
|
|
|
|
|
|
|
bindHandlers: function() {
|
2014-03-09 01:05:14 -05:00
|
|
|
var menu = this.defaults.menu;
|
2014-03-09 00:25:15 -05:00
|
|
|
|
2014-03-09 01:05:14 -05:00
|
|
|
media.view.MediaFrame.Select.prototype.bindHandlers.apply( this, arguments );
|
2014-03-09 00:25:15 -05:00
|
|
|
|
2014-03-09 01:05:14 -05:00
|
|
|
this.on( 'menu:create:' + menu, this.createMenu, this );
|
|
|
|
this.on( 'content:render:' + menu, this.renderDetailsContent, this );
|
|
|
|
this.on( 'menu:render:' + menu, this.renderMenu, this );
|
|
|
|
this.on( 'toolbar:render:' + menu, this.renderDetailsToolbar, this );
|
2014-03-05 10:06:14 -05:00
|
|
|
},
|
|
|
|
|
2014-03-09 01:05:14 -05:00
|
|
|
renderDetailsContent: function() {
|
|
|
|
var view = new this.DetailsView({
|
2014-03-05 10:06:14 -05:00
|
|
|
controller: this,
|
2014-03-09 00:25:15 -05:00
|
|
|
model: this.state().media,
|
|
|
|
attachment: this.state().media.attachment
|
2014-03-05 10:06:14 -05:00
|
|
|
}).render();
|
|
|
|
|
|
|
|
this.content.set( view );
|
|
|
|
},
|
|
|
|
|
|
|
|
renderMenu: function( view ) {
|
|
|
|
var lastState = this.lastState(),
|
|
|
|
previous = lastState && lastState.id,
|
|
|
|
frame = this;
|
|
|
|
|
|
|
|
view.set({
|
|
|
|
cancel: {
|
2014-03-09 01:05:14 -05:00
|
|
|
text: this.cancelText,
|
2014-03-05 10:06:14 -05:00
|
|
|
priority: 20,
|
|
|
|
click: function() {
|
|
|
|
if ( previous ) {
|
|
|
|
frame.setState( previous );
|
|
|
|
} else {
|
|
|
|
frame.close();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
separateCancel: new media.View({
|
|
|
|
className: 'separator',
|
|
|
|
priority: 40
|
|
|
|
})
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
|
2014-03-09 01:05:14 -05:00
|
|
|
renderDetailsToolbar: function() {
|
2014-03-05 10:06:14 -05:00
|
|
|
this.toolbar.set( new media.view.Toolbar({
|
|
|
|
controller: this,
|
|
|
|
items: {
|
|
|
|
select: {
|
|
|
|
style: 'primary',
|
|
|
|
text: l10n.update,
|
|
|
|
priority: 80,
|
|
|
|
|
|
|
|
click: function() {
|
|
|
|
var controller = this.controller,
|
|
|
|
state = controller.state();
|
|
|
|
|
|
|
|
controller.close();
|
|
|
|
|
2014-03-09 00:25:15 -05:00
|
|
|
state.trigger( 'update', controller.media.toJSON() );
|
2014-03-05 10:06:14 -05:00
|
|
|
|
|
|
|
// Restore and reset the default state.
|
|
|
|
controller.setState( controller.options.state );
|
|
|
|
controller.reset();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}) );
|
|
|
|
},
|
|
|
|
|
2014-03-09 01:05:14 -05:00
|
|
|
renderReplaceToolbar: function() {
|
2014-03-05 10:06:14 -05:00
|
|
|
this.toolbar.set( new media.view.Toolbar({
|
|
|
|
controller: this,
|
|
|
|
items: {
|
|
|
|
replace: {
|
|
|
|
style: 'primary',
|
|
|
|
text: l10n.replace,
|
|
|
|
priority: 80,
|
|
|
|
|
|
|
|
click: function() {
|
|
|
|
var controller = this.controller,
|
|
|
|
state = controller.state(),
|
|
|
|
selection = state.get( 'selection' ),
|
|
|
|
attachment = selection.single();
|
|
|
|
|
2014-03-09 01:24:15 -05:00
|
|
|
controller.media.changeAttachment( attachment );
|
2014-03-05 10:06:14 -05:00
|
|
|
|
2014-03-09 00:25:15 -05:00
|
|
|
state.trigger( 'replace', controller.media.toJSON() );
|
|
|
|
|
|
|
|
// Restore and reset the default state.
|
|
|
|
controller.setState( controller.options.state );
|
|
|
|
controller.reset();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}) );
|
|
|
|
},
|
|
|
|
|
2014-03-09 01:05:14 -05:00
|
|
|
renderAddSourceToolbar: function() {
|
2014-03-09 00:25:15 -05:00
|
|
|
this.toolbar.set( new media.view.Toolbar({
|
|
|
|
controller: this,
|
|
|
|
items: {
|
|
|
|
replace: {
|
|
|
|
style: 'primary',
|
2014-03-09 01:05:14 -05:00
|
|
|
text: this.addText,
|
2014-03-09 00:25:15 -05:00
|
|
|
priority: 80,
|
|
|
|
|
|
|
|
click: function() {
|
|
|
|
var controller = this.controller,
|
|
|
|
state = controller.state(),
|
|
|
|
selection = state.get( 'selection' ),
|
|
|
|
attachment = selection.single();
|
|
|
|
|
2014-03-09 01:24:15 -05:00
|
|
|
controller.media.setSource( attachment );
|
2014-03-09 00:25:15 -05:00
|
|
|
|
|
|
|
state.trigger( 'add-source', controller.media.toJSON() );
|
2014-03-05 10:06:14 -05:00
|
|
|
|
|
|
|
// Restore and reset the default state.
|
|
|
|
controller.setState( controller.options.state );
|
|
|
|
controller.reset();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}) );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2014-03-09 01:05:14 -05:00
|
|
|
/**
|
|
|
|
* wp.media.view.MediaFrame.AudioDetails
|
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.view.MediaFrame.MediaDetails
|
|
|
|
* @augments wp.media.view.MediaFrame.Select
|
|
|
|
* @augments wp.media.view.MediaFrame
|
|
|
|
* @augments wp.media.view.Frame
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
|
|
|
* @mixes wp.media.controller.StateMachine
|
|
|
|
*/
|
|
|
|
media.view.MediaFrame.AudioDetails = media.view.MediaFrame.MediaDetails.extend({
|
|
|
|
defaults: {
|
|
|
|
id: 'audio',
|
|
|
|
url: '',
|
|
|
|
menu: 'audio-details',
|
|
|
|
content: 'audio-details',
|
|
|
|
toolbar: 'audio-details',
|
|
|
|
type: 'link',
|
|
|
|
title: l10n.audioDetailsTitle,
|
|
|
|
priority: 120
|
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function( options ) {
|
|
|
|
options.DetailsView = media.view.AudioDetails;
|
|
|
|
options.cancelText = l10n.audioDetailsCancel;
|
|
|
|
options.addText = l10n.audioAddSourceTitle;
|
|
|
|
|
|
|
|
media.view.MediaFrame.MediaDetails.prototype.initialize.call( this, options );
|
|
|
|
},
|
|
|
|
|
|
|
|
bindHandlers: function() {
|
|
|
|
media.view.MediaFrame.MediaDetails.prototype.bindHandlers.apply( this, arguments );
|
|
|
|
|
|
|
|
this.on( 'toolbar:render:replace-audio', this.renderReplaceToolbar, this );
|
|
|
|
this.on( 'toolbar:render:add-audio-source', this.renderAddSourceToolbar, this );
|
|
|
|
},
|
|
|
|
|
|
|
|
createStates: function() {
|
|
|
|
this.states.add([
|
|
|
|
new media.controller.AudioDetails( {
|
|
|
|
media: this.media,
|
|
|
|
editable: false,
|
|
|
|
menu: 'audio-details'
|
|
|
|
} ),
|
|
|
|
|
|
|
|
new media.controller.MediaLibrary( {
|
|
|
|
type: 'audio',
|
|
|
|
id: 'replace-audio',
|
|
|
|
title: l10n.audioReplaceTitle,
|
|
|
|
toolbar: 'replace-audio',
|
|
|
|
media: this.media,
|
|
|
|
menu: 'audio-details'
|
|
|
|
} ),
|
|
|
|
|
|
|
|
new media.controller.MediaLibrary( {
|
|
|
|
type: 'audio',
|
|
|
|
id: 'add-audio-source',
|
|
|
|
title: l10n.audioAddSourceTitle,
|
|
|
|
toolbar: 'add-audio-source',
|
|
|
|
media: this.media,
|
|
|
|
menu: 'audio-details'
|
|
|
|
} )
|
|
|
|
]);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2014-03-05 13:37:15 -05:00
|
|
|
/**
|
|
|
|
* wp.media.view.MediaFrame.VideoDetails
|
|
|
|
*
|
|
|
|
* @constructor
|
2014-03-09 01:05:14 -05:00
|
|
|
* @augments wp.media.view.MediaFrame.MediaDetails
|
2014-03-05 13:37:15 -05:00
|
|
|
* @augments wp.media.view.MediaFrame.Select
|
|
|
|
* @augments wp.media.view.MediaFrame
|
|
|
|
* @augments wp.media.view.Frame
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
|
|
|
* @mixes wp.media.controller.StateMachine
|
|
|
|
*/
|
2014-03-09 01:05:14 -05:00
|
|
|
media.view.MediaFrame.VideoDetails = media.view.MediaFrame.MediaDetails.extend({
|
2014-03-05 10:06:14 -05:00
|
|
|
defaults: {
|
|
|
|
id: 'video',
|
|
|
|
url: '',
|
|
|
|
menu: 'video-details',
|
|
|
|
content: 'video-details',
|
|
|
|
toolbar: 'video-details',
|
|
|
|
type: 'link',
|
|
|
|
title: l10n.videoDetailsTitle,
|
|
|
|
priority: 120
|
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function( options ) {
|
2014-03-09 01:05:14 -05:00
|
|
|
options.DetailsView = media.view.VideoDetails;
|
|
|
|
options.cancelText = l10n.videoDetailsCancel;
|
|
|
|
options.addText = l10n.videoAddSourceTitle;
|
|
|
|
|
|
|
|
media.view.MediaFrame.MediaDetails.prototype.initialize.call( this, options );
|
2014-03-05 10:06:14 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
bindHandlers: function() {
|
2014-03-09 01:05:14 -05:00
|
|
|
media.view.MediaFrame.MediaDetails.prototype.bindHandlers.apply( this, arguments );
|
|
|
|
|
|
|
|
this.on( 'toolbar:render:replace-video', this.renderReplaceToolbar, this );
|
|
|
|
this.on( 'toolbar:render:add-video-source', this.renderAddSourceToolbar, this );
|
2014-03-09 00:25:15 -05:00
|
|
|
this.on( 'toolbar:render:select-poster-image', this.renderSelectPosterImageToolbar, this );
|
2014-03-09 06:32:15 -04:00
|
|
|
this.on( 'toolbar:render:add-track', this.renderAddTrackToolbar, this );
|
2014-03-05 10:06:14 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
createStates: function() {
|
|
|
|
this.states.add([
|
|
|
|
new media.controller.VideoDetails({
|
2014-03-09 00:25:15 -05:00
|
|
|
media: this.media,
|
2014-03-05 10:06:14 -05:00
|
|
|
editable: false,
|
|
|
|
menu: 'video-details'
|
|
|
|
}),
|
2014-03-09 00:25:15 -05:00
|
|
|
|
|
|
|
new media.controller.MediaLibrary( {
|
|
|
|
type: 'video',
|
2014-03-05 10:06:14 -05:00
|
|
|
id: 'replace-video',
|
2014-03-09 00:25:15 -05:00
|
|
|
title: l10n.videoReplaceTitle,
|
|
|
|
toolbar: 'replace-video',
|
|
|
|
media: this.media,
|
|
|
|
menu: 'video-details'
|
|
|
|
} ),
|
|
|
|
|
|
|
|
new media.controller.MediaLibrary( {
|
|
|
|
type: 'video',
|
|
|
|
id: 'add-video-source',
|
|
|
|
title: l10n.videoAddSourceTitle,
|
|
|
|
toolbar: 'add-video-source',
|
|
|
|
media: this.media,
|
|
|
|
menu: 'video-details'
|
|
|
|
} ),
|
|
|
|
|
|
|
|
new media.controller.MediaLibrary( {
|
|
|
|
type: 'image',
|
|
|
|
id: 'select-poster-image',
|
|
|
|
title: l10n.videoSelectPosterImageTitle,
|
|
|
|
toolbar: 'select-poster-image',
|
|
|
|
media: this.media,
|
|
|
|
menu: 'video-details'
|
2014-03-09 06:32:15 -04:00
|
|
|
} ),
|
|
|
|
|
|
|
|
new media.controller.MediaLibrary( {
|
|
|
|
type: 'text',
|
|
|
|
id: 'add-track',
|
|
|
|
title: l10n.videoAddTrackTitle,
|
|
|
|
toolbar: 'add-track',
|
|
|
|
media: this.media,
|
|
|
|
menu: 'video-details'
|
2014-03-09 00:25:15 -05:00
|
|
|
} )
|
2014-03-05 10:06:14 -05:00
|
|
|
]);
|
|
|
|
},
|
|
|
|
|
2014-03-09 00:25:15 -05:00
|
|
|
renderSelectPosterImageToolbar: function() {
|
|
|
|
this.toolbar.set( new media.view.Toolbar({
|
|
|
|
controller: this,
|
|
|
|
items: {
|
|
|
|
replace: {
|
|
|
|
style: 'primary',
|
|
|
|
text: l10n.videoSelectPosterImageTitle,
|
|
|
|
priority: 80,
|
|
|
|
|
|
|
|
click: function() {
|
|
|
|
var controller = this.controller,
|
|
|
|
state = controller.state(),
|
|
|
|
selection = state.get( 'selection' ),
|
|
|
|
attachment = selection.single();
|
|
|
|
|
|
|
|
controller.media.set( 'poster', attachment.get( 'url' ) );
|
|
|
|
|
|
|
|
state.trigger( 'set-poster-image', controller.media.toJSON() );
|
2014-03-05 10:06:14 -05:00
|
|
|
|
2014-03-09 06:32:15 -04:00
|
|
|
// Restore and reset the default state.
|
|
|
|
controller.setState( controller.options.state );
|
|
|
|
controller.reset();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}) );
|
|
|
|
},
|
|
|
|
|
|
|
|
renderAddTrackToolbar: function() {
|
|
|
|
this.toolbar.set( new media.view.Toolbar({
|
|
|
|
controller: this,
|
|
|
|
items: {
|
|
|
|
replace: {
|
|
|
|
style: 'primary',
|
|
|
|
text: l10n.videoAddTrackTitle,
|
|
|
|
priority: 80,
|
|
|
|
|
|
|
|
click: function() {
|
|
|
|
var controller = this.controller,
|
|
|
|
state = controller.state(),
|
|
|
|
selection = state.get( 'selection' ),
|
|
|
|
attachment = selection.single(),
|
|
|
|
content = controller.media.get( 'content' );
|
|
|
|
|
|
|
|
if ( -1 === content.indexOf( attachment.get( 'url' ) ) ) {
|
|
|
|
content += [
|
|
|
|
'<track srclang="en" label="English"kind="subtitles" src="',
|
|
|
|
attachment.get( 'url' ),
|
|
|
|
'" />'
|
|
|
|
].join('');
|
|
|
|
|
|
|
|
controller.media.set( 'content', content );
|
|
|
|
}
|
|
|
|
|
|
|
|
state.trigger( 'add-track', controller.media.toJSON() );
|
|
|
|
|
2014-03-05 10:06:14 -05:00
|
|
|
// Restore and reset the default state.
|
|
|
|
controller.setState( controller.options.state );
|
|
|
|
controller.reset();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}) );
|
|
|
|
}
|
|
|
|
});
|
2014-01-28 16:17:12 -05:00
|
|
|
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
/**
|
|
|
|
* wp.media.view.Modal
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
*/
|
2012-11-18 19:36:47 -05:00
|
|
|
media.view.Modal = media.View.extend({
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
tagName: 'div',
|
|
|
|
template: media.template('media-modal'),
|
|
|
|
|
2012-11-30 03:37:17 -05:00
|
|
|
attributes: {
|
|
|
|
tabindex: 0
|
|
|
|
},
|
|
|
|
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
events: {
|
2012-12-02 21:38:10 -05:00
|
|
|
'click .media-modal-backdrop, .media-modal-close': 'escapeHandler',
|
2012-11-30 03:37:17 -05:00
|
|
|
'keydown': 'keydown'
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function() {
|
|
|
|
_.defaults( this.options, {
|
2012-10-28 19:29:17 -04:00
|
|
|
container: document.body,
|
2012-11-29 20:55:37 -05:00
|
|
|
title: '',
|
2012-12-04 12:58:24 -05:00
|
|
|
propagate: true,
|
2012-12-05 22:15:39 -05:00
|
|
|
freeze: true
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
});
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {Object}
|
|
|
|
*/
|
2012-12-02 21:38:10 -05:00
|
|
|
prepare: function() {
|
|
|
|
return {
|
2012-10-28 19:29:17 -04:00
|
|
|
title: this.options.title
|
2012-12-02 21:38:10 -05:00
|
|
|
};
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
},
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {wp.media.view.Modal} Returns itself to allow chaining
|
|
|
|
*/
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
attach: function() {
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( this.views.attached ) {
|
2012-12-02 21:38:10 -05:00
|
|
|
return this;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-02 21:38:10 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! this.views.rendered ) {
|
2012-12-02 21:38:10 -05:00
|
|
|
this.render();
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-02 21:38:10 -05:00
|
|
|
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
this.$el.appendTo( this.options.container );
|
2012-12-02 21:38:10 -05:00
|
|
|
|
|
|
|
// Manually mark the view as attached and trigger ready.
|
|
|
|
this.views.attached = true;
|
|
|
|
this.views.ready();
|
|
|
|
|
2012-11-29 20:55:37 -05:00
|
|
|
return this.propagate('attach');
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
},
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {wp.media.view.Modal} Returns itself to allow chaining
|
|
|
|
*/
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
detach: function() {
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( this.$el.is(':visible') ) {
|
2012-12-02 21:38:10 -05:00
|
|
|
this.close();
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-02 21:38:10 -05:00
|
|
|
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
this.$el.detach();
|
2012-12-02 21:38:10 -05:00
|
|
|
this.views.attached = false;
|
2012-11-29 20:55:37 -05:00
|
|
|
return this.propagate('detach');
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
},
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {wp.media.view.Modal} Returns itself to allow chaining
|
|
|
|
*/
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
open: function() {
|
2012-12-04 12:58:24 -05:00
|
|
|
var $el = this.$el,
|
2012-12-05 22:15:39 -05:00
|
|
|
options = this.options;
|
2012-12-04 12:58:24 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( $el.is(':visible') ) {
|
2012-12-02 21:38:10 -05:00
|
|
|
return this;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-02 21:38:10 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! this.views.attached ) {
|
2012-12-02 21:38:10 -05:00
|
|
|
this.attach();
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-02 21:38:10 -05:00
|
|
|
|
2012-12-05 22:15:39 -05:00
|
|
|
// If the `freeze` option is set, record the window's scroll position.
|
2012-12-04 12:58:24 -05:00
|
|
|
if ( options.freeze ) {
|
|
|
|
this._freeze = {
|
|
|
|
scrollTop: $( window ).scrollTop()
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
$el.show().focus();
|
2012-11-29 20:55:37 -05:00
|
|
|
return this.propagate('open');
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
},
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Object} options
|
|
|
|
* @returns {wp.media.view.Modal} Returns itself to allow chaining
|
|
|
|
*/
|
2012-12-02 21:38:10 -05:00
|
|
|
close: function( options ) {
|
2012-12-04 12:58:24 -05:00
|
|
|
var freeze = this._freeze;
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! this.views.attached || ! this.$el.is(':visible') ) {
|
2012-12-02 21:38:10 -05:00
|
|
|
return this;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-02 21:38:10 -05:00
|
|
|
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
this.$el.hide();
|
2012-12-02 21:38:10 -05:00
|
|
|
this.propagate('close');
|
|
|
|
|
2012-12-05 22:15:39 -05:00
|
|
|
// If the `freeze` option is set, restore the container's scroll position.
|
2012-12-04 12:58:24 -05:00
|
|
|
if ( freeze ) {
|
|
|
|
$( window ).scrollTop( freeze.scrollTop );
|
|
|
|
}
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( options && options.escape ) {
|
2012-12-02 21:38:10 -05:00
|
|
|
this.propagate('escape');
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-02 21:38:10 -05:00
|
|
|
|
|
|
|
return this;
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {wp.media.view.Modal} Returns itself to allow chaining
|
|
|
|
*/
|
2012-12-02 21:38:10 -05:00
|
|
|
escape: function() {
|
|
|
|
return this.close({ escape: true });
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Object} event
|
|
|
|
*/
|
2012-12-02 21:38:10 -05:00
|
|
|
escapeHandler: function( event ) {
|
|
|
|
event.preventDefault();
|
|
|
|
this.escape();
|
|
|
|
},
|
2012-09-18 20:34:00 -04:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Array|Object} content Views to register to '.media-modal-content'
|
|
|
|
* @returns {wp.media.view.Modal} Returns itself to allow chaining
|
|
|
|
*/
|
2012-12-02 21:38:10 -05:00
|
|
|
content: function( content ) {
|
|
|
|
this.views.set( '.media-modal-content', content );
|
|
|
|
return this;
|
2012-11-29 20:55:37 -05:00
|
|
|
},
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* Triggers a modal event and if the `propagate` option is set,
|
|
|
|
* forwards events to the modal's controller.
|
|
|
|
*
|
|
|
|
* @param {string} id
|
|
|
|
* @returns {wp.media.view.Modal} Returns itself to allow chaining
|
|
|
|
*/
|
2012-11-29 20:55:37 -05:00
|
|
|
propagate: function( id ) {
|
|
|
|
this.trigger( id );
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( this.options.propagate ) {
|
2012-11-29 20:55:37 -05:00
|
|
|
this.controller.trigger( id );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-29 20:55:37 -05:00
|
|
|
|
|
|
|
return this;
|
2012-11-30 03:37:17 -05:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Object} event
|
|
|
|
*/
|
2012-11-30 03:37:17 -05:00
|
|
|
keydown: function( event ) {
|
|
|
|
// Close the modal when escape is pressed.
|
2014-02-03 00:31:14 -05:00
|
|
|
if ( 27 === event.which && this.$el.is(':visible') ) {
|
2012-12-02 21:38:10 -05:00
|
|
|
this.escape();
|
2014-02-03 00:31:14 -05:00
|
|
|
event.stopImmediatePropagation();
|
2012-11-30 03:37:17 -05:00
|
|
|
}
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* wp.media.view.FocusManager
|
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
|
|
|
*/
|
2012-12-05 04:57:58 -05:00
|
|
|
media.view.FocusManager = media.View.extend({
|
|
|
|
events: {
|
|
|
|
keydown: 'recordTab',
|
|
|
|
focusin: 'updateIndex'
|
|
|
|
},
|
|
|
|
|
|
|
|
focus: function() {
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( _.isUndefined( this.index ) ) {
|
2012-12-05 04:57:58 -05:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-05 04:57:58 -05:00
|
|
|
|
|
|
|
// Update our collection of `$tabbables`.
|
|
|
|
this.$tabbables = this.$(':tabbable');
|
|
|
|
|
|
|
|
// If tab is saved, focus it.
|
|
|
|
this.$tabbables.eq( this.index ).focus();
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Object} event
|
|
|
|
*/
|
2012-12-05 04:57:58 -05:00
|
|
|
recordTab: function( event ) {
|
|
|
|
// Look for the tab key.
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( 9 !== event.keyCode ) {
|
2012-12-05 04:57:58 -05:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-05 04:57:58 -05:00
|
|
|
|
|
|
|
// First try to update the index.
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( _.isUndefined( this.index ) ) {
|
2012-12-05 04:57:58 -05:00
|
|
|
this.updateIndex( event );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-05 04:57:58 -05:00
|
|
|
|
|
|
|
// If we still don't have an index, bail.
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( _.isUndefined( this.index ) ) {
|
2012-12-05 04:57:58 -05:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-05 04:57:58 -05:00
|
|
|
|
|
|
|
var index = this.index + ( event.shiftKey ? -1 : 1 );
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( index >= 0 && index < this.$tabbables.length ) {
|
2012-12-05 04:57:58 -05:00
|
|
|
this.index = index;
|
2014-01-20 18:42:11 -05:00
|
|
|
} else {
|
2012-12-05 04:57:58 -05:00
|
|
|
delete this.index;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-05 04:57:58 -05:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Object} event
|
|
|
|
*/
|
2012-12-05 04:57:58 -05:00
|
|
|
updateIndex: function( event ) {
|
|
|
|
this.$tabbables = this.$(':tabbable');
|
|
|
|
|
|
|
|
var index = this.$tabbables.index( event.target );
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( -1 === index ) {
|
2012-12-05 04:57:58 -05:00
|
|
|
delete this.index;
|
2014-01-20 18:42:11 -05:00
|
|
|
} else {
|
2012-12-05 04:57:58 -05:00
|
|
|
this.index = index;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-05 04:57:58 -05:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* wp.media.view.UploaderWindow
|
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
|
|
|
*/
|
2012-11-18 19:36:47 -05:00
|
|
|
media.view.UploaderWindow = media.View.extend({
|
2012-10-28 19:29:17 -04:00
|
|
|
tagName: 'div',
|
|
|
|
className: 'uploader-window',
|
|
|
|
template: media.template('uploader-window'),
|
|
|
|
|
|
|
|
initialize: function() {
|
|
|
|
var uploader;
|
|
|
|
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
this.$browser = $('<a href="#" class="browser" />').hide().appendTo('body');
|
2012-10-28 19:29:17 -04:00
|
|
|
|
|
|
|
uploader = this.options.uploader = _.defaults( this.options.uploader || {}, {
|
|
|
|
dropzone: this.$el,
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
browser: this.$browser,
|
2012-10-28 19:29:17 -04:00
|
|
|
params: {}
|
|
|
|
});
|
|
|
|
|
2012-11-21 15:27:49 -05:00
|
|
|
// Ensure the dropzone is a jQuery collection.
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( uploader.dropzone && ! (uploader.dropzone instanceof $) ) {
|
2012-11-21 15:27:49 -05:00
|
|
|
uploader.dropzone = $( uploader.dropzone );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-21 15:34:46 -05:00
|
|
|
|
|
|
|
this.controller.on( 'activate', this.refresh, this );
|
2014-02-25 16:03:15 -05:00
|
|
|
|
|
|
|
this.controller.on( 'detach', function() {
|
|
|
|
this.$browser.remove();
|
|
|
|
}, this );
|
2012-10-28 19:29:17 -04:00
|
|
|
},
|
|
|
|
|
2012-10-29 03:38:13 -04:00
|
|
|
refresh: function() {
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( this.uploader ) {
|
2012-10-29 03:38:13 -04:00
|
|
|
this.uploader.refresh();
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-10-29 03:38:13 -04:00
|
|
|
},
|
|
|
|
|
2012-11-21 15:27:49 -05:00
|
|
|
ready: function() {
|
2012-12-03 02:17:10 -05:00
|
|
|
var postId = media.view.settings.post.id,
|
2012-11-21 15:27:49 -05:00
|
|
|
dropzone;
|
2012-10-28 19:29:17 -04:00
|
|
|
|
2012-11-21 15:27:49 -05:00
|
|
|
// If the uploader already exists, bail.
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( this.uploader ) {
|
2012-10-28 19:29:17 -04:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-10-28 19:29:17 -04:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( postId ) {
|
2012-11-21 15:27:49 -05:00
|
|
|
this.options.uploader.params.post_id = postId;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-10-28 19:29:17 -04:00
|
|
|
this.uploader = new wp.Uploader( this.options.uploader );
|
|
|
|
|
|
|
|
dropzone = this.uploader.dropzone;
|
|
|
|
dropzone.on( 'dropzone:enter', _.bind( this.show, this ) );
|
|
|
|
dropzone.on( 'dropzone:leave', _.bind( this.hide, this ) );
|
2014-03-01 16:34:17 -05:00
|
|
|
|
|
|
|
$( this.uploader ).on( 'uploader:ready', _.bind( this._ready, this ) );
|
|
|
|
},
|
|
|
|
|
|
|
|
_ready: function() {
|
|
|
|
this.controller.trigger( 'uploader:ready' );
|
2012-10-28 19:29:17 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
show: function() {
|
|
|
|
var $el = this.$el.show();
|
|
|
|
|
|
|
|
// Ensure that the animation is triggered by waiting until
|
|
|
|
// the transparent element is painted into the DOM.
|
|
|
|
_.defer( function() {
|
|
|
|
$el.css({ opacity: 1 });
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
hide: function() {
|
|
|
|
var $el = this.$el.css({ opacity: 0 });
|
|
|
|
|
|
|
|
media.transition( $el ).done( function() {
|
|
|
|
// Transition end events are subject to race conditions.
|
|
|
|
// Make sure that the value is set as intended.
|
2014-02-06 00:32:12 -05:00
|
|
|
if ( '0' === $el.css('opacity') ) {
|
2012-10-28 19:29:17 -04:00
|
|
|
$el.hide();
|
2014-02-06 00:32:12 -05:00
|
|
|
}
|
2012-10-28 19:29:17 -04:00
|
|
|
});
|
2012-10-29 03:38:13 -04:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2014-03-01 16:34:17 -05:00
|
|
|
/**
|
|
|
|
* wp.media.view.EditorUploader
|
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
|
|
|
*/
|
|
|
|
media.view.EditorUploader = media.View.extend({
|
|
|
|
tagName: 'div',
|
|
|
|
className: 'uploader-editor',
|
|
|
|
template: media.template( 'uploader-editor' ),
|
|
|
|
|
|
|
|
initialize: function() {
|
2014-03-07 20:35:15 -05:00
|
|
|
this.initialized = false;
|
|
|
|
|
|
|
|
// Bail if UA does not support drag'n'drop or File API.
|
|
|
|
if ( ! this.browserSupport() ) {
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
|
2014-03-01 16:34:17 -05:00
|
|
|
this.$document = $(document);
|
2014-03-03 12:44:16 -05:00
|
|
|
this.dropzones = [];
|
|
|
|
this.files = [];
|
|
|
|
|
|
|
|
this.$document.on( 'drop', '.uploader-editor', _.bind( this.drop, this ) );
|
|
|
|
this.$document.on( 'dragover', '.uploader-editor', _.bind( this.dropzoneDragover, this ) );
|
|
|
|
this.$document.on( 'dragleave', '.uploader-editor', _.bind( this.dropzoneDragleave, this ) );
|
|
|
|
|
2014-03-01 16:34:17 -05:00
|
|
|
this.$document.on( 'dragover', _.bind( this.containerDragover, this ) );
|
|
|
|
this.$document.on( 'dragleave', _.bind( this.containerDragleave, this ) );
|
2014-03-03 12:44:16 -05:00
|
|
|
|
2014-03-07 20:35:15 -05:00
|
|
|
this.initialized = true;
|
2014-03-01 16:34:17 -05:00
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
2014-03-07 20:35:15 -05:00
|
|
|
browserSupport: function() {
|
|
|
|
var supports = false, div = document.createElement('div');
|
|
|
|
|
|
|
|
supports = ( 'draggable' in div ) || ( 'ondragstart' in div && 'ondrop' in div );
|
|
|
|
supports = supports && !! ( window.File && window.FileList && window.FileReader );
|
|
|
|
return supports;
|
|
|
|
},
|
|
|
|
|
|
|
|
refresh: function( e ) {
|
2014-03-03 12:44:16 -05:00
|
|
|
var dropzone_id;
|
|
|
|
for ( dropzone_id in this.dropzones ) {
|
|
|
|
// Hide the dropzones only if dragging has left the screen.
|
|
|
|
this.dropzones[ dropzone_id ].toggle( this.overContainer || this.overDropzone );
|
|
|
|
}
|
2014-03-07 20:35:15 -05:00
|
|
|
|
|
|
|
if ( ! _.isUndefined( e ) ) {
|
|
|
|
$( e.target ).closest( '.uploader-editor' ).toggleClass( 'droppable', this.overDropzone );
|
|
|
|
}
|
|
|
|
|
2014-03-03 12:44:16 -05:00
|
|
|
return this;
|
2014-03-01 16:34:17 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
2014-03-07 20:35:15 -05:00
|
|
|
if ( ! this.initialized ) {
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
|
2014-03-01 16:34:17 -05:00
|
|
|
media.View.prototype.render.apply( this, arguments );
|
2014-03-03 12:44:16 -05:00
|
|
|
$( '.wp-editor-wrap' ).each( _.bind( this.attach, this ) );
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
attach: function( index, editor ) {
|
|
|
|
// Attach a dropzone to an editor.
|
|
|
|
var dropzone = this.$el.clone();
|
|
|
|
this.dropzones.push( dropzone );
|
|
|
|
$( editor ).append( dropzone );
|
2014-03-01 16:34:17 -05:00
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
drop: function( event ) {
|
2014-03-03 12:44:16 -05:00
|
|
|
var $wrap = null;
|
|
|
|
|
2014-03-01 16:34:17 -05:00
|
|
|
this.files = event.originalEvent.dataTransfer.files;
|
|
|
|
if ( this.files.length < 1 )
|
|
|
|
return;
|
|
|
|
|
2014-03-03 12:44:16 -05:00
|
|
|
this.containerDragleave( event );
|
|
|
|
this.dropzoneDragleave( event );
|
|
|
|
|
|
|
|
// Set the active editor to the drop target.
|
|
|
|
$wrap = $( event.target ).parents( '.wp-editor-wrap' );
|
|
|
|
if ( $wrap.length > 0 ) {
|
|
|
|
window.wpActiveEditor = $wrap[0].id.slice( 3, -5 );
|
|
|
|
}
|
2014-03-01 16:34:17 -05:00
|
|
|
|
|
|
|
if ( ! this.workflow ) {
|
|
|
|
this.workflow = wp.media.editor.open( 'content', {
|
|
|
|
frame: 'post',
|
|
|
|
state: 'insert',
|
|
|
|
title: wp.media.view.l10n.addMedia,
|
|
|
|
multiple: true
|
|
|
|
});
|
|
|
|
this.workflow.on( 'uploader:ready', this.addFiles, this );
|
|
|
|
} else {
|
|
|
|
this.workflow.state().reset();
|
|
|
|
this.addFiles.apply( this );
|
|
|
|
this.workflow.open();
|
|
|
|
}
|
|
|
|
|
|
|
|
return false;
|
|
|
|
},
|
|
|
|
|
|
|
|
addFiles: function() {
|
|
|
|
if ( this.files.length ) {
|
|
|
|
this.workflow.uploader.uploader.uploader.addFile( _.toArray( this.files ) );
|
|
|
|
this.files = [];
|
|
|
|
}
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
containerDragover: function() {
|
|
|
|
this.overContainer = true;
|
|
|
|
this.refresh();
|
|
|
|
},
|
|
|
|
|
|
|
|
containerDragleave: function() {
|
|
|
|
this.overContainer = false;
|
|
|
|
|
|
|
|
// Throttle dragleave because it's called when bouncing from some elements to others.
|
|
|
|
_.delay( _.bind( this.refresh, this ), 50 );
|
|
|
|
},
|
|
|
|
|
2014-03-03 12:44:16 -05:00
|
|
|
dropzoneDragover: function( e ) {
|
2014-03-01 16:34:17 -05:00
|
|
|
this.overDropzone = true;
|
2014-03-07 20:35:15 -05:00
|
|
|
this.refresh( e );
|
2014-03-01 16:34:17 -05:00
|
|
|
return false;
|
|
|
|
},
|
|
|
|
|
2014-03-03 12:44:16 -05:00
|
|
|
dropzoneDragleave: function( e ) {
|
2014-03-01 16:34:17 -05:00
|
|
|
this.overDropzone = false;
|
2014-03-07 20:35:15 -05:00
|
|
|
_.delay( _.bind( this.refresh, this, e ), 50 );
|
2014-03-01 16:34:17 -05:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* wp.media.view.UploaderInline
|
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
|
|
|
*/
|
2012-11-18 19:36:47 -05:00
|
|
|
media.view.UploaderInline = media.View.extend({
|
2012-10-29 03:38:13 -04:00
|
|
|
tagName: 'div',
|
|
|
|
className: 'uploader-inline',
|
|
|
|
template: media.template('uploader-inline'),
|
|
|
|
|
|
|
|
initialize: function() {
|
2012-12-03 20:26:03 -05:00
|
|
|
_.defaults( this.options, {
|
|
|
|
message: '',
|
|
|
|
status: true
|
|
|
|
});
|
2012-10-29 03:38:13 -04:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! this.options.$browser && this.controller.uploader ) {
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
this.options.$browser = this.controller.uploader.$browser;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-22 07:35:05 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( _.isUndefined( this.options.postId ) ) {
|
2012-12-03 02:17:10 -05:00
|
|
|
this.options.postId = media.view.settings.post.id;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-27 21:28:10 -05:00
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
if ( this.options.status ) {
|
|
|
|
this.views.set( '.upload-inline-status', new media.view.UploaderStatus({
|
|
|
|
controller: this.controller
|
|
|
|
}) );
|
|
|
|
}
|
2012-10-29 03:38:13 -04:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {wp.media.view.UploaderInline} Returns itself to allow chaining
|
|
|
|
*/
|
2012-12-04 19:45:21 -05:00
|
|
|
dispose: function() {
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( this.disposing ) {
|
|
|
|
/**
|
|
|
|
* call 'dispose' directly on the parent class
|
|
|
|
*/
|
2012-12-04 19:45:21 -05:00
|
|
|
return media.View.prototype.dispose.apply( this, arguments );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-04 19:45:21 -05:00
|
|
|
|
|
|
|
// Run remove on `dispose`, so we can be sure to refresh the
|
|
|
|
// uploader with a view-less DOM. Track whether we're disposing
|
|
|
|
// so we don't trigger an infinite loop.
|
|
|
|
this.disposing = true;
|
|
|
|
return this.remove();
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {wp.media.view.UploaderInline} Returns itself to allow chaining
|
|
|
|
*/
|
2012-12-04 19:45:21 -05:00
|
|
|
remove: function() {
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* call 'remove' directly on the parent class
|
|
|
|
*/
|
2012-12-04 19:45:21 -05:00
|
|
|
var result = media.View.prototype.remove.apply( this, arguments );
|
|
|
|
|
|
|
|
_.defer( _.bind( this.refresh, this ) );
|
|
|
|
return result;
|
|
|
|
},
|
|
|
|
|
|
|
|
refresh: function() {
|
|
|
|
var uploader = this.controller.uploader;
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( uploader ) {
|
2012-12-04 19:45:21 -05:00
|
|
|
uploader.refresh();
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-04 19:45:21 -05:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {wp.media.view.UploaderInline}
|
|
|
|
*/
|
2012-11-22 06:46:03 -05:00
|
|
|
ready: function() {
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
var $browser = this.options.$browser,
|
|
|
|
$placeholder;
|
|
|
|
|
2012-11-22 06:46:03 -05:00
|
|
|
if ( this.controller.uploader ) {
|
|
|
|
$placeholder = this.$('.browser');
|
2012-12-03 01:32:25 -05:00
|
|
|
|
|
|
|
// Check if we've already replaced the placeholder.
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( $placeholder[0] === $browser[0] ) {
|
2012-12-03 01:32:25 -05:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 01:32:25 -05:00
|
|
|
|
2012-11-22 06:46:03 -05:00
|
|
|
$browser.detach().text( $placeholder.text() );
|
|
|
|
$browser[0].className = $placeholder[0].className;
|
|
|
|
$placeholder.replaceWith( $browser.show() );
|
|
|
|
}
|
2012-11-21 14:54:06 -05:00
|
|
|
|
2012-12-04 19:45:21 -05:00
|
|
|
this.refresh();
|
2012-10-29 03:38:13 -04:00
|
|
|
return this;
|
2012-10-28 19:29:17 -04:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-11-22 04:32:21 -05:00
|
|
|
/**
|
|
|
|
* wp.media.view.UploaderStatus
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
2012-11-22 04:32:21 -05:00
|
|
|
*/
|
|
|
|
media.view.UploaderStatus = media.View.extend({
|
|
|
|
className: 'media-uploader-status',
|
|
|
|
template: media.template('uploader-status'),
|
|
|
|
|
2012-11-22 05:56:10 -05:00
|
|
|
events: {
|
|
|
|
'click .upload-dismiss-errors': 'dismiss'
|
|
|
|
},
|
|
|
|
|
2012-11-22 04:32:21 -05:00
|
|
|
initialize: function() {
|
|
|
|
this.queue = wp.Uploader.queue;
|
|
|
|
this.queue.on( 'add remove reset', this.visibility, this );
|
|
|
|
this.queue.on( 'add remove reset change:percent', this.progress, this );
|
|
|
|
this.queue.on( 'add remove reset change:uploading', this.info, this );
|
|
|
|
|
|
|
|
this.errors = wp.Uploader.errors;
|
2012-11-22 07:54:49 -05:00
|
|
|
this.errors.reset();
|
2012-11-22 05:56:10 -05:00
|
|
|
this.errors.on( 'add remove reset', this.visibility, this );
|
|
|
|
this.errors.on( 'add', this.error, this );
|
2012-11-22 04:32:21 -05:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @global wp.Uploader
|
|
|
|
* @returns {wp.media.view.UploaderStatus}
|
|
|
|
*/
|
2012-11-22 04:32:21 -05:00
|
|
|
dispose: function() {
|
|
|
|
wp.Uploader.queue.off( null, null, this );
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* call 'dispose' directly on the parent class
|
|
|
|
*/
|
2012-11-22 04:32:21 -05:00
|
|
|
media.View.prototype.dispose.apply( this, arguments );
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
visibility: function() {
|
|
|
|
this.$el.toggleClass( 'uploading', !! this.queue.length );
|
2012-11-22 05:56:10 -05:00
|
|
|
this.$el.toggleClass( 'errors', !! this.errors.length );
|
2012-11-22 04:32:21 -05:00
|
|
|
this.$el.toggle( !! this.queue.length || !! this.errors.length );
|
|
|
|
},
|
|
|
|
|
|
|
|
ready: function() {
|
|
|
|
_.each({
|
|
|
|
'$bar': '.media-progress-bar div',
|
|
|
|
'$index': '.upload-index',
|
|
|
|
'$total': '.upload-total',
|
|
|
|
'$filename': '.upload-filename'
|
|
|
|
}, function( selector, key ) {
|
|
|
|
this[ key ] = this.$( selector );
|
|
|
|
}, this );
|
|
|
|
|
|
|
|
this.visibility();
|
|
|
|
this.progress();
|
|
|
|
this.info();
|
|
|
|
},
|
|
|
|
|
|
|
|
progress: function() {
|
|
|
|
var queue = this.queue,
|
2013-11-14 00:54:10 -05:00
|
|
|
$bar = this.$bar;
|
2012-11-22 04:32:21 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! $bar || ! queue.length ) {
|
2012-11-22 04:32:21 -05:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-22 04:32:21 -05:00
|
|
|
|
|
|
|
$bar.width( ( queue.reduce( function( memo, attachment ) {
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! attachment.get('uploading') ) {
|
2012-11-22 04:32:21 -05:00
|
|
|
return memo + 100;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-22 04:32:21 -05:00
|
|
|
|
|
|
|
var percent = attachment.get('percent');
|
|
|
|
return memo + ( _.isNumber( percent ) ? percent : 100 );
|
|
|
|
}, 0 ) / queue.length ) + '%' );
|
|
|
|
},
|
|
|
|
|
|
|
|
info: function() {
|
|
|
|
var queue = this.queue,
|
|
|
|
index = 0, active;
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! queue.length ) {
|
2012-11-22 04:32:21 -05:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-22 04:32:21 -05:00
|
|
|
|
|
|
|
active = this.queue.find( function( attachment, i ) {
|
|
|
|
index = i;
|
|
|
|
return attachment.get('uploading');
|
|
|
|
});
|
|
|
|
|
|
|
|
this.$index.text( index + 1 );
|
|
|
|
this.$total.text( queue.length );
|
2012-11-22 05:56:10 -05:00
|
|
|
this.$filename.html( active ? this.filename( active.get('filename') ) : '' );
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {string} filename
|
|
|
|
* @returns {string}
|
|
|
|
*/
|
2012-11-22 05:56:10 -05:00
|
|
|
filename: function( filename ) {
|
|
|
|
return media.truncate( _.escape( filename ), 24 );
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Backbone.Model} error
|
|
|
|
*/
|
2012-11-22 05:56:10 -05:00
|
|
|
error: function( error ) {
|
|
|
|
this.views.add( '.upload-errors', new media.view.UploaderStatusError({
|
|
|
|
filename: this.filename( error.get('file').name ),
|
|
|
|
message: error.get('message')
|
|
|
|
}), { at: 0 });
|
|
|
|
},
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @global wp.Uploader
|
|
|
|
*
|
|
|
|
* @param {Object} event
|
|
|
|
*/
|
2012-11-22 05:56:10 -05:00
|
|
|
dismiss: function( event ) {
|
|
|
|
var errors = this.views.get('.upload-errors');
|
|
|
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( errors ) {
|
2012-11-22 05:56:10 -05:00
|
|
|
_.invoke( errors, 'remove' );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-22 05:56:10 -05:00
|
|
|
wp.Uploader.errors.reset();
|
2012-11-22 04:32:21 -05:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* wp.media.view.UploaderStatusError
|
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
|
|
|
*/
|
2012-11-22 05:56:10 -05:00
|
|
|
media.view.UploaderStatusError = media.View.extend({
|
|
|
|
className: 'upload-error',
|
|
|
|
template: media.template('uploader-status-error')
|
|
|
|
});
|
|
|
|
|
2012-09-06 03:46:15 -04:00
|
|
|
/**
|
|
|
|
* wp.media.view.Toolbar
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
2012-09-06 03:46:15 -04:00
|
|
|
*/
|
2012-11-18 19:36:47 -05:00
|
|
|
media.view.Toolbar = media.View.extend({
|
2012-09-06 03:46:15 -04:00
|
|
|
tagName: 'div',
|
|
|
|
className: 'media-toolbar',
|
|
|
|
|
|
|
|
initialize: function() {
|
2012-12-04 11:21:57 -05:00
|
|
|
var state = this.controller.state(),
|
|
|
|
selection = this.selection = state.get('selection'),
|
|
|
|
library = this.library = state.get('library');
|
|
|
|
|
|
|
|
this._views = {};
|
|
|
|
|
|
|
|
// The toolbar is composed of two `PriorityList` views.
|
|
|
|
this.primary = new media.view.PriorityList();
|
|
|
|
this.secondary = new media.view.PriorityList();
|
|
|
|
this.primary.$el.addClass('media-toolbar-primary');
|
|
|
|
this.secondary.$el.addClass('media-toolbar-secondary');
|
|
|
|
|
|
|
|
this.views.set([ this.secondary, this.primary ]);
|
2012-09-06 03:46:15 -04:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( this.options.items ) {
|
2012-11-12 00:57:12 -05:00
|
|
|
this.set( this.options.items, { silent: true });
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-10-29 11:13:02 -04:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! this.options.silent ) {
|
2012-10-29 11:13:02 -04:00
|
|
|
this.render();
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-12 00:57:12 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( selection ) {
|
2012-12-04 12:45:24 -05:00
|
|
|
selection.on( 'add remove reset', this.refresh, this );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
if ( library ) {
|
2012-12-04 12:45:24 -05:00
|
|
|
library.on( 'add remove reset', this.refresh, this );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-07 15:14:41 -05:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {wp.media.view.Toolbar} Returns itsef to allow chaining
|
|
|
|
*/
|
2012-12-04 11:21:57 -05:00
|
|
|
dispose: function() {
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( this.selection ) {
|
2012-12-04 12:45:24 -05:00
|
|
|
this.selection.off( null, null, this );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
if ( this.library ) {
|
2012-12-04 12:45:24 -05:00
|
|
|
this.library.off( null, null, this );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
|
|
|
/**
|
|
|
|
* call 'dispose' directly on the parent class
|
|
|
|
*/
|
2012-12-04 11:21:57 -05:00
|
|
|
return media.View.prototype.dispose.apply( this, arguments );
|
|
|
|
},
|
2012-09-06 03:46:15 -04:00
|
|
|
|
2012-12-04 11:21:57 -05:00
|
|
|
ready: function() {
|
2012-11-07 15:14:41 -05:00
|
|
|
this.refresh();
|
2012-09-06 03:46:15 -04:00
|
|
|
},
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {string} id
|
|
|
|
* @param {Backbone.View|Object} view
|
|
|
|
* @param {Object} [options={}]
|
|
|
|
* @returns {wp.media.view.Toolbar} Returns itself to allow chaining
|
|
|
|
*/
|
2012-11-12 00:57:12 -05:00
|
|
|
set: function( id, view, options ) {
|
2012-12-04 11:21:57 -05:00
|
|
|
var list;
|
2012-10-29 11:13:02 -04:00
|
|
|
options = options || {};
|
|
|
|
|
2012-10-28 19:29:17 -04:00
|
|
|
// Accept an object with an `id` : `view` mapping.
|
|
|
|
if ( _.isObject( id ) ) {
|
|
|
|
_.each( id, function( view, id ) {
|
2012-11-12 00:57:12 -05:00
|
|
|
this.set( id, view, { silent: true });
|
2012-10-28 19:29:17 -04:00
|
|
|
}, this );
|
2012-10-29 11:13:02 -04:00
|
|
|
|
2012-11-12 00:57:12 -05:00
|
|
|
} else {
|
|
|
|
if ( ! ( view instanceof Backbone.View ) ) {
|
2012-11-21 12:50:02 -05:00
|
|
|
view.classes = [ 'media-button-' + id ].concat( view.classes || [] );
|
2012-11-12 00:57:12 -05:00
|
|
|
view = new media.view.Button( view ).render();
|
|
|
|
}
|
2012-10-28 19:29:17 -04:00
|
|
|
|
2012-11-12 00:57:12 -05:00
|
|
|
view.controller = view.controller || this.controller;
|
2012-09-06 03:46:15 -04:00
|
|
|
|
2012-11-12 00:57:12 -05:00
|
|
|
this._views[ id ] = view;
|
2012-12-04 11:21:57 -05:00
|
|
|
|
|
|
|
list = view.options.priority < 0 ? 'secondary' : 'primary';
|
|
|
|
this[ list ].set( id, view, options );
|
2012-11-12 00:57:12 -05:00
|
|
|
}
|
2012-10-28 19:29:17 -04:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! options.silent ) {
|
2012-12-04 11:21:57 -05:00
|
|
|
this.refresh();
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-04 11:21:57 -05:00
|
|
|
|
2012-09-06 03:46:15 -04:00
|
|
|
return this;
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {string} id
|
|
|
|
* @returns {wp.media.view.Button}
|
|
|
|
*/
|
2012-09-26 20:59:04 -04:00
|
|
|
get: function( id ) {
|
|
|
|
return this._views[ id ];
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {string} id
|
|
|
|
* @param {Object} options
|
|
|
|
* @returns {wp.media.view.Toolbar} Returns itself to allow chaining
|
|
|
|
*/
|
2012-11-12 00:57:12 -05:00
|
|
|
unset: function( id, options ) {
|
2012-09-06 03:46:15 -04:00
|
|
|
delete this._views[ id ];
|
2012-12-04 11:21:57 -05:00
|
|
|
this.primary.unset( id, options );
|
|
|
|
this.secondary.unset( id, options );
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! options || ! options.silent ) {
|
2012-12-04 11:21:57 -05:00
|
|
|
this.refresh();
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-09-06 03:46:15 -04:00
|
|
|
return this;
|
2012-11-07 15:14:41 -05:00
|
|
|
},
|
|
|
|
|
2012-12-04 11:21:57 -05:00
|
|
|
refresh: function() {
|
|
|
|
var state = this.controller.state(),
|
|
|
|
library = state.get('library'),
|
|
|
|
selection = state.get('selection');
|
|
|
|
|
|
|
|
_.each( this._views, function( button ) {
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! button.model || ! button.options || ! button.options.requires ) {
|
2012-12-04 11:21:57 -05:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-04 11:21:57 -05:00
|
|
|
|
|
|
|
var requires = button.options.requires,
|
|
|
|
disabled = false;
|
|
|
|
|
2013-04-10 18:26:55 -04:00
|
|
|
// Prevent insertion of attachments if any of them are still uploading
|
|
|
|
disabled = _.some( selection.models, function( attachment ) {
|
|
|
|
return attachment.get('uploading') === true;
|
|
|
|
});
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( requires.selection && selection && ! selection.length ) {
|
2012-12-04 11:21:57 -05:00
|
|
|
disabled = true;
|
2014-01-20 18:42:11 -05:00
|
|
|
} else if ( requires.library && library && ! library.length ) {
|
2012-12-04 11:21:57 -05:00
|
|
|
disabled = true;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-04 11:21:57 -05:00
|
|
|
button.model.set( 'disabled', disabled );
|
|
|
|
});
|
|
|
|
}
|
2012-09-06 03:46:15 -04:00
|
|
|
});
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* wp.media.view.Toolbar.Select
|
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.view.Toolbar
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
|
|
|
*/
|
2012-11-12 00:57:12 -05:00
|
|
|
media.view.Toolbar.Select = media.view.Toolbar.extend({
|
|
|
|
initialize: function() {
|
2013-11-14 00:54:10 -05:00
|
|
|
var options = this.options;
|
2012-11-12 00:57:12 -05:00
|
|
|
|
|
|
|
_.bindAll( this, 'clickSelect' );
|
|
|
|
|
|
|
|
_.defaults( options, {
|
|
|
|
event: 'select',
|
|
|
|
state: false,
|
|
|
|
reset: true,
|
|
|
|
close: true,
|
2012-12-04 11:21:57 -05:00
|
|
|
text: l10n.select,
|
|
|
|
|
|
|
|
// Does the button rely on the selection?
|
|
|
|
requires: {
|
|
|
|
selection: true
|
|
|
|
}
|
2012-11-12 00:57:12 -05:00
|
|
|
});
|
|
|
|
|
|
|
|
options.items = _.defaults( options.items || {}, {
|
|
|
|
select: {
|
|
|
|
style: 'primary',
|
|
|
|
text: options.text,
|
|
|
|
priority: 80,
|
2012-12-04 11:21:57 -05:00
|
|
|
click: this.clickSelect,
|
|
|
|
requires: options.requires
|
2012-11-12 00:57:12 -05:00
|
|
|
}
|
|
|
|
});
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* call 'initialize' directly on the parent class
|
|
|
|
*/
|
2012-11-12 00:57:12 -05:00
|
|
|
media.view.Toolbar.prototype.initialize.apply( this, arguments );
|
|
|
|
},
|
|
|
|
|
|
|
|
clickSelect: function() {
|
|
|
|
var options = this.options,
|
|
|
|
controller = this.controller;
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( options.close ) {
|
2012-11-12 00:57:12 -05:00
|
|
|
controller.close();
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-12 00:57:12 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( options.event ) {
|
2012-11-12 00:57:12 -05:00
|
|
|
controller.state().trigger( options.event );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-12 00:57:12 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( options.state ) {
|
2012-11-30 10:19:11 -05:00
|
|
|
controller.setState( options.state );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2013-03-03 02:36:21 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( options.reset ) {
|
2013-03-03 02:36:21 -05:00
|
|
|
controller.reset();
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-12 00:57:12 -05:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* wp.media.view.Toolbar.Embed
|
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.view.Toolbar.Select
|
|
|
|
* @augments wp.media.view.Toolbar
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
|
|
|
*/
|
2012-11-12 00:57:12 -05:00
|
|
|
media.view.Toolbar.Embed = media.view.Toolbar.Select.extend({
|
|
|
|
initialize: function() {
|
|
|
|
_.defaults( this.options, {
|
2012-12-04 12:45:24 -05:00
|
|
|
text: l10n.insertIntoPost,
|
|
|
|
requires: false
|
2012-11-12 00:57:12 -05:00
|
|
|
});
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* call 'initialize' directly on the parent class
|
|
|
|
*/
|
2012-11-12 00:57:12 -05:00
|
|
|
media.view.Toolbar.Select.prototype.initialize.apply( this, arguments );
|
2012-11-07 15:14:41 -05:00
|
|
|
},
|
2012-09-06 03:46:15 -04:00
|
|
|
|
2012-11-07 15:14:41 -05:00
|
|
|
refresh: function() {
|
2012-12-04 11:21:57 -05:00
|
|
|
var url = this.controller.state().props.get('url');
|
2012-12-04 23:43:51 -05:00
|
|
|
this.get('select').model.set( 'disabled', ! url || url === 'http://' );
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* call 'refresh' directly on the parent class
|
|
|
|
*/
|
2012-12-04 11:21:57 -05:00
|
|
|
media.view.Toolbar.Select.prototype.refresh.apply( this, arguments );
|
2012-11-01 21:20:01 -04:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-09-06 03:46:15 -04:00
|
|
|
/**
|
|
|
|
* wp.media.view.Button
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
2012-09-06 03:46:15 -04:00
|
|
|
*/
|
2012-11-18 19:36:47 -05:00
|
|
|
media.view.Button = media.View.extend({
|
2012-09-06 03:46:15 -04:00
|
|
|
tagName: 'a',
|
|
|
|
className: 'media-button',
|
|
|
|
attributes: { href: '#' },
|
|
|
|
|
|
|
|
events: {
|
|
|
|
'click': 'click'
|
|
|
|
},
|
|
|
|
|
2012-09-26 20:59:04 -04:00
|
|
|
defaults: {
|
2012-10-29 02:56:23 -04:00
|
|
|
text: '',
|
|
|
|
style: '',
|
|
|
|
size: 'large',
|
|
|
|
disabled: false
|
2012-09-26 20:59:04 -04:00
|
|
|
},
|
|
|
|
|
2012-09-06 03:46:15 -04:00
|
|
|
initialize: function() {
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* Create a model with the provided `defaults`.
|
|
|
|
*
|
|
|
|
* @member {Backbone.Model}
|
|
|
|
*/
|
2012-09-26 20:59:04 -04:00
|
|
|
this.model = new Backbone.Model( this.defaults );
|
|
|
|
|
|
|
|
// If any of the `options` have a key from `defaults`, apply its
|
|
|
|
// value to the `model` and remove it from the `options object.
|
|
|
|
_.each( this.defaults, function( def, key ) {
|
|
|
|
var value = this.options[ key ];
|
2014-02-06 00:32:12 -05:00
|
|
|
if ( _.isUndefined( value ) ) {
|
2012-09-26 20:59:04 -04:00
|
|
|
return;
|
2014-02-06 00:32:12 -05:00
|
|
|
}
|
2012-09-26 20:59:04 -04:00
|
|
|
|
|
|
|
this.model.set( key, value );
|
|
|
|
delete this.options[ key ];
|
|
|
|
}, this );
|
|
|
|
|
|
|
|
this.model.on( 'change', this.render, this );
|
2012-09-06 03:46:15 -04:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {wp.media.view.Button} Returns itself to allow chaining
|
|
|
|
*/
|
2012-09-06 03:46:15 -04:00
|
|
|
render: function() {
|
2012-10-29 02:56:23 -04:00
|
|
|
var classes = [ 'button', this.className ],
|
|
|
|
model = this.model.toJSON();
|
2012-09-06 03:46:15 -04:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( model.style ) {
|
2012-10-29 02:56:23 -04:00
|
|
|
classes.push( 'button-' + model.style );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-09-06 03:46:15 -04:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( model.size ) {
|
2012-10-29 02:56:23 -04:00
|
|
|
classes.push( 'button-' + model.size );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-09-18 20:34:00 -04:00
|
|
|
|
2012-10-16 15:25:17 -04:00
|
|
|
classes = _.uniq( classes.concat( this.options.classes ) );
|
2012-09-06 03:46:15 -04:00
|
|
|
this.el.className = classes.join(' ');
|
2012-09-26 20:59:04 -04:00
|
|
|
|
2012-10-29 02:56:23 -04:00
|
|
|
this.$el.attr( 'disabled', model.disabled );
|
2012-09-26 20:59:04 -04:00
|
|
|
this.$el.text( this.model.get('text') );
|
2012-10-16 15:25:17 -04:00
|
|
|
|
2012-09-06 03:46:15 -04:00
|
|
|
return this;
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Object} event
|
|
|
|
*/
|
2012-09-06 03:46:15 -04:00
|
|
|
click: function( event ) {
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( '#' === this.attributes.href ) {
|
2012-11-09 06:30:40 -05:00
|
|
|
event.preventDefault();
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-09 06:30:40 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( this.options.click && ! this.model.get('disabled') ) {
|
2012-09-06 03:46:15 -04:00
|
|
|
this.options.click.apply( this, arguments );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-09-06 03:46:15 -04:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-10-16 15:25:17 -04:00
|
|
|
/**
|
|
|
|
* wp.media.view.ButtonGroup
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
2012-10-16 15:25:17 -04:00
|
|
|
*/
|
2012-11-18 19:36:47 -05:00
|
|
|
media.view.ButtonGroup = media.View.extend({
|
2012-10-16 15:25:17 -04:00
|
|
|
tagName: 'div',
|
|
|
|
className: 'button-group button-large media-button-group',
|
|
|
|
|
|
|
|
initialize: function() {
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @member {wp.media.view.Button[]}
|
|
|
|
*/
|
2012-10-16 15:25:17 -04:00
|
|
|
this.buttons = _.map( this.options.buttons || [], function( button ) {
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( button instanceof Backbone.View ) {
|
2012-10-16 15:25:17 -04:00
|
|
|
return button;
|
2014-01-20 18:42:11 -05:00
|
|
|
} else {
|
2012-10-16 15:25:17 -04:00
|
|
|
return new media.view.Button( button ).render();
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-10-16 15:25:17 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
delete this.options.buttons;
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( this.options.classes ) {
|
2012-10-16 15:25:17 -04:00
|
|
|
this.$el.addClass( this.options.classes );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-10-16 15:25:17 -04:00
|
|
|
},
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {wp.media.view.ButtonGroup}
|
|
|
|
*/
|
2012-10-16 15:25:17 -04:00
|
|
|
render: function() {
|
|
|
|
this.$el.html( $( _.pluck( this.buttons, 'el' ) ).detach() );
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-10-29 02:56:23 -04:00
|
|
|
/**
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
* wp.media.view.PriorityList
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
2012-10-29 02:56:23 -04:00
|
|
|
*/
|
2012-11-18 19:36:47 -05:00
|
|
|
media.view.PriorityList = media.View.extend({
|
2012-10-29 02:56:23 -04:00
|
|
|
tagName: 'div',
|
|
|
|
|
|
|
|
initialize: function() {
|
2012-12-03 20:26:03 -05:00
|
|
|
this._views = {};
|
2012-10-29 02:56:23 -04:00
|
|
|
|
2012-11-21 15:43:42 -05:00
|
|
|
this.set( _.extend( {}, this._views, this.options.views ), { silent: true });
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
delete this.options.views;
|
2012-10-29 11:13:02 -04:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! this.options.silent ) {
|
2012-10-29 11:13:02 -04:00
|
|
|
this.render();
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-10-29 02:56:23 -04:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {string} id
|
|
|
|
* @param {wp.media.View|Object} view
|
|
|
|
* @param {Object} options
|
|
|
|
* @returns {wp.media.view.PriorityList} Returns itself to allow chaining
|
|
|
|
*/
|
2012-11-21 15:43:42 -05:00
|
|
|
set: function( id, view, options ) {
|
2012-11-21 19:41:39 -05:00
|
|
|
var priority, views, index;
|
|
|
|
|
2012-10-29 11:13:02 -04:00
|
|
|
options = options || {};
|
|
|
|
|
2012-10-29 02:56:23 -04:00
|
|
|
// Accept an object with an `id` : `view` mapping.
|
|
|
|
if ( _.isObject( id ) ) {
|
|
|
|
_.each( id, function( view, id ) {
|
2012-11-21 19:41:39 -05:00
|
|
|
this.set( id, view );
|
2012-10-29 02:56:23 -04:00
|
|
|
}, this );
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! (view instanceof Backbone.View) ) {
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
view = this.toView( view, id, options );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-10-29 02:56:23 -04:00
|
|
|
view.controller = view.controller || this.controller;
|
|
|
|
|
2012-11-21 19:41:39 -05:00
|
|
|
this.unset( id );
|
|
|
|
|
|
|
|
priority = view.options.priority || 10;
|
|
|
|
views = this.views.get() || [];
|
|
|
|
|
|
|
|
_.find( views, function( existing, i ) {
|
|
|
|
if ( existing.options.priority > priority ) {
|
|
|
|
index = i;
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-10-29 02:56:23 -04:00
|
|
|
this._views[ id ] = view;
|
2012-11-21 19:41:39 -05:00
|
|
|
this.views.add( view, {
|
|
|
|
at: _.isNumber( index ) ? index : views.length || 0
|
|
|
|
});
|
|
|
|
|
2012-10-29 02:56:23 -04:00
|
|
|
return this;
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {string} id
|
|
|
|
* @returns {wp.media.View}
|
|
|
|
*/
|
2012-10-29 02:56:23 -04:00
|
|
|
get: function( id ) {
|
|
|
|
return this._views[ id ];
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {string} id
|
|
|
|
* @returns {wp.media.view.PriorityList}
|
|
|
|
*/
|
2012-11-21 19:41:39 -05:00
|
|
|
unset: function( id ) {
|
|
|
|
var view = this.get( id );
|
2012-11-22 01:30:25 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( view ) {
|
2012-11-22 01:30:25 -05:00
|
|
|
view.remove();
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-21 19:41:39 -05:00
|
|
|
|
2012-10-29 02:56:23 -04:00
|
|
|
delete this._views[ id ];
|
|
|
|
return this;
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Object} options
|
|
|
|
* @returns {wp.media.View}
|
|
|
|
*/
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
toView: function( options ) {
|
2012-11-18 19:36:47 -05:00
|
|
|
return new media.View( options );
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
/**
|
|
|
|
* wp.media.view.MenuItem
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
2012-12-03 20:26:03 -05:00
|
|
|
*/
|
|
|
|
media.view.MenuItem = media.View.extend({
|
|
|
|
tagName: 'a',
|
|
|
|
className: 'media-menu-item',
|
|
|
|
|
|
|
|
attributes: {
|
|
|
|
href: '#'
|
|
|
|
},
|
|
|
|
|
|
|
|
events: {
|
|
|
|
'click': '_click'
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Object} event
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
_click: function( event ) {
|
|
|
|
var clickOverride = this.options.click;
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( event ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
event.preventDefault();
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 20:26:03 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( clickOverride ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
clickOverride.call( this );
|
2014-01-20 18:42:11 -05:00
|
|
|
} else {
|
2012-12-03 20:26:03 -05:00
|
|
|
this.click();
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 20:26:03 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
click: function() {
|
|
|
|
var state = this.options.state;
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( state ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
this.controller.setState( state );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 20:26:03 -05:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {wp.media.view.MenuItem} returns itself to allow chaining
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
render: function() {
|
|
|
|
var options = this.options;
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( options.text ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
this.$el.text( options.text );
|
2014-01-20 18:42:11 -05:00
|
|
|
} else if ( options.html ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
this.$el.html( options.html );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 20:26:03 -05:00
|
|
|
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
});
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.view.Menu
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.view.PriorityList
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
*/
|
|
|
|
media.view.Menu = media.view.PriorityList.extend({
|
2012-12-03 20:26:03 -05:00
|
|
|
tagName: 'div',
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
className: 'media-menu',
|
2012-12-03 20:26:03 -05:00
|
|
|
property: 'state',
|
|
|
|
ItemView: media.view.MenuItem,
|
|
|
|
region: 'menu',
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Object} options
|
|
|
|
* @param {string} id
|
|
|
|
* @returns {wp.media.View}
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
toView: function( options, id ) {
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
options = options || {};
|
2012-12-03 20:26:03 -05:00
|
|
|
options[ this.property ] = options[ this.property ] || id;
|
|
|
|
return new this.ItemView( options ).render();
|
|
|
|
},
|
|
|
|
|
|
|
|
ready: function() {
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* call 'ready' directly on the parent class
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
media.view.PriorityList.prototype.ready.apply( this, arguments );
|
|
|
|
this.visibility();
|
|
|
|
},
|
|
|
|
|
|
|
|
set: function() {
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* call 'set' directly on the parent class
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
media.view.PriorityList.prototype.set.apply( this, arguments );
|
|
|
|
this.visibility();
|
|
|
|
},
|
|
|
|
|
|
|
|
unset: function() {
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* call 'unset' directly on the parent class
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
media.view.PriorityList.prototype.unset.apply( this, arguments );
|
|
|
|
this.visibility();
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
},
|
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
visibility: function() {
|
|
|
|
var region = this.region,
|
|
|
|
view = this.controller[ region ].get(),
|
|
|
|
views = this.views.get(),
|
|
|
|
hide = ! views || views.length < 2;
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( this === view ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
this.controller.$el.toggleClass( 'hide-' + region, hide );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 20:26:03 -05:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {string} id
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
select: function( id ) {
|
|
|
|
var view = this.get( id );
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! view ) {
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
|
|
|
|
this.deselect();
|
|
|
|
view.$el.addClass('active');
|
|
|
|
},
|
|
|
|
|
|
|
|
deselect: function() {
|
|
|
|
this.$el.children().removeClass('active');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
/**
|
|
|
|
* wp.media.view.RouterItem
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.view.MenuItem
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
2012-12-03 20:26:03 -05:00
|
|
|
*/
|
|
|
|
media.view.RouterItem = media.view.MenuItem.extend({
|
2012-11-07 15:14:41 -05:00
|
|
|
click: function() {
|
2012-12-03 20:26:03 -05:00
|
|
|
var contentMode = this.options.contentMode;
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( contentMode ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
this.controller.content.mode( contentMode );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 20:26:03 -05:00
|
|
|
}
|
|
|
|
});
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
/**
|
|
|
|
* wp.media.view.Router
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.view.Menu
|
|
|
|
* @augments wp.media.view.PriorityList
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
2012-12-03 20:26:03 -05:00
|
|
|
*/
|
|
|
|
media.view.Router = media.view.Menu.extend({
|
|
|
|
tagName: 'div',
|
|
|
|
className: 'media-router',
|
|
|
|
property: 'contentMode',
|
|
|
|
ItemView: media.view.RouterItem,
|
|
|
|
region: 'router',
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
initialize: function() {
|
|
|
|
this.controller.on( 'content:render', this.update, this );
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* call 'initialize' directly on the parent class
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
media.view.Menu.prototype.initialize.apply( this, arguments );
|
|
|
|
},
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
update: function() {
|
|
|
|
var mode = this.controller.content.mode();
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( mode ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
this.select( mode );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-10-29 02:56:23 -04:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
/**
|
|
|
|
* wp.media.view.Sidebar
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.view.PriorityList
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
*/
|
|
|
|
media.view.Sidebar = media.view.PriorityList.extend({
|
|
|
|
className: 'media-sidebar'
|
|
|
|
});
|
|
|
|
|
2012-09-27 02:53:54 -04:00
|
|
|
/**
|
|
|
|
* wp.media.view.Attachment
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
2012-09-27 02:53:54 -04:00
|
|
|
*/
|
2012-11-18 19:36:47 -05:00
|
|
|
media.view.Attachment = media.View.extend({
|
2012-09-27 02:53:54 -04:00
|
|
|
tagName: 'li',
|
|
|
|
className: 'attachment',
|
|
|
|
template: media.template('attachment'),
|
|
|
|
|
|
|
|
events: {
|
2012-12-03 20:26:03 -05:00
|
|
|
'click .attachment-preview': 'toggleSelectionHandler',
|
2012-11-10 13:25:04 -05:00
|
|
|
'change [data-setting]': 'updateSetting',
|
|
|
|
'change [data-setting] input': 'updateSetting',
|
|
|
|
'change [data-setting] select': 'updateSetting',
|
2012-11-14 21:36:06 -05:00
|
|
|
'change [data-setting] textarea': 'updateSetting',
|
2012-11-18 20:17:30 -05:00
|
|
|
'click .close': 'removeFromLibrary',
|
2012-11-20 06:10:04 -05:00
|
|
|
'click .check': 'removeFromSelection',
|
2012-11-18 20:17:30 -05:00
|
|
|
'click a': 'preventDefault'
|
2012-09-27 02:53:54 -04:00
|
|
|
},
|
|
|
|
|
2012-09-27 03:45:26 -04:00
|
|
|
buttons: {},
|
|
|
|
|
2012-09-27 02:53:54 -04:00
|
|
|
initialize: function() {
|
2012-12-03 00:32:25 -05:00
|
|
|
var selection = this.options.selection;
|
|
|
|
|
2013-01-04 18:29:20 -05:00
|
|
|
this.model.on( 'change:sizes change:uploading', this.render, this );
|
|
|
|
this.model.on( 'change:title', this._syncTitle, this );
|
|
|
|
this.model.on( 'change:caption', this._syncCaption, this );
|
2012-09-27 02:53:54 -04:00
|
|
|
this.model.on( 'change:percent', this.progress, this );
|
2012-12-03 00:32:25 -05:00
|
|
|
|
|
|
|
// Update the selection.
|
2012-09-27 02:53:54 -04:00
|
|
|
this.model.on( 'add', this.select, this );
|
|
|
|
this.model.on( 'remove', this.deselect, this );
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( selection ) {
|
2012-12-03 00:32:25 -05:00
|
|
|
selection.on( 'reset', this.updateSelect, this );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-09-27 03:45:26 -04:00
|
|
|
|
2012-10-30 19:59:57 -04:00
|
|
|
// Update the model's details view.
|
|
|
|
this.model.on( 'selection:single selection:unsingle', this.details, this );
|
|
|
|
this.details( this.model, this.controller.state().get('selection') );
|
2012-09-27 02:53:54 -04:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {wp.media.view.Attachment} Returns itself to allow chaining
|
|
|
|
*/
|
2012-11-27 21:03:31 -05:00
|
|
|
dispose: function() {
|
2012-12-03 00:32:25 -05:00
|
|
|
var selection = this.options.selection;
|
|
|
|
|
|
|
|
// Make sure all settings are saved before removing the view.
|
2012-11-27 21:03:31 -05:00
|
|
|
this.updateAll();
|
2012-12-03 00:32:25 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( selection ) {
|
2012-12-03 00:32:25 -05:00
|
|
|
selection.off( null, null, this );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
|
|
|
/**
|
|
|
|
* call 'dispose' directly on the parent class
|
|
|
|
*/
|
2012-11-27 21:03:31 -05:00
|
|
|
media.View.prototype.dispose.apply( this, arguments );
|
|
|
|
return this;
|
2012-10-30 19:59:57 -04:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {wp.media.view.Attachment} Returns itself to allow chaining
|
|
|
|
*/
|
2012-09-27 02:53:54 -04:00
|
|
|
render: function() {
|
2012-12-04 13:33:51 -05:00
|
|
|
var options = _.defaults( this.model.toJSON(), {
|
2012-11-11 00:16:41 -05:00
|
|
|
orientation: 'landscape',
|
|
|
|
uploading: false,
|
|
|
|
type: '',
|
|
|
|
subtype: '',
|
|
|
|
icon: '',
|
|
|
|
filename: '',
|
|
|
|
caption: '',
|
|
|
|
title: '',
|
|
|
|
dateFormatted: '',
|
|
|
|
width: '',
|
|
|
|
height: '',
|
|
|
|
compat: false,
|
Restore the Description field to the media UI in 3.5.
We tried in vain -- a noble but ultimately failed effort -- to reduce the number of fields for attachments from four (title, caption, alt, description) to one (caption for images, title otherwise). Alternative text needed to stay for accessibility reasons, of course.
Eventually title returned due to heavy plugin reliance. Description is too used by too many plugins (often times incorrectly -- the caption is more likely the proper field), hence its less-than-triumphant return today.
Version 3.5 has tried to streamline media in a number of ways. Removing fields may have been too much at once, as it forced not only a user interface change, but a paradigm change as well.
Finally, on upload we populate the description field with IPTC/EXIF captions, rather than the caption field. See #22768, this should be fixed. For now, Description stays.
This commit also restores 'Title' attribute editing to the main tab of the Edit Image dialog. The "Title" field no longer populates title attributes for <img> tags by design (for accessibility and other purposes, see #18984). So, here is a more obvious 'workaround' for the tooltip community.
Finally, this:
* Cleans up the post.php attachment editor, including by showing a prettier form of the mime type.
* Enables plugins to specifically hide attachment_fields_to_edit from either post.php (where you can create meta boxes) or the modal (which you may not want to clutter), for compatibility reasons.
* Hides the 'Describe this file...' placeholder when a field is read-only in the modal.
props nacin, helenyhou.
fixes #22759.
git-svn-id: http://core.svn.wordpress.org/trunk@23083 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-12-05 19:41:06 -05:00
|
|
|
alt: '',
|
2012-12-07 15:42:10 -05:00
|
|
|
description: ''
|
2012-10-10 05:55:47 -04:00
|
|
|
});
|
2012-09-27 02:53:54 -04:00
|
|
|
|
2012-10-10 19:32:48 -04:00
|
|
|
options.buttons = this.buttons;
|
2012-10-30 19:59:57 -04:00
|
|
|
options.describe = this.controller.state().get('describe');
|
2012-10-08 19:20:04 -04:00
|
|
|
|
2014-02-06 00:32:12 -05:00
|
|
|
if ( 'image' === options.type ) {
|
2012-11-14 17:08:02 -05:00
|
|
|
options.size = this.imageSize();
|
2014-02-06 00:32:12 -05:00
|
|
|
}
|
2012-09-27 02:53:54 -04:00
|
|
|
|
2012-12-04 13:33:51 -05:00
|
|
|
options.can = {};
|
|
|
|
if ( options.nonces ) {
|
|
|
|
options.can.remove = !! options.nonces['delete'];
|
|
|
|
options.can.save = !! options.nonces.update;
|
|
|
|
}
|
|
|
|
|
2014-02-06 00:32:12 -05:00
|
|
|
if ( this.controller.state().get('allowLocalEdits') ) {
|
2012-12-05 05:29:24 -05:00
|
|
|
options.allowLocalEdits = true;
|
2014-02-06 00:32:12 -05:00
|
|
|
}
|
2012-12-05 05:29:24 -05:00
|
|
|
|
2012-11-27 21:03:31 -05:00
|
|
|
this.views.detach();
|
2012-09-27 02:53:54 -04:00
|
|
|
this.$el.html( this.template( options ) );
|
|
|
|
|
2012-11-11 00:16:41 -05:00
|
|
|
this.$el.toggleClass( 'uploading', options.uploading );
|
2014-02-06 00:32:12 -05:00
|
|
|
if ( options.uploading ) {
|
2012-09-27 02:53:54 -04:00
|
|
|
this.$bar = this.$('.media-progress-bar div');
|
2014-02-06 00:32:12 -05:00
|
|
|
} else {
|
2012-09-27 02:53:54 -04:00
|
|
|
delete this.$bar;
|
2014-02-06 00:32:12 -05:00
|
|
|
}
|
2012-09-27 02:53:54 -04:00
|
|
|
|
|
|
|
// Check if the model is selected.
|
2012-12-03 00:32:25 -05:00
|
|
|
this.updateSelect();
|
2012-09-27 02:53:54 -04:00
|
|
|
|
2012-12-03 01:37:49 -05:00
|
|
|
// Update the save status.
|
|
|
|
this.updateSave();
|
|
|
|
|
2012-11-27 21:03:31 -05:00
|
|
|
this.views.render();
|
2012-12-05 04:57:58 -05:00
|
|
|
|
2012-09-27 02:53:54 -04:00
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
progress: function() {
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( this.$bar && this.$bar.length ) {
|
2012-09-27 02:53:54 -04:00
|
|
|
this.$bar.width( this.model.get('percent') + '%' );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-09-27 02:53:54 -04:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Object} event
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
toggleSelectionHandler: function( event ) {
|
|
|
|
var method;
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( event.shiftKey ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
method = 'between';
|
2014-01-20 18:42:11 -05:00
|
|
|
} else if ( event.ctrlKey || event.metaKey ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
method = 'toggle';
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 20:26:03 -05:00
|
|
|
|
|
|
|
this.toggleSelection({
|
|
|
|
method: method
|
|
|
|
});
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Object} options
|
|
|
|
*/
|
2012-12-03 20:26:03 -05:00
|
|
|
toggleSelection: function( options ) {
|
|
|
|
var collection = this.collection,
|
|
|
|
selection = this.options.selection,
|
|
|
|
model = this.model,
|
|
|
|
method = options && options.method,
|
2013-11-14 00:54:10 -05:00
|
|
|
single, models, singleIndex, modelIndex;
|
2012-11-14 21:36:06 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! selection ) {
|
2012-11-14 21:36:06 -05:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-14 21:36:06 -05:00
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
single = selection.single();
|
|
|
|
method = _.isUndefined( method ) ? selection.multiple : method;
|
|
|
|
|
|
|
|
// If the `method` is set to `between`, select all models that
|
|
|
|
// exist between the current and the selected model.
|
|
|
|
if ( 'between' === method && single && selection.multiple ) {
|
|
|
|
// If the models are the same, short-circuit.
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( single === model ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 20:26:03 -05:00
|
|
|
|
|
|
|
singleIndex = collection.indexOf( single );
|
|
|
|
modelIndex = collection.indexOf( this.model );
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( singleIndex < modelIndex ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
models = collection.models.slice( singleIndex, modelIndex + 1 );
|
2014-01-20 18:42:11 -05:00
|
|
|
} else {
|
2012-12-03 20:26:03 -05:00
|
|
|
models = collection.models.slice( modelIndex, singleIndex + 1 );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 20:26:03 -05:00
|
|
|
|
2014-02-13 02:36:13 -05:00
|
|
|
selection.add( models );
|
|
|
|
selection.single( model );
|
2012-12-03 20:26:03 -05:00
|
|
|
return;
|
|
|
|
|
|
|
|
// If the `method` is set to `toggle`, just flip the selection
|
|
|
|
// status, regardless of whether the model is the single model.
|
|
|
|
} else if ( 'toggle' === method ) {
|
2014-02-13 02:36:13 -05:00
|
|
|
selection[ this.selected() ? 'remove' : 'add' ]( model );
|
|
|
|
selection.single( model );
|
2012-12-03 20:26:03 -05:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( method !== 'add' ) {
|
2012-12-03 20:26:03 -05:00
|
|
|
method = 'reset';
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 20:26:03 -05:00
|
|
|
|
2012-12-03 00:32:25 -05:00
|
|
|
if ( this.selected() ) {
|
2012-11-14 21:36:06 -05:00
|
|
|
// If the model is the single model, remove it.
|
|
|
|
// If it is not the same as the single model,
|
|
|
|
// it now becomes the single model.
|
2012-12-03 20:26:03 -05:00
|
|
|
selection[ single === model ? 'remove' : 'single' ]( model );
|
2012-11-14 21:36:06 -05:00
|
|
|
} else {
|
2012-12-03 20:26:03 -05:00
|
|
|
// If the model is not selected, run the `method` on the
|
|
|
|
// selection. By default, we `reset` the selection, but the
|
|
|
|
// `method` can be set to `add` the model to the selection.
|
2014-02-13 02:36:13 -05:00
|
|
|
selection[ method ]( model );
|
|
|
|
selection.single( model );
|
2012-11-14 21:36:06 -05:00
|
|
|
}
|
2012-09-27 02:53:54 -04:00
|
|
|
},
|
|
|
|
|
2012-12-03 00:32:25 -05:00
|
|
|
updateSelect: function() {
|
|
|
|
this[ this.selected() ? 'select' : 'deselect' ]();
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {unresolved|Boolean}
|
|
|
|
*/
|
2012-10-28 19:29:17 -04:00
|
|
|
selected: function() {
|
2012-11-14 21:36:06 -05:00
|
|
|
var selection = this.options.selection;
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( selection ) {
|
2013-03-03 02:04:06 -05:00
|
|
|
return !! selection.get( this.model.cid );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-10-28 19:29:17 -04:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Backbone.Model} model
|
|
|
|
* @param {Backbone.Collection} collection
|
|
|
|
*/
|
2012-09-27 02:53:54 -04:00
|
|
|
select: function( model, collection ) {
|
2012-11-14 21:36:06 -05:00
|
|
|
var selection = this.options.selection;
|
2012-10-28 19:29:17 -04:00
|
|
|
|
|
|
|
// Check if a selection exists and if it's the collection provided.
|
|
|
|
// If they're not the same collection, bail; we're in another
|
|
|
|
// selection's event loop.
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! selection || ( collection && collection !== selection ) ) {
|
2012-09-27 02:53:54 -04:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-09-27 02:53:54 -04:00
|
|
|
|
|
|
|
this.$el.addClass('selected');
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Backbone.Model} model
|
|
|
|
* @param {Backbone.Collection} collection
|
|
|
|
*/
|
2012-09-27 02:53:54 -04:00
|
|
|
deselect: function( model, collection ) {
|
2012-11-14 21:36:06 -05:00
|
|
|
var selection = this.options.selection;
|
2012-10-28 19:29:17 -04:00
|
|
|
|
|
|
|
// Check if a selection exists and if it's the collection provided.
|
|
|
|
// If they're not the same collection, bail; we're in another
|
|
|
|
// selection's event loop.
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! selection || ( collection && collection !== selection ) ) {
|
2012-09-27 02:53:54 -04:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-09-27 02:53:54 -04:00
|
|
|
this.$el.removeClass('selected');
|
2012-09-27 03:45:26 -04:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Backbone.Model} model
|
|
|
|
* @param {Backbone.Collection} collection
|
|
|
|
*/
|
2012-10-30 19:15:16 -04:00
|
|
|
details: function( model, collection ) {
|
2012-11-14 21:36:06 -05:00
|
|
|
var selection = this.options.selection,
|
2012-10-30 19:15:16 -04:00
|
|
|
details;
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( selection !== collection ) {
|
2012-10-30 19:15:16 -04:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-10-30 19:15:16 -04:00
|
|
|
|
|
|
|
details = selection.single();
|
2012-10-30 17:09:45 -04:00
|
|
|
this.$el.toggleClass( 'details', details === this.model );
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Object} event
|
|
|
|
*/
|
2012-09-27 03:45:26 -04:00
|
|
|
preventDefault: function( event ) {
|
|
|
|
event.preventDefault();
|
2012-10-08 19:20:04 -04:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {string} size
|
|
|
|
* @returns {Object}
|
|
|
|
*/
|
2012-10-08 19:20:04 -04:00
|
|
|
imageSize: function( size ) {
|
|
|
|
var sizes = this.model.get('sizes');
|
|
|
|
|
|
|
|
size = size || 'medium';
|
|
|
|
|
|
|
|
// Use the provided image size if possible.
|
|
|
|
if ( sizes && sizes[ size ] ) {
|
2012-10-29 14:05:03 -04:00
|
|
|
return _.clone( sizes[ size ] );
|
2012-10-08 19:20:04 -04:00
|
|
|
} else {
|
|
|
|
return {
|
|
|
|
url: this.model.get('url'),
|
|
|
|
width: this.model.get('width'),
|
|
|
|
height: this.model.get('height'),
|
|
|
|
orientation: this.model.get('orientation')
|
|
|
|
};
|
|
|
|
}
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Object} event
|
|
|
|
*/
|
2012-11-10 13:25:04 -05:00
|
|
|
updateSetting: function( event ) {
|
2012-11-28 17:27:13 -05:00
|
|
|
var $setting = $( event.target ).closest('[data-setting]'),
|
|
|
|
setting, value;
|
2012-11-10 13:25:04 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! $setting.length ) {
|
2012-11-10 13:25:04 -05:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-10 13:25:04 -05:00
|
|
|
|
2012-11-28 17:27:13 -05:00
|
|
|
setting = $setting.data('setting');
|
|
|
|
value = event.target.value;
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( this.model.get( setting ) !== value ) {
|
2012-12-03 01:37:49 -05:00
|
|
|
this.save( setting, value );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 01:37:49 -05:00
|
|
|
},
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* Pass all the arguments to the model's save method.
|
|
|
|
*
|
|
|
|
* Records the aggregate status of all save requests and updates the
|
|
|
|
* view's classes accordingly.
|
|
|
|
*/
|
2012-12-03 01:37:49 -05:00
|
|
|
save: function() {
|
|
|
|
var view = this,
|
|
|
|
save = this._save = this._save || { status: 'ready' },
|
|
|
|
request = this.model.save.apply( this.model, arguments ),
|
|
|
|
requests = save.requests ? $.when( request, save.requests ) : request;
|
|
|
|
|
|
|
|
// If we're waiting to remove 'Saved.', stop.
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( save.savedTimer ) {
|
2012-12-03 01:37:49 -05:00
|
|
|
clearTimeout( save.savedTimer );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 01:37:49 -05:00
|
|
|
|
|
|
|
this.updateSave('waiting');
|
|
|
|
save.requests = requests;
|
2012-12-04 13:33:51 -05:00
|
|
|
requests.always( function() {
|
2012-12-03 01:37:49 -05:00
|
|
|
// If we've performed another request since this one, bail.
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( save.requests !== requests ) {
|
2012-12-03 01:37:49 -05:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 01:37:49 -05:00
|
|
|
|
2012-12-04 13:33:51 -05:00
|
|
|
view.updateSave( requests.state() === 'resolved' ? 'complete' : 'error' );
|
2012-12-03 01:37:49 -05:00
|
|
|
save.savedTimer = setTimeout( function() {
|
|
|
|
view.updateSave('ready');
|
|
|
|
delete save.savedTimer;
|
|
|
|
}, 2000 );
|
|
|
|
});
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {string} status
|
|
|
|
* @returns {wp.media.view.Attachment} Returns itself to allow chaining
|
|
|
|
*/
|
2012-12-03 01:37:49 -05:00
|
|
|
updateSave: function( status ) {
|
|
|
|
var save = this._save = this._save || { status: 'ready' };
|
|
|
|
|
|
|
|
if ( status && status !== save.status ) {
|
|
|
|
this.$el.removeClass( 'save-' + save.status );
|
|
|
|
save.status = status;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.$el.addClass( 'save-' + save.status );
|
|
|
|
return this;
|
2012-11-14 21:36:06 -05:00
|
|
|
},
|
|
|
|
|
2012-11-27 21:03:31 -05:00
|
|
|
updateAll: function() {
|
|
|
|
var $settings = this.$('[data-setting]'),
|
|
|
|
model = this.model,
|
|
|
|
changed;
|
|
|
|
|
|
|
|
changed = _.chain( $settings ).map( function( el ) {
|
|
|
|
var $input = $('input, textarea, select, [value]', el ),
|
|
|
|
setting, value;
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! $input.length ) {
|
2012-11-27 21:03:31 -05:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-27 21:03:31 -05:00
|
|
|
|
|
|
|
setting = $(el).data('setting');
|
|
|
|
value = $input.val();
|
|
|
|
|
|
|
|
// Record the value if it changed.
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( model.get( setting ) !== value ) {
|
2012-11-27 21:03:31 -05:00
|
|
|
return [ setting, value ];
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-27 21:03:31 -05:00
|
|
|
}).compact().object().value();
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! _.isEmpty( changed ) ) {
|
2012-11-27 21:03:31 -05:00
|
|
|
model.save( changed );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-27 21:03:31 -05:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Object} event
|
|
|
|
*/
|
2012-11-14 21:36:06 -05:00
|
|
|
removeFromLibrary: function( event ) {
|
|
|
|
// Stop propagation so the model isn't selected.
|
|
|
|
event.stopPropagation();
|
|
|
|
|
|
|
|
this.collection.remove( this.model );
|
2012-11-20 06:10:04 -05:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Object} event
|
|
|
|
*/
|
2012-11-20 06:10:04 -05:00
|
|
|
removeFromSelection: function( event ) {
|
|
|
|
var selection = this.options.selection;
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! selection ) {
|
2012-11-20 06:10:04 -05:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-20 06:10:04 -05:00
|
|
|
|
|
|
|
// Stop propagation so the model isn't selected.
|
|
|
|
event.stopPropagation();
|
|
|
|
|
|
|
|
selection.remove( this.model );
|
2012-09-27 02:53:54 -04:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2013-01-04 18:29:20 -05:00
|
|
|
// Ensure settings remain in sync between attachment views.
|
|
|
|
_.each({
|
|
|
|
caption: '_syncCaption',
|
|
|
|
title: '_syncTitle'
|
|
|
|
}, function( method, setting ) {
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Backbone.Model} model
|
|
|
|
* @param {string} value
|
|
|
|
* @returns {wp.media.view.Attachment} Returns itself to allow chaining
|
|
|
|
*/
|
2013-01-04 18:29:20 -05:00
|
|
|
media.view.Attachment.prototype[ method ] = function( model, value ) {
|
|
|
|
var $setting = this.$('[data-setting="' + setting + '"]');
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! $setting.length ) {
|
2013-01-04 18:29:20 -05:00
|
|
|
return this;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2013-01-04 18:29:20 -05:00
|
|
|
|
|
|
|
// If the updated value is in sync with the value in the DOM, there
|
|
|
|
// is no need to re-render. If we're currently editing the value,
|
|
|
|
// it will automatically be in sync, suppressing the re-render for
|
|
|
|
// the view we're editing, while updating any others.
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( value === $setting.find('input, textarea, select, [value]').val() ) {
|
2013-01-04 18:29:20 -05:00
|
|
|
return this;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2013-01-04 18:29:20 -05:00
|
|
|
|
|
|
|
return this.render();
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
2012-10-08 20:27:14 -04:00
|
|
|
/**
|
|
|
|
* wp.media.view.Attachment.Library
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.view.Attachment
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
2012-10-08 20:27:14 -04:00
|
|
|
*/
|
|
|
|
media.view.Attachment.Library = media.view.Attachment.extend({
|
2012-11-20 06:10:04 -05:00
|
|
|
buttons: {
|
|
|
|
check: true
|
|
|
|
}
|
2012-10-08 20:27:14 -04:00
|
|
|
});
|
|
|
|
|
2012-09-27 02:53:54 -04:00
|
|
|
/**
|
2012-11-14 21:36:06 -05:00
|
|
|
* wp.media.view.Attachment.EditLibrary
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.view.Attachment
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
2012-09-27 02:53:54 -04:00
|
|
|
*/
|
2012-11-14 21:36:06 -05:00
|
|
|
media.view.Attachment.EditLibrary = media.view.Attachment.extend({
|
2012-09-27 03:45:26 -04:00
|
|
|
buttons: {
|
|
|
|
close: true
|
2012-10-29 11:13:02 -04:00
|
|
|
}
|
2012-09-27 02:53:54 -04:00
|
|
|
});
|
|
|
|
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
/**
|
|
|
|
* wp.media.view.Attachments
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
*/
|
2012-11-18 19:36:47 -05:00
|
|
|
media.view.Attachments = media.View.extend({
|
2012-10-29 02:56:23 -04:00
|
|
|
tagName: 'ul',
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
className: 'attachments',
|
2012-11-27 21:03:31 -05:00
|
|
|
|
|
|
|
cssTemplate: media.template('attachments-css'),
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
|
|
|
|
events: {
|
2012-10-29 02:56:23 -04:00
|
|
|
'scroll': 'scroll'
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function() {
|
2012-10-29 14:05:03 -04:00
|
|
|
this.el.id = _.uniqueId('__attachments-view-');
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
|
|
|
|
_.defaults( this.options, {
|
|
|
|
refreshSensitivity: 200,
|
2012-09-27 02:39:12 -04:00
|
|
|
refreshThreshold: 3,
|
2012-10-03 00:21:50 -04:00
|
|
|
AttachmentView: media.view.Attachment,
|
2012-12-04 20:38:44 -05:00
|
|
|
sortable: false,
|
|
|
|
resize: true
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
});
|
|
|
|
|
2012-11-27 21:03:31 -05:00
|
|
|
this._viewsByCid = {};
|
|
|
|
|
2013-11-14 00:54:10 -05:00
|
|
|
this.collection.on( 'add', function( attachment ) {
|
2012-11-27 21:03:31 -05:00
|
|
|
this.views.add( this.createAttachmentView( attachment ), {
|
2013-03-03 02:04:06 -05:00
|
|
|
at: this.collection.indexOf( attachment )
|
2012-11-27 21:03:31 -05:00
|
|
|
});
|
|
|
|
}, this );
|
|
|
|
|
2013-11-14 00:54:10 -05:00
|
|
|
this.collection.on( 'remove', function( attachment ) {
|
2012-11-27 21:03:31 -05:00
|
|
|
var view = this._viewsByCid[ attachment.cid ];
|
|
|
|
delete this._viewsByCid[ attachment.cid ];
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( view ) {
|
2012-11-27 21:03:31 -05:00
|
|
|
view.remove();
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
}, this );
|
|
|
|
|
2012-10-29 02:56:23 -04:00
|
|
|
this.collection.on( 'reset', this.render, this );
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
|
2012-10-29 02:56:23 -04:00
|
|
|
// Throttle the scroll handler.
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
this.scroll = _.chain( this.scroll ).bind( this ).throttle( this.options.refreshSensitivity ).value();
|
2012-10-03 00:21:50 -04:00
|
|
|
|
|
|
|
this.initSortable();
|
2012-10-29 14:05:03 -04:00
|
|
|
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
_.bindAll( this, 'css' );
|
|
|
|
this.model.on( 'change:edge change:gutter', this.css, this );
|
|
|
|
this._resizeCss = _.debounce( _.bind( this.css, this ), this.refreshSensitivity );
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( this.options.resize ) {
|
2012-12-04 20:38:44 -05:00
|
|
|
$(window).on( 'resize.attachments', this._resizeCss );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-10-29 14:05:03 -04:00
|
|
|
this.css();
|
|
|
|
},
|
|
|
|
|
2012-11-21 22:19:08 -05:00
|
|
|
dispose: function() {
|
2012-11-20 09:04:59 -05:00
|
|
|
this.collection.props.off( null, null, this );
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
$(window).off( 'resize.attachments', this._resizeCss );
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* call 'dispose' directly on the parent class
|
|
|
|
*/
|
2012-11-21 22:19:08 -05:00
|
|
|
media.View.prototype.dispose.apply( this, arguments );
|
2012-10-29 14:05:03 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
css: function() {
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
var $css = $( '#' + this.el.id + '-css' );
|
2012-10-29 14:05:03 -04:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( $css.length ) {
|
2012-10-29 14:05:03 -04:00
|
|
|
$css.remove();
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-10-29 14:05:03 -04:00
|
|
|
|
2012-11-27 21:03:31 -05:00
|
|
|
media.view.Attachments.$head().append( this.cssTemplate({
|
2012-10-29 14:05:03 -04:00
|
|
|
id: this.el.id,
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
edge: this.edge(),
|
|
|
|
gutter: this.model.get('gutter')
|
2012-10-29 14:05:03 -04:00
|
|
|
}) );
|
2012-10-03 00:21:50 -04:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {Number}
|
|
|
|
*/
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
edge: function() {
|
|
|
|
var edge = this.model.get('edge'),
|
|
|
|
gutter, width, columns;
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! this.$el.is(':visible') ) {
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
return edge;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
|
|
|
|
gutter = this.model.get('gutter') * 2;
|
|
|
|
width = this.$el.width() - gutter;
|
|
|
|
columns = Math.ceil( width / ( edge + gutter ) );
|
|
|
|
edge = Math.floor( ( width - ( columns * gutter ) ) / columns );
|
|
|
|
return edge;
|
|
|
|
},
|
|
|
|
|
2012-10-03 00:21:50 -04:00
|
|
|
initSortable: function() {
|
2012-12-05 04:04:19 -05:00
|
|
|
var collection = this.collection;
|
2012-10-03 00:21:50 -04:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! this.options.sortable || ! $.fn.sortable ) {
|
2012-10-03 00:21:50 -04:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-10-03 00:21:50 -04:00
|
|
|
|
2012-12-04 23:11:49 -05:00
|
|
|
this.$el.sortable( _.extend({
|
2012-10-03 00:21:50 -04:00
|
|
|
// If the `collection` has a `comparator`, disable sorting.
|
|
|
|
disabled: !! collection.comparator,
|
|
|
|
|
|
|
|
// Prevent attachments from being dragged outside the bounding
|
|
|
|
// box of the list.
|
2012-10-29 02:56:23 -04:00
|
|
|
containment: this.$el,
|
2012-10-03 00:21:50 -04:00
|
|
|
|
|
|
|
// Change the position of the attachment as soon as the
|
|
|
|
// mouse pointer overlaps a thumbnail.
|
|
|
|
tolerance: 'pointer',
|
|
|
|
|
|
|
|
// Record the initial `index` of the dragged model.
|
|
|
|
start: function( event, ui ) {
|
2012-12-05 04:04:19 -05:00
|
|
|
ui.item.data('sortableIndexStart', ui.item.index());
|
2012-10-03 00:21:50 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
// Update the model's index in the collection.
|
|
|
|
// Do so silently, as the view is already accurate.
|
|
|
|
update: function( event, ui ) {
|
2012-12-05 04:04:19 -05:00
|
|
|
var model = collection.at( ui.item.data('sortableIndexStart') ),
|
2012-12-02 11:06:31 -05:00
|
|
|
comparator = collection.comparator;
|
|
|
|
|
|
|
|
// Temporarily disable the comparator to prevent `add`
|
|
|
|
// from re-sorting.
|
|
|
|
delete collection.comparator;
|
2012-10-03 00:21:50 -04:00
|
|
|
|
2012-12-02 11:06:31 -05:00
|
|
|
// Silently shift the model to its new index.
|
2012-10-03 00:21:50 -04:00
|
|
|
collection.remove( model, {
|
|
|
|
silent: true
|
2014-02-13 02:36:13 -05:00
|
|
|
});
|
|
|
|
collection.add( model, {
|
2012-12-03 20:26:03 -05:00
|
|
|
silent: true,
|
|
|
|
at: ui.item.index()
|
2012-10-03 00:21:50 -04:00
|
|
|
});
|
2012-12-02 11:06:31 -05:00
|
|
|
|
|
|
|
// Restore the comparator.
|
|
|
|
collection.comparator = comparator;
|
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
// Fire the `reset` event to ensure other collections sync.
|
|
|
|
collection.trigger( 'reset', collection );
|
|
|
|
|
2012-12-02 11:06:31 -05:00
|
|
|
// If the collection is sorted by menu order,
|
|
|
|
// update the menu order.
|
2012-12-02 23:54:03 -05:00
|
|
|
collection.saveMenuOrder();
|
2012-10-03 00:21:50 -04:00
|
|
|
}
|
2012-12-04 23:11:49 -05:00
|
|
|
}, this.options.sortable ) );
|
2012-10-03 00:21:50 -04:00
|
|
|
|
|
|
|
// If the `orderby` property is changed on the `collection`,
|
|
|
|
// check to see if we have a `comparator`. If so, disable sorting.
|
|
|
|
collection.props.on( 'change:orderby', function() {
|
2012-10-29 02:56:23 -04:00
|
|
|
this.$el.sortable( 'option', 'disabled', !! collection.comparator );
|
2012-10-03 00:21:50 -04:00
|
|
|
}, this );
|
2012-12-02 11:06:31 -05:00
|
|
|
|
|
|
|
this.collection.props.on( 'change:orderby', this.refreshSortable, this );
|
|
|
|
this.refreshSortable();
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
},
|
|
|
|
|
2012-11-20 09:04:59 -05:00
|
|
|
refreshSortable: function() {
|
2014-02-06 00:32:12 -05:00
|
|
|
if ( ! this.options.sortable || ! $.fn.sortable ) {
|
2012-11-20 09:04:59 -05:00
|
|
|
return;
|
2014-02-06 00:32:12 -05:00
|
|
|
}
|
2012-11-20 09:04:59 -05:00
|
|
|
|
|
|
|
// If the `collection` has a `comparator`, disable sorting.
|
2012-12-02 11:06:31 -05:00
|
|
|
var collection = this.collection,
|
|
|
|
orderby = collection.props.get('orderby'),
|
2012-12-02 23:54:03 -05:00
|
|
|
enabled = 'menuOrder' === orderby || ! collection.comparator;
|
2012-12-02 11:06:31 -05:00
|
|
|
|
|
|
|
this.$el.sortable( 'option', 'disabled', ! enabled );
|
2012-11-20 09:04:59 -05:00
|
|
|
},
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {wp.media.model.Attachment} attachment
|
|
|
|
* @returns {wp.media.View}
|
|
|
|
*/
|
2012-11-27 21:03:31 -05:00
|
|
|
createAttachmentView: function( attachment ) {
|
|
|
|
var view = new this.options.AttachmentView({
|
|
|
|
controller: this.controller,
|
|
|
|
model: attachment,
|
|
|
|
collection: this.collection,
|
|
|
|
selection: this.options.selection
|
|
|
|
});
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
|
2012-11-27 21:03:31 -05:00
|
|
|
return this._viewsByCid[ attachment.cid ] = view;
|
|
|
|
},
|
|
|
|
|
|
|
|
prepare: function() {
|
|
|
|
// Create all of the Attachment views, and replace
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
// the list in a single DOM operation.
|
2012-11-27 21:03:31 -05:00
|
|
|
if ( this.collection.length ) {
|
|
|
|
this.views.set( this.collection.map( this.createAttachmentView, this ) );
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
|
2012-11-27 21:03:31 -05:00
|
|
|
// If there are no elements, clear the views and load some.
|
|
|
|
} else {
|
|
|
|
this.views.unset();
|
|
|
|
this.collection.more().done( this.scroll );
|
|
|
|
}
|
2012-11-21 22:19:08 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
ready: function() {
|
|
|
|
// Trigger the scroll event to check if we're within the
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
// threshold to query for additional attachments.
|
|
|
|
this.scroll();
|
|
|
|
},
|
|
|
|
|
2013-11-14 00:54:10 -05:00
|
|
|
scroll: function() {
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
// @todo: is this still necessary?
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! this.$el.is(':visible') ) {
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
|
2012-11-30 11:41:38 -05:00
|
|
|
if ( this.collection.hasMore() && this.el.scrollHeight < this.el.scrollTop + ( this.el.clientHeight * this.options.refreshThreshold ) ) {
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
this.collection.more().done( this.scroll );
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
}
|
2012-10-29 02:56:23 -04:00
|
|
|
}
|
2012-10-29 14:05:03 -04:00
|
|
|
}, {
|
|
|
|
$head: (function() {
|
|
|
|
var $head;
|
|
|
|
return function() {
|
|
|
|
return $head = $head || $('head');
|
|
|
|
};
|
|
|
|
}())
|
2012-10-29 02:56:23 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.view.Search
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
2012-10-29 02:56:23 -04:00
|
|
|
*/
|
2012-11-18 19:36:47 -05:00
|
|
|
media.view.Search = media.View.extend({
|
2012-10-29 02:56:23 -04:00
|
|
|
tagName: 'input',
|
|
|
|
className: 'search',
|
|
|
|
|
|
|
|
attributes: {
|
2012-11-08 23:44:31 -05:00
|
|
|
type: 'search',
|
2012-10-29 02:56:23 -04:00
|
|
|
placeholder: l10n.search
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
},
|
|
|
|
|
2012-10-29 02:56:23 -04:00
|
|
|
events: {
|
2012-11-25 22:35:28 -05:00
|
|
|
'input': 'search',
|
2012-11-10 13:56:11 -05:00
|
|
|
'keyup': 'search',
|
|
|
|
'change': 'search',
|
|
|
|
'search': 'search'
|
2012-10-29 02:56:23 -04:00
|
|
|
},
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {wp.media.view.Search} Returns itself to allow chaining
|
|
|
|
*/
|
2012-10-29 02:56:23 -04:00
|
|
|
render: function() {
|
|
|
|
this.el.value = this.model.escape('search');
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
search: function( event ) {
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( event.target.value ) {
|
2012-10-29 02:56:23 -04:00
|
|
|
this.model.set( 'search', event.target.value );
|
2014-01-20 18:42:11 -05:00
|
|
|
} else {
|
2012-10-29 02:56:23 -04:00
|
|
|
this.model.unset('search');
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-11-20 08:49:35 -05:00
|
|
|
/**
|
|
|
|
* wp.media.view.AttachmentFilters
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
2012-11-20 08:49:35 -05:00
|
|
|
*/
|
|
|
|
media.view.AttachmentFilters = media.View.extend({
|
|
|
|
tagName: 'select',
|
|
|
|
className: 'attachment-filters',
|
|
|
|
|
|
|
|
events: {
|
|
|
|
change: 'change'
|
|
|
|
},
|
|
|
|
|
2012-11-21 06:04:23 -05:00
|
|
|
keys: [],
|
|
|
|
|
|
|
|
initialize: function() {
|
2012-12-03 02:17:10 -05:00
|
|
|
this.createFilters();
|
2012-12-04 15:51:37 -05:00
|
|
|
_.extend( this.filters, this.options.filters );
|
2012-12-03 02:17:10 -05:00
|
|
|
|
2012-11-21 06:04:23 -05:00
|
|
|
// Build `<option>` elements.
|
|
|
|
this.$el.html( _.chain( this.filters ).map( function( filter, value ) {
|
|
|
|
return {
|
2013-03-03 02:04:06 -05:00
|
|
|
el: $('<option></option>').val(value).text(filter.text)[0],
|
2012-11-21 06:04:23 -05:00
|
|
|
priority: filter.priority || 50
|
|
|
|
};
|
|
|
|
}, this ).sortBy('priority').pluck('el').value() );
|
|
|
|
|
|
|
|
this.model.on( 'change', this.select, this );
|
|
|
|
this.select();
|
|
|
|
},
|
|
|
|
|
2012-12-03 02:17:10 -05:00
|
|
|
createFilters: function() {
|
|
|
|
this.filters = {};
|
|
|
|
},
|
|
|
|
|
2013-11-14 00:54:10 -05:00
|
|
|
change: function() {
|
2012-11-21 06:04:23 -05:00
|
|
|
var filter = this.filters[ this.el.value ];
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( filter ) {
|
2012-11-21 06:04:23 -05:00
|
|
|
this.model.set( filter.props );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-21 06:04:23 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
select: function() {
|
|
|
|
var model = this.model,
|
|
|
|
value = 'all',
|
|
|
|
props = model.toJSON();
|
|
|
|
|
|
|
|
_.find( this.filters, function( filter, id ) {
|
|
|
|
var equal = _.all( filter.props, function( prop, key ) {
|
|
|
|
return prop === ( _.isUndefined( props[ key ] ) ? null : props[ key ] );
|
|
|
|
});
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( equal ) {
|
2012-11-21 06:04:23 -05:00
|
|
|
return value = id;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-21 06:04:23 -05:00
|
|
|
});
|
|
|
|
|
|
|
|
this.$el.val( value );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* wp.media.view.AttachmentFilters.Uploaded
|
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.view.AttachmentFilters
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
|
|
|
*/
|
2012-11-21 06:04:23 -05:00
|
|
|
media.view.AttachmentFilters.Uploaded = media.view.AttachmentFilters.extend({
|
2012-12-03 02:17:10 -05:00
|
|
|
createFilters: function() {
|
2012-12-04 15:51:37 -05:00
|
|
|
var type = this.model.get('type'),
|
|
|
|
types = media.view.settings.mimeTypes,
|
|
|
|
text;
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( types && type ) {
|
2012-12-04 15:51:37 -05:00
|
|
|
text = types[ type ];
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-04 15:51:37 -05:00
|
|
|
|
2012-12-03 02:17:10 -05:00
|
|
|
this.filters = {
|
|
|
|
all: {
|
2012-12-04 15:51:37 -05:00
|
|
|
text: text || l10n.allMediaItems,
|
2012-12-03 02:17:10 -05:00
|
|
|
props: {
|
|
|
|
uploadedTo: null,
|
|
|
|
orderby: 'date',
|
|
|
|
order: 'DESC'
|
|
|
|
},
|
|
|
|
priority: 10
|
2012-11-21 06:04:23 -05:00
|
|
|
},
|
|
|
|
|
2012-12-03 02:17:10 -05:00
|
|
|
uploaded: {
|
|
|
|
text: l10n.uploadedToThisPost,
|
|
|
|
props: {
|
|
|
|
uploadedTo: media.view.settings.post.id,
|
|
|
|
orderby: 'menuOrder',
|
|
|
|
order: 'ASC'
|
|
|
|
},
|
|
|
|
priority: 20
|
|
|
|
}
|
|
|
|
};
|
2012-11-21 06:04:23 -05:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* wp.media.view.AttachmentFilters.All
|
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.view.AttachmentFilters
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
|
|
|
*/
|
2012-11-21 06:04:23 -05:00
|
|
|
media.view.AttachmentFilters.All = media.view.AttachmentFilters.extend({
|
2012-12-03 02:17:10 -05:00
|
|
|
createFilters: function() {
|
2012-11-21 05:18:59 -05:00
|
|
|
var filters = {};
|
|
|
|
|
|
|
|
_.each( media.view.settings.mimeTypes || {}, function( text, key ) {
|
|
|
|
filters[ key ] = {
|
|
|
|
text: text,
|
|
|
|
props: {
|
2012-11-27 18:20:12 -05:00
|
|
|
type: key,
|
2012-11-30 10:11:44 -05:00
|
|
|
uploadedTo: null,
|
2012-11-27 18:20:12 -05:00
|
|
|
orderby: 'date',
|
|
|
|
order: 'DESC'
|
2012-11-21 05:18:59 -05:00
|
|
|
}
|
|
|
|
};
|
|
|
|
});
|
2012-11-20 08:49:35 -05:00
|
|
|
|
2012-11-21 05:18:59 -05:00
|
|
|
filters.all = {
|
|
|
|
text: l10n.allMediaItems,
|
|
|
|
props: {
|
2012-11-27 18:20:12 -05:00
|
|
|
type: null,
|
2012-11-30 10:11:44 -05:00
|
|
|
uploadedTo: null,
|
2012-11-27 18:20:12 -05:00
|
|
|
orderby: 'date',
|
|
|
|
order: 'DESC'
|
2012-11-21 05:18:59 -05:00
|
|
|
},
|
|
|
|
priority: 10
|
|
|
|
};
|
|
|
|
|
|
|
|
filters.uploaded = {
|
|
|
|
text: l10n.uploadedToThisPost,
|
|
|
|
props: {
|
2012-11-27 18:20:12 -05:00
|
|
|
type: null,
|
2012-12-03 02:17:10 -05:00
|
|
|
uploadedTo: media.view.settings.post.id,
|
2012-11-27 18:20:12 -05:00
|
|
|
orderby: 'menuOrder',
|
|
|
|
order: 'ASC'
|
2012-11-21 05:18:59 -05:00
|
|
|
},
|
|
|
|
priority: 20
|
|
|
|
};
|
|
|
|
|
2012-12-03 02:17:10 -05:00
|
|
|
this.filters = filters;
|
|
|
|
}
|
2012-11-20 08:49:35 -05:00
|
|
|
});
|
|
|
|
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.view.AttachmentsBrowser
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
*/
|
2012-11-18 19:36:47 -05:00
|
|
|
media.view.AttachmentsBrowser = media.View.extend({
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
tagName: 'div',
|
|
|
|
className: 'attachments-browser',
|
|
|
|
|
|
|
|
initialize: function() {
|
|
|
|
_.defaults( this.options, {
|
2012-11-20 08:49:35 -05:00
|
|
|
filters: false,
|
|
|
|
search: true,
|
2012-11-22 01:30:25 -05:00
|
|
|
display: false,
|
2012-11-07 15:14:41 -05:00
|
|
|
|
|
|
|
AttachmentView: media.view.Attachment.Library
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
});
|
|
|
|
|
2012-11-22 01:30:25 -05:00
|
|
|
this.createToolbar();
|
2012-11-30 01:01:47 -05:00
|
|
|
this.updateContent();
|
2012-11-22 01:30:25 -05:00
|
|
|
this.createSidebar();
|
2012-11-30 01:01:47 -05:00
|
|
|
|
|
|
|
this.collection.on( 'add remove reset', this.updateContent, this );
|
2012-11-22 01:30:25 -05:00
|
|
|
},
|
2014-03-06 12:46:15 -05:00
|
|
|
toggleSpinner: function( state ) {
|
|
|
|
if ( state ) {
|
|
|
|
this.spinnerTimeout = _.delay(function( view ) {
|
|
|
|
view.toolbar.get( 'spinner' ).show();
|
|
|
|
}, 600, this );
|
|
|
|
} else {
|
|
|
|
this.toolbar.get( 'spinner' ).hide();
|
|
|
|
clearTimeout( this.spinnerTimeout );
|
|
|
|
}
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {wp.media.view.AttachmentsBrowser} Returns itself to allow chaining
|
|
|
|
*/
|
2012-11-22 01:30:25 -05:00
|
|
|
dispose: function() {
|
|
|
|
this.options.selection.off( null, null, this );
|
|
|
|
media.View.prototype.dispose.apply( this, arguments );
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
createToolbar: function() {
|
|
|
|
var filters, FiltersConstructor;
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @member {wp.media.view.Toolbar}
|
|
|
|
*/
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
this.toolbar = new media.view.Toolbar({
|
|
|
|
controller: this.controller
|
|
|
|
});
|
|
|
|
|
2012-11-21 20:43:31 -05:00
|
|
|
this.views.add( this.toolbar );
|
|
|
|
|
2012-11-21 06:04:23 -05:00
|
|
|
filters = this.options.filters;
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( 'uploaded' === filters ) {
|
2012-11-21 06:04:23 -05:00
|
|
|
FiltersConstructor = media.view.AttachmentFilters.Uploaded;
|
2014-01-20 18:42:11 -05:00
|
|
|
} else if ( 'all' === filters ) {
|
2012-11-21 06:04:23 -05:00
|
|
|
FiltersConstructor = media.view.AttachmentFilters.All;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-21 06:04:23 -05:00
|
|
|
|
|
|
|
if ( FiltersConstructor ) {
|
|
|
|
this.toolbar.set( 'filters', new FiltersConstructor({
|
2012-11-20 08:49:35 -05:00
|
|
|
controller: this.controller,
|
|
|
|
model: this.collection.props,
|
|
|
|
priority: -80
|
|
|
|
}).render() );
|
|
|
|
}
|
|
|
|
|
2014-03-06 12:46:15 -05:00
|
|
|
this.toolbar.set( 'spinner', new media.view.Spinner({
|
|
|
|
priority: -70
|
|
|
|
}) );
|
|
|
|
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
if ( this.options.search ) {
|
2012-11-12 00:57:12 -05:00
|
|
|
this.toolbar.set( 'search', new media.view.Search({
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
controller: this.controller,
|
|
|
|
model: this.collection.props,
|
2012-11-20 08:49:35 -05:00
|
|
|
priority: 60
|
2012-11-08 23:44:31 -05:00
|
|
|
}).render() );
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
}
|
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
if ( this.options.dragInfo ) {
|
2012-11-18 19:36:47 -05:00
|
|
|
this.toolbar.set( 'dragInfo', new media.View({
|
2012-11-10 04:11:33 -05:00
|
|
|
el: $( '<div class="instructions">' + l10n.dragInfo + '</div>' )[0],
|
|
|
|
priority: -40
|
|
|
|
}) );
|
|
|
|
}
|
2012-11-22 01:30:25 -05:00
|
|
|
},
|
2012-11-12 18:52:17 -05:00
|
|
|
|
2012-11-30 01:01:47 -05:00
|
|
|
updateContent: function() {
|
|
|
|
var view = this;
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if( ! this.attachments ) {
|
2012-11-30 01:01:47 -05:00
|
|
|
this.createAttachments();
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-30 01:01:47 -05:00
|
|
|
|
|
|
|
if ( ! this.collection.length ) {
|
2014-03-06 12:46:15 -05:00
|
|
|
this.toggleSpinner( true );
|
|
|
|
this.collection.more().done(function() {
|
2014-02-06 00:32:12 -05:00
|
|
|
if ( ! view.collection.length ) {
|
2012-11-30 01:01:47 -05:00
|
|
|
view.createUploader();
|
2014-02-06 00:32:12 -05:00
|
|
|
}
|
2014-03-06 12:46:15 -05:00
|
|
|
view.toggleSpinner( false );
|
2012-11-30 01:01:47 -05:00
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2012-11-30 11:45:43 -05:00
|
|
|
removeContent: function() {
|
|
|
|
_.each(['attachments','uploader'], function( key ) {
|
|
|
|
if ( this[ key ] ) {
|
|
|
|
this[ key ].remove();
|
|
|
|
delete this[ key ];
|
|
|
|
}
|
|
|
|
}, this );
|
|
|
|
},
|
|
|
|
|
2012-11-30 01:01:47 -05:00
|
|
|
createUploader: function() {
|
2012-11-30 11:45:43 -05:00
|
|
|
this.removeContent();
|
2012-11-30 01:01:47 -05:00
|
|
|
|
|
|
|
this.uploader = new media.view.UploaderInline({
|
2012-12-03 20:26:03 -05:00
|
|
|
controller: this.controller,
|
|
|
|
status: false,
|
|
|
|
message: l10n.noItemsFound
|
2012-11-30 01:01:47 -05:00
|
|
|
});
|
|
|
|
|
|
|
|
this.views.add( this.uploader );
|
|
|
|
},
|
|
|
|
|
2012-11-22 01:30:25 -05:00
|
|
|
createAttachments: function() {
|
2012-11-30 11:45:43 -05:00
|
|
|
this.removeContent();
|
2012-11-30 01:01:47 -05:00
|
|
|
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
this.attachments = new media.view.Attachments({
|
|
|
|
controller: this.controller,
|
|
|
|
collection: this.collection,
|
2012-11-14 21:36:06 -05:00
|
|
|
selection: this.options.selection,
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
model: this.model,
|
|
|
|
sortable: this.options.sortable,
|
2012-11-07 15:14:41 -05:00
|
|
|
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
// The single `Attachment` view to be used in the `Attachments` view.
|
2012-11-07 15:14:41 -05:00
|
|
|
AttachmentView: this.options.AttachmentView
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
});
|
|
|
|
|
2012-11-21 20:43:31 -05:00
|
|
|
this.views.add( this.attachments );
|
2012-11-22 01:30:25 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
createSidebar: function() {
|
2012-11-22 04:32:21 -05:00
|
|
|
var options = this.options,
|
|
|
|
selection = options.selection,
|
|
|
|
sidebar = this.sidebar = new media.view.Sidebar({
|
|
|
|
controller: this.controller
|
|
|
|
});
|
|
|
|
|
|
|
|
this.views.add( sidebar );
|
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
if ( this.controller.uploader ) {
|
2012-11-22 04:32:21 -05:00
|
|
|
sidebar.set( 'uploads', new media.view.UploaderStatus({
|
|
|
|
controller: this.controller,
|
|
|
|
priority: 40
|
|
|
|
}) );
|
|
|
|
}
|
2012-11-22 01:30:25 -05:00
|
|
|
|
2012-11-22 04:32:21 -05:00
|
|
|
selection.on( 'selection:single', this.createSingle, this );
|
|
|
|
selection.on( 'selection:unsingle', this.disposeSingle, this );
|
2012-11-22 01:30:25 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( selection.single() ) {
|
2012-11-22 04:32:21 -05:00
|
|
|
this.createSingle();
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-22 01:30:25 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
createSingle: function() {
|
|
|
|
var sidebar = this.sidebar,
|
2013-11-14 00:54:10 -05:00
|
|
|
single = this.options.selection.single();
|
2012-11-22 01:30:25 -05:00
|
|
|
|
|
|
|
sidebar.set( 'details', new media.view.Attachment.Details({
|
|
|
|
controller: this.controller,
|
|
|
|
model: single,
|
|
|
|
priority: 80
|
|
|
|
}) );
|
|
|
|
|
2012-11-26 10:05:14 -05:00
|
|
|
sidebar.set( 'compat', new media.view.AttachmentCompat({
|
|
|
|
controller: this.controller,
|
|
|
|
model: single,
|
|
|
|
priority: 120
|
|
|
|
}) );
|
2012-11-22 01:30:25 -05:00
|
|
|
|
|
|
|
if ( this.options.display ) {
|
|
|
|
sidebar.set( 'display', new media.view.Settings.AttachmentDisplay({
|
|
|
|
controller: this.controller,
|
|
|
|
model: this.model.display( single ),
|
|
|
|
attachment: single,
|
|
|
|
priority: 160,
|
|
|
|
userSettings: this.model.get('displayUserSettings')
|
|
|
|
}) );
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
disposeSingle: function() {
|
|
|
|
var sidebar = this.sidebar;
|
|
|
|
sidebar.unset('details');
|
|
|
|
sidebar.unset('compat');
|
|
|
|
sidebar.unset('display');
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.view.Selection
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
*/
|
2012-11-18 19:36:47 -05:00
|
|
|
media.view.Selection = media.View.extend({
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
tagName: 'div',
|
|
|
|
className: 'media-selection',
|
|
|
|
template: media.template('media-selection'),
|
|
|
|
|
|
|
|
events: {
|
2012-11-14 21:36:06 -05:00
|
|
|
'click .edit-selection': 'edit',
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
'click .clear-selection': 'clear'
|
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function() {
|
|
|
|
_.defaults( this.options, {
|
2012-11-14 21:36:06 -05:00
|
|
|
editable: false,
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
clearable: true
|
|
|
|
});
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @member {wp.media.view.Attachments.Selection}
|
|
|
|
*/
|
2012-12-04 20:38:44 -05:00
|
|
|
this.attachments = new media.view.Attachments.Selection({
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
controller: this.controller,
|
|
|
|
collection: this.collection,
|
2012-11-14 21:36:06 -05:00
|
|
|
selection: this.collection,
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
model: new Backbone.Model({
|
|
|
|
edge: 40,
|
|
|
|
gutter: 5
|
2012-12-04 20:38:44 -05:00
|
|
|
})
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
});
|
|
|
|
|
2012-12-04 11:21:57 -05:00
|
|
|
this.views.set( '.selection-view', this.attachments );
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
this.collection.on( 'add remove reset', this.refresh, this );
|
2012-12-04 13:23:47 -05:00
|
|
|
this.controller.on( 'content:activate', this.refresh, this );
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
},
|
|
|
|
|
2012-12-04 11:21:57 -05:00
|
|
|
ready: function() {
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
this.refresh();
|
|
|
|
},
|
|
|
|
|
|
|
|
refresh: function() {
|
|
|
|
// If the selection hasn't been rendered, bail.
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! this.$el.children().length ) {
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
|
2012-12-04 13:23:47 -05:00
|
|
|
var collection = this.collection,
|
|
|
|
editing = 'edit-selection' === this.controller.content.mode();
|
|
|
|
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
// If nothing is selected, display nothing.
|
2012-12-04 13:23:47 -05:00
|
|
|
this.$el.toggleClass( 'empty', ! collection.length );
|
|
|
|
this.$el.toggleClass( 'one', 1 === collection.length );
|
|
|
|
this.$el.toggleClass( 'editing', editing );
|
|
|
|
|
2012-12-05 14:03:38 -05:00
|
|
|
this.$('.count').text( l10n.selected.replace('%d', collection.length) );
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
},
|
|
|
|
|
2012-11-14 21:36:06 -05:00
|
|
|
edit: function( event ) {
|
|
|
|
event.preventDefault();
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( this.options.editable ) {
|
2012-11-14 21:36:06 -05:00
|
|
|
this.options.editable.call( this, this.collection );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-14 21:36:06 -05:00
|
|
|
},
|
|
|
|
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
clear: function( event ) {
|
|
|
|
event.preventDefault();
|
2012-12-03 00:32:25 -05:00
|
|
|
this.collection.reset();
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.view.Attachment.Selection
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.view.Attachment
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
*/
|
|
|
|
media.view.Attachment.Selection = media.view.Attachment.extend({
|
2012-11-14 21:36:06 -05:00
|
|
|
className: 'attachment selection',
|
|
|
|
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
// On click, just select the model, instead of removing the model from
|
|
|
|
// the selection.
|
|
|
|
toggleSelection: function() {
|
2012-11-14 21:36:06 -05:00
|
|
|
this.options.selection.single( this.model );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-12-04 20:38:44 -05:00
|
|
|
/**
|
|
|
|
* wp.media.view.Attachments.Selection
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.view.Attachments
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
2012-12-04 20:38:44 -05:00
|
|
|
*/
|
|
|
|
media.view.Attachments.Selection = media.view.Attachments.extend({
|
|
|
|
events: {},
|
|
|
|
initialize: function() {
|
|
|
|
_.defaults( this.options, {
|
|
|
|
sortable: true,
|
|
|
|
resize: false,
|
|
|
|
|
|
|
|
// The single `Attachment` view to be used in the `Attachments` view.
|
|
|
|
AttachmentView: media.view.Attachment.Selection
|
|
|
|
});
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* call 'initialize' directly on the parent class
|
|
|
|
*/
|
2012-12-04 20:38:44 -05:00
|
|
|
return media.view.Attachments.prototype.initialize.apply( this, arguments );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.view.Attachments.EditSelection
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.view.Attachment.Selection
|
|
|
|
* @augments wp.media.view.Attachment
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
2012-12-04 20:38:44 -05:00
|
|
|
*/
|
2012-11-14 21:36:06 -05:00
|
|
|
media.view.Attachment.EditSelection = media.view.Attachment.Selection.extend({
|
|
|
|
buttons: {
|
|
|
|
close: true
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 17:59:12 -05:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-10-16 15:25:17 -04:00
|
|
|
|
|
|
|
/**
|
2012-10-31 15:22:25 -04:00
|
|
|
* wp.media.view.Settings
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
2012-10-16 15:25:17 -04:00
|
|
|
*/
|
2012-11-18 19:36:47 -05:00
|
|
|
media.view.Settings = media.View.extend({
|
2012-10-16 15:25:17 -04:00
|
|
|
events: {
|
2012-10-31 15:22:25 -04:00
|
|
|
'click button': 'updateHandler',
|
|
|
|
'change input': 'updateHandler',
|
|
|
|
'change select': 'updateHandler',
|
|
|
|
'change textarea': 'updateHandler'
|
2012-10-16 15:25:17 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function() {
|
2012-10-31 15:22:25 -04:00
|
|
|
this.model = this.model || new Backbone.Model();
|
2012-10-16 15:25:17 -04:00
|
|
|
this.model.on( 'change', this.updateChanges, this );
|
|
|
|
},
|
|
|
|
|
2012-12-04 23:43:51 -05:00
|
|
|
prepare: function() {
|
|
|
|
return _.defaults({
|
2012-11-08 09:15:09 -05:00
|
|
|
model: this.model.toJSON()
|
2012-12-04 23:43:51 -05:00
|
|
|
}, this.options );
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
2014-02-26 22:07:14 -05:00
|
|
|
* @returns {wp.media.view.Settings} Returns itself to allow chaining
|
2014-01-20 18:42:11 -05:00
|
|
|
*/
|
2012-12-04 23:43:51 -05:00
|
|
|
render: function() {
|
|
|
|
media.View.prototype.render.apply( this, arguments );
|
2012-10-16 15:25:17 -04:00
|
|
|
// Select the correct values.
|
|
|
|
_( this.model.attributes ).chain().keys().each( this.update, this );
|
|
|
|
return this;
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {string} key
|
|
|
|
*/
|
2012-10-16 15:25:17 -04:00
|
|
|
update: function( key ) {
|
2012-11-08 09:15:09 -05:00
|
|
|
var value = this.model.get( key ),
|
2012-10-31 15:22:25 -04:00
|
|
|
$setting = this.$('[data-setting="' + key + '"]'),
|
2012-12-03 23:04:45 -05:00
|
|
|
$buttons, $value;
|
2012-10-31 15:22:25 -04:00
|
|
|
|
2012-11-08 09:15:09 -05:00
|
|
|
// Bail if we didn't find a matching setting.
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! $setting.length ) {
|
2012-10-31 15:22:25 -04:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-10-31 15:22:25 -04:00
|
|
|
|
2012-11-08 09:15:09 -05:00
|
|
|
// Attempt to determine how the setting is rendered and update
|
|
|
|
// the selected value.
|
|
|
|
|
|
|
|
// Handle dropdowns.
|
|
|
|
if ( $setting.is('select') ) {
|
2012-12-03 23:04:45 -05:00
|
|
|
$value = $setting.find('[value="' + value + '"]');
|
|
|
|
|
|
|
|
if ( $value.length ) {
|
2012-12-10 18:15:53 -05:00
|
|
|
$setting.find('option').prop( 'selected', false );
|
2012-12-04 14:38:16 -05:00
|
|
|
$value.prop( 'selected', true );
|
2012-12-03 23:04:45 -05:00
|
|
|
} else {
|
|
|
|
// If we can't find the desired value, record what *is* selected.
|
2012-12-10 18:15:53 -05:00
|
|
|
this.model.set( key, $setting.find(':selected').val() );
|
2012-12-03 23:04:45 -05:00
|
|
|
}
|
|
|
|
|
2012-11-08 09:15:09 -05:00
|
|
|
// Handle button groups.
|
|
|
|
} else if ( $setting.hasClass('button-group') ) {
|
2012-10-31 15:22:25 -04:00
|
|
|
$buttons = $setting.find('button').removeClass('active');
|
2012-11-08 09:15:09 -05:00
|
|
|
$buttons.filter( '[value="' + value + '"]' ).addClass('active');
|
2012-11-12 00:57:12 -05:00
|
|
|
|
|
|
|
// Handle text inputs and textareas.
|
|
|
|
} else if ( $setting.is('input[type="text"], textarea') ) {
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! $setting.is(':focus') ) {
|
2012-11-12 00:57:12 -05:00
|
|
|
$setting.val( value );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 00:32:25 -05:00
|
|
|
// Handle checkboxes.
|
|
|
|
} else if ( $setting.is('input[type="checkbox"]') ) {
|
2014-02-11 16:13:14 -05:00
|
|
|
$setting.prop( 'checked', !! value );
|
2012-10-31 15:22:25 -04:00
|
|
|
}
|
2012-10-16 15:25:17 -04:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Object} event
|
|
|
|
*/
|
2012-10-16 15:25:17 -04:00
|
|
|
updateHandler: function( event ) {
|
2012-11-08 09:15:09 -05:00
|
|
|
var $setting = $( event.target ).closest('[data-setting]'),
|
|
|
|
value = event.target.value,
|
|
|
|
userSetting;
|
2012-10-16 15:25:17 -04:00
|
|
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! $setting.length ) {
|
2012-11-08 09:15:09 -05:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-08 09:15:09 -05:00
|
|
|
|
2012-12-03 00:32:25 -05:00
|
|
|
// Use the correct value for checkboxes.
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( $setting.is('input[type="checkbox"]') ) {
|
2012-12-03 00:32:25 -05:00
|
|
|
value = $setting[0].checked;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-03 00:32:25 -05:00
|
|
|
|
|
|
|
// Update the corresponding setting.
|
2012-11-08 09:15:09 -05:00
|
|
|
this.model.set( $setting.data('setting'), value );
|
|
|
|
|
|
|
|
// If the setting has a corresponding user setting,
|
|
|
|
// update that as well.
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( userSetting = $setting.data('userSetting') ) {
|
2012-11-08 09:15:09 -05:00
|
|
|
setUserSetting( userSetting, value );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-10-16 15:25:17 -04:00
|
|
|
},
|
|
|
|
|
2013-11-14 00:54:10 -05:00
|
|
|
updateChanges: function( model ) {
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( model.hasChanged() ) {
|
2013-03-03 02:04:06 -05:00
|
|
|
_( model.changed ).chain().keys().each( this.update, this );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-10-16 15:25:17 -04:00
|
|
|
}
|
|
|
|
});
|
2012-10-29 11:13:02 -04:00
|
|
|
|
2012-10-31 15:22:25 -04:00
|
|
|
/**
|
|
|
|
* wp.media.view.Settings.AttachmentDisplay
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.view.Settings
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
2012-10-31 15:22:25 -04:00
|
|
|
*/
|
|
|
|
media.view.Settings.AttachmentDisplay = media.view.Settings.extend({
|
|
|
|
className: 'attachment-display-settings',
|
|
|
|
template: media.template('attachment-display-settings'),
|
|
|
|
|
2012-11-08 09:15:09 -05:00
|
|
|
initialize: function() {
|
2012-11-20 06:57:08 -05:00
|
|
|
var attachment = this.options.attachment;
|
|
|
|
|
2012-11-08 09:15:09 -05:00
|
|
|
_.defaults( this.options, {
|
|
|
|
userSettings: false
|
|
|
|
});
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* call 'initialize' directly on the parent class
|
|
|
|
*/
|
2012-11-08 09:15:09 -05:00
|
|
|
media.view.Settings.prototype.initialize.apply( this, arguments );
|
2012-12-01 19:43:08 -05:00
|
|
|
this.model.on( 'change:link', this.updateLinkTo, this );
|
2012-11-20 06:57:08 -05:00
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( attachment ) {
|
2012-11-20 06:57:08 -05:00
|
|
|
attachment.on( 'change:uploading', this.render, this );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-20 06:57:08 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
dispose: function() {
|
|
|
|
var attachment = this.options.attachment;
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( attachment ) {
|
2012-11-20 06:57:08 -05:00
|
|
|
attachment.off( null, null, this );
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
|
|
|
/**
|
|
|
|
* call 'dispose' directly on the parent class
|
|
|
|
*/
|
2012-11-20 06:57:08 -05:00
|
|
|
media.view.Settings.prototype.dispose.apply( this, arguments );
|
2012-11-10 15:36:46 -05:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {wp.media.view.AttachmentDisplay} Returns itself to allow chaining
|
|
|
|
*/
|
2012-11-10 15:36:46 -05:00
|
|
|
render: function() {
|
2012-11-20 06:57:08 -05:00
|
|
|
var attachment = this.options.attachment;
|
|
|
|
if ( attachment ) {
|
|
|
|
_.extend( this.options, {
|
|
|
|
sizes: attachment.get('sizes'),
|
|
|
|
type: attachment.get('type')
|
|
|
|
});
|
|
|
|
}
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* call 'render' directly on the parent class
|
|
|
|
*/
|
2012-11-10 15:36:46 -05:00
|
|
|
media.view.Settings.prototype.render.call( this );
|
2012-12-01 19:43:08 -05:00
|
|
|
this.updateLinkTo();
|
2012-11-10 15:36:46 -05:00
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
2012-12-01 19:43:08 -05:00
|
|
|
updateLinkTo: function() {
|
|
|
|
var linkTo = this.model.get('link'),
|
|
|
|
$input = this.$('.link-to-custom'),
|
|
|
|
attachment = this.options.attachment;
|
2012-11-10 15:36:46 -05:00
|
|
|
|
2013-07-23 01:39:08 -04:00
|
|
|
if ( 'none' === linkTo || 'embed' === linkTo || ( ! attachment && 'custom' !== linkTo ) ) {
|
2014-01-28 16:17:12 -05:00
|
|
|
$input.addClass( 'hidden' );
|
2012-11-10 15:36:46 -05:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
if ( attachment ) {
|
|
|
|
if ( 'post' === linkTo ) {
|
|
|
|
$input.val( attachment.get('link') );
|
|
|
|
} else if ( 'file' === linkTo ) {
|
|
|
|
$input.val( attachment.get('url') );
|
|
|
|
} else if ( ! this.model.get('linkUrl') ) {
|
|
|
|
$input.val('http://');
|
|
|
|
}
|
2012-12-01 19:43:08 -05:00
|
|
|
|
2012-12-03 20:26:03 -05:00
|
|
|
$input.prop( 'readonly', 'custom' !== linkTo );
|
2012-12-01 19:43:08 -05:00
|
|
|
}
|
|
|
|
|
2014-01-28 16:17:12 -05:00
|
|
|
$input.removeClass( 'hidden' );
|
2012-11-10 15:36:46 -05:00
|
|
|
|
|
|
|
// If the input is visible, focus and select its contents.
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( $input.is(':visible') ) {
|
2012-11-10 15:36:46 -05:00
|
|
|
$input.focus()[0].select();
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-10-31 15:22:25 -04:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.view.Settings.Gallery
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.view.Settings
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
2012-10-31 15:22:25 -04:00
|
|
|
*/
|
|
|
|
media.view.Settings.Gallery = media.view.Settings.extend({
|
2014-02-24 13:08:16 -05:00
|
|
|
className: 'collection-settings gallery-settings',
|
2012-11-08 09:15:09 -05:00
|
|
|
template: media.template('gallery-settings')
|
2012-10-31 15:22:25 -04:00
|
|
|
});
|
|
|
|
|
2014-02-24 13:08:16 -05:00
|
|
|
/**
|
|
|
|
* wp.media.view.Settings.Playlist
|
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.view.Settings
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
|
|
|
*/
|
|
|
|
media.view.Settings.Playlist = media.view.Settings.extend({
|
|
|
|
className: 'collection-settings playlist-settings',
|
|
|
|
template: media.template('playlist-settings')
|
|
|
|
});
|
|
|
|
|
2012-10-29 11:13:02 -04:00
|
|
|
/**
|
|
|
|
* wp.media.view.Attachment.Details
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.view.Attachment
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
2012-10-29 11:13:02 -04:00
|
|
|
*/
|
|
|
|
media.view.Attachment.Details = media.view.Attachment.extend({
|
|
|
|
tagName: 'div',
|
|
|
|
className: 'attachment-details',
|
|
|
|
template: media.template('attachment-details'),
|
|
|
|
|
|
|
|
events: {
|
2012-11-10 13:25:04 -05:00
|
|
|
'change [data-setting]': 'updateSetting',
|
|
|
|
'change [data-setting] input': 'updateSetting',
|
|
|
|
'change [data-setting] select': 'updateSetting',
|
2012-11-27 10:50:59 -05:00
|
|
|
'change [data-setting] textarea': 'updateSetting',
|
2012-12-06 00:52:19 -05:00
|
|
|
'click .delete-attachment': 'deleteAttachment',
|
2014-03-07 11:42:14 -05:00
|
|
|
'click .trash-attachment': 'trashAttachment',
|
2012-12-06 00:52:19 -05:00
|
|
|
'click .edit-attachment': 'editAttachment',
|
|
|
|
'click .refresh-attachment': 'refreshAttachment'
|
2012-11-27 10:50:59 -05:00
|
|
|
},
|
|
|
|
|
2012-12-05 04:57:58 -05:00
|
|
|
initialize: function() {
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @member {wp.media.view.FocusManager}
|
|
|
|
*/
|
2012-12-05 04:57:58 -05:00
|
|
|
this.focusManager = new media.view.FocusManager({
|
|
|
|
el: this.el
|
|
|
|
});
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* call 'initialize' directly on the parent class
|
|
|
|
*/
|
2012-12-05 04:57:58 -05:00
|
|
|
media.view.Attachment.prototype.initialize.apply( this, arguments );
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {wp.media.view..Attachment.Details} Returns itself to allow chaining
|
|
|
|
*/
|
2012-12-05 04:57:58 -05:00
|
|
|
render: function() {
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* call 'render' directly on the parent class
|
|
|
|
*/
|
2012-12-05 04:57:58 -05:00
|
|
|
media.view.Attachment.prototype.render.apply( this, arguments );
|
|
|
|
this.focusManager.focus();
|
|
|
|
return this;
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Object} event
|
|
|
|
*/
|
2012-12-06 00:52:19 -05:00
|
|
|
deleteAttachment: function( event ) {
|
2012-11-27 10:50:59 -05:00
|
|
|
event.preventDefault();
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( confirm( l10n.warnDelete ) ) {
|
2012-11-27 10:50:59 -05:00
|
|
|
this.model.destroy();
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-12-06 00:52:19 -05:00
|
|
|
},
|
2014-03-07 11:42:14 -05:00
|
|
|
/**
|
|
|
|
* @param {Object} event
|
|
|
|
*/
|
|
|
|
trashAttachment: function( event ) {
|
|
|
|
event.preventDefault();
|
2012-12-06 00:52:19 -05:00
|
|
|
|
2014-03-07 11:42:14 -05:00
|
|
|
this.model.destroy();
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* @param {Object} event
|
|
|
|
*/
|
2014-03-06 17:55:14 -05:00
|
|
|
editAttachment: function( event ) {
|
|
|
|
event.preventDefault();
|
|
|
|
this.controller.setState( 'edit-image' );
|
2012-12-06 00:52:19 -05:00
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Object} event
|
|
|
|
*/
|
2012-12-06 00:52:19 -05:00
|
|
|
refreshAttachment: function( event ) {
|
|
|
|
this.$el.removeClass('needs-refresh');
|
|
|
|
event.preventDefault();
|
|
|
|
this.model.fetch();
|
2012-10-29 11:13:02 -04:00
|
|
|
}
|
2014-03-06 17:55:14 -05:00
|
|
|
|
2012-10-29 11:13:02 -04:00
|
|
|
});
|
2012-11-10 02:51:37 -05:00
|
|
|
|
2012-11-10 20:26:42 -05:00
|
|
|
/**
|
|
|
|
* wp.media.view.AttachmentCompat
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
2012-11-10 20:26:42 -05:00
|
|
|
*/
|
2012-11-18 19:36:47 -05:00
|
|
|
media.view.AttachmentCompat = media.View.extend({
|
2012-11-10 20:26:42 -05:00
|
|
|
tagName: 'form',
|
|
|
|
className: 'compat-item',
|
|
|
|
|
|
|
|
events: {
|
|
|
|
'submit': 'preventDefault',
|
|
|
|
'change input': 'save',
|
|
|
|
'change select': 'save',
|
|
|
|
'change textarea': 'save'
|
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function() {
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @member {wp.media.view.FocusManager}
|
|
|
|
*/
|
2012-12-05 04:57:58 -05:00
|
|
|
this.focusManager = new media.view.FocusManager({
|
|
|
|
el: this.el
|
|
|
|
});
|
|
|
|
|
2012-11-10 20:26:42 -05:00
|
|
|
this.model.on( 'change:compat', this.render, this );
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {wp.media.view.AttachmentCompat} Returns itself to allow chaining
|
|
|
|
*/
|
2012-12-06 01:56:06 -05:00
|
|
|
dispose: function() {
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( this.$(':focus').length ) {
|
2012-12-06 01:56:06 -05:00
|
|
|
this.save();
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
|
|
|
/**
|
|
|
|
* call 'dispose' directly on the parent class
|
|
|
|
*/
|
2012-12-06 01:56:06 -05:00
|
|
|
return media.View.prototype.dispose.apply( this, arguments );
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {wp.media.view.AttachmentCompat} Returns itself to allow chaining
|
|
|
|
*/
|
2012-11-10 20:26:42 -05:00
|
|
|
render: function() {
|
|
|
|
var compat = this.model.get('compat');
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( ! compat || ! compat.item ) {
|
2012-11-10 20:26:42 -05:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-10 20:26:42 -05:00
|
|
|
|
2012-12-05 04:57:58 -05:00
|
|
|
this.views.detach();
|
2012-11-10 20:26:42 -05:00
|
|
|
this.$el.html( compat.item );
|
2012-12-05 04:57:58 -05:00
|
|
|
this.views.render();
|
|
|
|
|
|
|
|
this.focusManager.focus();
|
2012-11-10 20:26:42 -05:00
|
|
|
return this;
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Object} event
|
|
|
|
*/
|
2012-11-10 20:26:42 -05:00
|
|
|
preventDefault: function( event ) {
|
|
|
|
event.preventDefault();
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Object} event
|
|
|
|
*/
|
2012-11-10 20:26:42 -05:00
|
|
|
save: function( event ) {
|
|
|
|
var data = {};
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( event ) {
|
2012-12-06 01:56:06 -05:00
|
|
|
event.preventDefault();
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-10 20:26:42 -05:00
|
|
|
|
|
|
|
_.each( this.$el.serializeArray(), function( pair ) {
|
|
|
|
data[ pair.name ] = pair.value;
|
|
|
|
});
|
|
|
|
|
|
|
|
this.model.saveCompat( data );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-11-10 02:51:37 -05:00
|
|
|
/**
|
|
|
|
* wp.media.view.Iframe
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
2012-11-10 02:51:37 -05:00
|
|
|
*/
|
2012-11-18 19:36:47 -05:00
|
|
|
media.view.Iframe = media.View.extend({
|
2012-11-10 02:51:37 -05:00
|
|
|
className: 'media-iframe',
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {wp.media.view.Iframe} Returns itself to allow chaining
|
|
|
|
*/
|
2012-11-10 02:51:37 -05:00
|
|
|
render: function() {
|
2012-12-03 20:26:03 -05:00
|
|
|
this.views.detach();
|
2012-11-10 02:51:37 -05:00
|
|
|
this.$el.html( '<iframe src="' + this.controller.state().get('src') + '" />' );
|
2012-12-03 20:26:03 -05:00
|
|
|
this.views.render();
|
2012-11-10 02:51:37 -05:00
|
|
|
return this;
|
|
|
|
}
|
|
|
|
});
|
2012-11-12 00:57:12 -05:00
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.view.Embed
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
2012-11-12 00:57:12 -05:00
|
|
|
*/
|
2012-11-18 19:36:47 -05:00
|
|
|
media.view.Embed = media.View.extend({
|
2012-11-12 00:57:12 -05:00
|
|
|
className: 'media-embed',
|
|
|
|
|
|
|
|
initialize: function() {
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @member {wp.media.view.EmbedUrl}
|
|
|
|
*/
|
2012-11-12 00:57:12 -05:00
|
|
|
this.url = new media.view.EmbedUrl({
|
|
|
|
controller: this.controller,
|
2012-12-03 20:26:03 -05:00
|
|
|
model: this.model.props
|
2012-11-12 00:57:12 -05:00
|
|
|
}).render();
|
|
|
|
|
2012-12-04 23:43:51 -05:00
|
|
|
this.views.set([ this.url ]);
|
2012-11-12 00:57:12 -05:00
|
|
|
this.refresh();
|
|
|
|
this.model.on( 'change:type', this.refresh, this );
|
2012-12-06 18:12:59 -05:00
|
|
|
this.model.on( 'change:loading', this.loading, this );
|
2012-11-12 00:57:12 -05:00
|
|
|
},
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @param {Object} view
|
|
|
|
*/
|
2012-11-12 00:57:12 -05:00
|
|
|
settings: function( view ) {
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( this._settings ) {
|
2012-12-04 23:43:51 -05:00
|
|
|
this._settings.remove();
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-12 00:57:12 -05:00
|
|
|
this._settings = view;
|
2012-12-04 23:43:51 -05:00
|
|
|
this.views.add( view );
|
2012-11-12 00:57:12 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
refresh: function() {
|
|
|
|
var type = this.model.get('type'),
|
|
|
|
constructor;
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( 'image' === type ) {
|
2012-11-12 00:57:12 -05:00
|
|
|
constructor = media.view.EmbedImage;
|
2014-01-20 18:42:11 -05:00
|
|
|
} else if ( 'link' === type ) {
|
2012-11-12 00:57:12 -05:00
|
|
|
constructor = media.view.EmbedLink;
|
2014-01-20 18:42:11 -05:00
|
|
|
} else {
|
2012-11-12 00:57:12 -05:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-12 00:57:12 -05:00
|
|
|
|
|
|
|
this.settings( new constructor({
|
|
|
|
controller: this.controller,
|
2012-12-03 20:26:03 -05:00
|
|
|
model: this.model.props,
|
2012-11-12 00:57:12 -05:00
|
|
|
priority: 40
|
|
|
|
}) );
|
2012-12-06 18:12:59 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
loading: function() {
|
|
|
|
this.$el.toggleClass( 'embed-loading', this.model.get('loading') );
|
2012-11-12 00:57:12 -05:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.view.EmbedUrl
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
2012-11-12 00:57:12 -05:00
|
|
|
*/
|
2012-11-18 19:36:47 -05:00
|
|
|
media.view.EmbedUrl = media.View.extend({
|
2012-11-12 00:57:12 -05:00
|
|
|
tagName: 'label',
|
|
|
|
className: 'embed-url',
|
|
|
|
|
|
|
|
events: {
|
2012-11-25 22:35:28 -05:00
|
|
|
'input': 'url',
|
|
|
|
'keyup': 'url',
|
|
|
|
'change': 'url'
|
2012-11-12 00:57:12 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function() {
|
2013-03-03 02:04:06 -05:00
|
|
|
this.$input = $('<input/>').attr( 'type', 'text' ).val( this.model.get('url') );
|
|
|
|
this.input = this.$input[0];
|
2012-12-06 18:12:59 -05:00
|
|
|
|
2013-03-03 02:04:06 -05:00
|
|
|
this.spinner = $('<span class="spinner" />')[0];
|
2012-12-06 18:12:59 -05:00
|
|
|
this.$el.append([ this.input, this.spinner ]);
|
2012-11-12 00:57:12 -05:00
|
|
|
|
|
|
|
this.model.on( 'change:url', this.render, this );
|
|
|
|
},
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* @returns {wp.media.view.EmbedUrl} Returns itself to allow chaining
|
|
|
|
*/
|
2012-11-12 00:57:12 -05:00
|
|
|
render: function() {
|
|
|
|
var $input = this.$input;
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( $input.is(':focus') ) {
|
2012-11-12 00:57:12 -05:00
|
|
|
return;
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-12 00:57:12 -05:00
|
|
|
|
|
|
|
this.input.value = this.model.get('url') || 'http://';
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* Call `render` directly on parent class with passed arguments
|
|
|
|
*/
|
2012-12-04 23:43:51 -05:00
|
|
|
media.View.prototype.render.apply( this, arguments );
|
2012-11-12 00:57:12 -05:00
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
2012-12-04 23:43:51 -05:00
|
|
|
ready: function() {
|
|
|
|
this.focus();
|
|
|
|
},
|
|
|
|
|
2012-11-12 00:57:12 -05:00
|
|
|
url: function( event ) {
|
|
|
|
this.model.set( 'url', event.target.value );
|
|
|
|
},
|
|
|
|
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* If the input is visible, focus and select its contents.
|
|
|
|
*/
|
2012-11-12 00:57:12 -05:00
|
|
|
focus: function() {
|
|
|
|
var $input = this.$input;
|
2014-01-20 18:42:11 -05:00
|
|
|
if ( $input.is(':visible') ) {
|
2012-11-12 00:57:12 -05:00
|
|
|
$input.focus()[0].select();
|
2014-01-20 18:42:11 -05:00
|
|
|
}
|
2012-11-12 00:57:12 -05:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.view.EmbedLink
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.view.Settings
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
2012-11-12 00:57:12 -05:00
|
|
|
*/
|
|
|
|
media.view.EmbedLink = media.view.Settings.extend({
|
|
|
|
className: 'embed-link-settings',
|
|
|
|
template: media.template('embed-link-settings')
|
|
|
|
});
|
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.view.EmbedImage
|
2014-01-20 18:42:11 -05:00
|
|
|
*
|
|
|
|
* @contructor
|
|
|
|
* @augments wp.media.view.Settings.AttachmentDisplay
|
|
|
|
* @augments wp.media.view.Settings
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
2012-11-12 00:57:12 -05:00
|
|
|
*/
|
|
|
|
media.view.EmbedImage = media.view.Settings.AttachmentDisplay.extend({
|
2014-03-05 10:06:14 -05:00
|
|
|
className: 'embed-media-settings',
|
2012-11-12 00:57:12 -05:00
|
|
|
template: media.template('embed-image-settings'),
|
|
|
|
|
|
|
|
initialize: function() {
|
2014-01-20 18:42:11 -05:00
|
|
|
/**
|
|
|
|
* Call `initialize` directly on parent class with passed arguments
|
|
|
|
*/
|
2012-11-12 00:57:12 -05:00
|
|
|
media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
|
|
|
|
this.model.on( 'change:url', this.updateImage, this );
|
|
|
|
},
|
|
|
|
|
|
|
|
updateImage: function() {
|
|
|
|
this.$('img').attr( 'src', this.model.get('url') );
|
|
|
|
}
|
|
|
|
});
|
2014-01-28 16:17:12 -05:00
|
|
|
|
2014-03-05 13:37:15 -05:00
|
|
|
/**
|
|
|
|
* wp.media.view.ImageDetails
|
|
|
|
*
|
|
|
|
* @contructor
|
|
|
|
* @augments wp.media.view.Settings.AttachmentDisplay
|
|
|
|
* @augments wp.media.view.Settings
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
|
|
|
*/
|
2014-01-28 16:17:12 -05:00
|
|
|
media.view.ImageDetails = media.view.Settings.AttachmentDisplay.extend({
|
|
|
|
className: 'image-details',
|
|
|
|
template: media.template('image-details'),
|
2014-03-06 17:55:14 -05:00
|
|
|
events: _.defaults( media.view.Settings.AttachmentDisplay.prototype.events, {
|
|
|
|
'click .edit-attachment': 'editAttachment'
|
|
|
|
} ),
|
2014-01-28 16:17:12 -05:00
|
|
|
initialize: function() {
|
|
|
|
// used in AttachmentDisplay.prototype.updateLinkTo
|
|
|
|
this.options.attachment = this.model.attachment;
|
2014-03-06 17:55:14 -05:00
|
|
|
if ( this.model.attachment ) {
|
|
|
|
this.listenTo( this.model.attachment, 'change:url', this.updateUrl );
|
|
|
|
}
|
2014-01-28 16:17:12 -05:00
|
|
|
media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
|
|
|
|
},
|
|
|
|
|
|
|
|
prepare: function() {
|
|
|
|
var attachment = false;
|
|
|
|
|
|
|
|
if ( this.model.attachment ) {
|
|
|
|
attachment = this.model.attachment.toJSON();
|
|
|
|
}
|
|
|
|
return _.defaults({
|
|
|
|
model: this.model.toJSON(),
|
|
|
|
attachment: attachment
|
|
|
|
}, this.options );
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
var self = this,
|
|
|
|
args = arguments;
|
|
|
|
if ( this.model.attachment && 'pending' === this.model.dfd.state() ) {
|
|
|
|
// should instead show a spinner when the attachment is new and then add a listener that updates on change
|
|
|
|
this.model.dfd.done( function() {
|
|
|
|
media.view.Settings.AttachmentDisplay.prototype.render.apply( self, args );
|
|
|
|
self.resetFocus();
|
|
|
|
} );
|
|
|
|
} else {
|
|
|
|
media.view.Settings.AttachmentDisplay.prototype.render.apply( this, arguments );
|
|
|
|
setTimeout( function() { self.resetFocus(); }, 10 );
|
|
|
|
}
|
|
|
|
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
resetFocus: function() {
|
|
|
|
this.$( '.caption textarea' ).focus();
|
|
|
|
this.$( '.embed-image-settings' ).scrollTop( 0 );
|
2014-03-06 17:55:14 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
updateUrl: function() {
|
|
|
|
this.$( '.thumbnail img' ).attr( 'src', this.model.get('url' ) );
|
|
|
|
this.$( '.url' ).val( this.model.get('url' ) );
|
|
|
|
},
|
|
|
|
|
|
|
|
editAttachment: function( event ) {
|
|
|
|
event.preventDefault();
|
|
|
|
this.controller.setState( 'edit-image' );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2014-03-11 00:13:16 -04:00
|
|
|
/**
|
|
|
|
* wp.media.view.Cropper
|
|
|
|
*
|
|
|
|
* Uses the imgAreaSelect plugin to allow a user to crop an image.
|
|
|
|
*
|
|
|
|
* Takes imgAreaSelect options from
|
|
|
|
* wp.customize.HeaderControl.calculateImageSelectOptions via
|
|
|
|
* wp.customize.HeaderControl.openMM.
|
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
|
|
|
*/
|
|
|
|
media.view.Cropper = media.View.extend({
|
|
|
|
tagName: 'img',
|
|
|
|
className: 'crop-content',
|
|
|
|
initialize: function() {
|
|
|
|
_.bindAll(this, 'onImageLoad');
|
|
|
|
this.$el.attr('src', this.options.attachment.get('url'));
|
|
|
|
},
|
|
|
|
ready: function() {
|
|
|
|
this.$el.on('load', this.onImageLoad);
|
|
|
|
$(window).on('resize.cropper', _.debounce(this.onImageLoad, 250));
|
|
|
|
},
|
|
|
|
remove: function() {
|
|
|
|
$(window).off('resize.cropper');
|
|
|
|
this.$el.remove();
|
|
|
|
this.$el.off();
|
|
|
|
wp.media.View.prototype.remove.apply(this, arguments);
|
|
|
|
},
|
|
|
|
prepare: function() {
|
|
|
|
return {
|
|
|
|
title: l10n.cropYourImage,
|
|
|
|
url: this.options.attachment.get('url')
|
|
|
|
};
|
|
|
|
},
|
|
|
|
onImageLoad: function() {
|
|
|
|
var imgOptions = this.controller.frame.options.imgSelectOptions;
|
|
|
|
if (typeof imgOptions === 'function') {
|
|
|
|
imgOptions = imgOptions(this.options.attachment, this.controller);
|
|
|
|
}
|
|
|
|
this.trigger('image-loaded');
|
|
|
|
this.controller.imgSelect = this.$el.imgAreaSelect(imgOptions);
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
2014-03-06 17:55:14 -05:00
|
|
|
|
|
|
|
media.view.EditImage = media.View.extend({
|
|
|
|
|
|
|
|
className: 'image-editor',
|
|
|
|
template: media.template('image-editor'),
|
|
|
|
|
|
|
|
initialize: function( options ) {
|
|
|
|
this.editor = window.imageEdit;
|
|
|
|
this.controller = options.controller;
|
|
|
|
media.View.prototype.initialize.apply( this, arguments );
|
|
|
|
},
|
|
|
|
|
|
|
|
prepare: function() {
|
|
|
|
return this.model.toJSON();
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
media.View.prototype.render.apply( this, arguments );
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
loadEditor: function() {
|
|
|
|
this.editor.open( this.model.get('id'), this.model.get('nonces').edit, this );
|
|
|
|
},
|
|
|
|
|
|
|
|
back: function() {
|
|
|
|
var lastState = this.controller.lastState();
|
|
|
|
this.controller.setState( lastState );
|
|
|
|
},
|
|
|
|
|
|
|
|
refresh: function() {
|
|
|
|
this.model.fetch();
|
|
|
|
},
|
|
|
|
|
|
|
|
save: function() {
|
|
|
|
var self = this,
|
|
|
|
lastState = this.controller.lastState();
|
|
|
|
|
|
|
|
this.model.fetch().done( function() {
|
|
|
|
self.controller.setState( lastState );
|
|
|
|
});
|
2014-01-28 16:17:12 -05:00
|
|
|
}
|
2014-03-06 17:55:14 -05:00
|
|
|
|
2014-01-28 16:17:12 -05:00
|
|
|
});
|
2014-03-05 10:06:14 -05:00
|
|
|
|
2014-03-05 13:37:15 -05:00
|
|
|
/**
|
2014-03-07 00:52:14 -05:00
|
|
|
* wp.media.view.MediaDetails
|
2014-03-05 13:37:15 -05:00
|
|
|
*
|
|
|
|
* @contructor
|
|
|
|
* @augments wp.media.view.Settings.AttachmentDisplay
|
|
|
|
* @augments wp.media.view.Settings
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
|
|
|
*/
|
2014-03-07 00:52:14 -05:00
|
|
|
media.view.MediaDetails = media.view.Settings.AttachmentDisplay.extend({
|
2014-03-05 10:06:14 -05:00
|
|
|
initialize: function() {
|
2014-03-09 00:25:15 -05:00
|
|
|
_.bindAll(this, 'success', 'unsetPlayer');
|
2014-03-05 10:06:14 -05:00
|
|
|
|
2014-03-09 00:25:15 -05:00
|
|
|
this.listenTo( this.controller, 'close', this.unsetPlayer );
|
2014-03-07 03:32:14 -05:00
|
|
|
this.on( 'ready', this.setPlayer );
|
2014-03-09 00:25:15 -05:00
|
|
|
this.on( 'media:setting:remove', this.unsetPlayer );
|
|
|
|
this.on( 'media:setting:remove', this.render );
|
|
|
|
this.on( 'media:setting:remove', this.setPlayer );
|
|
|
|
this.events = _.extend( this.events, {
|
2014-03-09 06:32:15 -04:00
|
|
|
'click .remove-setting' : 'removeSetting',
|
|
|
|
'change .content-track' : 'setTracks',
|
|
|
|
'click .remove-track' : 'setTracks'
|
2014-03-09 00:25:15 -05:00
|
|
|
} );
|
2014-03-05 10:06:14 -05:00
|
|
|
|
|
|
|
media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
|
|
|
|
},
|
|
|
|
|
|
|
|
prepare: function() {
|
|
|
|
return _.defaults({
|
2014-03-09 06:32:15 -04:00
|
|
|
model: this.model.toJSON()
|
2014-03-05 10:06:14 -05:00
|
|
|
}, this.options );
|
|
|
|
},
|
|
|
|
|
2014-03-08 20:01:14 -05:00
|
|
|
/**
|
|
|
|
* When multiple players in the DOM contain the same src, things get weird.
|
|
|
|
*
|
|
|
|
* @param {HTMLElement} media
|
|
|
|
* @returns {HTMLElement}
|
|
|
|
*/
|
2014-03-07 00:52:14 -05:00
|
|
|
prepareSrc : function (media) {
|
2014-03-08 20:01:14 -05:00
|
|
|
var t = (new Date()).getTime();
|
|
|
|
_.each( $(media).find('source'), function (source) {
|
|
|
|
source.src = [
|
|
|
|
source.src,
|
|
|
|
source.src.indexOf('?') > -1 ? '&' : '?',
|
|
|
|
t
|
|
|
|
].join('');
|
|
|
|
});
|
2014-03-07 00:52:14 -05:00
|
|
|
|
|
|
|
return media;
|
|
|
|
},
|
|
|
|
|
2014-03-09 00:25:15 -05:00
|
|
|
removeSetting : function (e) {
|
2014-03-09 06:32:15 -04:00
|
|
|
var wrap = $( e.currentTarget ).parent(), setting;
|
|
|
|
|
|
|
|
setting = wrap.find( 'input' ).data( 'setting' );
|
|
|
|
|
|
|
|
if ( setting ) {
|
|
|
|
this.model.unset( setting );
|
|
|
|
this.trigger( 'media:setting:remove', this );
|
|
|
|
}
|
|
|
|
|
|
|
|
wrap.remove();
|
|
|
|
},
|
2014-03-09 00:25:15 -05:00
|
|
|
|
2014-03-09 06:32:15 -04:00
|
|
|
setTracks : function () {
|
|
|
|
var tracks = '';
|
2014-03-09 00:25:15 -05:00
|
|
|
|
2014-03-09 06:32:15 -04:00
|
|
|
_.each( this.$('.content-track'), function (track) {
|
|
|
|
tracks += $( track ).val();
|
|
|
|
} );
|
2014-03-09 00:25:15 -05:00
|
|
|
|
2014-03-09 06:32:15 -04:00
|
|
|
this.model.set( 'content', tracks );
|
2014-03-09 00:25:15 -05:00
|
|
|
this.trigger( 'media:setting:remove', this );
|
|
|
|
},
|
|
|
|
|
2014-03-07 00:52:14 -05:00
|
|
|
setPlayer : function () {
|
2014-03-08 20:01:14 -05:00
|
|
|
if ( ! this.player && this.media ) {
|
2014-03-07 03:32:14 -05:00
|
|
|
this.player = new MediaElementPlayer( this.media, this.settings );
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @abstract
|
|
|
|
*/
|
|
|
|
setMedia : function () {
|
|
|
|
return this;
|
2014-03-07 00:52:14 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Override the MediaElement method for removing a player.
|
|
|
|
* MediaElement tries to pull the audio/video tag out of
|
|
|
|
* its container and re-add it to the DOM.
|
|
|
|
*/
|
2014-03-09 00:25:15 -05:00
|
|
|
removePlayer: function() {
|
2014-03-07 00:52:14 -05:00
|
|
|
var t = this.player, featureIndex, feature;
|
|
|
|
|
|
|
|
// invoke features cleanup
|
|
|
|
for ( featureIndex in t.options.features ) {
|
|
|
|
feature = t.options.features[featureIndex];
|
|
|
|
if ( t['clean' + feature] ) {
|
|
|
|
try {
|
|
|
|
t['clean' + feature](t);
|
|
|
|
} catch (e) {}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if ( ! t.isDynamic ) {
|
|
|
|
t.$node.remove();
|
|
|
|
}
|
|
|
|
|
|
|
|
if ( 'native' !== t.media.pluginType ) {
|
|
|
|
t.media.remove();
|
|
|
|
}
|
|
|
|
|
2014-03-07 03:44:15 -05:00
|
|
|
delete window.mejs.players[t.id];
|
2014-03-07 00:52:14 -05:00
|
|
|
|
|
|
|
t.container.remove();
|
|
|
|
t.globalUnbind();
|
|
|
|
delete t.node.player;
|
|
|
|
},
|
|
|
|
|
2014-03-09 00:25:15 -05:00
|
|
|
unsetPlayer : function() {
|
2014-03-07 00:52:14 -05:00
|
|
|
if ( this.player ) {
|
2014-03-07 03:32:14 -05:00
|
|
|
if ( _.isUndefined( this.mejs.pluginType ) ) {
|
|
|
|
this.mejs.pause();
|
|
|
|
}
|
2014-03-09 00:25:15 -05:00
|
|
|
this.removePlayer();
|
2014-03-07 03:32:14 -05:00
|
|
|
this.player = false;
|
2014-03-07 00:52:14 -05:00
|
|
|
}
|
2014-03-05 10:06:14 -05:00
|
|
|
},
|
|
|
|
|
2014-03-07 00:52:14 -05:00
|
|
|
success : function (mejs) {
|
|
|
|
var autoplay = mejs.attributes.autoplay && 'false' !== mejs.attributes.autoplay;
|
|
|
|
|
|
|
|
if ( 'flash' === mejs.pluginType && autoplay ) {
|
|
|
|
mejs.addEventListener( 'canplay', function () {
|
|
|
|
mejs.play();
|
|
|
|
}, false );
|
|
|
|
}
|
|
|
|
|
2014-03-05 10:06:14 -05:00
|
|
|
this.mejs = mejs;
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
var self = this, settings = {
|
2014-03-07 00:52:14 -05:00
|
|
|
success : this.success
|
2014-03-05 10:06:14 -05:00
|
|
|
};
|
|
|
|
|
|
|
|
if ( ! _.isUndefined( window._wpmejsSettings ) ) {
|
|
|
|
settings.pluginPath = _wpmejsSettings.pluginPath;
|
|
|
|
}
|
|
|
|
|
|
|
|
media.view.Settings.AttachmentDisplay.prototype.render.apply( this, arguments );
|
|
|
|
setTimeout( function() { self.resetFocus(); }, 10 );
|
|
|
|
|
2014-03-07 03:32:14 -05:00
|
|
|
this.settings = settings;
|
2014-03-05 10:06:14 -05:00
|
|
|
|
2014-03-07 03:32:14 -05:00
|
|
|
return this.setMedia();
|
2014-03-05 10:06:14 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
resetFocus: function() {
|
|
|
|
this.$( '.embed-media-settings' ).scrollTop( 0 );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2014-03-05 13:37:15 -05:00
|
|
|
/**
|
2014-03-07 00:52:14 -05:00
|
|
|
* wp.media.view.AudioDetails
|
2014-03-05 13:37:15 -05:00
|
|
|
*
|
|
|
|
* @contructor
|
2014-03-07 00:52:14 -05:00
|
|
|
* @augments wp.media.view.MediaDetails
|
2014-03-05 13:37:15 -05:00
|
|
|
* @augments wp.media.view.Settings.AttachmentDisplay
|
|
|
|
* @augments wp.media.view.Settings
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
|
|
|
*/
|
2014-03-07 00:52:14 -05:00
|
|
|
media.view.AudioDetails = media.view.MediaDetails.extend({
|
|
|
|
className: 'audio-details',
|
|
|
|
template: media.template('audio-details'),
|
2014-03-05 10:06:14 -05:00
|
|
|
|
2014-03-07 03:32:14 -05:00
|
|
|
setMedia: function() {
|
2014-03-09 00:25:15 -05:00
|
|
|
var audio = this.$('.wp-audio-shortcode');
|
2014-03-05 10:06:14 -05:00
|
|
|
|
2014-03-09 00:25:15 -05:00
|
|
|
if ( audio.find( 'source' ).length ) {
|
|
|
|
if ( audio.is(':hidden') ) {
|
|
|
|
audio.show();
|
|
|
|
}
|
|
|
|
this.media = this.prepareSrc( audio.get(0) );
|
|
|
|
} else {
|
|
|
|
audio.hide();
|
|
|
|
this.media = false;
|
|
|
|
}
|
2014-03-05 10:06:14 -05:00
|
|
|
|
2014-03-07 00:52:14 -05:00
|
|
|
return this;
|
|
|
|
}
|
|
|
|
});
|
2014-03-05 10:06:14 -05:00
|
|
|
|
2014-03-07 00:52:14 -05:00
|
|
|
/**
|
|
|
|
* wp.media.view.VideoDetails
|
|
|
|
*
|
|
|
|
* @contructor
|
|
|
|
* @augments wp.media.view.MediaDetails
|
|
|
|
* @augments wp.media.view.Settings.AttachmentDisplay
|
|
|
|
* @augments wp.media.view.Settings
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
|
|
|
*/
|
|
|
|
media.view.VideoDetails = media.view.MediaDetails.extend({
|
|
|
|
className: 'video-details',
|
|
|
|
template: media.template('video-details'),
|
2014-03-05 10:06:14 -05:00
|
|
|
|
2014-03-07 03:32:14 -05:00
|
|
|
setMedia: function() {
|
|
|
|
var video = this.$('.wp-video-shortcode');
|
|
|
|
|
2014-03-09 00:25:15 -05:00
|
|
|
if ( video.find( 'source' ).length ) {
|
|
|
|
if ( video.is(':hidden') ) {
|
|
|
|
video.show();
|
|
|
|
}
|
|
|
|
|
|
|
|
if ( ! video.hasClass('youtube-video') ) {
|
|
|
|
this.media = this.prepareSrc( video.get(0) );
|
|
|
|
} else {
|
|
|
|
this.media = video.get(0);
|
|
|
|
}
|
2014-03-07 03:32:14 -05:00
|
|
|
} else {
|
2014-03-09 00:25:15 -05:00
|
|
|
video.hide();
|
|
|
|
this.media = false;
|
2014-03-07 03:32:14 -05:00
|
|
|
}
|
2014-03-05 10:06:14 -05:00
|
|
|
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
});
|
2014-03-06 12:46:15 -05:00
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.view.Spinner
|
|
|
|
*
|
|
|
|
* @constructor
|
|
|
|
* @augments wp.media.View
|
|
|
|
* @augments wp.Backbone.View
|
|
|
|
* @augments Backbone.View
|
|
|
|
*/
|
|
|
|
media.view.Spinner = media.View.extend({
|
|
|
|
tagName: 'span',
|
|
|
|
className: 'spinner',
|
|
|
|
|
|
|
|
show: function() {
|
|
|
|
this.$el.show();
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
hide: function() {
|
|
|
|
this.$el.hide();
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
});
|
2014-03-05 10:06:14 -05:00
|
|
|
}(jQuery, _));
|