Skip to content

Commit 990e0bf

Browse files
dhiltdhilt
authored
Merge pull request #184 from angular-ui/buffer-first-next
Buffer first, next refactoring
2 parents 6f19352 + cd6a5cf commit 990e0bf

16 files changed

+455
-319
lines changed

‎demo/adapterSync/adapterSync.html

Lines changed: 67 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,82 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<meta charset="utf-8">
5-
<title>Adapter sync</title>
6-
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
7-
<script src="../../dist/ui-scroll.js"></script>
8-
<script src="adapterSync.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-
</style>
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="adapterSync.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>
2023
</head>
21-
<body ng-controller="mainController" ng-app="application">
24+
<body ng-controller="mainController as mainCtrl" ng-app="application">
2225

2326
<div class="cont cont-global">
2427

25-
<a class="back" href="../index.html">browse other examples</a>
28+
<a class="back" href="../index.html">browse other examples</a>
2629

27-
<h1 class="page-header page-header-exapmle">Adapter: append, prepend and remove sync</h1>
30+
<h1 class="page-header page-header-exapmle">Adapter: append, prepend and remove sync</h1>
2831

29-
<div class="description">
30-
<p>
31-
In this demo we are playing with adding/removing items via adapter append, prepend and applyUpdates methods.
32-
All changes have to be synced and stored on the back end.
33-
For this purpose a special Server factory was introduced to emulate the remote.
34-
Some public methods are implemented by this Server factory:<br/>
35-
<ul>
36-
<li>
37-
<em>appendItem(params)</em> to add one new item (based on params) to the end of the remote data set,
38-
</li>
39-
<li>
40-
<em>prependItem(params)</em> to add one new item (based on params) in the beginning of the remote data
41-
set,
42-
</li>
43-
<li>
44-
<em>removeItemById(id)</em> remove one item (based on id) form the remote data set,
45-
set,
46-
</li>
47-
<li>
48-
<em>request(index, count)</em> just to fetch a bunch of items for the viewport.
49-
</li>
50-
</ul>
51-
The initial data set consists of 90 items and can be extended unlimitedly.
52-
</p>
53-
<p> Follow the sources of the demo! The implementation of the Server factory is not so trivial, it is based on
54-
indexes variations. Also you may see that new items would not be appended (<em>adapter.append()</em>) to the
55-
viewport immediately if the EOF (end of file) is not reached. The same is true for prepend operation
56-
(<em>adapter.prepend()</em>): BOF (begin of file) must be reached, otherwise your new item will be rendered
57-
only after scrolling to the very top... This is important to build proper UI.
58-
</p>
59-
</div>
32+
<div class="description">
33+
<p>
34+
In this demo we are playing with adding/removing items via adapter append, prepend and applyUpdates methods.
35+
All changes made on the front end have to be synced and stored on the back end.
36+
For this purpose a special Server factory was introduced to emulate the remote.
37+
The following public methods are implemented by this Server factory:<br/>
38+
<ul>
39+
<li>
40+
<em>appendItem(params)</em> to add one new item (based on params) to the end of the remote data set,
41+
</li>
42+
<li>
43+
<em>prependItem(params)</em> to add one new item (based on params) to the beginning of the remote data
44+
set,
45+
</li>
46+
<li>
47+
<em>removeItemById(id)</em> remove one item (based on id) form the remote data set,
48+
set,
49+
</li>
50+
<li>
51+
<em>request(index, count)</em> just to fetch a bunch of items for the viewport.
52+
</li>
53+
</ul>
54+
The initial data set consists of 40 items and can be extended unlimitedly.
55+
</p>
56+
<p> Follow the sources of the demo! The implementation of the Server factory is not trivial, it is based on
57+
indexes variations. Also you may see that new items would not be appended (<em>adapter.append()</em>) to the
58+
viewport immediately if the EOF (end of file) is not reached. The same is true for prepend operation
59+
(<em>adapter.prepend()</em>): BOF (begin of file) must be reached, otherwise your new item will be rendered
60+
only after scrolling to the very top... This is important to build proper UI.
61+
</p>
62+
</div>
6063

61-
<div class="actions">
62-
<button ng-click="prepend()">Prepend one item</button>
63-
<button ng-click="append()">Append one item</button>
64-
<!--button ng-click="removeAll()">Clear the viewport</button-->
65-
</div>
64+
<div class="actions">
65+
<button ng-click="mainCtrl.prepend()">Prepend one item</button>
66+
<button ng-click="mainCtrl.append()">Append one item</button>
67+
<!--button ng-click="mainCtrl.removeAll()">Clear the viewport</button-->
68+
</div>
6669

67-
<br/>
70+
<br/>
6871

