Media: Move sidebar from the frame view to the attachment browser view. Prevents juggling sidebar visibility state, and makes managing sidebar contents more reasonable. see #21390.
git-svn-id: https://develop.svn.wordpress.org/trunk@22809 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Daryl Koopersmith
parent
6f9025dbf5
commit
4a99fa363e
|
|
@ -191,7 +191,7 @@ a.media-modal-close {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 61px;
|
||||
bottom: 0;
|
||||
width: 267px;
|
||||
padding: 0 16px 24px;
|
||||
z-index: 75;
|
||||
|
|
@ -200,10 +200,6 @@ a.media-modal-close {
|
|||
overflow: auto;
|
||||
}
|
||||
|
||||
.hide-sidebar .media-sidebar {
|
||||
right: -300px;
|
||||
}
|
||||
|
||||
.hide-toolbar .media-sidebar {
|
||||
bottom: 0;
|
||||
}
|
||||
|
|
@ -403,7 +399,7 @@ a.media-modal-close {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
left: 200px;
|
||||
right: 300px;
|
||||
right: 0;
|
||||
bottom: 61px;
|
||||
height: auto;
|
||||
width: auto;
|
||||
|
|
@ -411,10 +407,6 @@ a.media-modal-close {
|
|||
overflow: auto;
|
||||
}
|
||||
|
||||
.media-frame.hide-sidebar .region-content {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.media-frame.hide-toolbar .region-content {
|
||||
bottom: 0;
|
||||
}
|
||||
|
|
@ -690,6 +682,7 @@ a.media-modal-close {
|
|||
}
|
||||
|
||||
.attachments-browser .media-toolbar {
|
||||
right: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
|
|
@ -704,7 +697,7 @@ a.media-modal-close {
|
|||
position: absolute;
|
||||
top: 50px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
right: 300px;
|
||||
bottom: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -353,26 +353,16 @@
|
|||
} ) );
|
||||
|
||||
workflow.on( 'insert', function( selection ) {
|
||||
var state = workflow.state(),
|
||||
details = state.get('details');
|
||||
var state = workflow.state();
|
||||
|
||||
selection = selection || state.get('selection');
|
||||
|
||||
if ( ! selection || ! details )
|
||||
if ( ! selection )
|
||||
return;
|
||||
|
||||
selection.each( function( attachment ) {
|
||||
var detail = details[ attachment.cid ];
|
||||
|
||||
if ( detail )
|
||||
detail = detail.toJSON();
|
||||
|
||||
// Reset the attachment details.
|
||||
delete details[ attachment.cid ];
|
||||
|
||||
attachment = attachment.toJSON();
|
||||
|
||||
this.send.attachment( detail, attachment );
|
||||
var display = state.display( attachment ).toJSON();
|
||||
this.send.attachment( display, attachment.toJSON() );
|
||||
}, this );
|
||||
}, this );
|
||||
|
||||
|
|
|
|||
|
|
@ -766,10 +766,10 @@ window.wp = window.wp || {};
|
|||
|
||||
// If single has changed, fire an event.
|
||||
if ( this._single !== previous ) {
|
||||
if ( this._single )
|
||||
this._single.trigger( 'selection:single', this._single, this );
|
||||
if ( previous )
|
||||
previous.trigger( 'selection:unsingle', previous, this );
|
||||
if ( this._single )
|
||||
this._single.trigger( 'selection:single', this._single, this );
|
||||
}
|
||||
|
||||
// Return the single model, or the last model as a fallback.
|
||||
|
|
|
|||
|
|
@ -210,7 +210,6 @@
|
|||
|
||||
this.menu();
|
||||
this.toolbar();
|
||||
this.sidebar();
|
||||
this.content();
|
||||
},
|
||||
|
||||
|
|
@ -238,7 +237,7 @@
|
|||
}
|
||||
});
|
||||
|
||||
_.each(['toolbar','sidebar','content'], function( region ) {
|
||||
_.each(['toolbar','content'], function( region ) {
|
||||
media.controller.State.prototype[ region ] = function() {
|
||||
var mode = this.get( region );
|
||||
if ( mode )
|
||||
|
|
@ -275,14 +274,14 @@
|
|||
if ( ! this.get('gutter') )
|
||||
this.set( 'gutter', 8 );
|
||||
|
||||
if ( ! this.get('details') )
|
||||
this.set( 'details', [] );
|
||||
this.resetDisplays();
|
||||
|
||||
media.controller.State.prototype.initialize.apply( this, arguments );
|
||||
},
|
||||
|
||||
activate: function() {
|
||||
var selection = this.get('selection');
|
||||
var library = this.get('library'),
|
||||
selection = this.get('selection');
|
||||
|
||||
this._excludeStateLibrary();
|
||||
this.buildComposite();
|
||||
|
|
@ -294,13 +293,15 @@
|
|||
if ( this.get('multiple') )
|
||||
wp.Uploader.queue.on( 'add', this.selectUpload, this );
|
||||
|
||||
selection.on( 'selection:single selection:unsingle', this.sidebar, this );
|
||||
selection.on( 'add remove reset', this.refreshSelection, this );
|
||||
|
||||
this._updateEmpty();
|
||||
this.get('library').on( 'add remove reset', this._updateEmpty, this );
|
||||
library.on( 'add remove reset', this._updateEmpty, this );
|
||||
this.on( 'change:empty', this.refresh, this );
|
||||
this.refresh();
|
||||
|
||||
|
||||
this.on( 'insert', this._insertDisplaySettings, this );
|
||||
},
|
||||
|
||||
deactivate: function() {
|
||||
|
|
@ -321,15 +322,7 @@
|
|||
|
||||
reset: function() {
|
||||
this.get('selection').clear();
|
||||
},
|
||||
|
||||
sidebar: function() {
|
||||
var sidebar = this.frame.sidebar;
|
||||
|
||||
if ( this.get('selection').single() )
|
||||
sidebar.mode( this.get('sidebar') );
|
||||
else
|
||||
sidebar.mode('clear');
|
||||
this.resetDisplays();
|
||||
},
|
||||
|
||||
content: function() {
|
||||
|
|
@ -348,11 +341,45 @@
|
|||
},
|
||||
|
||||
refresh: function() {
|
||||
this.frame.$el.toggleClass( 'hide-sidebar hide-toolbar', this.get('empty') );
|
||||
this.frame.$el.toggleClass( 'hide-toolbar', this.get('empty') );
|
||||
this.content();
|
||||
this.refreshSelection();
|
||||
},
|
||||
|
||||
resetDisplays: function() {
|
||||
this._displays = [];
|
||||
this._defaultDisplaySettings = {
|
||||
align: getUserSetting( 'align', 'none' ),
|
||||
size: getUserSetting( 'imgsize', 'medium' ),
|
||||
link: getUserSetting( 'urlbutton', 'post' )
|
||||
};
|
||||
},
|
||||
|
||||
display: function( attachment ) {
|
||||
var displays = this._displays;
|
||||
|
||||
if ( ! displays[ attachment.cid ] )
|
||||
displays[ attachment.cid ] = new Backbone.Model( this._defaultDisplaySettings );
|
||||
|
||||
return displays[ attachment.cid ];
|
||||
},
|
||||
|
||||
_insertDisplaySettings: function() {
|
||||
var selection = this.get('selection'),
|
||||
display;
|
||||
|
||||
// If inserting one image, set those display properties as the
|
||||
// default user setting.
|
||||
if ( selection.length !== 1 )
|
||||
return;
|
||||
|
||||
display = this.display( selection.first() ).toJSON();
|
||||
|
||||
setUserSetting( 'align', display.align );
|
||||
setUserSetting( 'imgsize', display.size );
|
||||
setUserSetting( 'urlbutton', display.link );
|
||||
},
|
||||
|
||||
_updateEmpty: function() {
|
||||
var library = this.get('library'),
|
||||
props = library.props;
|
||||
|
|
@ -448,7 +475,6 @@
|
|||
defaults: _.defaults({
|
||||
id: 'upload',
|
||||
content: 'upload',
|
||||
sidebar: 'empty',
|
||||
toolbar: 'empty',
|
||||
|
||||
// The state to navigate to when files are uploading.
|
||||
|
|
@ -488,8 +514,7 @@
|
|||
editing: false,
|
||||
sortable: true,
|
||||
searchable: false,
|
||||
toolbar: 'gallery-edit',
|
||||
sidebar: 'settings'
|
||||
toolbar: 'gallery-edit'
|
||||
},
|
||||
|
||||
initialize: function() {
|
||||
|
|
@ -512,19 +537,34 @@
|
|||
// Watch for uploaded attachments.
|
||||
this.get('library').observe( wp.Uploader.queue );
|
||||
|
||||
this.frame.content.on( 'activate:browse', this.gallerySettings, this );
|
||||
|
||||
media.controller.Library.prototype.activate.apply( this, arguments );
|
||||
},
|
||||
|
||||
deactivate: function() {
|
||||
// Stop watching for uploaded attachments.
|
||||
this.get('library').unobserve( wp.Uploader.queue );
|
||||
|
||||
this.frame.content.off( null, null, this );
|
||||
media.controller.Library.prototype.deactivate.apply( this, arguments );
|
||||
},
|
||||
|
||||
sidebar: function() {
|
||||
media.controller.Library.prototype.sidebar.apply( this, arguments );
|
||||
this.frame.sidebar.trigger('gallery-settings');
|
||||
return this;
|
||||
gallerySettings: function() {
|
||||
var library = this.get('library');
|
||||
|
||||
if ( ! library )
|
||||
return;
|
||||
|
||||
library.gallery = library.gallery || new Backbone.Model();
|
||||
|
||||
this.frame.content.view().sidebar.set({
|
||||
gallery: new media.view.Settings.Gallery({
|
||||
controller: this,
|
||||
model: library.gallery,
|
||||
priority: 40
|
||||
})
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -1033,7 +1073,7 @@
|
|||
media.view.MediaFrame = media.view.Frame.extend({
|
||||
className: 'media-frame',
|
||||
template: media.template('media-frame'),
|
||||
regions: ['menu','content','sidebar','toolbar'],
|
||||
regions: ['menu','content','toolbar'],
|
||||
|
||||
initialize: function() {
|
||||
media.view.Frame.prototype.initialize.apply( this, arguments );
|
||||
|
|
@ -1108,7 +1148,7 @@
|
|||
},
|
||||
|
||||
iframeContent: function() {
|
||||
this.$el.addClass('hide-toolbar hide-sidebar');
|
||||
this.$el.addClass('hide-toolbar');
|
||||
this.content.view( new media.view.Iframe({
|
||||
controller: this
|
||||
}).render() );
|
||||
|
|
@ -1215,8 +1255,6 @@
|
|||
this.menu.on( 'activate:main', this.mainMenu, this );
|
||||
this.content.on( 'activate:browse', this.browseContent, this );
|
||||
this.content.on( 'activate:upload', this.uploadContent, this );
|
||||
this.sidebar.on( 'activate:clear', this.clearSidebar, this );
|
||||
this.sidebar.on( 'activate:settings', this.settingsSidebar, this );
|
||||
this.toolbar.on( 'activate:select', this.selectToolbar, this );
|
||||
|
||||
this.on( 'refresh:selection', this.refreshSelectToolbar, this );
|
||||
|
|
@ -1254,52 +1292,20 @@
|
|||
search: state.get('searchable'),
|
||||
upload: state.get('upload'),
|
||||
filters: state.get('filterable'),
|
||||
display: state.get('displaySettings'),
|
||||
|
||||
AttachmentView: state.get('AttachmentView')
|
||||
}) );
|
||||
},
|
||||
|
||||
uploadContent: function() {
|
||||
this.$el.addClass('hide-sidebar hide-toolbar');
|
||||
this.$el.addClass('hide-toolbar');
|
||||
|
||||
this.content.view( new media.view.UploaderInline({
|
||||
controller: this
|
||||
}) );
|
||||
},
|
||||
|
||||
// Sidebars
|
||||
clearSidebar: function() {
|
||||
this.sidebar.view( new media.view.Sidebar({
|
||||
controller: this
|
||||
}) );
|
||||
},
|
||||
|
||||
settingsSidebar: function( options ) {
|
||||
var single = this.state().get('selection').single(),
|
||||
views = {};
|
||||
|
||||
views.details = new media.view.Attachment.Details({
|
||||
controller: this,
|
||||
model: single,
|
||||
priority: 80
|
||||
}).render();
|
||||
|
||||
|
||||
if ( single.get('compat') ) {
|
||||
views.compat = new media.view.AttachmentCompat({
|
||||
controller: this,
|
||||
model: single,
|
||||
priority: 120
|
||||
}).render();
|
||||
}
|
||||
|
||||
this.sidebar.view( new media.view.Sidebar({
|
||||
controller: this,
|
||||
silent: options && options.silent,
|
||||
views: views
|
||||
}) );
|
||||
},
|
||||
|
||||
// Toolbars
|
||||
selectToolbar: function( options ) {
|
||||
options = _.defaults( options || {}, {
|
||||
|
|
@ -1370,8 +1376,9 @@
|
|||
filterable: 'all',
|
||||
multiple: this.options.multiple,
|
||||
menu: 'main',
|
||||
sidebar: 'attachment-settings',
|
||||
|
||||
// Show the attachment display settings.
|
||||
displaySettings: true,
|
||||
// Update user settings when users adjust the
|
||||
// attachment display settings.
|
||||
displayUserSettings: true
|
||||
|
|
@ -1422,10 +1429,6 @@
|
|||
'edit-selection': 'editSelectionContent'
|
||||
},
|
||||
|
||||
sidebar: {
|
||||
'attachment-settings': 'attachmentSettingsSidebar'
|
||||
},
|
||||
|
||||
toolbar: {
|
||||
'main-attachments': 'mainAttachmentsToolbar',
|
||||
'main-embed': 'mainEmbedToolbar',
|
||||
|
|
@ -1439,8 +1442,6 @@
|
|||
this[ region ].on( 'activate:' + handler, this[ callback ], this );
|
||||
}, this );
|
||||
}, this );
|
||||
|
||||
this.sidebar.on( 'gallery-settings', this.onSidebarGallerySettings, this );
|
||||
},
|
||||
|
||||
// Menus
|
||||
|
|
@ -1503,7 +1504,6 @@
|
|||
model: this.state()
|
||||
}).render();
|
||||
|
||||
this.$el.addClass('hide-sidebar');
|
||||
this.content.view( view );
|
||||
view.url.focus();
|
||||
},
|
||||
|
|
@ -1555,30 +1555,6 @@
|
|||
}, options );
|
||||
},
|
||||
|
||||
attachmentSettingsSidebar: function( options ) {
|
||||
var state = this.state(),
|
||||
display = state.get('details'),
|
||||
single = state.get('selection').single();
|
||||
|
||||
this.settingsSidebar({ silent: true });
|
||||
|
||||
display[ single.cid ] = display[ single.cid ] || new Backbone.Model({
|
||||
align: getUserSetting( 'align', 'none' ),
|
||||
size: getUserSetting( 'imgsize', 'medium' ),
|
||||
link: getUserSetting( 'urlbutton', 'post' )
|
||||
});
|
||||
|
||||
this.sidebar.view().set({
|
||||
display: new media.view.Settings.AttachmentDisplay({
|
||||
controller: this,
|
||||
model: display[ single.cid ],
|
||||
attachment: single,
|
||||
priority: 160,
|
||||
userSettings: state.get('displayUserSettings')
|
||||
}).render()
|
||||
}, options );
|
||||
},
|
||||
|
||||
// Toolbars
|
||||
mainAttachmentsToolbar: function() {
|
||||
this.toolbar.view( new media.view.Toolbar.Insert({
|
||||
|
|
@ -2242,8 +2218,9 @@
|
|||
|
||||
unset: function( id ) {
|
||||
var view = this.get( id );
|
||||
|
||||
if ( view )
|
||||
view.dispose();
|
||||
view.remove();
|
||||
|
||||
delete this._views[ id ];
|
||||
return this;
|
||||
|
|
@ -2878,18 +2855,31 @@
|
|||
className: 'attachments-browser',
|
||||
|
||||
initialize: function() {
|
||||
var filters, FiltersConstructor;
|
||||
|
||||
this.controller = this.options.controller;
|
||||
|
||||
_.defaults( this.options, {
|
||||
filters: false,
|
||||
search: true,
|
||||
upload: false,
|
||||
display: false,
|
||||
|
||||
AttachmentView: media.view.Attachment.Library
|
||||
});
|
||||
|
||||
this.createToolbar();
|
||||
this.createAttachments();
|
||||
this.createSidebar();
|
||||
},
|
||||
|
||||
dispose: function() {
|
||||
this.options.selection.off( null, null, this );
|
||||
media.View.prototype.dispose.apply( this, arguments );
|
||||
return this;
|
||||
},
|
||||
|
||||
createToolbar: function() {
|
||||
var filters, FiltersConstructor;
|
||||
|
||||
this.toolbar = new media.view.Toolbar({
|
||||
controller: this.controller
|
||||
});
|
||||
|
|
@ -2933,7 +2923,9 @@
|
|||
text: l10n.selectFiles
|
||||
}, this.options.upload ) ).render() );
|
||||
}
|
||||
},
|
||||
|
||||
createAttachments: function() {
|
||||
this.attachments = new media.view.Attachments({
|
||||
controller: this.controller,
|
||||
collection: this.collection,
|
||||
|
|
@ -2946,6 +2938,54 @@
|
|||
});
|
||||
|
||||
this.views.add( this.attachments );
|
||||
},
|
||||
|
||||
createSidebar: function() {
|
||||
this.sidebar = new media.view.Sidebar({
|
||||
controller: this.controller
|
||||
});
|
||||
|
||||
this.views.add( this.sidebar );
|
||||
|
||||
this.options.selection.on( 'selection:single', this.createSingle, this );
|
||||
this.options.selection.on( 'selection:unsingle', this.disposeSingle, this );
|
||||
},
|
||||
|
||||
createSingle: function() {
|
||||
var sidebar = this.sidebar,
|
||||
single = this.options.selection.single(),
|
||||
views = {};
|
||||
|
||||
sidebar.set( 'details', new media.view.Attachment.Details({
|
||||
controller: this.controller,
|
||||
model: single,
|
||||
priority: 80
|
||||
}) );
|
||||
|
||||
if ( single.get('compat') ) {
|
||||
sidebar.set( 'compat', new media.view.AttachmentCompat({
|
||||
controller: this.controller,
|
||||
model: single,
|
||||
priority: 120
|
||||
}) );
|
||||
}
|
||||
|
||||
if ( this.options.display ) {
|
||||
sidebar.set( 'display', new media.view.Settings.AttachmentDisplay({
|
||||
controller: this.controller,
|
||||
model: this.model.display( single ),
|
||||
attachment: single,
|
||||
priority: 160,
|
||||
userSettings: this.model.get('displayUserSettings')
|
||||
}) );
|
||||
}
|
||||
},
|
||||
|
||||
disposeSingle: function() {
|
||||
var sidebar = this.sidebar;
|
||||
sidebar.unset('details');
|
||||
sidebar.unset('compat');
|
||||
sidebar.unset('display');
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1404,7 +1404,6 @@ function wp_print_media_templates( $attachment ) {
|
|||
<script type="text/html" id="tmpl-media-frame">
|
||||
<div class="media-frame-menu"></div>
|
||||
<div class="media-frame-content"></div>
|
||||
<div class="media-frame-sidebar"></div>
|
||||
<div class="media-frame-toolbar"></div>
|
||||
<div class="media-frame-uploader"></div>
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue