Media Grid: general JS cleanup.
Props ericlewis. See #28965. Built from https://develop.svn.wordpress.org/trunk@29266 git-svn-id: http://core.svn.wordpress.org/trunk@29049 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Scott Taylor
parent
fcb1687039
commit
0702527010
|
|
@ -912,7 +912,7 @@
|
|||
}
|
||||
|
||||
.attachment.details,
|
||||
.media-grid-view .selected.attachment {
|
||||
.media-frame.mode-grid .selected.attachment {
|
||||
-webkit-box-shadow: 0 0 0 1px #fff,
|
||||
0 0 0 5px #1e8cbe;
|
||||
box-shadow: 0 0 0 1px #fff,
|
||||
|
|
@ -921,7 +921,7 @@
|
|||
|
||||
.attachment.details .check,
|
||||
.attachment.selected .check:focus,
|
||||
.media-grid-view .attachment.selected .check {
|
||||
.media-frame.mode-grid .attachment.selected .check {
|
||||
background-color: #1e8cbe;
|
||||
-webkit-box-shadow: 0 0 0 1px #fff,
|
||||
0 0 0 2px #1e8cbe;
|
||||
|
|
@ -929,22 +929,22 @@
|
|||
0 0 0 2px #1e8cbe;
|
||||
}
|
||||
|
||||
.media-grid-view .attachment .check {
|
||||
.media-frame.mode-grid .attachment .check {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.media-grid-view .attachment .check div {
|
||||
.media-frame.mode-grid .attachment .check div {
|
||||
background-position: 21px 0;
|
||||
}
|
||||
|
||||
.attachment.details .check div,
|
||||
.media-grid-view .attachment.selected .check div {
|
||||
.media-frame.mode-grid .attachment.selected .check div {
|
||||
background-position: -21px 0;
|
||||
}
|
||||
|
||||
.attachment.details .check:hover div,
|
||||
.attachment.selected .check:focus div,
|
||||
.media-grid-view .attachment.selected .check:hover div {
|
||||
.media-frame.mode-grid .attachment.selected .check:hover div {
|
||||
background-position: -60px 0;
|
||||
}
|
||||
|
||||
|
|
@ -1068,7 +1068,8 @@
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
.attachment-preview:hover ~ .inline-toolbar {
|
||||
.attachment-preview:hover + .inline-toolbar,
|
||||
.inline-toolbar:hover {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -2596,26 +2597,27 @@ video#inline-media-node {
|
|||
/**
|
||||
* Media Grid
|
||||
*/
|
||||
.media-grid-view,
|
||||
.media-grid-view .media-frame-content,
|
||||
.media-grid-view .attachments-browser .attachments,
|
||||
.media-grid-view .uploader-inline-content {
|
||||
.media-frame.mode-grid,
|
||||
.media-frame.mode-grid .media-frame-content,
|
||||
.media-frame.mode-grid .attachments-browser .attachments,
|
||||
.media-frame.mode-grid .uploader-inline-content {
|
||||
position: static;
|
||||
}
|
||||
|
||||
/* Regions we don't use at all */
|
||||
.media-grid-view .media-frame-title,
|
||||
.media-grid-view .media-frame-toolbar,
|
||||
.media-grid-view .media-frame-menu {
|
||||
.media-frame.mode-grid .media-frame-title,
|
||||
.media-frame.mode-grid .media-frame-toolbar,
|
||||
.media-frame.mode-grid .media-frame-router,
|
||||
.media-frame.mode-grid .media-frame-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.media-grid-view .media-frame-content {
|
||||
.media-frame.mode-grid .media-frame-content {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.media-grid-view .uploader-inline {
|
||||
.media-frame.mode-grid .uploader-inline {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
|
|
@ -2625,12 +2627,12 @@ video#inline-media-node {
|
|||
margin-top: 0;
|
||||
}
|
||||
|
||||
.media-grid-view .media-toolbar select {
|
||||
.media-frame.mode-grid .media-toolbar select {
|
||||
margin-top: 1px;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.media-grid-view .attachments-browser .bulk-select {
|
||||
.media-frame.mode-grid .attachments-browser .bulk-select {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
|
@ -2639,7 +2641,7 @@ video#inline-media-node {
|
|||
*
|
||||
* This should be OOCSS'd so both use a shared selector.
|
||||
*/
|
||||
.media-grid-view .attachments-browser .media-toolbar {
|
||||
.media-frame.mode-grid .attachments-browser .media-toolbar {
|
||||
background: #fff;
|
||||
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
|
||||
box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
|
||||
|
|
@ -2657,7 +2659,7 @@ video#inline-media-node {
|
|||
border: none;
|
||||
}
|
||||
|
||||
.media-grid-view input[type="search"] {
|
||||
.media-frame.mode-grid input[type="search"] {
|
||||
margin: 1px;
|
||||
padding: 3px 5px;
|
||||
position: absolute;
|
||||
|
|
@ -2669,7 +2671,7 @@ video#inline-media-node {
|
|||
width: 280px;
|
||||
}
|
||||
|
||||
.media-grid-view .view-switch {
|
||||
.media-frame.mode-grid .view-switch {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
vertical-align: middle;
|
||||
|
|
@ -2677,19 +2679,19 @@ video#inline-media-node {
|
|||
margin: 0 0 0 20px;
|
||||
}
|
||||
|
||||
.media-grid-view select {
|
||||
.media-frame.mode-grid select {
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
|
||||
.media-grid-view .spinner {
|
||||
.media-frame.mode-grid .spinner {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.media-grid-view .attachments-browser {
|
||||
.media-frame.mode-grid .attachments-browser {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.media-grid-view .attachments-browser .no-media {
|
||||
.media-frame.mode-grid .attachments-browser .no-media {
|
||||
color: #999;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
|
|
@ -2807,11 +2809,6 @@ video#inline-media-node {
|
|||
top: 56px;
|
||||
}
|
||||
|
||||
/* Hiding this for the moment instead of removing it from the template. */
|
||||
.edit-attachment-frame h3 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.edit-attachment-frame .attachment-details {
|
||||
position: absolute;
|
||||
overflow: auto;
|
||||
|
|
@ -2953,12 +2950,12 @@ video#inline-media-node {
|
|||
*/
|
||||
|
||||
@media only screen and (max-width: 1120px) {
|
||||
.media-grid-view .attachments-browser .media-toolbar-primary,
|
||||
.media-grid-view .attachments-browser .media-toolbar-secondary {
|
||||
.media-frame.mode-grid .attachments-browser .media-toolbar-primary,
|
||||
.media-frame.mode-grid .attachments-browser .media-toolbar-secondary {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.media-grid-view input[type="search"] {
|
||||
.media-frame.mode-grid input[type="search"] {
|
||||
margin: 20px 0;
|
||||
position: static;
|
||||
width: 100%;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -912,7 +912,7 @@
|
|||
}
|
||||
|
||||
.attachment.details,
|
||||
.media-grid-view .selected.attachment {
|
||||
.media-frame.mode-grid .selected.attachment {
|
||||
-webkit-box-shadow: 0 0 0 1px #fff,
|
||||
0 0 0 5px #1e8cbe;
|
||||
box-shadow: 0 0 0 1px #fff,
|
||||
|
|
@ -921,7 +921,7 @@
|
|||
|
||||
.attachment.details .check,
|
||||
.attachment.selected .check:focus,
|
||||
.media-grid-view .attachment.selected .check {
|
||||
.media-frame.mode-grid .attachment.selected .check {
|
||||
background-color: #1e8cbe;
|
||||
-webkit-box-shadow: 0 0 0 1px #fff,
|
||||
0 0 0 2px #1e8cbe;
|
||||
|
|
@ -929,22 +929,22 @@
|
|||
0 0 0 2px #1e8cbe;
|
||||
}
|
||||
|
||||
.media-grid-view .attachment .check {
|
||||
.media-frame.mode-grid .attachment .check {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.media-grid-view .attachment .check div {
|
||||
.media-frame.mode-grid .attachment .check div {
|
||||
background-position: 21px 0;
|
||||
}
|
||||
|
||||
.attachment.details .check div,
|
||||
.media-grid-view .attachment.selected .check div {
|
||||
.media-frame.mode-grid .attachment.selected .check div {
|
||||
background-position: -21px 0;
|
||||
}
|
||||
|
||||
.attachment.details .check:hover div,
|
||||
.attachment.selected .check:focus div,
|
||||
.media-grid-view .attachment.selected .check:hover div {
|
||||
.media-frame.mode-grid .attachment.selected .check:hover div {
|
||||
background-position: -60px 0;
|
||||
}
|
||||
|
||||
|
|
@ -1068,7 +1068,8 @@
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
.attachment-preview:hover ~ .inline-toolbar {
|
||||
.attachment-preview:hover + .inline-toolbar,
|
||||
.inline-toolbar:hover {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -2596,26 +2597,27 @@ video#inline-media-node {
|
|||
/**
|
||||
* Media Grid
|
||||
*/
|
||||
.media-grid-view,
|
||||
.media-grid-view .media-frame-content,
|
||||
.media-grid-view .attachments-browser .attachments,
|
||||
.media-grid-view .uploader-inline-content {
|
||||
.media-frame.mode-grid,
|
||||
.media-frame.mode-grid .media-frame-content,
|
||||
.media-frame.mode-grid .attachments-browser .attachments,
|
||||
.media-frame.mode-grid .uploader-inline-content {
|
||||
position: static;
|
||||
}
|
||||
|
||||
/* Regions we don't use at all */
|
||||
.media-grid-view .media-frame-title,
|
||||
.media-grid-view .media-frame-toolbar,
|
||||
.media-grid-view .media-frame-menu {
|
||||
.media-frame.mode-grid .media-frame-title,
|
||||
.media-frame.mode-grid .media-frame-toolbar,
|
||||
.media-frame.mode-grid .media-frame-router,
|
||||
.media-frame.mode-grid .media-frame-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.media-grid-view .media-frame-content {
|
||||
.media-frame.mode-grid .media-frame-content {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.media-grid-view .uploader-inline {
|
||||
.media-frame.mode-grid .uploader-inline {
|
||||
position: relative;
|
||||
top: auto;
|
||||
right: auto;
|
||||
|
|
@ -2625,12 +2627,12 @@ video#inline-media-node {
|
|||
margin-top: 0;
|
||||
}
|
||||
|
||||
.media-grid-view .media-toolbar select {
|
||||
.media-frame.mode-grid .media-toolbar select {
|
||||
margin-top: 1px;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.media-grid-view .attachments-browser .bulk-select {
|
||||
.media-frame.mode-grid .attachments-browser .bulk-select {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
|
@ -2639,7 +2641,7 @@ video#inline-media-node {
|
|||
*
|
||||
* This should be OOCSS'd so both use a shared selector.
|
||||
*/
|
||||
.media-grid-view .attachments-browser .media-toolbar {
|
||||
.media-frame.mode-grid .attachments-browser .media-toolbar {
|
||||
background: #fff;
|
||||
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
|
||||
box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
|
||||
|
|
@ -2657,7 +2659,7 @@ video#inline-media-node {
|
|||
border: none;
|
||||
}
|
||||
|
||||
.media-grid-view input[type="search"] {
|
||||
.media-frame.mode-grid input[type="search"] {
|
||||
margin: 1px;
|
||||
padding: 3px 5px;
|
||||
position: absolute;
|
||||
|
|
@ -2669,7 +2671,7 @@ video#inline-media-node {
|
|||
width: 280px;
|
||||
}
|
||||
|
||||
.media-grid-view .view-switch {
|
||||
.media-frame.mode-grid .view-switch {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
vertical-align: middle;
|
||||
|
|
@ -2677,19 +2679,19 @@ video#inline-media-node {
|
|||
margin: 0 20px 0 0;
|
||||
}
|
||||
|
||||
.media-grid-view select {
|
||||
.media-frame.mode-grid select {
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
|
||||
.media-grid-view .spinner {
|
||||
.media-frame.mode-grid .spinner {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.media-grid-view .attachments-browser {
|
||||
.media-frame.mode-grid .attachments-browser {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.media-grid-view .attachments-browser .no-media {
|
||||
.media-frame.mode-grid .attachments-browser .no-media {
|
||||
color: #999;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
|
|
@ -2807,11 +2809,6 @@ video#inline-media-node {
|
|||
top: 56px;
|
||||
}
|
||||
|
||||
/* Hiding this for the moment instead of removing it from the template. */
|
||||
.edit-attachment-frame h3 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.edit-attachment-frame .attachment-details {
|
||||
position: absolute;
|
||||
overflow: auto;
|
||||
|
|
@ -2953,12 +2950,12 @@ video#inline-media-node {
|
|||
*/
|
||||
|
||||
@media only screen and (max-width: 1120px) {
|
||||
.media-grid-view .attachments-browser .media-toolbar-primary,
|
||||
.media-grid-view .attachments-browser .media-toolbar-secondary {
|
||||
.media-frame.mode-grid .attachments-browser .media-toolbar-primary,
|
||||
.media-frame.mode-grid .attachments-browser .media-toolbar-secondary {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.media-grid-view input[type="search"] {
|
||||
.media-frame.mode-grid input[type="search"] {
|
||||
margin: 20px 0;
|
||||
position: static;
|
||||
width: 100%;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,8 +1,9 @@
|
|||
/* global _wpMediaViewsL10n, MediaElementPlayer, _wpMediaGridSettings, confirm */
|
||||
(function($, _, Backbone, wp) {
|
||||
// Local reference to the WordPress media namespace.
|
||||
var media = wp.media, l10n;
|
||||
|
||||
// Link any localized strings.
|
||||
// Link localized strings and settings.
|
||||
if ( media.view.l10n ) {
|
||||
l10n = media.view.l10n;
|
||||
} else {
|
||||
|
|
@ -11,6 +12,8 @@
|
|||
}
|
||||
|
||||
/**
|
||||
* wp.media.controller.EditAttachmentMetadata
|
||||
*
|
||||
* A state for editing an attachment's metadata.
|
||||
*
|
||||
* @constructor
|
||||
|
|
@ -20,45 +23,13 @@
|
|||
media.controller.EditAttachmentMetadata = media.controller.State.extend({
|
||||
defaults: {
|
||||
id: 'edit-attachment',
|
||||
// Title string passed to the frame's title region view.
|
||||
title: l10n.attachmentDetails,
|
||||
// Region mode defaults.
|
||||
menu: false,
|
||||
content: 'edit-metadata',
|
||||
|
||||
url: ''
|
||||
},
|
||||
|
||||
_ready: function() {},
|
||||
|
||||
/**
|
||||
* Override media.controller.State._postActivate, since this state doesn't
|
||||
* include the regions expected there.
|
||||
*/
|
||||
_postActivate: function() {
|
||||
this.frame.on( 'title:render:default', this._renderTitle, this );
|
||||
|
||||
this._title();
|
||||
this._content();
|
||||
},
|
||||
|
||||
/**
|
||||
* @access private
|
||||
*/
|
||||
_title: function() {
|
||||
this.frame.title.render( this.get('titleMode') || 'default' );
|
||||
},
|
||||
/**
|
||||
* @access private
|
||||
*/
|
||||
_renderTitle: function( view ) {
|
||||
view.$el.text( this.get('title') || '' );
|
||||
},
|
||||
|
||||
_content: function() {
|
||||
var mode = this.get( 'content' );
|
||||
if ( mode ) {
|
||||
this.frame.content.render( mode );
|
||||
}
|
||||
menu: false,
|
||||
toolbar: false,
|
||||
router: false
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -87,19 +58,17 @@
|
|||
title: '',
|
||||
modal: false,
|
||||
selection: [],
|
||||
library: {},
|
||||
library: {}, // Options hash for the query to the media library.
|
||||
multiple: 'add',
|
||||
state: 'library',
|
||||
uploader: true,
|
||||
mode: [ 'grid', 'edit' ]
|
||||
mode: [ 'grid' ]
|
||||
});
|
||||
|
||||
$(document).on( 'click', '.add-new-h2', _.bind( this.addNewClickHandler, this ) );
|
||||
$(document).on( 'screen:options:open', _.bind( this.screenOptionsOpen, this ) );
|
||||
$(document).on( 'screen:options:close', _.bind( this.screenOptionsClose, this ) );
|
||||
|
||||
// Ensure core and media grid view UI is enabled.
|
||||
this.$el.addClass('wp-core-ui media-grid-view');
|
||||
this.$el.addClass('wp-core-ui');
|
||||
|
||||
// Force the uploader off if the upload limit has been exceeded or
|
||||
// if the browser isn't supported.
|
||||
|
|
@ -122,18 +91,14 @@
|
|||
this.options.uploader = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* call 'initialize' directly on the parent class
|
||||
*/
|
||||
// Call 'initialize' directly on the parent class.
|
||||
media.view.MediaFrame.prototype.initialize.apply( this, arguments );
|
||||
|
||||
// Since we're not using the default modal built into
|
||||
// a media frame, append our $element to the supplied container.
|
||||
// Append the frame view directly the supplied container.
|
||||
this.$el.appendTo( this.options.container );
|
||||
|
||||
this.createSelection();
|
||||
this.createStates();
|
||||
this.bindHandlers();
|
||||
this.bindRegionModeHandlers();
|
||||
this.render();
|
||||
|
||||
// Update the URL when entering search string (at most once per second)
|
||||
|
|
@ -145,17 +110,10 @@
|
|||
self.gridRouter.navigate( self.gridRouter.baseUrl( url ) );
|
||||
}, 1000 ) );
|
||||
|
||||
// This is problematic.
|
||||
_.delay( _.bind( this.createRouter, this ), 1000 );
|
||||
},
|
||||
|
||||
screenOptionsOpen: function() {
|
||||
this.$el.addClass( 'media-grid-view-options' );
|
||||
},
|
||||
|
||||
screenOptionsClose: function() {
|
||||
this.$el.removeClass( 'media-grid-view-options' );
|
||||
},
|
||||
|
||||
createRouter: function() {
|
||||
this.gridRouter = new media.view.MediaFrame.Manage.Router();
|
||||
|
||||
|
|
@ -168,21 +126,9 @@
|
|||
}
|
||||
},
|
||||
|
||||
createSelection: function() {
|
||||
var selection = this.options.selection;
|
||||
|
||||
if ( ! (selection instanceof media.model.Selection) ) {
|
||||
this.options.selection = new media.model.Selection( selection, {
|
||||
multiple: this.options.multiple
|
||||
});
|
||||
}
|
||||
|
||||
this._selection = {
|
||||
attachments: new media.model.Attachments(),
|
||||
difference: []
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* Create the default states for the frame.
|
||||
*/
|
||||
createStates: function() {
|
||||
var options = this.options;
|
||||
|
||||
|
|
@ -196,9 +142,6 @@
|
|||
library: media.query( options.library ),
|
||||
multiple: options.multiple,
|
||||
title: options.title,
|
||||
priority: 20,
|
||||
|
||||
router: false,
|
||||
content: 'browse',
|
||||
|
||||
filterable: 'mime-types'
|
||||
|
|
@ -206,14 +149,19 @@
|
|||
]);
|
||||
},
|
||||
|
||||
bindHandlers: function() {
|
||||
/**
|
||||
* Bind region mode activation events to proper handlers.
|
||||
*/
|
||||
bindRegionModeHandlers: function() {
|
||||
this.on( 'content:create:browse', this.browseContent, this );
|
||||
this.on( 'content:render:edit-image', this.editImageContent, this );
|
||||
|
||||
// Handle a frame-level event for editing an attachment.
|
||||
this.on( 'edit:attachment', this.editAttachment, this );
|
||||
this.on( 'edit:attachment', this.openEditAttachmentModal, this );
|
||||
},
|
||||
|
||||
/**
|
||||
* Click handler for the `Add New` button.
|
||||
*/
|
||||
addNewClickHandler: function( event ) {
|
||||
event.preventDefault();
|
||||
this.trigger( 'toggle:upload:attachment' );
|
||||
|
|
@ -222,7 +170,7 @@
|
|||
/**
|
||||
* Open the Edit Attachment modal.
|
||||
*/
|
||||
editAttachment: function( model ) {
|
||||
openEditAttachmentModal: function( model ) {
|
||||
// Create a new EditAttachment frame, passing along the library and the attachment model.
|
||||
wp.media( {
|
||||
frame: 'edit-attachments',
|
||||
|
|
@ -233,16 +181,17 @@
|
|||
},
|
||||
|
||||
/**
|
||||
* Content
|
||||
* Create an attachments browser view within the content region.
|
||||
*
|
||||
* @param {Object} content
|
||||
* @param {Object} contentRegion Basic object with a `view` property, which
|
||||
* should be set with the proper region view.
|
||||
* @this wp.media.controller.Region
|
||||
*/
|
||||
browseContent: function( content ) {
|
||||
browseContent: function( contentRegion ) {
|
||||
var state = this.state();
|
||||
|
||||
// Browse our library of attachments.
|
||||
content.view = new media.view.AttachmentsBrowser({
|
||||
contentRegion.view = new media.view.AttachmentsBrowser({
|
||||
controller: this,
|
||||
collection: state.get('library'),
|
||||
selection: state.get('selection'),
|
||||
|
|
@ -259,53 +208,22 @@
|
|||
|
||||
AttachmentView: state.get('AttachmentView')
|
||||
});
|
||||
},
|
||||
|
||||
editImageContent: function() {
|
||||
var image = this.state().get('image'),
|
||||
view = new media.view.EditImage( { model: image, controller: this } ).render();
|
||||
|
||||
this.content.set( view );
|
||||
|
||||
// after creating the wrapper view, load the actual editor via an ajax call
|
||||
view.loadEditor();
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* A similar view to media.view.Attachment.Details
|
||||
* for use in the Edit Attachment modal.
|
||||
*
|
||||
* @constructor
|
||||
* @augments wp.media.view.Attachment.Details
|
||||
* @augments wp.media.view.Attachment
|
||||
* @augments wp.media.View
|
||||
* @augments wp.Backbone.View
|
||||
* @augments Backbone.View
|
||||
*/
|
||||
media.view.Attachment.Details.TwoColumn = media.view.Attachment.Details.extend({
|
||||
template: wp.template( 'attachment-details-two-column' ),
|
||||
|
||||
events: {
|
||||
'change [data-setting]': 'updateSetting',
|
||||
'change [data-setting] input': 'updateSetting',
|
||||
'change [data-setting] select': 'updateSetting',
|
||||
'change [data-setting] textarea': 'updateSetting',
|
||||
'click .delete-attachment': 'deleteAttachment',
|
||||
'click .trash-attachment': 'trashAttachment',
|
||||
'click .edit-attachment': 'editAttachment',
|
||||
'click .refresh-attachment': 'refreshAttachment',
|
||||
'click .edit-image': 'handleEditImageClick'
|
||||
},
|
||||
|
||||
initialize: function() {
|
||||
if ( ! this.model ) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$el.attr('aria-label', this.model.get( 'title' ) ).attr( 'aria-checked', false );
|
||||
|
||||
this.model.on( 'change:title', this._syncTitle, this );
|
||||
this.model.on( 'change:caption', this._syncCaption, this );
|
||||
this.model.on( 'change:percent', this.progress, this );
|
||||
this.model.on( 'change:album', this._syncAlbum, this );
|
||||
this.model.on( 'change:artist', this._syncArtist, this );
|
||||
|
||||
// Update the selection.
|
||||
this.model.on( 'add', this.select, this );
|
||||
this.model.on( 'remove', this.deselect, this );
|
||||
this.model.on( 'sync', this.afterDelete, this );
|
||||
},
|
||||
template: media.template( 'attachment-details-two-column' ),
|
||||
|
||||
preDestroy: function( event ) {
|
||||
event.preventDefault();
|
||||
|
|
@ -324,10 +242,16 @@
|
|||
media.view.Attachment.Details.prototype.deleteAttachment.apply( this, arguments );
|
||||
},
|
||||
|
||||
handleEditImageClick: function() {
|
||||
editAttachment: function( event ) {
|
||||
event.preventDefault();
|
||||
this.controller.setState( 'edit-image' );
|
||||
},
|
||||
|
||||
/**
|
||||
* Noop this from parent class, doesn't apply here.
|
||||
*/
|
||||
toggleSelectionHandler: function() {},
|
||||
|
||||
afterDelete: function( model ) {
|
||||
if ( ! model.destroyed ) {
|
||||
return;
|
||||
|
|
@ -351,7 +275,7 @@
|
|||
media.view.Attachment.Details.prototype.render.apply( this, arguments );
|
||||
|
||||
media.mixin.removeAllPlayers();
|
||||
$( 'audio, video', this.$el ).each( function (i, elem) {
|
||||
this.$( 'audio, video' ).each( function (i, elem) {
|
||||
var el = media.view.MediaDetails.prepareSrc( elem );
|
||||
new MediaElementPlayer( el, media.mixin.mejsSettings );
|
||||
} );
|
||||
|
|
@ -359,11 +283,14 @@
|
|||
});
|
||||
|
||||
/**
|
||||
* A router for handling the browser history and application state
|
||||
* A router for handling the browser history and application state.
|
||||
*
|
||||
* @constructor
|
||||
* @augments Backbone.Router
|
||||
*/
|
||||
media.view.MediaFrame.Manage.Router = Backbone.Router.extend({
|
||||
routes: {
|
||||
'upload.php?item=:slug': 'showitem',
|
||||
'upload.php?item=:slug': 'showItem',
|
||||
'upload.php?search=:query': 'search',
|
||||
':default': 'defaultRoute'
|
||||
},
|
||||
|
|
@ -381,7 +308,7 @@
|
|||
},
|
||||
|
||||
// Show the modal with a specific item
|
||||
showitem: function( query ) {
|
||||
showItem: function( query ) {
|
||||
var library = media.frame.state().get('library');
|
||||
|
||||
// Remove existing modal if present
|
||||
|
|
@ -410,6 +337,13 @@
|
|||
* Opens in a modal by default.
|
||||
*
|
||||
* Requires an attachment model to be passed in the options hash under `model`.
|
||||
*
|
||||
* @constructor
|
||||
* @augments wp.media.view.Frame
|
||||
* @augments wp.media.View
|
||||
* @augments wp.Backbone.View
|
||||
* @augments Backbone.View
|
||||
* @mixes wp.media.controller.StateMachine
|
||||
*/
|
||||
media.view.MediaFrame.EditAttachments = media.view.MediaFrame.extend({
|
||||
|
||||
|
|
@ -443,8 +377,8 @@
|
|||
|
||||
this.createStates();
|
||||
|
||||
this.on( 'content:render:edit-metadata', this.editMetadataContent, this );
|
||||
this.on( 'content:render:edit-image', this.editImageContentUgh, this );
|
||||
this.on( 'content:create:edit-metadata', this.editMetadataMode, this );
|
||||
this.on( 'content:create:edit-image', this.editImageMode, this );
|
||||
this.on( 'close', this.detach );
|
||||
|
||||
// Bind default title creation.
|
||||
|
|
@ -473,6 +407,7 @@
|
|||
self.resetRoute();
|
||||
} );
|
||||
|
||||
// Set this frame as the modal's content.
|
||||
this.modal.content( this );
|
||||
this.modal.open();
|
||||
}
|
||||
|
|
@ -496,41 +431,39 @@
|
|||
|
||||
/**
|
||||
* Content region rendering callback for the `edit-metadata` mode.
|
||||
*
|
||||
* @param {Object} contentRegion Basic object with a `view` property, which
|
||||
* should be set with the proper region view.
|
||||
*/
|
||||
editMetadataContent: function() {
|
||||
var view = new media.view.Attachment.Details.TwoColumn({
|
||||
editMetadataMode: function( contentRegion ) {
|
||||
contentRegion.view = new media.view.Attachment.Details.TwoColumn({
|
||||
controller: this,
|
||||
model: this.model
|
||||
});
|
||||
this.content.set( view );
|
||||
// Update browser url when navigating media details
|
||||
if ( this.model ) {
|
||||
this.gridRouter.navigate( this.gridRouter.baseUrl( '?item=' + this.model.id ) );
|
||||
} else {
|
||||
this.resetRoute();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* For some reason the view doesn't exist in the DOM yet, don't have the
|
||||
* patience to track this down right now.
|
||||
* Render the EditImage view into the frame's content region.
|
||||
*
|
||||
* @param {Object} contentRegion Basic object with a `view` property, which
|
||||
* should be set with the proper region view.
|
||||
*/
|
||||
editImageContentUgh: function() {
|
||||
_.defer( _.bind( this.editImageContent, this ) );
|
||||
editImageMode: function( contentRegion ) {
|
||||
contentRegion.view = new media.view.EditImage( { model: this.model, controller: this } );
|
||||
// Defer a call to load the editor, which
|
||||
// requires DOM elements to exist.
|
||||
_.defer( _.bind( contentRegion.view.loadEditor, contentRegion.view ) );
|
||||
},
|
||||
|
||||
/**
|
||||
* Render the EditImage view into the frame's content region.
|
||||
* Close this modal and immediately open another one.
|
||||
*
|
||||
* Allows for quickly swapping out the attachment being edited.
|
||||
*/
|
||||
editImageContent: function() {
|
||||
var view = new media.view.EditImage( { model: this.model, controller: this } ).render();
|
||||
|
||||
this.content.set( view );
|
||||
|
||||
// after creating the wrapper view, load the actual editor via an ajax call
|
||||
view.loadEditor();
|
||||
},
|
||||
|
||||
resetContent: function() {
|
||||
this.modal.close();
|
||||
wp.media( {
|
||||
|
|
@ -603,6 +536,9 @@
|
|||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Controller for bulk selection.
|
||||
*/
|
||||
media.view.BulkSelection = media.View.extend({
|
||||
className: 'bulk-select',
|
||||
|
||||
|
|
@ -628,6 +564,14 @@
|
|||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Bulk Selection dropdown view.
|
||||
*
|
||||
* @constructor
|
||||
* @augments wp.media.View
|
||||
* @augments wp.Backbone.View
|
||||
* @augments Backbone.View
|
||||
*/
|
||||
media.view.BulkSelectionActionDropdown = media.View.extend({
|
||||
tagName: 'select',
|
||||
|
||||
|
|
@ -637,18 +581,37 @@
|
|||
this.$el.append( $('<option></option>').val( '' ).html( l10n.bulkActions ) )
|
||||
.append( $('<option></option>').val( 'delete' ).html( l10n.deletePermanently ) );
|
||||
this.$el.prop( 'disabled', true );
|
||||
this.$el.on( 'change', _.bind( this.toggleChange, this ) );
|
||||
this.$el.on( 'change', _.bind( this.changeHandler, this ) );
|
||||
},
|
||||
|
||||
toggleChange: function() {
|
||||
/**
|
||||
* Change handler for the dropdown.
|
||||
*
|
||||
* Sets the bulk selection controller's currentAction.
|
||||
*/
|
||||
changeHandler: function() {
|
||||
this.controller.model.set( { 'currentAction': this.$el.val() } );
|
||||
},
|
||||
|
||||
/**
|
||||
* Enable or disable the dropdown if attachments have been selected.
|
||||
*/
|
||||
enabled: function() {
|
||||
var disabled = ! this.controller.controller.state().get('selection').length;
|
||||
this.$el.prop( 'disabled', disabled );
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Bulk Selection dropdown view.
|
||||
*
|
||||
* @constructor
|
||||
*
|
||||
* @augments wp.media.view.Button
|
||||
* @augments wp.media.View
|
||||
* @augments wp.Backbone.View
|
||||
* @augments Backbone.View
|
||||
*/
|
||||
media.view.BulkSelectionActionButton = media.view.Button.extend({
|
||||
tagName: 'button',
|
||||
|
||||
|
|
@ -658,7 +621,9 @@
|
|||
this.listenTo( this.controller.model, 'change', this.enabled, this );
|
||||
this.listenTo( this.controller.controller.state().get( 'selection' ), 'add remove reset', _.bind( this.enabled, this ) );
|
||||
},
|
||||
|
||||
/**
|
||||
* Button click handler.
|
||||
*/
|
||||
click: function() {
|
||||
var selection = this.controller.controller.state().get('selection');
|
||||
media.view.Button.prototype.click.apply( this, arguments );
|
||||
|
|
@ -672,7 +637,10 @@
|
|||
|
||||
this.enabled();
|
||||
},
|
||||
|
||||
/**
|
||||
* Enable or disable the button depending if a bulk action is selected
|
||||
* in the bulk select dropdown, and if attachments have been selected.
|
||||
*/
|
||||
enabled: function() {
|
||||
var currentAction = this.controller.model.get( 'currentAction' ),
|
||||
selection = this.controller.controller.state().get('selection'),
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1685,8 +1685,12 @@
|
|||
*/
|
||||
media.view.Frame = media.View.extend({
|
||||
initialize: function() {
|
||||
_.defaults( this.options, {
|
||||
mode: [ 'select' ]
|
||||
});
|
||||
this._createRegions();
|
||||
this._createStates();
|
||||
this._createModes();
|
||||
},
|
||||
|
||||
_createRegions: function() {
|
||||
|
|
@ -1721,12 +1725,99 @@
|
|||
this.states.add( this.options.states );
|
||||
}
|
||||
},
|
||||
_createModes: function() {
|
||||
// Store active "modes" that the frame is in. Unrelated to region modes.
|
||||
this.activeModes = new Backbone.Collection();
|
||||
this.activeModes.on( 'add remove reset', _.bind( this.triggerModeEvents, this ) );
|
||||
|
||||
_.each( this.options.mode, function( mode ) {
|
||||
this.activateMode( mode );
|
||||
}, this );
|
||||
},
|
||||
/**
|
||||
* @returns {wp.media.view.Frame} Returns itself to allow chaining
|
||||
*/
|
||||
reset: function() {
|
||||
this.states.invoke( 'trigger', 'reset' );
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* Map activeMode collection events to the frame.
|
||||
*/
|
||||
triggerModeEvents: function( model, collection, options ) {
|
||||
var collectionEvent,
|
||||
modeEventMap = {
|
||||
add: 'activate',
|
||||
remove: 'deactivate'
|
||||
},
|
||||
eventToTrigger;
|
||||
// Probably a better way to do this.
|
||||
_.each( options, function( value, key ) {
|
||||
if ( value ) {
|
||||
collectionEvent = key;
|
||||
}
|
||||
} );
|
||||
|
||||
if ( ! _.has( modeEventMap, collectionEvent ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
eventToTrigger = model.get('id') + ':' + modeEventMap[collectionEvent];
|
||||
this.trigger( eventToTrigger );
|
||||
},
|
||||
/**
|
||||
* Activate a mode on the frame.
|
||||
*
|
||||
* @param string mode Mode ID.
|
||||
* @returns {this} Returns itself to allow chaining.
|
||||
*/
|
||||
activateMode: function( mode ) {
|
||||
// Bail if the mode is already active.
|
||||
if ( this.isModeActive( mode ) ) {
|
||||
return;
|
||||
}
|
||||
this.activeModes.add( [ { id: mode } ] );
|
||||
// Add a CSS class to the frame so elements can be styled for the mode.
|
||||
this.$el.addClass( 'mode-' + mode );
|
||||
/**
|
||||
* Frame mode activation event.
|
||||
*
|
||||
* @event this#{mode}:activate
|
||||
*/
|
||||
this.trigger( mode + ':activate' );
|
||||
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* Deactivate a mode on the frame.
|
||||
*
|
||||
* @param string mode Mode ID.
|
||||
* @returns {this} Returns itself to allow chaining.
|
||||
*/
|
||||
deactivateMode: function( mode ) {
|
||||
// Bail if the mode isn't active.
|
||||
if ( ! this.isModeActive( mode ) ) {
|
||||
return;
|
||||
}
|
||||
this.activeModes.remove( this.activeModes.where( { id: mode } ) );
|
||||
this.$el.removeClass( 'mode-' + mode );
|
||||
/**
|
||||
* Frame mode deactivation event.
|
||||
*
|
||||
* @event this#{mode}:deactivate
|
||||
*/
|
||||
this.trigger( mode + ':deactivate' );
|
||||
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* Check if a mode is enabled on the frame.
|
||||
*
|
||||
* @param string mode Mode ID.
|
||||
* @return bool
|
||||
*/
|
||||
isModeActive: function( mode ) {
|
||||
return Boolean( this.activeModes.where( { id: mode } ).length );
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -1759,8 +1850,7 @@
|
|||
_.defaults( this.options, {
|
||||
title: '',
|
||||
modal: true,
|
||||
uploader: true,
|
||||
mode: [ 'select' ]
|
||||
uploader: true
|
||||
});
|
||||
|
||||
// Ensure core UI is enabled.
|
||||
|
|
@ -1776,14 +1866,6 @@
|
|||
this.modal.content( this );
|
||||
}
|
||||
|
||||
// Store active "modes" that the frame is in. Unrelated to region modes.
|
||||
this.activeModes = new Backbone.Collection();
|
||||
this.activeModes.on( 'add remove reset', _.bind( this.triggerModeEvents, this ) );
|
||||
|
||||
_.each( this.options.mode, function( mode ) {
|
||||
this.activateMode( mode );
|
||||
}, this );
|
||||
|
||||
// Force the uploader off if the upload limit has been exceeded or
|
||||
// if the browser isn't supported.
|
||||
if ( wp.Uploader.limitExceeded || ! wp.Uploader.browser.supported ) {
|
||||
|
|
@ -1948,85 +2030,6 @@
|
|||
|
||||
window.tb_remove = this._tb_remove;
|
||||
delete this._tb_remove;
|
||||
},
|
||||
|
||||
/**
|
||||
* Map activeMode collection events to the frame.
|
||||
*/
|
||||
triggerModeEvents: function( model, collection, options ) {
|
||||
var collectionEvent,
|
||||
modeEventMap = {
|
||||
add: 'activate',
|
||||
remove: 'deactivate'
|
||||
},
|
||||
eventToTrigger;
|
||||
// Probably a better way to do this.
|
||||
_.each( options, function( value, key ) {
|
||||
if ( value ) {
|
||||
collectionEvent = key;
|
||||
}
|
||||
} );
|
||||
|
||||
if ( ! _.has( modeEventMap, collectionEvent ) )
|
||||
return;
|
||||
|
||||
eventToTrigger = model.get('id') + ':' + modeEventMap[collectionEvent];
|
||||
this.trigger( eventToTrigger );
|
||||
},
|
||||
/**
|
||||
* Activate a mode on the frame.
|
||||
*
|
||||
* @param string mode Mode ID.
|
||||
* @returns {this} Returns itself to allow chaining.
|
||||
*/
|
||||
activateMode: function( mode ) {
|
||||
// Bail if the mode is already active.
|
||||
if ( this.isModeActive( mode ) ) {
|
||||
return;
|
||||
}
|
||||
this.activeModes.add( [ { id: mode } ] );
|
||||
// Add a css class to the frame for anything that needs to be styled
|
||||
// for the mode.
|
||||
this.$el.addClass( 'mode-' + mode );
|
||||
/**
|
||||
* Frame mode activation event.
|
||||
*
|
||||
* @event this#{mode}:activate
|
||||
*/
|
||||
this.trigger( mode + ':activate' );
|
||||
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* Deactivate a mode on the frame.
|
||||
*
|
||||
* @param string mode Mode ID.
|
||||
* @returns {this} Returns itself to allow chaining.
|
||||
*/
|
||||
deactivateMode: function( mode ) {
|
||||
// Bail if the mode isn't active.
|
||||
if ( ! this.isModeActive( mode ) ) {
|
||||
return;
|
||||
}
|
||||
this.activeModes.remove( this.activeModes.where( { id: mode } ) );
|
||||
this.$el.removeClass( 'mode-' + mode );
|
||||
/**
|
||||
* Frame mode deactivation event.
|
||||
*
|
||||
* @event this#{mode}:deactivate
|
||||
*/
|
||||
this.trigger( mode + ':deactivate' );
|
||||
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* Check if a mode is enabled on the frame.
|
||||
*
|
||||
* @param string mode Mode ID.
|
||||
* @return bool
|
||||
*/
|
||||
isModeActive: function( mode ) {
|
||||
return Boolean( this.activeModes.where( { id: mode } ).length );
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -4631,10 +4634,15 @@
|
|||
buttons: {},
|
||||
|
||||
initialize: function() {
|
||||
var selection = this.options.selection;
|
||||
var selection = this.options.selection,
|
||||
options = _.defaults( this.options, {
|
||||
rerenderOnModelChange: true
|
||||
} );
|
||||
this.$el.attr( 'aria-label', this.model.get( 'title' ) ).attr( 'aria-checked', false );
|
||||
|
||||
this.$el.attr('aria-label', this.model.attributes.title).attr('aria-checked', false);
|
||||
this.model.on( 'change', this.render, this );
|
||||
if ( options.rerenderOnModelChange ) {
|
||||
this.model.on( 'change', this.render, this );
|
||||
}
|
||||
this.model.on( 'change:title', this._syncTitle, this );
|
||||
this.model.on( 'change:caption', this._syncCaption, this );
|
||||
this.model.on( 'change:artist', this._syncArtist, this );
|
||||
|
|
@ -4646,11 +4654,10 @@
|
|||
this.model.on( 'remove', this.deselect, this );
|
||||
if ( selection ) {
|
||||
selection.on( 'reset', this.updateSelect, this );
|
||||
// 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') );
|
||||
}
|
||||
|
||||
// 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') );
|
||||
},
|
||||
/**
|
||||
* @returns {wp.media.view.Attachment} Returns itself to allow chaining
|
||||
|
|
@ -4752,7 +4759,7 @@
|
|||
}
|
||||
|
||||
// In the grid view, bubble up an edit:attachment event to the controller.
|
||||
if ( this.controller.activeModes.where( { id: 'edit' } ).length ) {
|
||||
if ( this.controller.isModeActive( 'grid' ) ) {
|
||||
this.controller.trigger( 'edit:attachment', this.model );
|
||||
return;
|
||||
}
|
||||
|
|
@ -6318,21 +6325,14 @@
|
|||
},
|
||||
|
||||
initialize: function() {
|
||||
this.options = _.defaults( this.options, {
|
||||
rerenderOnModelChange: false
|
||||
});
|
||||
/**
|
||||
* call 'initialize' directly on the parent class
|
||||
*/
|
||||
media.view.Attachment.prototype.initialize.apply( this, arguments );
|
||||
},
|
||||
/**
|
||||
* @returns {wp.media.view..Attachment.Details} Returns itself to allow chaining
|
||||
*/
|
||||
render: function() {
|
||||
/**
|
||||
* call 'render' directly on the parent class
|
||||
*/
|
||||
media.view.Attachment.prototype.render.apply( this, arguments );
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* @param {Object} event
|
||||
*/
|
||||
|
|
@ -6379,11 +6379,12 @@
|
|||
this.model.fetch();
|
||||
},
|
||||
/**
|
||||
* When reverse tabbing(shift+tab) out of the right details panel, deliver
|
||||
* the focus to the item in the list that was being edited.
|
||||
*
|
||||
* @param {Object} event
|
||||
*/
|
||||
toggleSelectionHandler: function( event ) {
|
||||
// Reverse tabbing out of the right details panel
|
||||
// should take me back to the item in the list that was being edited.
|
||||
if ( 'keydown' === event.type && 9 === event.keyCode && event.shiftKey && event.target === $( ':tabbable', this.$el ).filter( ':first' )[0] ) {
|
||||
$('.attachments-browser .details').focus();
|
||||
return false;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -263,9 +263,6 @@ function wp_print_media_templates() {
|
|||
</script>
|
||||
|
||||
<script type="text/html" id="tmpl-attachment-details-two-column">
|
||||
<h3>
|
||||
<?php _e('Attachment Details'); ?>
|
||||
</h3>
|
||||
<div class="attachment-media-view">
|
||||
<div class="thumbnail thumbnail-{{ data.type }}">
|
||||
<# if ( data.uploading ) { #>
|
||||
|
|
@ -294,7 +291,7 @@ function wp_print_media_templates() {
|
|||
|
||||
<div class="attachment-actions">
|
||||
<# if ( 'image' === data.type && ! data.uploading ) { #>
|
||||
<a class="button edit-image" href="#"><?php _e( 'Edit Image' ); ?></a>
|
||||
<a class="button edit-attachment" href="#"><?php _e( 'Edit Image' ); ?></a>
|
||||
<# } #>
|
||||
|
||||
<# if ( ! data.uploading && data.can.remove ) { #>
|
||||
|
|
|
|||
Loading…
Reference in New Issue