Media: Add a settings dialog to the Media Library toolbar. #12932
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,194 @@ | ||
| var View = wp.media.View, | ||
| settings = wp.media.view.settings, | ||
| $ = jQuery, | ||
| __ = wp.i18n.__, | ||
| LibrarySettings; | ||
|
|
||
| /** | ||
| * wp.media.view.LibrarySettings | ||
| * | ||
| * A toolbar control opening a modal dialog with the personal options for the | ||
| * Media Library. | ||
| * | ||
| * @since 7.1.0 | ||
|
Member
There was a problem hiding this comment. Considering the 7.1 branch is only for bug fixes at this point, I doubt if this will make it. Should we consider it for 7.2?
Contributor
Author
There was a problem hiding this comment. This will need to be agreed upon and decided among the release leads. |
||
| * | ||
| * @memberOf wp.media.view | ||
| * | ||
| * @class | ||
| * @augments wp.media.View | ||
| * @augments wp.Backbone.View | ||
| * @augments Backbone.View | ||
| */ | ||
| LibrarySettings = View.extend(/** @lends wp.media.view.LibrarySettings.prototype */{ | ||
| tagName: 'button', | ||
| className: 'button button-compact media-library-settings__toggle', | ||
| template: wp.template( 'media-library-settings-toggle' ), | ||
|
|
||
| attributes: { | ||
| type: 'button', | ||
| 'aria-haspopup': 'dialog' | ||
| }, | ||
|
|
||
| events: { | ||
| 'click': 'open' | ||
| }, | ||
|
|
||
| /** | ||
| * Whether a request is in progress. | ||
| * | ||
| * @type {boolean} | ||
| */ | ||
| isSaving: false, | ||
|
|
||
| initialize: function() { | ||
| // Several media frames can be attached at once, so IDs are per instance. | ||
| this.uid = _.uniqueId( 'media-library-settings-' ); | ||
| }, | ||
|
|
||
| prepare: function() { | ||
| return { | ||
| titleId: this.uid + '-title', | ||
| infiniteScrollingId: this.uid + '-infinite-scrolling' | ||
| }; | ||
| }, | ||
|
|
||
| /** | ||
| * Removes the dialog along with the view. | ||
| * | ||
| * @return {wp.media.view.LibrarySettings} Returns itself to allow chaining. | ||
| */ | ||
| dispose: function() { | ||
| if ( this.dialog ) { | ||
| $( this.dialog ).remove(); | ||
| } | ||
|
|
||
| return View.prototype.dispose.apply( this, arguments ); | ||
| }, | ||
|
|
||
| /** | ||
| * Inserts the dialog into the frame. | ||
| * | ||
| * @return {void} | ||
| */ | ||
| createDialog: function() { | ||
| var $dialog = $( wp.template( 'media-library-settings-dialog' )( this.prepare() ) ); | ||
|
|
||
| this.controller.$el.append( $dialog ); | ||
|
|
||
| this.dialog = $dialog[0]; | ||
| this.status = $dialog.find( '.media-library-settings__status' )[0]; | ||
| this.checkbox = $dialog.find( '.media-library-settings__checkbox' )[0]; | ||
|
|
||
| $dialog.on( 'change', '.media-library-settings__checkbox', _.bind( this.updateInfiniteScrolling, this ) ); | ||
|
|
||
| /* | ||
| * In the media modal, `wp.media.view.Modal` closes on Escape and | ||
| * `wp.media.view.FocusManager` constrains Tab. Neither must run while the | ||
| * dialog is open: it handles both itself, and the rest of the modal is inert. | ||
| */ | ||
| $dialog.on( 'keydown', function( event ) { | ||
| event.stopPropagation(); | ||
| } ); | ||
| }, | ||
|
|
||
| /** | ||
| * Opens the dialog. | ||
| * | ||
| * @return {void} | ||
| */ | ||
| open: function() { | ||
| if ( ! this.dialog ) { | ||
| this.createDialog(); | ||
| } | ||
|
|
||
| if ( ! this.isSaving ) { | ||
| this.checkbox.checked = !! settings.librarySettings.infiniteScrolling; | ||
| this.setStatus( '' ); | ||
| } | ||
|
|
||
| this.dialog.showModal(); | ||
| }, | ||
|
|
||
| /** | ||
| * Whether a `media_library_infinite_scrolling` filter callback overrides the | ||
| * personal option. | ||
| * | ||
| * @type {boolean} | ||
| */ | ||
| isFiltered: !! settings.librarySettings && !! settings.librarySettings.isFiltered, | ||
|
|
||
| /** | ||
| * Saves the "Infinite scrolling" personal option for the current user. | ||
| * | ||
| * @return {void} | ||
| */ | ||
| updateInfiniteScrolling: function() { | ||
| if ( ! this.isSaving ) { | ||
| this.save(); | ||
| } | ||
| }, | ||
|
|
||
| /** | ||
| * Sends the state of the checkbox to the server, then whatever it was toggled | ||
| * to in the meantime. | ||
| * | ||
| * @return {void} | ||
| */ | ||
| save: function() { | ||
| var view = this, | ||
| enabled = this.checkbox.checked; | ||
|
|
||
| this.isSaving = true; | ||
|
|
||
| this.setStatus( __( 'Saving…' ) ); | ||
|
|
||
| wp.ajax.post( 'set-media-library-settings', { | ||
|
Member
There was a problem hiding this comment. Multiple concurrent saves can result in saving the wrong value. Might need some throttling or disabling if a request is in progress here. |
||
| _ajax_nonce: settings.librarySettings.nonce, | ||
| infinite_scrolling: enabled ? 'true' : 'false' | ||
| } ).done( function() { | ||
| view.isSaving = false; | ||
|
|
||
| settings.librarySettings.infiniteScrolling = enabled ? 1 : 0; | ||
|
|
||
| if ( enabled !== view.checkbox.checked ) { | ||
| view.save(); | ||
| return; | ||
| } | ||
|
|
||
| /* | ||
| * A filter callback takes precedence over the preference, so the Media | ||
| * Library keeps the filtered behavior. Otherwise the browser this toggle | ||
| * belongs to is updated without a reload. | ||
| */ | ||
| if ( ! view.isFiltered ) { | ||
| settings.infiniteScrolling = enabled ? 1 : 0; | ||
|
|
||
| view.controller.trigger( 'library:infinite-scrolling', enabled ); | ||
| } | ||
|
|
||
| view.setStatus( enabled ? | ||
| __( 'Infinite scrolling is on.' ) : | ||
| __( 'Infinite scrolling is off.' ) | ||
| ); | ||
|
Member
There was a problem hiding this comment. Is this yet another place that might be out of sync with
Contributor
Author
There was a problem hiding this comment. I am considering this, and I have two proposals.
Contributor
There was a problem hiding this comment. To me, the first option is more clear. |
||
| } ).fail( function( response ) { | ||
| view.isSaving = false; | ||
|
|
||
| // Put the checkbox back in sync with the stored value. | ||
| view.checkbox.checked = !! settings.librarySettings.infiniteScrolling; | ||
|
|
||
| view.setStatus( ( response && response.message ) || __( 'The setting could not be saved.' ) ); | ||
| } ); | ||
| }, | ||
|
|
||
| /** | ||
| * Updates the message below the controls. | ||
| * | ||
| * @param {string} message The message to display. An empty string clears it. | ||
| * @return {void} | ||
| */ | ||
| setStatus: function( message ) { | ||
| this.status.textContent = message; | ||
| } | ||
| }); | ||
|
|
||
| module.exports = LibrarySettings; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Noting that
this.scroll()never checksthis.options.infiniteScrollingso if there's already a queued throttled callback or pendingcollection.more(), they might callscroll()again, which will run unchecked. We might want to add athis.options.infiniteScrollingcheck toscroll()itself.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed in 431a1b9