Browse Source

Performance improvements for scrollables

Fix #257
master
Igor Zhukov 11 years ago
parent
commit
e7b731e808
  1. 8
      app/js/controllers.js
  2. 32
      app/js/directives.js
  3. 4
      app/partials/contacts_modal.html
  4. 4
      app/partials/country_select_modal.html

8
app/js/controllers.js

@ -1554,8 +1554,11 @@ angular.module('myApp.controllers', [])
}) })
.controller('ContactsModalController', function ($scope, $modal, $modalInstance, AppUsersManager) { .controller('ContactsModalController', function ($scope, $modal, $modalInstance, AppUsersManager) {
$scope.contacts = []; $scope.contacts = [];
$scope.search = {}; $scope.search = {};
$scope.slice = {limit: 20, limitDelta: 20}
$scope.selectedContacts = {}; $scope.selectedContacts = {};
$scope.disabledContacts = {}; $scope.disabledContacts = {};
@ -1579,6 +1582,8 @@ angular.module('myApp.controllers', [])
function updateContacts (query) { function updateContacts (query) {
AppUsersManager.getContacts(query).then(function (contactsList) { AppUsersManager.getContacts(query).then(function (contactsList) {
$scope.contacts = []; $scope.contacts = [];
$scope.slice.limit = 20;
angular.forEach(contactsList, function(userID) { angular.forEach(contactsList, function(userID) {
var contact = { var contact = {
userID: userID, userID: userID,
@ -1753,6 +1758,7 @@ angular.module('myApp.controllers', [])
.controller('CountrySelectModalController', function ($scope, $modalInstance, $rootScope, SearchIndexManager) { .controller('CountrySelectModalController', function ($scope, $modalInstance, $rootScope, SearchIndexManager) {
$scope.search = {}; $scope.search = {};
$scope.slice = {limit: 20, limitDelta: 20}
var searchIndex = SearchIndexManager.createIndex(); var searchIndex = SearchIndexManager.createIndex();
@ -1770,6 +1776,8 @@ angular.module('myApp.controllers', [])
} }
$scope.countries = []; $scope.countries = [];
$scope.slice.limit = 20;
var j; var j;
for (var i = 0; i < Config.CountryCodes.length; i++) { for (var i = 0; i < Config.CountryCodes.length; i++) {
if (!filtered || results[i]) { if (!filtered || results[i]) {

32
app/js/directives.js

@ -1120,6 +1120,38 @@ angular.module('myApp.directives', ['myApp.filters'])
}; };
}) })
.directive('myInfiniteScroller', function () {
return {
link: link,
scope: true
};
function link($scope, element, attrs) {
var scrollableWrap = $('.content', element)[0],
moreNotified = false;
$(scrollableWrap).on('scroll', function (e) {
if (!moreNotified &&
scrollableWrap.scrollTop >= scrollableWrap.scrollHeight - scrollableWrap.clientHeight - 300) {
moreNotified = true;
$scope.$apply(function () {
$scope.slice.limit += ($scope.slice.limitDelta || 20);
});
onContentLoaded(function () {
moreNotified = false;
$(element).nanoScroller();
});
}
});
};
})
.directive('myModalPosition', function ($window, $timeout) { .directive('myModalPosition', function ($window, $timeout) {

4
app/partials/contacts_modal.html

@ -10,12 +10,12 @@
<div my-contacts-list class="contacts_modal_col"> <div my-contacts-list class="contacts_modal_col">
<div class="contacts_wrap nano"> <div class="contacts_wrap nano" my-infinite-scroller>
<div class="contacts_scrollable_wrap content"> <div class="contacts_scrollable_wrap content">
<ul class="contacts_modal_members_list nav nav-pills nav-stacked"> <ul class="contacts_modal_members_list nav nav-pills nav-stacked">
<li class="contacts_modal_contact_wrap clearfix" ng-repeat="contact in contacts | orderBy:'user.sortName' track by contact.userID" ng-class="{active: selectedContacts[contact.userID], disabled: disabledContacts[contact.userID]}"> <li class="contacts_modal_contact_wrap clearfix" ng-repeat="contact in contacts | orderBy:'user.sortName' | limitTo: slice.limit track by contact.userID" ng-class="{active: selectedContacts[contact.userID], disabled: disabledContacts[contact.userID]}">
<a class="contacts_modal_contact" ng-click="contactSelect(contact.userID)"> <a class="contacts_modal_contact" ng-click="contactSelect(contact.userID)">
<i ng-if="multiSelect" class="icon icon-contact-tick"></i> <i ng-if="multiSelect" class="icon icon-contact-tick"></i>

4
app/partials/country_select_modal.html

@ -11,12 +11,12 @@
<div class="countries_modal_col" my-countries-list> <div class="countries_modal_col" my-countries-list>
<div class="countries_wrap nano"> <div class="countries_wrap nano" my-infinite-scroller>
<div class="countries_scrollable_wrap content"> <div class="countries_scrollable_wrap content">
<ul class="countries_modal_members_list nav nav-pills nav-stacked"> <ul class="countries_modal_members_list nav nav-pills nav-stacked">
<li class="countries_modal_country_wrap clearfix" ng-repeat="country in countries track by $index"> <li class="countries_modal_country_wrap clearfix" ng-repeat="country in countries | limitTo : slice.limit track by $index">
<a class="countries_modal_country" ng-click="$close(country.code)"> <a class="countries_modal_country" ng-click="$close(country.code)">
<span class="countries_modal_country_code pull-right" ng-bind="country.code"></span> <span class="countries_modal_country_code pull-right" ng-bind="country.code"></span>
<span class="countries_modal_country_name" ng-bind="country.name"></span> <span class="countries_modal_country_name" ng-bind="country.name"></span>

Loading…
Cancel
Save