Skip to content

Commit ff1fb37

Browse files
dhiltdhilt
committed
examples updates
1 parent 298431a commit ff1fb37

File tree

12 files changed

+95
-72
lines changed

12 files changed

+95
-72
lines changed

‎demo/adapter/adapter.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,14 @@ <h1 class="page-header page-header-exapmle">Adapter (updatable scroller)</h1>
1818

1919
<div class="description">
2020
<ul>
21-
<li>New mechanism of scroller data custom processing is introduced. </li>
22-
<li>Single datasource but two different viewports with two different processing adapters.</li>
23-
<li>The firstListAdapter is initially defined on ctrl $scope as a first level object with some property.</li>
24-
<li>The second.list.adapter chain is not defined on ctrl $scope. The scroller defines it during linking.</li>
21+
<li>This is a simple demo which demonstrates some basic Adapter usage.</li>
22+
<li>For all operations presented here the only one Adapter method is being used: applyUpdates.</li>
23+
<li>In this demo we have single datasource defined on the Main Controller .</li>
24+
<li>And two different viewports with two different processing Adapters (on the First and the Second Controllers).</li>
2525
</ul>
2626
</div>
2727

28-
<div class="viewport-group">
28+
<div class="viewport-group" ng-controller="firstController">
2929
<h2 class="viewport-group-tilte">1st list</h2>
3030

3131
<div class="info">
@@ -49,7 +49,7 @@ <h2 class="viewport-group-tilte">1st list</h2>
4949

5050
<hr>
5151

52-
<div class="viewport-group">
52+
<div class="viewport-group" ng-controller="secondController">
5353
<h2 class="viewport-group-tilte">2st list</h2>
5454

5555
<div class="info">

‎demo/adapter/adapter.js

