Skip to content

Commit ff71620

Browse files
dhiltdhilt
committed
adapter sync demos update
1 parent f1a3516 commit ff71620

File tree

6 files changed

+309
-329
lines changed

6 files changed

+309
-329
lines changed

‎demo/adapterSync/adapterSync.html

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,12 +39,12 @@ <h1 class="page-header page-header-exapmle">Adapter: append, prepend and remove
3939
<div class="description">
4040
<p>
4141
This demo had been created to show Adapter 'append', 'prepend' and 'applyUpdates' methods in action.
42-
The main point here is that all changes made on the front end have to be synced and stored on the back end.
42+
The main point here is that all changes made on the front end have to be synced with the back end.
4343
For this purpose a special Server module was introduced to emulate the remote server.
4444
The following public methods are implemented by this Server factory:<br/>
4545
<ul>
4646
<li>
47-
<b>request(index, count)</b> just to fetch a bunch of items for the viewport;
47+
<b>request(index, count)</b> just to fetch a bunch of items for the viewport (used by ui-scroll datasource.get);
4848
</li>
4949
<li>
5050
<b>appendItem(params)</b> to add one new item (based on params) to the end of the remote data set;
@@ -71,9 +71,8 @@ <h1 class="page-header page-header-exapmle">Adapter: append, prepend and remove
7171
The implementation of the Server factory is not trivial, it is based on indicies variations.
7272
Also you may see that new items would not be appended (via 'Append one item' or
7373
'Insert some after index' buttons) to the viewport immediately if the EOF (end of file) is not reached.
74-
The same is true for prepend operation ('Prepend one item'): BOF (begin of file) must be reached,
75-
otherwise your new item will be rendered only after scrolling to the very top...
76-
This is important to build proper UI.
74+
The same is true for prepend operations ('Prepend one item'): BOF (begin of file) must be reached,
75+
otherwise your new items will be rendered only after scrolling to the very top...
7776
</p>
7877
</div>
7978

‎demo/adapterSync/server.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ angular.module('server', []).factory('Server',
135135
return this.returnDeferredResult(null);
136136
},
137137

138-
setIndicies: function() {
138+
setIndicies: function () {
139139
if(!this.data.length) {
140140
this.firstIndex = 1;
141141
this.lastIndex = 1;
@@ -157,6 +157,5 @@ angular.module('server', []).factory('Server',
157157
ServerFactory.init();
158158

159159
return ServerFactory;
160-
161160
}
162161
]);

‎demo/append/append.html

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<title>Append and prepend</title>
66
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
77
<script src="../../dist/ui-scroll.js"></script>
8+
<script src="server.js"></script>
89
<script src="append.js"></script>
910
<link rel="stylesheet" href="../css/style.css" type="text/css"/>
1011
</head>
@@ -19,29 +20,19 @@ <h1 class="page-header page-header-exapmle">Adapter: append and prepend sync</h1
1920
<div class="description">
2021
<p>
2122
This sample demonstrates an ability to append and prepend new items to the initial data set via adapter.
22-
New appended and prepended items have to be synced and stored on the server side.
23-
For this purpose a special Server factory was implemented to emulate the remote.
24-
Three public methods are supported by this Server factory:<br/>
25-
<ul>
26-
<li>
27-
<em>appendItem(params)</em> to add one new item (based on params) to the end of the remote data set,
28-
</li>
29-
<li>
30-
<em>prependItem(params)</em> to add one new item (based on params) in the beginning of the remote data
31-
set,
32-
</li>
33-
<li>
34-
<em>request(index, count)</em> just to fetch a bunch of items for the viewport.
35-
</li>
36-
</ul>
37-
The initial data set consists of 50 items and can be extended unlimitedly.
23+
New appended and prepended items have to be synced with the real data source.
24+
For this purpose a special Server module was implemented to emulate the remote.
25+
The Server hides all indicies magic, so the front-end controller logic (ui-scroll datasource implementation) looks very simple.
3826
</p>
3927
<p>
40-
Then we have <em>adapter.append()</em> and <em>adapter.prepend()</em> methods to provide an injection of
41-
just created item to the viewport. Note that in this demo new items would not be appended to the viewport if
42-
the EOF (end of file) is not reached. Also new items would not be prepended to the viewport if the BOF
43-
(begin of file) is not reached. This is very important to build proper UI. Follow the sources of the demo!
28+
Two methods are implemented on the controller's scope: prepend and append.
29+
They work with two Server methods: prependItem and appendItem.
30+
The additional point is that new items would not be appended to the viewport if the EOF (end of file) is not reached.
31+
Also new items would not be prepended to the viewport if the BOF (begin of file) is not reached.
4432
</p>
33+
<p>
34+
For more complex and powerful sample you may follow <a href="../adapterSync/adapterSync.html">this</a> demo.
35+
</p>
4536
</div>
4637

4738
<div class="actions">

‎demo/append/append.js

Lines changed: 32 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -1,124 +1,34 @@
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-
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-
};
56-
if (start <= end) {
57-
for (var i = start; i <= end; i++) {
58-
if (item = self.getItem(i)) {
59-
result.items.push(item);
60-
}
61-
}
62-
}
63-
deferred.resolve(result);
64-
}, self.delay);
65-
66-
return deferred.promise;
67-
},
68-
69-
prependItem: function (params) {
70-
var prependedDataIndex = this.first - this.prependedData.length - 1;
71-
var newItem = this.generateItem(prependedDataIndex);
72-
newItem.content += params;
73-
this.prependedData.push(newItem);
74-
return newItem;
75-
},
76-
77-
appendItem: function (params) {
78-
var appendedDataIndex = this.max + this.appendedData.length + 1;
79-
var newItem = this.generateItem(appendedDataIndex);
80-
newItem.content += params;
81-
this.appendedData.push(newItem);
82-
return newItem;
83-
}
84-
};
85-
86-
ServerFactory.init();
87-
88-
return ServerFactory;
89-
90-
}
91-
]);
92-
1+
var app = angular.module('application', ['ui.scroll', 'server']);
932

