Florianschmidtwelzow has uploaded a new change for review.
https://gerrit.wikimedia.org/r/303255
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, 75 insertions(+), 43 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/55/303255/1
diff --git a/extension.json b/extension.json
index 9e34694..2fbeb9e 100644
--- a/extension.json
+++ b/extension.json
@@ -942,6 +942,8 @@
"mobile.search.api",
"mobile.search",
"mobile.editor.common",
+ "mobile.infiniteScroll",
+ "mobile.search.util",
"oojs-ui"
],
"scripts": [
@@ -955,6 +957,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..a636936 100644
--- a/resources/mobile.categories.overlays/CategoryGateway.js
+++ b/resources/mobile.categories.overlays/CategoryGateway.js
@@ -1,5 +1,6 @@
( function ( M, $ ) {
var prototype,
+ extendSearchParams = M.require(
'mobile.search.util/extendSearchParams' ),
SearchGateway = M.require( 'mobile.search.api/SearchGateway' );
/**
@@ -7,8 +8,13 @@
* @class CategoryGateway
* @extends SearchGateway
*/
- function CategoryGateway() {
+ function CategoryGateway( api, lastTitle ) {
CategoryGateway.parent.apply( this, arguments );
+
+ this.continueParams = {};
+ this.shouldSkipFirstTitle = false;
+
+ this.canContinue = true;
}
prototype = {
/**
@@ -37,12 +43,26 @@
* @returns {jQuery.Deferred}
*/
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..cb0af04 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,11 +49,17 @@
* @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'
} ),
+ /** @inheritdoc */
+ preRender: function () {
+ this.infiniteScroll.disable();
+ this.infiniteScroll.setElement( this.$el );
+ },
/**
* @inheritdoc
*/
@@ -60,29 +70,29 @@
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 ) );
+ this.infiniteScroll.enable();
+ 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 ) {
+ 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,29 +100,28 @@
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();
} );
},
@@ -135,6 +144,15 @@
_changeView: function () {
this.$( '.category-header li' ).toggleClass( 'selected'
);
this.$( '.topic-title-list' ).toggleClass( 'hidden' );
+ },
+
+ /**
+ * Get the last title from the rendered HTML.
+ * Used for initializing the API
+ * @param {jQuery.Object} $el Dom element of the list
+ */
+ getLastTitle: function ( $el ) {
+ return $el.find( 'li:last' ).attr( 'title' );
}
} );
diff --git a/resources/mobile.categories.overlays/CategoryOverlayItem.hogan
b/resources/mobile.categories.overlays/CategoryOverlayItem.hogan
new file mode 100644
index 0000000..7e7d54e
--- /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: newchange
Gerrit-Change-Id: Ibe1e0db0307e7a9d89c356777b56fc0c7263360f
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Florianschmidtwelzow <florian.schmidt.stargatewis...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
