diff --git a/wp-includes/js/media-grid.js b/wp-includes/js/media-grid.js index edf429e896..b6128a3755 100644 --- a/wp-includes/js/media-grid.js +++ b/wp-includes/js/media-grid.js @@ -50,8 +50,10 @@ media.view.DeleteSelectedPermanentlyButton = require( './views/button/delete-sel */ var Router = Backbone.Router.extend({ routes: { - 'upload.php?item=:slug': 'showItem', - 'upload.php?search=:query': 'search' + 'upload.php?item=:slug&mode=edit': 'editItem', + 'upload.php?item=:slug': 'showItem', + 'upload.php?search=:query': 'search', + 'upload.php': 'reset' }, // Map routes against the page URL @@ -59,6 +61,14 @@ var Router = Backbone.Router.extend({ return 'upload.php' + url; }, + reset: function() { + var frame = wp.media.frames.edit; + + if ( frame ) { + frame.close(); + } + }, + // Respond to the search route by filling the search field and trigggering the input event search: function( query ) { jQuery( '#media-search-input' ).val( query ).trigger( 'input' ); @@ -67,21 +77,30 @@ var Router = Backbone.Router.extend({ // Show the modal with a specific item showItem: function( query ) { var media = wp.media, - library = media.frame.state().get('library'), + frame = media.frames.browse, + library = frame.state().get('library'), item; // Trigger the media frame to open the correct item item = library.findWhere( { id: parseInt( query, 10 ) } ); + item.set( 'skipHistory', true ); + if ( item ) { - media.frame.trigger( 'edit:attachment', item ); + frame.trigger( 'edit:attachment', item ); } else { item = media.attachment( query ); - media.frame.listenTo( item, 'change', function( model ) { - media.frame.stopListening( item ); - media.frame.trigger( 'edit:attachment', model ); + frame.listenTo( item, 'change', function( model ) { + frame.stopListening( item ); + frame.trigger( 'edit:attachment', model ); } ); item.fetch(); } + }, + + // Show the modal in edit mode with a specific item. + editItem: function( query ) { + this.showItem( query ); + wp.media.frames.edit.content.mode( 'edit-details' ); } }); @@ -107,8 +126,16 @@ var Details = wp.media.view.Attachment.Details, TwoColumn = Details.extend({ template: wp.template( 'attachment-details-two-column' ), + initialize: function() { + this.controller.on( 'content:activate:edit-details', _.bind( this.editAttachment, this ) ); + + Details.prototype.initialize.apply( this, arguments ); + }, + editAttachment: function( event ) { - event.preventDefault(); + if ( event ) { + event.preventDefault(); + } this.controller.content.mode( 'edit-image' ); }, @@ -401,13 +428,19 @@ EditAttachments = MediaFrame.extend({ // Bind default title creation. this.on( 'title:create:default', this.createTitle, this ); - // Close the modal if the attachment is deleted. - this.listenTo( this.model, 'change:status destroy', this.close, this ); - this.on( 'content:create:edit-metadata', this.editMetadataMode, this ); this.on( 'content:create:edit-image', this.editImageMode, this ); this.on( 'content:render:edit-image', this.editImageModeRender, this ); + this.on( 'refresh', this.rerender, this ); this.on( 'close', this.detach ); + + this.bindModelHandlers(); + this.listenTo( this.gridRouter, 'route:search', this.close, this ); + }, + + bindModelHandlers: function() { + // Close the modal if the attachment is deleted. + this.listenTo( this.model, 'change:status destroy', this.close, this ); }, createModal: function() { @@ -424,7 +457,6 @@ EditAttachments = MediaFrame.extend({ // Completely destroy the modal DOM element when closing it. this.modal.on( 'close', _.bind( function() { - this.modal.remove(); $( 'body' ).off( 'keydown.media-modal' ); /* remove the keydown event */ // Restore the original focus item if possible $( 'li.attachment[data-id="' + this.model.get( 'id' ) +'"]' ).focus(); @@ -442,7 +474,10 @@ EditAttachments = MediaFrame.extend({ */ createStates: function() { this.states.add([ - new wp.media.controller.EditAttachmentMetadata( { model: this.model } ) + new wp.media.controller.EditAttachmentMetadata({ + model: this.model, + library: this.library + }) ]); }, @@ -467,8 +502,8 @@ EditAttachments = MediaFrame.extend({ model: this.model }) ); - // Update browser url when navigating media details - if ( this.model ) { + // Update browser url when navigating media details, except on load. + if ( this.model && ! this.model.get( 'skipHistory' ) ) { this.gridRouter.navigate( this.gridRouter.baseUrl( '?item=' + this.model.id ) ); } }, @@ -494,6 +529,9 @@ EditAttachments = MediaFrame.extend({ frame: this, controller: editImageController } ); + + this.gridRouter.navigate( this.gridRouter.baseUrl( '?item=' + this.model.id + '&mode=edit' ) ); + }, editImageModeRender: function( view ) { @@ -508,7 +546,13 @@ EditAttachments = MediaFrame.extend({ /** * Rerender the view. */ - rerender: function() { + rerender: function( model ) { + this.stopListening( this.model ); + + this.model = model; + + this.bindModelHandlers(); + // Only rerender the `content` region. if ( this.content.mode() !== 'edit-metadata' ) { this.content.mode( 'edit-metadata' ); @@ -527,8 +571,7 @@ EditAttachments = MediaFrame.extend({ this.$( '.left' ).blur(); return; } - this.model = this.library.at( this.getCurrentIndex() - 1 ); - this.rerender(); + this.trigger( 'refresh', this.library.at( this.getCurrentIndex() - 1 ) ); this.$( '.left' ).focus(); }, @@ -540,8 +583,7 @@ EditAttachments = MediaFrame.extend({ this.$( '.right' ).blur(); return; } - this.model = this.library.at( this.getCurrentIndex() + 1 ); - this.rerender(); + this.trigger( 'refresh', this.library.at( this.getCurrentIndex() + 1 ) ); this.$( '.right' ).focus(); }, @@ -576,7 +618,9 @@ EditAttachments = MediaFrame.extend({ }, resetRoute: function() { - this.gridRouter.navigate( this.gridRouter.baseUrl( '' ) ); + var searchTerm = this.controller.browserView.toolbar.get( 'search' ).$el.val(), + url = '' !== searchTerm ? '?search=' + searchTerm : ''; + this.gridRouter.navigate( this.gridRouter.baseUrl( url ), { replace: true } ); } }); @@ -666,38 +710,42 @@ Manage = MediaFrame.extend({ this.bindRegionModeHandlers(); this.render(); this.bindSearchHandler(); + + wp.media.frames.browse = this; }, bindSearchHandler: function() { var search = this.$( '#media-search-input' ), - currentSearch = this.options.container.data( 'search' ), searchView = this.browserView.toolbar.get( 'search' ).$el, listMode = this.$( '.view-list' ), - input = _.debounce( function (e) { + input = _.throttle( function (e) { var val = $( e.currentTarget ).val(), url = ''; if ( val ) { url += '?search=' + val; + this.gridRouter.navigate( this.gridRouter.baseUrl( url ), { replace: true } ); } - this.gridRouter.navigate( this.gridRouter.baseUrl( url ) ); }, 1000 ); // Update the URL when entering search string (at most once per second) search.on( 'input', _.bind( input, this ) ); - searchView.val( currentSearch ).trigger( 'input' ); - this.gridRouter.on( 'route:search', function () { - var href = window.location.href; - if ( href.indexOf( 'mode=' ) > -1 ) { - href = href.replace( /mode=[^&]+/g, 'mode=list' ); - } else { - href += href.indexOf( '?' ) > -1 ? '&mode=list' : '?mode=list'; - } - href = href.replace( 'search=', 's=' ); - listMode.prop( 'href', href ); - } ); + this.gridRouter + .on( 'route:search', function () { + var href = window.location.href; + if ( href.indexOf( 'mode=' ) > -1 ) { + href = href.replace( /mode=[^&]+/g, 'mode=list' ); + } else { + href += href.indexOf( '?' ) > -1 ? '&mode=list' : '?mode=list'; + } + href = href.replace( 'search=', 's=' ); + listMode.prop( 'href', href ); + }) + .on( 'route:reset', function() { + searchView.val( '' ).trigger( 'input' ); + }); }, /** @@ -789,12 +837,16 @@ Manage = MediaFrame.extend({ */ openEditAttachmentModal: function( model ) { // Create a new EditAttachment frame, passing along the library and the attachment model. - wp.media( { - frame: 'edit-attachments', - controller: this, - library: this.state().get('library'), - model: model - } ); + if ( wp.media.frames.edit ) { + wp.media.frames.edit.open().trigger( 'refresh', model ); + } else { + wp.media.frames.edit = wp.media( { + frame: 'edit-attachments', + controller: this, + library: this.state().get('library'), + model: model + } ); + } }, /** diff --git a/wp-includes/js/media-grid.min.js b/wp-includes/js/media-grid.min.js index 33c56ae66a..0e6fb24e1f 100644 --- a/wp-includes/js/media-grid.min.js +++ b/wp-includes/js/media-grid.min.js @@ -1 +1 @@ -!function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g *, .media-toolbar-primary > *"),this.controller.isModeActive("select")?(this.model.set({size:"large",text:f.cancelSelection}),a.not(".spinner, .media-button").hide(),this.$el.show(),b.$(".delete-selected-button").removeClass("hidden")):(this.model.set({size:"",text:f.bulkSelect}),this.controller.content.get().$el.removeClass("fixed"),b.$el.css("width",""),b.$(".delete-selected-button").addClass("hidden"),a.not(".media-button").show(),this.controller.state().get("selection").reset())}}),b.exports=d},{}],8:[function(a,b,c){var d,e=wp.media.View,f=wp.media.view.EditImage;d=f.extend({initialize:function(a){this.editor=window.imageEdit,this.frame=a.frame,this.controller=a.controller,e.prototype.initialize.apply(this,arguments)},back:function(){this.frame.content.mode("edit-metadata")},save:function(){this.model.fetch().done(_.bind(function(){this.frame.content.mode("edit-metadata")},this))}}),b.exports=d},{}],9:[function(a,b,c){var d,e=wp.media.view.Frame,f=wp.media.view.MediaFrame,g=jQuery;d=f.extend({className:"edit-attachment-frame",template:wp.template("edit-attachment-frame"),regions:["title","content"],events:{"click .left":"previousMediaItem","click .right":"nextMediaItem"},initialize:function(){e.prototype.initialize.apply(this,arguments),_.defaults(this.options,{modal:!0,state:"edit-attachment"}),this.controller=this.options.controller,this.gridRouter=this.controller.gridRouter,this.library=this.options.library,this.options.model&&(this.model=this.options.model),this.bindHandlers(),this.createStates(),this.createModal(),this.title.mode("default"),this.toggleNav()},bindHandlers:function(){this.on("title:create:default",this.createTitle,this),this.listenTo(this.model,"change:status destroy",this.close,this),this.on("content:create:edit-metadata",this.editMetadataMode,this),this.on("content:create:edit-image",this.editImageMode,this),this.on("content:render:edit-image",this.editImageModeRender,this),this.on("close",this.detach)},createModal:function(){this.options.modal&&(this.modal=new wp.media.view.Modal({controller:this,title:this.options.title}),this.modal.on("open",_.bind(function(){g("body").on("keydown.media-modal",_.bind(this.keyEvent,this))},this)),this.modal.on("close",_.bind(function(){this.modal.remove(),g("body").off("keydown.media-modal"),g('li.attachment[data-id="'+this.model.get("id")+'"]').focus(),this.resetRoute()},this)),this.modal.content(this),this.modal.open())},createStates:function(){this.states.add([new wp.media.controller.EditAttachmentMetadata({model:this.model})])},editMetadataMode:function(a){a.view=new wp.media.view.Attachment.Details.TwoColumn({controller:this,model:this.model}),a.view.views.set(".attachment-compat",new wp.media.view.AttachmentCompat({controller:this,model:this.model})),this.model&&this.gridRouter.navigate(this.gridRouter.baseUrl("?item="+this.model.id))},editImageMode:function(a){var b=new wp.media.controller.EditImage({model:this.model,frame:this});b._toolbar=function(){},b._router=function(){},b._menu=function(){},a.view=new wp.media.view.EditImage.Details({model:this.model,frame:this,controller:b})},editImageModeRender:function(a){a.on("ready",a.loadEditor)},toggleNav:function(){this.$(".left").toggleClass("disabled",!this.hasPrevious()),this.$(".right").toggleClass("disabled",!this.hasNext())},rerender:function(){"edit-metadata"!==this.content.mode()?this.content.mode("edit-metadata"):this.content.render(),this.toggleNav()},previousMediaItem:function(){return this.hasPrevious()?(this.model=this.library.at(this.getCurrentIndex()-1),this.rerender(),void this.$(".left").focus()):void this.$(".left").blur()},nextMediaItem:function(){return this.hasNext()?(this.model=this.library.at(this.getCurrentIndex()+1),this.rerender(),void this.$(".right").focus()):void this.$(".right").blur()},getCurrentIndex:function(){return this.library.indexOf(this.model)},hasNext:function(){return this.getCurrentIndex()+1-1},keyEvent:function(a){("INPUT"!==a.target.nodeName&&"TEXTAREA"!==a.target.nodeName||a.target.readOnly||a.target.disabled)&&(39===a.keyCode&&this.nextMediaItem(),37===a.keyCode&&this.previousMediaItem())},resetRoute:function(){this.gridRouter.navigate(this.gridRouter.baseUrl(""))}}),b.exports=d},{}],10:[function(a,b,c){var d,e=wp.media.view.MediaFrame,f=wp.media.controller.Library,g=Backbone.$;d=e.extend({initialize:function(){_.defaults(this.options,{title:"",modal:!1,selection:[],library:{},multiple:"add",state:"library",uploader:!0,mode:["grid","edit"]}),this.$body=g(document.body),this.$window=g(window),this.$adminBar=g("#wpadminbar"),this.$uploaderToggler=g(".page-title-action").attr("aria-expanded","false").on("click",_.bind(this.addNewClickHandler,this)),this.$window.on("scroll resize",_.debounce(_.bind(this.fixPosition,this),15)),this.$el.addClass("wp-core-ui"),!wp.Uploader.limitExceeded&&wp.Uploader.browser.supported||(this.options.uploader=!1),this.options.uploader&&(this.uploader=new wp.media.view.UploaderWindow({controller:this,uploader:{dropzone:document.body,container:document.body}}).render(),this.uploader.ready(),g("body").append(this.uploader.el),this.options.uploader=!1),this.gridRouter=new wp.media.view.MediaFrame.Manage.Router,e.prototype.initialize.apply(this,arguments),this.$el.appendTo(this.options.container),this.createStates(),this.bindRegionModeHandlers(),this.render(),this.bindSearchHandler()},bindSearchHandler:function(){var a=this.$("#media-search-input"),b=this.options.container.data("search"),c=this.browserView.toolbar.get("search").$el,d=this.$(".view-list"),e=_.debounce(function(a){var b=g(a.currentTarget).val(),c="";b&&(c+="?search="+b),this.gridRouter.navigate(this.gridRouter.baseUrl(c))},1e3);a.on("input",_.bind(e,this)),c.val(b).trigger("input"),this.gridRouter.on("route:search",function(){var a=window.location.href;a.indexOf("mode=")>-1?a=a.replace(/mode=[^&]+/g,"mode=list"):a+=a.indexOf("?")>-1?"&mode=list":"?mode=list",a=a.replace("search=","s="),d.prop("href",a)})},createStates:function(){var a=this.options;this.options.states||this.states.add([new f({library:wp.media.query(a.library),multiple:a.multiple,title:a.title,content:"browse",toolbar:"select",contentUserSetting:!1,filterable:"all",autoSelect:!1})])},bindRegionModeHandlers:function(){this.on("content:create:browse",this.browseContent,this),this.on("edit:attachment",this.openEditAttachmentModal,this),this.on("select:activate",this.bindKeydown,this),this.on("select:deactivate",this.unbindKeydown,this)},handleKeydown:function(a){27===a.which&&(a.preventDefault(),this.deactivateMode("select").activateMode("edit"))},bindKeydown:function(){this.$body.on("keydown.select",_.bind(this.handleKeydown,this))},unbindKeydown:function(){this.$body.off("keydown.select")},fixPosition:function(){var a,b;this.isModeActive("select")&&(a=this.$(".attachments-browser"),b=a.find(".media-toolbar"),a.offset().top+16 *, .media-toolbar-primary > *"),this.controller.isModeActive("select")?(this.model.set({size:"large",text:f.cancelSelection}),a.not(".spinner, .media-button").hide(),this.$el.show(),b.$(".delete-selected-button").removeClass("hidden")):(this.model.set({size:"",text:f.bulkSelect}),this.controller.content.get().$el.removeClass("fixed"),b.$el.css("width",""),b.$(".delete-selected-button").addClass("hidden"),a.not(".media-button").show(),this.controller.state().get("selection").reset())}}),b.exports=d},{}],8:[function(a,b,c){var d,e=wp.media.View,f=wp.media.view.EditImage;d=f.extend({initialize:function(a){this.editor=window.imageEdit,this.frame=a.frame,this.controller=a.controller,e.prototype.initialize.apply(this,arguments)},back:function(){this.frame.content.mode("edit-metadata")},save:function(){this.model.fetch().done(_.bind(function(){this.frame.content.mode("edit-metadata")},this))}}),b.exports=d},{}],9:[function(a,b,c){var d,e=wp.media.view.Frame,f=wp.media.view.MediaFrame,g=jQuery;d=f.extend({className:"edit-attachment-frame",template:wp.template("edit-attachment-frame"),regions:["title","content"],events:{"click .left":"previousMediaItem","click .right":"nextMediaItem"},initialize:function(){e.prototype.initialize.apply(this,arguments),_.defaults(this.options,{modal:!0,state:"edit-attachment"}),this.controller=this.options.controller,this.gridRouter=this.controller.gridRouter,this.library=this.options.library,this.options.model&&(this.model=this.options.model),this.bindHandlers(),this.createStates(),this.createModal(),this.title.mode("default"),this.toggleNav()},bindHandlers:function(){this.on("title:create:default",this.createTitle,this),this.on("content:create:edit-metadata",this.editMetadataMode,this),this.on("content:create:edit-image",this.editImageMode,this),this.on("content:render:edit-image",this.editImageModeRender,this),this.on("refresh",this.rerender,this),this.on("close",this.detach),this.bindModelHandlers(),this.listenTo(this.gridRouter,"route:search",this.close,this)},bindModelHandlers:function(){this.listenTo(this.model,"change:status destroy",this.close,this)},createModal:function(){this.options.modal&&(this.modal=new wp.media.view.Modal({controller:this,title:this.options.title}),this.modal.on("open",_.bind(function(){g("body").on("keydown.media-modal",_.bind(this.keyEvent,this))},this)),this.modal.on("close",_.bind(function(){g("body").off("keydown.media-modal"),g('li.attachment[data-id="'+this.model.get("id")+'"]').focus(),this.resetRoute()},this)),this.modal.content(this),this.modal.open())},createStates:function(){this.states.add([new wp.media.controller.EditAttachmentMetadata({model:this.model,library:this.library})])},editMetadataMode:function(a){a.view=new wp.media.view.Attachment.Details.TwoColumn({controller:this,model:this.model}),a.view.views.set(".attachment-compat",new wp.media.view.AttachmentCompat({controller:this,model:this.model})),this.model&&!this.model.get("skipHistory")&&this.gridRouter.navigate(this.gridRouter.baseUrl("?item="+this.model.id))},editImageMode:function(a){var b=new wp.media.controller.EditImage({model:this.model,frame:this});b._toolbar=function(){},b._router=function(){},b._menu=function(){},a.view=new wp.media.view.EditImage.Details({model:this.model,frame:this,controller:b}),this.gridRouter.navigate(this.gridRouter.baseUrl("?item="+this.model.id+"&mode=edit"))},editImageModeRender:function(a){a.on("ready",a.loadEditor)},toggleNav:function(){this.$(".left").toggleClass("disabled",!this.hasPrevious()),this.$(".right").toggleClass("disabled",!this.hasNext())},rerender:function(a){this.stopListening(this.model),this.model=a,this.bindModelHandlers(),"edit-metadata"!==this.content.mode()?this.content.mode("edit-metadata"):this.content.render(),this.toggleNav()},previousMediaItem:function(){return this.hasPrevious()?(this.trigger("refresh",this.library.at(this.getCurrentIndex()-1)),void this.$(".left").focus()):void this.$(".left").blur()},nextMediaItem:function(){return this.hasNext()?(this.trigger("refresh",this.library.at(this.getCurrentIndex()+1)),void this.$(".right").focus()):void this.$(".right").blur()},getCurrentIndex:function(){return this.library.indexOf(this.model)},hasNext:function(){return this.getCurrentIndex()+1-1},keyEvent:function(a){("INPUT"!==a.target.nodeName&&"TEXTAREA"!==a.target.nodeName||a.target.readOnly||a.target.disabled)&&(39===a.keyCode&&this.nextMediaItem(),37===a.keyCode&&this.previousMediaItem())},resetRoute:function(){var a=this.controller.browserView.toolbar.get("search").$el.val(),b=""!==a?"?search="+a:"";this.gridRouter.navigate(this.gridRouter.baseUrl(b),{replace:!0})}}),b.exports=d},{}],10:[function(a,b,c){var d,e=wp.media.view.MediaFrame,f=wp.media.controller.Library,g=Backbone.$;d=e.extend({initialize:function(){_.defaults(this.options,{title:"",modal:!1,selection:[],library:{},multiple:"add",state:"library",uploader:!0,mode:["grid","edit"]}),this.$body=g(document.body),this.$window=g(window),this.$adminBar=g("#wpadminbar"),this.$uploaderToggler=g(".page-title-action").attr("aria-expanded","false").on("click",_.bind(this.addNewClickHandler,this)),this.$window.on("scroll resize",_.debounce(_.bind(this.fixPosition,this),15)),this.$el.addClass("wp-core-ui"),!wp.Uploader.limitExceeded&&wp.Uploader.browser.supported||(this.options.uploader=!1),this.options.uploader&&(this.uploader=new wp.media.view.UploaderWindow({controller:this,uploader:{dropzone:document.body,container:document.body}}).render(),this.uploader.ready(),g("body").append(this.uploader.el),this.options.uploader=!1),this.gridRouter=new wp.media.view.MediaFrame.Manage.Router,e.prototype.initialize.apply(this,arguments),this.$el.appendTo(this.options.container),this.createStates(),this.bindRegionModeHandlers(),this.render(),this.bindSearchHandler(),wp.media.frames.browse=this},bindSearchHandler:function(){var a=this.$("#media-search-input"),b=this.browserView.toolbar.get("search").$el,c=this.$(".view-list"),d=_.throttle(function(a){var b=g(a.currentTarget).val(),c="";b&&(c+="?search="+b,this.gridRouter.navigate(this.gridRouter.baseUrl(c),{replace:!0}))},1e3);a.on("input",_.bind(d,this)),this.gridRouter.on("route:search",function(){var a=window.location.href;a.indexOf("mode=")>-1?a=a.replace(/mode=[^&]+/g,"mode=list"):a+=a.indexOf("?")>-1?"&mode=list":"?mode=list",a=a.replace("search=","s="),c.prop("href",a)}).on("route:reset",function(){b.val("").trigger("input")})},createStates:function(){var a=this.options;this.options.states||this.states.add([new f({library:wp.media.query(a.library),multiple:a.multiple,title:a.title,content:"browse",toolbar:"select",contentUserSetting:!1,filterable:"all",autoSelect:!1})])},bindRegionModeHandlers:function(){this.on("content:create:browse",this.browseContent,this),this.on("edit:attachment",this.openEditAttachmentModal,this),this.on("select:activate",this.bindKeydown,this),this.on("select:deactivate",this.unbindKeydown,this)},handleKeydown:function(a){27===a.which&&(a.preventDefault(),this.deactivateMode("select").activateMode("edit"))},bindKeydown:function(){this.$body.on("keydown.select",_.bind(this.handleKeydown,this))},unbindKeydown:function(){this.$body.off("keydown.select")},fixPosition:function(){var a,b;this.isModeActive("select")&&(a=this.$(".attachments-browser"),b=a.find(".media-toolbar"),a.offset().top+16