jenkins-bot has submitted this change and it was merged.
Change subject: Add Load More API on front-end
......................................................................
Add Load More API on front-end
Also adds support for data-flow-api-target loading indicator
Change-Id: I678e8af977c8f11ca22addff7aa3e765af79fbcc
---
M handlebars/compiled/flow_block_topiclist.handlebars.php
M handlebars/flow_board_navigation.handlebars
M handlebars/flow_load_more.handlebars
M modules/new/components/flow-board.js
M modules/new/styles/interactive.less
5 files changed, 80 insertions(+), 9 deletions(-)
Approvals:
SG: Looks good to me, approved
jenkins-bot: Verified
diff --git a/handlebars/compiled/flow_block_topiclist.handlebars.php
b/handlebars/compiled/flow_block_topiclist.handlebars.php
index e608e65..69f0a76 100644
--- a/handlebars/compiled/flow_block_topiclist.handlebars.php
+++ b/handlebars/compiled/flow_block_topiclist.handlebars.php
@@ -40,8 +40,8 @@
<div class="flow-menu-js-drop"><a
href="javascript:void(0);" class="flow-board-filter-menu-activator"></a></div>
'.((LCRun3::ifvar($cx, ((is_array($in['links']) &&
isset($in['links']['board-sort'])) ? $in['links']['board-sort'] : null))) ? '
<ul class="flow-ui-button-container">
- <li><a
href="'.htmlentities(((is_array($in['links']['board-sort']) &&
isset($in['links']['board-sort']['updated'])) ?
$in['links']['board-sort']['updated'] : null), ENT_QUOTES, 'UTF-8').'"
data-flow-interactive-handler="apiRequest" data-flow-api-handler="board"><span
class="wikiglyph wikiglyph-clock"></span> '.LCRun3::ch($cx, 'l10n',
Array('flow-recent-topics'), 'encq').'</a></li>
- <li><a
href="'.htmlentities(((is_array($in['links']['board-sort']) &&
isset($in['links']['board-sort']['newest'])) ?
$in['links']['board-sort']['newest'] : null), ENT_QUOTES, 'UTF-8').'"
data-flow-interactive-handler="apiRequest" data-flow-api-handler="board"><span
class="wikiglyph wikiglyph-star-circle"></span> '.LCRun3::ch($cx, 'l10n',
Array('flow-newest-topics'), 'encq').'</a></li>
+ <li><a
href="'.htmlentities(((is_array($in['links']['board-sort']) &&
isset($in['links']['board-sort']['updated'])) ?
$in['links']['board-sort']['updated'] : null), ENT_QUOTES, 'UTF-8').'"
data-flow-interactive-handler="apiRequest" data-flow-api-target="$container"
data-flow-api-handler="board"><span class="wikiglyph wikiglyph-clock"></span>
'.LCRun3::ch($cx, 'l10n', Array('flow-recent-topics'), 'encq').'</a></li>
+ <li><a
href="'.htmlentities(((is_array($in['links']['board-sort']) &&
isset($in['links']['board-sort']['newest'])) ?
$in['links']['board-sort']['newest'] : null), ENT_QUOTES, 'UTF-8').'"
data-flow-interactive-handler="apiRequest" data-flow-api-target="$container"
data-flow-api-handler="board"><span class="wikiglyph
wikiglyph-star-circle"></span> '.LCRun3::ch($cx, 'l10n',
Array('flow-newest-topics'), 'encq').'</a></li>
</ul>
' : '').'
</div>
@@ -172,7 +172,7 @@
</div>
'.((LCRun3::ifvar($cx, ((is_array($in['links']['pagination']) &&
isset($in['links']['pagination']['fwd'])) ? $in['links']['pagination']['fwd'] :
null))) ? '
- <a href="'.htmlentities(((is_array($in['links']['pagination']['fwd'])
&& isset($in['links']['pagination']['fwd']['url'])) ?
$in['links']['pagination']['fwd']['url'] : null), ENT_QUOTES, 'UTF-8').'"
title="'.htmlentities(((is_array($in['links']['pagination']['fwd']) &&
isset($in['links']['pagination']['fwd']['title'])) ?
$in['links']['pagination']['fwd']['title'] : null), ENT_QUOTES, 'UTF-8').'"
class="flow-ui-button flow-ui-progressive /*flow-ui-quiet flow-ui-thin*/"><span
class="wikiglyph wikiglyph-article"></span> '.LCRun3::ch($cx, 'l10n',
Array('flow-load-more'), 'encq').'</a>
+ <a data-flow-interactive-handler="apiRequest"
data-flow-api-handler="loadMore" data-flow-api-target="$container"
href="'.htmlentities(((is_array($in['links']['pagination']['fwd']) &&
isset($in['links']['pagination']['fwd']['url'])) ?
$in['links']['pagination']['fwd']['url'] : null), ENT_QUOTES, 'UTF-8').'"
title="'.htmlentities(((is_array($in['links']['pagination']['fwd']) &&
isset($in['links']['pagination']['fwd']['title'])) ?
$in['links']['pagination']['fwd']['title'] : null), ENT_QUOTES, 'UTF-8').'"
class="flow-ui-button flow-ui-progressive /*flow-ui-quiet flow-ui-thin*/"><span
class="wikiglyph wikiglyph-article"></span> '.LCRun3::ch($cx, 'l10n',
Array('flow-load-more'), 'encq').'</a>
' : '').'
</div>
';
diff --git a/handlebars/flow_board_navigation.handlebars
b/handlebars/flow_board_navigation.handlebars
index 30973a8..377f4e4 100644
--- a/handlebars/flow_board_navigation.handlebars
+++ b/handlebars/flow_board_navigation.handlebars
@@ -19,8 +19,8 @@
<div class="flow-menu-js-drop"><a
href="javascript:void(0);" class="flow-board-filter-menu-activator"></a></div>
{{#if links.board-sort}}
<ul class="flow-ui-button-container">
- <li><a
href="{{links.board-sort.updated}}" data-flow-interactive-handler="apiRequest"
data-flow-api-handler="board"><span class="wikiglyph wikiglyph-clock"></span>
{{l10n "flow-recent-topics"}}</a></li>
- <li><a
href="{{links.board-sort.newest}}" data-flow-interactive-handler="apiRequest"
data-flow-api-handler="board"><span class="wikiglyph
wikiglyph-star-circle"></span> {{l10n "flow-newest-topics"}}</a></li>
+ <li><a
href="{{links.board-sort.updated}}" data-flow-interactive-handler="apiRequest"
data-flow-api-target="$container" data-flow-api-handler="board"><span
class="wikiglyph wikiglyph-clock"></span> {{l10n "flow-recent-topics"}}</a></li>
+ <li><a
href="{{links.board-sort.newest}}" data-flow-interactive-handler="apiRequest"
data-flow-api-target="$container" data-flow-api-handler="board"><span
class="wikiglyph wikiglyph-star-circle"></span> {{l10n
"flow-newest-topics"}}</a></li>
</ul>
{{/if}}
</div>
diff --git a/handlebars/flow_load_more.handlebars
b/handlebars/flow_load_more.handlebars
index 1fcecda..2e78d70 100644
--- a/handlebars/flow_load_more.handlebars
+++ b/handlebars/flow_load_more.handlebars
@@ -1,3 +1,3 @@
{{#if links.pagination.fwd}}
- <a href="{{links.pagination.fwd.url}}"
title="{{links.pagination.fwd.title}}" class="flow-ui-button
flow-ui-progressive /*flow-ui-quiet flow-ui-thin*/"><span class="wikiglyph
wikiglyph-article"></span> {{l10n "flow-load-more"}}</a>
+ <a data-flow-interactive-handler="apiRequest"
data-flow-api-handler="loadMore" data-flow-api-target="$container"
href="{{links.pagination.fwd.url}}" title="{{links.pagination.fwd.title}}"
class="flow-ui-button flow-ui-progressive /*flow-ui-quiet flow-ui-thin*/"><span
class="wikiglyph wikiglyph-article"></span> {{l10n "flow-load-more"}}</a>
{{/if}}
\ No newline at end of file
diff --git a/modules/new/components/flow-board.js
b/modules/new/components/flow-board.js
index 15ea6e2..cd26aa5 100644
--- a/modules/new/components/flow-board.js
+++ b/modules/new/components/flow-board.js
@@ -161,6 +161,47 @@
}
};
+ /**
+ *
+ * @param {String} status (done|fail)
+ * @param {Object} data
+ * @param {jqXHR} jqxhr
+ */
+ FlowBoardComponent.UI.events.apiHandlers.loadMore = function (
status, data, jqxhr ) {
+ var $this = $( this ),
+ flowBoard =
FlowBoardComponent.prototype.getInstanceByElement( $this ),
+ $tmp;
+
+ if ( status === 'done' ) {
+ // Success
+ // Render topiclist template
+ $this.before(
+ $tmp = $(
flowBoard.TemplateEngine.processTemplateGetFragment(
+ 'flow_topiclist_loop',
+ data.flow[ 'topiclist-view'
].result.topiclist
+ ) ).children()
+ );
+ // Run loadHandlers
+ FlowBoardComponent.UI.makeContentInteractive(
$tmp );
+
+ // Render load more template
+ $this.replaceWith(
+ $tmp = $(
flowBoard.TemplateEngine.processTemplateGetFragment(
+ 'flow_load_more',
+ data.flow[ 'topiclist-view'
].result.topiclist
+ ) ).children()
+ );
+
+ // Run loadHandlers
+ FlowBoardComponent.UI.makeContentInteractive(
$tmp );
+
+ // Remove the old load button (necessary if the
above load_more template returns nothing)
+ $this.remove();
+ } else {
+ // @todo fail
+ }
+ };
+
////////////////////////////////////////////////////////////
// FlowBoardComponent.UI on-element-load handlers
@@ -356,7 +397,7 @@
/**
* Triggers an API request based on URL and form data, and
triggers the callbacks based on flow-api-handler.
- * @example <a data-flow-interactive-handler="apiRequest"
data-flow-api-handler="loadMore" href="...">...</a>
+ * @example <a data-flow-interactive-handler="apiRequest"
data-flow-api-handler="loadMore" data-flow-api-target="$container"
href="...">...</a>
* @param {Event} event
*/
FlowBoardComponent.UI.events.interactiveHandlers.apiRequest =
function ( event ) {
@@ -372,17 +413,34 @@
// Find the target node
if ( dataParams.flowApiTarget ) {
- $target = flowBoard.find(
dataParams.flowApiTarget );
+ if ( dataParams.flowApiTarget.charAt( 0 ) ===
'$' ) {
+ // Passing something like $container as
an argument
+ $target = flowBoard[
dataParams.flowApiTarget ];
+ } else {
+ // Passing a selector as an argument
+ $target = flowBoard.$container.find(
dataParams.flowApiTarget );
+ }
}
if ( !$target || !$target.length ) {
// Assign a target node if none
- $target = $( this );
+ $target = $this;
}
+
+ // Make sure an API call is not already in progress for
this target
+ if ( $target.closest( '.flow-api-inprogress' ).length )
{
+ flowBoard.debug( 'apiRequest already in
progress', arguments );
+ return;
+ }
+
+ // Mark the target node as "in progress" to disallow
any further API calls until it finishes
+ $target.addClass( 'flow-api-inprogress' );
+ $this.addClass( 'flow-api-inprogress' );
// Use the pre-callback to find out if we should
process this
if ( FlowBoardComponent.UI.events.apiPreHandlers[
handlerName ] ) {
if (
FlowBoardComponent.UI.events.apiPreHandlers[ handlerName ].apply( _this,
arguments ) === false ) {
// Callback returned false
+ flowBoard.debug( 'apiPreHandler
returned false', handlerName, arguments );
return;
}
}
@@ -398,6 +456,13 @@
$deferred.rejectWith( { error: 'Not an anchor
or form' } );
}
+ // Remove the load indicator
+ $deferred.always( function () {
+ // @todo support for multiple indicators on
same target
+ $target.removeClass( 'flow-api-inprogress' );
+ $this.removeClass( 'flow-api-inprogress' );
+ } );
+
// If this has a special api handler, bind it to the
callback.
if ( FlowBoardComponent.UI.events.apiHandlers[
handlerName ] ) {
$deferred
diff --git a/modules/new/styles/interactive.less
b/modules/new/styles/interactive.less
index 6d92c64..e4f71ae 100644
--- a/modules/new/styles/interactive.less
+++ b/modules/new/styles/interactive.less
@@ -276,6 +276,12 @@
}
}
+// API interaction indicator
+.client-js .flow-api-inprogress {
+ opacity: 0.5;
+ cursor: wait !important;
+}
+
// Icon set
.wikiglyph {
--
To view, visit https://gerrit.wikimedia.org/r/139323
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I678e8af977c8f11ca22addff7aa3e765af79fbcc
Gerrit-PatchSet: 7
Gerrit-Project: mediawiki/extensions/Flow
Gerrit-Branch: frontend-rewrite
Gerrit-Owner: SG <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: SG <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
