Skip to content

Commit 9050499

Browse files
dhiltdhilt
committed
delete last row out of buffer: demo and first test
1 parent 94b9b39 commit 9050499

File tree

3 files changed

+291
-0
lines changed

3 files changed

+291
-0
lines changed

‎demo/outOfBuffer/outOfBuffer.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Adapter sync</title>
6+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
7+
<script src="../../dist/ui-scroll.js"></script>
8+
<script src="outOfBuffer.js"></script>
9+
<link rel="stylesheet" href="../css/style.css" type="text/css"/>
10+
<style>
11+
.remove {
12+
float: right;
13+
margin-right: 15px;
14+
cursor: pointer;
15+
}
16+
.remove:hover {
17+
color: #a00;
18+
}
19+
.viewport2 .uid {
20+
font-size: x-small;
21+
}
22+
</style>
23+
</head>
24+
<body ng-controller="mainController as mainCtrl" ng-app="application">
25+
26+
<div class="cont cont-global">
27+
28+
<div class="actions">
29+
<button ng-click="mainCtrl.prepend()">Prepend one item</button>
30+
<button ng-click="mainCtrl.append()">Append one item</button>
31+
<!--button ng-click="mainCtrl.removeAll()">Clear the viewport</button-->
32+
<button ng-click="mainCtrl.removeLast()">Remove last</button>
33+
</div>
34+
35+
<br/>
36+
37+
<ul class="viewport2" ui-scroll-viewport>
38+
<li ui-scroll="item in mainCtrl.datasource" adapter="mainCtrl.adapter">
39+
<div>
40+
<span>{{$index}}: {{item.content}} <span class="uid">({{item.id}})</span></span>
41+
<span class="remove" ng-click="mainCtrl.remove(item)">[x]</span>
42+
</div>
43+
</li>
44+
</ul>
45+
46+
</div>
47+
</body>
48+
</html>