Lines changed: 56 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,54 @@
1-
angular.module('application', ['ui.scroll']).controller('mainController', [
2-
'$scope', '$log', '$timeout', function($scope, console, $timeout) {
3-
var datasource, idList1, idList2;
4-
datasource = {};
5-
datasource.get = function(index, count, success) {
6-
return $timeout(function() {
7-
var i, item, j, ref, ref1, result;
8-
result = [];
9-
for (i = j = ref = index, ref1 = index + count - 1; ref <= ref1 ? j <= ref1 : j >= ref1; i = ref <= ref1 ? ++j : --j) {
10-
item = {};
11-
item.id = i;
12-
item.content = "item #" + i;
13-
result.push(item);
14-
}
15-
return success(result);
16-
}, 100);
17-
};
18-
$scope.datasource = datasource;
1+
angular.module('application', ['ui.scroll'])
2+
3+
.controller('mainController', [
4+
'$scope', '$timeout',
5+
function ($scope, $timeout) {
6+
7+
$scope.title = 'Main Controller';
8+
9+
var datasource = {};
10+
11+
datasource.get = function (index, count, success) {
12+
$timeout(function () {
13+
var result = [];
14+
for (var i = index; i <= index + count - 1; i++) {
15+
result.push({
16+
id: i,
17+
content: "item #" + i
18+
});
19+
}
20+
success(result);
21+
}, 100);
22+
};
23+
24+
$scope.datasource = datasource;
25+
}
26+
])
27+
28+
.controller('firstController', ['$scope', function ($scope) {
29+
$scope.title = 'First Controller';
30+
1931
$scope.firstListAdapter = {
2032
remain: true
2133
};
22-
$scope.updateList1 = function() {
23-
return $scope.firstListAdapter.applyUpdates(function(item, scope) {
34+
35+
$scope.updateList1 = function () {
36+
return $scope.firstListAdapter.applyUpdates(function (item, scope) {
2437
return item.content += ' *';
2538
});
2639
};
27-
$scope.removeFromList1 = function() {
28-
return $scope.firstListAdapter.applyUpdates(function(item, scope) {
40+
41+
$scope.removeFromList1 = function () {
42+
return $scope.firstListAdapter.applyUpdates(function (item, scope) {
2943
if (scope.$index % 2 === 0) {
3044
return [];
3145
}
3246
});
3347
};
34-
idList1 = 1000;
35-
$scope.addToList1 = function() {
36-
return $scope.firstListAdapter.applyUpdates(function(item, scope) {
48+
49+
var idList1 = 1000;
50+
$scope.addToList1 = function () {
51+
return $scope.firstListAdapter.applyUpdates(function (item, scope) {
3752
var newItem;
3853
newItem = void 0;
3954
if (scope.$index === 2) {
@@ -46,42 +61,38 @@ angular.module('application', ['ui.scroll']).controller('mainController', [
4661
}
4762
});
4863
};
49-
$scope.updateList2 = function() {
50-
return $scope.second.list.adapter.applyUpdates(function(item, scope) {
64+
}])
65+
66+
.controller('secondController', ['$scope', function ($scope) {
67+
$scope.title = 'Second Controller';
68+
69+
$scope.updateList2 = function () {
70+
return $scope.second.list.adapter.applyUpdates(function (item, scope) {
5171
return item.content += ' *';
5272
});
5373
};
54-
$scope.removeFromList2 = function() {
55-
return $scope.second.list.adapter.applyUpdates(function(item, scope) {
74+
75+
$scope.removeFromList2 = function () {
76+
return $scope.second.list.adapter.applyUpdates(function (item, scope) {
5677
if (scope.$index % 2 !== 0) {
5778
return [];
5879
}
5980
});
6081
};
61-
idList2 = 2000;
62-
return $scope.addToList2 = function() {
63-
return $scope.second.list.adapter.applyUpdates(function(item, scope) {
82+
83+
var idList2 = 2000;
84+
$scope.addToList2 = function () {
85+
return $scope.second.list.adapter.applyUpdates(function (item, scope) {
6486
var newItem;
6587
newItem = void 0;
6688
if (scope.$index === 4) {
6789
newItem = {
6890
id: idList2,
69-
content: 'a new one #' + idList1
91+
content: 'a new one #' + idList2
7092
};
7193
idList2++;
7294
return [item, newItem];
7395
}
7496
});
7597
};
76-
}
77-
]);
78-
79-
80-
81-
82-
/*
83-
//# sourceURL=src/adapter.js
84-
*/
85-
86-
// ---
87-
// generated by coffee-script 1.9.2
98+
}]);

‎demo/append/append.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ <h1 class="page-header page-header-exapmle">Append and prepend demo</h1>
4040
Then we have <em>adapter.append()</em> and <em>adapter.prepend()</em> methods to provide an injection of
4141
just created item to the viewport. Note that in this demo new items would not be appended to the viewport if
4242
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. Learn sources!
43+
(begin of file) is not reached. This is very important to build proper UI. Follow the sources of the demo!
4444
</p>
4545
</div>
4646

‎demo/css/style.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -291,7 +291,7 @@
291291
}
292292
#viewport-scrollBubblingPrevent-wrap:before,
293293
#viewport-scrollBubblingPrevent-wrap:after {
294-
content: "padding";
294+
content: "wrapper";
295295
position: absolute;
296296
width: 100%;
297297
text-align: center;

‎demo/css/style.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -384,7 +384,7 @@
384384

385385
&:before,
386386
&:after {
387-
content: "padding";
387+
content: "wrapper";
388388
position: absolute;
389389
width: 100%;
390390
text-align: center;

‎demo/grid-layout-manipulations/grid-layout-manipulations.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ <h1 class="page-header page-header-exapmle">Grid layout manipulations</h1>
2929
</div>
3030
<pre>
3131
layout = $scope.adapter.gridAdapter.getLayout()</pre>
32-
Note that saving via cookie does not work when you run this demo locally.
32+
Note that saving via cookie requires web-server.
3333
</p>
3434
</div>
3535

‎demo/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -121,12 +121,12 @@ <h1 class="page-header">Scroller Examples</h1>
121121
</li>
122122
<li>
123123
<a href="insideComponent/insideComponent.html">
124-
Inside the es6 component
124+
Inside Angular 1.5+ Component
125125
</a>
126126
</li>
127127
<li>
128128
<a href="adapterOnController/adapterOnController.html">
129-
Append on controller
129+
Adapter "on controller"
130130
</a>
131131
</li>
132132
<li>

‎demo/insideComponent/insideComponent.html

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<title>Inside es6 component</title>
5+
<title>Inside Angular 1.5+ component</title>
66
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
77
<script src="../../dist/ui-scroll.js"></script>
88
<script src="insideComponent.js"></script>
@@ -14,10 +14,14 @@
1414

1515
<a class="back" href="../index.html">browse other examples</a>
1616

17-
<h1 class="page-header page-header-exapmle">Scroller inside ES6 Component</h1>
17+
<h1 class="page-header page-header-exapmle">Scroller inside Angular 1.5+ Component</h1>
1818

1919
<div class="description">
20-
This sample demonstrates encapsulation of the ui-scroll directive inside some custom component (Angular 1.5+). The controller of this Component is implemented as ES6 class. Note that this demo might not work in old browsers which don't support ES6 classes.
20+
This sample demonstrates encapsulation of the ui-scroll directive inside some custom component (Angular 1.5+).
21+
22+
To demonstrate the work of the Adapter, click on any row. The text of the item should change after click.
23+
24+
The controller of this Component is implemented as ES6 class. Note that this demo might not work in old browsers which don't support ES6 classes.
2125
</div>
2226

2327
<my-component></my-component>

‎demo/insideComponent/insideComponent.js

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
(function(angular) {
1+
(function (angular) {
22

33
class Ctrl {
4-
constructor($timeout) {
5-
this.timeout = $timeout;
6-
this.show = true;
4+
constructor($timeout, $scope) {
5+
this.timeout = $timeout;
6+
this.show = true;
7+
this.$scope = $scope;
78
}
89

910
get(index, count, success) {
@@ -20,7 +21,7 @@
2021
}
2122

2223
update(id) {
23-
return this.scrollAdapter.applyUpdates(function(item) {
24+
return this.scrollAdapter.applyUpdates(function (item) {
2425
if (item.id === id) {
2526
item.name += " *";
2627
}
@@ -40,5 +41,5 @@
4041
'</div>',
4142
controller: Ctrl
4243
});
43-
44+
4445
})(angular);

‎demo/insideDirective/insideDirective.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ <h1 class="page-header page-header-exapmle">Scroller inside the directive</h1>
1818

1919
<div class="description">
2020
This sample demonstrates encapsulation of the ui-scroll directive inside another custom directive wich has it's own controller and wich uses "Controller As" syntax in it's template.
21+
To demonstrate the work of the Adapter, click on any row. The text of the item should change after click.
2122
</div>
2223

2324
<div ng-controller="mainController">

‎demo/scopeDatasource/scopeDatasource.html

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,14 @@ <h1 class="page-header page-header-exapmle">Datasource on scope (not as service)
2828

2929
<div class="code">
3030
<pre>
31-
angular.module('application', ['ui.scroll']).controller('mainController', ...
31+
angular.module('application', ['ui.scroll'])
32+
.controller('mainController', ...
3233

33-
$scope.datasource = {}
34-
$scope.datasource.get = function...</pre>
34+
var get = function(index, count, success) { ... };
35+
36+
$scope.datasource = { get: get };
37+
38+
);</pre>
3539
</div>
3640
</div>
3741

‎demo/serviceDatasource/serviceDatasource.html

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,13 @@ <h1 class="page-header page-header-exapmle">Datasource as service</h1>
2727

2828
<div class="code">
2929
<pre>
30-
angular.module('application', ['ui.scroll']).factory('datasource', ...
30+
angular.module('application', ['ui.scroll'])
31+
.factory('datasource', function() { ...
3132

32-
var get = function ...
33+
var get = function(index, count, success) { ... };
3334

34-
return { get: get };</pre>
35+
return { get: get };
36+
});</pre>
3537
</div>
3638

3739
</div>

0 commit comments

Comments
 (0)