Skip to content

Commit 450c2d4

Browse files
dhiltdhilt
committed
interpolation tests and demo
1 parent 9f7b444 commit 450c2d4

File tree

4 files changed

+119
-37
lines changed

4 files changed

+119
-37
lines changed

‎demo/differentItemHeights/differentItemHeights.html

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,30 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<meta charset="utf-8">
5-
<title>Different Item Heights</title>
6-
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
7-
<script src="../../src/ui-scroll.js"></script>
8-
<script src="differentItemHeights.js"></script>
9-
<link rel="stylesheet" href="../css/style.css" type="text/css"/>
4+
<meta charset="utf-8">
5+
<title>Different Item Heights</title>
6+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.js"></script>
7+
<script src="../../dist/ui-scroll.js"></script>
8+
<script src="differentItemHeights.js"></script>
9+
<link rel="stylesheet" href="../css/style.css" type="text/css" />
1010
</head>
1111
<body ng-app="application">
1212

13-
<div class="cont cont-global">
13+
<div class="cont cont-global" ng-controller="MainCtrl">
1414

15-
<a class="back" href="../index.html">browse other examples</a>
15+
<a class="back" href="../index.html">browse other examples</a>
1616

17-
<h1 class="page-header page-header-exapmle">Different Item Heights</h1>
17+
<h1 class="page-header page-header-exapmle">Different Item Heights (Interpolation)</h1>
1818

19-
<div class="viewport-wrap">
20-
<div class="viewport " ui-scroll-viewport style="width: 350px; height2: 300px;">
21-
<div id="dhilt" style="height:0px; overflow: hidden">trololo</div>
22-
<div class="item" ui-scroll="item in datasource" style="height: {{item.height}}px">{{item.text}}</div>
23-
</div>
24-
</div>
19+
<div class="viewport-wrap">
20+
<div class="viewport " ui-scroll-viewport>
21+
<div ui-scroll="item in datasource" buffer-size="10" adapter="adapter">
22+
<div class="item" ng-style="{'height': item.height + 'px'}">
23+
{{"content # " + item.index + ' ' + item.height}}
24+
</div>
25+
</div>
26+
</div>
27+
</div>
2528

26-
</div>
2729
</body>
2830
</html>

‎demo/differentItemHeights/differentItemHeights.js

Lines changed: 35 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,44 @@
1-
angular.module('application', ['ui.scroll']).factory('datasource', [
2-
'$log', '$timeout', function(console, $timeout) {
3-
var get, max, min;
4-
min = -50;
5-
max = 100;
1+
angular.module('application', ['ui.scroll'])
62

7-
get = function(index, count, success) {
8-
$timeout(function() {
3+
.run(function($rootScope) {
4+
$rootScope.doReload = function () {
5+
$rootScope.$broadcast('DO_RELOAD');
6+
};
7+
})
8+
9+
.controller('MainCtrl', function($scope) {
10+
$scope.hello = 'Hello Main Controller!';
11+
var counter = 0;
12+
13+
var reloadListener = $scope.$on('DO_RELOAD', function() {
14+
if ($scope.adapter) {
15+
counter = 0;
16+
$scope.adapter.reload();
17+
}
18+
});
19+
20+
$scope.$on("$destroy", function() {
21+
reloadListener();
22+
});
23+
24+
var min = -1000, max = 1000, delay = 0;
25+
26+
$scope.datasource = {
27+
get: function(index, count, success) {
28+
setTimeout(function() {
929
var result = [];
1030
var start = Math.max(min, index);
1131
var end = Math.min(index + count - 1, max);
1232
if (start <= end) {
1333
for (var i = start; i <= end; i++) {
14-
var j = i > 0 ? i : (-1) * i;
15-
result.push({
16-
text: "item #" + i,
17-
height: 20 + (j%2) * 10
18-
});
34+
height = 50 + (counter++ * 2);
35+
result.push({ index: i, height: height });
1936
}
2037
}
21-
success(result);
22-
}, 50);
23-
};
38+
console.log('Got ' + result.length + ' items [' + start + '..' + end + ']');
39+
success(result);
40+
}, delay);
41+
}
42+
};
2443

25-
return {
26-
get: get
27-
};
28-
}
29-
]);
44+
});