‎demo/outOfBuffer/outOfBuffer.js

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
var app = angular.module('application', ['ui.scroll']);
2+
3+
app.factory('Server', [
4+
'$timeout', '$q', function ($timeout, $q) {
5+
6+
var ServerFactory = {
7+
8+
firstIndex: 1,
9+
10+
lastIndex: 40,
11+
12+
delay: 100,
13+
14+
data: [],
15+
16+
absIndex: 1,
17+
18+
generateId: function () {
19+
var d = '-';
20+
function S4() {
21+
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
22+
}
23+
return (S4() + S4() + d + S4() + d + S4() + d + S4() + d + S4() + S4() + S4());
24+
},
25+
26+
generateItem: function (index) {
27+
return {
28+
index: index,
29+
id: this.generateId(),
30+
content: 'Item #' + this.absIndex++
31+
}
32+
},
33+
34+
init: function () {
35+
for (var i = this.firstIndex; i <= this.lastIndex; i++) {
36+
this.data.push(this.generateItem(i));
37+
}
38+
},
39+
40+
getItem: function (index) {
41+
for (var i = this.data.length - 1; i >= 0; i--) {
42+
if (this.data[i].index === index) {
43+
return this.data[i];
44+
}
45+
}
46+
},
47+
48+
returnDeferredResult: function (result) {
49+
var deferred = $q.defer();
50+
$timeout(function () {
51+
deferred.resolve(result);
52+
}, this.delay);
53+
return deferred.promise;
54+
},
55+
56+
request: function (index, count) {
57+
var start = index;
58+
var end = index + count - 1;
59+
var item, result = {
60+
items: []
61+
};
62+
if (start <= end) {
63+
for (var i = start; i <= end; i++) {
64+
if (item = this.getItem(i)) {
65+
result.items.push(item);
66+
}
67+
}
68+
}
69+
return this.returnDeferredResult(result);
70+
},
71+
72+
prependItem: function (params) {
73+
var newItem = this.generateItem(--this.firstIndex);
74+
newItem.content += params;
75+
this.data.unshift(newItem);
76+
return this.returnDeferredResult(newItem);
77+
},
78+
79+
appendItem: function (params) {
80+
var newItem = this.generateItem(++this.lastIndex);
81+
newItem.content += params;
82+
this.data.push(newItem);
83+
return this.returnDeferredResult(newItem);
84+
},
85+
86+
removeItemById: function (itemId) {
87+
var length = this.data.length;
88+
for (var i = 0; i < length; i++) {
89+
if (this.data[i].id === itemId) {
90+
this.data.splice(i, 1);
91+
this.setIndicies();
92+
return this.returnDeferredResult(true);
93+
}
94+
}
95+
return this.returnDeferredResult(false);
96+
},
97+
98+
setIndicies: function() {
99+
if(!this.data.length) {
100+
this.firstIndex = 1;
101+
this.lastIndex = 1;
102+
return;
103+
}
104+
this.firstIndex = this.data[0].index;
105+
this.lastIndex = this.data[0].index;
106+
for (var i = this.data.length - 1; i >= 0; i--) {
107+
if(this.data[i].index > this.lastIndex) {
108+
this.lastIndex = this.data[i].index;
109+
}
110+
if(this.data[i].index < this.firstIndex) {
111+
this.firstIndex = this.data[i].index;
112+
}
113+
}
114+
}
115+
};
116+
117+
ServerFactory.init();
118+
119+
return ServerFactory;
120+
121+
}
122+
]);
123+
124+
125+
app.controller('mainController', [
126+
'$scope', 'Server', function ($scope, Server) {
127+
128+
var ctrl = this;
129+
130+
ctrl.datasource = {
131+
get: function (index, count, success) {
132+
console.log('request by index = ' + index + ', count = ' + count);
133+
Server.request(index, count).then(function (result) {
134+
if (result.items) {
135+
console.log('resolved ' + result.items.length + ' items');
136+
}
137+
success(result.items);
138+
});
139+
}
140+
};
141+
142+
$scope.$watch('adapter', (prev, next) => {
143+
console.log('The adapter has been initialized');
144+
});
145+
146+
ctrl.prepend = function () {
147+
Server.prependItem(' ***').then(function (newItem) {
148+
if (ctrl.adapter.isBOF()) {
149+
ctrl.adapter.prepend([newItem]);
150+
}
151+
});
152+
};
153+
154+
ctrl.append = function () {
155+
Server.appendItem(' ***').then(function (newItem) {
156+
if (ctrl.adapter.isEOF()) {
157+
ctrl.adapter.append([newItem]);
158+
}
159+
});
160+
};
161+
162+
// todo dhilt : need to implement it properly
163+
ctrl.removeAll = function () {
164+
ctrl.adapter.applyUpdates(function (item) {
165+
if (item.id) {
166+
Server.removeItemById(item.id);
167+
return [];
168+
}
169+
});
170+
};
171+
172+
ctrl.remove = function (itemRemove) {
173+
Server.removeItemById(itemRemove.id).then(function (result) {
174+
if (result) {
175+
ctrl.adapter.applyUpdates(function (item) {
176+
if (item.id === itemRemove.id) {
177+
return [];
178+
}
179+
});
180+
}
181+
});
182+
};
183+
184+
ctrl.removeLast = function () {
185+
const lastIndex = Server.lastIndex;
186+
const lastItem = Server.data.find(i => i.index === Server.lastIndex);
187+
if(!lastItem) {
188+
retirn;
189+
}
190+
Server.removeItemById(lastItem.id).then(function (result) {
191+
if (result) {
192+
ctrl.adapter.applyUpdates(lastIndex, []);
193+
}
194+
});
195+
};
196+
197+
}
198+
]);

‎test/PaddingCacheSpec.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/*global describe, beforeEach, module, it, expect, runTest */
2+
describe('uiScroll Paddings cache', function () {
3+
'use strict';
4+
5+
beforeEach(module('ui.scroll'));
6+
beforeEach(module('ui.scroll.test.datasources'));
7+
8+
describe('applyUpdates tests\n', function () {
9+
var scrollSettings = {
10+
datasource: 'myMultipageDatasource',
11+
adapter: 'adapter',
12+
itemHeight: 20,
13+
viewportHeight: 100
14+
};
15+
16+
function getBottomPaddingHeight(viewport) {
17+
var viewportChildren = viewport.children();
18+
var bottomPadding = viewportChildren[viewportChildren.length - 1];
19+
return parseInt(angular.element(bottomPadding).css('height'), 10);
20+
}
21+
22+
var initialBottomHeight = 240;
23+
24+
it('should delete last row out of buffer', function () {
25+
runTest(scrollSettings,
26+
function (viewport, scope) {
27+
28+
viewport.scrollTop(1000);
29+
viewport.trigger('scroll');
30+
viewport.scrollTop(1000);
31+
viewport.trigger('scroll');
32+
viewport.scrollTop(0);
33+
viewport.trigger('scroll');
34+
35+
expect(getBottomPaddingHeight(viewport)).toBe(initialBottomHeight);
36+
scope.adapter.applyUpdates(20, []);
37+
expect(getBottomPaddingHeight(viewport)).toBe(initialBottomHeight - scrollSettings.itemHeight);
38+
39+
}
40+
);
41+
});
42+
43+
});
44+
45+
});

0 commit comments

Comments
 (0)