![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
Changeset 42415
- Timestamp:
- 12/21/2017 02:26:17 PM (9 years ago)
- Location:
- trunk/src/wp-includes/js
- Files:
-
- 2 edited
-
media-views.js (modified) (20 diffs)
-
media/views/attachments.js (modified) (20 diffs)
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-includes/js/media-views.js
r42411 r42415 6621 6621 Attachments; 6622 6622 6623 /**6624 * wp.media.view.Attachments6625 *6626 * @memberOf wp.media.view6627 *6628 * @class6629 * @augments wp.media.View6630 * @augments wp.Backbone.View6631 * @augments Backbone.View6632 */6633 6623 Attachments = View.extend(/** @lends wp.media.view.Attachments.prototype */{ 6634 6624 tagName: 'ul', … … 6639 6629 }, 6640 6630 6631 /** 6632 * Represents the overview of attachments in the Media Library. 6633 * 6634 * The constructor binds events to the collection this view represents when 6635 * adding or removing attachments or resetting the entire collection. 6636 * 6637 * @since 3.5.0 6638 * 6639 * @constructs 6640 * @memberof wp.media.view 6641 * 6642 * @augments wp.media.View 6643 * 6644 * @listens collection:add 6645 * @listens collection:remove 6646 * @listens collection:reset 6647 * @listens controller:library:selection:add 6648 * @listens scrollElement:scroll 6649 * @listens this:ready 6650 * @listens controller:open 6651 */ 6641 6652 initialize: function() { 6642 6653 this.el.id = _.uniqueId('__attachments-view-'); 6643 6654 6655 /** 6656 * @param refreshSensitivity The time in milliseconds to throttle the scroll 6657 * handler. 6658 * @param refreshThreshold The amount of pixels that should be scrolled before 6659 * loading more attachments from the server. 6660 * @param AttachmentView The view class to be used for models in the 6661 * collection. 6662 * @param sortable A jQuery sortable options object 6663 * ( http://api.jqueryui.com/sortable/ ). 6664 * @param resize A boolean indicating whether or not to listen to 6665 * resize events. 6666 * @param idealColumnWidth The width in pixels which a column should have when 6667 * calculating the total number of columns. 6668 */ 6644 6669 _.defaults( this.options, { 6645 6670 refreshSensitivity: wp.media.isTouchDevice ? 300 : 200, … … 6661 6686 }, this ); 6662 6687 6688 /* 6689 * Find the view to be removed, delete it and call the remove function to clear 6690 * any set event handlers. 6691 */ 6663 6692 this.collection.on( 'remove', function( attachment ) { 6664 6693 var view = this._viewsByCid[ attachment.cid ]; … … 6688 6717 this.controller.on( 'open', this.setColumns ); 6689 6718 6690 // Call this.setColumns() after this view has been rendered in the DOM so 6691 // attachments get proper width applied. 6719 /* 6720 * Call this.setColumns() after this view has been rendered in the 6721 * DOM so attachments get proper width applied. 6722 */ 6692 6723 _.defer( this.setColumns, this ); 6693 6724 } 6694 6725 }, 6695 6726 6727 /** 6728 * Listens to the resizeEvent on the window. 6729 * 6730 * Adjusts the amount of columns accordingly. First removes any existing event 6731 * handlers to prevent duplicate listeners. 6732 * 6733 * @since 4.0.0 6734 * 6735 * @listens window:resize 6736 * 6737 * @returns {void} 6738 */ 6696 6739 bindEvents: function() { 6697 6740 this.$window.off( this.resizeEvent ).on( this.resizeEvent, _.debounce( this.setColumns, 50 ) ); 6698 6741 }, 6699 6742 6743 /** 6744 * Focuses the first item in the collection. 6745 * 6746 * @since 4.0.0 6747 * 6748 * @returns {void} 6749 */ 6700 6750 attachmentFocus: function() { 6701 6751 this.$( 'li:first' ).focus(); 6702 6752 }, 6703 6753 6754 /** 6755 * Restores focus to the selected item in the collection. 6756 * 6757 * @since 4.0.0 6758 * 6759 * @returns {void} 6760 */ 6704 6761 restoreFocus: function() { 6705 6762 this.$( 'li.selected:first' ).focus(); 6706 6763 }, 6707 6764 6765 /** 6766 * Handles events for arrow key presses. 6767 * 6768 * Focuses the attachment in the direction of the used arrow key if it exists. 6769 * 6770 * @since 4.0.0 6771 * 6772 * @param {KeyboardEvent} event The keyboard event that triggered this function. 6773 * 6774 * @returns {void} 6775 */ 6708 6776 arrowEvent: function( event ) { 6709 6777 var attachments = this.$el.children( 'li' ), … … 6716 6784 } 6717 6785 6718 // Left arrow 6786 // Left arrow = 37. 6719 6787 if ( 37 === event.keyCode ) { 6720 6788 if ( 0 === index ) { … … 6724 6792 } 6725 6793 6726 // Up arrow 6794 // Up arrow = 38. 6727 6795 if ( 38 === event.keyCode ) { 6728 6796 if ( 1 === row ) { … … 6732 6800 } 6733 6801 6734 // Right arrow 6802 // Right arrow = 39. 6735 6803 if ( 39 === event.keyCode ) { 6736 6804 if ( attachments.length === index ) { … … 6740 6808 } 6741 6809 6742 // Down arrow 6810 // Down arrow = 40. 6743 6811 if ( 40 === event.keyCode ) { 6744 6812 if ( Math.ceil( attachments.length / perRow ) === row ) { … … 6749 6817 }, 6750 6818 6819 /** 6820 * Clears any set event handlers. 6821 * 6822 * @since 3.5.0 6823 * 6824 * @returns {void} 6825 */ 6751 6826 dispose: function() { 6752 6827 this.collection.props.off( null, null, this ); … … 6755 6830 } 6756 6831 6757 /** 6758 * call 'dispose' directly on the parent class 6759 */ 6832 // Call 'dispose' directly on the parent class. 6760 6833 View.prototype.dispose.apply( this, arguments ); 6761 6834 }, 6762 6835 6836 /** 6837 * Calculates the amount of columns. 6838 * 6839 * Calculates the amount of columns and sets it on the data-columns attribute 6840 * of .media-frame-content. 6841 * 6842 * @since 4.0.0 6843 * 6844 * @returns {void} 6845 */ 6763 6846 setColumns: function() { 6764 6847 var prev = this.columns, … … 6774 6857 }, 6775 6858 6859 /** 6860 * Initializes jQuery sortable on the attachment list. 6861 * 6862 * Fails gracefully if jQuery sortable doesn't exist or isn't passed in the 6863 * options. 6864 * 6865 * @since 3.5.0 6866 * 6867 * @fires collection:reset 6868 * 6869 * @returns {void} 6870 */ 6776 6871 initSortable: function() { 6777 6872 var collection = this.collection; … … 6785 6880 disabled: !! collection.comparator, 6786 6881 6787 // Change the position of the attachment as soon as the 6788 // mouse pointer overlaps a thumbnail. 6882 /* 6883 * Change the position of the attachment as soon as the mouse pointer overlaps a 6884 * thumbnail. 6885 */ 6789 6886 tolerance: 'pointer', 6790 6887 … … 6794 6891 }, 6795 6892 6796 // Update the model's index in the collection. 6797 // Do so silently, as the view is already accurate. 6893 /* 6894 * Update the model's index in the collection. Do so silently, as the view 6895 * is already accurate. 6896 */ 6798 6897 update: function( event, ui ) { 6799 6898 var model = collection.at( ui.item.data('sortableIndexStart') ), … … 6819 6918 collection.trigger( 'reset', collection ); 6820 6919 6821 // If the collection is sorted by menu order, 6822 // update the menu order. 6920 // If the collection is sorted by menu order, update the menu order. 6823 6921 collection.saveMenuOrder(); 6824 6922 } 6825 6923 }, this.options.sortable ) ); 6826 6924 6827 // If the `orderby` property is changed on the `collection`, 6828 // check to see if we have a `comparator`. If so, disable sorting. 6925 /* 6926 * If the `orderby` property is changed on the `collection`, check to see if we 6927 * have a `comparator`. If so, disable sorting. 6928 */ 6829 6929 collection.props.on( 'change:orderby', function() { 6830 6930 this.$el.sortable( 'option', 'disabled', !! collection.comparator ); … … 6835 6935 }, 6836 6936 6937 /** 6938 * Disables jQuery sortable if collection has a comparator or collection.orderby 6939 * equals menuOrder. 6940 * 6941 * @since 3.5.0 6942 * 6943 * @returns {void} 6944 */ 6837 6945 refreshSortable: function() { 6838 6946 if ( ! this.options.sortable || ! $.fn.sortable ) { … … 6840 6948 } 6841 6949 6842 // If the `collection` has a `comparator`, disable sorting.6843 6950 var collection = this.collection, 6844 6951 orderby = collection.props.get('orderby'), … … 6849 6956 6850 6957 /** 6958 * Creates a new view for an attachment and adds it to _viewsByCid. 6959 * 6960 * @since 3.5.0 6961 * 6851 6962 * @param {wp.media.model.Attachment} attachment 6852 * @returns {wp.media.View} 6963 * 6964 * @returns {wp.media.View} The created view. 6853 6965 */ 6854 6966 createAttachmentView: function( attachment ) { … … 6863 6975 }, 6864 6976 6977 /** 6978 * Prepares view for display. 6979 * 6980 * Creates views for every attachment in collection if the collection is not 6981 * empty, otherwise clears all views and loads more attachments. 6982 * 6983 * @since 3.5.0 6984 * 6985 * @returns {void} 6986 */ 6865 6987 prepare: function() { 6866 // Create all of the Attachment views, and replace6867 // the list in a single DOM operation.6868 6988 if ( this.collection.length ) { 6869 6989 this.views.set( this.collection.map( this.createAttachmentView, this ) ); 6870 6871 // If there are no elements, clear the views and load some.6872 6990 } else { 6873 6991 this.views.unset(); … … 6876 6994 }, 6877 6995 6996 /** 6997 * Triggers the scroll function to check if we should query for additional 6998 * attachments right away. 6999 * 7000 * @since 3.5.0 7001 * 7002 * @returns {void} 7003 */ 6878 7004 ready: function() { 6879 // Trigger the scroll event to check if we're within the6880 // threshold to query for additional attachments.6881 7005 this.scroll(); 6882 7006 }, 6883 7007 7008 /** 7009 * Handles scroll events. 7010 * 7011 * Shows the spinner if we're close to the bottom. Loads more attachments from 7012 * server if we're {refreshThreshold} times away from the bottom. 7013 * 7014 * @since 3.5.0 7015 * 7016 * @returns {void} 7017 */ 6884 7018 scroll: function() { 6885 7019 var view = this, … … 6888 7022 toolbar; 6889 7023 6890 // The scroll event occurs on the document, but the element 6891 // that should be checked is the document body. 7024 /* 7025 * The scroll event occurs on the document, but the element that should be 7026 * checked is the document body. 7027 */ 6892 7028 if ( el === document ) { 6893 7029 el = document.body; -
trunk/src/wp-includes/js/media/views/attachments.js
r41351 r42415 3 3 Attachments; 4 4 5 /**6 * wp.media.view.Attachments7 *8 * @memberOf wp.media.view9 *10 * @class11 * @augments wp.media.View12 * @augments wp.Backbone.View13 * @augments Backbone.View14 */15 5 Attachments = View.extend(/** @lends wp.media.view.Attachments.prototype */{ 16 6 tagName: 'ul', … … 21 11 }, 22 12 13 /** 14 * Represents the overview of attachments in the Media Library. 15 * 16 * The constructor binds events to the collection this view represents when 17 * adding or removing attachments or resetting the entire collection. 18 * 19 * @since 3.5.0 20 * 21 * @constructs 22 * @memberof wp.media.view 23 * 24 * @augments wp.media.View 25 * 26 * @listens collection:add 27 * @listens collection:remove 28 * @listens collection:reset 29 * @listens controller:library:selection:add 30 * @listens scrollElement:scroll 31 * @listens this:ready 32 * @listens controller:open 33 */ 23 34 initialize: function() { 24 35 this.el.id = _.uniqueId('__attachments-view-'); 25 36 37 /** 38 * @param refreshSensitivity The time in milliseconds to throttle the scroll 39 * handler. 40 * @param refreshThreshold The amount of pixels that should be scrolled before 41 * loading more attachments from the server. 42 * @param AttachmentView The view class to be used for models in the 43 * collection. 44 * @param sortable A jQuery sortable options object 45 * ( http://api.jqueryui.com/sortable/ ). 46 * @param resize A boolean indicating whether or not to listen to 47 * resize events. 48 * @param idealColumnWidth The width in pixels which a column should have when 49 * calculating the total number of columns. 50 */ 26 51 _.defaults( this.options, { 27 52 refreshSensitivity: wp.media.isTouchDevice ? 300 : 200, … … 43 68 }, this ); 44 69 70 /* 71 * Find the view to be removed, delete it and call the remove function to clear 72 * any set event handlers. 73 */ 45 74 this.collection.on( 'remove', function( attachment ) { 46 75 var view = this._viewsByCid[ attachment.cid ]; … … 70 99 this.controller.on( 'open', this.setColumns ); 71 100 72 // Call this.setColumns() after this view has been rendered in the DOM so 73 // attachments get proper width applied. 101 /* 102 * Call this.setColumns() after this view has been rendered in the 103 * DOM so attachments get proper width applied. 104 */ 74 105 _.defer( this.setColumns, this ); 75 106 } 76 107 }, 77 108 109 /** 110 * Listens to the resizeEvent on the window. 111 * 112 * Adjusts the amount of columns accordingly. First removes any existing event 113 * handlers to prevent duplicate listeners. 114 * 115 * @since 4.0.0 116 * 117 * @listens window:resize 118 * 119 * @returns {void} 120 */ 78 121 bindEvents: function() { 79 122 this.$window.off( this.resizeEvent ).on( this.resizeEvent, _.debounce( this.setColumns, 50 ) ); 80 123 }, 81 124 125 /** 126 * Focuses the first item in the collection. 127 * 128 * @since 4.0.0 129 * 130 * @returns {void} 131 */ 82 132 attachmentFocus: function() { 83 133 this.$( 'li:first' ).focus(); 84 134 }, 85 135 136 /** 137 * Restores focus to the selected item in the collection. 138 * 139 * @since 4.0.0 140 * 141 * @returns {void} 142 */ 86 143 restoreFocus: function() { 87 144 this.$( 'li.selected:first' ).focus(); 88 145 }, 89 146 147 /** 148 * Handles events for arrow key presses. 149 * 150 * Focuses the attachment in the direction of the used arrow key if it exists. 151 * 152 * @since 4.0.0 153 * 154 * @param {KeyboardEvent} event The keyboard event that triggered this function. 155 * 156 * @returns {void} 157 */ 90 158 arrowEvent: function( event ) { 91 159 var attachments = this.$el.children( 'li' ), … … 98 166 } 99 167 100 // Left arrow 168 // Left arrow = 37. 101 169 if ( 37 === event.keyCode ) { 102 170 if ( 0 === index ) { … … 106 174 } 107 175 108 // Up arrow 176 // Up arrow = 38. 109 177 if ( 38 === event.keyCode ) { 110 178 if ( 1 === row ) { … … 114 182 } 115 183 116 // Right arrow 184 // Right arrow = 39. 117 185 if ( 39 === event.keyCode ) { 118 186 if ( attachments.length === index ) { … … 122 190 } 123 191 124 // Down arrow 192 // Down arrow = 40. 125 193 if ( 40 === event.keyCode ) { 126 194 if ( Math.ceil( attachments.length / perRow ) === row ) { … … 131 199 }, 132 200 201 /** 202 * Clears any set event handlers. 203 * 204 * @since 3.5.0 205 * 206 * @returns {void} 207 */ 133 208 dispose: function() { 134 209 this.collection.props.off( null, null, this ); … … 137 212 } 138 213 139 /** 140 * call 'dispose' directly on the parent class 141 */ 214 // Call 'dispose' directly on the parent class. 142 215 View.prototype.dispose.apply( this, arguments ); 143 216 }, 144 217 218 /** 219 * Calculates the amount of columns. 220 * 221 * Calculates the amount of columns and sets it on the data-columns attribute 222 * of .media-frame-content. 223 * 224 * @since 4.0.0 225 * 226 * @returns {void} 227 */ 145 228 setColumns: function() { 146 229 var prev = this.columns, … … 156 239 }, 157 240 241 /** 242 * Initializes jQuery sortable on the attachment list. 243 * 244 * Fails gracefully if jQuery sortable doesn't exist or isn't passed in the 245 * options. 246 * 247 * @since 3.5.0 248 * 249 * @fires collection:reset 250 * 251 * @returns {void} 252 */ 158 253 initSortable: function() { 159 254 var collection = this.collection; … … 167 262 disabled: !! collection.comparator, 168 263 169 // Change the position of the attachment as soon as the 170 // mouse pointer overlaps a thumbnail. 264 /* 265 * Change the position of the attachment as soon as the mouse pointer overlaps a 266 * thumbnail. 267 */ 171 268 tolerance: 'pointer', 172 269 … … 176 273 }, 177 274 178 // Update the model's index in the collection. 179 // Do so silently, as the view is already accurate. 275 /* 276 * Update the model's index in the collection. Do so silently, as the view 277 * is already accurate. 278 */ 180 279 update: function( event, ui ) { 181 280 var model = collection.at( ui.item.data('sortableIndexStart') ), … … 201 300 collection.trigger( 'reset', collection ); 202 301 203 // If the collection is sorted by menu order, 204 // update the menu order. 302 // If the collection is sorted by menu order, update the menu order. 205 303 collection.saveMenuOrder(); 206 304 } 207 305 }, this.options.sortable ) ); 208 306 209 // If the `orderby` property is changed on the `collection`, 210 // check to see if we have a `comparator`. If so, disable sorting. 307 /* 308 * If the `orderby` property is changed on the `collection`, check to see if we 309 * have a `comparator`. If so, disable sorting. 310 */ 211 311 collection.props.on( 'change:orderby', function() { 212 312 this.$el.sortable( 'option', 'disabled', !! collection.comparator ); … … 217 317 }, 218 318 319 /** 320 * Disables jQuery sortable if collection has a comparator or collection.orderby 321 * equals menuOrder. 322 * 323 * @since 3.5.0 324 * 325 * @returns {void} 326 */ 219 327 refreshSortable: function() { 220 328 if ( ! this.options.sortable || ! $.fn.sortable ) { … … 222 330 } 223 331 224 // If the `collection` has a `comparator`, disable sorting.225 332 var collection = this.collection, 226 333 orderby = collection.props.get('orderby'), … … 231 338 232 339 /** 340 * Creates a new view for an attachment and adds it to _viewsByCid. 341 * 342 * @since 3.5.0 343 * 233 344 * @param {wp.media.model.Attachment} attachment 234 * @returns {wp.media.View} 345 * 346 * @returns {wp.media.View} The created view. 235 347 */ 236 348 createAttachmentView: function( attachment ) { … … 245 357 }, 246 358 359 /** 360 * Prepares view for display. 361 * 362 * Creates views for every attachment in collection if the collection is not 363 * empty, otherwise clears all views and loads more attachments. 364 * 365 * @since 3.5.0 366 * 367 * @returns {void} 368 */ 247 369 prepare: function() { 248 // Create all of the Attachment views, and replace249 // the list in a single DOM operation.250 370 if ( this.collection.length ) { 251 371 this.views.set( this.collection.map( this.createAttachmentView, this ) ); 252 253 // If there are no elements, clear the views and load some.254 372 } else { 255 373 this.views.unset(); … … 258 376 }, 259 377 378 /** 379 * Triggers the scroll function to check if we should query for additional 380 * attachments right away. 381 * 382 * @since 3.5.0 383 * 384 * @returns {void} 385 */ 260 386 ready: function() { 261 // Trigger the scroll event to check if we're within the262 // threshold to query for additional attachments.263 387 this.scroll(); 264 388 }, 265 389 390 /** 391 * Handles scroll events. 392 * 393 * Shows the spinner if we're close to the bottom. Loads more attachments from 394 * server if we're {refreshThreshold} times away from the bottom. 395 * 396 * @since 3.5.0 397 * 398 * @returns {void} 399 */ 266 400 scroll: function() { 267 401 var view = this, … … 270 404 toolbar; 271 405 272 // The scroll event occurs on the document, but the element 273 // that should be checked is the document body. 406 /* 407 * The scroll event occurs on the document, but the element that should be 408 * checked is the document body. 409 */ 274 410 if ( el === document ) { 275 411 el = document.body;
Note:
See TracChangeset
for help on using the changeset viewer.
