Ticket #24716: 24716.37.diff
File 24716.37.diff, 15.1 KB (added by , 10 years ago) |
---|
-
src/wp-includes/css/media-views.css
diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css index 8a5990e..a565f45 100644
a b 228 228 .media-toolbar-secondary > .media-button, 229 229 .media-toolbar-secondary > .media-button-group { 230 230 margin-right: 10px; 231 float: left;232 231 margin-top: 15px; 233 232 } 234 233 … … 996 995 bottom: 0; 997 996 overflow: auto; 998 997 outline: none; 998 -webkit-transition: 1s ease-in-out; 999 -moz-transition: 1s ease-in-out; 1000 -o-transition: 1s ease-in-out; 1001 transition: 1s ease-in-out; 1002 } 1003 1004 .attachments-browser .uploader-inline:not(.hidden) + .attachments { 1005 -webkit-transform: translateY( 300px ); 1006 -ms-transform: translateY( 300px ); 1007 transform: translateY( 300px ); 1008 } 1009 1010 .attachments-browser .uploader-inline.hidden { 1011 display: block; 1012 -webkit-transform: translateY( -100% ); 1013 -ms-transform: translateY( -100% ); 1014 transform: translateY( -100% ); 1015 } 1016 1017 .attachments-browser .uploader-inline-content { 1018 top: 0; 999 1019 } 1000 1020 1001 1021 .inline-toolbar { … … video#inline-media-node { 1081 1101 left: 0; 1082 1102 } 1083 1103 1084 .attachments-browser.hide-sidebar .attachments { 1104 .attachments-browser.hide-sidebar .attachments, 1105 .attachments-browser.hide-sidebar .uploader-inline { 1085 1106 right: 0; 1086 1107 margin-right: 0; 1087 1108 } … … video#inline-media-node { 2657 2678 left: 0; 2658 2679 } 2659 2680 2681 .edit-attachment-frame .media-frame-content { 2682 border-bottom: none; 2683 bottom: 0; 2684 } 2685 2660 2686 /* Hiding this for the moment instead of removing it from the template. */ 2661 2687 .edit-attachment-frame h3 { 2662 2688 display: none; -
src/wp-includes/js/media-grid.js
diff --git a/src/wp-includes/js/media-grid.js b/src/wp-includes/js/media-grid.js index 0ebbc67..a2814ae 100644
a b 25 25 menu: false, 26 26 router: 'edit-metadata', 27 27 content: 'edit-metadata', 28 toolbar: 'toolbar',29 28 30 29 url: '' 31 30 }, … … 34 33 media.controller._State.prototype.initialize.apply( this, arguments ); 35 34 }, 36 35 37 activate: function() {38 this.listenTo( this.frame, 'toolbar:render:edit-image', this.toolbar );39 },40 41 36 _postActivate: function() { 42 37 this._content(); 43 38 this._router(); … … 47 42 this.stopListening( this.frame ); 48 43 }, 49 44 50 toolbar: function() {51 var frame = this.frame,52 lastState = frame.lastState(),53 previous = lastState && lastState.id;54 55 frame.toolbar.set( new media.view.Toolbar({56 controller: frame,57 items: {58 back: {59 style: 'primary',60 text: l10n.back,61 priority: 20,62 click: function() {63 if ( previous ) {64 frame.setState( previous );65 } else {66 frame.close();67 }68 }69 }70 }71 }) );72 },73 74 45 /** 75 46 * @access private 76 47 */ … … 125 96 modal: false, 126 97 selection: [], 127 98 library: {}, 128 multiple: false,99 multiple: 'add', 129 100 state: 'library', 130 101 uploader: true, 131 102 mode: [ 'grid', 'edit' ] 132 103 }); 133 104 105 $(document).on( 'click', '.add-new-h2', _.bind( this.addNewClickHandler, this ) ); 134 106 // Ensure core and media grid view UI is enabled. 135 107 this.$el.addClass('wp-core-ui media-grid-view'); 136 108 … … 192 164 return; 193 165 } 194 166 167 var libraryState = new media.controller.Library({ 168 library: media.query( options.library ), 169 multiple: options.multiple, 170 title: options.title, 171 priority: 20, 172 toolbar: false, 173 router: false, 174 content: 'browse', 175 filterable: 'mime-types' 176 }); 177 178 libraryState._renderTitle = function( view ) { 179 var text = this.get('title') || ''; 180 view.$el.addClass( 'wrap' ); 181 text += '<a class="add-new-h2">Add New</a>'; 182 view.$el.html( text ); 183 }; 195 184 // Add the default states. 196 185 this.states.add([ 197 new media.controller.Library({ 198 library: media.query( options.library ), 199 multiple: options.multiple, 200 title: options.title, 201 priority: 20, 202 toolbar: false, 203 router: false, 204 content: 'browse', 205 filterable: 'mime-types' 206 }) 186 libraryState 207 187 ]); 208 188 }, 209 189 … … 217 197 this.on( 'edit:attachment:previous', this.editPreviousAttachment, this ); 218 198 }, 219 199 200 addNewClickHandler: function() { 201 this.trigger( 'show:upload:attachment' ); 202 }, 203 220 204 editPreviousAttachment: function( currentModel ) { 221 205 var library = this.state().get('library'), 222 206 currentModelIndex = library.indexOf( currentModel ); … … 233 217 * Open the Edit Attachment modal. 234 218 */ 235 219 editAttachment: function( model ) { 236 var library = this.state().get('library'), hasPrevious, hasNext; 237 if ( library.indexOf( model ) > 0 ) { 238 hasPrevious = true; 239 } 240 else { 241 hasPrevious = false; 242 } 243 if ( library.indexOf( model ) < library.length - 1 ) { 244 hasNext = true; 245 } 246 else { 247 hasNext = false; 248 } 220 var library = this.state().get('library'); 249 221 250 new media.view.Frame.EditAttachment({ 251 hasPrevious: hasPrevious, 252 hasNext: hasNext, 253 model: model, 254 gridController: this 222 // Create a new EditAttachment frame, passing along the library and the attachment model. 223 this.editAttachmentFrame = new media.view.Frame.EditAttachment({ 224 library: library, 225 model: model 255 226 }); 227 228 // Listen to events on the edit attachment frame for triggering pagination callback handlers. 229 this.listenTo( this.editAttachmentFrame, 'edit:attachment:next', this.editNextAttachment ); 230 this.listenTo( this.editAttachmentFrame, 'edit:attachment:previous', this.editPreviousAttachment ); 256 231 }, 257 232 258 233 /** … … 363 338 this.on( 'router:render', this.browseRouter, this ); 364 339 } 365 340 341 this.options.hasPrevious = ( this.options.library.indexOf( this.options.model ) > 0 ) ? true : false; 342 this.options.hasNext = ( this.options.library.indexOf( this.options.model ) < this.options.library.length - 1 ) ? true : false; 343 366 344 // Initialize modal container view. 367 345 if ( this.options.modal ) { 368 346 this.modal = new media.view.Modal({ … … 471 449 if ( ! this.options.hasPrevious ) 472 450 return; 473 451 this.modal.close(); 474 this. options.gridController.trigger( 'edit:attachment:previous', this.model );452 this.trigger( 'edit:attachment:previous', this.model ); 475 453 }, 476 454 477 455 /** … … 481 459 if ( ! this.options.hasNext ) 482 460 return; 483 461 this.modal.close(); 484 this. options.gridController.trigger( 'edit:attachment:next', this.model );462 this.trigger( 'edit:attachment:next', this.model ); 485 463 } 486 487 464 }); 488 465 489 466 media.view.GridFieldOptions = media.View.extend({ … … 514 491 } 515 492 }); 516 493 494 media.view.BulkSelectionToggleButton = media.view.Button.extend({ 495 initialize: function() { 496 media.view.Button.prototype.initialize.apply( this, arguments ); 497 this.listenTo( this.controller, 'bulk-edit:activate bulk-edit:deactivate', _.bind( this.toggleBulkEditHandler, this ) ); 498 }, 499 500 click: function() { 501 var bulkEditActive = this.controller.activeModes.where( { id: 'bulk-edit' } ).length; 502 media.view.Button.prototype.click.apply( this, arguments ); 503 504 if ( bulkEditActive ) { 505 this.controller.deactivateMode( 'bulk-edit' ); 506 this.controller.activateMode( 'edit' ); 507 } else { 508 this.controller.deactivateMode( 'edit' ); 509 this.controller.activateMode( 'bulk-edit' ); 510 } 511 }, 512 513 toggleBulkEditHandler: function() { 514 var bulkEditActive = this.controller.activeModes.where( { id: 'bulk-edit' } ).length; 515 if ( bulkEditActive ) { 516 this.$el.addClass( 'button-primary' ); 517 } else { 518 this.$el.removeClass( 'button-primary' ); 519 this.controller.state().get('selection').reset(); 520 } 521 } 522 }); 523 524 media.view.BulkDeleteButton = media.view.Button.extend({ 525 initialize: function() { 526 media.view.Button.prototype.initialize.apply( this, arguments ); 527 this.$el.hide(); 528 this.listenTo( this.controller, 'bulk-edit:activate bulk-edit:deactivate', _.bind( this.visibility, this ) ); 529 }, 530 531 click: function() { 532 media.view.Button.prototype.click.apply( this, arguments ); 533 while (this.controller.state().get('selection').length > 0) { 534 this.controller.state().get('selection').at(0).destroy(); 535 } 536 }, 537 538 visibility: function() { 539 var bulkEditActive = this.controller.activeModes.where( { id: 'bulk-edit' } ).length; 540 if ( bulkEditActive ) { 541 this.$el.show(); 542 } else { 543 this.$el.hide(); 544 } 545 } 546 }); 547 517 548 }(jQuery, _, Backbone, wp)); 549 No newline at end of file -
src/wp-includes/js/media-views.js
diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js index 6bf147c..328f59a 100644
a b 665 665 } 666 666 667 667 if ( ! this.get('edge') ) { 668 this.set( 'edge', 1 20 );668 this.set( 'edge', 150 ); 669 669 } 670 670 671 671 if ( ! this.get('gutter') ) { … … 1785 1785 * @global wp.Uploader 1786 1786 */ 1787 1787 initialize: function() { 1788 1789 1788 media.view.Frame.prototype.initialize.apply( this, arguments ); 1790 1789 1791 1790 _.defaults( this.options, { 1792 1791 title: '', 1793 1792 modal: true, 1794 1793 uploader: true, 1795 mode: [ 'select']1794 mode: [ 'select' ] 1796 1795 }); 1797 1796 1798 1797 // Ensure core UI is enabled. … … 1808 1807 this.modal.content( this ); 1809 1808 } 1810 1809 1810 // Store active "modes" that the frame is in. Unrelated to region modes. 1811 this.activeModes = new Backbone.Collection(); 1812 this.activeModes.on( 'add remove reset', _.bind( this.triggerModeEvents, this ) ); 1813 1814 _.each( this.options.mode, function( mode ) { 1815 this.activeModes.add( new Backbone.Model( { id: mode } ) ); 1816 }, this ); 1817 1811 1818 // Force the uploader off if the upload limit has been exceeded or 1812 1819 // if the browser isn't supported. 1813 1820 if ( wp.Uploader.limitExceeded || ! wp.Uploader.browser.supported ) { … … 1972 1979 1973 1980 window.tb_remove = this._tb_remove; 1974 1981 delete this._tb_remove; 1982 }, 1983 1984 /** 1985 * Map activeMode collection events to the frame. 1986 */ 1987 triggerModeEvents: function( model, collection, options ) { 1988 var collectionEvent, 1989 modeEventMap = { 1990 add: 'activate', 1991 remove: 'deactivate' 1992 }, 1993 eventToTrigger; 1994 // Probably a better way to do this. 1995 _.each( options, function( value, key ) { 1996 if ( value ) { 1997 collectionEvent = key; 1998 } 1999 } ); 2000 2001 if ( ! _.has( modeEventMap, collectionEvent ) ) 2002 return; 2003 2004 eventToTrigger = model.get('id') + ':' + modeEventMap[collectionEvent]; 2005 this.trigger( eventToTrigger ); 2006 }, 2007 activateMode: function( mode ) { 2008 this.activeModes.add( [ { id: mode } ] ); 2009 this.trigger( mode + ':activate' ); 2010 }, 2011 deactivateMode: function( mode ) { 2012 // Bail if the mode isn't active. 2013 if ( ! this.activeModes.where( { id: mode } ).length ) { 2014 return; 2015 } 2016 this.activeModes.remove( this.activeModes.where( { id: mode } ) ); 2017 this.trigger( mode + ':deactivate' ); 1975 2018 } 1976 2019 }); 1977 2020 … … 4673 4716 } 4674 4717 4675 4718 // In the grid view, bubble up an edit:attachment event to the controller. 4676 if ( _.contains( this.controller.options.mode, 'grid' )) {4719 if ( this.controller.activeModes.where( { id: 'edit' } ).length ) { 4677 4720 this.controller.trigger( 'edit:attachment', this.model ); 4678 4721 return; 4679 4722 } … … 5081 5124 if ( this.options.resize ) { 5082 5125 $(window).on( 'resize.attachments', this._resizeCss ); 5083 5126 } 5084 this.css(); 5127 5128 // Call this.css() after this view has been rendered in the DOM so 5129 // attachments get proper width applied. 5130 _.defer( this.css, this ); 5085 5131 }, 5086 5132 5087 5133 dispose: function() { … … 5531 5577 AttachmentView: media.view.Attachment.Library 5532 5578 }); 5533 5579 5580 this.listenTo( this.controller, 'show:upload:attachment', _.bind( this.showUploader, this ) ); 5534 5581 this.createToolbar(); 5582 this.createUploader(); 5583 this.createAttachments(); 5535 5584 this.updateContent(); 5536 5585 if ( this.options.sidebar ) { 5537 5586 this.createSidebar(); … … 5568 5617 // Feels odd to bring the global media library switcher into the Attachment 5569 5618 // browser view. Is this a use case for doAction( 'add:toolbar-items:attachments-browser', this.toolbar ); 5570 5619 // which the controller can tap into and add this view? 5571 if ( _.contains( this.controller.options.mode, 'grid' )) {5620 if ( this.controller.activeModes.where( { id: 'grid' } ).length ) { 5572 5621 LibraryViewSwitcher = media.View.extend({ 5573 5622 className: 'view-switch media-grid-view-switch', 5574 5623 template: media.template( 'media-library-view-switcher') … … 5578 5627 priority: -90 5579 5628 }).render() ); 5580 5629 5630 this.toolbar.set( 'bulkSelectionToggleButton', new media.view.BulkSelectionToggleButton({ 5631 text: 'Bulk Edit', 5632 controller: this.controller, 5633 priority: -70 5634 }).render() ); 5635 5636 this.toolbar.set( 'BulkDeleteButton', new media.view.BulkDeleteButton({ 5637 text: 'Bulk Delete', 5638 controller: this.controller, 5639 priority: -69 5640 }).render() ); 5641 5581 5642 this.toolbar.set( 'gridFieldOptions', new media.view.GridFieldOptions({ 5582 5643 controller: this.controller, 5583 5644 priority: -50 … … 5635 5696 5636 5697 updateContent: function() { 5637 5698 var view = this; 5638 5639 if( ! this.attachments ) {5640 this.createAttachments();5641 }5642 5643 5699 if ( ! this.collection.length ) { 5644 5700 this.toolbar.get( 'spinner' ).show(); 5645 5701 this.collection.more().done(function() { 5646 5702 if ( ! view.collection.length ) { 5647 view.createUploader(); 5703 view.attachmentsNoResults.$el.removeClass( 'hidden' ); 5704 } else { 5705 view.attachmentsNoResults.$el.addClass( 'hidden' ); 5648 5706 } 5649 5707 view.toolbar.get( 'spinner' ).hide(); 5650 5708 }); 5651 5709 } else { 5710 this.attachmentsNoResults.$el.addClass( 'hidden' ); 5652 5711 view.toolbar.get( 'spinner' ).hide(); 5653 5712 } 5654 5713 }, 5655 5714 5656 removeContent: function() {5657 _.each(['attachments','uploader'], function( key ) {5658 if ( this[ key ] ) {5659 this[ key ].remove();5660 delete this[ key ];5661 }5662 }, this );5663 },5664 5665 5715 createUploader: function() { 5666 this.removeContent();5667 5668 5716 this.uploader = new media.view.UploaderInline({ 5669 5717 controller: this.controller, 5670 5718 status: false, 5671 5719 message: l10n.noItemsFound 5672 5720 }); 5673 5721 5722 this.uploader.$el.addClass( 'hidden' ); 5674 5723 this.views.add( this.uploader ); 5675 5724 }, 5676 5725 5677 createAttachments: function() { 5678 this.removeContent(); 5726 showUploader: function() { 5727 this.uploader.$el.removeClass( 'hidden' ); 5728 }, 5679 5729 5730 createAttachments: function() { 5680 5731 this.attachments = new media.view.Attachments({ 5681 5732 controller: this.controller, 5682 5733 collection: this.collection, … … 5690 5741 }); 5691 5742 5692 5743 this.views.add( this.attachments ); 5744 5745 this.attachmentsNoResults = new media.View({ 5746 controller: this.controller 5747 }); 5748 5749 this.attachmentsNoResults.$el.addClass( 'hidden' ); 5750 this.attachmentsNoResults.$el.html( 'No media found.' ); 5751 5752 this.views.add( this.attachmentsNoResults ); 5753 5754 5693 5755 }, 5694 5756 5695 5757 createSidebar: function() { -
src/wp-includes/media-template.php
diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php index 098a03a..8a72e1b 100644
a b function wp_print_media_templates() { 276 276 </div> 277 277 <div class="media-frame-router"></div> 278 278 <div class="media-frame-content"></div> 279 <div class="media-frame-toolbar"></div>280 279 </script> 281 280 282 281 <script type="text/html" id="tmpl-attachment-details-two-column">