943
app.controller('mainController', [
95-
'$scope', 'Server', function ($scope, Server) {
96-
97-
$scope.datasource = {
98-
get: function (index, count, success) {
99-
console.log('request by index = ' + index + ', count = ' + count);
100-
Server.request(index, count).then(function (result) {
101-
if (result.items.length) {
102-
console.log('resolved ' + result.items.length + ' items');
103-
}
104-
success(result.items);
105-
});
106-
}
107-
};
108-
109-
$scope.prepend = function () {
110-
var newItem = Server.prependItem(' (new)*');
111-
if ($scope.adapter.isBOF()) {
112-
$scope.adapter.prepend([newItem]);
113-
}
114-
};
115-
116-
$scope.append = function () {
117-
var newItem = Server.appendItem(' (new)*');
118-
if ($scope.adapter.isEOF()) {
119-
$scope.adapter.append([newItem]);
120-
}
121-
};
122-
123-
}
124-
]);
4+
'$scope', 'Server',
5+
function($scope, Server) {
6+
7+
$scope.datasource = {
8+
get: function(index, count, success) {
9+
console.log('request by index = ' + index + ', count = ' + count);
10+
Server.request(index, count).then(function(result) {
11+
if (result.items.length) {
12+
console.log('resolved ' + result.items.length + ' items');
13+
}
14+
success(result.items);
15+
});
16+
}
17+
};
18+
19+
$scope.prepend = function() {
20+
var newItem = Server.prependItem(' (new)*');
21+
if ($scope.adapter.isBOF()) {
22+
$scope.adapter.prepend([newItem]);
23+
}
24+
};
25+
26+
$scope.append = function() {
27+
var newItem = Server.appendItem(' (new)*');
28+
if ($scope.adapter.isEOF()) {
29+
$scope.adapter.append([newItem]);
30+
}
31+
};
32+
33+
}
34+
]);

‎demo/append/server.js

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
angular.module('server', []).factory('Server',
2+
['$timeout', '$q', function($timeout, $q) {
3+
4+
var ServerFactory = {
5+
6+
max: 50,
7+
8+
first: 1,
9+
10+
delay: 100,
11+
12+
data: [],
13+
14+
prependedData: [],
15+
16+
appendedData: [],
17+
18+
generateItem: function(number) {
19+
return {
20+
number: number,
21+
content: 'Item #' + number
22+
}
23+
},
24+
25+
init: function() {
26+
for (var i = this.first - 1; i <= this.max; i++) {
27+
this.data.push(this.generateItem(i));
28+
}
29+
},
30+
31+
getItem: function(index) {
32+
if (index < this.first) {
33+
return this.prependedData[(-1) * index];
34+
} else if (index > this.max) {
35+
return this.appendedData[index - this.max - 1];
36+
} else {
37+
return this.data[index];
38+
}
39+
},
40+
41+
request: function(index, count) {
42+
var self = this;
43+
var deferred = $q.defer();
44+
45+
var start = index;
46+
var end = index + count - 1;
47+
48+
$timeout(function() {
49+
var item, result = {
50+
items: []
51+
};
52+
if (start <= end) {
53+
for (var i = start; i <= end; i++) {
54+
if (item = self.getItem(i)) {
55+
result.items.push(item);
56+
}
57+
}
58+
}
59+
deferred.resolve(result);
60+
}, self.delay);
61+
62+
return deferred.promise;
63+
},
64+
65+
prependItem: function(params) {
66+
var prependedDataIndex = this.first - this.prependedData.length - 1;
67+
var newItem = this.generateItem(prependedDataIndex);
68+
newItem.content += params;
69+
this.prependedData.push(newItem);
70+
return newItem;
71+
},
72+
73+
appendItem: function(params) {
74+
var appendedDataIndex = this.max + this.appendedData.length + 1;
75+
var newItem = this.generateItem(appendedDataIndex);
76+
newItem.content += params;
77+
this.appendedData.push(newItem);
78+
return newItem;
79+
}
80+
};
81+
82+
ServerFactory.init();
83+
84+
return ServerFactory;
85+
}
86+
]);

0 commit comments

Comments
 (0)