69-
<ul class="viewport2" ui-scroll-viewport>
70-
<li ui-scroll="item in datasource" adapter="adapter">
71-
<div>
72-
<span>{{item.content}} <span class="uid">({{item.id}})</span></span>
73-
<span class="remove" ng-click="remove(item)">[x]</span>
74-
</div>
75-
</li>
76-
</ul>
72+
<ul class="viewport2" ui-scroll-viewport>
73+
<li ui-scroll="item in mainCtrl.datasource" adapter="mainCtrl.adapter">
74+
<div>
75+
<span>{{$index}}: {{item.content}} <span class="uid">({{item.id}})</span></span>
76+
<span class="remove" ng-click="mainCtrl.remove(item)">[x]</span>
77+
</div>
78+
</li>
79+
</ul>
7780

7881
</div>
7982
</body>

‎demo/adapterSync/adapterSync.js

Lines changed: 46 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ app.factory('Server', [
1313

1414
data: [],
1515

16+
absIndex: 1,
17+
1618
generateId: function () {
1719
var d = '-';
1820
function S4() {
@@ -21,11 +23,11 @@ app.factory('Server', [
2123
return (S4() + S4() + d + S4() + d + S4() + d + S4() + d + S4() + S4() + S4());
2224
},
2325

24-
generateItem: function (number) {
26+
generateItem: function (index) {
2527
return {
26-
index: number,
28+
index: index,
2729
id: this.generateId(),
28-
content: 'Item #' + number
30+
content: 'Item #' + this.absIndex++
2931
}
3032
},
3133

@@ -68,16 +70,14 @@ app.factory('Server', [
6870
},
6971

7072
prependItem: function (params) {
71-
var prependedDataIndex = this.firstIndex-- - 1;
72-
var newItem = this.generateItem(prependedDataIndex);
73+
var newItem = this.generateItem(--this.firstIndex);
7374
newItem.content += params;
7475
this.data.unshift(newItem);
7576
return this.returnDeferredResult(newItem);
7677
},
7778

7879
appendItem: function (params) {
79-
var appendedDataIndex = this.lastIndex++ + 1;
80-
var newItem = this.generateItem(appendedDataIndex);
80+
var newItem = this.generateItem(++this.lastIndex);
8181
newItem.content += params;
8282
this.data.push(newItem);
8383
return this.returnDeferredResult(newItem);
@@ -88,13 +88,29 @@ app.factory('Server', [
8888
for (var i = 0; i < length; i++) {
8989
if (this.data[i].id === itemId) {
9090
this.data.splice(i, 1);
91-
for (var j = i; j < length - 1; j++) {
92-
this.data[j].index--;
93-
}
91+
this.setIndicies();
9492
return this.returnDeferredResult(true);
9593
}
9694
}
9795
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+
}
98114
}
99115
};
100116

@@ -109,7 +125,9 @@ app.factory('Server', [
109125
app.controller('mainController', [
110126
'$scope', 'Server', function ($scope, Server) {
111127

112-
$scope.datasource = {
128+
var ctrl = this;
129+
130+
ctrl.datasource = {
113131
get: function (index, count, success) {
114132
console.log('request by index = ' + index + ', count = ' + count);
115133
Server.request(index, count).then(function (result) {
@@ -121,34 +139,40 @@ app.controller('mainController', [
121139
}
122140
};
123141

124-
$scope.prepend = function () {
142+
$scope.$watch('adapter', (prev, next) => {
143+
console.log('The adapter has been initialized');
144+
});
145+
146+
ctrl.prepend = function () {
125147
Server.prependItem(' ***').then(function (newItem) {
126-
if ($scope.adapter.isBOF()) {
127-
$scope.adapter.prepend([newItem]);
148+
if (ctrl.adapter.isBOF()) {
149+
ctrl.adapter.prepend([newItem]);
128150
}
129151
});
130152
};
131153

132-
$scope.append = function () {
154+
ctrl.append = function () {
133155
Server.appendItem(' ***').then(function (newItem) {
134-
if ($scope.adapter.isEOF()) {
135-
$scope.adapter.append([newItem]);
156+
if (ctrl.adapter.isEOF()) {
157+
ctrl.adapter.append([newItem]);
136158
}
137159
});
138160
};
139161

140-
/*$scope.removeAll = function () {
141-
$scope.adapter.applyUpdates(function (item) {
162+
// todo dhilt : need to implement it properly
163+
ctrl.removeAll = function () {
164+
ctrl.adapter.applyUpdates(function (item) {
142165
if (item.id) {
166+
Server.removeItemById(item.id);
143167
return [];
144168
}
145169
});
146-
};*/
170+
};
147171

148-
$scope.remove = function (itemRemove) {
172+
ctrl.remove = function (itemRemove) {
149173
Server.removeItemById(itemRemove.id).then(function (result) {
150174
if (result) {
151-
$scope.adapter.applyUpdates(function (item) {
175+
ctrl.adapter.applyUpdates(function (item) {
152176
if (item.id === itemRemove.id) {
153177
return [];
154178
}

‎dist/ui-scroll-grid.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)