jenkins-bot has submitted this change and it was merged.
Change subject: Use InfiniteScroll for the CategoryOverlay
......................................................................
Use InfiniteScroll for the CategoryOverlay
Currently, the list of ctagories is fixed to 50. Even if 50 sounds
like a huge amount of categories, it is possible to have more than
that. Until now, the user was not able to see the other categories
after the first 50.
This change implements the use of InfiniteScroll to load the next
50 catgeories, after the user eached the end of the list of categories.
Change-Id: Ibe1e0db0307e7a9d89c356777b56fc0c7263360f
---
M extension.json
M resources/mobile.categories.overlays/CategoryGateway.js
M resources/mobile.categories.overlays/CategoryOverlay.hogan
M resources/mobile.categories.overlays/CategoryOverlay.js
A resources/mobile.categories.overlays/CategoryOverlayItem.hogan
5 files changed, 60 insertions(+), 43 deletions(-)
Approvals:
Jdlrobson: Looks good to me, approved
jenkins-bot: Verified
diff --git a/extension.json b/extension.json
index 5911ea4..c00c526 100644
--- a/extension.json
+++ b/extension.json
@@ -975,6 +975,7 @@
"mobile.search.api",
"mobile.search",
"mobile.editor.common",
+ "mobile.infiniteScroll",
"oojs-ui"
],
"scripts": [
@@ -988,6 +989,7 @@
],
"templates": {
"CategoryOverlay.hogan":
"resources/mobile.categories.overlays/CategoryOverlay.hogan",
+ "CategoryOverlayItem.hogan":
"resources/mobile.categories.overlays/CategoryOverlayItem.hogan",
"CategoryAddOverlay.hogan":
"resources/mobile.categories.overlays/CategoryAddOverlay.hogan",
"CategoryAddOverlayHeader.hogan":
"resources/mobile.categories.overlays/CategoryAddOverlayHeader.hogan"
},
diff --git a/resources/mobile.categories.overlays/CategoryGateway.js
b/resources/mobile.categories.overlays/CategoryGateway.js
index 49e38c2..2b16ba8 100644
--- a/resources/mobile.categories.overlays/CategoryGateway.js
+++ b/resources/mobile.categories.overlays/CategoryGateway.js
@@ -11,6 +11,8 @@
CategoryGateway.parent.apply( this, arguments );
}
prototype = {
+ continueParams: {},
+ canContinue: true,
/**
* @inheritdoc
*/
@@ -34,15 +36,29 @@
/**
* Returns the categories the title belongs to.
* @param {String} title Title of the current page (to add the
categories to)
- * @returns {jQuery.Deferred}
+ * @returns {jQuery.Deferred|Boolean} False, if no further
continuation is possible, jQuery.Deferred otherwise.
*/
getCategories: function ( title ) {
- return this.api.get( {
+ var self = this;
+
+ if ( this.canContinue === false ) {
+ return false;
+ }
+
+ return this.api.get( $.extend( {}, {
action: 'query',
prop: 'categories',
titles: title,
clprop: 'hidden',
- cllimit: 50 // FIXME: Replace with
InfiniteScroll
+ cllimit: 50
+ }, this.continueParams ) ).then( function ( data ) {
+ if ( data.hasOwnProperty( 'continue' ) ) {
+ self.continueParams = data.continue;
+ } else {
+ self.canContinue = false;
+ }
+
+ return data;
} );
}
};
diff --git a/resources/mobile.categories.overlays/CategoryOverlay.hogan
b/resources/mobile.categories.overlays/CategoryOverlay.hogan
index aef8cdb..8650c50 100644
--- a/resources/mobile.categories.overlays/CategoryOverlay.hogan
+++ b/resources/mobile.categories.overlays/CategoryOverlay.hogan
@@ -9,19 +9,7 @@
<a href="#" class="catlink">{{hiddencatlink}}</a>
</li>
</ul>
- <ul class="topic-title-list normal-catlist">
- {{#items}}
- <li>
- <a href="{{url}}">{{title}}</a>
- </li>
- {{/items}}
- </ul>
- <ul class="topic-title-list hidden hidden-catlist">
- {{#hiddenitems}}
- <li>
- <a href="{{url}}">{{title}}</a>
- </li>
- {{/hiddenitems}}
- </ul>
+ <ul class="topic-title-list normal-catlist"></ul>
+ <ul class="topic-title-list hidden hidden-catlist"></ul>
</div>
{{{spinner}}}
diff --git a/resources/mobile.categories.overlays/CategoryOverlay.js
b/resources/mobile.categories.overlays/CategoryOverlay.js
index 1b51951..de8c481 100644
--- a/resources/mobile.categories.overlays/CategoryOverlay.js
+++ b/resources/mobile.categories.overlays/CategoryOverlay.js
@@ -1,6 +1,7 @@
( function ( M, $ ) {
var Overlay = M.require( 'mobile.overlays/Overlay' ),
+ InfiniteScroll = M.require(
'mobile.infiniteScroll/InfiniteScroll' ),
CategoryGateway = M.require(
'mobile.categories.overlays/CategoryGateway' );
/**
@@ -9,7 +10,10 @@
* @extends Overlay
* @uses CategoryGateway
*/
- function CategoryOverlay() {
+ function CategoryOverlay( options ) {
+ this.infiniteScroll = new InfiniteScroll();
+ this.infiniteScroll.on( 'load', $.proxy( this,
'_loadCategories' ) );
+ this.gateway = new CategoryGateway( options.api );
Overlay.apply( this, arguments );
}
@@ -45,7 +49,8 @@
* @inheritdoc
*/
templatePartials: $.extend( {},
Overlay.prototype.templatePartials, {
- content: mw.template.get( 'mobile.categories.overlays',
'CategoryOverlay.hogan' )
+ content: mw.template.get( 'mobile.categories.overlays',
'CategoryOverlay.hogan' ),
+ item: mw.template.get( 'mobile.categories.overlays',
'CategoryOverlayItem.hogan' )
} ),
events: $.extend( {}, Overlay.prototype.events, {
'click .catlink': 'onCatlinkClick'
@@ -60,29 +65,32 @@
this.$( '.add' ).removeClass( 'hidden' );
}
if ( !this.options.items ) {
- this._loadCategories( this.options );
+ this._loadCategories();
}
- if ( this.options.showHidden ) {
- this._changeView();
- }
- M.off( 'category-added' ).on( 'category-added',
$.proxy( this, '_loadCategories', this.options ) );
+ M.off( 'category-added' ).on( 'category-added',
$.proxy( this, '_loadCategories' ) );
},
/**
* Get a list of categories the page belongs to and re-renders
the overlay content
- * @param {Object} options Object passed to the constructor.
*/
- _loadCategories: function ( options ) {
- var gateway = new CategoryGateway( options.api ),
- self = this;
+ _loadCategories: function () {
+ var self = this,
+ $normalCatlist = this.$( '.normal-catlist' ),
+ $hiddenCatlist = this.$( '.hidden-catlist' ),
+ apiResult;
- this.$( '.topic-title-list' ).empty();
this.showSpinner();
- gateway.getCategories( options.title ).done( function (
data ) {
+ this.infiniteScroll.setElement( this.$el );
+ // InfiniteScroll is enabled once it's created, but we
want to wait, until at least one element is
+ // in the list before we enable it. So disable it here
and enable once the elements are loaded.
+ this.infiniteScroll.disable();
+ apiResult = this.gateway.getCategories(
this.options.title );
+ if ( apiResult === false ) {
+ self.clearSpinner();
+ return;
+ }
+ apiResult.done( function ( data ) {
if ( data.query && data.query.pages ) {
- options.items = [];
- options.hiddenitems = [];
-
// add categories to overlay
$.each( data.query.pages, function (
index, page ) {
if ( page.categories ) {
@@ -90,30 +98,30 @@
var title =
mw.Title.newFromText( category.title, category.ns );
if (
category.hidden !== undefined ) {
-
options.hiddenitems.push( {
+
$hiddenCatlist.append( self.templatePartials.item.render( {
url: title.getUrl(),
title: title.getNameText()
- } );
+ } ) );
} else {
-
options.items.push( {
+
$normalCatlist.append( self.templatePartials.item.render( {
url: title.getUrl(),
title: title.getNameText()
- } );
+ } ) );
}
} );
}
} );
- if ( options.items.length === 0 &&
options.hiddenitems.length === 0 ) {
- options.subheading = mw.msg(
'mobile-frontend-categories-nocat' );
- } else if ( options.items.length === 0
&& options.hiddenitems.length > 0 ) {
- options.showHidden = true;
+ if ( $normalCatlist.length === 0 &&
$normalCatlist.length === 0 ) {
+ self.$( '.content-header'
).text( mw.msg( 'mobile-frontend-categories-nocat' ) );
+ } else if ( $normalCatlist.length === 0
&& $normalCatlist.length > 0 ) {
+ this._changeView();
}
} else {
- options.subheading = mw.msg(
'mobile-frontend-categories-nocat' );
+ self.$( '.content-header' ).text(
mw.msg( 'mobile-frontend-categories-nocat' ) );
}
- self.render( options );
self.clearSpinner();
+ self.infiniteScroll.enable();
} );
},
diff --git a/resources/mobile.categories.overlays/CategoryOverlayItem.hogan
b/resources/mobile.categories.overlays/CategoryOverlayItem.hogan
new file mode 100644
index 0000000..f2e1bc9
--- /dev/null
+++ b/resources/mobile.categories.overlays/CategoryOverlayItem.hogan
@@ -0,0 +1,3 @@
+<li title="{{title}}">
+ <a href="{{url}}">{{title}}</a>
+</li>
--
To view, visit https://gerrit.wikimedia.org/r/303255
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ibe1e0db0307e7a9d89c356777b56fc0c7263360f
Gerrit-PatchSet: 9
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Florianschmidtwelzow <[email protected]>
Gerrit-Reviewer: Florianschmidtwelzow <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
