diff --git a/app/directives/tc-endless-paginator/tc-endless-paginator.jade b/app/directives/tc-endless-paginator/tc-endless-paginator.jade index ad76510d8..d735bf64b 100644 --- a/app/directives/tc-endless-paginator/tc-endless-paginator.jade +++ b/app/directives/tc-endless-paginator/tc-endless-paginator.jade @@ -1,3 +1,3 @@ div.paginator tc-section(state="state") - button.tc-btn.tc-btn-s(ng-show="pageParams.totalCount > pageParams.currentCount", ng-click="loadMore()") Load More + button.tc-btn.tc-btn-s(ng-show="pageParams.totalCount > pageParams.currentCount && firstLoadMore", ng-click="loadMore()") Load More diff --git a/app/directives/tc-section/tc-section.jade b/app/directives/tc-section/tc-section.jade index 76f9f2d85..7c57379e3 100644 --- a/app/directives/tc-section/tc-section.jade +++ b/app/directives/tc-section/tc-section.jade @@ -1,5 +1,5 @@ section(ng-switch="state") - .section-loading(ng-switch-when="loading") + .section-loading(ng-transclude, ng-switch-when="loading") .section-error(ng-switch-when="error") p {{errMsg}} diff --git a/app/my-challenges/my-challenges.controller.js b/app/my-challenges/my-challenges.controller.js index d8623372c..41f6f5ad1 100644 --- a/app/my-challenges/my-challenges.controller.js +++ b/app/my-challenges/my-challenges.controller.js @@ -20,6 +20,7 @@ import _ from 'lodash' vm.loadMore = loadMore vm.getChallenges = getChallenges vm.totalCount = 0 + vm.firstLoadMore = true // this will help to keep track of pagination across individual api calls var counts = { devDesign: {total: 0, current: 0}, @@ -99,7 +100,7 @@ import _ from 'lodash' function getDevDesignChallenges(offset) { var params = { - limit: 12, + limit: CONSTANTS.CHALLENGES_LOADING_CHUNK, offset: offset, orderBy: vm.orderBy + ' desc', filter: 'status=' + vm.statusFilter @@ -125,7 +126,7 @@ import _ from 'lodash' _filter = 'status=past&isRatedForMM=true' } var params = { - limit: 12, + limit: CONSTANTS.CHALLENGES_LOADING_CHUNK, offset: offset, orderBy: vm.statusFilter === 'active' ? 'startDate' : 'endDate desc', filter: _filter @@ -142,12 +143,14 @@ import _ from 'lodash' } function loadMore() { - currentOffset+=12 - vm.getChallenges(currentOffset, false) + if (vm.loading === CONSTANTS.STATE_READY) { + currentOffset += CONSTANTS.CHALLENGES_LOADING_CHUNK + vm.getChallenges(currentOffset, false) + } } window.onscroll = function() { - if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) { + if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - CONSTANTS.INFINITE_SCROLL_OFFSET)) { if (vm.totalCount > vm.myChallenges.length) { vm.loadMore() } diff --git a/app/my-challenges/my-challenges.jade b/app/my-challenges/my-challenges.jade index 644a84e4b..723c9c8ca 100644 --- a/app/my-challenges/my-challenges.jade +++ b/app/my-challenges/my-challenges.jade @@ -30,3 +30,5 @@ challenge-tile( ng-repeat="challenge in vm.myChallenges | orderBy:vm.orderBy:true", challenge="challenge", view="vm.view", ng-class="vm.view + '-view'") + + tc-section.load-more-section(state="vm.loading") diff --git a/app/profile/subtrack/subtrack.controller.js b/app/profile/subtrack/subtrack.controller.js index 8e4b5b131..14b1ce99b 100644 --- a/app/profile/subtrack/subtrack.controller.js +++ b/app/profile/subtrack/subtrack.controller.js @@ -26,9 +26,8 @@ import _ from 'lodash' vm.showNav = showNav vm.back = back vm.subTrackStats = [] - + vm.loadMore = loadMore vm.pageName = vm.subTrack - vm.tabs = ['statistics'] if (vm.track !== 'COPILOT') { @@ -41,7 +40,7 @@ import _ from 'lodash' // paging params, these are updated by tc-pager vm.pageParams = { currentOffset : 0, - limit: 16, + limit: CONSTANTS.CHALLENGES_LOADING_CHUNK, currentCount: 0, totalCount: 0, // counter used to indicate page change @@ -156,6 +155,21 @@ import _ from 'lodash' $window.history.back() } + function loadMore() { + if (vm.status.challenges === CONSTANTS.STATE_READY) { + vm.pageParams.currentOffset += CONSTANTS.CHALLENGES_LOADING_CHUNK + _getChallenges() + } + } + + window.onscroll = function() { + if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - CONSTANTS.INFINITE_SCROLL_OFFSET)) { + if (vm.pageParams.totalCount > vm.challenges.length) { + vm.loadMore() + } + } + } + function _getChallenges() { vm.status.challenges = CONSTANTS.STATE_LOADING var params = { diff --git a/app/topcoder.constants.js b/app/topcoder.constants.js index 708842a25..8fd2fd272 100644 --- a/app/topcoder.constants.js +++ b/app/topcoder.constants.js @@ -43,5 +43,7 @@ angular.module('CONSTANTS', []).constant('CONSTANTS', { 'REGISTERED' : 'REGISTERED', 'SUBMISSION_TYPE_CONTEST': 'Contest Submission', 'STATUS_ACTIVE' : 'Active', - 'STATUS_COMPLETED_WITHOUT_WIN' : 'Completed Without Win' + 'STATUS_COMPLETED_WITHOUT_WIN' : 'Completed Without Win', + 'CHALLENGES_LOADING_CHUNK' : 36, + 'INFINITE_SCROLL_OFFSET' : '400' // footer is 300px and challenge tile is 400px }) diff --git a/assets/css/directives/tc-section.scss b/assets/css/directives/tc-section.scss index c53ab8adb..10d784d6c 100644 --- a/assets/css/directives/tc-section.scss +++ b/assets/css/directives/tc-section.scss @@ -5,6 +5,7 @@ .section-loading { width: 100%; + min-width: 50px; min-height: 100px; background: url(../../images/ripple.gif) no-repeat center center; }