‎test/BasicTestsSpec.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -637,6 +637,9 @@ describe('uiScroll', function () {
637637
var topVisibleChangeCount = 0;
638638

639639
scope.$watch('container1.adapter.topVisible', function(newValue) {
640+
if(newValue === 'item1') {
641+
return;
642+
}
640643
topVisibleChangeCount++;
641644

642645
expect(scope.container1.adapter.topVisible).toBe(newValue);
@@ -675,6 +678,9 @@ describe('uiScroll', function () {
675678
var topVisibleChangeCount = 0;
676679

677680
scope.$watch('container1.adapter.topVisible', function(newValue) {
681+
if(newValue === 'item1') {
682+
return;
683+
}
678684
topVisibleChangeCount++;
679685

680686
expect(scope.container1.adapter.topVisible).toBe(newValue);
@@ -839,4 +845,45 @@ describe('uiScroll', function () {
839845
});
840846
});
841847

848+
describe('interpolation', function() {
849+
var myTemplate = '<div ng-style="{\'height\': itemHeight + \'px\'}">{{$index}}: {{item}}</div>';
850+
var scrollSettings = {
851+
datasource: 'myInfiniteDatasource',
852+
template: myTemplate,
853+
topVisible: 'topVisible',
854+
bufferSize: 10
855+
};
856+
857+
it('should keep 1st item at the top after initial auto fetching is done', function() {
858+
runTest(scrollSettings,
859+
function (viewport, scope) {
860+
expect(scope.topVisible).toBe('item1');
861+
expect(viewport.scrollTop()).toBe(400); // 1 pack (bufferSize * itemHeight) from the top
862+
}, {
863+
scope: {
864+
'itemHeight': 40
865+
}
866+
}
867+
);
868+
});
869+
870+
it('should keep (-bufferSize) item at the top after one manual fetching is done', function() {
871+
runTest(scrollSettings,
872+
function (viewport, scope, $timeout) {
873+
874+
viewport.scrollTop(0); // scroll to the very top
875+
viewport.trigger('scroll');
876+
$timeout.flush();
877+
878+
expect(scope.topVisible).toBe('item-9');
879+
expect(viewport.scrollTop()).toBe(400); // 1 pack (bufferSize * itemHeight) from the top
880+
}, {
881+
scope: {
882+
'itemHeight': 40
883+
}
884+
}
885+
);
886+
});
887+
});
888+
842889
});

‎test/VisibilitySwitchingSpec.js

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,25 @@ describe('uiScroll', function () {
8080
}
8181
);
8282
});
83+
84+
it('should stay on the 1st item after the visibility is on (infinite list)', function () {
85+
var infititeScrollSettings = scrollSettings;
86+
infititeScrollSettings.datasource = 'myInfiniteDatasource';
87+
infititeScrollSettings.topVisible = 'topVisible';
88+
runTest(infititeScrollSettings,
89+
function (viewport, scope, $timeout) {
90+
viewport.css('display','none');
91+
scope.adapter.reload();
92+
$timeout.flush();
93+
94+
viewport.css('display','block');
95+
scope.$apply();
96+
$timeout.flush();
97+
98+
expect(scope.topVisible).toBe('item1');
99+
}
100+
);
101+
});
83102
});
84103

85104
describe('items visibility changing', function () {
@@ -105,7 +124,6 @@ describe('uiScroll', function () {
105124
angular.element(viewport.children()[onePackItemsCount - 1]).css('height', 40);
106125
expect(angular.element(viewport.children()[onePackItemsCount - 1]).css('height')).toBe('40px');
107126
scope.$apply();
108-
//$timeout.flush();
109127

110128
$timeout(function() {
111129
expect(viewport.children().length).toBe(twoPacksItemsCount);

0 commit comments

Comments
 (0)