Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
(function($){
|
|
|
|
var media = wp.media,
|
|
|
|
Attachment = media.model.Attachment,
|
|
|
|
Attachments = media.model.Attachments,
|
2012-09-26 21:11:04 -04: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 00:54:23 -04:00
|
|
|
|
2012-09-26 21:11:04 -04: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 00:54:23 -04:00
|
|
|
|
2012-10-28 19:29:17 -04:00
|
|
|
// Check if the browser supports CSS 3.0 transitions
|
|
|
|
$.support.transition = (function(){
|
|
|
|
var style = document.documentElement.style,
|
|
|
|
transitions = {
|
|
|
|
WebkitTransition: 'webkitTransitionEnd',
|
|
|
|
MozTransition: 'transitionend',
|
|
|
|
OTransition: 'oTransitionEnd otransitionend',
|
|
|
|
transition: 'transitionend'
|
|
|
|
}, transition;
|
|
|
|
|
|
|
|
transition = _.find( _.keys( transitions ), function( transition ) {
|
|
|
|
return ! _.isUndefined( style[ transition ] );
|
|
|
|
});
|
|
|
|
|
|
|
|
return transition && {
|
|
|
|
end: transitions[ transition ]
|
|
|
|
};
|
|
|
|
}());
|
|
|
|
|
|
|
|
// 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 00:54:23 -04:00
|
|
|
/**
|
|
|
|
* ========================================================================
|
|
|
|
* CONTROLLERS
|
|
|
|
* ========================================================================
|
|
|
|
*/
|
|
|
|
|
|
|
|
/**
|
2012-10-28 19:29:17 -04: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 00:54:23 -04:00
|
|
|
*/
|
2012-10-28 19:29:17 -04:00
|
|
|
media.controller.StateMachine = function( states ) {
|
|
|
|
this.states = new Backbone.Collection( states );
|
|
|
|
};
|
|
|
|
|
|
|
|
// Use Backbone's self-propagating `extend` inheritance method.
|
|
|
|
media.controller.StateMachine.extend = Backbone.Model.extend;
|
|
|
|
|
|
|
|
_.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;
|
|
|
|
|
|
|
|
if ( id ) {
|
|
|
|
if ( previous = this.state() )
|
|
|
|
previous.trigger('deactivate');
|
|
|
|
this._state = id;
|
|
|
|
return this.state().trigger('activate');
|
|
|
|
}
|
|
|
|
|
|
|
|
if ( this._state )
|
|
|
|
return this.get( this._state );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// 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;
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
|
|
|
// wp.media.controller.Library
|
|
|
|
// ---------------------------
|
|
|
|
media.controller.Library = Backbone.Model.extend({
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
defaults: {
|
2012-10-28 19:29:17 -04:00
|
|
|
id: 'library',
|
|
|
|
multiple: false,
|
2012-10-29 02:56:23 -04:00
|
|
|
describe: false,
|
2012-10-31 17:43:59 -04: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 00:54:23 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function() {
|
2012-10-29 11:13:02 -04: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 00:54:23 -04:00
|
|
|
|
2012-10-28 19:29:17 -04:00
|
|
|
if ( ! this.get('library') )
|
|
|
|
this.set( 'library', media.query() );
|
2012-09-11 17:13:07 -04:00
|
|
|
|
2012-10-29 14:05:03 -04:00
|
|
|
if ( ! this.get('edge') )
|
|
|
|
this.set( 'edge', 120 );
|
|
|
|
|
|
|
|
if ( ! this.get('gutter') )
|
2012-10-30 17:09:45 -04:00
|
|
|
this.set( 'gutter', 8 );
|
2012-10-29 14:05:03 -04:00
|
|
|
|
2012-10-28 19:29:17 -04:00
|
|
|
this.on( 'activate', this.activate, this );
|
2012-10-29 11:13:02 -04:00
|
|
|
this.on( 'deactivate', this.deactivate, this );
|
2012-10-28 19:29:17 -04:00
|
|
|
},
|
2012-09-26 17:40:02 -04:00
|
|
|
|
2012-10-28 19:29:17 -04:00
|
|
|
activate: function() {
|
2012-10-29 11:13:02 -04:00
|
|
|
this.toolbar();
|
|
|
|
this.sidebar();
|
|
|
|
this.content();
|
|
|
|
|
|
|
|
// 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-30 19:36:38 -04:00
|
|
|
|
|
|
|
this.get('selection').on( 'selection:single', this.buildDetails, this );
|
|
|
|
this.get('selection').on( 'selection:unsingle', this.clearDetails, this );
|
2012-10-29 11:13:02 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
deactivate: function() {
|
|
|
|
var toolbar = this._postLibraryToolbar;
|
|
|
|
if ( toolbar )
|
|
|
|
this.get('selection').off( 'add remove', toolbar.visibility, toolbar );
|
|
|
|
|
|
|
|
wp.Uploader.queue.off( 'add', this.selectUpload, this );
|
2012-10-30 19:36:38 -04:00
|
|
|
this.get('selection').off( 'selection:single', this.buildDetails, this );
|
|
|
|
this.get('selection').off( 'selection:unsingle', this.clearDetails, this );
|
2012-10-29 11:13:02 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
toolbar: function() {
|
2012-10-28 19:29:17 -04:00
|
|
|
var frame = this.frame,
|
|
|
|
toolbar;
|
|
|
|
|
2012-10-29 02:56:23 -04:00
|
|
|
// Toolbar.
|
2012-10-28 19:29:17 -04:00
|
|
|
toolbar = this._postLibraryToolbar = new media.view.Toolbar.PostLibrary({
|
|
|
|
controller: frame,
|
2012-10-29 02:56:23 -04:00
|
|
|
state: this
|
2012-10-10 05:30:22 -04:00
|
|
|
});
|
2012-10-28 19:29:17 -04:00
|
|
|
|
|
|
|
frame.toolbar( toolbar );
|
|
|
|
this.get('selection').on( 'add remove', toolbar.visibility, toolbar );
|
2012-10-29 11:13:02 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
sidebar: function() {
|
|
|
|
var frame = this.frame;
|
2012-10-28 19:29:17 -04:00
|
|
|
|
2012-10-29 02:56:23 -04:00
|
|
|
// Sidebar.
|
|
|
|
frame.sidebar( new media.view.Sidebar({
|
2012-10-29 11:13:02 -04:00
|
|
|
controller: frame
|
2012-10-29 02:56:23 -04:00
|
|
|
}) );
|
|
|
|
|
2012-10-30 19:36:38 -04:00
|
|
|
this.details();
|
2012-10-29 11:13:02 -04:00
|
|
|
frame.sidebar().add({
|
|
|
|
search: new media.view.Search({
|
|
|
|
controller: frame,
|
|
|
|
model: this.get('library').props,
|
|
|
|
priority: 20
|
|
|
|
}),
|
|
|
|
|
|
|
|
selection: new media.view.SelectionPreview({
|
|
|
|
controller: frame,
|
|
|
|
collection: this.get('selection'),
|
|
|
|
priority: 40
|
|
|
|
})
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
content: function() {
|
|
|
|
var frame = this.frame;
|
|
|
|
|
2012-10-29 02:56:23 -04:00
|
|
|
// Content.
|
2012-10-28 19:29:17 -04:00
|
|
|
frame.content( new media.view.Attachments({
|
|
|
|
controller: frame,
|
|
|
|
collection: this.get('library'),
|
|
|
|
// The single `Attachment` view to be used in the `Attachments` view.
|
|
|
|
AttachmentView: media.view.Attachment.Library
|
|
|
|
}).render() );
|
2012-10-29 11:13:02 -04:00
|
|
|
},
|
2012-10-28 19:29:17 -04:00
|
|
|
|
2012-10-29 11:13:02 -04:00
|
|
|
selectUpload: function( attachment ) {
|
|
|
|
this.get('selection').add( attachment );
|
2012-09-11 17:13:07 -04:00
|
|
|
},
|
|
|
|
|
2012-10-30 19:36:38 -04:00
|
|
|
details: function() {
|
|
|
|
var single = this.get('selection').single();
|
|
|
|
this[ single ? 'buildDetails' : 'clearDetails' ]( single );
|
|
|
|
},
|
2012-09-11 17:13:07 -04:00
|
|
|
|
2012-10-30 19:36:38 -04: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 11:13:02 -04:00
|
|
|
|
2012-10-30 19:36:38 -04:00
|
|
|
clearDetails: function( model ) {
|
|
|
|
if ( this.get('selection').single() )
|
|
|
|
return this;
|
2012-10-29 11:13:02 -04:00
|
|
|
|
2012-10-30 19:36:38 -04:00
|
|
|
this.frame.sidebar().add( 'details', new Backbone.View({
|
|
|
|
priority: 80
|
|
|
|
}).render() );
|
|
|
|
return this;
|
2012-09-11 17:13:07 -04:00
|
|
|
},
|
|
|
|
|
2012-10-30 17:09:45 -04:00
|
|
|
toggleSelection: function( model ) {
|
2012-10-30 19:15:16 -04:00
|
|
|
var selection = this.get('selection');
|
2012-10-30 17:09:45 -04:00
|
|
|
|
2012-10-30 19:15:16 -04: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 17:09:45 -04:00
|
|
|
}
|
|
|
|
|
2012-10-30 19:15:16 -04:00
|
|
|
return this;
|
2012-10-28 19:29:17 -04:00
|
|
|
}
|
|
|
|
});
|
2012-09-11 17:13:07 -04:00
|
|
|
|
2012-10-28 19:29:17 -04:00
|
|
|
// wp.media.controller.Gallery
|
|
|
|
// ---------------------------
|
2012-10-29 11:13:02 -04:00
|
|
|
media.controller.Gallery = media.controller.Library.extend({
|
2012-10-28 19:29:17 -04:00
|
|
|
defaults: {
|
|
|
|
id: 'gallery',
|
2012-10-29 11:13:02 -04:00
|
|
|
multiple: false,
|
2012-10-29 02:56:23 -04:00
|
|
|
describe: true,
|
2012-10-31 17:43:59 -04:00
|
|
|
title: l10n.createGalleryTitle,
|
|
|
|
edge: 199,
|
|
|
|
editing: false
|
2012-10-28 19:29:17 -04:00
|
|
|
},
|
2012-09-11 17:13:07 -04:00
|
|
|
|
2012-10-29 11:13:02 -04:00
|
|
|
toolbar: function() {
|
|
|
|
this.frame.toolbar( new media.view.Toolbar.Gallery({
|
|
|
|
controller: this.frame,
|
|
|
|
state: this
|
|
|
|
}) );
|
2012-09-11 17:13:07 -04:00
|
|
|
},
|
|
|
|
|
2012-10-29 11:13:02 -04:00
|
|
|
sidebar: function() {
|
2012-10-28 19:29:17 -04:00
|
|
|
var frame = this.frame;
|
|
|
|
|
2012-10-29 02:56:23 -04:00
|
|
|
// Sidebar.
|
|
|
|
frame.sidebar( new media.view.Sidebar({
|
|
|
|
controller: frame
|
2012-10-29 11:13:02 -04:00
|
|
|
}) );
|
2012-10-29 02:56:23 -04:00
|
|
|
|
2012-10-29 11:13:02 -04:00
|
|
|
this.details();
|
2012-10-31 15:22:25 -04:00
|
|
|
frame.sidebar().add({
|
|
|
|
settings: new media.view.Settings.Gallery({
|
|
|
|
controller: frame,
|
|
|
|
model: this.get('library').props,
|
|
|
|
priority: 40
|
|
|
|
}).render()
|
|
|
|
});
|
2012-10-29 11:13:02 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
content: function() {
|
|
|
|
this.frame.content( new media.view.Attachments({
|
|
|
|
controller: this.frame,
|
|
|
|
collection: this.get('library'),
|
2012-10-28 19:29:17 -04:00
|
|
|
sortable: true,
|
|
|
|
// The single `Attachment` view to be used in the `Attachments` view.
|
|
|
|
AttachmentView: media.view.Attachment.Gallery
|
|
|
|
}).render() );
|
|
|
|
}
|
|
|
|
});
|
2012-09-11 17:13:07 -04:00
|
|
|
|
2012-11-01 21:20:01 -04: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({
|
|
|
|
controller: frame,
|
|
|
|
state: this
|
|
|
|
}) );
|
|
|
|
},
|
|
|
|
|
|
|
|
// Leave the sidebar.
|
|
|
|
sidebar: function() {}
|
|
|
|
});
|
|
|
|
|
2012-10-28 19:29:17 -04:00
|
|
|
/**
|
|
|
|
* ========================================================================
|
|
|
|
* VIEWS
|
|
|
|
* ========================================================================
|
|
|
|
*/
|
2012-09-11 17:13:07 -04:00
|
|
|
|
2012-10-28 19:29:17 -04:00
|
|
|
/**
|
|
|
|
* wp.media.view.Frame
|
|
|
|
*/
|
|
|
|
media.view.Frame = Backbone.View.extend({
|
|
|
|
tagName: 'div',
|
|
|
|
className: 'media-frame',
|
|
|
|
template: media.template('media-frame'),
|
2012-09-11 17:13:07 -04:00
|
|
|
|
2012-10-28 19:29:17 -04:00
|
|
|
initialize: function() {
|
|
|
|
_.defaults( this.options, {
|
|
|
|
state: 'library',
|
|
|
|
title: '',
|
|
|
|
selection: [],
|
|
|
|
library: {},
|
|
|
|
modal: true,
|
|
|
|
multiple: false,
|
2012-10-31 17:43:59 -04:00
|
|
|
uploader: true,
|
|
|
|
editing: false
|
2012-10-28 19:29:17 -04: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 00:54:23 -04:00
|
|
|
},
|
|
|
|
|
2012-10-28 19:29:17 -04:00
|
|
|
render: function() {
|
2012-10-29 02:56:23 -04:00
|
|
|
var els = [ this.toolbar().el, this.sidebar().el, this.content().el ];
|
2012-10-28 19:29:17 -04:00
|
|
|
|
|
|
|
if ( this.modal )
|
|
|
|
this.modal.render();
|
|
|
|
|
|
|
|
// Detach any views that will be rebound to maintain event bidnings.
|
|
|
|
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 00:09:43 -04:00
|
|
|
},
|
|
|
|
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
createSelection: function() {
|
2012-10-28 19:29:17 -04: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 00:54:23 -04:00
|
|
|
|
2012-10-29 11:13:02 -04:00
|
|
|
if ( ! (selection instanceof media.model.Selection) ) {
|
|
|
|
selection = this.options.selection = new media.model.Selection( selection, {
|
|
|
|
multiple: this.options.multiple
|
|
|
|
});
|
|
|
|
}
|
2012-10-28 19:29:17 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
createStates: function() {
|
|
|
|
var options = this.options;
|
|
|
|
|
|
|
|
// 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 11:13:02 -04:00
|
|
|
selection: options.selection,
|
|
|
|
library: media.query( options.library ),
|
|
|
|
multiple: this.options.multiple
|
2012-10-28 19:29:17 -04:00
|
|
|
}),
|
|
|
|
new media.controller.Gallery({
|
2012-10-31 17:43:59 -04:00
|
|
|
library: options.selection,
|
|
|
|
editing: options.editing
|
2012-11-01 21:20:01 -04:00
|
|
|
}),
|
|
|
|
new media.controller.GalleryAddImages()
|
2012-10-28 19:29:17 -04:00
|
|
|
]);
|
|
|
|
|
|
|
|
// Set the default state.
|
|
|
|
this.state( options.state );
|
|
|
|
},
|
|
|
|
|
|
|
|
createSubviews: function() {
|
|
|
|
// Initialize a stub view for each subview region.
|
|
|
|
_.each(['toolbar','sidebar','content'], function( subview ) {
|
|
|
|
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 17:13:07 -04:00
|
|
|
}
|
|
|
|
});
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
|
2012-10-28 19:29:17 -04:00
|
|
|
// Make the `Frame` a `StateMachine`.
|
|
|
|
_.extend( media.view.Frame.prototype, media.controller.StateMachine.prototype );
|
|
|
|
|
|
|
|
// Create methods to fetch and replace individual subviews.
|
|
|
|
_.each(['toolbar','sidebar','content'], function( subview ) {
|
|
|
|
media.view.Frame.prototype[ subview ] = function( view ) {
|
|
|
|
var previous = this[ '_' + subview ];
|
|
|
|
|
|
|
|
if ( ! view )
|
|
|
|
return previous;
|
|
|
|
|
|
|
|
view.$el.addClass( 'media-' + subview );
|
|
|
|
|
|
|
|
if ( previous.destroy )
|
|
|
|
previous.destroy();
|
|
|
|
previous.undelegateEvents();
|
|
|
|
previous.$el.replaceWith( view.$el );
|
|
|
|
this[ '_' + subview ] = view;
|
2012-09-11 17:13:07 -04:00
|
|
|
};
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
});
|
|
|
|
|
2012-10-28 19:29:17 -04: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 00:54:23 -04: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-28 19:29:17 -04: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 00:54:23 -04:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
2012-09-06 05:19:03 -04: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-28 19:29:17 -04: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 00:54:23 -04:00
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
attach: function() {
|
|
|
|
this.$el.appendTo( this.options.container );
|
2012-10-10 04:31:12 -04:00
|
|
|
this.controller.trigger( 'attach', this.controller );
|
2012-10-28 19:29:17 -04:00
|
|
|
return this;
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
detach: function() {
|
|
|
|
this.$el.detach();
|
2012-10-10 04:31:12 -04:00
|
|
|
this.controller.trigger( 'detach', this.controller );
|
2012-10-28 19:29:17 -04:00
|
|
|
return this;
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
open: function() {
|
|
|
|
this.$el.show();
|
2012-10-10 04:31:12 -04:00
|
|
|
this.controller.trigger( 'open', this.controller );
|
2012-10-28 19:29:17 -04:00
|
|
|
return this;
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
close: function() {
|
|
|
|
this.$el.hide();
|
2012-10-10 04:31:12 -04:00
|
|
|
this.controller.trigger( 'close', this.controller );
|
2012-10-28 19:29:17 -04:00
|
|
|
return this;
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
closeHandler: function( event ) {
|
|
|
|
event.preventDefault();
|
|
|
|
this.close();
|
|
|
|
},
|
|
|
|
|
|
|
|
content: function( $content ) {
|
2012-09-18 20:34:00 -04: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 00:54:23 -04:00
|
|
|
this.options.$content = ( $content instanceof Backbone.View ) ? $content.$el : $content;
|
|
|
|
return this.render();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-10-28 19:29:17 -04: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 03:38:13 -04:00
|
|
|
this.inline = new media.view.UploaderInline({
|
|
|
|
controller: this.controller,
|
|
|
|
uploaderWindow: this
|
|
|
|
}).render();
|
|
|
|
|
|
|
|
this.inline.$el.appendTo('body');
|
2012-10-28 19:29:17 -04:00
|
|
|
|
|
|
|
uploader = this.options.uploader = _.defaults( this.options.uploader || {}, {
|
2012-10-29 03:38:13 -04:00
|
|
|
container: this.inline.$el,
|
2012-10-28 19:29:17 -04:00
|
|
|
dropzone: this.$el,
|
2012-10-29 03:38:13 -04:00
|
|
|
browser: this.inline.$('.browser'),
|
2012-10-28 19:29:17 -04: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 03:38:13 -04:00
|
|
|
refresh: function() {
|
|
|
|
if ( this.uploader )
|
|
|
|
this.uploader.refresh();
|
|
|
|
},
|
|
|
|
|
2012-10-28 19:29:17 -04: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 03:38:13 -04:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
media.view.UploaderInline = Backbone.View.extend({
|
|
|
|
tagName: 'div',
|
|
|
|
className: 'uploader-inline',
|
|
|
|
template: media.template('uploader-inline'),
|
|
|
|
|
|
|
|
initialize: function() {
|
|
|
|
this.controller = this.options.controller;
|
|
|
|
|
|
|
|
// 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() {
|
|
|
|
this.renderUploadProgress();
|
|
|
|
this.$el.html( this.template( this.options ) );
|
|
|
|
this.$bar = this.$('.media-progress-bar div');
|
|
|
|
return this;
|
2012-10-28 19:29:17 -04: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 03:46:15 -04:00
|
|
|
/**
|
|
|
|
* wp.media.view.Toolbar
|
|
|
|
*/
|
|
|
|
media.view.Toolbar = Backbone.View.extend({
|
|
|
|
tagName: 'div',
|
|
|
|
className: 'media-toolbar',
|
|
|
|
|
|
|
|
initialize: function() {
|
2012-10-28 19:29:17 -04:00
|
|
|
this.controller = this.options.controller;
|
|
|
|
|
|
|
|
this._views = {};
|
2012-09-06 03:46:15 -04:00
|
|
|
this.$primary = $('<div class="media-toolbar-primary" />').prependTo( this.$el );
|
|
|
|
this.$secondary = $('<div class="media-toolbar-secondary" />').prependTo( this.$el );
|
|
|
|
|
2012-10-28 19:29:17 -04:00
|
|
|
if ( this.options.items )
|
2012-10-29 11:13:02 -04:00
|
|
|
this.add( this.options.items, { silent: true });
|
|
|
|
|
|
|
|
if ( ! this.options.silent )
|
|
|
|
this.render();
|
2012-09-06 03:46:15 -04: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 04:31:12 -04:00
|
|
|
this.$primary.html( _.pluck( views.primary || [], 'el' ) );
|
|
|
|
this.$secondary.html( _.pluck( views.secondary || [], 'el' ) );
|
2012-09-06 03:46:15 -04:00
|
|
|
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
add: function( id, view, options ) {
|
2012-10-29 11:13:02 -04:00
|
|
|
options = options || {};
|
|
|
|
|
2012-10-28 19:29:17 -04:00
|
|
|
// Accept an object with an `id` : `view` mapping.
|
|
|
|
if ( _.isObject( id ) ) {
|
|
|
|
_.each( id, function( view, id ) {
|
2012-10-29 11:13:02 -04:00
|
|
|
this.add( id, view, { silent: true });
|
2012-10-28 19:29:17 -04:00
|
|
|
}, this );
|
2012-10-29 11:13:02 -04:00
|
|
|
|
|
|
|
if ( ! options.silent )
|
|
|
|
this.render();
|
2012-10-28 19:29:17 -04:00
|
|
|
return this;
|
|
|
|
}
|
|
|
|
|
2012-09-06 03:46:15 -04:00
|
|
|
if ( ! ( view instanceof Backbone.View ) ) {
|
|
|
|
view.classes = [ id ].concat( view.classes || [] );
|
|
|
|
view = new media.view.Button( view ).render();
|
|
|
|
}
|
|
|
|
|
2012-10-28 19:29:17 -04:00
|
|
|
view.controller = view.controller || this.controller;
|
|
|
|
|
2012-09-06 03:46:15 -04:00
|
|
|
this._views[ id ] = view;
|
2012-10-29 11:13:02 -04:00
|
|
|
if ( ! options.silent )
|
2012-09-06 03:46:15 -04:00
|
|
|
this.render();
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
2012-09-26 20:59:04 -04:00
|
|
|
get: function( id ) {
|
|
|
|
return this._views[ id ];
|
|
|
|
},
|
|
|
|
|
2012-09-06 03:46:15 -04:00
|
|
|
remove: function( id, options ) {
|
|
|
|
delete this._views[ id ];
|
|
|
|
if ( ! options || ! options.silent )
|
|
|
|
this.render();
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-10-28 19:29:17 -04:00
|
|
|
// wp.media.view.Toolbar.PostLibrary
|
|
|
|
// ---------------------------------
|
|
|
|
media.view.Toolbar.PostLibrary = media.view.Toolbar.extend({
|
|
|
|
initialize: function() {
|
2012-10-29 02:56:23 -04:00
|
|
|
var state = this.options.state,
|
|
|
|
selection = state.get('selection'),
|
2012-10-28 19:29:17 -04:00
|
|
|
controller = this.options.controller;
|
|
|
|
|
|
|
|
this.options.items = {
|
|
|
|
'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,
|
|
|
|
classes: 'dropdown-flip-x',
|
|
|
|
buttons: [
|
|
|
|
{
|
|
|
|
text: l10n.insertIntoPost,
|
|
|
|
click: function() {
|
|
|
|
controller.close();
|
2012-10-29 02:56:23 -04:00
|
|
|
state.trigger( 'insert', selection );
|
2012-10-28 19:29:17 -04:00
|
|
|
selection.clear();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
classes: ['down-arrow'],
|
2012-10-31 15:22:25 -04:00
|
|
|
dropdown: new media.view.Settings.AttachmentDisplay().render().$el,
|
2012-10-28 19:29:17 -04: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 02:56:23 -04:00
|
|
|
this.visibility();
|
2012-10-28 19:29:17 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
visibility: function() {
|
2012-10-29 02:56:23 -04:00
|
|
|
var state = this.options.state,
|
|
|
|
selection = state.get('selection'),
|
2012-10-28 19:29:17 -04:00
|
|
|
controller = this.options.controller,
|
|
|
|
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 02:56:23 -04:00
|
|
|
|
|
|
|
_.first( insert.buttons ).model.set( 'disabled', ! count );
|
2012-10-28 19:29:17 -04:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// wp.media.view.Toolbar.Gallery
|
|
|
|
// -----------------------------
|
|
|
|
media.view.Toolbar.Gallery = media.view.Toolbar.extend({
|
|
|
|
initialize: function() {
|
2012-10-29 02:56:23 -04:00
|
|
|
var state = this.options.state,
|
|
|
|
editing = state.get('editing'),
|
2012-10-29 11:13:02 -04:00
|
|
|
library = state.get('library'),
|
2012-10-28 19:29:17 -04:00
|
|
|
controller = this.options.controller;
|
|
|
|
|
|
|
|
this.options.items = {
|
2012-10-31 17:43:59 -04:00
|
|
|
update: {
|
2012-10-28 19:29:17 -04:00
|
|
|
style: 'primary',
|
2012-10-31 17:43:59 -04:00
|
|
|
text: editing ? l10n.updateGallery : l10n.insertGallery,
|
2012-10-28 19:29:17 -04:00
|
|
|
priority: 40,
|
|
|
|
click: function() {
|
|
|
|
controller.close();
|
2012-10-29 11:13:02 -04:00
|
|
|
state.trigger( 'update', library );
|
2012-11-01 21:20:01 -04:00
|
|
|
controller.get('library').get('selection').clear();
|
2012-10-28 19:29:17 -04:00
|
|
|
controller.state('library');
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2012-11-01 21:20:01 -04:00
|
|
|
addImages: {
|
|
|
|
text: l10n.addImages,
|
|
|
|
priority: -40,
|
|
|
|
|
|
|
|
click: function() {
|
|
|
|
controller.get('gallery:add').set( 'selection', new media.model.Selection( library.models, {
|
|
|
|
props: library.props.toJSON(),
|
|
|
|
multiple: true
|
|
|
|
}) );
|
|
|
|
controller.state('gallery:add');
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2012-10-31 17:43:59 -04:00
|
|
|
cancel: {
|
|
|
|
text: l10n.cancel,
|
|
|
|
priority: -60,
|
2012-10-28 19:29:17 -04:00
|
|
|
|
|
|
|
click: function() {
|
2012-10-31 17:43:59 -04:00
|
|
|
if ( editing )
|
|
|
|
controller.close();
|
|
|
|
else
|
|
|
|
controller.state('library');
|
2012-10-28 19:29:17 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
media.view.Toolbar.prototype.initialize.apply( this, arguments );
|
|
|
|
}
|
|
|
|
});
|
2012-09-06 03:46:15 -04:00
|
|
|
|
2012-11-01 21:20:01 -04:00
|
|
|
// wp.media.view.Toolbar.GalleryAddImages
|
|
|
|
// -----------------------------
|
|
|
|
media.view.Toolbar.GalleryAddImages = media.view.Toolbar.extend({
|
|
|
|
initialize: function() {
|
|
|
|
var state = this.options.state,
|
|
|
|
editing = state.get('editing'),
|
|
|
|
library = state.get('library'),
|
|
|
|
controller = this.options.controller;
|
|
|
|
|
|
|
|
this.options.items = {
|
|
|
|
update: {
|
|
|
|
style: 'primary',
|
|
|
|
text: l10n.continueEditing,
|
|
|
|
priority: 40,
|
|
|
|
|
|
|
|
click: function() {
|
|
|
|
controller.get('gallery').set( 'library', state.get('selection') );
|
|
|
|
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 03:46:15 -04:00
|
|
|
/**
|
|
|
|
* wp.media.view.Button
|
|
|
|
*/
|
|
|
|
media.view.Button = Backbone.View.extend({
|
|
|
|
tagName: 'a',
|
|
|
|
className: 'media-button',
|
|
|
|
attributes: { href: '#' },
|
|
|
|
|
|
|
|
events: {
|
|
|
|
'click': 'click'
|
|
|
|
},
|
|
|
|
|
2012-09-26 20:59:04 -04:00
|
|
|
defaults: {
|
2012-10-29 02:56:23 -04:00
|
|
|
text: '',
|
|
|
|
style: '',
|
|
|
|
size: 'large',
|
|
|
|
disabled: false
|
2012-09-26 20:59:04 -04:00
|
|
|
},
|
|
|
|
|
2012-09-06 03:46:15 -04:00
|
|
|
initialize: function() {
|
2012-09-26 20:59:04 -04: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 15:25:17 -04:00
|
|
|
if ( this.options.dropdown )
|
|
|
|
this.options.dropdown.addClass('dropdown');
|
|
|
|
|
2012-09-26 20:59:04 -04:00
|
|
|
this.model.on( 'change', this.render, this );
|
2012-09-06 03:46:15 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
2012-10-29 02:56:23 -04:00
|
|
|
var classes = [ 'button', this.className ],
|
|
|
|
model = this.model.toJSON();
|
2012-09-06 03:46:15 -04:00
|
|
|
|
2012-10-29 02:56:23 -04:00
|
|
|
if ( model.style )
|
|
|
|
classes.push( 'button-' + model.style );
|
2012-09-06 03:46:15 -04:00
|
|
|
|
2012-10-29 02:56:23 -04:00
|
|
|
if ( model.size )
|
|
|
|
classes.push( 'button-' + model.size );
|
2012-09-18 20:34:00 -04:00
|
|
|
|
2012-10-16 15:25:17 -04:00
|
|
|
classes = _.uniq( classes.concat( this.options.classes ) );
|
2012-09-06 03:46:15 -04:00
|
|
|
this.el.className = classes.join(' ');
|
2012-09-26 20:59:04 -04:00
|
|
|
|
2012-10-29 02:56:23 -04:00
|
|
|
this.$el.attr( 'disabled', model.disabled );
|
2012-10-16 15:25:17 -04:00
|
|
|
|
|
|
|
// Detach the dropdown.
|
|
|
|
if ( this.options.dropdown )
|
|
|
|
this.options.dropdown.detach();
|
|
|
|
|
2012-09-26 20:59:04 -04:00
|
|
|
this.$el.text( this.model.get('text') );
|
2012-10-16 15:25:17 -04:00
|
|
|
|
|
|
|
if ( this.options.dropdown )
|
|
|
|
this.$el.append( this.options.dropdown );
|
|
|
|
|
2012-09-06 03:46:15 -04:00
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
click: function( event ) {
|
|
|
|
event.preventDefault();
|
2012-10-29 02:56:23 -04:00
|
|
|
if ( this.options.click && ! this.model.get('disabled') )
|
2012-09-06 03:46:15 -04:00
|
|
|
this.options.click.apply( this, arguments );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-10-16 15:25:17 -04: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 02:56:23 -04:00
|
|
|
/**
|
|
|
|
* wp.media.view.Sidebar
|
|
|
|
*/
|
|
|
|
media.view.Sidebar = Backbone.View.extend({
|
|
|
|
tagName: 'div',
|
|
|
|
className: 'media-sidebar',
|
|
|
|
template: media.template('sidebar'),
|
|
|
|
|
|
|
|
initialize: function() {
|
|
|
|
this.controller = this.options.controller;
|
|
|
|
this._views = {};
|
|
|
|
|
|
|
|
if ( this.options.views )
|
2012-10-29 11:13:02 -04:00
|
|
|
this.add( this.options.views, { silent: true });
|
|
|
|
|
|
|
|
if ( ! this.options.silent )
|
|
|
|
this.render();
|
2012-10-29 02:56:23 -04: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();
|
|
|
|
|
|
|
|
this.$el.html( this.template({
|
|
|
|
title: this.controller.state().get('title') || '',
|
|
|
|
uploader: this.controller.options.uploader
|
|
|
|
}) );
|
|
|
|
|
|
|
|
this.$('.sidebar-content').html( els );
|
|
|
|
|
2012-10-29 03:38:13 -04:00
|
|
|
if ( this.controller.uploader ) {
|
|
|
|
this.$el.append( this.controller.uploader.inline.$el );
|
|
|
|
this.controller.uploader.refresh();
|
|
|
|
}
|
|
|
|
|
2012-10-29 02:56:23 -04:00
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
add: function( id, view, options ) {
|
2012-10-29 11:13:02 -04:00
|
|
|
options = options || {};
|
|
|
|
|
2012-10-29 02:56:23 -04:00
|
|
|
// Accept an object with an `id` : `view` mapping.
|
|
|
|
if ( _.isObject( id ) ) {
|
|
|
|
_.each( id, function( view, id ) {
|
2012-10-29 11:13:02 -04:00
|
|
|
this.add( id, view, { silent: true });
|
2012-10-29 02:56:23 -04:00
|
|
|
}, this );
|
2012-10-29 11:13:02 -04:00
|
|
|
|
|
|
|
if ( ! options.silent )
|
|
|
|
this.render();
|
2012-10-29 02:56:23 -04:00
|
|
|
return this;
|
|
|
|
}
|
|
|
|
|
|
|
|
view.controller = view.controller || this.controller;
|
|
|
|
|
|
|
|
this._views[ id ] = view;
|
2012-10-29 11:13:02 -04:00
|
|
|
if ( ! options.silent )
|
2012-10-29 02:56:23 -04: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;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-09-27 02:53:54 -04:00
|
|
|
/**
|
|
|
|
* wp.media.view.Attachment
|
|
|
|
*/
|
|
|
|
media.view.Attachment = Backbone.View.extend({
|
|
|
|
tagName: 'li',
|
|
|
|
className: 'attachment',
|
|
|
|
template: media.template('attachment'),
|
|
|
|
|
|
|
|
events: {
|
2012-10-30 17:15:46 -04:00
|
|
|
'click .attachment-preview': 'toggleSelection',
|
|
|
|
'change .describe': 'describe'
|
2012-09-27 02:53:54 -04:00
|
|
|
},
|
|
|
|
|
2012-09-27 03:45:26 -04:00
|
|
|
buttons: {},
|
|
|
|
|
2012-09-27 02:53:54 -04:00
|
|
|
initialize: function() {
|
|
|
|
this.controller = this.options.controller;
|
|
|
|
|
2012-10-30 19:59:57 -04:00
|
|
|
this.model.on( 'change:sizes change:uploading change:caption change:title', this.render, this );
|
2012-09-27 02:53:54 -04: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 03:45:26 -04:00
|
|
|
|
2012-10-30 19:59:57 -04:00
|
|
|
// Update the model's details view.
|
|
|
|
this.model.on( 'selection:single selection:unsingle', this.details, this );
|
|
|
|
this.details( this.model, this.controller.state().get('selection') );
|
|
|
|
|
2012-09-27 03:45:26 -04:00
|
|
|
// Prevent default navigation on all links.
|
|
|
|
this.$el.on( 'click', 'a', this.preventDefault );
|
2012-09-27 02:53:54 -04:00
|
|
|
},
|
|
|
|
|
2012-10-30 19:59:57 -04:00
|
|
|
destroy: function() {
|
|
|
|
this.model.off( null, null, this );
|
|
|
|
},
|
|
|
|
|
2012-09-27 02:53:54 -04:00
|
|
|
render: function() {
|
2012-10-30 19:59:57 -04:00
|
|
|
var attachment = this.model.toJSON(),
|
2012-10-10 05:55:47 -04:00
|
|
|
options = _.defaults( this.model.toJSON(), {
|
|
|
|
orientation: 'landscape',
|
|
|
|
uploading: false,
|
2012-10-10 06:08:43 -04:00
|
|
|
type: '',
|
2012-10-10 06:45:01 -04:00
|
|
|
subtype: '',
|
|
|
|
icon: '',
|
2012-10-10 19:55:45 -04:00
|
|
|
filename: '',
|
|
|
|
caption: '',
|
|
|
|
title: ''
|
2012-10-10 05:55:47 -04:00
|
|
|
});
|
2012-09-27 02:53:54 -04:00
|
|
|
|
2012-10-10 19:32:48 -04:00
|
|
|
options.buttons = this.buttons;
|
2012-10-30 19:59:57 -04:00
|
|
|
options.describe = this.controller.state().get('describe');
|
2012-10-08 19:20:04 -04:00
|
|
|
|
2012-10-10 05:55:47 -04:00
|
|
|
if ( 'image' === options.type )
|
2012-10-29 14:05:03 -04:00
|
|
|
_.extend( options, this.imageSize() );
|
2012-09-27 02:53:54 -04:00
|
|
|
|
|
|
|
this.$el.html( this.template( options ) );
|
|
|
|
|
2012-10-10 05:55:47 -04:00
|
|
|
if ( options.uploading )
|
2012-09-27 02:53:54 -04:00
|
|
|
this.$bar = this.$('.media-progress-bar div');
|
|
|
|
else
|
|
|
|
delete this.$bar;
|
|
|
|
|
|
|
|
// Check if the model is selected.
|
2012-10-28 19:29:17 -04:00
|
|
|
if ( this.selected() )
|
2012-09-27 02:53:54 -04: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 17:09:45 -04:00
|
|
|
this.controller.state().toggleSelection( this.model );
|
2012-09-27 02:53:54 -04:00
|
|
|
},
|
|
|
|
|
2012-10-28 19:29:17 -04:00
|
|
|
selected: function() {
|
|
|
|
var selection = this.controller.state().get('selection');
|
|
|
|
if ( selection )
|
|
|
|
return selection.has( this.model );
|
|
|
|
},
|
|
|
|
|
2012-09-27 02:53:54 -04:00
|
|
|
select: function( model, collection ) {
|
2012-10-28 19:29:17 -04: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 02:53:54 -04:00
|
|
|
return;
|
|
|
|
|
|
|
|
this.$el.addClass('selected');
|
|
|
|
},
|
|
|
|
|
|
|
|
deselect: function( model, collection ) {
|
2012-10-28 19:29:17 -04: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 02:53:54 -04:00
|
|
|
return;
|
|
|
|
|
|
|
|
this.$el.removeClass('selected');
|
2012-09-27 03:45:26 -04:00
|
|
|
},
|
|
|
|
|
2012-10-30 19:15:16 -04:00
|
|
|
details: function( model, collection ) {
|
|
|
|
var selection = this.controller.state().get('selection'),
|
|
|
|
details;
|
|
|
|
|
|
|
|
if ( selection !== collection )
|
|
|
|
return;
|
|
|
|
|
|
|
|
details = selection.single();
|
2012-10-30 17:09:45 -04:00
|
|
|
this.$el.toggleClass( 'details', details === this.model );
|
|
|
|
},
|
|
|
|
|
2012-09-27 03:45:26 -04:00
|
|
|
preventDefault: function( event ) {
|
|
|
|
event.preventDefault();
|
2012-10-08 19:20:04 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
imageSize: function( size ) {
|
|
|
|
var sizes = this.model.get('sizes');
|
|
|
|
|
|
|
|
size = size || 'medium';
|
|
|
|
|
|
|
|
// Use the provided image size if possible.
|
|
|
|
if ( sizes && sizes[ size ] ) {
|
2012-10-29 14:05:03 -04:00
|
|
|
return _.clone( sizes[ size ] );
|
2012-10-08 19:20:04 -04:00
|
|
|
} else {
|
|
|
|
return {
|
|
|
|
url: this.model.get('url'),
|
|
|
|
width: this.model.get('width'),
|
|
|
|
height: this.model.get('height'),
|
|
|
|
orientation: this.model.get('orientation')
|
|
|
|
};
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2012-10-10 19:32:48 -04: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 02:53:54 -04:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-10-08 20:27:14 -04:00
|
|
|
/**
|
|
|
|
* wp.media.view.Attachment.Library
|
|
|
|
*/
|
|
|
|
media.view.Attachment.Library = media.view.Attachment.extend({
|
|
|
|
className: 'attachment library'
|
|
|
|
});
|
|
|
|
|
2012-09-27 02:53:54 -04:00
|
|
|
/**
|
|
|
|
* wp.media.view.Attachment.Gallery
|
|
|
|
*/
|
|
|
|
media.view.Attachment.Gallery = media.view.Attachment.extend({
|
2012-09-27 03:45:26 -04:00
|
|
|
buttons: {
|
|
|
|
close: true
|
|
|
|
},
|
|
|
|
|
2012-10-11 00:04:12 -04:00
|
|
|
events: (function() {
|
|
|
|
var events = _.clone( media.view.Attachment.prototype.events );
|
2012-10-29 11:13:02 -04:00
|
|
|
events['click .close'] = 'removeFromGallery';
|
2012-10-11 00:04:12 -04:00
|
|
|
return events;
|
2012-10-29 11:13:02 -04:00
|
|
|
}()),
|
|
|
|
|
2012-10-31 16:51:34 -04:00
|
|
|
removeFromGallery: function( event ) {
|
|
|
|
// Stop propagation so the model isn't selected.
|
|
|
|
event.stopPropagation();
|
|
|
|
|
2012-10-29 11:13:02 -04:00
|
|
|
this.controller.state().get('library').remove( this.model );
|
|
|
|
}
|
2012-09-27 02:53:54 -04:00
|
|
|
});
|
|
|
|
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
/**
|
|
|
|
* wp.media.view.Attachments
|
|
|
|
*/
|
|
|
|
media.view.Attachments = Backbone.View.extend({
|
2012-10-29 02:56:23 -04:00
|
|
|
tagName: 'ul',
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
className: 'attachments',
|
2012-10-29 14:05:03 -04: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 00:54:23 -04:00
|
|
|
|
|
|
|
events: {
|
2012-10-29 02:56:23 -04:00
|
|
|
'scroll': 'scroll'
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
initialize: function() {
|
|
|
|
this.controller = this.options.controller;
|
2012-10-29 14:05:03 -04:00
|
|
|
this.el.id = _.uniqueId('__attachments-view-');
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
|
|
|
|
_.defaults( this.options, {
|
|
|
|
refreshSensitivity: 200,
|
2012-09-27 02:39:12 -04:00
|
|
|
refreshThreshold: 3,
|
2012-10-03 00:21:50 -04:00
|
|
|
AttachmentView: media.view.Attachment,
|
|
|
|
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 00:54:23 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
_.each(['add','remove'], function( method ) {
|
|
|
|
this.collection.on( method, function( attachment, attachments, options ) {
|
|
|
|
this[ method ]( attachment, options.index );
|
|
|
|
}, this );
|
|
|
|
}, this );
|
|
|
|
|
2012-10-29 02:56:23 -04:00
|
|
|
this.collection.on( 'reset', this.render, this );
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
|
2012-10-29 02:56:23 -04:00
|
|
|
// Throttle the scroll handler.
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
this.scroll = _.chain( this.scroll ).bind( this ).throttle( this.options.refreshSensitivity ).value();
|
2012-10-03 00:21:50 -04:00
|
|
|
|
|
|
|
this.initSortable();
|
2012-10-29 14:05:03 -04:00
|
|
|
|
|
|
|
this.controller.state().on( 'change:edge change:gutter', this.css, this );
|
|
|
|
this.css();
|
|
|
|
},
|
|
|
|
|
|
|
|
destroy: function() {
|
|
|
|
this.collection.off( 'add remove reset', null, this );
|
|
|
|
this.controller.state().off( 'change:edge change:gutter', this.css, this );
|
|
|
|
},
|
|
|
|
|
|
|
|
css: function() {
|
|
|
|
var $css = $( '#' + this.el.id + '-css' ),
|
|
|
|
state = this.controller.state();
|
|
|
|
|
|
|
|
if ( $css.length )
|
|
|
|
$css.remove();
|
|
|
|
|
|
|
|
media.view.Attachments.$head().append( this.template({
|
|
|
|
id: this.el.id,
|
|
|
|
edge: state.get('edge'),
|
|
|
|
gutter: state.get('gutter')
|
|
|
|
}) );
|
2012-10-03 00:21:50 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
initSortable: function() {
|
|
|
|
var collection = this.collection,
|
|
|
|
from;
|
|
|
|
|
|
|
|
if ( ! this.options.sortable || ! $.fn.sortable )
|
|
|
|
return;
|
|
|
|
|
2012-10-29 02:56:23 -04:00
|
|
|
this.$el.sortable({
|
2012-10-03 00:21:50 -04:00
|
|
|
// If the `collection` has a `comparator`, disable sorting.
|
|
|
|
disabled: !! collection.comparator,
|
|
|
|
|
|
|
|
// Prevent attachments from being dragged outside the bounding
|
|
|
|
// box of the list.
|
2012-10-29 02:56:23 -04:00
|
|
|
containment: this.$el,
|
2012-10-03 00:21:50 -04:00
|
|
|
|
|
|
|
// Change the position of the attachment as soon as the
|
|
|
|
// mouse pointer overlaps a thumbnail.
|
|
|
|
tolerance: 'pointer',
|
|
|
|
|
|
|
|
// Record the initial `index` of the dragged model.
|
|
|
|
start: function( event, ui ) {
|
|
|
|
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 02:56:23 -04:00
|
|
|
this.$el.sortable( 'option', 'disabled', !! collection.comparator );
|
2012-10-03 00:21:50 -04: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 00:54:23 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
|
|
|
// If there are no elements, load some.
|
|
|
|
if ( ! this.collection.length ) {
|
|
|
|
this.collection.more();
|
2012-10-29 02:56:23 -04: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 00:54:23 -04:00
|
|
|
return this;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Otherwise, create all of the Attachment views, and replace
|
|
|
|
// the list in a single DOM operation.
|
2012-10-29 02:56:23 -04:00
|
|
|
this.$el.html( this.collection.map( function( attachment ) {
|
2012-09-27 02:39:12 -04: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 00:54:23 -04: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();
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
add: function( attachment, index ) {
|
|
|
|
var view, children;
|
|
|
|
|
2012-09-27 02:53:54 -04: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 00:54:23 -04:00
|
|
|
controller: this.controller,
|
|
|
|
model: attachment
|
|
|
|
}).render();
|
|
|
|
|
2012-10-29 02:56:23 -04: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 00:54:23 -04:00
|
|
|
|
|
|
|
if ( children.length > index )
|
|
|
|
children.eq( index ).before( view.$el );
|
|
|
|
else
|
2012-10-29 02:56:23 -04: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 00:54:23 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
remove: function( attachment, index ) {
|
2012-10-29 02:56:23 -04: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 00:54:23 -04:00
|
|
|
if ( children.length )
|
|
|
|
children.eq( index ).detach();
|
|
|
|
},
|
|
|
|
|
|
|
|
scroll: function( event ) {
|
|
|
|
// @todo: is this still necessary?
|
2012-10-29 02:56:23 -04:00
|
|
|
if ( ! this.$el.is(':visible') )
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
return;
|
|
|
|
|
2012-10-29 02:56:23 -04:00
|
|
|
if ( this.el.scrollHeight < this.el.scrollTop + ( this.el.clientHeight * this.options.refreshThreshold ) ) {
|
Add new media workflow scripts, styles, and templates.
Please note that this commit does not integrate media into the existing UI. If you would like to see the new UI, navigate to the post editor and run the following in your browser's Javascript console:
new wp.media.controller.Workflow().render().modal.open();
The Javascript is broken up into two files, with the slugs media-models and media-views.
* media-models: The models are UI agnostic, and can be used independent of the views. If you'd like to create custom UIs, this is the script for you.
* media-views: This is the Media Experience. The views (and controllers) depend on the models (which are listed as a dependency and will automatically be included thanks to wp_enqueue_script). The views also require the media templates, media-view styles, and the plupload bridge settings. Perhaps we should create a function to include the whole shebang, but in the meantime...
To include media-views in the admin, run the following PHP in or after 'admin_enqueue_scripts':
wp_enqueue_script( 'media-views' );
wp_enqueue_style( 'media-views' );
wp_plupload_default_settings();
add_action( 'admin_footer', 'wp_print_media_templates' );
see #21390.
git-svn-id: http://core.svn.wordpress.org/trunk@21683 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2012-08-31 00:54:23 -04:00
|
|
|
this.collection.more();
|
|
|
|
}
|
2012-10-29 02:56:23 -04:00
|
|
|
}
|
2012-10-29 14:05:03 -04:00
|
|
|
}, {
|
|
|
|
$head: (function() {
|
|
|
|
var $head;
|
|
|
|
return function() {
|
|
|
|
return $head = $head || $('head');
|
|
|
|
};
|
|
|
|
}())
|
2012-10-29 02:56:23 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
/**
|
|
|
|
* wp.media.view.Search
|
|
|
|
*/
|
|
|
|
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 00:54:23 -04:00
|
|
|
},
|
|
|
|
|
2012-10-29 02:56:23 -04: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 00:54:23 -04:00
|
|
|
|
2012-10-29 02:56:23 -04: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 00:54:23 -04:00
|
|
|
if ( event.target.value )
|
2012-10-29 02:56:23 -04: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 00:54:23 -04:00
|
|
|
else
|
2012-10-29 02:56:23 -04: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 00:54:23 -04:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-09-06 03:46:15 -04: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 05:30:22 -04:00
|
|
|
_.defaults( this.options, {
|
|
|
|
clearable: true
|
|
|
|
});
|
|
|
|
|
2012-09-06 03:46:15 -04:00
|
|
|
this.controller = this.options.controller;
|
|
|
|
this.collection.on( 'add change:url remove', this.render, this );
|
|
|
|
this.render();
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function() {
|
2012-10-10 05:30:22 -04:00
|
|
|
var options = _.clone( this.options ),
|
2012-10-29 11:13:02 -04:00
|
|
|
last, sizes, amount;
|
2012-09-06 03:46:15 -04:00
|
|
|
|
|
|
|
// If nothing is selected, display nothing.
|
|
|
|
if ( ! this.collection.length ) {
|
|
|
|
this.$el.empty();
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
|
|
|
|
options.count = this.collection.length;
|
2012-10-29 11:13:02 -04:00
|
|
|
last = this.collection.last();
|
|
|
|
sizes = last.get('sizes');
|
2012-09-07 17:27:07 -04:00
|
|
|
|
2012-10-29 11:13:02 -04:00
|
|
|
if ( 'image' === last.get('type') )
|
|
|
|
options.thumbnail = ( sizes && sizes.thumbnail ) ? sizes.thumbnail.url : last.get('url');
|
2012-09-07 17:27:07 -04:00
|
|
|
else
|
2012-10-29 11:13:02 -04:00
|
|
|
options.thumbnail = last.get('icon');
|
2012-09-06 03:46:15 -04:00
|
|
|
|
|
|
|
this.$el.html( this.template( options ) );
|
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
clear: function( event ) {
|
|
|
|
event.preventDefault();
|
|
|
|
this.collection.clear();
|
|
|
|
}
|
|
|
|
});
|
2012-10-16 15:25:17 -04:00
|
|
|
|
|
|
|
|
|
|
|
/**
|
2012-10-31 15:22:25 -04:00
|
|
|
* wp.media.view.Settings
|
2012-10-16 15:25:17 -04:00
|
|
|
*/
|
2012-10-31 15:22:25 -04:00
|
|
|
media.view.Settings = Backbone.View.extend({
|
2012-10-16 15:25:17 -04:00
|
|
|
tagName: 'div',
|
|
|
|
className: 'attachment-display-settings',
|
|
|
|
template: media.template('attachment-display-settings'),
|
|
|
|
|
|
|
|
events: {
|
2012-10-31 15:22:25 -04:00
|
|
|
'click button': 'updateHandler',
|
|
|
|
'change input': 'updateHandler',
|
|
|
|
'change select': 'updateHandler',
|
|
|
|
'change textarea': 'updateHandler'
|
2012-10-16 15:25:17 -04:00
|
|
|
},
|
|
|
|
|
2012-10-31 15:22:25 -04:00
|
|
|
settings: {},
|
2012-10-16 15:25:17 -04:00
|
|
|
|
|
|
|
initialize: function() {
|
|
|
|
var settings = this.settings;
|
|
|
|
|
2012-10-31 15:22:25 -04:00
|
|
|
this.model = this.model || new Backbone.Model();
|
2012-10-16 15:25:17 -04:00
|
|
|
|
|
|
|
_.each( settings, function( setting, key ) {
|
2012-10-31 15:22:25 -04: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 15:25:17 -04: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 15:22:25 -04:00
|
|
|
if ( settings[ key ] && settings[ key ].name )
|
2012-10-16 15:25:17 -04: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 15:22:25 -04: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 15:25:17 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
updateHandler: function( event ) {
|
2012-10-31 15:22:25 -04:00
|
|
|
var $setting = $( event.target ).closest('[data-setting]');
|
2012-10-16 15:25:17 -04:00
|
|
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
2012-10-31 15:22:25 -04:00
|
|
|
if ( $setting.length )
|
|
|
|
this.model.set( $setting.data('setting'), event.target.value );
|
2012-10-16 15:25:17 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
updateChanges: function( model, options ) {
|
|
|
|
if ( options.changes )
|
|
|
|
_( options.changes ).chain().keys().each( this.update, this );
|
|
|
|
}
|
|
|
|
});
|
2012-10-29 11:13:02 -04:00
|
|
|
|
2012-10-31 15:22:25 -04: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 16:00:02 -04:00
|
|
|
fallback: '3',
|
2012-10-31 15:22:25 -04:00
|
|
|
type: 'select'
|
|
|
|
},
|
|
|
|
link: {
|
|
|
|
accepts: ['post','file'],
|
|
|
|
fallback: 'post'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2012-10-29 11:13:02 -04: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 00:54:23 -04:00
|
|
|
}(jQuery));
|