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 06:54:23 +02:00
|
|
|
(function($){
|
|
|
|
var media = wp.media,
|
|
|
|
Attachment = media.model.Attachment,
|
|
|
|
Attachments = media.model.Attachments,
|
2012-09-27 03:11:04 +02:00
|
|
|
Query = media.model.Query,
|
|
|
|
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 06:54:23 +02:00
|
|
|
|
2012-09-27 03:11:04 +02:00
|
|
|
// Link any localized strings.
|
2012-11-20 02:48:37 +01: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 06:54:23 +02:00
|
|
|
|
2012-11-10 08:51:37 +01:00
|
|
|
// Link any settings.
|
|
|
|
media.view.settings = l10n.settings || {};
|
|
|
|
delete l10n.settings;
|
|
|
|
|
2012-12-03 08:17:10 +01:00
|
|
|
// Copy the `post` setting over to the model settings.
|
|
|
|
media.model.settings.post = media.view.settings.post;
|
2012-11-27 15:58:08 +01:00
|
|
|
|
2012-10-29 00:29:17 +01: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 ]
|
|
|
|
};
|
|
|
|
}());
|
|
|
|
|
|
|
|
// Makes it easier to bind events using transitions.
|
2012-11-22 11:56:10 +01:00
|
|
|
media.transition = function( selector, sensitivity ) {
|
2012-10-29 00:29:17 +01:00
|
|
|
var deferred = $.Deferred();
|
|
|
|
|
2012-11-22 11:56:10 +01:00
|
|
|
sensitivity = sensitivity || 2000;
|
|
|
|
|
2012-10-29 00:29:17 +01:00
|
|
|
if ( $.support.transition ) {
|
|
|
|
if ( ! (selector instanceof $) )
|
|
|
|
selector = $( selector );
|
|
|
|
|
|
|
|
// Resolve the deferred when the first element finishes animating.
|
|
|
|
selector.first().one( $.support.transition.end, deferred.resolve );
|
|
|
|
|
2012-11-22 11:56:10 +01:00
|
|
|
// Just in case the event doesn't trigger, fire a callback.
|
|
|
|
_.delay( deferred.resolve, sensitivity );
|
|
|
|
|
2012-10-29 00:29:17 +01: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 06:54:23 +02:00
|
|
|
/**
|
|
|
|
* ========================================================================
|
|
|
|
* CONTROLLERS
|
|
|
|
* ========================================================================
|
|
|
|
*/
|
|
|
|
|
2012-11-07 21:14:41 +01:00
|
|
|
/**
|
|
|
|
* wp.media.controller.Region
|
|
|
|
*/
|
|
|
|
media.controller.Region = function( options ) {
|
2012-12-04 02:26:03 +01:00
|
|
|
_.extend( this, _.pick( options || {}, 'id', 'view', 'selector' ) );
|
2012-11-07 21:14:41 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
// Use Backbone's self-propagating `extend` inheritance method.
|
|
|
|
media.controller.Region.extend = Backbone.Model.extend;
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
_.extend( media.controller.Region.prototype, {
|
|
|
|
mode: function( mode ) {
|
|
|
|
if ( ! mode )
|
|
|
|
return this._mode;
|
2012-11-08 15:15:09 +01:00
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
// Bail if we're trying to change to the current mode.
|
|
|
|
if ( mode === this._mode )
|
2012-11-08 15:15:09 +01:00
|
|
|
return this;
|
2012-11-07 21:14:41 +01:00
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
this.trigger('deactivate');
|
|
|
|
this._mode = mode;
|
|
|
|
this.render( mode );
|
|
|
|
this.trigger('activate');
|
|
|
|
return this;
|
2012-11-07 21:14:41 +01:00
|
|
|
},
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
render: function( mode ) {
|
|
|
|
// If no mode is provided, just re-render the current mode.
|
|
|
|
// If the provided mode isn't active, perform a full switch.
|
|
|
|
if ( mode && mode !== this._mode )
|
|
|
|
return this.mode( mode );
|
2012-11-07 21:14:41 +01:00
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
var set = { view: null },
|
|
|
|
view;
|
2012-11-07 21:14:41 +01:00
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
this.trigger( 'create', set );
|
|
|
|
view = set.view;
|
|
|
|
this.trigger( 'render', view );
|
|
|
|
if ( view )
|
|
|
|
this.set( view );
|
|
|
|
return this;
|
|
|
|
},
|
2012-11-07 21:14:41 +01:00
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
get: function() {
|
|
|
|
return this.view.views.first( this.selector );
|
|
|
|
},
|
2012-11-07 21:14:41 +01:00
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
set: function( views, options ) {
|
|
|
|
if ( options )
|
|
|
|
options.add = false;
|
|
|
|
return this.view.views.set( this.selector, views, options );
|
2012-11-07 21:14:41 +01:00
|
|
|
},
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
trigger: function( event ) {
|
|
|
|
var base;
|
|
|
|
if ( ! this._mode )
|
|
|
|
return;
|
|
|
|
|
|
|
|
var args = _.toArray( arguments );
|
|
|
|
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 21:14:41 +01: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 06:54:23 +02:00
|
|
|
/**
|
2012-10-29 00:29:17 +01:00
|
|
|
* wp.media.controller.StateMachine
|
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 06:54:23 +02:00
|
|
|
*/
|
2012-10-29 00:29:17 +01: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 21:14:41 +01:00
|
|
|
// Add events to the `StateMachine`.
|
|
|
|
_.extend( media.controller.StateMachine.prototype, Backbone.Events, {
|
|
|
|
|
2012-11-30 16:19:11 +01:00
|
|
|
// Fetch a state.
|
|
|
|
//
|
|
|
|
// If no `id` is provided, returns the active state.
|
2012-10-29 00:29:17 +01:00
|
|
|
//
|
|
|
|
// Implicitly creates states.
|
2012-11-30 16:19:11 +01:00
|
|
|
state: function( id ) {
|
2012-10-29 00:29:17 +01:00
|
|
|
// Ensure that the `states` collection exists so the `StateMachine`
|
|
|
|
// can be used as a mixin.
|
|
|
|
this.states = this.states || new Backbone.Collection();
|
|
|
|
|
2012-11-30 16:19:11 +01:00
|
|
|
// Default to the active state.
|
|
|
|
id = id || this._state;
|
|
|
|
|
|
|
|
if ( id && ! this.states.get( id ) )
|
2012-10-29 00:29:17 +01:00
|
|
|
this.states.add({ id: id });
|
|
|
|
return this.states.get( id );
|
|
|
|
},
|
|
|
|
|
2012-11-30 16:19:11 +01:00
|
|
|
// Sets the active state.
|
|
|
|
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 23:59:12 +01:00
|
|
|
|
2012-11-07 21:14:41 +01:00
|
|
|
// 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
|
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 23:59:12 +01:00
|
|
|
// that does not exist.
|
2012-11-07 21:14:41 +01:00
|
|
|
if ( ( previous && id === previous.id ) || ! this.states || ! this.states.get( id ) )
|
2012-12-03 03:38:10 +01:00
|
|
|
return this;
|
2012-10-29 00:29:17 +01:00
|
|
|
|
2012-11-07 21:14:41 +01: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 23:59:12 +01:00
|
|
|
previous.trigger('deactivate');
|
2012-11-30 16:19:11 +01:00
|
|
|
this._lastState = previous.id;
|
2012-11-07 21:14:41 +01: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 23:59:12 +01:00
|
|
|
|
|
|
|
this._state = id;
|
|
|
|
this.state().trigger('activate');
|
2012-12-03 03:38:10 +01:00
|
|
|
|
|
|
|
return this;
|
2012-11-07 21:14:41 +01:00
|
|
|
},
|
|
|
|
|
2012-11-30 16:19:11 +01:00
|
|
|
// Returns the previous active state.
|
|
|
|
//
|
|
|
|
// Call the `state()` method with no parameters to retrieve the current
|
|
|
|
// active state.
|
|
|
|
lastState: function() {
|
|
|
|
if ( this._lastState )
|
|
|
|
return this.state( this._lastState );
|
2012-10-29 00:29:17 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// Map methods from the `states` collection to the `StateMachine` itself.
|
|
|
|
_.each([ 'on', 'off', 'trigger' ], function( method ) {
|
|
|
|
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;
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
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 23:59:12 +01:00
|
|
|
|
|
|
|
// wp.media.controller.State
|
|
|
|
// ---------------------------
|
|
|
|
media.controller.State = Backbone.Model.extend({
|
2012-12-04 02:26:03 +01: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 23:59:12 +01:00
|
|
|
this.on( 'activate', this.activate, this );
|
2012-12-04 02:26:03 +01: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 23:59:12 +01:00
|
|
|
this.on( 'deactivate', this._deactivate, this );
|
|
|
|
this.on( 'deactivate', this.deactivate, this );
|
2012-11-07 21:14:41 +01:00
|
|
|
this.on( 'reset', this.reset, this );
|
2012-12-04 02:26:03 +01:00
|
|
|
this.on( 'ready', this._ready, this );
|
|
|
|
this.on( 'ready', this.ready, this );
|
|
|
|
|
|
|
|
this.on( 'change:menu', this._updateMenu, this );
|
|
|
|
|
|
|
|
Backbone.Model.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 23:59:12 +01:00
|
|
|
},
|
|
|
|
|
2012-12-04 02:26:03 +01: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 23:59:12 +01:00
|
|
|
activate: function() {},
|
2012-12-04 02:26:03 +01:00
|
|
|
deactivate: function() {},
|
|
|
|
reset: function() {},
|
|
|
|
|
|
|
|
_ready: function() {
|
|
|
|
this._updateMenu();
|
|
|
|
},
|
|
|
|
|
|
|
|
_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 23:59:12 +01:00
|
|
|
this.active = true;
|
2012-12-04 02:26:03 +01: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 23:59:12 +01:00
|
|
|
|
2012-12-04 02:26:03 +01: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 23:59:12 +01:00
|
|
|
},
|
|
|
|
|
2012-12-04 02:26:03 +01: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 23:59:12 +01:00
|
|
|
_deactivate: function() {
|
|
|
|
this.active = false;
|
2012-12-04 02:26:03 +01: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 23:59:12 +01:00
|
|
|
},
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
_title: function() {
|
|
|
|
this.frame.title.render( this.get('titleMode') || 'default' );
|
|
|
|
},
|
2012-11-07 21:14:41 +01:00
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
_renderTitle: function( view ) {
|
|
|
|
view.$el.text( this.get('title') || '' );
|
|
|
|
},
|
|
|
|
|
|
|
|
_router: function() {
|
|
|
|
var router = this.frame.router,
|
|
|
|
mode = this.get('router'),
|
|
|
|
view;
|
|
|
|
|
|
|
|
this.frame.$el.toggleClass( 'hide-router', ! mode );
|
|
|
|
if ( ! mode )
|
|
|
|
return;
|
|
|
|
|
|
|
|
this.frame.router.render( mode );
|
|
|
|
|
|
|
|
view = router.get();
|
|
|
|
if ( view.select )
|
|
|
|
view.select( this.frame.content.mode() );
|
|
|
|
},
|
|
|
|
|
|
|
|
_menu: function() {
|
2012-11-07 21:14:41 +01: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 23:59:12 +01:00
|
|
|
|
2012-11-07 21:14:41 +01: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 23:59:12 +01:00
|
|
|
return;
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
menu.mode( mode );
|
2012-11-07 21:14:41 +01:00
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
view = menu.get();
|
2012-11-07 21:14:41 +01:00
|
|
|
if ( view.select )
|
|
|
|
view.select( this.id );
|
2012-12-04 02:26:03 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
_updateMenu: function() {
|
|
|
|
var previous = this.previous('menu'),
|
|
|
|
menu = this.get('menu');
|
|
|
|
|
|
|
|
if ( previous )
|
|
|
|
this.frame.off( 'menu:render:' + previous, this._renderMenu, this );
|
|
|
|
|
|
|
|
if ( menu )
|
|
|
|
this.frame.on( 'menu:render:' + menu, this._renderMenu, this );
|
|
|
|
},
|
|
|
|
|
|
|
|
_renderMenu: function( view ) {
|
|
|
|
var menuItem = this.get('menuItem'),
|
|
|
|
title = this.get('title'),
|
|
|
|
priority = this.get('priority');
|
|
|
|
|
|
|
|
if ( ! menuItem && title ) {
|
|
|
|
menuItem = { text: title };
|
|
|
|
|
|
|
|
if ( priority )
|
|
|
|
menuItem.priority = priority;
|
|
|
|
}
|
|
|
|
|
|
|
|
if ( ! menuItem )
|
|
|
|
return;
|
|
|
|
|
|
|
|
view.set( this.id, menuItem );
|
2012-11-07 21:14:41 +01: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 23:59:12 +01:00
|
|
|
|
2012-11-22 07:30:25 +01:00
|
|
|
_.each(['toolbar','content'], function( region ) {
|
2012-12-04 02:26:03 +01:00
|
|
|
media.controller.State.prototype[ '_' + region ] = function() {
|
2012-11-07 21:14:41 +01:00
|
|
|
var mode = this.get( region );
|
|
|
|
if ( mode )
|
2012-12-04 02:26:03 +01:00
|
|
|
this.frame[ region ].render( mode );
|
2012-11-07 21:14:41 +01: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 23:59:12 +01:00
|
|
|
});
|
|
|
|
|
2012-10-29 00:29:17 +01:00
|
|
|
// wp.media.controller.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 23:59:12 +01: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 06:54:23 +02:00
|
|
|
defaults: {
|
2012-11-10 10:11:33 +01:00
|
|
|
id: 'library',
|
2012-12-04 02:26:03 +01:00
|
|
|
multiple: false, // false, 'add', 'reset'
|
2012-11-10 10:11:33 +01:00
|
|
|
describe: false,
|
2012-12-04 02:26:03 +01:00
|
|
|
toolbar: 'select',
|
2012-11-10 10:11:33 +01:00
|
|
|
sidebar: 'settings',
|
2012-12-04 02:26:03 +01:00
|
|
|
content: 'upload',
|
|
|
|
router: 'browse',
|
2012-11-20 14:49:35 +01:00
|
|
|
searchable: true,
|
2012-11-22 10:32:21 +01:00
|
|
|
filterable: false,
|
2012-12-04 02:26:03 +01: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.
|
|
|
|
syncLastSelection: 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 06:54:23 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function() {
|
2012-10-29 16:13:02 +01:00
|
|
|
if ( ! this.get('selection') ) {
|
|
|
|
this.set( 'selection', new media.model.Selection( null, {
|
|
|
|
multiple: this.get('multiple')
|
|
|
|
}) );
|
|
|
|
}
|
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 06:54:23 +02:00
|
|
|
|
2012-10-29 00:29:17 +01:00
|
|
|
if ( ! this.get('library') )
|
|
|
|
this.set( 'library', media.query() );
|
2012-09-11 23:13:07 +02:00
|
|
|
|
2012-10-29 19:05:03 +01:00
|
|
|
if ( ! this.get('edge') )
|
|
|
|
this.set( 'edge', 120 );
|
|
|
|
|
|
|
|
if ( ! this.get('gutter') )
|
2012-10-30 22:09:45 +01:00
|
|
|
this.set( 'gutter', 8 );
|
2012-10-29 19:05:03 +01:00
|
|
|
|
2012-11-22 07:30:25 +01:00
|
|
|
this.resetDisplays();
|
2012-10-29 00:29:17 +01:00
|
|
|
},
|
2012-09-26 23:40:02 +02:00
|
|
|
|
2012-10-29 00:29:17 +01:00
|
|
|
activate: function() {
|
2012-12-04 02:26:03 +01:00
|
|
|
if ( this.get('syncLastSelection') ) {
|
|
|
|
this.getLastSelection();
|
|
|
|
}
|
2012-11-06 02:19:39 +01:00
|
|
|
|
2012-11-09 02:23:20 +01:00
|
|
|
this._excludeStateLibrary();
|
|
|
|
this.buildComposite();
|
|
|
|
this.on( 'change:library change:exclude', this.buildComposite, this );
|
|
|
|
this.on( 'change:excludeState', this._excludeState, this );
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
wp.Uploader.queue.on( 'add', this.uploading, this );
|
2012-10-31 00:36:38 +01:00
|
|
|
|
2012-12-04 17:21:57 +01:00
|
|
|
this.get('selection').on( 'add remove reset', this.refreshContent, this );
|
2012-11-05 03:43:47 +01:00
|
|
|
|
2012-11-22 07:30:25 +01:00
|
|
|
this.on( 'insert', this._insertDisplaySettings, this );
|
2012-12-04 02:26:03 +01:00
|
|
|
|
|
|
|
if ( this.get('contentUserSetting') ) {
|
|
|
|
this.frame.on( 'content:activate', this.saveContentMode, this );
|
|
|
|
this.set( 'content', getUserSetting( 'libraryContent', this.get('content') ) );
|
|
|
|
}
|
2012-10-29 16:13:02 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
deactivate: function() {
|
2012-12-04 02:26:03 +01:00
|
|
|
this.frame.off( 'content:activate', this.saveContentMode, this );
|
|
|
|
|
2012-11-06 02:19:39 +01: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 06:57:12 +01:00
|
|
|
|
2012-11-21 09:17:45 +01:00
|
|
|
wp.Uploader.queue.off( null, null, this );
|
2012-11-12 06:57:12 +01:00
|
|
|
|
|
|
|
this.off( 'change:excludeState', this._excludeState, this );
|
|
|
|
this.off( 'change:library change:exclude', this.buildComposite, this );
|
|
|
|
|
|
|
|
this.destroyComposite();
|
2012-10-29 16:13:02 +01:00
|
|
|
},
|
|
|
|
|
2012-11-07 21:14:41 +01:00
|
|
|
reset: function() {
|
2012-12-03 06:32:25 +01:00
|
|
|
this.get('selection').reset();
|
2012-11-22 07:30:25 +01:00
|
|
|
this.resetDisplays();
|
2012-12-04 02:26:03 +01:00
|
|
|
this.refreshContent();
|
2012-11-05 03:43:47 +01:00
|
|
|
},
|
|
|
|
|
2012-11-22 07:30:25 +01:00
|
|
|
resetDisplays: function() {
|
|
|
|
this._displays = [];
|
|
|
|
this._defaultDisplaySettings = {
|
|
|
|
align: getUserSetting( 'align', 'none' ),
|
|
|
|
size: getUserSetting( 'imgsize', 'medium' ),
|
|
|
|
link: getUserSetting( 'urlbutton', 'post' )
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
display: function( attachment ) {
|
|
|
|
var displays = this._displays;
|
|
|
|
|
|
|
|
if ( ! displays[ attachment.cid ] )
|
|
|
|
displays[ attachment.cid ] = new Backbone.Model( this._defaultDisplaySettings );
|
|
|
|
|
|
|
|
return displays[ attachment.cid ];
|
|
|
|
},
|
|
|
|
|
|
|
|
_insertDisplaySettings: function() {
|
|
|
|
var selection = this.get('selection'),
|
|
|
|
display;
|
|
|
|
|
|
|
|
// If inserting one image, set those display properties as the
|
|
|
|
// default user setting.
|
|
|
|
if ( selection.length !== 1 )
|
|
|
|
return;
|
|
|
|
|
|
|
|
display = this.display( selection.first() ).toJSON();
|
|
|
|
|
|
|
|
setUserSetting( 'align', display.align );
|
|
|
|
setUserSetting( 'imgsize', display.size );
|
|
|
|
setUserSetting( 'urlbutton', display.link );
|
|
|
|
},
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
getLastSelection: function() {
|
|
|
|
var selection = this.get('selection'),
|
|
|
|
lastState = this.frame.lastState(),
|
|
|
|
lastSelection = lastState && lastState.get('selection'),
|
|
|
|
lastMultiple, thisMultiple;
|
|
|
|
|
|
|
|
if ( ! lastSelection )
|
|
|
|
return;
|
|
|
|
|
|
|
|
// We don't care about the method of multiple selection the
|
|
|
|
// selections use, just that they both support (or don't support)
|
|
|
|
// multiple selection.
|
|
|
|
lastMultiple = !! lastSelection.multiple;
|
|
|
|
thisMultiple = !! selection.multiple;
|
|
|
|
|
|
|
|
if ( lastMultiple !== thisMultiple )
|
|
|
|
return;
|
|
|
|
|
|
|
|
selection.reset( lastSelection.toArray() ).single( lastSelection.single() );
|
|
|
|
},
|
|
|
|
|
|
|
|
refreshContent: function() {
|
2012-11-15 03:36:06 +01:00
|
|
|
var selection = this.get('selection'),
|
2012-12-04 02:26:03 +01:00
|
|
|
frame = this.frame,
|
2012-12-04 06:18:21 +01:00
|
|
|
router = frame.router,
|
2012-12-04 02:26:03 +01:00
|
|
|
mode = frame.content.mode();
|
2012-11-15 03:36:06 +01:00
|
|
|
|
2012-12-04 06:18:21 +01:00
|
|
|
if ( this.active && ! selection.length && ! router.get( mode ) )
|
2012-12-04 02:26:03 +01:00
|
|
|
this.frame.content.render( this.get('content') );
|
|
|
|
},
|
|
|
|
|
|
|
|
uploading: function( attachment ) {
|
|
|
|
var content = this.frame.content;
|
|
|
|
|
|
|
|
// If the uploader was selected, navigate to the browser.
|
|
|
|
if ( 'upload' === content.mode() )
|
|
|
|
this.frame.content.mode('browse');
|
2012-11-15 03:36:06 +01:00
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
// If we're in a workflow that supports multiple attachments,
|
|
|
|
// automatically select any uploading attachments.
|
|
|
|
if ( this.get('multiple') )
|
|
|
|
this.get('selection').add( attachment );
|
2012-11-06 02:19:39 +01:00
|
|
|
},
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
saveContentMode: function() {
|
|
|
|
// Only track the browse router on library states.
|
|
|
|
if ( 'browse' !== this.get('router') )
|
|
|
|
return;
|
|
|
|
|
|
|
|
var mode = this.frame.content.mode(),
|
|
|
|
view = this.frame.router.get();
|
|
|
|
|
|
|
|
if ( view && view.get( mode ) )
|
|
|
|
setUserSetting( 'libraryContent', mode );
|
2012-09-11 23:13:07 +02:00
|
|
|
},
|
|
|
|
|
2012-11-09 02:23:20 +01:00
|
|
|
buildComposite: function() {
|
|
|
|
var original = this.get('_library'),
|
|
|
|
exclude = this.get('exclude'),
|
|
|
|
composite;
|
|
|
|
|
|
|
|
this.destroyComposite();
|
|
|
|
if ( ! this.get('exclude') )
|
|
|
|
return;
|
|
|
|
|
|
|
|
// Remember the state's original library.
|
|
|
|
if ( ! original )
|
|
|
|
this.set( '_library', original = this.get('library') );
|
|
|
|
|
|
|
|
// Create a composite library in its place.
|
2012-11-19 03:43:10 +01:00
|
|
|
composite = new media.model.Attachments( null, {
|
2012-11-09 02:23:20 +01:00
|
|
|
props: _.pick( original.props.toJSON(), 'order', 'orderby' )
|
|
|
|
});
|
|
|
|
|
|
|
|
// Accepts attachments that exist in the original library and
|
|
|
|
// that do not exist in the excluded library.
|
|
|
|
composite.validator = function( attachment ) {
|
|
|
|
return !! original.getByCid( attachment.cid ) && ! exclude.getByCid( attachment.cid );
|
|
|
|
};
|
|
|
|
|
2012-11-21 13:11:38 +01:00
|
|
|
composite.mirror( original ).observe( exclude );
|
2012-11-09 02:23:20 +01:00
|
|
|
|
|
|
|
this.set( 'library', composite );
|
|
|
|
},
|
|
|
|
|
|
|
|
destroyComposite: function() {
|
|
|
|
var composite = this.get('library'),
|
|
|
|
original = this.get('_library');
|
|
|
|
|
|
|
|
if ( ! original )
|
|
|
|
return;
|
|
|
|
|
|
|
|
composite.unobserve();
|
|
|
|
this.set( 'library', original );
|
|
|
|
this.unset('_library');
|
|
|
|
},
|
|
|
|
|
|
|
|
_excludeState: function() {
|
|
|
|
var current = this.get('excludeState'),
|
|
|
|
previous = this.previous('excludeState');
|
|
|
|
|
|
|
|
if ( previous )
|
2012-11-30 16:19:11 +01:00
|
|
|
this.frame.state( previous ).off( 'change:library', this._excludeStateLibrary, this );
|
2012-11-09 02:23:20 +01:00
|
|
|
|
|
|
|
if ( current )
|
2012-11-30 16:19:11 +01:00
|
|
|
this.frame.state( current ).on( 'change:library', this._excludeStateLibrary, this );
|
2012-11-09 02:23:20 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
_excludeStateLibrary: function() {
|
|
|
|
var current = this.get('excludeState');
|
|
|
|
|
|
|
|
if ( ! current )
|
|
|
|
return;
|
|
|
|
|
2012-11-30 16:19:11 +01:00
|
|
|
this.set( 'exclude', this.frame.state( current ).get('library') );
|
2012-10-29 00:29:17 +01:00
|
|
|
}
|
|
|
|
});
|
2012-09-11 23:13:07 +02:00
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
// wp.media.controller.GalleryEdit
|
|
|
|
// -------------------------------
|
|
|
|
media.controller.GalleryEdit = media.controller.Library.extend({
|
2012-10-29 00:29:17 +01:00
|
|
|
defaults: {
|
2012-11-07 21:14:41 +01:00
|
|
|
id: 'gallery-edit',
|
2012-10-29 16:13:02 +01:00
|
|
|
multiple: false,
|
2012-10-29 07:56:23 +01:00
|
|
|
describe: true,
|
2012-10-31 22:43:59 +01:00
|
|
|
edge: 199,
|
2012-11-07 21:14:41 +01:00
|
|
|
editing: false,
|
|
|
|
sortable: true,
|
2012-11-10 10:11:33 +01:00
|
|
|
searchable: false,
|
2012-11-30 07:01:47 +01:00
|
|
|
toolbar: 'gallery-edit',
|
2012-12-04 02:26:03 +01:00
|
|
|
content: 'browse',
|
|
|
|
title: l10n.editGalleryTitle,
|
|
|
|
priority: 60,
|
|
|
|
dragInfo: true
|
2012-10-29 00:29:17 +01:00
|
|
|
},
|
2012-09-11 23:13:07 +02:00
|
|
|
|
2012-11-07 21:14:41 +01:00
|
|
|
initialize: function() {
|
2012-11-09 13:09:15 +01:00
|
|
|
// If we haven't been provided a `library`, create a `Selection`.
|
|
|
|
if ( ! this.get('library') )
|
|
|
|
this.set( 'library', new media.model.Selection() );
|
|
|
|
|
2012-11-07 21:14:41 +01:00
|
|
|
// The single `Attachment` view to be used in the `Attachments` view.
|
|
|
|
if ( ! this.get('AttachmentView') )
|
2012-11-15 03:36:06 +01:00
|
|
|
this.set( 'AttachmentView', media.view.Attachment.EditLibrary );
|
2012-11-07 21:14:41 +01:00
|
|
|
media.controller.Library.prototype.initialize.apply( this, arguments );
|
2012-09-11 23:13:07 +02:00
|
|
|
},
|
|
|
|
|
2012-11-21 09:17:45 +01:00
|
|
|
activate: function() {
|
|
|
|
var library = this.get('library');
|
|
|
|
|
|
|
|
// Limit the library to images only.
|
|
|
|
library.props.set( 'type', 'image' );
|
|
|
|
|
|
|
|
// Watch for uploaded attachments.
|
|
|
|
this.get('library').observe( wp.Uploader.queue );
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
this.frame.on( 'content:render:browse', this.gallerySettings, this );
|
2012-11-22 07:30:25 +01:00
|
|
|
|
2012-11-21 09:17:45 +01:00
|
|
|
media.controller.Library.prototype.activate.apply( this, arguments );
|
|
|
|
},
|
|
|
|
|
|
|
|
deactivate: function() {
|
|
|
|
// Stop watching for uploaded attachments.
|
|
|
|
this.get('library').unobserve( wp.Uploader.queue );
|
2012-11-22 07:30:25 +01:00
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
this.frame.off( 'content:render:browse', this.gallerySettings, this );
|
|
|
|
|
2012-11-21 09:17:45 +01:00
|
|
|
media.controller.Library.prototype.deactivate.apply( this, arguments );
|
|
|
|
},
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
gallerySettings: function( browser ) {
|
|
|
|
var library = this.get('library');
|
2012-11-22 07:30:25 +01:00
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
if ( ! library || ! browser )
|
2012-11-22 07:30:25 +01:00
|
|
|
return;
|
|
|
|
|
|
|
|
library.gallery = library.gallery || new Backbone.Model();
|
|
|
|
|
2012-12-03 06:32:25 +01:00
|
|
|
browser.sidebar.set({
|
2012-11-22 07:30:25 +01:00
|
|
|
gallery: new media.view.Settings.Gallery({
|
|
|
|
controller: this,
|
|
|
|
model: library.gallery,
|
|
|
|
priority: 40
|
|
|
|
})
|
|
|
|
});
|
2012-12-03 06:32:25 +01:00
|
|
|
|
|
|
|
browser.toolbar.set( 'reverse', {
|
|
|
|
text: l10n.reverseOrder,
|
|
|
|
priority: 80,
|
|
|
|
|
|
|
|
click: function() {
|
|
|
|
library.reset( library.toArray().reverse() );
|
|
|
|
}
|
|
|
|
});
|
2012-10-29 00:29:17 +01:00
|
|
|
}
|
|
|
|
});
|
2012-09-11 23:13:07 +02:00
|
|
|
|
2012-12-03 03:38:10 +01:00
|
|
|
// wp.media.controller.FeaturedImage
|
|
|
|
// ---------------------------------
|
|
|
|
media.controller.FeaturedImage = media.controller.Library.extend({
|
|
|
|
defaults: _.defaults({
|
|
|
|
id: 'featured-image',
|
|
|
|
filterable: 'uploaded',
|
|
|
|
multiple: false,
|
|
|
|
menu: 'main',
|
2012-12-04 02:26:03 +01:00
|
|
|
toolbar: 'featured-image',
|
|
|
|
title: l10n.featuredImageTitle,
|
|
|
|
priority: 60
|
2012-12-03 03:38:10 +01:00
|
|
|
}, media.controller.Library.prototype.defaults ),
|
|
|
|
|
|
|
|
initialize: function() {
|
2012-12-03 08:04:34 +01:00
|
|
|
var library, comparator;
|
|
|
|
|
2012-12-03 03:38:10 +01:00
|
|
|
// If we haven't been provided a `library`, create a `Selection`.
|
|
|
|
if ( ! this.get('library') )
|
|
|
|
this.set( 'library', media.query({ type: 'image' }) );
|
|
|
|
|
|
|
|
media.controller.Library.prototype.initialize.apply( this, arguments );
|
2012-12-03 08:04:34 +01: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 ) {
|
|
|
|
var aInQuery = !! this.mirroring.getByCid( a.cid ),
|
|
|
|
bInQuery = !! this.mirroring.getByCid( 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') );
|
2012-12-03 03:38:10 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
activate: function() {
|
|
|
|
var selection = this.get('selection'),
|
2012-12-03 08:17:10 +01:00
|
|
|
id = media.view.settings.post.featuredImageId,
|
2012-12-03 03:38:10 +01:00
|
|
|
attachment;
|
|
|
|
|
|
|
|
if ( '' !== id && -1 !== id ) {
|
|
|
|
attachment = Attachment.get( id );
|
|
|
|
attachment.fetch();
|
|
|
|
}
|
|
|
|
|
|
|
|
selection.reset( attachment ? [ attachment ] : [] );
|
|
|
|
media.controller.Library.prototype.activate.apply( this, arguments );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-11-12 06:57:12 +01:00
|
|
|
|
|
|
|
// wp.media.controller.Embed
|
|
|
|
// -------------------------
|
|
|
|
media.controller.Embed = media.controller.State.extend({
|
|
|
|
defaults: {
|
|
|
|
id: 'embed',
|
|
|
|
url: '',
|
|
|
|
menu: 'main',
|
|
|
|
content: 'embed',
|
|
|
|
toolbar: 'main-embed',
|
2012-12-04 02:26:03 +01:00
|
|
|
type: 'link',
|
|
|
|
|
|
|
|
title: l10n.fromUrlTitle,
|
|
|
|
priority: 120
|
2012-11-12 06:57:12 +01:00
|
|
|
},
|
|
|
|
|
2012-11-13 04:33:41 +01:00
|
|
|
// The amount of time used when debouncing the scan.
|
|
|
|
sensitivity: 200,
|
|
|
|
|
2012-11-12 06:57:12 +01:00
|
|
|
initialize: function() {
|
2012-11-13 04:33:41 +01:00
|
|
|
this.debouncedScan = _.debounce( _.bind( this.scan, this ), this.sensitivity );
|
2012-12-04 02:26:03 +01:00
|
|
|
this.props = new Backbone.Model({ url: '' });
|
|
|
|
this.props.on( 'change:url', this.debouncedScan, this );
|
2012-12-04 18:45:24 +01:00
|
|
|
this.props.on( 'change:url', this.refresh, this );
|
2012-11-13 04:33:41 +01:00
|
|
|
this.on( 'scan', this.scanImage, this );
|
2012-11-12 06:57:12 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
scan: function() {
|
|
|
|
var attributes = { type: 'link' };
|
|
|
|
|
|
|
|
this.trigger( 'scan', attributes );
|
|
|
|
this.set( attributes );
|
|
|
|
},
|
|
|
|
|
2012-11-13 04:33:41 +01:00
|
|
|
scanImage: function( attributes ) {
|
|
|
|
var frame = this.frame,
|
|
|
|
state = this,
|
2012-12-04 02:26:03 +01:00
|
|
|
url = this.props.get('url'),
|
2012-11-13 04:33:41 +01:00
|
|
|
image = new Image();
|
|
|
|
|
|
|
|
image.onload = function() {
|
2012-12-04 02:26:03 +01:00
|
|
|
if ( state !== frame.state() || url !== state.props.get('url') )
|
2012-11-21 15:32:52 +01:00
|
|
|
return;
|
|
|
|
|
|
|
|
state.set({
|
|
|
|
type: 'image',
|
|
|
|
width: image.width,
|
|
|
|
height: image.height
|
|
|
|
});
|
2012-11-13 04:33:41 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
image.src = url;
|
|
|
|
},
|
|
|
|
|
2012-12-04 18:45:24 +01:00
|
|
|
refresh: function() {
|
|
|
|
this.frame.toolbar.get().refresh();
|
|
|
|
},
|
|
|
|
|
2012-11-12 06:57:12 +01:00
|
|
|
reset: function() {
|
2012-12-04 02:26:03 +01:00
|
|
|
this.props = new Backbone.Model({ url: '' });
|
2012-12-03 03:38:10 +01:00
|
|
|
|
2012-12-04 18:45:24 +01:00
|
|
|
if ( this.active )
|
|
|
|
this.refresh();
|
2012-11-12 06:57:12 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-11-07 21:14:41 +01:00
|
|
|
/**
|
|
|
|
* ========================================================================
|
|
|
|
* VIEWS
|
|
|
|
* ========================================================================
|
|
|
|
*/
|
|
|
|
|
2012-11-19 01:36:47 +01:00
|
|
|
// wp.media.Views
|
|
|
|
// -------------
|
|
|
|
//
|
|
|
|
// A subview manager.
|
|
|
|
|
|
|
|
media.Views = function( view, views ) {
|
|
|
|
this.view = view;
|
|
|
|
this._views = _.isArray( views ) ? { '': views } : views || {};
|
|
|
|
};
|
|
|
|
|
|
|
|
media.Views.extend = Backbone.Model.extend;
|
|
|
|
|
|
|
|
_.extend( media.Views.prototype, {
|
2012-11-19 11:40:49 +01:00
|
|
|
// ### Fetch all of the subviews
|
|
|
|
//
|
|
|
|
// Returns an array of all subviews.
|
2012-11-19 07:02:00 +01:00
|
|
|
all: function() {
|
|
|
|
return _.flatten( this._views );
|
|
|
|
},
|
|
|
|
|
2012-11-19 11:40:49 +01:00
|
|
|
// ### Get a selector's subviews
|
|
|
|
//
|
|
|
|
// Fetches all subviews that match a given `selector`.
|
|
|
|
//
|
|
|
|
// If no `selector` is provided, it will grab all subviews attached
|
|
|
|
// to the view's root.
|
2012-11-19 01:36:47 +01:00
|
|
|
get: function( selector ) {
|
|
|
|
selector = selector || '';
|
|
|
|
return this._views[ selector ];
|
|
|
|
},
|
|
|
|
|
2012-11-19 11:41:24 +01:00
|
|
|
// ### Get a selector's first subview
|
|
|
|
//
|
|
|
|
// Fetches the first subview that matches a given `selector`.
|
|
|
|
//
|
|
|
|
// If no `selector` is provided, it will grab the first subview
|
|
|
|
// attached to the view's root.
|
|
|
|
//
|
|
|
|
// Useful when a selector only has one subview at a time.
|
|
|
|
first: function( selector ) {
|
|
|
|
var views = this.get( selector );
|
|
|
|
return views && views.length ? views[0] : null;
|
|
|
|
},
|
|
|
|
|
2012-11-19 11:40:49 +01:00
|
|
|
// ### Register subview(s)
|
|
|
|
//
|
|
|
|
// Registers any number of `views` to a `selector`.
|
|
|
|
//
|
|
|
|
// When no `selector` is provided, the root selector (the empty string)
|
|
|
|
// is used. `views` accepts a `Backbone.View` instance or an array of
|
|
|
|
// `Backbone.View` instances.
|
|
|
|
//
|
2012-11-19 13:11:16 +01:00
|
|
|
// ---
|
2012-11-19 11:40:49 +01:00
|
|
|
//
|
|
|
|
// Accepts an `options` object, which has a significant effect on the
|
2012-11-19 13:11:16 +01:00
|
|
|
// resulting behavior.
|
|
|
|
//
|
|
|
|
// `options.silent` – *boolean, `false`*
|
|
|
|
// > If `options.silent` is true, no DOM modifications will be made.
|
|
|
|
//
|
|
|
|
// `options.add` – *boolean, `false`*
|
|
|
|
// > Use `Views.add()` as a shortcut for setting `options.add` to true.
|
|
|
|
//
|
|
|
|
// > By default, the provided `views` will replace
|
2012-11-19 11:40:49 +01:00
|
|
|
// any existing views associated with the selector. If `options.add`
|
2012-11-19 13:11:16 +01:00
|
|
|
// is true, the provided `views` will be added to the existing views.
|
|
|
|
//
|
|
|
|
// `options.at` – *integer, `undefined`*
|
|
|
|
// > When adding, to insert `views` at a specific index, use
|
|
|
|
// `options.at`. By default, `views` are added to the end of the array.
|
2012-11-19 01:36:47 +01:00
|
|
|
set: function( selector, views, options ) {
|
2012-11-20 01:53:02 +01:00
|
|
|
var existing, next;
|
2012-11-19 01:36:47 +01:00
|
|
|
|
|
|
|
if ( ! _.isString( selector ) ) {
|
|
|
|
options = views;
|
|
|
|
views = selector;
|
|
|
|
selector = '';
|
|
|
|
}
|
|
|
|
|
2012-11-19 13:11:16 +01:00
|
|
|
options = options || {};
|
2012-11-19 01:36:47 +01:00
|
|
|
views = _.isArray( views ) ? views : [ views ];
|
|
|
|
existing = this.get( selector );
|
2012-11-19 05:41:57 +01:00
|
|
|
next = views;
|
2012-11-19 01:36:47 +01:00
|
|
|
|
2012-11-19 05:41:57 +01:00
|
|
|
if ( existing ) {
|
2012-11-19 13:11:16 +01:00
|
|
|
if ( options.add ) {
|
2012-11-22 01:41:39 +01:00
|
|
|
if ( _.isUndefined( options.at ) ) {
|
2012-11-19 05:41:57 +01:00
|
|
|
next = existing.concat( views );
|
2012-11-22 01:41:39 +01:00
|
|
|
} else {
|
|
|
|
next = existing;
|
|
|
|
next.splice.apply( next, [ options.at, 0 ].concat( views ) );
|
|
|
|
}
|
2012-11-19 05:41:57 +01:00
|
|
|
} else {
|
2012-11-19 07:02:00 +01:00
|
|
|
_.each( next, function( view ) {
|
|
|
|
view.__detach = true;
|
|
|
|
});
|
|
|
|
|
|
|
|
_.each( existing, function( view ) {
|
|
|
|
if ( view.__detach )
|
|
|
|
view.$el.detach();
|
|
|
|
else
|
|
|
|
view.dispose();
|
|
|
|
});
|
|
|
|
|
|
|
|
_.each( next, function( view ) {
|
|
|
|
delete view.__detach;
|
|
|
|
});
|
2012-11-19 05:41:57 +01:00
|
|
|
}
|
2012-11-19 01:36:47 +01:00
|
|
|
}
|
|
|
|
|
2012-11-19 05:41:57 +01:00
|
|
|
this._views[ selector ] = next;
|
2012-11-19 01:36:47 +01:00
|
|
|
|
|
|
|
_.each( views, function( subview ) {
|
2012-11-19 01:54:18 +01:00
|
|
|
var constructor = subview.Views || media.Views,
|
|
|
|
subviews = subview.views = subview.views || new constructor( subview );
|
2012-11-19 01:36:47 +01:00
|
|
|
subviews.parent = this.view;
|
|
|
|
subviews.selector = selector;
|
|
|
|
}, this );
|
|
|
|
|
2012-11-20 01:53:02 +01:00
|
|
|
if ( ! options.silent )
|
|
|
|
this._attach( selector, views, _.extend({ ready: this._isReady() }, options ) );
|
2012-11-19 13:11:16 +01:00
|
|
|
|
2012-11-19 01:36:47 +01:00
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
2012-11-19 11:40:49 +01:00
|
|
|
// ### Add subview(s) to existing subviews
|
|
|
|
//
|
|
|
|
// An alias to `Views.set()`, which defaults `options.add` to true.
|
|
|
|
//
|
|
|
|
// Adds any number of `views` to a `selector`.
|
|
|
|
//
|
|
|
|
// When no `selector` is provided, the root selector (the empty string)
|
|
|
|
// is used. `views` accepts a `Backbone.View` instance or an array of
|
|
|
|
// `Backbone.View` instances.
|
|
|
|
//
|
|
|
|
// Use `Views.set()` when setting `options.add` to `false`.
|
|
|
|
//
|
|
|
|
// Accepts an `options` object. By default, provided `views` will be
|
|
|
|
// inserted at the end of the array of existing views. To insert
|
2012-11-19 13:11:16 +01:00
|
|
|
// `views` at a specific index, use `options.at`. If `options.silent`
|
|
|
|
// is true, no DOM modifications will be made.
|
|
|
|
//
|
|
|
|
// For more information on the `options` object, see `Views.set()`.
|
2012-11-19 05:41:57 +01:00
|
|
|
add: function( selector, views, options ) {
|
2012-11-22 01:41:39 +01:00
|
|
|
if ( ! _.isString( selector ) ) {
|
|
|
|
options = views;
|
|
|
|
views = selector;
|
|
|
|
selector = '';
|
|
|
|
}
|
|
|
|
|
2012-11-19 05:41:57 +01:00
|
|
|
return this.set( selector, views, _.extend({ add: true }, options ) );
|
2012-11-19 01:36:47 +01:00
|
|
|
},
|
|
|
|
|
2012-11-19 11:40:49 +01:00
|
|
|
// ### Stop tracking subviews
|
|
|
|
//
|
|
|
|
// Stops tracking `views` registered to a `selector`. If no `views` are
|
2012-11-19 13:11:16 +01:00
|
|
|
// set, then all of the `selector`'s subviews will be unregistered and
|
|
|
|
// disposed.
|
|
|
|
//
|
|
|
|
// Accepts an `options` object. If `options.silent` is set, `dispose`
|
|
|
|
// will *not* be triggered on the unregistered views.
|
|
|
|
unset: function( selector, views, options ) {
|
2012-11-19 01:36:47 +01:00
|
|
|
var existing;
|
|
|
|
|
|
|
|
if ( ! _.isString( selector ) ) {
|
2012-11-19 13:11:16 +01:00
|
|
|
options = views;
|
2012-11-19 01:36:47 +01:00
|
|
|
views = selector;
|
|
|
|
selector = '';
|
|
|
|
}
|
|
|
|
|
2012-11-28 03:03:31 +01:00
|
|
|
views = views || [];
|
|
|
|
|
2012-11-19 07:02:00 +01:00
|
|
|
if ( existing = this.get( selector ) ) {
|
|
|
|
views = _.isArray( views ) ? views : [ views ];
|
|
|
|
this._views[ selector ] = views.length ? _.difference( existing, views ) : [];
|
|
|
|
}
|
2012-11-19 01:36:47 +01:00
|
|
|
|
2012-11-19 13:11:16 +01:00
|
|
|
if ( ! options || ! options.silent )
|
2012-11-28 03:03:31 +01:00
|
|
|
_.invoke( views, 'dispose' );
|
2012-11-19 13:11:16 +01:00
|
|
|
|
2012-11-19 07:02:00 +01:00
|
|
|
return this;
|
|
|
|
},
|
2012-11-19 01:36:47 +01:00
|
|
|
|
2012-11-19 11:40:49 +01:00
|
|
|
// ### Detach all subviews
|
|
|
|
//
|
|
|
|
// Detaches all subviews from the DOM.
|
|
|
|
//
|
|
|
|
// Helps to preserve all subview events when re-rendering the master
|
|
|
|
// view. Used in conjunction with `Views.render()`.
|
2012-11-19 07:02:00 +01:00
|
|
|
detach: function() {
|
|
|
|
$( _.pluck( this.all(), 'el' ) ).detach();
|
2012-11-19 01:36:47 +01:00
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
2012-11-19 11:40:49 +01:00
|
|
|
// ### Render all subviews
|
|
|
|
//
|
|
|
|
// Renders all subviews. Used in conjunction with `Views.detach()`.
|
2012-11-19 01:36:47 +01:00
|
|
|
render: function() {
|
2012-11-20 01:53:02 +01:00
|
|
|
var options = {
|
|
|
|
ready: this._isReady()
|
|
|
|
};
|
2012-11-19 01:36:47 +01:00
|
|
|
|
|
|
|
_.each( this._views, function( views, selector ) {
|
2012-11-20 01:53:02 +01:00
|
|
|
this._attach( selector, views, options );
|
2012-11-19 01:36:47 +01:00
|
|
|
}, this );
|
|
|
|
|
2012-11-19 23:48:11 +01:00
|
|
|
this.rendered = true;
|
2012-11-19 01:36:47 +01:00
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
2012-11-19 11:40:49 +01:00
|
|
|
// ### Dispose all subviews
|
|
|
|
//
|
2012-11-19 13:11:16 +01:00
|
|
|
// Triggers the `dispose()` method on all subviews. Detaches the master
|
|
|
|
// view from its parent. Resets the internals of the views manager.
|
|
|
|
//
|
|
|
|
// Accepts an `options` object. If `options.silent` is set, `unset`
|
|
|
|
// will *not* be triggered on the master view's parent.
|
|
|
|
dispose: function( options ) {
|
|
|
|
if ( ! options || ! options.silent ) {
|
|
|
|
if ( this.parent && this.parent.views )
|
|
|
|
this.parent.views.unset( this.selector, this.view, { silent: true });
|
|
|
|
delete this.parent;
|
|
|
|
delete this.selector;
|
|
|
|
}
|
2012-11-19 01:36:47 +01:00
|
|
|
|
2012-11-19 07:02:00 +01:00
|
|
|
_.invoke( this.all(), 'dispose' );
|
2012-11-19 01:36:47 +01:00
|
|
|
this._views = [];
|
2012-11-19 07:02:00 +01:00
|
|
|
return this;
|
2012-11-19 01:36:47 +01:00
|
|
|
},
|
|
|
|
|
2012-11-19 11:40:49 +01:00
|
|
|
// ### Replace a selector's subviews
|
|
|
|
//
|
|
|
|
// By default, sets the `$target` selector's html to the subview `els`.
|
|
|
|
//
|
|
|
|
// Can be overridden in subclasses.
|
2012-11-19 01:36:47 +01:00
|
|
|
replace: function( $target, els ) {
|
|
|
|
$target.html( els );
|
2012-11-19 01:54:18 +01:00
|
|
|
return this;
|
2012-11-19 01:36:47 +01:00
|
|
|
},
|
|
|
|
|
2012-11-19 11:40:49 +01:00
|
|
|
// ### Insert subviews into a selector
|
|
|
|
//
|
|
|
|
// By default, appends the subview `els` to the end of the `$target`
|
|
|
|
// selector. If `options.at` is set, inserts the subview `els` at the
|
|
|
|
// provided index.
|
|
|
|
//
|
|
|
|
// Can be overridden in subclasses.
|
2012-11-19 07:02:00 +01:00
|
|
|
insert: function( $target, els, options ) {
|
2012-11-19 05:41:57 +01:00
|
|
|
var at = options && options.at,
|
|
|
|
$children;
|
|
|
|
|
|
|
|
if ( _.isNumber( at ) && ($children = $target.children()).length > at )
|
|
|
|
$children.eq( at ).before( els );
|
|
|
|
else
|
|
|
|
$target.append( els );
|
|
|
|
|
2012-11-19 01:54:18 +01:00
|
|
|
return this;
|
2012-11-19 23:48:11 +01:00
|
|
|
},
|
|
|
|
|
2012-11-20 01:53:02 +01:00
|
|
|
// ### Trigger the ready event
|
|
|
|
//
|
|
|
|
// **Only use this method if you know what you're doing.**
|
|
|
|
// For performance reasons, this method does not check if the view is
|
|
|
|
// actually attached to the DOM. It's taking your word for it.
|
|
|
|
//
|
|
|
|
// Fires the ready event on the current view and all attached subviews.
|
|
|
|
ready: function() {
|
|
|
|
this.view.trigger('ready');
|
2012-11-19 23:48:11 +01:00
|
|
|
|
2012-11-20 01:53:02 +01:00
|
|
|
// Find all attached subviews, and call ready on them.
|
|
|
|
_.chain( this.all() ).map( function( view ) {
|
|
|
|
return view.views;
|
|
|
|
}).flatten().where({ attached: true }).invoke('ready');
|
|
|
|
},
|
|
|
|
|
|
|
|
// #### Internal. Attaches a series of views to a selector.
|
|
|
|
//
|
|
|
|
// Checks to see if a matching selector exists, renders the views,
|
|
|
|
// performs the proper DOM operation, and then checks if the view is
|
|
|
|
// attached to the document.
|
|
|
|
_attach: function( selector, views, options ) {
|
|
|
|
var $selector = selector ? this.view.$( selector ) : this.view.$el,
|
|
|
|
managers;
|
|
|
|
|
|
|
|
// Check if we found a location to attach the views.
|
|
|
|
if ( ! $selector.length )
|
|
|
|
return this;
|
|
|
|
|
|
|
|
managers = _.chain( views ).pluck('views').flatten().value();
|
|
|
|
|
|
|
|
// Render the views if necessary.
|
|
|
|
_.each( managers, function( manager ) {
|
|
|
|
if ( manager.rendered )
|
|
|
|
return;
|
|
|
|
|
|
|
|
manager.view.render();
|
|
|
|
manager.rendered = true;
|
|
|
|
}, this );
|
2012-11-19 23:48:11 +01:00
|
|
|
|
2012-11-20 01:53:02 +01:00
|
|
|
// Insert or replace the views.
|
|
|
|
this[ options.add ? 'insert' : 'replace' ]( $selector, _.pluck( views, 'el' ), options );
|
|
|
|
|
|
|
|
// Set attached and trigger ready if the current view is already
|
|
|
|
// attached to the DOM.
|
|
|
|
_.each( managers, function( manager ) {
|
|
|
|
manager.attached = true;
|
|
|
|
|
|
|
|
if ( options.ready )
|
|
|
|
manager.ready();
|
|
|
|
}, this );
|
|
|
|
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
// #### Internal. Checks if the current view is in the DOM.
|
|
|
|
_isReady: function() {
|
|
|
|
var node = this.view.el;
|
|
|
|
while ( node ) {
|
|
|
|
if ( node === document.body )
|
|
|
|
return true;
|
|
|
|
node = node.parentNode;
|
|
|
|
}
|
|
|
|
|
|
|
|
return false;
|
2012-11-19 01:36:47 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// wp.media.View
|
|
|
|
// -------------
|
|
|
|
//
|
|
|
|
// The base view class.
|
|
|
|
media.View = Backbone.View.extend({
|
2012-11-19 01:54:18 +01:00
|
|
|
// The constructor for the `Views` manager.
|
|
|
|
Views: media.Views,
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
constructor: function( options ) {
|
2012-11-19 01:54:18 +01:00
|
|
|
this.views = new this.Views( this, this.views );
|
2012-11-20 01:53:02 +01:00
|
|
|
this.on( 'ready', this.ready, this );
|
2012-12-04 02:26:03 +01:00
|
|
|
|
|
|
|
if ( options && options.controller )
|
|
|
|
this.controller = options.controller;
|
|
|
|
|
2012-11-19 01:36:47 +01:00
|
|
|
Backbone.View.apply( this, arguments );
|
|
|
|
},
|
|
|
|
|
|
|
|
dispose: function() {
|
|
|
|
// Undelegating events, removing events from the model, and
|
|
|
|
// removing events from the controller mirror the code for
|
|
|
|
// `Backbone.View.dispose` in Backbone master.
|
|
|
|
this.undelegateEvents();
|
|
|
|
|
|
|
|
if ( this.model && this.model.off )
|
|
|
|
this.model.off( null, null, this );
|
|
|
|
|
|
|
|
if ( this.collection && this.collection.off )
|
|
|
|
this.collection.off( null, null, this );
|
|
|
|
|
2012-11-21 21:34:46 +01:00
|
|
|
// Unbind controller events.
|
|
|
|
if ( this.controller && this.controller.off )
|
|
|
|
this.controller.off( null, null, this );
|
|
|
|
|
2012-11-19 01:36:47 +01:00
|
|
|
// Recursively dispose child views.
|
|
|
|
if ( this.views )
|
|
|
|
this.views.dispose();
|
|
|
|
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
remove: function() {
|
|
|
|
this.dispose();
|
|
|
|
return Backbone.View.prototype.remove.apply( this, arguments );
|
2012-11-19 07:02:00 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
var options;
|
|
|
|
|
2012-11-28 03:03:31 +01:00
|
|
|
if ( this.prepare )
|
|
|
|
options = this.prepare();
|
|
|
|
|
2012-11-19 07:02:00 +01:00
|
|
|
this.views.detach();
|
|
|
|
|
|
|
|
if ( this.template ) {
|
2012-11-28 03:03:31 +01:00
|
|
|
options = options || {};
|
2012-11-19 07:02:00 +01:00
|
|
|
this.trigger( 'prepare', options );
|
|
|
|
this.$el.html( this.template( options ) );
|
|
|
|
}
|
|
|
|
|
|
|
|
this.views.render();
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
prepare: function() {
|
|
|
|
return this.options;
|
2012-11-20 01:53:02 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
ready: function() {}
|
2012-11-19 01:36:47 +01:00
|
|
|
});
|
|
|
|
|
2012-11-07 21:14:41 +01:00
|
|
|
/**
|
|
|
|
* wp.media.view.Frame
|
|
|
|
*/
|
2012-11-19 01:36:47 +01:00
|
|
|
media.view.Frame = media.View.extend({
|
2012-11-02 02:20:01 +01:00
|
|
|
initialize: function() {
|
2012-11-07 21:14:41 +01:00
|
|
|
this._createRegions();
|
|
|
|
this._createStates();
|
2012-11-02 02:20:01 +01:00
|
|
|
},
|
|
|
|
|
2012-11-07 21:14:41 +01: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-04 02:26:03 +01:00
|
|
|
view: this,
|
|
|
|
id: region,
|
|
|
|
selector: '.media-frame-' + region
|
2012-11-07 21:14:41 +01:00
|
|
|
});
|
|
|
|
}, this );
|
|
|
|
},
|
|
|
|
|
|
|
|
_createStates: function() {
|
|
|
|
// Create the default `states` collection.
|
2012-11-10 08:51:37 +01:00
|
|
|
this.states = new Backbone.Collection( null, {
|
|
|
|
model: media.controller.State
|
|
|
|
});
|
2012-11-07 21:14:41 +01:00
|
|
|
|
|
|
|
// Ensure states have a reference to the frame.
|
|
|
|
this.states.on( 'add', function( model ) {
|
|
|
|
model.frame = this;
|
2012-12-04 02:26:03 +01:00
|
|
|
model.trigger('ready');
|
2012-11-07 21:14:41 +01:00
|
|
|
}, this );
|
2012-11-02 02:20:01 +01:00
|
|
|
},
|
|
|
|
|
2012-11-07 21:14:41 +01:00
|
|
|
reset: function() {
|
|
|
|
this.states.invoke( 'trigger', 'reset' );
|
2012-11-09 10:47:12 +01:00
|
|
|
return this;
|
2012-11-07 21:14:41 +01:00
|
|
|
}
|
2012-11-02 02:20:01 +01:00
|
|
|
});
|
|
|
|
|
2012-11-07 21:14:41 +01:00
|
|
|
// Make the `Frame` a `StateMachine`.
|
|
|
|
_.extend( media.view.Frame.prototype, media.controller.StateMachine.prototype );
|
2012-09-11 23:13:07 +02:00
|
|
|
|
2012-10-29 00:29:17 +01:00
|
|
|
/**
|
2012-11-07 21:14:41 +01:00
|
|
|
* wp.media.view.MediaFrame
|
2012-10-29 00:29:17 +01:00
|
|
|
*/
|
2012-11-07 21:14:41 +01:00
|
|
|
media.view.MediaFrame = media.view.Frame.extend({
|
2012-10-29 00:29:17 +01:00
|
|
|
className: 'media-frame',
|
2012-11-19 01:36:47 +01:00
|
|
|
template: media.template('media-frame'),
|
2012-12-04 02:26:03 +01:00
|
|
|
regions: ['menu','title','content','toolbar','router'],
|
2012-09-11 23:13:07 +02:00
|
|
|
|
2012-10-29 00:29:17 +01:00
|
|
|
initialize: function() {
|
2012-11-07 21:14:41 +01:00
|
|
|
media.view.Frame.prototype.initialize.apply( this, arguments );
|
|
|
|
|
2012-10-29 00:29:17 +01:00
|
|
|
_.defaults( this.options, {
|
2012-11-07 21:14:41 +01:00
|
|
|
title: '',
|
|
|
|
modal: true,
|
|
|
|
uploader: true
|
2012-10-29 00:29:17 +01:00
|
|
|
});
|
|
|
|
|
2012-11-30 14:40:59 +01:00
|
|
|
// Ensure core UI is enabled.
|
|
|
|
this.$el.addClass('wp-core-ui');
|
|
|
|
|
2012-11-07 21:14:41 +01:00
|
|
|
// Initialize modal container view.
|
|
|
|
if ( this.options.modal ) {
|
|
|
|
this.modal = new media.view.Modal({
|
|
|
|
controller: this,
|
|
|
|
title: this.options.title
|
|
|
|
});
|
2012-12-03 03:38:10 +01:00
|
|
|
|
|
|
|
this.modal.content( this );
|
2012-11-07 21:14:41 +01:00
|
|
|
}
|
|
|
|
|
2012-11-22 12:46:03 +01:00
|
|
|
// Force the uploader off if the upload limit has been exceeded or
|
|
|
|
// if the browser isn't supported.
|
|
|
|
if ( wp.Uploader.limitExceeded || ! wp.Uploader.browser.supported )
|
|
|
|
this.options.uploader = false;
|
|
|
|
|
2012-11-07 21:14:41 +01:00
|
|
|
// Initialize window-wide uploader.
|
|
|
|
if ( this.options.uploader ) {
|
|
|
|
this.uploader = new media.view.UploaderWindow({
|
2012-11-21 21:34:46 +01:00
|
|
|
controller: this,
|
2012-11-07 21:14:41 +01:00
|
|
|
uploader: {
|
2012-11-16 11:30:36 +01:00
|
|
|
dropzone: this.modal ? this.modal.$el : this.$el,
|
|
|
|
container: this.$el
|
2012-11-07 21:14:41 +01:00
|
|
|
}
|
|
|
|
});
|
2012-11-21 21:27:49 +01:00
|
|
|
this.views.set( '.media-frame-uploader', this.uploader );
|
2012-11-07 21:14:41 +01:00
|
|
|
}
|
2012-11-20 01:53:02 +01:00
|
|
|
|
|
|
|
this.on( 'attach', _.bind( this.views.ready, this.views ), this );
|
2012-12-04 02:26:03 +01:00
|
|
|
|
|
|
|
// Bind default title creation.
|
|
|
|
this.on( 'title:create:default', this.createTitle, this );
|
|
|
|
this.title.mode('default');
|
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 06:54:23 +02:00
|
|
|
},
|
|
|
|
|
2012-12-03 05:38:10 +01:00
|
|
|
render: function() {
|
|
|
|
// Activate the default state if no active state exists.
|
|
|
|
if ( ! this.state() && this.options.state )
|
|
|
|
this.setState( this.options.state );
|
|
|
|
|
|
|
|
return media.view.Frame.prototype.render.apply( this, arguments );
|
|
|
|
},
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
createTitle: function( title ) {
|
|
|
|
title.view = new media.View({
|
|
|
|
controller: this,
|
|
|
|
tagName: 'h1'
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
createMenu: function( menu ) {
|
|
|
|
menu.view = new media.view.Menu({
|
|
|
|
controller: this
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
createToolbar: function( toolbar ) {
|
2012-12-04 17:21:57 +01:00
|
|
|
toolbar.view = new media.view.Toolbar({
|
2012-12-04 02:26:03 +01:00
|
|
|
controller: this
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
createRouter: function( router ) {
|
|
|
|
router.view = new media.view.Router({
|
|
|
|
controller: this
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2012-11-10 08:51:37 +01:00
|
|
|
createIframeStates: function( options ) {
|
|
|
|
var settings = media.view.settings,
|
|
|
|
tabs = settings.tabs,
|
|
|
|
tabUrl = settings.tabUrl,
|
|
|
|
$postId;
|
|
|
|
|
|
|
|
if ( ! tabs || ! tabUrl )
|
|
|
|
return;
|
|
|
|
|
|
|
|
// Add the post ID to the tab URL if it exists.
|
|
|
|
$postId = $('#post_ID');
|
|
|
|
if ( $postId.length )
|
|
|
|
tabUrl += '&post_id=' + $postId.val();
|
|
|
|
|
|
|
|
// Generate the tab states.
|
|
|
|
_.each( tabs, function( title, id ) {
|
2012-11-30 16:19:11 +01:00
|
|
|
var frame = this.state( 'iframe:' + id ).set( _.defaults({
|
2012-11-10 08:51:37 +01:00
|
|
|
tab: id,
|
|
|
|
src: tabUrl + '&tab=' + id,
|
|
|
|
title: title,
|
|
|
|
content: 'iframe',
|
|
|
|
menu: 'main'
|
|
|
|
}, options ) );
|
|
|
|
}, this );
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
this.on( 'content:create:iframe', this.iframeContent, this );
|
|
|
|
this.on( 'menu:render:main', this.iframeMenu, this );
|
2012-11-10 08:51:37 +01:00
|
|
|
this.on( 'open', this.hijackThickbox, this );
|
|
|
|
this.on( 'close', this.restoreThickbox, this );
|
|
|
|
},
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
iframeContent: function( content ) {
|
2012-11-22 07:30:25 +01:00
|
|
|
this.$el.addClass('hide-toolbar');
|
2012-12-04 02:26:03 +01:00
|
|
|
content.view = new media.view.Iframe({
|
2012-11-10 08:51:37 +01:00
|
|
|
controller: this
|
2012-12-04 02:26:03 +01:00
|
|
|
});
|
2012-11-10 08:51:37 +01:00
|
|
|
},
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
iframeMenu: function( view ) {
|
2012-11-10 08:51:37 +01:00
|
|
|
var views = {};
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
if ( ! view )
|
|
|
|
return;
|
|
|
|
|
2012-11-10 08:51:37 +01:00
|
|
|
_.each( media.view.settings.tabs, function( title, id ) {
|
|
|
|
views[ 'iframe:' + id ] = {
|
2012-11-30 16:19:11 +01:00
|
|
|
text: this.state( 'iframe:' + id ).get('title'),
|
2012-11-10 08:51:37 +01:00
|
|
|
priority: 200
|
|
|
|
};
|
|
|
|
}, this );
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
view.set( views );
|
2012-11-10 08:51:37 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
hijackThickbox: function() {
|
|
|
|
var frame = this;
|
|
|
|
|
|
|
|
if ( ! window.tb_remove || this._tb_remove )
|
|
|
|
return;
|
|
|
|
|
|
|
|
this._tb_remove = window.tb_remove;
|
|
|
|
window.tb_remove = function() {
|
|
|
|
frame.close();
|
|
|
|
frame.reset();
|
2012-11-30 16:19:11 +01:00
|
|
|
frame.setState( frame.options.state );
|
2012-11-10 08:51:37 +01:00
|
|
|
frame._tb_remove.call( window );
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
restoreThickbox: function() {
|
|
|
|
if ( ! this._tb_remove )
|
|
|
|
return;
|
|
|
|
|
|
|
|
window.tb_remove = this._tb_remove;
|
|
|
|
delete this._tb_remove;
|
2012-11-07 21:14:41 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// Map some of the modal's methods to the frame.
|
2012-12-03 03:38:10 +01:00
|
|
|
_.each(['open','close','attach','detach','escape'], function( method ) {
|
2012-11-07 21:14:41 +01:00
|
|
|
media.view.MediaFrame.prototype[ method ] = function( view ) {
|
|
|
|
if ( this.modal )
|
|
|
|
this.modal[ method ].apply( this.modal, arguments );
|
|
|
|
return this;
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
|
|
|
/**
|
2012-11-09 10:47:12 +01:00
|
|
|
* wp.media.view.MediaFrame.Select
|
2012-11-07 21:14:41 +01:00
|
|
|
*/
|
2012-11-09 10:47:12 +01:00
|
|
|
media.view.MediaFrame.Select = media.view.MediaFrame.extend({
|
2012-11-07 21:14:41 +01:00
|
|
|
initialize: function() {
|
|
|
|
media.view.MediaFrame.prototype.initialize.apply( this, arguments );
|
|
|
|
|
|
|
|
_.defaults( this.options, {
|
|
|
|
selection: [],
|
|
|
|
library: {},
|
2012-12-04 17:21:57 +01:00
|
|
|
multiple: false,
|
|
|
|
state: 'library'
|
2012-11-07 21:14:41 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
this.createSelection();
|
|
|
|
this.createStates();
|
2012-11-09 03:11:37 +01:00
|
|
|
this.bindHandlers();
|
2012-11-07 21:14:41 +01:00
|
|
|
},
|
|
|
|
|
2012-11-09 10:47:12 +01:00
|
|
|
createSelection: function() {
|
|
|
|
var controller = this,
|
|
|
|
selection = this.options.selection;
|
|
|
|
|
|
|
|
if ( ! (selection instanceof media.model.Selection) ) {
|
|
|
|
this.options.selection = new media.model.Selection( selection, {
|
|
|
|
multiple: this.options.multiple
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
createStates: function() {
|
2012-11-21 19:29:53 +01:00
|
|
|
var options = this.options;
|
2012-11-09 10:47:12 +01:00
|
|
|
|
|
|
|
// Add the default states.
|
|
|
|
this.states.add([
|
|
|
|
// Main states.
|
2012-11-21 20:21:08 +01:00
|
|
|
new media.controller.Library({
|
2012-11-09 10:47:12 +01:00
|
|
|
selection: options.selection,
|
2012-11-21 19:29:53 +01:00
|
|
|
library: media.query( options.library ),
|
2012-12-04 02:26:03 +01:00
|
|
|
multiple: options.multiple,
|
2012-11-21 19:29:53 +01:00
|
|
|
menu: 'main',
|
2012-12-04 02:26:03 +01:00
|
|
|
title: options.title,
|
|
|
|
priority: 20
|
2012-11-21 19:29:53 +01:00
|
|
|
})
|
2012-11-09 10:47:12 +01:00
|
|
|
]);
|
|
|
|
},
|
|
|
|
|
2012-11-07 21:14:41 +01:00
|
|
|
bindHandlers: function() {
|
2012-12-04 02:26:03 +01:00
|
|
|
this.on( 'menu:create:main', this.createMenu, this );
|
|
|
|
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 10:47:12 +01:00
|
|
|
},
|
2012-11-07 21:14:41 +01:00
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
// Routers
|
|
|
|
browseRouter: function( view ) {
|
|
|
|
view.set({
|
|
|
|
upload: {
|
|
|
|
text: l10n.uploadFilesTitle,
|
|
|
|
priority: 20
|
|
|
|
},
|
|
|
|
browse: {
|
|
|
|
text: l10n.mediaLibraryTitle,
|
|
|
|
priority: 40
|
2012-11-09 10:47:12 +01:00
|
|
|
}
|
2012-12-04 02:26:03 +01:00
|
|
|
});
|
2012-11-09 10:47:12 +01:00
|
|
|
},
|
2012-11-07 21:14:41 +01:00
|
|
|
|
2012-11-09 10:47:12 +01:00
|
|
|
// Content
|
2012-12-04 02:26:03 +01:00
|
|
|
browseContent: function( content ) {
|
2012-11-09 10:47:12 +01:00
|
|
|
var state = this.state();
|
2012-11-08 15:15:09 +01:00
|
|
|
|
2012-11-30 07:01:47 +01:00
|
|
|
this.$el.removeClass('hide-toolbar');
|
|
|
|
|
2012-11-09 10:47:12 +01:00
|
|
|
// Browse our library of attachments.
|
2012-12-04 02:26:03 +01:00
|
|
|
content.view = new media.view.AttachmentsBrowser({
|
2012-11-09 10:47:12 +01:00
|
|
|
controller: this,
|
|
|
|
collection: state.get('library'),
|
2012-11-15 03:36:06 +01:00
|
|
|
selection: state.get('selection'),
|
2012-11-09 10:47:12 +01:00
|
|
|
model: state,
|
|
|
|
sortable: state.get('sortable'),
|
2012-11-10 10:11:33 +01:00
|
|
|
search: state.get('searchable'),
|
2012-11-20 14:49:35 +01:00
|
|
|
filters: state.get('filterable'),
|
2012-11-22 07:30:25 +01:00
|
|
|
display: state.get('displaySettings'),
|
2012-12-04 02:26:03 +01:00
|
|
|
dragInfo: state.get('dragInfo'),
|
2012-11-09 03:11:37 +01:00
|
|
|
|
2012-11-09 10:47:12 +01:00
|
|
|
AttachmentView: state.get('AttachmentView')
|
2012-12-04 02:26:03 +01:00
|
|
|
});
|
2012-11-09 10:47:12 +01:00
|
|
|
},
|
2012-11-09 03:11:37 +01:00
|
|
|
|
2012-11-09 10:47:12 +01:00
|
|
|
uploadContent: function() {
|
2012-12-04 02:26:03 +01:00
|
|
|
this.$el.removeClass('hide-toolbar');
|
|
|
|
this.content.set( new media.view.UploaderInline({
|
2012-11-09 10:47:12 +01:00
|
|
|
controller: this
|
2012-11-19 23:48:11 +01:00
|
|
|
}) );
|
2012-09-27 06:09:43 +02:00
|
|
|
},
|
|
|
|
|
2012-11-09 10:47:12 +01:00
|
|
|
// Toolbars
|
2012-12-04 02:26:03 +01:00
|
|
|
createSelectToolbar: function( toolbar, options ) {
|
2012-12-04 17:21:57 +01:00
|
|
|
options = options || this.options.button || {};
|
|
|
|
options.controller = this;
|
2012-11-09 10:47:12 +01:00
|
|
|
|
2012-12-04 17:21:57 +01:00
|
|
|
toolbar.view = new media.view.Toolbar.Select( options );
|
2012-11-09 10:47:12 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.view.MediaFrame.Post
|
|
|
|
*/
|
|
|
|
media.view.MediaFrame.Post = media.view.MediaFrame.Select.extend({
|
|
|
|
initialize: function() {
|
|
|
|
_.defaults( this.options, {
|
|
|
|
multiple: true,
|
2012-12-04 17:21:57 +01:00
|
|
|
editing: false,
|
|
|
|
state: 'insert'
|
2012-11-09 10:47:12 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
media.view.MediaFrame.Select.prototype.initialize.apply( this, arguments );
|
2012-11-10 08:51:37 +01:00
|
|
|
this.createIframeStates();
|
2012-10-29 00:29:17 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
createStates: function() {
|
2012-12-04 02:26:03 +01:00
|
|
|
var options = this.options,
|
|
|
|
selection = options.selection;
|
2012-11-09 02:44:02 +01:00
|
|
|
|
2012-10-29 00:29:17 +01:00
|
|
|
// Add the default states.
|
|
|
|
this.states.add([
|
2012-11-09 02:44:02 +01:00
|
|
|
// Main states.
|
2012-11-21 19:29:53 +01:00
|
|
|
new media.controller.Library({
|
2012-12-04 02:26:03 +01:00
|
|
|
id: 'insert',
|
|
|
|
title: l10n.insertMediaTitle,
|
|
|
|
priority: 20,
|
|
|
|
menu: 'main',
|
|
|
|
toolbar: 'main-insert',
|
|
|
|
filterable: 'all',
|
2012-11-20 14:49:35 +01:00
|
|
|
library: media.query( options.library ),
|
2012-12-04 02:26:03 +01:00
|
|
|
selection: selection,
|
|
|
|
multiple: options.multiple ? 'reset' : false,
|
2012-11-20 14:49:35 +01:00
|
|
|
editable: true,
|
2012-11-21 19:29:53 +01:00
|
|
|
|
2012-11-22 07:30:25 +01:00
|
|
|
// Show the attachment display settings.
|
|
|
|
displaySettings: true,
|
2012-11-21 19:29:53 +01:00
|
|
|
// Update user settings when users adjust the
|
|
|
|
// attachment display settings.
|
|
|
|
displayUserSettings: true
|
|
|
|
}),
|
2012-11-07 21:14:41 +01:00
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
new media.controller.Library({
|
|
|
|
id: 'gallery',
|
|
|
|
title: l10n.createGalleryTitle,
|
|
|
|
priority: 40,
|
|
|
|
menu: 'main',
|
|
|
|
toolbar: 'main-gallery',
|
|
|
|
filterable: 'uploaded',
|
|
|
|
multiple: 'add',
|
2012-12-04 19:23:47 +01:00
|
|
|
editable: false,
|
2012-12-04 02:26:03 +01:00
|
|
|
|
|
|
|
library: media.query( _.defaults({
|
|
|
|
type: 'image'
|
|
|
|
}, options.library ) ),
|
|
|
|
|
|
|
|
selection: new media.model.Selection( selection.models, {
|
|
|
|
multiple: 'add'
|
|
|
|
})
|
2012-11-21 19:29:53 +01:00
|
|
|
}),
|
2012-11-07 21:14:41 +01:00
|
|
|
|
2012-11-12 06:57:12 +01:00
|
|
|
// Embed states.
|
|
|
|
new media.controller.Embed(),
|
|
|
|
|
2012-11-09 02:44:02 +01:00
|
|
|
// Gallery states.
|
2012-12-04 02:26:03 +01:00
|
|
|
new media.controller.GalleryEdit({
|
2012-11-09 13:09:15 +01:00
|
|
|
library: options.selection,
|
2012-11-07 21:14:41 +01:00
|
|
|
editing: options.editing,
|
|
|
|
menu: 'gallery'
|
|
|
|
}),
|
|
|
|
|
2012-11-21 19:29:53 +01:00
|
|
|
new media.controller.Library({
|
|
|
|
id: 'gallery-library',
|
|
|
|
library: media.query({ type: 'image' }),
|
|
|
|
filterable: 'uploaded',
|
2012-12-04 02:26:03 +01:00
|
|
|
multiple: 'add',
|
2012-11-21 19:29:53 +01:00
|
|
|
menu: 'gallery',
|
|
|
|
toolbar: 'gallery-add',
|
2012-12-04 02:26:03 +01:00
|
|
|
excludeState: 'gallery-edit',
|
|
|
|
title: l10n.addToGalleryTitle,
|
|
|
|
priority: 100
|
2012-11-21 19:29:53 +01:00
|
|
|
})
|
2012-10-29 00:29:17 +01:00
|
|
|
]);
|
2012-12-03 03:38:10 +01:00
|
|
|
|
|
|
|
|
2012-12-03 08:17:10 +01:00
|
|
|
if ( media.view.settings.post.featuredImageId ) {
|
2012-12-03 03:38:10 +01:00
|
|
|
this.states.add( new media.controller.FeaturedImage({
|
|
|
|
controller: this,
|
|
|
|
menu: 'main'
|
|
|
|
}) );
|
|
|
|
}
|
2012-10-29 00:29:17 +01:00
|
|
|
},
|
|
|
|
|
2012-11-09 10:47:12 +01:00
|
|
|
bindHandlers: function() {
|
|
|
|
media.view.MediaFrame.Select.prototype.bindHandlers.apply( this, arguments );
|
2012-12-04 02:26:03 +01:00
|
|
|
this.on( 'menu:create:gallery', this.createMenu, this );
|
2012-12-04 17:21:57 +01:00
|
|
|
this.on( 'toolbar:create:main-insert', this.createToolbar, this );
|
|
|
|
this.on( 'toolbar:create:main-gallery', this.createToolbar, this );
|
|
|
|
this.on( 'toolbar:create:featured-image', this.featuredImageToolbar, this );
|
|
|
|
this.on( 'toolbar:create:main-embed', this.mainEmbedToolbar, this );
|
2012-11-09 10:47:12 +01:00
|
|
|
|
|
|
|
var handlers = {
|
|
|
|
menu: {
|
2012-12-04 02:26:03 +01:00
|
|
|
'main': 'mainMenu',
|
2012-11-15 03:36:06 +01:00
|
|
|
'gallery': 'galleryMenu'
|
2012-11-07 21:14:41 +01:00
|
|
|
},
|
2012-11-09 10:47:12 +01:00
|
|
|
|
|
|
|
content: {
|
2012-11-15 03:36:06 +01:00
|
|
|
'embed': 'embedContent',
|
|
|
|
'edit-selection': 'editSelectionContent'
|
2012-11-07 21:14:41 +01:00
|
|
|
},
|
2012-11-09 10:47:12 +01:00
|
|
|
|
|
|
|
toolbar: {
|
2012-12-04 02:26:03 +01:00
|
|
|
'main-insert': 'mainInsertToolbar',
|
|
|
|
'main-gallery': 'mainGalleryToolbar',
|
2012-11-09 10:47:12 +01:00
|
|
|
'gallery-edit': 'galleryEditToolbar',
|
|
|
|
'gallery-add': 'galleryAddToolbar'
|
2012-11-07 21:14:41 +01:00
|
|
|
}
|
2012-11-09 10:47:12 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
_.each( handlers, function( regionHandlers, region ) {
|
|
|
|
_.each( regionHandlers, function( callback, handler ) {
|
2012-12-04 02:26:03 +01:00
|
|
|
this.on( region + ':render:' + handler, this[ callback ], this );
|
2012-11-09 10:47:12 +01:00
|
|
|
}, this );
|
|
|
|
}, this );
|
|
|
|
},
|
|
|
|
|
|
|
|
// Menus
|
2012-12-04 02:26:03 +01:00
|
|
|
mainMenu: function( view ) {
|
|
|
|
view.set({
|
2012-12-03 03:38:10 +01:00
|
|
|
'library-separator': new media.View({
|
2012-11-09 10:47:12 +01:00
|
|
|
className: 'separator',
|
2012-12-03 03:38:10 +01:00
|
|
|
priority: 100
|
2012-12-04 02:26:03 +01:00
|
|
|
})
|
|
|
|
});
|
2012-11-07 21:14:41 +01:00
|
|
|
},
|
2012-10-29 00:29:17 +01:00
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
galleryMenu: function( view ) {
|
2012-11-30 16:19:11 +01:00
|
|
|
var lastState = this.lastState(),
|
|
|
|
previous = lastState && lastState.id,
|
2012-11-07 21:14:41 +01:00
|
|
|
frame = this;
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
view.set({
|
|
|
|
cancel: {
|
|
|
|
text: l10n.cancelGalleryTitle,
|
|
|
|
priority: 20,
|
|
|
|
click: function() {
|
|
|
|
if ( previous )
|
|
|
|
frame.setState( previous );
|
|
|
|
else
|
|
|
|
frame.close();
|
2012-10-29 00:29:17 +01:00
|
|
|
}
|
2012-12-04 02:26:03 +01:00
|
|
|
},
|
|
|
|
separateCancel: new media.View({
|
|
|
|
className: 'separator',
|
|
|
|
priority: 40
|
|
|
|
})
|
|
|
|
});
|
2012-11-07 21:14:41 +01:00
|
|
|
},
|
2012-10-29 00:29:17 +01:00
|
|
|
|
2012-11-07 21:14:41 +01:00
|
|
|
// Content
|
2012-11-12 06:57:12 +01:00
|
|
|
embedContent: function() {
|
|
|
|
var view = new media.view.Embed({
|
|
|
|
controller: this,
|
|
|
|
model: this.state()
|
|
|
|
}).render();
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
this.content.set( view );
|
2012-11-12 06:57:12 +01: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 23:59:12 +01:00
|
|
|
|
2012-11-15 03:36:06 +01: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-04 02:26:03 +01:00
|
|
|
dragInfo: true,
|
2012-11-15 03:36:06 +01: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-04 02:26:03 +01:00
|
|
|
this.content.set( view );
|
|
|
|
},
|
|
|
|
|
|
|
|
// Toolbars
|
2012-12-04 17:21:57 +01:00
|
|
|
selectionStatusToolbar: function( view ) {
|
|
|
|
var editable = this.state().get('editable');
|
|
|
|
|
|
|
|
view.set( 'selection', new media.view.Selection({
|
2012-12-04 02:26:03 +01:00
|
|
|
controller: this,
|
2012-12-04 17:21:57 +01: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-15 03:36:06 +01:00
|
|
|
},
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
mainInsertToolbar: function( view ) {
|
|
|
|
var controller = this;
|
2012-11-09 13:37:21 +01:00
|
|
|
|
2012-12-04 17:21:57 +01:00
|
|
|
this.selectionStatusToolbar( view );
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
view.set( 'insert', {
|
|
|
|
style: 'primary',
|
|
|
|
priority: 80,
|
|
|
|
text: l10n.insertIntoPost,
|
2012-12-04 17:21:57 +01:00
|
|
|
requires: { selection: true },
|
2012-11-12 06:57:12 +01:00
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
click: function() {
|
|
|
|
var state = controller.state(),
|
|
|
|
selection = state.get('selection');
|
2012-11-09 13:37:21 +01:00
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
controller.close();
|
|
|
|
state.trigger( 'insert', selection ).reset();
|
|
|
|
}
|
|
|
|
});
|
2012-11-08 15:15:09 +01:00
|
|
|
},
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
mainGalleryToolbar: function( view ) {
|
|
|
|
var controller = this;
|
|
|
|
|
2012-12-04 17:21:57 +01:00
|
|
|
this.selectionStatusToolbar( view );
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
view.set( 'gallery', {
|
|
|
|
style: 'primary',
|
|
|
|
text: l10n.createNewGallery,
|
|
|
|
priority: 60,
|
2012-12-04 17:21:57 +01:00
|
|
|
requires: { selection: true },
|
2012-12-04 02:26:03 +01: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 21:14:41 +01:00
|
|
|
},
|
|
|
|
|
2012-12-04 17:21:57 +01:00
|
|
|
featuredImageToolbar: function( toolbar ) {
|
|
|
|
this.createSelectToolbar( toolbar, {
|
|
|
|
text: l10n.setFeaturedImage,
|
|
|
|
state: this.options.state || 'upload'
|
|
|
|
});
|
2012-12-03 03:38:10 +01:00
|
|
|
},
|
|
|
|
|
2012-12-04 17:21:57 +01:00
|
|
|
mainEmbedToolbar: function( toolbar ) {
|
|
|
|
toolbar.view = new media.view.Toolbar.Embed({
|
2012-11-12 06:57:12 +01:00
|
|
|
controller: this
|
2012-12-04 17:21:57 +01:00
|
|
|
});
|
2012-11-12 06:57:12 +01:00
|
|
|
},
|
2012-11-09 02:44:02 +01:00
|
|
|
|
2012-11-07 21:14:41 +01:00
|
|
|
galleryEditToolbar: function() {
|
|
|
|
var editing = this.state().get('editing');
|
2012-12-04 02:26:03 +01:00
|
|
|
this.toolbar.set( new media.view.Toolbar({
|
2012-11-07 21:14:41 +01:00
|
|
|
controller: this,
|
|
|
|
items: {
|
|
|
|
insert: {
|
|
|
|
style: 'primary',
|
|
|
|
text: editing ? l10n.updateGallery : l10n.insertGallery,
|
|
|
|
priority: 80,
|
2012-12-04 17:21:57 +01:00
|
|
|
requires: { library: true },
|
2012-11-07 21:14:41 +01:00
|
|
|
|
|
|
|
click: function() {
|
|
|
|
var controller = this.controller,
|
|
|
|
state = controller.state();
|
|
|
|
|
|
|
|
controller.close();
|
|
|
|
state.trigger( 'update', state.get('library') );
|
|
|
|
|
|
|
|
controller.reset();
|
|
|
|
// @todo: Make the state activated dynamic (instead of hardcoded).
|
2012-11-30 16:19:11 +01:00
|
|
|
controller.setState('upload');
|
2012-11-07 21:14:41 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}) );
|
|
|
|
},
|
|
|
|
|
|
|
|
galleryAddToolbar: function() {
|
2012-12-04 02:26:03 +01:00
|
|
|
this.toolbar.set( new media.view.Toolbar({
|
2012-11-07 21:14:41 +01:00
|
|
|
controller: this,
|
|
|
|
items: {
|
|
|
|
insert: {
|
|
|
|
style: 'primary',
|
|
|
|
text: l10n.addToGallery,
|
|
|
|
priority: 80,
|
|
|
|
|
|
|
|
click: function() {
|
|
|
|
var controller = this.controller,
|
|
|
|
state = controller.state(),
|
2012-11-30 16:19:11 +01:00
|
|
|
edit = controller.state('gallery-edit');
|
2012-11-07 21:14:41 +01:00
|
|
|
|
|
|
|
edit.get('library').add( state.get('selection').models );
|
|
|
|
state.trigger('reset');
|
2012-12-04 02:26:03 +01:00
|
|
|
controller.setState('gallery-edit');
|
2012-11-07 21:14:41 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}) );
|
|
|
|
}
|
2012-10-29 00:29:17 +01: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 06:54:23 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.view.Modal
|
|
|
|
*/
|
2012-11-19 01:36:47 +01: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 06:54:23 +02:00
|
|
|
tagName: 'div',
|
|
|
|
template: media.template('media-modal'),
|
|
|
|
|
2012-11-30 09:37:17 +01: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 06:54:23 +02:00
|
|
|
events: {
|
2012-12-03 03:38:10 +01:00
|
|
|
'click .media-modal-backdrop, .media-modal-close': 'escapeHandler',
|
2012-11-30 09:37:17 +01: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 06:54:23 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function() {
|
|
|
|
_.defaults( this.options, {
|
2012-10-29 00:29:17 +01:00
|
|
|
container: document.body,
|
2012-11-30 02:55:37 +01:00
|
|
|
title: '',
|
2012-12-04 18:58:24 +01:00
|
|
|
propagate: true,
|
|
|
|
freeze: document.body
|
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 06:54:23 +02:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2012-12-03 03:38:10 +01:00
|
|
|
prepare: function() {
|
|
|
|
return {
|
2012-10-29 00:29:17 +01:00
|
|
|
title: this.options.title
|
2012-12-03 03:38:10 +01: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 06:54:23 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
attach: function() {
|
2012-12-03 03:38:10 +01:00
|
|
|
if ( this.views.attached )
|
|
|
|
return this;
|
|
|
|
|
|
|
|
if ( ! this.views.rendered )
|
|
|
|
this.render();
|
|
|
|
|
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 06:54:23 +02:00
|
|
|
this.$el.appendTo( this.options.container );
|
2012-12-03 03:38:10 +01:00
|
|
|
|
|
|
|
// Manually mark the view as attached and trigger ready.
|
|
|
|
this.views.attached = true;
|
|
|
|
this.views.ready();
|
|
|
|
|
2012-11-30 02:55:37 +01: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 06:54:23 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
detach: function() {
|
2012-12-03 03:38:10 +01:00
|
|
|
if ( this.$el.is(':visible') )
|
|
|
|
this.close();
|
|
|
|
|
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 06:54:23 +02:00
|
|
|
this.$el.detach();
|
2012-12-03 03:38:10 +01:00
|
|
|
this.views.attached = false;
|
2012-11-30 02:55:37 +01: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 06:54:23 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
open: function() {
|
2012-12-04 18:58:24 +01:00
|
|
|
var $el = this.$el,
|
|
|
|
options = this.options,
|
|
|
|
$freeze;
|
|
|
|
|
|
|
|
if ( $el.is(':visible') )
|
2012-12-03 03:38:10 +01:00
|
|
|
return this;
|
|
|
|
|
|
|
|
if ( ! this.views.attached )
|
|
|
|
this.attach();
|
|
|
|
|
2012-12-04 18:58:24 +01:00
|
|
|
// If the `freeze` option is set, record the window's scroll
|
|
|
|
// position and the body's overflow, and then set overflow to hidden.
|
|
|
|
if ( options.freeze ) {
|
|
|
|
$freeze = $( options.freeze );
|
|
|
|
this._freeze = {
|
|
|
|
overflow: $freeze.css('overflow'),
|
|
|
|
scrollTop: $( window ).scrollTop()
|
|
|
|
};
|
|
|
|
$freeze.css( 'overflow', 'hidden' );
|
|
|
|
}
|
|
|
|
|
|
|
|
$el.show().focus();
|
2012-11-30 02:55:37 +01: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 06:54:23 +02:00
|
|
|
},
|
|
|
|
|
2012-12-03 03:38:10 +01:00
|
|
|
close: function( options ) {
|
2012-12-04 18:58:24 +01:00
|
|
|
var freeze = this._freeze;
|
|
|
|
|
2012-12-03 03:38:10 +01:00
|
|
|
if ( ! this.views.attached || ! this.$el.is(':visible') )
|
|
|
|
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 06:54:23 +02:00
|
|
|
this.$el.hide();
|
2012-12-03 03:38:10 +01:00
|
|
|
this.propagate('close');
|
|
|
|
|
2012-12-04 18:58:24 +01:00
|
|
|
// If the `freeze` option is set, restore the container's scroll
|
|
|
|
// position and overflow property.
|
|
|
|
if ( freeze ) {
|
|
|
|
$( this.options.freeze ).css( 'overflow', freeze.overflow );
|
|
|
|
$( window ).scrollTop( freeze.scrollTop );
|
|
|
|
}
|
|
|
|
|
2012-12-03 03:38:10 +01:00
|
|
|
if ( options && options.escape )
|
|
|
|
this.propagate('escape');
|
|
|
|
|
|
|
|
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 06:54:23 +02:00
|
|
|
},
|
|
|
|
|
2012-12-03 03:38:10 +01: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 06:54:23 +02:00
|
|
|
},
|
|
|
|
|
2012-12-03 03:38:10 +01:00
|
|
|
escapeHandler: function( event ) {
|
|
|
|
event.preventDefault();
|
|
|
|
this.escape();
|
|
|
|
},
|
2012-09-19 02:34:00 +02:00
|
|
|
|
2012-12-03 03:38:10 +01:00
|
|
|
content: function( content ) {
|
|
|
|
this.views.set( '.media-modal-content', content );
|
|
|
|
return this;
|
2012-11-30 02:55:37 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
// Triggers a modal event and if the `propagate` option is set,
|
|
|
|
// forwards events to the modal's controller.
|
|
|
|
propagate: function( id ) {
|
|
|
|
this.trigger( id );
|
|
|
|
|
|
|
|
if ( this.options.propagate )
|
|
|
|
this.controller.trigger( id );
|
|
|
|
|
|
|
|
return this;
|
2012-11-30 09:37:17 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
keydown: function( event ) {
|
|
|
|
// Close the modal when escape is pressed.
|
|
|
|
if ( 27 === event.which ) {
|
|
|
|
event.preventDefault();
|
2012-12-03 03:38:10 +01:00
|
|
|
this.escape();
|
2012-11-30 09:37:17 +01:00
|
|
|
return;
|
|
|
|
}
|
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 06:54:23 +02:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-10-29 00:29:17 +01:00
|
|
|
// wp.media.view.UploaderWindow
|
|
|
|
// ----------------------------
|
2012-11-19 01:36:47 +01:00
|
|
|
media.view.UploaderWindow = media.View.extend({
|
2012-10-29 00:29:17 +01: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 23:59:12 +01:00
|
|
|
this.$browser = $('<a href="#" class="browser" />').hide().appendTo('body');
|
2012-10-29 00:29:17 +01: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 23:59:12 +01:00
|
|
|
browser: this.$browser,
|
2012-10-29 00:29:17 +01:00
|
|
|
params: {}
|
|
|
|
});
|
|
|
|
|
2012-11-21 21:27:49 +01:00
|
|
|
// Ensure the dropzone is a jQuery collection.
|
|
|
|
if ( uploader.dropzone && ! (uploader.dropzone instanceof $) )
|
|
|
|
uploader.dropzone = $( uploader.dropzone );
|
2012-11-21 21:34:46 +01:00
|
|
|
|
|
|
|
this.controller.on( 'activate', this.refresh, this );
|
2012-10-29 00:29:17 +01:00
|
|
|
},
|
|
|
|
|
2012-10-29 08:38:13 +01:00
|
|
|
refresh: function() {
|
|
|
|
if ( this.uploader )
|
|
|
|
this.uploader.refresh();
|
|
|
|
},
|
|
|
|
|
2012-11-21 21:27:49 +01:00
|
|
|
ready: function() {
|
2012-12-03 08:17:10 +01:00
|
|
|
var postId = media.view.settings.post.id,
|
2012-11-21 21:27:49 +01:00
|
|
|
dropzone;
|
2012-10-29 00:29:17 +01:00
|
|
|
|
2012-11-21 21:27:49 +01:00
|
|
|
// If the uploader already exists, bail.
|
|
|
|
if ( this.uploader )
|
2012-10-29 00:29:17 +01:00
|
|
|
return;
|
|
|
|
|
2012-11-21 21:27:49 +01:00
|
|
|
if ( postId )
|
|
|
|
this.options.uploader.params.post_id = postId;
|
2012-10-29 00:29:17 +01: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 ) );
|
|
|
|
},
|
|
|
|
|
|
|
|
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.
|
|
|
|
if ( '0' === $el.css('opacity') )
|
|
|
|
$el.hide();
|
|
|
|
});
|
2012-10-29 08:38:13 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-11-19 01:36:47 +01:00
|
|
|
media.view.UploaderInline = media.View.extend({
|
2012-10-29 08:38:13 +01:00
|
|
|
tagName: 'div',
|
|
|
|
className: 'uploader-inline',
|
|
|
|
template: media.template('uploader-inline'),
|
|
|
|
|
|
|
|
initialize: function() {
|
2012-12-04 02:26:03 +01:00
|
|
|
_.defaults( this.options, {
|
|
|
|
message: '',
|
|
|
|
status: true
|
|
|
|
});
|
2012-10-29 08:38:13 +01:00
|
|
|
|
2012-11-22 12:46:03 +01: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 23:59:12 +01:00
|
|
|
this.options.$browser = this.controller.uploader.$browser;
|
2012-11-22 13:35:05 +01:00
|
|
|
|
2012-11-28 03:28:10 +01:00
|
|
|
if ( _.isUndefined( this.options.postId ) )
|
2012-12-03 08:17:10 +01:00
|
|
|
this.options.postId = media.view.settings.post.id;
|
2012-11-28 03:28:10 +01:00
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
if ( this.options.status ) {
|
|
|
|
this.views.set( '.upload-inline-status', new media.view.UploaderStatus({
|
|
|
|
controller: this.controller
|
|
|
|
}) );
|
|
|
|
}
|
2012-10-29 08:38:13 +01:00
|
|
|
},
|
|
|
|
|
2012-11-22 12:46:03 +01: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 23:59:12 +01:00
|
|
|
var $browser = this.options.$browser,
|
|
|
|
$placeholder;
|
|
|
|
|
2012-11-22 12:46:03 +01:00
|
|
|
if ( this.controller.uploader ) {
|
|
|
|
$placeholder = this.$('.browser');
|
2012-12-03 07:32:25 +01:00
|
|
|
|
|
|
|
// Check if we've already replaced the placeholder.
|
|
|
|
if ( $placeholder[0] === $browser[0] )
|
|
|
|
return;
|
|
|
|
|
2012-11-22 12:46:03 +01:00
|
|
|
$browser.detach().text( $placeholder.text() );
|
|
|
|
$browser[0].className = $placeholder[0].className;
|
|
|
|
$placeholder.replaceWith( $browser.show() );
|
|
|
|
}
|
2012-11-21 20:54:06 +01:00
|
|
|
|
2012-10-29 08:38:13 +01:00
|
|
|
return this;
|
2012-10-29 00:29:17 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-11-22 10:32:21 +01:00
|
|
|
/**
|
|
|
|
* wp.media.view.UploaderStatus
|
|
|
|
*/
|
|
|
|
media.view.UploaderStatus = media.View.extend({
|
|
|
|
className: 'media-uploader-status',
|
|
|
|
template: media.template('uploader-status'),
|
|
|
|
|
2012-11-22 11:56:10 +01:00
|
|
|
events: {
|
|
|
|
'click .upload-dismiss-errors': 'dismiss'
|
|
|
|
},
|
|
|
|
|
2012-11-22 10:32:21 +01: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 13:54:49 +01:00
|
|
|
this.errors.reset();
|
2012-11-22 11:56:10 +01:00
|
|
|
this.errors.on( 'add remove reset', this.visibility, this );
|
|
|
|
this.errors.on( 'add', this.error, this );
|
2012-11-22 10:32:21 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
dispose: function() {
|
|
|
|
wp.Uploader.queue.off( null, null, this );
|
|
|
|
media.View.prototype.dispose.apply( this, arguments );
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
visibility: function() {
|
|
|
|
this.$el.toggleClass( 'uploading', !! this.queue.length );
|
2012-11-22 11:56:10 +01:00
|
|
|
this.$el.toggleClass( 'errors', !! this.errors.length );
|
2012-11-22 10:32:21 +01: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,
|
|
|
|
$bar = this.$bar,
|
|
|
|
memo = 0;
|
|
|
|
|
|
|
|
if ( ! $bar || ! queue.length )
|
|
|
|
return;
|
|
|
|
|
|
|
|
$bar.width( ( queue.reduce( function( memo, attachment ) {
|
|
|
|
if ( ! attachment.get('uploading') )
|
|
|
|
return memo + 100;
|
|
|
|
|
|
|
|
var percent = attachment.get('percent');
|
|
|
|
return memo + ( _.isNumber( percent ) ? percent : 100 );
|
|
|
|
}, 0 ) / queue.length ) + '%' );
|
|
|
|
},
|
|
|
|
|
|
|
|
info: function() {
|
|
|
|
var queue = this.queue,
|
|
|
|
index = 0, active;
|
|
|
|
|
|
|
|
if ( ! queue.length )
|
|
|
|
return;
|
|
|
|
|
|
|
|
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 11:56:10 +01:00
|
|
|
this.$filename.html( active ? this.filename( active.get('filename') ) : '' );
|
|
|
|
},
|
|
|
|
|
|
|
|
filename: function( filename ) {
|
|
|
|
return media.truncate( _.escape( filename ), 24 );
|
|
|
|
},
|
|
|
|
|
|
|
|
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 });
|
|
|
|
},
|
|
|
|
|
|
|
|
dismiss: function( event ) {
|
|
|
|
var errors = this.views.get('.upload-errors');
|
|
|
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
if ( errors )
|
|
|
|
_.invoke( errors, 'remove' );
|
|
|
|
wp.Uploader.errors.reset();
|
2012-11-22 10:32:21 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-11-22 11:56:10 +01:00
|
|
|
media.view.UploaderStatusError = media.View.extend({
|
|
|
|
className: 'upload-error',
|
|
|
|
template: media.template('uploader-status-error')
|
|
|
|
});
|
|
|
|
|
2012-09-06 09:46:15 +02:00
|
|
|
/**
|
|
|
|
* wp.media.view.Toolbar
|
|
|
|
*/
|
2012-11-19 01:36:47 +01:00
|
|
|
media.view.Toolbar = media.View.extend({
|
2012-09-06 09:46:15 +02:00
|
|
|
tagName: 'div',
|
|
|
|
className: 'media-toolbar',
|
|
|
|
|
|
|
|
initialize: function() {
|
2012-12-04 17:21:57 +01: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 09:46:15 +02:00
|
|
|
|
2012-10-29 00:29:17 +01:00
|
|
|
if ( this.options.items )
|
2012-11-12 06:57:12 +01:00
|
|
|
this.set( this.options.items, { silent: true });
|
2012-10-29 16:13:02 +01:00
|
|
|
|
|
|
|
if ( ! this.options.silent )
|
|
|
|
this.render();
|
2012-11-12 06:57:12 +01:00
|
|
|
|
2012-12-04 18:45:24 +01:00
|
|
|
if ( selection )
|
|
|
|
selection.on( 'add remove reset', this.refresh, this );
|
|
|
|
if ( library )
|
|
|
|
library.on( 'add remove reset', this.refresh, this );
|
2012-11-07 21:14:41 +01:00
|
|
|
},
|
|
|
|
|
2012-12-04 17:21:57 +01:00
|
|
|
dispose: function() {
|
2012-12-04 18:45:24 +01:00
|
|
|
if ( this.selection )
|
|
|
|
this.selection.off( null, null, this );
|
|
|
|
if ( this.library )
|
|
|
|
this.library.off( null, null, this );
|
2012-12-04 17:21:57 +01:00
|
|
|
return media.View.prototype.dispose.apply( this, arguments );
|
|
|
|
},
|
2012-09-06 09:46:15 +02:00
|
|
|
|
2012-12-04 17:21:57 +01:00
|
|
|
ready: function() {
|
2012-11-07 21:14:41 +01:00
|
|
|
this.refresh();
|
2012-09-06 09:46:15 +02:00
|
|
|
},
|
|
|
|
|
2012-11-12 06:57:12 +01:00
|
|
|
set: function( id, view, options ) {
|
2012-12-04 17:21:57 +01:00
|
|
|
var list;
|
2012-10-29 16:13:02 +01:00
|
|
|
options = options || {};
|
|
|
|
|
2012-10-29 00:29:17 +01:00
|
|
|
// Accept an object with an `id` : `view` mapping.
|
|
|
|
if ( _.isObject( id ) ) {
|
|
|
|
_.each( id, function( view, id ) {
|
2012-11-12 06:57:12 +01:00
|
|
|
this.set( id, view, { silent: true });
|
2012-10-29 00:29:17 +01:00
|
|
|
}, this );
|
2012-10-29 16:13:02 +01:00
|
|
|
|
2012-11-12 06:57:12 +01:00
|
|
|
} else {
|
|
|
|
if ( ! ( view instanceof Backbone.View ) ) {
|
2012-11-21 18:50:02 +01:00
|
|
|
view.classes = [ 'media-button-' + id ].concat( view.classes || [] );
|
2012-11-12 06:57:12 +01:00
|
|
|
view = new media.view.Button( view ).render();
|
|
|
|
}
|
2012-10-29 00:29:17 +01:00
|
|
|
|
2012-11-12 06:57:12 +01:00
|
|
|
view.controller = view.controller || this.controller;
|
2012-09-06 09:46:15 +02:00
|
|
|
|
2012-11-12 06:57:12 +01:00
|
|
|
this._views[ id ] = view;
|
2012-12-04 17:21:57 +01:00
|
|
|
|
|
|
|
list = view.options.priority < 0 ? 'secondary' : 'primary';
|
|
|
|
this[ list ].set( id, view, options );
|
2012-11-12 06:57:12 +01:00
|
|
|
}
|
2012-10-29 00:29:17 +01:00
|
|
|
|
2012-10-29 16:13:02 +01:00
|
|
|
if ( ! options.silent )
|
2012-12-04 17:21:57 +01:00
|
|
|
this.refresh();
|
|
|
|
|
2012-09-06 09:46:15 +02:00
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
2012-09-27 02:59:04 +02:00
|
|
|
get: function( id ) {
|
|
|
|
return this._views[ id ];
|
|
|
|
},
|
|
|
|
|
2012-11-12 06:57:12 +01:00
|
|
|
unset: function( id, options ) {
|
2012-09-06 09:46:15 +02:00
|
|
|
delete this._views[ id ];
|
2012-12-04 17:21:57 +01:00
|
|
|
this.primary.unset( id, options );
|
|
|
|
this.secondary.unset( id, options );
|
|
|
|
|
2012-09-06 09:46:15 +02:00
|
|
|
if ( ! options || ! options.silent )
|
2012-12-04 17:21:57 +01:00
|
|
|
this.refresh();
|
2012-09-06 09:46:15 +02:00
|
|
|
return this;
|
2012-11-07 21:14:41 +01:00
|
|
|
},
|
|
|
|
|
2012-12-04 17:21:57 +01:00
|
|
|
refresh: function() {
|
|
|
|
var state = this.controller.state(),
|
|
|
|
library = state.get('library'),
|
|
|
|
selection = state.get('selection');
|
|
|
|
|
|
|
|
_.each( this._views, function( button ) {
|
|
|
|
if ( ! button.model || ! button.options || ! button.options.requires )
|
|
|
|
return;
|
|
|
|
|
|
|
|
var requires = button.options.requires,
|
|
|
|
disabled = false;
|
|
|
|
|
2012-12-04 18:45:24 +01:00
|
|
|
if ( requires.selection && selection && ! selection.length )
|
2012-12-04 17:21:57 +01:00
|
|
|
disabled = true;
|
2012-12-04 18:45:24 +01:00
|
|
|
else if ( requires.library && library && ! library.length )
|
2012-12-04 17:21:57 +01:00
|
|
|
disabled = true;
|
|
|
|
|
|
|
|
button.model.set( 'disabled', disabled );
|
|
|
|
});
|
|
|
|
}
|
2012-09-06 09:46:15 +02:00
|
|
|
});
|
|
|
|
|
2012-11-12 06:57:12 +01:00
|
|
|
// wp.media.view.Toolbar.Select
|
|
|
|
// ----------------------------
|
|
|
|
media.view.Toolbar.Select = media.view.Toolbar.extend({
|
|
|
|
initialize: function() {
|
|
|
|
var options = this.options,
|
|
|
|
controller = options.controller,
|
|
|
|
selection = controller.state().get('selection');
|
|
|
|
|
|
|
|
_.bindAll( this, 'clickSelect' );
|
|
|
|
|
|
|
|
_.defaults( options, {
|
|
|
|
event: 'select',
|
|
|
|
state: false,
|
|
|
|
reset: true,
|
|
|
|
close: true,
|
2012-12-04 17:21:57 +01:00
|
|
|
text: l10n.select,
|
|
|
|
|
|
|
|
// Does the button rely on the selection?
|
|
|
|
requires: {
|
|
|
|
selection: true
|
|
|
|
}
|
2012-11-12 06:57:12 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
options.items = _.defaults( options.items || {}, {
|
|
|
|
select: {
|
|
|
|
style: 'primary',
|
|
|
|
text: options.text,
|
|
|
|
priority: 80,
|
2012-12-04 17:21:57 +01:00
|
|
|
click: this.clickSelect,
|
|
|
|
requires: options.requires
|
2012-11-12 06:57:12 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
media.view.Toolbar.prototype.initialize.apply( this, arguments );
|
|
|
|
},
|
|
|
|
|
|
|
|
clickSelect: function() {
|
|
|
|
var options = this.options,
|
|
|
|
controller = this.controller;
|
|
|
|
|
|
|
|
if ( options.close )
|
|
|
|
controller.close();
|
|
|
|
|
|
|
|
if ( options.event )
|
|
|
|
controller.state().trigger( options.event );
|
|
|
|
|
|
|
|
if ( options.reset )
|
|
|
|
controller.reset();
|
|
|
|
|
|
|
|
if ( options.state )
|
2012-11-30 16:19:11 +01:00
|
|
|
controller.setState( options.state );
|
2012-11-12 06:57:12 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// wp.media.view.Toolbar.Embed
|
|
|
|
// ---------------------------
|
|
|
|
media.view.Toolbar.Embed = media.view.Toolbar.Select.extend({
|
|
|
|
initialize: function() {
|
|
|
|
_.defaults( this.options, {
|
2012-12-04 18:45:24 +01:00
|
|
|
text: l10n.insertIntoPost,
|
|
|
|
requires: false
|
2012-11-12 06:57:12 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
media.view.Toolbar.Select.prototype.initialize.apply( this, arguments );
|
2012-11-07 21:14:41 +01:00
|
|
|
},
|
2012-09-06 09:46:15 +02:00
|
|
|
|
2012-11-07 21:14:41 +01:00
|
|
|
refresh: function() {
|
2012-12-04 17:21:57 +01:00
|
|
|
var url = this.controller.state().props.get('url');
|
|
|
|
this.get('select').model.set( 'disabled', ! url || /^https?:\/\/$/.test(url) );
|
2012-11-02 02:20:01 +01:00
|
|
|
|
2012-12-04 17:21:57 +01:00
|
|
|
media.view.Toolbar.Select.prototype.refresh.apply( this, arguments );
|
2012-11-02 02:20:01 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-09-06 09:46:15 +02:00
|
|
|
/**
|
|
|
|
* wp.media.view.Button
|
|
|
|
*/
|
2012-11-19 01:36:47 +01:00
|
|
|
media.view.Button = media.View.extend({
|
2012-09-06 09:46:15 +02:00
|
|
|
tagName: 'a',
|
|
|
|
className: 'media-button',
|
|
|
|
attributes: { href: '#' },
|
|
|
|
|
|
|
|
events: {
|
|
|
|
'click': 'click'
|
|
|
|
},
|
|
|
|
|
2012-09-27 02:59:04 +02:00
|
|
|
defaults: {
|
2012-10-29 07:56:23 +01:00
|
|
|
text: '',
|
|
|
|
style: '',
|
|
|
|
size: 'large',
|
|
|
|
disabled: false
|
2012-09-27 02:59:04 +02:00
|
|
|
},
|
|
|
|
|
2012-09-06 09:46:15 +02:00
|
|
|
initialize: function() {
|
2012-09-27 02:59:04 +02:00
|
|
|
// Create a model with the provided `defaults`.
|
|
|
|
this.model = new Backbone.Model( this.defaults );
|
|
|
|
|
|
|
|
// If any of the `options` have a key from `defaults`, apply its
|
|
|
|
// value to the `model` and remove it from the `options object.
|
|
|
|
_.each( this.defaults, function( def, key ) {
|
|
|
|
var value = this.options[ key ];
|
|
|
|
if ( _.isUndefined( value ) )
|
|
|
|
return;
|
|
|
|
|
|
|
|
this.model.set( key, value );
|
|
|
|
delete this.options[ key ];
|
|
|
|
}, this );
|
|
|
|
|
|
|
|
this.model.on( 'change', this.render, this );
|
2012-09-06 09:46:15 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
2012-10-29 07:56:23 +01:00
|
|
|
var classes = [ 'button', this.className ],
|
|
|
|
model = this.model.toJSON();
|
2012-09-06 09:46:15 +02:00
|
|
|
|
2012-10-29 07:56:23 +01:00
|
|
|
if ( model.style )
|
|
|
|
classes.push( 'button-' + model.style );
|
2012-09-06 09:46:15 +02:00
|
|
|
|
2012-10-29 07:56:23 +01:00
|
|
|
if ( model.size )
|
|
|
|
classes.push( 'button-' + model.size );
|
2012-09-19 02:34:00 +02:00
|
|
|
|
2012-10-16 21:25:17 +02:00
|
|
|
classes = _.uniq( classes.concat( this.options.classes ) );
|
2012-09-06 09:46:15 +02:00
|
|
|
this.el.className = classes.join(' ');
|
2012-09-27 02:59:04 +02:00
|
|
|
|
2012-10-29 07:56:23 +01:00
|
|
|
this.$el.attr( 'disabled', model.disabled );
|
2012-09-27 02:59:04 +02:00
|
|
|
this.$el.text( this.model.get('text') );
|
2012-10-16 21:25:17 +02:00
|
|
|
|
2012-09-06 09:46:15 +02:00
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
click: function( event ) {
|
2012-11-09 12:30:40 +01:00
|
|
|
if ( '#' === this.attributes.href )
|
|
|
|
event.preventDefault();
|
|
|
|
|
2012-10-29 07:56:23 +01:00
|
|
|
if ( this.options.click && ! this.model.get('disabled') )
|
2012-09-06 09:46:15 +02:00
|
|
|
this.options.click.apply( this, arguments );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-10-16 21:25:17 +02:00
|
|
|
/**
|
|
|
|
* wp.media.view.ButtonGroup
|
|
|
|
*/
|
2012-11-19 01:36:47 +01:00
|
|
|
media.view.ButtonGroup = media.View.extend({
|
2012-10-16 21:25:17 +02:00
|
|
|
tagName: 'div',
|
|
|
|
className: 'button-group button-large media-button-group',
|
|
|
|
|
|
|
|
initialize: function() {
|
|
|
|
this.buttons = _.map( this.options.buttons || [], function( button ) {
|
|
|
|
if ( button instanceof Backbone.View )
|
|
|
|
return button;
|
|
|
|
else
|
|
|
|
return new media.view.Button( button ).render();
|
|
|
|
});
|
|
|
|
|
|
|
|
delete this.options.buttons;
|
|
|
|
|
|
|
|
if ( this.options.classes )
|
|
|
|
this.$el.addClass( this.options.classes );
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
this.$el.html( $( _.pluck( this.buttons, 'el' ) ).detach() );
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-10-29 07:56:23 +01: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 23:59:12 +01:00
|
|
|
* wp.media.view.PriorityList
|
2012-10-29 07:56:23 +01: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 23:59:12 +01:00
|
|
|
|
2012-11-19 01:36:47 +01:00
|
|
|
media.view.PriorityList = media.View.extend({
|
2012-10-29 07:56:23 +01:00
|
|
|
tagName: 'div',
|
|
|
|
|
|
|
|
initialize: function() {
|
2012-12-04 02:26:03 +01:00
|
|
|
this._views = {};
|
2012-10-29 07:56:23 +01:00
|
|
|
|
2012-11-21 21:43:42 +01: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 23:59:12 +01:00
|
|
|
delete this.options.views;
|
2012-10-29 16:13:02 +01:00
|
|
|
|
2012-11-22 02:43:31 +01:00
|
|
|
if ( ! this.options.silent )
|
2012-10-29 16:13:02 +01:00
|
|
|
this.render();
|
2012-10-29 07:56:23 +01:00
|
|
|
},
|
|
|
|
|
2012-11-21 21:43:42 +01:00
|
|
|
set: function( id, view, options ) {
|
2012-11-22 01:41:39 +01:00
|
|
|
var priority, views, index;
|
|
|
|
|
2012-10-29 16:13:02 +01:00
|
|
|
options = options || {};
|
|
|
|
|
2012-10-29 07:56:23 +01:00
|
|
|
// Accept an object with an `id` : `view` mapping.
|
|
|
|
if ( _.isObject( id ) ) {
|
|
|
|
_.each( id, function( view, id ) {
|
2012-11-22 01:41:39 +01:00
|
|
|
this.set( id, view );
|
2012-10-29 07:56:23 +01:00
|
|
|
}, this );
|
|
|
|
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 23:59:12 +01:00
|
|
|
if ( ! (view instanceof Backbone.View) )
|
|
|
|
view = this.toView( view, id, options );
|
|
|
|
|
2012-10-29 07:56:23 +01:00
|
|
|
view.controller = view.controller || this.controller;
|
|
|
|
|
2012-11-22 01:41:39 +01: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 07:56:23 +01:00
|
|
|
this._views[ id ] = view;
|
2012-11-22 01:41:39 +01:00
|
|
|
this.views.add( view, {
|
|
|
|
at: _.isNumber( index ) ? index : views.length || 0
|
|
|
|
});
|
|
|
|
|
2012-10-29 07:56:23 +01:00
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
get: function( id ) {
|
|
|
|
return this._views[ id ];
|
|
|
|
},
|
|
|
|
|
2012-11-22 01:41:39 +01:00
|
|
|
unset: function( id ) {
|
|
|
|
var view = this.get( id );
|
2012-11-22 07:30:25 +01:00
|
|
|
|
2012-11-22 01:41:39 +01:00
|
|
|
if ( view )
|
2012-11-22 07:30:25 +01:00
|
|
|
view.remove();
|
2012-11-22 01:41:39 +01:00
|
|
|
|
2012-10-29 07:56:23 +01: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 23:59:12 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
toView: function( options ) {
|
2012-11-19 01:36:47 +01: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 23:59:12 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
/**
|
|
|
|
* wp.media.view.MenuItem
|
|
|
|
*/
|
|
|
|
media.view.MenuItem = media.View.extend({
|
|
|
|
tagName: 'a',
|
|
|
|
className: 'media-menu-item',
|
|
|
|
|
|
|
|
attributes: {
|
|
|
|
href: '#'
|
|
|
|
},
|
|
|
|
|
|
|
|
events: {
|
|
|
|
'click': '_click'
|
|
|
|
},
|
|
|
|
|
|
|
|
_click: function( event ) {
|
|
|
|
var clickOverride = this.options.click;
|
|
|
|
|
|
|
|
if ( event )
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
if ( clickOverride )
|
|
|
|
clickOverride.call( this );
|
|
|
|
else
|
|
|
|
this.click();
|
|
|
|
},
|
|
|
|
|
|
|
|
click: function() {
|
|
|
|
var state = this.options.state;
|
|
|
|
if ( state )
|
|
|
|
this.controller.setState( state );
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
var options = this.options;
|
|
|
|
|
|
|
|
if ( options.text )
|
|
|
|
this.$el.text( options.text );
|
|
|
|
else if ( options.html )
|
|
|
|
this.$el.html( options.html );
|
|
|
|
|
|
|
|
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 23:59:12 +01:00
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.view.Menu
|
|
|
|
*/
|
|
|
|
media.view.Menu = media.view.PriorityList.extend({
|
2012-12-04 02:26:03 +01: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 23:59:12 +01:00
|
|
|
className: 'media-menu',
|
2012-12-04 02:26:03 +01:00
|
|
|
property: 'state',
|
|
|
|
ItemView: media.view.MenuItem,
|
|
|
|
region: 'menu',
|
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 23:59:12 +01:00
|
|
|
|
2012-12-04 02:26:03 +01: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 23:59:12 +01:00
|
|
|
options = options || {};
|
2012-12-04 02:26:03 +01:00
|
|
|
options[ this.property ] = options[ this.property ] || id;
|
|
|
|
return new this.ItemView( options ).render();
|
|
|
|
},
|
|
|
|
|
|
|
|
ready: function() {
|
|
|
|
media.view.PriorityList.prototype.ready.apply( this, arguments );
|
|
|
|
this.visibility();
|
|
|
|
},
|
|
|
|
|
|
|
|
set: function() {
|
|
|
|
media.view.PriorityList.prototype.set.apply( this, arguments );
|
|
|
|
this.visibility();
|
|
|
|
},
|
|
|
|
|
|
|
|
unset: function() {
|
|
|
|
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 23:59:12 +01:00
|
|
|
},
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
visibility: function() {
|
|
|
|
var region = this.region,
|
|
|
|
view = this.controller[ region ].get(),
|
|
|
|
views = this.views.get(),
|
|
|
|
hide = ! views || views.length < 2;
|
|
|
|
|
|
|
|
if ( this === view )
|
|
|
|
this.controller.$el.toggleClass( 'hide-' + region, hide );
|
|
|
|
},
|
|
|
|
|
|
|
|
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 23:59:12 +01:00
|
|
|
|
|
|
|
if ( ! view )
|
|
|
|
return;
|
|
|
|
|
|
|
|
this.deselect();
|
|
|
|
view.$el.addClass('active');
|
|
|
|
},
|
|
|
|
|
|
|
|
deselect: function() {
|
|
|
|
this.$el.children().removeClass('active');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
/**
|
|
|
|
* wp.media.view.RouterItem
|
|
|
|
*/
|
|
|
|
media.view.RouterItem = media.view.MenuItem.extend({
|
2012-11-07 21:14:41 +01:00
|
|
|
click: function() {
|
2012-12-04 02:26:03 +01:00
|
|
|
var contentMode = this.options.contentMode;
|
|
|
|
if ( contentMode )
|
|
|
|
this.controller.content.mode( contentMode );
|
|
|
|
}
|
|
|
|
});
|
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 23:59:12 +01:00
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
/**
|
|
|
|
* wp.media.view.Router
|
|
|
|
*/
|
|
|
|
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 23:59:12 +01:00
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
initialize: function() {
|
|
|
|
this.controller.on( 'content:render', this.update, this );
|
|
|
|
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 23:59:12 +01:00
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
update: function() {
|
|
|
|
var mode = this.controller.content.mode();
|
|
|
|
if ( mode )
|
|
|
|
this.select( mode );
|
2012-10-29 07:56:23 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-12-04 02:26:03 +01: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 23:59:12 +01:00
|
|
|
/**
|
|
|
|
* wp.media.view.Sidebar
|
|
|
|
*/
|
|
|
|
media.view.Sidebar = media.view.PriorityList.extend({
|
|
|
|
className: 'media-sidebar'
|
|
|
|
});
|
|
|
|
|
2012-09-27 08:53:54 +02:00
|
|
|
/**
|
|
|
|
* wp.media.view.Attachment
|
|
|
|
*/
|
2012-11-19 01:36:47 +01:00
|
|
|
media.view.Attachment = media.View.extend({
|
2012-09-27 08:53:54 +02:00
|
|
|
tagName: 'li',
|
|
|
|
className: 'attachment',
|
|
|
|
template: media.template('attachment'),
|
|
|
|
|
|
|
|
events: {
|
2012-12-04 02:26:03 +01:00
|
|
|
'click .attachment-preview': 'toggleSelectionHandler',
|
2012-11-10 19:25:04 +01:00
|
|
|
'change [data-setting]': 'updateSetting',
|
|
|
|
'change [data-setting] input': 'updateSetting',
|
|
|
|
'change [data-setting] select': 'updateSetting',
|
2012-11-15 03:36:06 +01:00
|
|
|
'change [data-setting] textarea': 'updateSetting',
|
2012-11-19 02:17:30 +01:00
|
|
|
'click .close': 'removeFromLibrary',
|
2012-11-20 12:10:04 +01:00
|
|
|
'click .check': 'removeFromSelection',
|
2012-11-19 02:17:30 +01:00
|
|
|
'click a': 'preventDefault'
|
2012-09-27 08:53:54 +02:00
|
|
|
},
|
|
|
|
|
2012-09-27 09:45:26 +02:00
|
|
|
buttons: {},
|
|
|
|
|
2012-09-27 08:53:54 +02:00
|
|
|
initialize: function() {
|
2012-12-03 06:32:25 +01:00
|
|
|
var selection = this.options.selection;
|
|
|
|
|
2012-10-31 00:59:57 +01:00
|
|
|
this.model.on( 'change:sizes change:uploading change:caption change:title', this.render, this );
|
2012-09-27 08:53:54 +02:00
|
|
|
this.model.on( 'change:percent', this.progress, this );
|
2012-12-03 06:32:25 +01:00
|
|
|
|
|
|
|
// Update the selection.
|
2012-09-27 08:53:54 +02:00
|
|
|
this.model.on( 'add', this.select, this );
|
|
|
|
this.model.on( 'remove', this.deselect, this );
|
2012-12-03 06:32:25 +01:00
|
|
|
if ( selection )
|
|
|
|
selection.on( 'reset', this.updateSelect, this );
|
2012-09-27 09:45:26 +02:00
|
|
|
|
2012-10-31 00:59:57 +01: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 08:53:54 +02:00
|
|
|
},
|
|
|
|
|
2012-11-28 03:03:31 +01:00
|
|
|
dispose: function() {
|
2012-12-03 06:32:25 +01:00
|
|
|
var selection = this.options.selection;
|
|
|
|
|
|
|
|
// Make sure all settings are saved before removing the view.
|
2012-11-28 03:03:31 +01:00
|
|
|
this.updateAll();
|
2012-12-03 06:32:25 +01:00
|
|
|
|
|
|
|
if ( selection )
|
|
|
|
selection.off( null, null, this );
|
|
|
|
|
2012-11-28 03:03:31 +01:00
|
|
|
media.View.prototype.dispose.apply( this, arguments );
|
|
|
|
return this;
|
2012-10-31 00:59:57 +01:00
|
|
|
},
|
|
|
|
|
2012-09-27 08:53:54 +02:00
|
|
|
render: function() {
|
2012-12-04 19:33:51 +01:00
|
|
|
var options = _.defaults( this.model.toJSON(), {
|
2012-11-11 06:16:41 +01:00
|
|
|
orientation: 'landscape',
|
|
|
|
uploading: false,
|
|
|
|
type: '',
|
|
|
|
subtype: '',
|
|
|
|
icon: '',
|
|
|
|
filename: '',
|
|
|
|
caption: '',
|
|
|
|
title: '',
|
|
|
|
dateFormatted: '',
|
|
|
|
width: '',
|
|
|
|
height: '',
|
|
|
|
compat: false,
|
|
|
|
alt: ''
|
2012-10-10 11:55:47 +02:00
|
|
|
});
|
2012-09-27 08:53:54 +02:00
|
|
|
|
2012-10-11 01:32:48 +02:00
|
|
|
options.buttons = this.buttons;
|
2012-10-31 00:59:57 +01:00
|
|
|
options.describe = this.controller.state().get('describe');
|
2012-10-09 01:20:04 +02:00
|
|
|
|
2012-10-10 11:55:47 +02:00
|
|
|
if ( 'image' === options.type )
|
2012-11-14 23:08:02 +01:00
|
|
|
options.size = this.imageSize();
|
2012-09-27 08:53:54 +02:00
|
|
|
|
2012-12-04 19:33:51 +01:00
|
|
|
options.can = {};
|
|
|
|
if ( options.nonces ) {
|
|
|
|
options.can.remove = !! options.nonces['delete'];
|
|
|
|
options.can.save = !! options.nonces.update;
|
|
|
|
}
|
|
|
|
|
2012-11-28 03:03:31 +01:00
|
|
|
this.views.detach();
|
2012-09-27 08:53:54 +02:00
|
|
|
this.$el.html( this.template( options ) );
|
|
|
|
|
2012-11-11 06:16:41 +01:00
|
|
|
this.$el.toggleClass( 'uploading', options.uploading );
|
2012-10-10 11:55:47 +02:00
|
|
|
if ( options.uploading )
|
2012-09-27 08:53:54 +02:00
|
|
|
this.$bar = this.$('.media-progress-bar div');
|
|
|
|
else
|
|
|
|
delete this.$bar;
|
|
|
|
|
|
|
|
// Check if the model is selected.
|
2012-12-03 06:32:25 +01:00
|
|
|
this.updateSelect();
|
2012-09-27 08:53:54 +02:00
|
|
|
|
2012-12-03 07:37:49 +01:00
|
|
|
// Update the save status.
|
|
|
|
this.updateSave();
|
|
|
|
|
2012-11-28 03:03:31 +01:00
|
|
|
this.views.render();
|
2012-09-27 08:53:54 +02:00
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
progress: function() {
|
|
|
|
if ( this.$bar && this.$bar.length )
|
|
|
|
this.$bar.width( this.model.get('percent') + '%' );
|
|
|
|
},
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
toggleSelectionHandler: function( event ) {
|
|
|
|
var method;
|
|
|
|
|
|
|
|
if ( event.shiftKey )
|
|
|
|
method = 'between';
|
|
|
|
else if ( event.ctrlKey || event.metaKey )
|
|
|
|
method = 'toggle';
|
|
|
|
|
|
|
|
this.toggleSelection({
|
|
|
|
method: method
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
toggleSelection: function( options ) {
|
|
|
|
var collection = this.collection,
|
|
|
|
selection = this.options.selection,
|
|
|
|
model = this.model,
|
|
|
|
method = options && options.method,
|
|
|
|
single, between, models, singleIndex, modelIndex;
|
2012-11-15 03:36:06 +01:00
|
|
|
|
|
|
|
if ( ! selection )
|
|
|
|
return;
|
|
|
|
|
2012-12-04 02:26:03 +01: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.
|
|
|
|
if ( single === model )
|
|
|
|
return;
|
|
|
|
|
|
|
|
singleIndex = collection.indexOf( single );
|
|
|
|
modelIndex = collection.indexOf( this.model );
|
|
|
|
|
|
|
|
if ( singleIndex < modelIndex )
|
|
|
|
models = collection.models.slice( singleIndex, modelIndex + 1 );
|
|
|
|
else
|
|
|
|
models = collection.models.slice( modelIndex, singleIndex + 1 );
|
|
|
|
|
|
|
|
selection.add( models ).single( model );
|
|
|
|
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 ) {
|
|
|
|
selection[ this.selected() ? 'remove' : 'add' ]( model ).single( model );
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if ( method !== 'add' )
|
|
|
|
method = 'reset';
|
|
|
|
|
2012-12-03 06:32:25 +01:00
|
|
|
if ( this.selected() ) {
|
2012-11-15 03:36:06 +01: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-04 02:26:03 +01:00
|
|
|
selection[ single === model ? 'remove' : 'single' ]( model );
|
2012-11-15 03:36:06 +01:00
|
|
|
} else {
|
2012-12-04 02:26:03 +01: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.
|
|
|
|
selection[ method ]( model ).single( model );
|
2012-11-15 03:36:06 +01:00
|
|
|
}
|
2012-09-27 08:53:54 +02:00
|
|
|
},
|
|
|
|
|
2012-12-03 06:32:25 +01:00
|
|
|
updateSelect: function() {
|
|
|
|
this[ this.selected() ? 'select' : 'deselect' ]();
|
|
|
|
},
|
|
|
|
|
2012-10-29 00:29:17 +01:00
|
|
|
selected: function() {
|
2012-11-15 03:36:06 +01:00
|
|
|
var selection = this.options.selection;
|
2012-10-29 00:29:17 +01:00
|
|
|
if ( selection )
|
2012-12-03 06:32:25 +01:00
|
|
|
return !! selection.getByCid( this.model.cid );
|
2012-10-29 00:29:17 +01:00
|
|
|
},
|
|
|
|
|
2012-09-27 08:53:54 +02:00
|
|
|
select: function( model, collection ) {
|
2012-11-15 03:36:06 +01:00
|
|
|
var selection = this.options.selection;
|
2012-10-29 00:29:17 +01: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.
|
|
|
|
if ( ! selection || ( collection && collection !== selection ) )
|
2012-09-27 08:53:54 +02:00
|
|
|
return;
|
|
|
|
|
|
|
|
this.$el.addClass('selected');
|
|
|
|
},
|
|
|
|
|
|
|
|
deselect: function( model, collection ) {
|
2012-11-15 03:36:06 +01:00
|
|
|
var selection = this.options.selection;
|
2012-10-29 00:29:17 +01: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.
|
|
|
|
if ( ! selection || ( collection && collection !== selection ) )
|
2012-09-27 08:53:54 +02:00
|
|
|
return;
|
|
|
|
|
|
|
|
this.$el.removeClass('selected');
|
2012-09-27 09:45:26 +02:00
|
|
|
},
|
|
|
|
|
2012-10-31 00:15:16 +01:00
|
|
|
details: function( model, collection ) {
|
2012-11-15 03:36:06 +01:00
|
|
|
var selection = this.options.selection,
|
2012-10-31 00:15:16 +01:00
|
|
|
details;
|
|
|
|
|
|
|
|
if ( selection !== collection )
|
|
|
|
return;
|
|
|
|
|
|
|
|
details = selection.single();
|
2012-10-30 22:09:45 +01:00
|
|
|
this.$el.toggleClass( 'details', details === this.model );
|
|
|
|
},
|
|
|
|
|
2012-09-27 09:45:26 +02:00
|
|
|
preventDefault: function( event ) {
|
|
|
|
event.preventDefault();
|
2012-10-09 01:20:04 +02: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 19:05:03 +01:00
|
|
|
return _.clone( sizes[ size ] );
|
2012-10-09 01:20:04 +02:00
|
|
|
} else {
|
|
|
|
return {
|
|
|
|
url: this.model.get('url'),
|
|
|
|
width: this.model.get('width'),
|
|
|
|
height: this.model.get('height'),
|
|
|
|
orientation: this.model.get('orientation')
|
|
|
|
};
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2012-11-10 19:25:04 +01:00
|
|
|
updateSetting: function( event ) {
|
2012-11-28 23:27:13 +01:00
|
|
|
var $setting = $( event.target ).closest('[data-setting]'),
|
|
|
|
setting, value;
|
2012-11-10 19:25:04 +01:00
|
|
|
|
|
|
|
if ( ! $setting.length )
|
|
|
|
return;
|
|
|
|
|
2012-11-28 23:27:13 +01:00
|
|
|
setting = $setting.data('setting');
|
|
|
|
value = event.target.value;
|
|
|
|
|
|
|
|
if ( this.model.get( setting ) !== value )
|
2012-12-03 07:37:49 +01:00
|
|
|
this.save( setting, value );
|
|
|
|
},
|
|
|
|
|
|
|
|
// 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.
|
|
|
|
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.
|
|
|
|
if ( save.savedTimer )
|
|
|
|
clearTimeout( save.savedTimer );
|
|
|
|
|
|
|
|
this.updateSave('waiting');
|
|
|
|
save.requests = requests;
|
2012-12-04 19:33:51 +01:00
|
|
|
requests.always( function() {
|
2012-12-03 07:37:49 +01:00
|
|
|
// If we've performed another request since this one, bail.
|
|
|
|
if ( save.requests !== requests )
|
|
|
|
return;
|
|
|
|
|
2012-12-04 19:33:51 +01:00
|
|
|
view.updateSave( requests.state() === 'resolved' ? 'complete' : 'error' );
|
2012-12-03 07:37:49 +01:00
|
|
|
save.savedTimer = setTimeout( function() {
|
|
|
|
view.updateSave('ready');
|
|
|
|
delete save.savedTimer;
|
|
|
|
}, 2000 );
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
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-15 03:36:06 +01:00
|
|
|
},
|
|
|
|
|
2012-11-28 03:03:31 +01: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;
|
|
|
|
|
|
|
|
if ( ! $input.length )
|
|
|
|
return;
|
|
|
|
|
|
|
|
setting = $(el).data('setting');
|
|
|
|
value = $input.val();
|
|
|
|
|
|
|
|
// Record the value if it changed.
|
|
|
|
if ( model.get( setting ) !== value )
|
|
|
|
return [ setting, value ];
|
|
|
|
}).compact().object().value();
|
|
|
|
|
2012-11-28 05:41:24 +01:00
|
|
|
if ( ! _.isEmpty( changed ) )
|
2012-11-28 03:03:31 +01:00
|
|
|
model.save( changed );
|
|
|
|
},
|
|
|
|
|
2012-11-15 03:36:06 +01:00
|
|
|
removeFromLibrary: function( event ) {
|
|
|
|
// Stop propagation so the model isn't selected.
|
|
|
|
event.stopPropagation();
|
|
|
|
|
|
|
|
this.collection.remove( this.model );
|
2012-11-20 12:10:04 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
removeFromSelection: function( event ) {
|
|
|
|
var selection = this.options.selection;
|
|
|
|
if ( ! selection )
|
|
|
|
return;
|
|
|
|
|
|
|
|
// Stop propagation so the model isn't selected.
|
|
|
|
event.stopPropagation();
|
|
|
|
|
|
|
|
selection.remove( this.model );
|
2012-09-27 08:53:54 +02:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-10-09 02:27:14 +02:00
|
|
|
/**
|
|
|
|
* wp.media.view.Attachment.Library
|
|
|
|
*/
|
|
|
|
media.view.Attachment.Library = media.view.Attachment.extend({
|
2012-11-20 12:10:04 +01:00
|
|
|
buttons: {
|
|
|
|
check: true
|
|
|
|
}
|
2012-10-09 02:27:14 +02:00
|
|
|
});
|
|
|
|
|
2012-09-27 08:53:54 +02:00
|
|
|
/**
|
2012-11-15 03:36:06 +01:00
|
|
|
* wp.media.view.Attachment.EditLibrary
|
2012-09-27 08:53:54 +02:00
|
|
|
*/
|
2012-11-15 03:36:06 +01:00
|
|
|
media.view.Attachment.EditLibrary = media.view.Attachment.extend({
|
2012-09-27 09:45:26 +02:00
|
|
|
buttons: {
|
|
|
|
close: true
|
2012-10-29 16:13:02 +01:00
|
|
|
}
|
2012-09-27 08:53:54 +02: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 06:54:23 +02:00
|
|
|
/**
|
|
|
|
* wp.media.view.Attachments
|
|
|
|
*/
|
2012-11-19 01:36:47 +01:00
|
|
|
media.view.Attachments = media.View.extend({
|
2012-10-29 07:56:23 +01: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 06:54:23 +02:00
|
|
|
className: 'attachments',
|
2012-11-28 03:03:31 +01: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 06:54:23 +02:00
|
|
|
|
|
|
|
events: {
|
2012-10-29 07:56:23 +01: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 06:54:23 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function() {
|
2012-10-29 19:05:03 +01: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 06:54:23 +02:00
|
|
|
|
|
|
|
_.defaults( this.options, {
|
|
|
|
refreshSensitivity: 200,
|
2012-09-27 08:39:12 +02:00
|
|
|
refreshThreshold: 3,
|
2012-10-03 06:21:50 +02:00
|
|
|
AttachmentView: media.view.Attachment,
|
|
|
|
sortable: false
|
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 06:54:23 +02:00
|
|
|
});
|
|
|
|
|
2012-11-28 03:03:31 +01:00
|
|
|
this._viewsByCid = {};
|
|
|
|
|
|
|
|
this.collection.on( 'add', function( attachment, attachments, options ) {
|
|
|
|
this.views.add( this.createAttachmentView( attachment ), {
|
|
|
|
at: options.index
|
|
|
|
});
|
|
|
|
}, this );
|
|
|
|
|
|
|
|
this.collection.on( 'remove', function( attachment, attachments, options ) {
|
|
|
|
var view = this._viewsByCid[ attachment.cid ];
|
|
|
|
delete this._viewsByCid[ attachment.cid ];
|
|
|
|
|
|
|
|
if ( view )
|
|
|
|
view.remove();
|
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 06:54:23 +02:00
|
|
|
}, this );
|
|
|
|
|
2012-10-29 07:56:23 +01: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 06:54:23 +02:00
|
|
|
|
2012-10-29 07:56:23 +01: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 06:54:23 +02:00
|
|
|
this.scroll = _.chain( this.scroll ).bind( this ).throttle( this.options.refreshSensitivity ).value();
|
2012-10-03 06:21:50 +02:00
|
|
|
|
|
|
|
this.initSortable();
|
2012-10-29 19:05:03 +01: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 23:59:12 +01:00
|
|
|
_.bindAll( this, 'css' );
|
|
|
|
this.model.on( 'change:edge change:gutter', this.css, this );
|
|
|
|
this._resizeCss = _.debounce( _.bind( this.css, this ), this.refreshSensitivity );
|
|
|
|
$(window).on( 'resize.attachments', this._resizeCss );
|
2012-10-29 19:05:03 +01:00
|
|
|
this.css();
|
|
|
|
},
|
|
|
|
|
2012-11-22 04:19:08 +01:00
|
|
|
dispose: function() {
|
2012-11-20 15:04:59 +01: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 23:59:12 +01:00
|
|
|
$(window).off( 'resize.attachments', this._resizeCss );
|
2012-11-22 04:19:08 +01:00
|
|
|
media.View.prototype.dispose.apply( this, arguments );
|
2012-10-29 19:05:03 +01: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 23:59:12 +01:00
|
|
|
var $css = $( '#' + this.el.id + '-css' );
|
2012-10-29 19:05:03 +01:00
|
|
|
|
|
|
|
if ( $css.length )
|
|
|
|
$css.remove();
|
|
|
|
|
2012-11-28 03:03:31 +01:00
|
|
|
media.view.Attachments.$head().append( this.cssTemplate({
|
2012-10-29 19:05:03 +01: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 23:59:12 +01:00
|
|
|
edge: this.edge(),
|
|
|
|
gutter: this.model.get('gutter')
|
2012-10-29 19:05:03 +01:00
|
|
|
}) );
|
2012-10-03 06:21:50 +02: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 23:59:12 +01:00
|
|
|
edge: function() {
|
|
|
|
var edge = this.model.get('edge'),
|
|
|
|
gutter, width, columns;
|
|
|
|
|
|
|
|
if ( ! this.$el.is(':visible') )
|
|
|
|
return edge;
|
|
|
|
|
|
|
|
|
|
|
|
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 06:21:50 +02:00
|
|
|
initSortable: function() {
|
2012-12-03 05:54:03 +01:00
|
|
|
var collection = this.collection,
|
2012-10-03 06:21:50 +02:00
|
|
|
from;
|
|
|
|
|
|
|
|
if ( ! this.options.sortable || ! $.fn.sortable )
|
|
|
|
return;
|
|
|
|
|
2012-10-29 07:56:23 +01:00
|
|
|
this.$el.sortable({
|
2012-10-03 06:21:50 +02: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 07:56:23 +01:00
|
|
|
containment: this.$el,
|
2012-10-03 06:21:50 +02: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 ) {
|
|
|
|
from = ui.item.index();
|
|
|
|
},
|
|
|
|
|
|
|
|
// Update the model's index in the collection.
|
|
|
|
// Do so silently, as the view is already accurate.
|
|
|
|
update: function( event, ui ) {
|
2012-12-02 17:06:31 +01:00
|
|
|
var model = collection.at( from ),
|
|
|
|
comparator = collection.comparator;
|
|
|
|
|
|
|
|
// Temporarily disable the comparator to prevent `add`
|
|
|
|
// from re-sorting.
|
|
|
|
delete collection.comparator;
|
2012-10-03 06:21:50 +02:00
|
|
|
|
2012-12-02 17:06:31 +01:00
|
|
|
// Silently shift the model to its new index.
|
2012-10-03 06:21:50 +02:00
|
|
|
collection.remove( model, {
|
|
|
|
silent: true
|
|
|
|
}).add( model, {
|
2012-12-04 02:26:03 +01:00
|
|
|
silent: true,
|
|
|
|
at: ui.item.index()
|
2012-10-03 06:21:50 +02:00
|
|
|
});
|
2012-12-02 17:06:31 +01:00
|
|
|
|
|
|
|
// Restore the comparator.
|
|
|
|
collection.comparator = comparator;
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
// Fire the `reset` event to ensure other collections sync.
|
|
|
|
collection.trigger( 'reset', collection );
|
|
|
|
|
2012-12-02 17:06:31 +01:00
|
|
|
// If the collection is sorted by menu order,
|
|
|
|
// update the menu order.
|
2012-12-03 05:54:03 +01:00
|
|
|
collection.saveMenuOrder();
|
2012-10-03 06:21:50 +02: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 07:56:23 +01:00
|
|
|
this.$el.sortable( 'option', 'disabled', !! collection.comparator );
|
2012-10-03 06:21:50 +02:00
|
|
|
}, this );
|
2012-12-02 17:06:31 +01: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 06:54:23 +02:00
|
|
|
},
|
|
|
|
|
2012-11-20 15:04:59 +01:00
|
|
|
refreshSortable: function() {
|
|
|
|
if ( ! this.options.sortable || ! $.fn.sortable )
|
|
|
|
return;
|
|
|
|
|
|
|
|
// If the `collection` has a `comparator`, disable sorting.
|
2012-12-02 17:06:31 +01:00
|
|
|
var collection = this.collection,
|
|
|
|
orderby = collection.props.get('orderby'),
|
2012-12-03 05:54:03 +01:00
|
|
|
enabled = 'menuOrder' === orderby || ! collection.comparator;
|
2012-12-02 17:06:31 +01:00
|
|
|
|
|
|
|
this.$el.sortable( 'option', 'disabled', ! enabled );
|
2012-11-20 15:04:59 +01:00
|
|
|
},
|
|
|
|
|
2012-11-28 03:03:31 +01: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 06:54:23 +02:00
|
|
|
|
2012-11-28 03:03:31 +01: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 06:54:23 +02:00
|
|
|
// the list in a single DOM operation.
|
2012-11-28 03:03:31 +01: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 06:54:23 +02:00
|
|
|
|
2012-11-28 03:03:31 +01:00
|
|
|
// If there are no elements, clear the views and load some.
|
|
|
|
} else {
|
|
|
|
this.views.unset();
|
|
|
|
this.collection.more().done( this.scroll );
|
|
|
|
}
|
2012-11-22 04:19:08 +01: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 06:54:23 +02:00
|
|
|
// threshold to query for additional attachments.
|
|
|
|
this.scroll();
|
|
|
|
},
|
|
|
|
|
|
|
|
scroll: function( event ) {
|
|
|
|
// @todo: is this still necessary?
|
2012-10-29 07:56:23 +01: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 06:54:23 +02:00
|
|
|
return;
|
|
|
|
|
2012-11-30 17:41:38 +01: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 23:59:12 +01: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 06:54:23 +02:00
|
|
|
}
|
2012-10-29 07:56:23 +01:00
|
|
|
}
|
2012-10-29 19:05:03 +01:00
|
|
|
}, {
|
|
|
|
$head: (function() {
|
|
|
|
var $head;
|
|
|
|
return function() {
|
|
|
|
return $head = $head || $('head');
|
|
|
|
};
|
|
|
|
}())
|
2012-10-29 07:56:23 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.view.Search
|
|
|
|
*/
|
2012-11-19 01:36:47 +01:00
|
|
|
media.view.Search = media.View.extend({
|
2012-10-29 07:56:23 +01:00
|
|
|
tagName: 'input',
|
|
|
|
className: 'search',
|
|
|
|
|
|
|
|
attributes: {
|
2012-11-09 05:44:31 +01:00
|
|
|
type: 'search',
|
2012-10-29 07:56:23 +01: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 06:54:23 +02:00
|
|
|
},
|
|
|
|
|
2012-10-29 07:56:23 +01:00
|
|
|
events: {
|
2012-11-26 04:35:28 +01:00
|
|
|
'input': 'search',
|
2012-11-10 19:56:11 +01:00
|
|
|
'keyup': 'search',
|
|
|
|
'change': 'search',
|
|
|
|
'search': 'search'
|
2012-10-29 07:56:23 +01: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 06:54:23 +02:00
|
|
|
|
2012-10-29 07:56:23 +01:00
|
|
|
render: function() {
|
|
|
|
this.el.value = this.model.escape('search');
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
search: function( event ) {
|
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 06:54:23 +02:00
|
|
|
if ( event.target.value )
|
2012-10-29 07:56:23 +01:00
|
|
|
this.model.set( 'search', event.target.value );
|
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 06:54:23 +02:00
|
|
|
else
|
2012-10-29 07:56:23 +01:00
|
|
|
this.model.unset('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 06:54:23 +02:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-11-20 14:49:35 +01:00
|
|
|
/**
|
|
|
|
* wp.media.view.AttachmentFilters
|
|
|
|
*/
|
|
|
|
media.view.AttachmentFilters = media.View.extend({
|
|
|
|
tagName: 'select',
|
|
|
|
className: 'attachment-filters',
|
|
|
|
|
|
|
|
events: {
|
|
|
|
change: 'change'
|
|
|
|
},
|
|
|
|
|
2012-11-21 12:04:23 +01:00
|
|
|
keys: [],
|
|
|
|
|
|
|
|
initialize: function() {
|
2012-12-03 08:17:10 +01:00
|
|
|
this.createFilters();
|
|
|
|
|
2012-11-21 12:04:23 +01:00
|
|
|
// Build `<option>` elements.
|
|
|
|
this.$el.html( _.chain( this.filters ).map( function( filter, value ) {
|
|
|
|
return {
|
|
|
|
el: this.make( 'option', { value: value }, filter.text ),
|
|
|
|
priority: filter.priority || 50
|
|
|
|
};
|
|
|
|
}, this ).sortBy('priority').pluck('el').value() );
|
|
|
|
|
|
|
|
this.model.on( 'change', this.select, this );
|
|
|
|
this.select();
|
|
|
|
},
|
|
|
|
|
2012-12-03 08:17:10 +01:00
|
|
|
createFilters: function() {
|
|
|
|
this.filters = {};
|
|
|
|
},
|
|
|
|
|
2012-11-21 12:04:23 +01:00
|
|
|
change: function( event ) {
|
|
|
|
var filter = this.filters[ this.el.value ];
|
|
|
|
|
|
|
|
if ( filter )
|
|
|
|
this.model.set( filter.props );
|
|
|
|
},
|
|
|
|
|
|
|
|
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 ] );
|
|
|
|
});
|
|
|
|
|
|
|
|
if ( equal )
|
|
|
|
return value = id;
|
|
|
|
});
|
|
|
|
|
|
|
|
this.$el.val( value );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
media.view.AttachmentFilters.Uploaded = media.view.AttachmentFilters.extend({
|
2012-12-03 08:17:10 +01:00
|
|
|
createFilters: function() {
|
|
|
|
this.filters = {
|
|
|
|
all: {
|
|
|
|
text: l10n.allMediaItems,
|
|
|
|
props: {
|
|
|
|
uploadedTo: null,
|
|
|
|
orderby: 'date',
|
|
|
|
order: 'DESC'
|
|
|
|
},
|
|
|
|
priority: 10
|
2012-11-21 12:04:23 +01:00
|
|
|
},
|
|
|
|
|
2012-12-03 08:17:10 +01:00
|
|
|
uploaded: {
|
|
|
|
text: l10n.uploadedToThisPost,
|
|
|
|
props: {
|
|
|
|
uploadedTo: media.view.settings.post.id,
|
|
|
|
orderby: 'menuOrder',
|
|
|
|
order: 'ASC'
|
|
|
|
},
|
|
|
|
priority: 20
|
|
|
|
}
|
|
|
|
};
|
2012-11-21 12:04:23 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
media.view.AttachmentFilters.All = media.view.AttachmentFilters.extend({
|
2012-12-03 08:17:10 +01:00
|
|
|
createFilters: function() {
|
2012-11-21 11:18:59 +01:00
|
|
|
var filters = {};
|
|
|
|
|
|
|
|
_.each( media.view.settings.mimeTypes || {}, function( text, key ) {
|
|
|
|
filters[ key ] = {
|
|
|
|
text: text,
|
|
|
|
props: {
|
2012-11-28 00:20:12 +01:00
|
|
|
type: key,
|
2012-11-30 16:11:44 +01:00
|
|
|
uploadedTo: null,
|
2012-11-28 00:20:12 +01:00
|
|
|
orderby: 'date',
|
|
|
|
order: 'DESC'
|
2012-11-21 11:18:59 +01:00
|
|
|
}
|
|
|
|
};
|
|
|
|
});
|
2012-11-20 14:49:35 +01:00
|
|
|
|
2012-11-21 11:18:59 +01:00
|
|
|
filters.all = {
|
|
|
|
text: l10n.allMediaItems,
|
|
|
|
props: {
|
2012-11-28 00:20:12 +01:00
|
|
|
type: null,
|
2012-11-30 16:11:44 +01:00
|
|
|
uploadedTo: null,
|
2012-11-28 00:20:12 +01:00
|
|
|
orderby: 'date',
|
|
|
|
order: 'DESC'
|
2012-11-21 11:18:59 +01:00
|
|
|
},
|
|
|
|
priority: 10
|
|
|
|
};
|
|
|
|
|
|
|
|
filters.uploaded = {
|
|
|
|
text: l10n.uploadedToThisPost,
|
|
|
|
props: {
|
2012-11-28 00:20:12 +01:00
|
|
|
type: null,
|
2012-12-03 08:17:10 +01:00
|
|
|
uploadedTo: media.view.settings.post.id,
|
2012-11-28 00:20:12 +01:00
|
|
|
orderby: 'menuOrder',
|
|
|
|
order: 'ASC'
|
2012-11-21 11:18:59 +01:00
|
|
|
},
|
|
|
|
priority: 20
|
|
|
|
};
|
|
|
|
|
2012-12-03 08:17:10 +01:00
|
|
|
this.filters = filters;
|
|
|
|
}
|
2012-11-20 14:49:35 +01: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 23:59:12 +01:00
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.view.AttachmentsBrowser
|
|
|
|
*/
|
2012-11-19 01:36:47 +01: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 23:59:12 +01:00
|
|
|
tagName: 'div',
|
|
|
|
className: 'attachments-browser',
|
|
|
|
|
|
|
|
initialize: function() {
|
|
|
|
_.defaults( this.options, {
|
2012-11-20 14:49:35 +01:00
|
|
|
filters: false,
|
|
|
|
search: true,
|
2012-11-22 07:30:25 +01:00
|
|
|
display: false,
|
2012-11-07 21:14:41 +01: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 23:59:12 +01:00
|
|
|
});
|
|
|
|
|
2012-11-22 07:30:25 +01:00
|
|
|
this.createToolbar();
|
2012-11-30 07:01:47 +01:00
|
|
|
this.updateContent();
|
2012-11-22 07:30:25 +01:00
|
|
|
this.createSidebar();
|
2012-11-30 07:01:47 +01:00
|
|
|
|
|
|
|
this.collection.on( 'add remove reset', this.updateContent, this );
|
2012-11-22 07:30:25 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
dispose: function() {
|
|
|
|
this.options.selection.off( null, null, this );
|
|
|
|
media.View.prototype.dispose.apply( this, arguments );
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
createToolbar: function() {
|
|
|
|
var filters, FiltersConstructor;
|
|
|
|
|
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 23:59:12 +01:00
|
|
|
this.toolbar = new media.view.Toolbar({
|
|
|
|
controller: this.controller
|
|
|
|
});
|
|
|
|
|
2012-11-22 02:43:31 +01:00
|
|
|
this.views.add( this.toolbar );
|
|
|
|
|
2012-11-21 12:04:23 +01:00
|
|
|
filters = this.options.filters;
|
|
|
|
if ( 'uploaded' === filters )
|
|
|
|
FiltersConstructor = media.view.AttachmentFilters.Uploaded;
|
|
|
|
else if ( 'all' === filters )
|
|
|
|
FiltersConstructor = media.view.AttachmentFilters.All;
|
|
|
|
|
|
|
|
if ( FiltersConstructor ) {
|
|
|
|
this.toolbar.set( 'filters', new FiltersConstructor({
|
2012-11-20 14:49:35 +01:00
|
|
|
controller: this.controller,
|
|
|
|
model: this.collection.props,
|
|
|
|
priority: -80
|
|
|
|
}).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 23:59:12 +01:00
|
|
|
if ( this.options.search ) {
|
2012-11-12 06:57:12 +01: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 23:59:12 +01:00
|
|
|
controller: this.controller,
|
|
|
|
model: this.collection.props,
|
2012-11-20 14:49:35 +01:00
|
|
|
priority: 60
|
2012-11-09 05:44:31 +01: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 23:59:12 +01:00
|
|
|
}
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
if ( this.options.dragInfo ) {
|
2012-11-19 01:36:47 +01:00
|
|
|
this.toolbar.set( 'dragInfo', new media.View({
|
2012-11-10 10:11:33 +01:00
|
|
|
el: $( '<div class="instructions">' + l10n.dragInfo + '</div>' )[0],
|
|
|
|
priority: -40
|
|
|
|
}) );
|
|
|
|
}
|
2012-11-22 07:30:25 +01:00
|
|
|
},
|
2012-11-13 00:52:17 +01:00
|
|
|
|
2012-11-30 07:01:47 +01:00
|
|
|
updateContent: function() {
|
|
|
|
var view = this;
|
|
|
|
|
|
|
|
if( ! this.attachments )
|
|
|
|
this.createAttachments();
|
|
|
|
|
|
|
|
if ( ! this.collection.length ) {
|
|
|
|
this.collection.more().done( function() {
|
|
|
|
if ( ! view.collection.length )
|
|
|
|
view.createUploader();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2012-11-30 17:45:43 +01:00
|
|
|
removeContent: function() {
|
|
|
|
_.each(['attachments','uploader'], function( key ) {
|
|
|
|
if ( this[ key ] ) {
|
|
|
|
this[ key ].remove();
|
|
|
|
delete this[ key ];
|
|
|
|
}
|
|
|
|
}, this );
|
|
|
|
},
|
|
|
|
|
2012-11-30 07:01:47 +01:00
|
|
|
createUploader: function() {
|
2012-11-30 17:45:43 +01:00
|
|
|
this.removeContent();
|
2012-11-30 07:01:47 +01:00
|
|
|
|
|
|
|
this.uploader = new media.view.UploaderInline({
|
2012-12-04 02:26:03 +01:00
|
|
|
controller: this.controller,
|
|
|
|
status: false,
|
|
|
|
message: l10n.noItemsFound
|
2012-11-30 07:01:47 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
this.views.add( this.uploader );
|
|
|
|
},
|
|
|
|
|
2012-11-22 07:30:25 +01:00
|
|
|
createAttachments: function() {
|
2012-11-30 17:45:43 +01:00
|
|
|
this.removeContent();
|
2012-11-30 07:01:47 +01: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 23:59:12 +01:00
|
|
|
this.attachments = new media.view.Attachments({
|
|
|
|
controller: this.controller,
|
|
|
|
collection: this.collection,
|
2012-11-15 03:36:06 +01: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 23:59:12 +01:00
|
|
|
model: this.model,
|
|
|
|
sortable: this.options.sortable,
|
2012-11-07 21:14:41 +01: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 23:59:12 +01:00
|
|
|
// The single `Attachment` view to be used in the `Attachments` view.
|
2012-11-07 21:14:41 +01: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 23:59:12 +01:00
|
|
|
});
|
|
|
|
|
2012-11-22 02:43:31 +01:00
|
|
|
this.views.add( this.attachments );
|
2012-11-22 07:30:25 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
createSidebar: function() {
|
2012-11-22 10:32:21 +01:00
|
|
|
var options = this.options,
|
|
|
|
selection = options.selection,
|
|
|
|
sidebar = this.sidebar = new media.view.Sidebar({
|
|
|
|
controller: this.controller
|
|
|
|
});
|
|
|
|
|
|
|
|
this.views.add( sidebar );
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
if ( this.controller.uploader ) {
|
2012-11-22 10:32:21 +01:00
|
|
|
sidebar.set( 'uploads', new media.view.UploaderStatus({
|
|
|
|
controller: this.controller,
|
|
|
|
priority: 40
|
|
|
|
}) );
|
|
|
|
}
|
2012-11-22 07:30:25 +01:00
|
|
|
|
2012-11-22 10:32:21 +01:00
|
|
|
selection.on( 'selection:single', this.createSingle, this );
|
|
|
|
selection.on( 'selection:unsingle', this.disposeSingle, this );
|
2012-11-22 07:30:25 +01:00
|
|
|
|
2012-11-22 10:32:21 +01:00
|
|
|
if ( selection.single() )
|
|
|
|
this.createSingle();
|
2012-11-22 07:30:25 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
createSingle: function() {
|
|
|
|
var sidebar = this.sidebar,
|
|
|
|
single = this.options.selection.single(),
|
|
|
|
views = {};
|
|
|
|
|
|
|
|
sidebar.set( 'details', new media.view.Attachment.Details({
|
|
|
|
controller: this.controller,
|
|
|
|
model: single,
|
|
|
|
priority: 80
|
|
|
|
}) );
|
|
|
|
|
2012-11-26 16:05:14 +01:00
|
|
|
sidebar.set( 'compat', new media.view.AttachmentCompat({
|
|
|
|
controller: this.controller,
|
|
|
|
model: single,
|
|
|
|
priority: 120
|
|
|
|
}) );
|
2012-11-22 07:30:25 +01: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 23:59:12 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.view.Selection
|
|
|
|
*/
|
2012-11-19 01:36:47 +01: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 23:59:12 +01:00
|
|
|
tagName: 'div',
|
|
|
|
className: 'media-selection',
|
|
|
|
template: media.template('media-selection'),
|
|
|
|
|
|
|
|
events: {
|
2012-11-15 03:36:06 +01: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 23:59:12 +01:00
|
|
|
'click .clear-selection': 'clear'
|
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function() {
|
|
|
|
_.defaults( this.options, {
|
2012-11-15 03:36:06 +01: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 23:59:12 +01:00
|
|
|
clearable: true
|
|
|
|
});
|
|
|
|
|
|
|
|
this.attachments = new media.view.Attachments({
|
|
|
|
controller: this.controller,
|
|
|
|
collection: this.collection,
|
2012-11-15 03:36:06 +01: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 23:59:12 +01:00
|
|
|
sortable: true,
|
|
|
|
model: new Backbone.Model({
|
|
|
|
edge: 40,
|
|
|
|
gutter: 5
|
|
|
|
}),
|
|
|
|
|
|
|
|
// The single `Attachment` view to be used in the `Attachments` view.
|
|
|
|
AttachmentView: media.view.Attachment.Selection
|
|
|
|
});
|
|
|
|
|
2012-12-04 17:21:57 +01: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 23:59:12 +01:00
|
|
|
this.collection.on( 'add remove reset', this.refresh, this );
|
2012-12-04 19:23:47 +01: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 23:59:12 +01:00
|
|
|
},
|
|
|
|
|
2012-12-04 17:21:57 +01: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 23:59:12 +01:00
|
|
|
this.refresh();
|
|
|
|
},
|
|
|
|
|
|
|
|
refresh: function() {
|
|
|
|
// If the selection hasn't been rendered, bail.
|
|
|
|
if ( ! this.$el.children().length )
|
|
|
|
return;
|
|
|
|
|
2012-12-04 19:23:47 +01: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 23:59:12 +01:00
|
|
|
// If nothing is selected, display nothing.
|
2012-12-04 19:23:47 +01:00
|
|
|
this.$el.toggleClass( 'empty', ! collection.length );
|
|
|
|
this.$el.toggleClass( 'one', 1 === collection.length );
|
|
|
|
this.$el.toggleClass( 'editing', editing );
|
|
|
|
|
|
|
|
this.$('.count').text( collection.length + ' ' + l10n.selected );
|
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 23:59:12 +01:00
|
|
|
},
|
|
|
|
|
2012-11-15 03:36:06 +01:00
|
|
|
edit: function( event ) {
|
|
|
|
event.preventDefault();
|
|
|
|
if ( this.options.editable )
|
|
|
|
this.options.editable.call( this, 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 23:59:12 +01:00
|
|
|
clear: function( event ) {
|
|
|
|
event.preventDefault();
|
2012-12-03 06:32:25 +01: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 23:59:12 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.view.Attachment.Selection
|
|
|
|
*/
|
|
|
|
media.view.Attachment.Selection = media.view.Attachment.extend({
|
2012-11-15 03:36:06 +01: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 23:59:12 +01:00
|
|
|
// On click, just select the model, instead of removing the model from
|
|
|
|
// the selection.
|
|
|
|
toggleSelection: function() {
|
2012-11-15 03:36:06 +01:00
|
|
|
this.options.selection.single( this.model );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
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 23:59:12 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-10-16 21:25:17 +02:00
|
|
|
|
|
|
|
/**
|
2012-10-31 20:22:25 +01:00
|
|
|
* wp.media.view.Settings
|
2012-10-16 21:25:17 +02:00
|
|
|
*/
|
2012-11-19 01:36:47 +01:00
|
|
|
media.view.Settings = media.View.extend({
|
2012-10-16 21:25:17 +02:00
|
|
|
events: {
|
2012-10-31 20:22:25 +01:00
|
|
|
'click button': 'updateHandler',
|
|
|
|
'change input': 'updateHandler',
|
|
|
|
'change select': 'updateHandler',
|
|
|
|
'change textarea': 'updateHandler'
|
2012-10-16 21:25:17 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function() {
|
2012-10-31 20:22:25 +01:00
|
|
|
this.model = this.model || new Backbone.Model();
|
2012-10-16 21:25:17 +02:00
|
|
|
this.model.on( 'change', this.updateChanges, this );
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
2012-11-08 15:15:09 +01:00
|
|
|
this.$el.html( this.template( _.defaults({
|
|
|
|
model: this.model.toJSON()
|
|
|
|
}, this.options ) ) );
|
2012-10-16 21:25:17 +02:00
|
|
|
|
|
|
|
// Select the correct values.
|
|
|
|
_( this.model.attributes ).chain().keys().each( this.update, this );
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
update: function( key ) {
|
2012-11-08 15:15:09 +01:00
|
|
|
var value = this.model.get( key ),
|
2012-10-31 20:22:25 +01:00
|
|
|
$setting = this.$('[data-setting="' + key + '"]'),
|
2012-12-04 05:04:45 +01:00
|
|
|
$buttons, $value;
|
2012-10-31 20:22:25 +01:00
|
|
|
|
2012-11-08 15:15:09 +01:00
|
|
|
// Bail if we didn't find a matching setting.
|
|
|
|
if ( ! $setting.length )
|
2012-10-31 20:22:25 +01:00
|
|
|
return;
|
|
|
|
|
2012-11-08 15:15:09 +01:00
|
|
|
// Attempt to determine how the setting is rendered and update
|
|
|
|
// the selected value.
|
|
|
|
|
|
|
|
// Handle dropdowns.
|
|
|
|
if ( $setting.is('select') ) {
|
2012-12-04 05:04:45 +01:00
|
|
|
$value = $setting.find('[value="' + value + '"]');
|
|
|
|
|
|
|
|
if ( $value.length ) {
|
2012-12-04 20:38:16 +01:00
|
|
|
$value.prop( 'selected', true );
|
2012-12-04 05:04:45 +01:00
|
|
|
} else {
|
|
|
|
// If we can't find the desired value, record what *is* selected.
|
2012-12-04 19:50:49 +01:00
|
|
|
this.model.set( $setting.data('setting'), $setting.find(':selected').val() );
|
2012-12-04 05:04:45 +01:00
|
|
|
}
|
|
|
|
|
2012-11-08 15:15:09 +01:00
|
|
|
|
|
|
|
// Handle button groups.
|
|
|
|
} else if ( $setting.hasClass('button-group') ) {
|
2012-10-31 20:22:25 +01:00
|
|
|
$buttons = $setting.find('button').removeClass('active');
|
2012-11-08 15:15:09 +01:00
|
|
|
$buttons.filter( '[value="' + value + '"]' ).addClass('active');
|
2012-11-12 06:57:12 +01:00
|
|
|
|
|
|
|
// Handle text inputs and textareas.
|
|
|
|
} else if ( $setting.is('input[type="text"], textarea') ) {
|
|
|
|
if ( ! $setting.is(':focus') )
|
|
|
|
$setting.val( value );
|
2012-12-03 06:32:25 +01:00
|
|
|
|
|
|
|
// Handle checkboxes.
|
|
|
|
} else if ( $setting.is('input[type="checkbox"]') ) {
|
|
|
|
$setting.attr( 'checked', !! value );
|
2012-10-31 20:22:25 +01:00
|
|
|
}
|
2012-10-16 21:25:17 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
updateHandler: function( event ) {
|
2012-11-08 15:15:09 +01:00
|
|
|
var $setting = $( event.target ).closest('[data-setting]'),
|
|
|
|
value = event.target.value,
|
|
|
|
userSetting;
|
2012-10-16 21:25:17 +02:00
|
|
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
2012-11-08 15:15:09 +01:00
|
|
|
if ( ! $setting.length )
|
|
|
|
return;
|
|
|
|
|
2012-12-03 06:32:25 +01:00
|
|
|
// Use the correct value for checkboxes.
|
|
|
|
if ( $setting.is('input[type="checkbox"]') )
|
|
|
|
value = $setting[0].checked;
|
|
|
|
|
|
|
|
// Update the corresponding setting.
|
2012-11-08 15:15:09 +01:00
|
|
|
this.model.set( $setting.data('setting'), value );
|
|
|
|
|
|
|
|
// If the setting has a corresponding user setting,
|
|
|
|
// update that as well.
|
|
|
|
if ( userSetting = $setting.data('userSetting') )
|
|
|
|
setUserSetting( userSetting, value );
|
2012-10-16 21:25:17 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
updateChanges: function( model, options ) {
|
|
|
|
if ( options.changes )
|
|
|
|
_( options.changes ).chain().keys().each( this.update, this );
|
|
|
|
}
|
|
|
|
});
|
2012-10-29 16:13:02 +01:00
|
|
|
|
2012-10-31 20:22:25 +01:00
|
|
|
/**
|
|
|
|
* wp.media.view.Settings.AttachmentDisplay
|
|
|
|
*/
|
|
|
|
media.view.Settings.AttachmentDisplay = media.view.Settings.extend({
|
|
|
|
className: 'attachment-display-settings',
|
|
|
|
template: media.template('attachment-display-settings'),
|
|
|
|
|
2012-11-08 15:15:09 +01:00
|
|
|
initialize: function() {
|
2012-11-20 12:57:08 +01:00
|
|
|
var attachment = this.options.attachment;
|
|
|
|
|
2012-11-08 15:15:09 +01:00
|
|
|
_.defaults( this.options, {
|
|
|
|
userSettings: false
|
|
|
|
});
|
2012-11-20 12:57:08 +01:00
|
|
|
|
2012-11-08 15:15:09 +01:00
|
|
|
media.view.Settings.prototype.initialize.apply( this, arguments );
|
2012-12-02 01:43:08 +01:00
|
|
|
this.model.on( 'change:link', this.updateLinkTo, this );
|
2012-11-20 12:57:08 +01:00
|
|
|
|
|
|
|
if ( attachment )
|
|
|
|
attachment.on( 'change:uploading', this.render, this );
|
|
|
|
},
|
|
|
|
|
|
|
|
dispose: function() {
|
|
|
|
var attachment = this.options.attachment;
|
|
|
|
if ( attachment )
|
|
|
|
attachment.off( null, null, this );
|
|
|
|
|
|
|
|
media.view.Settings.prototype.dispose.apply( this, arguments );
|
2012-11-10 21:36:46 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
2012-11-20 12:57:08 +01:00
|
|
|
var attachment = this.options.attachment;
|
|
|
|
if ( attachment ) {
|
|
|
|
_.extend( this.options, {
|
|
|
|
sizes: attachment.get('sizes'),
|
|
|
|
type: attachment.get('type')
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2012-11-10 21:36:46 +01:00
|
|
|
media.view.Settings.prototype.render.call( this );
|
2012-12-02 01:43:08 +01:00
|
|
|
this.updateLinkTo();
|
2012-11-10 21:36:46 +01:00
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
2012-12-02 01:43:08 +01:00
|
|
|
updateLinkTo: function() {
|
|
|
|
var linkTo = this.model.get('link'),
|
|
|
|
$input = this.$('.link-to-custom'),
|
|
|
|
attachment = this.options.attachment;
|
2012-11-10 21:36:46 +01:00
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
if ( 'none' === linkTo || ( ! attachment && 'custom' !== linkTo ) ) {
|
2012-11-10 21:36:46 +01:00
|
|
|
$input.hide();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2012-12-04 02:26:03 +01: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-02 01:43:08 +01:00
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
$input.prop( 'readonly', 'custom' !== linkTo );
|
2012-12-02 01:43:08 +01:00
|
|
|
}
|
|
|
|
|
2012-12-04 02:26:03 +01:00
|
|
|
$input.show();
|
2012-11-10 21:36:46 +01:00
|
|
|
|
|
|
|
// If the input is visible, focus and select its contents.
|
|
|
|
if ( $input.is(':visible') )
|
|
|
|
$input.focus()[0].select();
|
2012-10-31 20:22:25 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.view.Settings.Gallery
|
|
|
|
*/
|
|
|
|
media.view.Settings.Gallery = media.view.Settings.extend({
|
|
|
|
className: 'gallery-settings',
|
2012-11-08 15:15:09 +01:00
|
|
|
template: media.template('gallery-settings')
|
2012-10-31 20:22:25 +01:00
|
|
|
});
|
|
|
|
|
2012-10-29 16:13:02 +01:00
|
|
|
/**
|
|
|
|
* wp.media.view.Attachment.Details
|
|
|
|
*/
|
|
|
|
media.view.Attachment.Details = media.view.Attachment.extend({
|
|
|
|
tagName: 'div',
|
|
|
|
className: 'attachment-details',
|
|
|
|
template: media.template('attachment-details'),
|
|
|
|
|
|
|
|
events: {
|
2012-11-10 19:25:04 +01:00
|
|
|
'change [data-setting]': 'updateSetting',
|
|
|
|
'change [data-setting] input': 'updateSetting',
|
|
|
|
'change [data-setting] select': 'updateSetting',
|
2012-11-27 16:50:59 +01:00
|
|
|
'change [data-setting] textarea': 'updateSetting',
|
|
|
|
'click .delete-attachment': 'deleteAttachment'
|
|
|
|
},
|
|
|
|
|
|
|
|
deleteAttachment: function(event) {
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
if ( confirm( l10n.warnDelete ) )
|
|
|
|
this.model.destroy();
|
2012-10-29 16:13:02 +01:00
|
|
|
}
|
|
|
|
});
|
2012-11-10 08:51:37 +01:00
|
|
|
|
2012-11-11 02:26:42 +01:00
|
|
|
/**
|
|
|
|
* wp.media.view.AttachmentCompat
|
|
|
|
*/
|
2012-11-19 01:36:47 +01:00
|
|
|
media.view.AttachmentCompat = media.View.extend({
|
2012-11-11 02:26:42 +01:00
|
|
|
tagName: 'form',
|
|
|
|
className: 'compat-item',
|
|
|
|
|
|
|
|
events: {
|
|
|
|
'submit': 'preventDefault',
|
|
|
|
'change input': 'save',
|
|
|
|
'change select': 'save',
|
|
|
|
'change textarea': 'save'
|
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function() {
|
|
|
|
this.model.on( 'change:compat', this.render, this );
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
var compat = this.model.get('compat');
|
|
|
|
if ( ! compat || ! compat.item )
|
|
|
|
return;
|
|
|
|
|
|
|
|
this.$el.html( compat.item );
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
preventDefault: function( event ) {
|
|
|
|
event.preventDefault();
|
|
|
|
},
|
|
|
|
|
|
|
|
save: function( event ) {
|
|
|
|
var data = {};
|
|
|
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
_.each( this.$el.serializeArray(), function( pair ) {
|
|
|
|
data[ pair.name ] = pair.value;
|
|
|
|
});
|
|
|
|
|
|
|
|
this.model.saveCompat( data );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-11-10 08:51:37 +01:00
|
|
|
/**
|
|
|
|
* wp.media.view.Iframe
|
|
|
|
*/
|
2012-11-19 01:36:47 +01:00
|
|
|
media.view.Iframe = media.View.extend({
|
2012-11-10 08:51:37 +01:00
|
|
|
className: 'media-iframe',
|
|
|
|
|
|
|
|
render: function() {
|
2012-12-04 02:26:03 +01:00
|
|
|
this.views.detach();
|
2012-11-10 08:51:37 +01:00
|
|
|
this.$el.html( '<iframe src="' + this.controller.state().get('src') + '" />' );
|
2012-12-04 02:26:03 +01:00
|
|
|
this.views.render();
|
2012-11-10 08:51:37 +01:00
|
|
|
return this;
|
|
|
|
}
|
|
|
|
});
|
2012-11-12 06:57:12 +01:00
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.view.Embed
|
|
|
|
*/
|
2012-11-19 01:36:47 +01:00
|
|
|
media.view.Embed = media.View.extend({
|
2012-11-12 06:57:12 +01:00
|
|
|
className: 'media-embed',
|
|
|
|
|
|
|
|
initialize: function() {
|
|
|
|
this.url = new media.view.EmbedUrl({
|
|
|
|
controller: this.controller,
|
2012-12-04 02:26:03 +01:00
|
|
|
model: this.model.props
|
2012-11-12 06:57:12 +01:00
|
|
|
}).render();
|
|
|
|
|
2012-11-19 01:36:47 +01:00
|
|
|
this._settings = new media.View();
|
2012-11-12 06:57:12 +01:00
|
|
|
this.refresh();
|
|
|
|
this.model.on( 'change:type', this.refresh, this );
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
this.$el.html([ this.url.el, this._settings.el ]);
|
|
|
|
this.url.focus();
|
2012-11-20 15:44:23 +01:00
|
|
|
this.views.render();
|
2012-11-12 06:57:12 +01:00
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
settings: function( view ) {
|
|
|
|
view.render();
|
|
|
|
this._settings.$el.replaceWith( view.$el );
|
|
|
|
this._settings.remove();
|
|
|
|
this._settings = view;
|
|
|
|
},
|
|
|
|
|
|
|
|
refresh: function() {
|
|
|
|
var type = this.model.get('type'),
|
|
|
|
constructor;
|
|
|
|
|
|
|
|
if ( 'image' === type )
|
|
|
|
constructor = media.view.EmbedImage;
|
|
|
|
else if ( 'link' === type )
|
|
|
|
constructor = media.view.EmbedLink;
|
|
|
|
else
|
|
|
|
return;
|
|
|
|
|
|
|
|
this.settings( new constructor({
|
|
|
|
controller: this.controller,
|
2012-12-04 02:26:03 +01:00
|
|
|
model: this.model.props,
|
2012-11-12 06:57:12 +01:00
|
|
|
priority: 40
|
|
|
|
}) );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.view.EmbedUrl
|
|
|
|
*/
|
2012-11-19 01:36:47 +01:00
|
|
|
media.view.EmbedUrl = media.View.extend({
|
2012-11-12 06:57:12 +01:00
|
|
|
tagName: 'label',
|
|
|
|
className: 'embed-url',
|
|
|
|
|
|
|
|
events: {
|
2012-11-26 04:35:28 +01:00
|
|
|
'input': 'url',
|
|
|
|
'keyup': 'url',
|
|
|
|
'change': 'url'
|
2012-11-12 06:57:12 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function() {
|
|
|
|
this.input = this.make( 'input', {
|
|
|
|
type: 'text',
|
|
|
|
value: this.model.get('url') || ''
|
|
|
|
});
|
|
|
|
|
|
|
|
this.$input = $( this.input );
|
2012-12-04 02:26:03 +01:00
|
|
|
this.$el.append( this.input );
|
2012-11-12 06:57:12 +01:00
|
|
|
|
|
|
|
this.model.on( 'change:url', this.render, this );
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
var $input = this.$input;
|
|
|
|
|
|
|
|
if ( $input.is(':focus') )
|
|
|
|
return;
|
|
|
|
|
|
|
|
this.input.value = this.model.get('url') || 'http://';
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
url: function( event ) {
|
|
|
|
this.model.set( 'url', event.target.value );
|
|
|
|
},
|
|
|
|
|
|
|
|
focus: function() {
|
|
|
|
var $input = this.$input;
|
|
|
|
// If the input is visible, focus and select its contents.
|
|
|
|
if ( $input.is(':visible') )
|
|
|
|
$input.focus()[0].select();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.view.EmbedLink
|
|
|
|
*/
|
|
|
|
media.view.EmbedLink = media.view.Settings.extend({
|
|
|
|
className: 'embed-link-settings',
|
|
|
|
template: media.template('embed-link-settings')
|
|
|
|
});
|
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.view.EmbedImage
|
|
|
|
*/
|
|
|
|
media.view.EmbedImage = media.view.Settings.AttachmentDisplay.extend({
|
|
|
|
className: 'embed-image-settings',
|
|
|
|
template: media.template('embed-image-settings'),
|
|
|
|
|
|
|
|
initialize: function() {
|
|
|
|
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') );
|
|
|
|
}
|
|
|
|
});
|
2012-12-03 07:37:49 +01:00
|
|
|
}(jQuery));
|