Catrope has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/328676 )
Change subject: [WIP] RC filters: AJAX and pushState/popState
......................................................................
[WIP] RC filters: AJAX and pushState/popState
Clicks on the Show button now refresh the results list using AJAX
instead of submitting the form.
Also added pushState to update the URL, and popstate handling
to make the back button work.
Bug: T153949
Change-Id: I8c1ec557ccfe4b1d20aaaab3ef0d3182a1993f24
---
M resources/src/mediawiki.rcfilters/dm/mw.rcfilters.dm.FiltersViewModel.js
M resources/src/mediawiki.rcfilters/mw.rcfilters.Controller.js
M resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
3 files changed, 66 insertions(+), 30 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core
refs/changes/76/328676/1
diff --git
a/resources/src/mediawiki.rcfilters/dm/mw.rcfilters.dm.FiltersViewModel.js
b/resources/src/mediawiki.rcfilters/dm/mw.rcfilters.dm.FiltersViewModel.js
index 324d90b..e7ec170 100644
--- a/resources/src/mediawiki.rcfilters/dm/mw.rcfilters.dm.FiltersViewModel.js
+++ b/resources/src/mediawiki.rcfilters/dm/mw.rcfilters.dm.FiltersViewModel.js
@@ -419,7 +419,7 @@
// Mark the group if it has any items that are
selected
groupMap[ filterItem.getGroup() ].hasSelected =
(
groupMap[ filterItem.getGroup()
].hasSelected ||
- !!paramValue
+ !!Number( paramValue )
);
// Add the relevant filter into the group map
@@ -446,7 +446,7 @@
// Flip the definition between
the parameter
// state and the filter state
// This is what the
'toggleSelected' value of the filter is
- !params[ filterItem.getName() ]
:
+ !Number( params[
filterItem.getName() ] ) :
// Otherwise, there are no
selected items in the
// group, which means the state
is false
false;
diff --git a/resources/src/mediawiki.rcfilters/mw.rcfilters.Controller.js
b/resources/src/mediawiki.rcfilters/mw.rcfilters.Controller.js
index 61c06ce..fc28fd6 100644
--- a/resources/src/mediawiki.rcfilters/mw.rcfilters.Controller.js
+++ b/resources/src/mediawiki.rcfilters/mw.rcfilters.Controller.js
@@ -8,6 +8,8 @@
this.model = model;
// TODO: When we are ready, update the URL when a filter is
updated
+ // TODO should we do this on every itemUpdate, or only when the
user submits the form
+ // or takes some other explicit action like closing the
popup?
// this.model.connect( this, { itemUpdate: 'updateURL' } );
};
@@ -18,8 +20,14 @@
* Initialize the filter and parameter states
*/
mw.rcfilters.Controller.prototype.initialize = function () {
- var uri = new mw.Uri();
+ this.updateFromURL();
+ };
+ /**
+ * Update the model state based on the URL parameters.
+ */
+ mw.rcfilters.Controller.prototype.updateFromURL = function () {
+ var uri = new mw.Uri();
this.model.updateFilters(
// Translate the url params to filter select states
this.model.getParametersToFilters( uri.query )
@@ -50,7 +58,7 @@
uri.query = this.makeFiltersQuery();
// Update the URL itself
- window.history.pushState( uri.query, '', uri.toString() );
+ window.history.pushState( { tag: 'mw-rcfilters' }, '',
uri.toString() );
};
/**
diff --git a/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
b/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
index c87ce43..450dc55 100644
--- a/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
+++ b/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
@@ -11,7 +11,43 @@
init: function () {
var model = new mw.rcfilters.dm.FiltersViewModel(),
controller = new mw.rcfilters.Controller( model
),
- widget = new
mw.rcfilters.ui.FilterWrapperWidget( controller, model );
+ widget = new
mw.rcfilters.ui.FilterWrapperWidget( controller, model ),
+ $form = $( '.rcoptions form' ),
+ submittingPromise = null;
+
+ function updateResults( fromPopState ) {
+ var $submitButton = $form.find(
'input[type=submit]' ),
+ $changesList = $( '.mw-changeslist' ),
+ uri = new mw.Uri();
+ if ( submittingPromise ) {
+ // If a submission is already pending,
ignore this one
+ return;
+ }
+
+ $changesList.addClass(
'oo-ui-pendingElement-pending' );
+ $submitButton.prop( 'disabled', true );
+
+ // FIXME in theory this should use
controller.makeFiltersQuery() but its API
+ // is not very useful and it breaks non-boolean
params
+ uri.extend( model.getFiltersToParameters() );
+ submittingPromise = $.ajax( uri.toString(), {
contentType: 'html' } );
+ submittingPromise
+ .then( function ( html ) {
+ $changesList.empty().append(
+ $( $.parseHTML( html )
).find( '.mw-changeslist' ).first().contents()
+ );
+ // FIXME ideally this would use
controller.updateURL(); , but since it uses
+ // makeFiltersQuery() it also
breaks non-boolean params
+ if ( !fromPopState ) {
+ history.pushState( {
tag: 'mw-rcfilters' }, document.title, uri.toString() );
+ }
+ } )
+ .always( function () {
+ $changesList.removeClass(
'oo-ui-pendingElement-pending' );
+ $submitButton.prop( 'disabled',
false );
+ submittingPromise = null;
+ } );
+ }
model.toggleLoading( true );
model.initializeFilters( {
@@ -74,32 +110,24 @@
controller.initialize();
model.toggleLoading( false );
- $( '.rcoptions form' ).submit( function () {
- var $form = $( this );
-
- // Get current filter values
- $.each( model.getFiltersToParameters(),
function ( paramName, paramValue ) {
- var $existingInput = $form.find(
'input[name=' + paramName + ']' );
- // Check if the hidden input already
exists
- // This happens if the parameter was
already given
- // on load
- if ( $existingInput.length ) {
- // Update the value
- $existingInput.val( paramValue
);
- } else {
- // Append hidden fields with
filter values
- $form.append(
- $( '<input>' )
- .attr( 'type',
'hidden' )
- .attr( 'name',
paramName )
- .val(
paramValue )
- );
- }
- } );
-
- // Continue the submission process
- return true;
+ $form.submit( function () {
+ updateResults();
+ // Prevent native form submission
+ return false;
} );
+
+ window.addEventListener( 'popstate', function ( e ) {
+ if ( !e.state || e.state.tag !== 'mw-rcfilters'
) {
+ // Not our state, ignore
+ return;
+ }
+ controller.updateFromURL();
+ updateResults( true );
+ } );
+
+ // Replace the current state with one that's marked
with our tag, so that using the
+ // back button to navigate to the initial state works
+ history.replaceState( { tag: 'mw-rcfilters' },
document.title, location.href );
}
};
--
To view, visit https://gerrit.wikimedia.org/r/328676
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I8c1ec557ccfe4b1d20aaaab3ef0d3182a1993f24
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Catrope <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
