Skip to content

Commit be8d411

Browse files
dhiltdhilt
authored
Merge pull request #165 from angular-ui/interpolation
Interpolation
2 parents f62856d + 9a5e573 commit be8d411

16 files changed

+181
-91
lines changed

‎.travis.yml

+3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ language: node_js
33
node_js:
44
- '6'
55

6+
addons:
7+
firefox: latest
8+
69
before_install:
710
- export DISPLAY=:99.0
811
- sh -e /etc/init.d/xvfb start

‎demo/differentItemHeights/differentItemHeights.html

+18-16
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

+35-20
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+
});

‎dist/ui-scroll-grid.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/ui-scroll-grid.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/ui-scroll-grid.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/ui-scroll-grid.min.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/ui-scroll.js

+44-39
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/ui-scroll.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/ui-scroll.min.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/ui-scroll.min.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
"jasmine-core": "^2.5.2",
4343
"karma": "^1.4.0",
4444
"karma-chrome-launcher": "^2.0.0",
45-
"karma-firefox-launcher": "^1.0.0",
45+
"karma-firefox-launcher": "^1.0.1",
4646
"karma-ie-launcher": "^1.0.0",
4747
"karma-jasmine": "^1.1.0",
4848
"webpack": "^2.6.1"

‎src/ui-scroll.js

+5-6
Original file line numberDiff line numberDiff line change
@@ -208,7 +208,7 @@ angular.module('ui.scroll', [])
208208
}
209209
});
210210
if (!pending.length) {
211-
adjustBuffer();
211+
$timeout(() => adjustBuffer());
212212
}
213213
}
214214
}
@@ -333,7 +333,7 @@ angular.module('ui.scroll', [])
333333
let updates = updateDOM();
334334

335335
// We need the item bindings to be processed before we can do adjustment
336-
$timeout(() => {
336+
$scope.$apply(() => $timeout(() => {
337337

338338
// show elements after data binging has been done
339339
updates.inserted.forEach(w => w.element.removeClass('ng-hide'));
@@ -349,15 +349,14 @@ angular.module('ui.scroll', [])
349349
if (!pending.length) {
350350
adapter.calculateProperties();
351351
}
352-
});
352+
}));
353353
}
354354

355355
function adjustBufferAfterFetch(rid) {
356356
let updates = updateDOM();
357357

358358
// We need the item bindings to be processed before we can do adjustment
359-
$timeout(() => {
360-
359+
$scope.$apply(() => $timeout(() => {
361360
// show elements after data binging has been done
362361
updates.inserted.forEach(w => w.element.removeClass('ng-hide'));
363362
updates.prepended.forEach(w => w.element.removeClass('ng-hide'));
@@ -379,7 +378,7 @@ angular.module('ui.scroll', [])
379378
bindEvents();
380379
adapter.calculateProperties();
381380
}
382-
});
381+
}));
383382
}
384383

385384
function fetch(rid) {

‎test/BasicTestsSpec.js

+47
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
});

0 commit comments

Comments
 (0)