Skip to content

Commit c5b3792

Browse files
dhiltdhilt
committed
Append and prepend sync demo
1 parent 070a12c commit c5b3792

File tree

5 files changed

+230
-0
lines changed

5 files changed

+230
-0
lines changed

‎demo/append/append.html

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Append and prepend</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="../../dist/ui-scroll-jqlite.js"></script>
9+
<script src="append.js"></script>
10+
<link rel="stylesheet" href="../css/style.css" type="text/css"/>
11+
</head>
12+
<body ng-controller="mainController" ng-app="application">
13+
14+
<div class="cont cont-global">
15+
16+
<a class="back" href="../index.html">browse other examples</a>
17+
18+
<h1 class="page-header page-header-exapmle">Append and prepend demo</h1>
19+
20+
<div class="description">
21+
<p>
22+
This sample demonstrates an ability to append and prepend new items to the initial data set via adapter.
23+
New appended and prepended items have to be synced and stored on the server side.
24+
For this purpose a special Server factory was implemented to emulate the remote.
25+
Three public methods are supported by this Server factory:<br/>
26+
<ul>
27+
<li>
28+
<em>appendItem(params)</em> to add one new item (based on params) to the end of the remote data set,
29+
</li>
30+
<li>
31+
<em>prependItem(params)</em> to add one new item (based on params) in the beginning of the remote data
32+
set,
33+
</li>
34+
<li>
35+
<em>request(index, count)</em> just to fetch a bunch of items for the viewport.
36+
</li>
37+
</ul>
38+
The initial data set consists of 50 items and can be extended unlimitedly.
39+
</p>
40+
<p>
41+
Then we have <em>adapter.append()</em> and <em>adapter.prepend()</em> methods to provide an injection of
42+
just created item to the viewport. Note that in this demo new items would not be appended to the viewport if
43+
the EOF (end of file) is not reached. Also new items would not be prepended to the viewport if the BOF
44+
(begin of file) is not reached. This is very important to build proper UI. Learn sources!
45+
</p>
46+
</div>
47+
48+
<div class="actions">
49+
<button ng-click="prepend()">Prepend one item</button>
50+
<button ng-click="append()">Append one item</button>
51+
</div>
52+
53+
<br/>
54+
55+
<ul class="viewport2" ui-scroll-viewport>
56+
<li ui-scroll="item in datasource" adapter="adapter">
57+
<span class="title">{{item.content}}</span>
58+
</li>
59+
</ul>
60+
61+
</div>
62+
63+
</body>
64+
</html>

‎demo/append/append.js

+149
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
var app = angular.module('application', ['ui.scroll', 'ui.scroll.jqlite']);
2+
3+
app.factory('Server', [
4+
'$timeout', '$q', function ($timeout, $q) {
5+
6+
var ServerFactory = {
7+
8+
max: 50,
9+
10+
first: 1,
11+
12+
delay: 100,
13+
14+
data: [],
15+
16+
prependedData: [],
17+
18+
appendedData: [],
19+
20+
generateItem: function (number) {
21+
return {
22+
number: number,
23+
content: 'Item #' + number
24+
}
25+
},
26+
27+
init: function () {
28+
for (var i = this.first - 1; i <= this.max; i++) {
29+
this.data.push(this.generateItem(i));
30+
}
31+
},
32+
33+
getItem: function (index) {
34+
if (index < this.first) {
35+
return this.prependedData[(-1) * index];
36+
}
37+
else if (index > this.max) {
38+
return this.appendedData[index - this.max - 1];
39+
}
40+
else {
41+
return this.data[index];
42+
}
43+
},
44+
45+
request: function (index, count) {
46+
var self = this;
47+
var deferred = $q.defer();
48+
49+
var start = index;
50+
var end = index + count - 1;
51+
52+
$timeout(function () {
53+
var item, result = {
54+
items: [],
55+
bof: false,
56+
eof: false
57+
};
58+
if (start <= end) {
59+
for (var i = start; i <= end; i++) {
60+
if (item = self.getItem(i)) {
61+
result.items.push(item);
62+
}
63+
else { // if no item then begin or end of file is reached
64+
if (start <= self.first - self.prependedData.length) {
65+
result.bof = true;
66+
}
67+
if (end > self.max + self.appendedData.length) {
68+
result.eof = true;
69+
}
70+
}
71+
}
72+
}
73+
deferred.resolve(result);
74+
}, self.delay);
75+
76+
return deferred.promise;
77+
},
78+
79+
prependItem: function (params) {
80+
var prependedDataIndex = this.first - this.prependedData.length - 1;
81+
var newItem = this.generateItem(prependedDataIndex);
82+
newItem.content += params;
83+
this.prependedData.push(newItem);
84+
return newItem;
85+
},
86+
87+
appendItem: function (params) {
88+
var appendedDataIndex = this.max + this.appendedData.length + 1;
89+
var newItem = this.generateItem(appendedDataIndex);
90+
newItem.content += params;
91+
this.appendedData.push(newItem);
92+
return newItem;
93+
}
94+
};
95+
96+
ServerFactory.init();
97+
98+
return ServerFactory;
99+
100+
}
101+
]);
102+
103+
104+
app.controller('mainController', [
105+
'$scope', 'Server', function ($scope, Server) {
106+
107+
var bof = false, eof = false;
108+
109+
function mySuccess(result, success) {
110+
bof = eof = false;
111+
if (result.bof) {
112+
bof = true;
113+
console.log('begin of file is reached');
114+
}
115+
if (result.eof) {
116+
eof = true;
117+
console.log('end of file is reached');
118+
}
119+
if (result.items.length) {
120+
console.log('resolved ' + result.items.length + ' items');
121+
}
122+
success(result.items);
123+
}
124+
125+
$scope.datasource = {
126+
get: function (index, count, success) {
127+
console.log('request by index = ' + index + ', count = ' + count);
128+
Server.request(index, count).then(function (result) {
129+
mySuccess(result, success);
130+
});
131+
}
132+
};
133+
134+
$scope.prepend = function () {
135+
var newItem = Server.prependItem(' (new)*');
136+
if (bof) {
137+
$scope.adapter.prepend([newItem]);
138+
}
139+
};
140+
141+
$scope.append = function () {
142+
var newItem = Server.appendItem(' (new)*');
143+
if (eof) {
144+
$scope.adapter.append([newItem]);
145+
}
146+
};
147+
148+
}
149+
]);

‎demo/css/style.css

+6
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,12 @@
169169
font-size: 14px;
170170
font-weight: normal;
171171
}
172+
.viewport2 {
173+
height: 300px;
174+
list-style: none;
175+
padding: 0;
176+
width: 300px;
177+
}
172178
.viewport {
173179
margin-top: 15px;
174180
height: 300px;

‎demo/css/style.less

+6
Original file line numberDiff line numberDiff line change
@@ -233,6 +233,12 @@
233233
}
234234
}
235235

236+
.viewport2 {
237+
height: 300px;
238+
list-style: none;
239+
padding: 0;
240+
width: 300px;
241+
}
236242

237243
.viewport {
238244
margin-top: 15px;

‎demo/index.html

+5
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,11 @@ <h1 class="page-header">Scroller Examples</h1>
109109
Adapter (updatable scroller)
110110
</a>
111111
</li>
112+
<li>
113+
<a href="append/append.html">
114+
Append and prepend sync demo
115+
</a>
116+
</li>
112117
<li>
113118
<a href="animation/animation.html">
114119
Animation

0 commit comments

Comments
 (0)