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.
|
|
|
|
l10n = media.view.l10n = _.isUndefined( _wpMediaViewsL10n ) ? {} : _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-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.
|
|
|
|
media.transition = function( selector ) {
|
|
|
|
var deferred = $.Deferred();
|
|
|
|
|
|
|
|
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 );
|
|
|
|
|
|
|
|
// 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-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;
|
|
|
|
|
|
|
|
_.extend( media.controller.StateMachine.prototype, {
|
|
|
|
// Fetch a state model.
|
|
|
|
//
|
|
|
|
// Implicitly creates states.
|
|
|
|
get: function( id ) {
|
|
|
|
// Ensure that the `states` collection exists so the `StateMachine`
|
|
|
|
// can be used as a mixin.
|
|
|
|
this.states = this.states || new Backbone.Collection();
|
|
|
|
|
|
|
|
if ( ! this.states.get( id ) )
|
|
|
|
this.states.add({ id: id });
|
|
|
|
return this.states.get( id );
|
|
|
|
},
|
|
|
|
|
|
|
|
// Selects or returns the active state.
|
|
|
|
//
|
|
|
|
// If a `id` is provided, sets that as the current state.
|
|
|
|
// If no parameters are provided, returns the current state object.
|
|
|
|
state: function( id ) {
|
|
|
|
var 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
|
|
|
if ( ! id )
|
|
|
|
return this._state ? this.get( this._state ) : null;
|
|
|
|
|
|
|
|
previous = this.state();
|
|
|
|
|
|
|
|
// Bail if we're trying to select the current state, or a state
|
|
|
|
// that does not exist.
|
|
|
|
if ( previous && id === previous.id || ! this.states.get( id ) )
|
|
|
|
return;
|
2012-10-29 00:29:17 +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
|
|
|
if ( previous )
|
|
|
|
previous.trigger('deactivate');
|
|
|
|
|
|
|
|
this._state = id;
|
|
|
|
this.state().trigger('activate');
|
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({
|
|
|
|
initialize: function() {
|
|
|
|
this.on( 'activate', this._activate, this );
|
|
|
|
this.on( 'activate', this.activate, this );
|
|
|
|
this.on( 'deactivate', this._deactivate, this );
|
|
|
|
this.on( 'deactivate', this.deactivate, this );
|
|
|
|
},
|
|
|
|
|
|
|
|
activate: function() {},
|
|
|
|
_activate: function() {
|
|
|
|
this.active = true;
|
|
|
|
|
|
|
|
this.menu();
|
|
|
|
this.toolbar();
|
|
|
|
this.sidebar();
|
|
|
|
this.content();
|
|
|
|
},
|
|
|
|
|
|
|
|
deactivate: function() {},
|
|
|
|
_deactivate: function() {
|
|
|
|
this.active = false;
|
|
|
|
},
|
|
|
|
|
|
|
|
menu: function() {
|
|
|
|
var menu = this.get('menu');
|
|
|
|
|
|
|
|
if ( ! menu )
|
|
|
|
return;
|
|
|
|
|
|
|
|
this.frame.menu( menu );
|
|
|
|
menu.select( this.id );
|
|
|
|
},
|
|
|
|
|
|
|
|
toolbar: function() {},
|
|
|
|
sidebar: function() {},
|
|
|
|
content: function() {}
|
|
|
|
});
|
|
|
|
|
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-10-29 00:29:17 +01:00
|
|
|
id: 'library',
|
|
|
|
multiple: false,
|
2012-10-29 07:56:23 +01:00
|
|
|
describe: false,
|
2012-10-31 22:43:59 +01:00
|
|
|
title: l10n.mediaLibraryTitle
|
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
|
|
|
|
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.State.prototype.initialize.apply( this, arguments );
|
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-11-06 02:19:39 +01:00
|
|
|
var selection = this.get('selection');
|
|
|
|
|
2012-10-29 16:13:02 +01:00
|
|
|
// If we're in a workflow that supports multiple attachments,
|
|
|
|
// automatically select any uploading attachments.
|
|
|
|
if ( this.get('multiple') )
|
|
|
|
wp.Uploader.queue.on( 'add', this.selectUpload, this );
|
2012-10-31 00:36:38 +01:00
|
|
|
|
2012-11-06 02:19:39 +01:00
|
|
|
selection.on( 'selection:single', this.buildDetails, this );
|
|
|
|
selection.on( 'selection:unsingle', this.clearDetails, this );
|
|
|
|
selection.on( 'add remove reset', this.updateToolbarVisibility, this );
|
2012-11-05 03:43:47 +01:00
|
|
|
|
|
|
|
this._updateEmpty();
|
|
|
|
this.get('library').on( 'add remove reset', this._updateEmpty, this );
|
|
|
|
this.on( 'change:empty', this.refresh, this );
|
|
|
|
this.refresh();
|
2012-10-29 16:13:02 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
deactivate: function() {
|
|
|
|
wp.Uploader.queue.off( 'add', this.selectUpload, 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-05 03:43:47 +01:00
|
|
|
this.get('library').off( 'add remove reset', this._updateEmpty, this );
|
|
|
|
this.off( 'change:empty', this.refresh, this );
|
2012-10-29 16:13:02 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
toolbar: function() {
|
2012-11-06 02:19:39 +01:00
|
|
|
var frame = this.frame;
|
2012-10-29 00:29:17 +01:00
|
|
|
|
2012-11-06 02:19:39 +01:00
|
|
|
frame.toolbar( new media.view.Toolbar.PostLibrary({
|
|
|
|
controller: frame
|
|
|
|
}) );
|
2012-10-29 16:13:02 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
sidebar: function() {
|
|
|
|
var frame = this.frame;
|
2012-10-29 00:29:17 +01:00
|
|
|
|
2012-10-29 07:56:23 +01:00
|
|
|
// Sidebar.
|
|
|
|
frame.sidebar( new media.view.Sidebar({
|
2012-10-29 16:13:02 +01:00
|
|
|
controller: frame
|
2012-10-29 07:56:23 +01:00
|
|
|
}) );
|
|
|
|
|
2012-10-31 00:36:38 +01:00
|
|
|
this.details();
|
2012-10-29 16:13:02 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
content: function() {
|
2012-11-05 03:43:47 +01:00
|
|
|
var frame = this.frame,
|
|
|
|
library = this.get('library'),
|
|
|
|
view;
|
2012-10-29 16:13:02 +01:00
|
|
|
|
2012-10-29 07:56:23 +01:00
|
|
|
// Content.
|
2012-11-05 03:43:47 +01:00
|
|
|
if ( this.get('empty') ) {
|
|
|
|
// Attempt to fetch any Attachments we don't already have.
|
|
|
|
library.more();
|
|
|
|
|
|
|
|
// In the meantime, render an inline uploader.
|
|
|
|
view = new media.view.UploaderInline({
|
|
|
|
controller: frame
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
// Browse our library of attachments.
|
|
|
|
view = new media.view.AttachmentsBrowser({
|
|
|
|
controller: frame,
|
|
|
|
collection: library,
|
|
|
|
model: this
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
frame.content( view.render() );
|
|
|
|
},
|
|
|
|
|
|
|
|
refresh: function() {
|
|
|
|
this.frame.$el.toggleClass( 'hide-sidebar hide-toolbar', this.get('empty') );
|
|
|
|
this.content();
|
|
|
|
},
|
|
|
|
|
|
|
|
_updateEmpty: function() {
|
|
|
|
this.set( 'empty', ! this.get('library').length );
|
2012-10-29 16:13:02 +01:00
|
|
|
},
|
2012-10-29 00:29:17 +01:00
|
|
|
|
2012-11-06 02:19:39 +01:00
|
|
|
updateToolbarVisibility: function() {
|
|
|
|
this.frame.toolbar().visibility();
|
|
|
|
},
|
|
|
|
|
2012-10-29 16:13:02 +01:00
|
|
|
selectUpload: function( attachment ) {
|
|
|
|
this.get('selection').add( attachment );
|
2012-09-11 23:13:07 +02:00
|
|
|
},
|
|
|
|
|
2012-10-31 00:36:38 +01:00
|
|
|
details: function() {
|
|
|
|
var single = this.get('selection').single();
|
|
|
|
this[ single ? 'buildDetails' : 'clearDetails' ]( single );
|
|
|
|
},
|
2012-09-11 23:13:07 +02:00
|
|
|
|
2012-10-31 00:36:38 +01:00
|
|
|
buildDetails: function( model ) {
|
|
|
|
this.frame.sidebar().add( 'details', new media.view.Attachment.Details({
|
|
|
|
controller: this.frame,
|
|
|
|
model: model,
|
|
|
|
priority: 80
|
|
|
|
}).render() );
|
|
|
|
return this;
|
|
|
|
},
|
2012-10-29 16:13:02 +01:00
|
|
|
|
2012-10-31 00:36:38 +01:00
|
|
|
clearDetails: function( model ) {
|
|
|
|
if ( this.get('selection').single() )
|
|
|
|
return this;
|
2012-10-29 16:13:02 +01:00
|
|
|
|
2012-10-31 00:36:38 +01:00
|
|
|
this.frame.sidebar().add( 'details', new Backbone.View({
|
|
|
|
priority: 80
|
|
|
|
}).render() );
|
|
|
|
return this;
|
2012-09-11 23:13:07 +02:00
|
|
|
},
|
|
|
|
|
2012-10-30 22:09:45 +01:00
|
|
|
toggleSelection: function( model ) {
|
2012-10-31 00:15:16 +01:00
|
|
|
var selection = this.get('selection');
|
2012-10-30 22:09:45 +01:00
|
|
|
|
2012-10-31 00:15:16 +01:00
|
|
|
if ( selection.has( model ) ) {
|
|
|
|
// 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.
|
|
|
|
selection[ selection.single() === model ? 'remove' : 'single' ]( model );
|
|
|
|
} else {
|
|
|
|
selection.add( model ).single();
|
2012-10-30 22:09:45 +01:00
|
|
|
}
|
|
|
|
|
2012-10-31 00:15:16 +01:00
|
|
|
return this;
|
2012-10-29 00:29:17 +01:00
|
|
|
}
|
|
|
|
});
|
2012-09-11 23:13:07 +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
|
|
|
|
|
|
|
// wp.media.controller.Upload
|
|
|
|
// ---------------------------
|
|
|
|
media.controller.Upload = media.controller.Library.extend({
|
|
|
|
defaults: _.defaults({
|
|
|
|
id: 'upload'
|
|
|
|
}, media.controller.Library.prototype.defaults ),
|
|
|
|
|
|
|
|
initialize: function() {
|
|
|
|
var library = this.get('library');
|
|
|
|
|
|
|
|
// If a `library` attribute isn't provided, create a new
|
|
|
|
// `Attachments` collection that observes (and thereby receives
|
|
|
|
// all uploading) attachments.
|
|
|
|
if ( ! library ) {
|
|
|
|
library = new Attachments();
|
|
|
|
library.props.set({
|
|
|
|
orderby: 'date',
|
|
|
|
order: 'ASC'
|
|
|
|
});
|
|
|
|
library.observe( wp.Uploader.queue );
|
|
|
|
this.set( 'library', library );
|
|
|
|
}
|
|
|
|
|
|
|
|
media.controller.Library.prototype.initialize.apply( this, arguments );
|
|
|
|
}
|
2012-11-05 03:43: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
|
|
|
});
|
|
|
|
|
2012-10-29 00:29:17 +01:00
|
|
|
// wp.media.controller.Gallery
|
|
|
|
// ---------------------------
|
2012-10-29 16:13:02 +01:00
|
|
|
media.controller.Gallery = media.controller.Library.extend({
|
2012-10-29 00:29:17 +01:00
|
|
|
defaults: {
|
|
|
|
id: 'gallery',
|
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
|
|
|
title: l10n.createGalleryTitle,
|
|
|
|
edge: 199,
|
|
|
|
editing: false
|
2012-10-29 00:29:17 +01:00
|
|
|
},
|
2012-09-11 23:13:07 +02:00
|
|
|
|
2012-10-29 16:13:02 +01:00
|
|
|
toolbar: function() {
|
2012-11-06 02:19:39 +01:00
|
|
|
var frame = this.frame;
|
|
|
|
frame.toolbar( new media.view.Toolbar.Gallery({
|
|
|
|
controller: frame
|
2012-10-29 16:13:02 +01:00
|
|
|
}) );
|
2012-09-11 23:13:07 +02:00
|
|
|
},
|
|
|
|
|
2012-10-29 16:13:02 +01:00
|
|
|
sidebar: function() {
|
2012-10-29 00:29:17 +01:00
|
|
|
var frame = this.frame;
|
|
|
|
|
2012-10-29 07:56:23 +01:00
|
|
|
// Sidebar.
|
|
|
|
frame.sidebar( new media.view.Sidebar({
|
|
|
|
controller: frame
|
2012-10-29 16:13:02 +01:00
|
|
|
}) );
|
2012-10-29 07:56:23 +01:00
|
|
|
|
2012-10-29 16:13:02 +01:00
|
|
|
this.details();
|
2012-10-31 20:22:25 +01:00
|
|
|
frame.sidebar().add({
|
|
|
|
settings: new media.view.Settings.Gallery({
|
|
|
|
controller: frame,
|
|
|
|
model: this.get('library').props,
|
|
|
|
priority: 40
|
|
|
|
}).render()
|
|
|
|
});
|
2012-10-29 16:13:02 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
content: function() {
|
|
|
|
this.frame.content( new media.view.Attachments({
|
|
|
|
controller: this.frame,
|
|
|
|
collection: this.get('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
|
|
|
model: this,
|
2012-10-29 00:29:17 +01:00
|
|
|
sortable: true,
|
|
|
|
// The single `Attachment` view to be used in the `Attachments` view.
|
|
|
|
AttachmentView: media.view.Attachment.Gallery
|
|
|
|
}).render() );
|
|
|
|
}
|
|
|
|
});
|
2012-09-11 23:13:07 +02:00
|
|
|
|
2012-11-02 02:20:01 +01:00
|
|
|
media.controller.GalleryAddImages = media.controller.Library.extend({
|
|
|
|
defaults: {
|
|
|
|
id: 'gallery:add',
|
|
|
|
multiple: true,
|
|
|
|
title: l10n.createGalleryTitle
|
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function() {
|
|
|
|
if ( ! this.get('library') )
|
|
|
|
this.set( 'library', media.query({ type: 'image' }) );
|
|
|
|
return media.controller.Library.prototype.initialize.apply( this, arguments );
|
|
|
|
},
|
|
|
|
|
|
|
|
toolbar: function() {
|
|
|
|
var frame = this.frame;
|
|
|
|
frame.toolbar( new media.view.Toolbar.GalleryAddImages({
|
2012-11-06 02:19:39 +01:00
|
|
|
controller: frame
|
2012-11-02 02:20:01 +01:00
|
|
|
}) );
|
|
|
|
},
|
|
|
|
|
|
|
|
// Leave the sidebar.
|
|
|
|
sidebar: function() {}
|
|
|
|
});
|
|
|
|
|
2012-10-29 00:29:17 +01:00
|
|
|
/**
|
|
|
|
* ========================================================================
|
|
|
|
* VIEWS
|
|
|
|
* ========================================================================
|
|
|
|
*/
|
2012-09-11 23:13:07 +02:00
|
|
|
|
2012-10-29 00:29:17 +01:00
|
|
|
/**
|
|
|
|
* wp.media.view.Frame
|
|
|
|
*/
|
|
|
|
media.view.Frame = Backbone.View.extend({
|
|
|
|
tagName: 'div',
|
|
|
|
className: 'media-frame',
|
|
|
|
template: media.template('media-frame'),
|
2012-09-11 23:13:07 +02:00
|
|
|
|
2012-10-29 00:29:17 +01:00
|
|
|
initialize: function() {
|
|
|
|
_.defaults( this.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
|
|
|
state: 'upload',
|
2012-10-29 00:29:17 +01:00
|
|
|
title: '',
|
|
|
|
selection: [],
|
|
|
|
library: {},
|
|
|
|
modal: true,
|
|
|
|
multiple: false,
|
2012-10-31 22:43:59 +01:00
|
|
|
uploader: true,
|
|
|
|
editing: false
|
2012-10-29 00:29:17 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
this.createSelection();
|
|
|
|
this.createSubviews();
|
|
|
|
this.createStates();
|
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
|
|
|
render: 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 els = [ this.menu().el, this.content().el, this.sidebar().el, this.toolbar().el ];
|
2012-10-29 00:29:17 +01:00
|
|
|
|
|
|
|
if ( this.modal )
|
|
|
|
this.modal.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
|
|
|
// Detach any views that will be rebound to maintain event bindings.
|
2012-10-29 00:29:17 +01:00
|
|
|
this.$el.children().filter( els ).detach();
|
|
|
|
this.$el.empty().append( els );
|
|
|
|
|
|
|
|
// Render the window uploader if it exists.
|
|
|
|
if ( this.uploader )
|
|
|
|
this.uploader.render().$el.appendTo( this.$el );
|
|
|
|
|
|
|
|
return this;
|
2012-09-27 06:09:43 +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
|
|
|
createSelection: function() {
|
2012-10-29 00:29:17 +01:00
|
|
|
var controller = this,
|
|
|
|
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-10-29 16:13:02 +01:00
|
|
|
if ( ! (selection instanceof media.model.Selection) ) {
|
|
|
|
selection = this.options.selection = new media.model.Selection( selection, {
|
|
|
|
multiple: this.options.multiple
|
|
|
|
});
|
|
|
|
}
|
2012-10-29 00:29:17 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
createStates: 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 options = this.options,
|
|
|
|
menus = {
|
|
|
|
landing: new media.view.Menu.Landing({
|
|
|
|
controller: this
|
|
|
|
})
|
|
|
|
};
|
2012-10-29 00:29:17 +01:00
|
|
|
|
|
|
|
// Create the default `states` collection.
|
|
|
|
this.states = new Backbone.Collection();
|
|
|
|
|
|
|
|
// Ensure states have a reference to the frame.
|
|
|
|
this.states.on( 'add', function( model ) {
|
|
|
|
model.frame = this;
|
|
|
|
}, this );
|
|
|
|
|
|
|
|
// Add the default states.
|
|
|
|
this.states.add([
|
|
|
|
new media.controller.Library({
|
2012-10-29 16:13:02 +01:00
|
|
|
selection: options.selection,
|
|
|
|
library: media.query( options.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
|
|
|
multiple: this.options.multiple,
|
|
|
|
menu: menus.landing
|
|
|
|
}),
|
|
|
|
new media.controller.Upload({
|
|
|
|
multiple: this.options.multiple,
|
|
|
|
menu: menus.landing
|
2012-10-29 00:29:17 +01:00
|
|
|
}),
|
|
|
|
new media.controller.Gallery({
|
2012-10-31 22:43:59 +01:00
|
|
|
library: options.selection,
|
|
|
|
editing: options.editing
|
2012-11-02 02:20:01 +01:00
|
|
|
}),
|
|
|
|
new media.controller.GalleryAddImages()
|
2012-10-29 00:29:17 +01:00
|
|
|
]);
|
|
|
|
|
|
|
|
// Set the default state.
|
|
|
|
this.state( options.state );
|
|
|
|
},
|
|
|
|
|
|
|
|
createSubviews: function() {
|
|
|
|
// Initialize a stub view for each subview region.
|
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
|
|
|
_.each(['menu','content','sidebar','toolbar'], function( subview ) {
|
2012-10-29 00:29:17 +01:00
|
|
|
this[ '_' + subview ] = new Backbone.View({
|
|
|
|
tagName: 'div',
|
|
|
|
className: 'media-' + subview
|
|
|
|
});
|
|
|
|
}, this );
|
|
|
|
|
|
|
|
// Initialize modal container view.
|
|
|
|
if ( this.options.modal ) {
|
|
|
|
this.modal = new media.view.Modal({
|
|
|
|
controller: this,
|
|
|
|
$content: this.$el,
|
|
|
|
title: this.options.title
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
// Initialize window-wide uploader.
|
|
|
|
if ( this.options.uploader ) {
|
|
|
|
this.uploader = new media.view.UploaderWindow({
|
|
|
|
uploader: {
|
|
|
|
dropzone: this.modal ? this.modal.$el : this.$el
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
2012-09-11 23:13:07 +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
|
|
|
|
2012-10-29 00:29:17 +01:00
|
|
|
// Make the `Frame` a `StateMachine`.
|
|
|
|
_.extend( media.view.Frame.prototype, media.controller.StateMachine.prototype );
|
|
|
|
|
|
|
|
// Create methods to fetch and replace individual subviews.
|
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
|
|
|
_.each(['menu','content','sidebar','toolbar'], function( subview ) {
|
2012-10-29 00:29:17 +01:00
|
|
|
media.view.Frame.prototype[ subview ] = function( view ) {
|
|
|
|
var previous = this[ '_' + subview ];
|
|
|
|
|
|
|
|
if ( ! view )
|
|
|
|
return 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
|
|
|
if ( view === previous )
|
|
|
|
return;
|
|
|
|
|
2012-10-29 00:29:17 +01:00
|
|
|
view.$el.addClass( 'media-' + subview );
|
|
|
|
|
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
|
|
|
// Remove the hide class.
|
|
|
|
this.$el.removeClass( 'hide-' + subview );
|
|
|
|
|
2012-10-29 00:29:17 +01:00
|
|
|
if ( previous.destroy )
|
|
|
|
previous.destroy();
|
|
|
|
previous.undelegateEvents();
|
|
|
|
previous.$el.replaceWith( view.$el );
|
|
|
|
this[ '_' + subview ] = view;
|
2012-09-11 23:13:07 +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
|
|
|
});
|
|
|
|
|
2012-10-29 00:29:17 +01:00
|
|
|
// Map some of the modal's methods to the frame.
|
|
|
|
_.each(['open','close','attach','detach'], function( method ) {
|
|
|
|
media.view.Frame.prototype[ method ] = function( view ) {
|
|
|
|
if ( this.modal )
|
|
|
|
this.modal[ method ].apply( this.modal, arguments );
|
|
|
|
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
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.view.Modal
|
|
|
|
*/
|
|
|
|
media.view.Modal = Backbone.View.extend({
|
|
|
|
tagName: 'div',
|
|
|
|
template: media.template('media-modal'),
|
|
|
|
|
|
|
|
events: {
|
|
|
|
'click .media-modal-backdrop, .media-modal-close' : 'closeHandler'
|
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function() {
|
|
|
|
this.controller = this.options.controller;
|
|
|
|
|
|
|
|
_.defaults( this.options, {
|
2012-10-29 00:29:17 +01:00
|
|
|
container: document.body,
|
|
|
|
title: ''
|
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
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
2012-09-06 11:19:03 +02:00
|
|
|
// Ensure content div exists.
|
|
|
|
this.options.$content = this.options.$content || $('<div />');
|
|
|
|
|
|
|
|
// Detach the content element from the DOM to prevent
|
|
|
|
// `this.$el.html()` from garbage collecting its events.
|
|
|
|
this.options.$content.detach();
|
|
|
|
|
2012-10-29 00:29:17 +01:00
|
|
|
this.$el.html( this.template({
|
|
|
|
title: this.options.title
|
|
|
|
}) );
|
|
|
|
|
|
|
|
this.options.$content.addClass('media-modal-content');
|
|
|
|
this.$('.media-modal').append( this.options.$content );
|
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 this;
|
|
|
|
},
|
|
|
|
|
|
|
|
attach: function() {
|
|
|
|
this.$el.appendTo( this.options.container );
|
2012-10-10 10:31:12 +02:00
|
|
|
this.controller.trigger( 'attach', this.controller );
|
2012-10-29 00:29:17 +01:00
|
|
|
return this;
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 06:54:23 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
detach: function() {
|
|
|
|
this.$el.detach();
|
2012-10-10 10:31:12 +02:00
|
|
|
this.controller.trigger( 'detach', this.controller );
|
2012-10-29 00:29:17 +01:00
|
|
|
return this;
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 06:54:23 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
open: function() {
|
|
|
|
this.$el.show();
|
2012-10-10 10:31:12 +02:00
|
|
|
this.controller.trigger( 'open', this.controller );
|
2012-10-29 00:29:17 +01:00
|
|
|
return this;
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 06:54:23 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
close: function() {
|
|
|
|
this.$el.hide();
|
2012-10-10 10:31:12 +02:00
|
|
|
this.controller.trigger( 'close', this.controller );
|
2012-10-29 00:29:17 +01:00
|
|
|
return this;
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 06:54:23 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
closeHandler: function( event ) {
|
|
|
|
event.preventDefault();
|
|
|
|
this.close();
|
|
|
|
},
|
|
|
|
|
|
|
|
content: function( $content ) {
|
2012-09-19 02:34:00 +02:00
|
|
|
// Detach any existing content to prevent events from being lost.
|
|
|
|
if ( this.options.$content )
|
|
|
|
this.options.$content.detach();
|
|
|
|
|
|
|
|
// Set and render the content.
|
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.options.$content = ( $content instanceof Backbone.View ) ? $content.$el : $content;
|
|
|
|
return this.render();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-10-29 00:29:17 +01:00
|
|
|
// wp.media.view.UploaderWindow
|
|
|
|
// ----------------------------
|
|
|
|
media.view.UploaderWindow = Backbone.View.extend({
|
|
|
|
tagName: 'div',
|
|
|
|
className: 'uploader-window',
|
|
|
|
template: media.template('uploader-window'),
|
|
|
|
|
|
|
|
initialize: function() {
|
|
|
|
var uploader;
|
|
|
|
|
|
|
|
this.controller = this.options.controller;
|
2012-10-29 08:38:13 +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.$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: {}
|
|
|
|
});
|
|
|
|
|
|
|
|
if ( uploader.dropzone ) {
|
|
|
|
// Ensure the dropzone is a jQuery collection.
|
|
|
|
if ( ! (uploader.dropzone instanceof $) )
|
|
|
|
uploader.dropzone = $( uploader.dropzone );
|
|
|
|
|
|
|
|
// Attempt to initialize the uploader whenever the dropzone is hovered.
|
|
|
|
uploader.dropzone.one( 'mouseenter dragenter', _.bind( this.maybeInitUploader, this ) );
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
this.maybeInitUploader();
|
|
|
|
this.$el.html( this.template( this.options ) );
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
2012-10-29 08:38:13 +01:00
|
|
|
refresh: function() {
|
|
|
|
if ( this.uploader )
|
|
|
|
this.uploader.refresh();
|
|
|
|
},
|
|
|
|
|
2012-10-29 00:29:17 +01:00
|
|
|
maybeInitUploader: function() {
|
|
|
|
var $id, dropzone;
|
|
|
|
|
|
|
|
// If the uploader already exists or the body isn't in the DOM, bail.
|
|
|
|
if ( this.uploader || ! this.$el.closest('body').length )
|
|
|
|
return;
|
|
|
|
|
|
|
|
$id = $('#post_ID');
|
|
|
|
if ( $id.length )
|
|
|
|
this.options.uploader.params.post_id = $id.val();
|
|
|
|
|
|
|
|
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
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
media.view.UploaderInline = Backbone.View.extend({
|
|
|
|
tagName: 'div',
|
|
|
|
className: 'uploader-inline',
|
|
|
|
template: media.template('uploader-inline'),
|
|
|
|
|
|
|
|
initialize: function() {
|
|
|
|
this.controller = this.options.controller;
|
|
|
|
|
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.$browser )
|
|
|
|
this.options.$browser = this.controller.uploader.$browser;
|
|
|
|
|
2012-10-29 08:38:13 +01:00
|
|
|
// Track uploading attachments.
|
|
|
|
wp.Uploader.queue.on( 'add remove reset change:percent', this.renderUploadProgress, this );
|
|
|
|
},
|
|
|
|
|
|
|
|
destroy: function() {
|
|
|
|
wp.Uploader.queue.off( 'add remove reset change:percent', this.renderUploadProgress, this );
|
|
|
|
},
|
|
|
|
|
|
|
|
render: 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-10-29 08:38:13 +01:00
|
|
|
this.renderUploadProgress();
|
|
|
|
this.$el.html( this.template( this.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
|
|
|
|
|
|
|
$placeholder = this.$('.browser');
|
|
|
|
$browser.text( $placeholder.text() );
|
|
|
|
$browser[0].className = $placeholder[0].className;
|
|
|
|
$placeholder.replaceWith( $browser.show() );
|
|
|
|
|
2012-10-29 08:38:13 +01:00
|
|
|
this.$bar = this.$('.media-progress-bar div');
|
|
|
|
return this;
|
2012-10-29 00:29:17 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
renderUploadProgress: function() {
|
|
|
|
var queue = wp.Uploader.queue;
|
|
|
|
|
|
|
|
this.$el.toggleClass( 'uploading', !! queue.length );
|
|
|
|
|
|
|
|
if ( ! this.$bar || ! queue.length )
|
|
|
|
return;
|
|
|
|
|
|
|
|
this.$bar.width( ( queue.reduce( function( memo, attachment ) {
|
|
|
|
if ( attachment.get('uploading') )
|
|
|
|
return memo + ( attachment.get('percent') || 0 );
|
|
|
|
else
|
|
|
|
return memo + 100;
|
|
|
|
}, 0 ) / queue.length ) + '%' );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-09-06 09:46:15 +02:00
|
|
|
/**
|
|
|
|
* wp.media.view.Toolbar
|
|
|
|
*/
|
|
|
|
media.view.Toolbar = Backbone.View.extend({
|
|
|
|
tagName: 'div',
|
|
|
|
className: 'media-toolbar',
|
|
|
|
|
|
|
|
initialize: function() {
|
2012-10-29 00:29:17 +01:00
|
|
|
this.controller = this.options.controller;
|
|
|
|
|
|
|
|
this._views = {};
|
2012-09-06 09:46:15 +02:00
|
|
|
this.$primary = $('<div class="media-toolbar-primary" />').prependTo( this.$el );
|
|
|
|
this.$secondary = $('<div class="media-toolbar-secondary" />').prependTo( this.$el );
|
|
|
|
|
2012-10-29 00:29:17 +01:00
|
|
|
if ( this.options.items )
|
2012-10-29 16:13:02 +01:00
|
|
|
this.add( this.options.items, { silent: true });
|
|
|
|
|
|
|
|
if ( ! this.options.silent )
|
|
|
|
this.render();
|
2012-09-06 09:46:15 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
var views = _.chain( this._views ).sortBy( function( view ) {
|
|
|
|
return view.options.priority || 10;
|
|
|
|
}).groupBy( function( view ) {
|
|
|
|
return ( view.options.priority || 10 ) > 0 ? 'primary' : 'secondary';
|
|
|
|
}).value();
|
|
|
|
|
|
|
|
// Make sure to detach the elements we want to reuse.
|
|
|
|
// Otherwise, `jQuery.html()` will unbind their events.
|
|
|
|
$( _.pluck( this._views, 'el' ) ).detach();
|
2012-10-10 10:31:12 +02:00
|
|
|
this.$primary.html( _.pluck( views.primary || [], 'el' ) );
|
|
|
|
this.$secondary.html( _.pluck( views.secondary || [], 'el' ) );
|
2012-09-06 09:46:15 +02:00
|
|
|
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
add: function( id, view, options ) {
|
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-10-29 16:13:02 +01:00
|
|
|
this.add( id, view, { silent: true });
|
2012-10-29 00:29:17 +01:00
|
|
|
}, this );
|
2012-10-29 16:13:02 +01:00
|
|
|
|
|
|
|
if ( ! options.silent )
|
|
|
|
this.render();
|
2012-10-29 00:29:17 +01:00
|
|
|
return this;
|
|
|
|
}
|
|
|
|
|
2012-09-06 09:46:15 +02:00
|
|
|
if ( ! ( view instanceof Backbone.View ) ) {
|
|
|
|
view.classes = [ id ].concat( view.classes || [] );
|
|
|
|
view = new media.view.Button( view ).render();
|
|
|
|
}
|
|
|
|
|
2012-10-29 00:29:17 +01:00
|
|
|
view.controller = view.controller || this.controller;
|
|
|
|
|
2012-09-06 09:46:15 +02:00
|
|
|
this._views[ id ] = view;
|
2012-10-29 16:13:02 +01:00
|
|
|
if ( ! options.silent )
|
2012-09-06 09:46:15 +02:00
|
|
|
this.render();
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
2012-09-27 02:59:04 +02:00
|
|
|
get: function( id ) {
|
|
|
|
return this._views[ id ];
|
|
|
|
},
|
|
|
|
|
2012-09-06 09:46:15 +02:00
|
|
|
remove: function( id, options ) {
|
|
|
|
delete this._views[ id ];
|
|
|
|
if ( ! options || ! options.silent )
|
|
|
|
this.render();
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-10-29 00:29:17 +01:00
|
|
|
// wp.media.view.Toolbar.PostLibrary
|
|
|
|
// ---------------------------------
|
|
|
|
media.view.Toolbar.PostLibrary = media.view.Toolbar.extend({
|
|
|
|
initialize: function() {
|
2012-11-06 02:19:39 +01:00
|
|
|
var controller = this.options.controller,
|
|
|
|
selection = controller.state().get('selection');
|
2012-10-29 00:29:17 +01:00
|
|
|
|
|
|
|
this.options.items = {
|
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
|
|
|
selection: new media.view.Selection({
|
|
|
|
controller: controller,
|
|
|
|
collection: selection,
|
|
|
|
priority: -40
|
|
|
|
}).render(),
|
|
|
|
|
2012-10-29 00:29:17 +01:00
|
|
|
'create-new-gallery': {
|
|
|
|
style: 'primary',
|
|
|
|
text: l10n.createNewGallery,
|
|
|
|
priority: 40,
|
|
|
|
|
|
|
|
click: function() {
|
|
|
|
this.controller.state('gallery');
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
'insert-into-post': new media.view.ButtonGroup({
|
|
|
|
priority: 30,
|
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
|
|
|
classes: 'dropdown-flip-x dropdown-flip-y',
|
2012-10-29 00:29:17 +01:00
|
|
|
buttons: [
|
|
|
|
{
|
|
|
|
text: l10n.insertIntoPost,
|
|
|
|
click: function() {
|
|
|
|
controller.close();
|
2012-11-06 02:19:39 +01:00
|
|
|
controller.state().trigger( 'insert', selection );
|
2012-10-29 00:29:17 +01:00
|
|
|
selection.clear();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
classes: ['down-arrow'],
|
2012-10-31 20:22:25 +01:00
|
|
|
dropdown: new media.view.Settings.AttachmentDisplay().render().$el,
|
2012-10-29 00:29:17 +01:00
|
|
|
|
|
|
|
click: function( event ) {
|
|
|
|
var $el = this.$el;
|
|
|
|
|
|
|
|
if ( ! $( event.target ).closest('.dropdown').length )
|
|
|
|
$el.toggleClass('active');
|
|
|
|
|
|
|
|
// Stop the event from propagating further so we can bind
|
|
|
|
// a one-time event to the body (and ensure that a click
|
|
|
|
// on the dropdown won't trigger said event).
|
|
|
|
event.stopPropagation();
|
|
|
|
|
|
|
|
if ( $el.is(':visible') ) {
|
|
|
|
$(document.body).one( 'click', function() {
|
|
|
|
$el.removeClass('active');
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
]
|
|
|
|
}).render(),
|
|
|
|
|
|
|
|
'add-to-gallery': {
|
|
|
|
text: l10n.addToGallery,
|
|
|
|
priority: 20
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
media.view.Toolbar.prototype.initialize.apply( this, arguments );
|
2012-10-29 07:56:23 +01:00
|
|
|
this.visibility();
|
2012-10-29 00:29:17 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
visibility: function() {
|
2012-11-06 02:19:39 +01:00
|
|
|
var selection = this.controller.state().get('selection'),
|
2012-10-29 00:29:17 +01:00
|
|
|
count = selection.length,
|
|
|
|
showGallery;
|
|
|
|
|
|
|
|
// Check if every attachment in the selection is an image.
|
|
|
|
showGallery = count > 1 && selection.all( function( attachment ) {
|
|
|
|
return 'image' === attachment.get('type');
|
|
|
|
});
|
|
|
|
|
|
|
|
this.get('create-new-gallery').$el.toggle( showGallery );
|
|
|
|
insert = this.get('insert-into-post');
|
|
|
|
_.each( insert.buttons, function( button ) {
|
|
|
|
button.model.set( 'style', showGallery ? '' : 'primary' );
|
|
|
|
});
|
2012-10-29 07:56:23 +01:00
|
|
|
|
|
|
|
_.first( insert.buttons ).model.set( 'disabled', ! count );
|
2012-10-29 00:29:17 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// wp.media.view.Toolbar.Gallery
|
|
|
|
// -----------------------------
|
|
|
|
media.view.Toolbar.Gallery = media.view.Toolbar.extend({
|
|
|
|
initialize: function() {
|
2012-11-06 02:19:39 +01:00
|
|
|
var controller = this.options.controller,
|
|
|
|
state = controller.state(),
|
2012-10-29 07:56:23 +01:00
|
|
|
editing = state.get('editing'),
|
2012-11-06 02:19:39 +01:00
|
|
|
library = state.get('library');
|
2012-10-29 00:29:17 +01:00
|
|
|
|
|
|
|
this.options.items = {
|
2012-10-31 22:43:59 +01:00
|
|
|
update: {
|
2012-10-29 00:29:17 +01:00
|
|
|
style: 'primary',
|
2012-10-31 22:43:59 +01:00
|
|
|
text: editing ? l10n.updateGallery : l10n.insertGallery,
|
2012-10-29 00:29:17 +01:00
|
|
|
priority: 40,
|
|
|
|
click: function() {
|
2012-11-06 02:19:39 +01:00
|
|
|
var state = controller.state();
|
2012-10-29 00:29:17 +01:00
|
|
|
controller.close();
|
2012-11-06 02:19:39 +01:00
|
|
|
state.trigger( 'update', state.get('library') );
|
2012-11-02 02:20:01 +01:00
|
|
|
controller.get('library').get('selection').clear();
|
2012-10-29 00:29:17 +01:00
|
|
|
controller.state('library');
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2012-11-02 02:20:01 +01:00
|
|
|
addImages: {
|
|
|
|
text: l10n.addImages,
|
|
|
|
priority: -40,
|
|
|
|
|
|
|
|
click: function() {
|
|
|
|
controller.get('gallery:add').set( 'selection', new media.model.Selection( library.models, {
|
2012-11-06 02:19:39 +01:00
|
|
|
props: controller.state().get('library').props.toJSON(),
|
2012-11-02 02:20:01 +01:00
|
|
|
multiple: true
|
|
|
|
}) );
|
|
|
|
controller.state('gallery:add');
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2012-10-31 22:43:59 +01:00
|
|
|
cancel: {
|
|
|
|
text: l10n.cancel,
|
|
|
|
priority: -60,
|
2012-10-29 00:29:17 +01:00
|
|
|
|
|
|
|
click: function() {
|
2012-10-31 22:43:59 +01:00
|
|
|
if ( editing )
|
|
|
|
controller.close();
|
|
|
|
else
|
|
|
|
controller.state('library');
|
2012-10-29 00:29:17 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
media.view.Toolbar.prototype.initialize.apply( this, arguments );
|
|
|
|
}
|
|
|
|
});
|
2012-09-06 09:46:15 +02:00
|
|
|
|
2012-11-02 02:20:01 +01:00
|
|
|
// wp.media.view.Toolbar.GalleryAddImages
|
|
|
|
// -----------------------------
|
|
|
|
media.view.Toolbar.GalleryAddImages = media.view.Toolbar.extend({
|
|
|
|
initialize: function() {
|
2012-11-06 02:19:39 +01:00
|
|
|
var controller = this.options.controller;
|
2012-11-02 02:20:01 +01:00
|
|
|
|
|
|
|
this.options.items = {
|
|
|
|
update: {
|
|
|
|
style: 'primary',
|
|
|
|
text: l10n.continueEditing,
|
|
|
|
priority: 40,
|
|
|
|
|
|
|
|
click: function() {
|
2012-11-06 02:19:39 +01:00
|
|
|
controller.get('gallery').set( 'library', controller.state().get('selection') );
|
2012-11-02 02:20:01 +01:00
|
|
|
controller.state('gallery');
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
cancel: {
|
|
|
|
text: l10n.cancel,
|
|
|
|
priority: -60,
|
|
|
|
|
|
|
|
click: function() {
|
|
|
|
controller.state('gallery');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
media.view.Toolbar.prototype.initialize.apply( this, arguments );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-09-06 09:46:15 +02:00
|
|
|
/**
|
|
|
|
* wp.media.view.Button
|
|
|
|
*/
|
|
|
|
media.view.Button = Backbone.View.extend({
|
|
|
|
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 );
|
|
|
|
|
2012-10-16 21:25:17 +02:00
|
|
|
if ( this.options.dropdown )
|
|
|
|
this.options.dropdown.addClass('dropdown');
|
|
|
|
|
2012-09-27 02:59:04 +02:00
|
|
|
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-10-16 21:25:17 +02:00
|
|
|
|
|
|
|
// Detach the dropdown.
|
|
|
|
if ( this.options.dropdown )
|
|
|
|
this.options.dropdown.detach();
|
|
|
|
|
2012-09-27 02:59:04 +02:00
|
|
|
this.$el.text( this.model.get('text') );
|
2012-10-16 21:25:17 +02:00
|
|
|
|
|
|
|
if ( this.options.dropdown )
|
|
|
|
this.$el.append( this.options.dropdown );
|
|
|
|
|
2012-09-06 09:46:15 +02:00
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
click: function( event ) {
|
|
|
|
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
|
|
|
|
*/
|
|
|
|
media.view.ButtonGroup = Backbone.View.extend({
|
|
|
|
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
|
|
|
|
|
|
|
media.view.PriorityList = Backbone.View.extend({
|
2012-10-29 07:56:23 +01:00
|
|
|
tagName: 'div',
|
|
|
|
|
|
|
|
initialize: function() {
|
|
|
|
this.controller = this.options.controller;
|
|
|
|
this._views = {};
|
|
|
|
|
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.add( _.extend( {}, this.views, this.options.views ), { silent: true });
|
|
|
|
delete this.views;
|
|
|
|
delete this.options.views;
|
2012-10-29 16:13:02 +01:00
|
|
|
|
|
|
|
if ( ! this.options.silent )
|
|
|
|
this.render();
|
2012-10-29 07:56:23 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
var els = _( this._views ).chain().sortBy( function( view ) {
|
|
|
|
return view.options.priority || 10;
|
|
|
|
}).pluck('el').value();
|
|
|
|
|
|
|
|
// Make sure to detach the elements we want to reuse.
|
|
|
|
// Otherwise, `jQuery.html()` will unbind their events.
|
|
|
|
$( els ).detach();
|
|
|
|
|
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.$el.html( els );
|
2012-10-29 07:56:23 +01:00
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
add: function( id, view, options ) {
|
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-10-29 16:13:02 +01:00
|
|
|
this.add( id, view, { silent: true });
|
2012-10-29 07:56:23 +01:00
|
|
|
}, this );
|
2012-10-29 16:13:02 +01:00
|
|
|
|
|
|
|
if ( ! options.silent )
|
|
|
|
this.render();
|
2012-10-29 07:56:23 +01:00
|
|
|
return this;
|
|
|
|
}
|
|
|
|
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 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;
|
|
|
|
|
|
|
|
this._views[ id ] = view;
|
2012-10-29 16:13:02 +01:00
|
|
|
if ( ! options.silent )
|
2012-10-29 07:56:23 +01:00
|
|
|
this.render();
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
get: function( id ) {
|
|
|
|
return this._views[ id ];
|
|
|
|
},
|
|
|
|
|
|
|
|
remove: function( id, options ) {
|
|
|
|
delete this._views[ id ];
|
|
|
|
if ( ! options || ! options.silent )
|
|
|
|
this.render();
|
|
|
|
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 ) {
|
|
|
|
return new Backbone.View( options );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.view.Menu
|
|
|
|
*/
|
|
|
|
media.view.Menu = media.view.PriorityList.extend({
|
|
|
|
tagName: 'ul',
|
|
|
|
className: 'media-menu',
|
|
|
|
|
|
|
|
toView: function( options, id ) {
|
|
|
|
options = options || {};
|
|
|
|
options.id = id;
|
|
|
|
return new media.view.MenuItem( options ).render();
|
|
|
|
},
|
|
|
|
|
|
|
|
select: function( id ) {
|
|
|
|
var view = this.get( id );
|
|
|
|
|
|
|
|
if ( ! view )
|
|
|
|
return;
|
|
|
|
|
|
|
|
this.deselect();
|
|
|
|
view.$el.addClass('active');
|
|
|
|
},
|
|
|
|
|
|
|
|
deselect: function() {
|
|
|
|
this.$el.children().removeClass('active');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
media.view.MenuItem = Backbone.View.extend({
|
|
|
|
tagName: 'li',
|
|
|
|
className: 'media-menu-item',
|
|
|
|
|
|
|
|
events: {
|
|
|
|
'click': 'toState'
|
|
|
|
},
|
|
|
|
|
|
|
|
toState: function() {
|
|
|
|
this.controller.state( this.options.id );
|
|
|
|
},
|
|
|
|
|
|
|
|
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;
|
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
|
|
|
media.view.Menu.Landing = media.view.Menu.extend({
|
|
|
|
views: {
|
|
|
|
upload: {
|
|
|
|
text: l10n.uploadFilesTitle,
|
|
|
|
priority: 20
|
|
|
|
},
|
|
|
|
library: {
|
|
|
|
text: l10n.mediaLibraryTitle,
|
|
|
|
priority: 40
|
|
|
|
},
|
|
|
|
separateLibrary: new Backbone.View({
|
|
|
|
className: 'separator',
|
|
|
|
priority: 60
|
|
|
|
}),
|
|
|
|
embed: {
|
|
|
|
text: l10n.embedFromUrlTitle,
|
|
|
|
priority: 80
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 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
|
|
|
|
*/
|
|
|
|
media.view.Attachment = Backbone.View.extend({
|
|
|
|
tagName: 'li',
|
|
|
|
className: 'attachment',
|
|
|
|
template: media.template('attachment'),
|
|
|
|
|
|
|
|
events: {
|
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
|
|
|
'mousedown .attachment-preview': 'toggleSelection',
|
2012-10-30 22:15:46 +01:00
|
|
|
'change .describe': 'describe'
|
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() {
|
|
|
|
this.controller = this.options.controller;
|
|
|
|
|
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 );
|
|
|
|
this.model.on( 'add', this.select, this );
|
|
|
|
this.model.on( 'remove', this.deselect, 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 09:45:26 +02:00
|
|
|
// Prevent default navigation on all links.
|
|
|
|
this.$el.on( 'click', 'a', this.preventDefault );
|
2012-09-27 08:53:54 +02:00
|
|
|
},
|
|
|
|
|
2012-10-31 00:59:57 +01:00
|
|
|
destroy: function() {
|
|
|
|
this.model.off( null, null, this );
|
|
|
|
},
|
|
|
|
|
2012-09-27 08:53:54 +02:00
|
|
|
render: function() {
|
2012-10-31 00:59:57 +01:00
|
|
|
var attachment = this.model.toJSON(),
|
2012-10-10 11:55:47 +02:00
|
|
|
options = _.defaults( this.model.toJSON(), {
|
|
|
|
orientation: 'landscape',
|
|
|
|
uploading: false,
|
2012-10-10 12:08:43 +02:00
|
|
|
type: '',
|
2012-10-10 12:45:01 +02:00
|
|
|
subtype: '',
|
|
|
|
icon: '',
|
2012-10-11 01:55:45 +02:00
|
|
|
filename: '',
|
|
|
|
caption: '',
|
|
|
|
title: ''
|
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-10-29 19:05:03 +01:00
|
|
|
_.extend( options, this.imageSize() );
|
2012-09-27 08:53:54 +02:00
|
|
|
|
|
|
|
this.$el.html( this.template( options ) );
|
|
|
|
|
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-10-29 00:29:17 +01:00
|
|
|
if ( this.selected() )
|
2012-09-27 08:53:54 +02:00
|
|
|
this.select();
|
|
|
|
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
progress: function() {
|
|
|
|
if ( this.$bar && this.$bar.length )
|
|
|
|
this.$bar.width( this.model.get('percent') + '%' );
|
|
|
|
},
|
|
|
|
|
|
|
|
toggleSelection: function( event ) {
|
2012-10-30 22:09:45 +01:00
|
|
|
this.controller.state().toggleSelection( this.model );
|
2012-09-27 08:53:54 +02:00
|
|
|
},
|
|
|
|
|
2012-10-29 00:29:17 +01:00
|
|
|
selected: function() {
|
|
|
|
var selection = this.controller.state().get('selection');
|
|
|
|
if ( selection )
|
|
|
|
return selection.has( this.model );
|
|
|
|
},
|
|
|
|
|
2012-09-27 08:53:54 +02:00
|
|
|
select: function( model, collection ) {
|
2012-10-29 00:29:17 +01:00
|
|
|
var selection = this.controller.state().get('selection');
|
|
|
|
|
|
|
|
// 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-10-29 00:29:17 +01:00
|
|
|
var selection = this.controller.state().get('selection');
|
|
|
|
|
|
|
|
// 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 ) {
|
|
|
|
var selection = this.controller.state().get('selection'),
|
|
|
|
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-10-11 01:32:48 +02:00
|
|
|
describe: function( event ) {
|
|
|
|
if ( 'image' === this.model.get('type') )
|
|
|
|
this.model.save( 'caption', event.target.value );
|
|
|
|
else
|
|
|
|
this.model.save( 'title', event.target.value );
|
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({
|
|
|
|
className: 'attachment library'
|
|
|
|
});
|
|
|
|
|
2012-09-27 08:53:54 +02:00
|
|
|
/**
|
|
|
|
* wp.media.view.Attachment.Gallery
|
|
|
|
*/
|
|
|
|
media.view.Attachment.Gallery = media.view.Attachment.extend({
|
2012-09-27 09:45:26 +02:00
|
|
|
buttons: {
|
|
|
|
close: true
|
|
|
|
},
|
|
|
|
|
2012-10-11 06:04:12 +02:00
|
|
|
events: (function() {
|
|
|
|
var events = _.clone( media.view.Attachment.prototype.events );
|
2012-10-29 16:13:02 +01:00
|
|
|
events['click .close'] = 'removeFromGallery';
|
2012-10-11 06:04:12 +02:00
|
|
|
return events;
|
2012-10-29 16:13:02 +01:00
|
|
|
}()),
|
|
|
|
|
2012-10-31 21:51:34 +01:00
|
|
|
removeFromGallery: function( event ) {
|
|
|
|
// Stop propagation so the model isn't selected.
|
|
|
|
event.stopPropagation();
|
|
|
|
|
2012-10-29 16:13:02 +01:00
|
|
|
this.controller.state().get('library').remove( this.model );
|
|
|
|
}
|
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
|
|
|
|
*/
|
|
|
|
media.view.Attachments = Backbone.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-10-29 19:05:03 +01:00
|
|
|
template: 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() {
|
|
|
|
this.controller = this.options.controller;
|
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
|
|
|
});
|
|
|
|
|
|
|
|
_.each(['add','remove'], function( method ) {
|
|
|
|
this.collection.on( method, function( attachment, attachments, options ) {
|
|
|
|
this[ method ]( attachment, options.index );
|
|
|
|
}, this );
|
|
|
|
}, 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();
|
|
|
|
},
|
|
|
|
|
|
|
|
destroy: function() {
|
|
|
|
this.collection.off( 'add remove reset', 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
|
|
|
this.model.off( 'change:edge change:gutter', this.css, this );
|
|
|
|
$(window).off( 'resize.attachments', this._resizeCss );
|
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();
|
|
|
|
|
|
|
|
media.view.Attachments.$head().append( this.template({
|
|
|
|
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() {
|
|
|
|
var collection = this.collection,
|
|
|
|
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 ) {
|
|
|
|
var model = collection.at( from );
|
|
|
|
|
|
|
|
collection.remove( model, {
|
|
|
|
silent: true
|
|
|
|
}).add( model, {
|
|
|
|
at: ui.item.index(),
|
|
|
|
silent: true
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// 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 );
|
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
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
// If there are no elements, load some.
|
|
|
|
if ( ! this.collection.length ) {
|
Streamlining media, part I.
The main goal here is to rearrange the media components in a modularized structure to support more linear workflows. This is that structure using the pre-existing workflows, which will be improved over the course of the next few commits.
This leaves a few pieces a bit rough around the edges: namely gallery editing and selecting a featured image.
The fine print follows.
----
'''Styles'''
* Tightened padding around the modal to optimize for a smaller default screen size.
* Added a light dashed line surrounding the modal to provide a subtle cue for the persistent dropzone (which is evolving into a power user feature since we now have a dedicated `upload` state).
* Add a size for `hero` buttons.
* Remove transitions from frame subviews (e.g. menu, content, sidebar, toolbar).
----
'''Code'''
`wp.media.controller.StateManager`
* Don't fire `activate` and `deactivate` if attempting to switch to the current state.
`wp.media.controller.State`
* Add a base state class to bind default methods (as not all states will inherit from the `Library` state).
* On `activate`, fire `activate()`, `menu()`, `content()`, `sidebar()`, and `toolbar()`.
* The menu view is often a shared object (as its most common use case is switching between states). Assign the view to the state's `menu` attribute.
* `menu()` automatically fetches the state's `menu` attribute, attaches the menu view to the frame, and attempts to select a menu item that matches the state's `id`.
`wp.media.controller.Library`
* Now inherits from `wp.media.controller.State`.
`wp.media.controller.Upload`
* A new state to improve the upload experience.
* Displays a large dropzone when empty (a `UploaderInline` view).
* When attachments are uploaded, displays management interface (a `library` state restricted to attachments uploaded during the current session).
`wp.media.view.Frame`
* In `menu()`, `content()`, `sidebar()`, and `toolbar()`, only change the view if it differs from the current view. Also, ensure `hide-*` classes are properly removed.
*
`wp.media.view.PriorityList`
* A new container view used to sort and render child views by the `priority` property.
* Used by `wp.media.view.Sidebar` and `wp.media.view.Menu`.
* Next step: Use two instances to power `wp.media.view.Toolbar`.
`wp.media.view.Menu` and `wp.media.view.MenuItem`
* A new `PriorityList` view that renders a list of views used to switch between states.
* `MenuItem` instances have `id` attributes that are tied directly to states.
* Separators can be added as plain `Backbone.View` instances with the `separator` class.
* Supports any type of `Backbone.View`.
`media.view.Menu.Landing`
* The landing menu for the 'insert media' workflow.
* Includes an inactive link to an "Embed from URL" state.
* Next steps: only use in select cases to allot for other workflows (such as featured images).
`wp.media.view.AttachmentsBrowser`
* A container to render an `Attachments` view with accompanying UI controls (similar to what the `Attachments` view was when it contained the `$list` property).
* Currently only renders a `Search` view as a control.
* Next steps: Add optional view counts (e.g. "21 images"), upload buttons, and collection filter UI.
`wp.media.view.Attachments`
* If the `Attachments` scroll buffer is not filled with `Attachment` views, continue loading more attachments.
* Use `this.model` instead of `this.controller.state()` to allow `Attachments` views to have differing `edge` and `gutter` properties.
* Add `edge()`, a method used to calculate the optimal dimensions for an attachment based on the current width of the `Attachments` container element.
* `edge()` is currently only enabled on resize, as the relative positioning and CSS transforms used to center thumbnails are suboptimal when coupled with frequent resizing.
* Next steps: For infinite scroll performance improvements, look into absolutely positioning attachment views and paging groups of attachment views.
`wp.media.view.UploaderWindow`
* Now generates a `$browser` element as the browse button (instead of a full `UploaderInline` view). Using a portable browse button prevents us from having to create a new `wp.Uploader` instance every time we want access to a browse button.
`wp.media.view.UploaderInline`
* No longer directly linked to the `UploaderWindow` view or its `wp.Uploader` instance.
* Used as the default `upload` state view.
`wp.media.view.Selection`
* An interactive representation of the selected `Attachments`.
* Based on the improved workflows, this is likely overkill. For simplicity's sake, will probably remove this in favor of `SelectionPreview`.
----
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@22362 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-11-04 23:59:12 +01:00
|
|
|
this.collection.more().done( this.scroll );
|
2012-10-29 07:56:23 +01:00
|
|
|
this.$el.empty();
|
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 this;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Otherwise, create all of the Attachment views, and replace
|
|
|
|
// the list in a single DOM operation.
|
2012-10-29 07:56:23 +01:00
|
|
|
this.$el.html( this.collection.map( function( attachment ) {
|
2012-09-27 08:39:12 +02:00
|
|
|
return new this.options.AttachmentView({
|
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
|
|
|
controller: this.controller,
|
|
|
|
model: attachment
|
|
|
|
}).render().$el;
|
|
|
|
}, this ) );
|
|
|
|
|
|
|
|
// Then, trigger the scroll event to check if we're within the
|
|
|
|
// threshold to query for additional attachments.
|
|
|
|
this.scroll();
|
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
|
|
|
|
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 this;
|
|
|
|
},
|
|
|
|
|
|
|
|
add: function( attachment, index ) {
|
|
|
|
var view, children;
|
|
|
|
|
2012-09-27 08:53:54 +02:00
|
|
|
view = new this.options.AttachmentView({
|
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
|
|
|
controller: this.controller,
|
|
|
|
model: attachment
|
|
|
|
}).render();
|
|
|
|
|
2012-10-29 07:56:23 +01:00
|
|
|
children = this.$el.children();
|
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 ( children.length > index )
|
|
|
|
children.eq( index ).before( view.$el );
|
|
|
|
else
|
2012-10-29 07:56:23 +01:00
|
|
|
this.$el.append( view.$el );
|
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
|
|
|
},
|
|
|
|
|
|
|
|
remove: function( attachment, index ) {
|
2012-10-29 07:56:23 +01:00
|
|
|
var children = this.$el.children();
|
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 ( children.length )
|
|
|
|
children.eq( index ).detach();
|
|
|
|
},
|
|
|
|
|
|
|
|
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-10-29 07:56:23 +01:00
|
|
|
if ( 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
|
|
|
|
*/
|
|
|
|
media.view.Search = Backbone.View.extend({
|
|
|
|
tagName: 'input',
|
|
|
|
className: 'search',
|
|
|
|
|
|
|
|
attributes: {
|
|
|
|
type: 'text',
|
|
|
|
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: {
|
|
|
|
'keyup': '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
|
|
|
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
|
|
|
}
|
|
|
|
});
|
|
|
|
|
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
|
|
|
|
*/
|
|
|
|
media.view.AttachmentsBrowser = Backbone.View.extend({
|
|
|
|
tagName: 'div',
|
|
|
|
className: 'attachments-browser',
|
|
|
|
|
|
|
|
initialize: function() {
|
|
|
|
this.controller = this.options.controller;
|
|
|
|
|
|
|
|
_.defaults( this.options, {
|
|
|
|
search: true,
|
|
|
|
upload: false,
|
|
|
|
total: true
|
|
|
|
});
|
|
|
|
|
|
|
|
this.toolbar = new media.view.Toolbar({
|
|
|
|
controller: this.controller
|
|
|
|
});
|
|
|
|
|
|
|
|
if ( this.options.search ) {
|
|
|
|
this.toolbar.add( 'search', new media.view.Search({
|
|
|
|
controller: this.controller,
|
|
|
|
model: this.collection.props,
|
|
|
|
priority: -40
|
|
|
|
}) );
|
|
|
|
}
|
|
|
|
|
|
|
|
this.attachments = new media.view.Attachments({
|
|
|
|
controller: this.controller,
|
|
|
|
collection: this.collection,
|
|
|
|
model: this.model,
|
|
|
|
sortable: this.options.sortable,
|
|
|
|
// The single `Attachment` view to be used in the `Attachments` view.
|
|
|
|
AttachmentView: media.view.Attachment.Library
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
this.toolbar.$el.detach();
|
|
|
|
this.attachments.$el.detach();
|
|
|
|
this.$el.html([ this.toolbar.render().el, this.attachments.render().el ]);
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-09-06 09:46:15 +02:00
|
|
|
/**
|
|
|
|
* wp.media.view.SelectionPreview
|
|
|
|
*/
|
|
|
|
media.view.SelectionPreview = Backbone.View.extend({
|
|
|
|
tagName: 'div',
|
|
|
|
className: 'selection-preview',
|
|
|
|
template: media.template('media-selection-preview'),
|
|
|
|
|
|
|
|
events: {
|
|
|
|
'click .clear-selection': 'clear'
|
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function() {
|
2012-10-10 11:30:22 +02:00
|
|
|
_.defaults( this.options, {
|
|
|
|
clearable: true
|
|
|
|
});
|
|
|
|
|
2012-09-06 09:46:15 +02:00
|
|
|
this.controller = this.options.controller;
|
|
|
|
this.collection.on( 'add change:url remove', this.render, this );
|
|
|
|
this.render();
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
2012-10-10 11:30:22 +02:00
|
|
|
var options = _.clone( this.options ),
|
2012-10-29 16:13:02 +01:00
|
|
|
last, sizes, amount;
|
2012-09-06 09:46:15 +02:00
|
|
|
|
|
|
|
// If nothing is selected, display nothing.
|
|
|
|
if ( ! this.collection.length ) {
|
|
|
|
this.$el.empty();
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
|
|
|
|
options.count = this.collection.length;
|
2012-10-29 16:13:02 +01:00
|
|
|
last = this.collection.last();
|
|
|
|
sizes = last.get('sizes');
|
2012-09-07 23:27:07 +02:00
|
|
|
|
2012-10-29 16:13:02 +01:00
|
|
|
if ( 'image' === last.get('type') )
|
|
|
|
options.thumbnail = ( sizes && sizes.thumbnail ) ? sizes.thumbnail.url : last.get('url');
|
2012-09-07 23:27:07 +02:00
|
|
|
else
|
2012-10-29 16:13:02 +01:00
|
|
|
options.thumbnail = last.get('icon');
|
2012-09-06 09:46:15 +02:00
|
|
|
|
|
|
|
this.$el.html( this.template( options ) );
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
clear: function( event ) {
|
|
|
|
event.preventDefault();
|
|
|
|
this.collection.clear();
|
|
|
|
}
|
|
|
|
});
|
2012-10-16 21:25:17 +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
|
|
|
/**
|
|
|
|
* wp.media.view.Selection
|
|
|
|
*/
|
|
|
|
media.view.Selection = Backbone.View.extend({
|
|
|
|
tagName: 'div',
|
|
|
|
className: 'media-selection',
|
|
|
|
template: media.template('media-selection'),
|
|
|
|
|
|
|
|
events: {
|
|
|
|
'click .clear-selection': 'clear'
|
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function() {
|
|
|
|
_.defaults( this.options, {
|
|
|
|
clearable: true
|
|
|
|
});
|
|
|
|
|
|
|
|
this.controller = this.options.controller;
|
|
|
|
this.attachments = new media.view.Attachments({
|
|
|
|
controller: this.controller,
|
|
|
|
collection: this.collection,
|
|
|
|
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
|
|
|
|
});
|
|
|
|
|
|
|
|
this.collection.on( 'add remove reset', this.refresh, this );
|
|
|
|
},
|
|
|
|
|
|
|
|
destroy: function() {
|
|
|
|
this.collection.off( 'add remove reset', this.refresh, this );
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
this.attachments.$el.detach();
|
|
|
|
this.attachments.render();
|
|
|
|
|
|
|
|
this.$el.html( this.template( this.options ) );
|
|
|
|
|
|
|
|
this.$('.selection-view').replaceWith( this.attachments.$el );
|
|
|
|
this.refresh();
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
refresh: function() {
|
|
|
|
// If the selection hasn't been rendered, bail.
|
|
|
|
if ( ! this.$el.children().length )
|
|
|
|
return;
|
|
|
|
|
|
|
|
// If nothing is selected, display nothing.
|
|
|
|
this.$el.toggleClass( 'empty', ! this.collection.length );
|
|
|
|
this.$('.count').text( this.collection.length + ' ' + l10n.selected );
|
|
|
|
},
|
|
|
|
|
|
|
|
clear: function( event ) {
|
|
|
|
event.preventDefault();
|
|
|
|
this.collection.clear();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.view.Attachment.Selection
|
|
|
|
*/
|
|
|
|
media.view.Attachment.Selection = media.view.Attachment.extend({
|
|
|
|
// On click, just select the model, instead of removing the model from
|
|
|
|
// the selection.
|
|
|
|
toggleSelection: function() {
|
|
|
|
this.controller.state().get('selection').single( this.model );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
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-10-31 20:22:25 +01:00
|
|
|
media.view.Settings = Backbone.View.extend({
|
2012-10-16 21:25:17 +02:00
|
|
|
tagName: 'div',
|
|
|
|
className: 'attachment-display-settings',
|
|
|
|
template: media.template('attachment-display-settings'),
|
|
|
|
|
|
|
|
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
|
|
|
},
|
|
|
|
|
2012-10-31 20:22:25 +01:00
|
|
|
settings: {},
|
2012-10-16 21:25:17 +02:00
|
|
|
|
|
|
|
initialize: function() {
|
|
|
|
var settings = this.settings;
|
|
|
|
|
2012-10-31 20:22:25 +01:00
|
|
|
this.model = this.model || new Backbone.Model();
|
2012-10-16 21:25:17 +02:00
|
|
|
|
|
|
|
_.each( settings, function( setting, key ) {
|
2012-10-31 20:22:25 +01:00
|
|
|
if ( setting.name )
|
|
|
|
this.model.set( key, getUserSetting( setting.name, setting.fallback ) );
|
|
|
|
else
|
|
|
|
this.model.set( key, this.model.get( key ) || setting.fallback );
|
2012-10-16 21:25:17 +02:00
|
|
|
}, this );
|
|
|
|
|
|
|
|
this.model.validate = function( attrs ) {
|
|
|
|
return _.any( attrs, function( value, key ) {
|
|
|
|
return ! settings[ key ] || ! _.contains( settings[ key ].accepts, value );
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
this.model.on( 'change', function( model, options ) {
|
|
|
|
if ( ! options.changes )
|
|
|
|
return;
|
|
|
|
|
|
|
|
_.each( _.keys( options.changes ), function( key ) {
|
2012-10-31 20:22:25 +01:00
|
|
|
if ( settings[ key ] && settings[ key ].name )
|
2012-10-16 21:25:17 +02:00
|
|
|
setUserSetting( settings[ key ].name, model.get( key ) );
|
|
|
|
});
|
|
|
|
}, this );
|
|
|
|
|
|
|
|
this.model.on( 'change', this.updateChanges, this );
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
this.$el.html( this.template( this.model.toJSON() ) );
|
|
|
|
|
|
|
|
// Select the correct values.
|
|
|
|
_( this.model.attributes ).chain().keys().each( this.update, this );
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
update: function( key ) {
|
2012-10-31 20:22:25 +01:00
|
|
|
var setting = this.settings[ key ],
|
|
|
|
$setting = this.$('[data-setting="' + key + '"]'),
|
|
|
|
$buttons;
|
|
|
|
|
|
|
|
if ( ! setting )
|
|
|
|
return;
|
|
|
|
|
|
|
|
if ( 'select' === setting.type ) {
|
|
|
|
$setting.find('[value="' + this.model.get( key ) + '"]').attr( 'selected', true );
|
|
|
|
} else {
|
|
|
|
$buttons = $setting.find('button').removeClass('active');
|
|
|
|
$buttons.filter( '[value="' + this.model.get( key ) + '"]' ).addClass('active');
|
|
|
|
}
|
2012-10-16 21:25:17 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
updateHandler: function( event ) {
|
2012-10-31 20:22:25 +01:00
|
|
|
var $setting = $( event.target ).closest('[data-setting]');
|
2012-10-16 21:25:17 +02:00
|
|
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
2012-10-31 20:22:25 +01:00
|
|
|
if ( $setting.length )
|
|
|
|
this.model.set( $setting.data('setting'), event.target.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'),
|
|
|
|
|
|
|
|
settings: {
|
|
|
|
align: {
|
|
|
|
accepts: ['left','center','right','none'],
|
|
|
|
name: 'align',
|
|
|
|
fallback: 'none'
|
|
|
|
},
|
|
|
|
link: {
|
|
|
|
accepts: ['post','file','none'],
|
|
|
|
name: 'urlbutton',
|
|
|
|
fallback: 'post'
|
|
|
|
},
|
|
|
|
size: {
|
|
|
|
// @todo: Dynamically generate these.
|
|
|
|
accepts: ['thumbnail','medium','large','full'],
|
|
|
|
name: 'imgsize',
|
|
|
|
fallback: 'medium'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.view.Settings.Gallery
|
|
|
|
*/
|
|
|
|
media.view.Settings.Gallery = media.view.Settings.extend({
|
|
|
|
className: 'gallery-settings',
|
|
|
|
template: media.template('gallery-settings'),
|
|
|
|
|
|
|
|
settings: {
|
|
|
|
columns: {
|
|
|
|
accepts: _.invoke( _.range( 1, 10 ), 'toString' ),
|
2012-10-31 21:00:02 +01:00
|
|
|
fallback: '3',
|
2012-10-31 20:22:25 +01:00
|
|
|
type: 'select'
|
|
|
|
},
|
|
|
|
link: {
|
|
|
|
accepts: ['post','file'],
|
|
|
|
fallback: 'post'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
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: {
|
|
|
|
'change .describe': 'describe'
|
|
|
|
}
|
|
|
|
});
|
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
|
|
|
}(jQuery));
|