Skip to content

Commit e3ca2ff

Browse files
dhiltdhilt
committed
examples refactoring
1 parent a9045e6 commit e3ca2ff

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+9147
-19
lines changed

‎demo/adapter/adapter.html

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!doctype html>
2+
<html ng-app="application">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Scroller Demo (adapter)</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="adapter.js"></script>
10+
<link rel="stylesheet" href="../css/style.css" type="text/css"/>
11+
12+
13+
</head>
14+
<body ng-controller="mainController" ng-app="application">
15+
16+
17+
18+
19+
20+
<div class="cont cont-global">
21+
<a class="back" href="../index.html">browse other examples</a>
22+
<h1 class="page-header page-header-exapmle">Adapter (updatable scroller)</h1>
23+
<div class="description">
24+
<ul>
25+
<li>New mechanism of scroller data custom processing is introduced. </li>
26+
<li>Single datasource but two different viewports with two different processing adapters.</li>
27+
<li>The firstListAdapter is initially defined on ctrl $scope as a first level object with some property.</li>
28+
<li>The second.list.adapter chain is not defined on ctrl $scope. The scroller defines it during linking.</li>
29+
</ul>
30+
</div>
31+
32+
<div class="viewport-group">
33+
<h2 class="viewport-group-tilte">1st list</h2>
34+
35+
<div class="info">
36+
<span ng-hide="!firstListAdapter.isLoading">...data loading...</span>
37+
<span ng-hide="isLoadingOnScope">1st list is loaded</span>
38+
</div>
39+
40+
<div class="actions">
41+
<button class="btn btn-default" ng-click="updateList1()">update this list</button>
42+
<button class="btn btn-default" ng-click="addToList1()">add new 3d item</button>
43+
<button class="btn btn-default" ng-click="removeFromList1()">remove even items</button>
44+
</div>
45+
46+
<div ui-scroll-viewport class="viewport viewport-height-fixed" id="viewport-adapter1">
47+
<div class="item" ui-scroll="item in datasource"
48+
adapter="firstListAdapter"
49+
is-loading="isLoadingOnScope"
50+
buffer-size='5'>{{item.content}}</div>
51+
</div>
52+
</div>
53+
54+
55+
56+
<hr>
57+
58+
<div class="viewport-group">
59+
<h2 class="viewport-group-tilte">2st list</h2>
60+
61+
<div class="info">
62+
<span ng-hide="!second.list.adapter.isLoading">...data loading...</span>
63+
<span ng-hide="second.list.adapter.isLoading">2nd list is loaded</span>
64+
</div>
65+
66+
<div class="actions">
67+
<button class="btn btn-default" ng-click="updateList2()">update this list</button>
68+
<button class="btn btn-default" ng-click="addToList2()">add new 5th item</button>
69+
<button class="btn btn-default" ng-click="removeFromList2()">remove odd items</button>
70+
</div>
71+
72+
<div ui-scroll-viewport class="viewport viewport-height-fixed" id="viewport-adapter2">
73+
<div class="item" ui-scroll="item in datasource"
74+
adapter="second.list.adapter"
75+
buffer-size='5'>{{item.content}}</div>
76+
</div>
77+
78+
</div>
79+
80+
81+
</div>
82+
83+
84+
</body>
85+
</html>

‎demo/adapter/adapter.js

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
angular.module('application', ['ui.scroll', 'ui.scroll.jqlite']).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;
19+
$scope.firstListAdapter = {
20+
remain: true
21+
};
22+
$scope.updateList1 = function() {
23+
return $scope.firstListAdapter.applyUpdates(function(item, scope) {
24+
return item.content += ' *';
25+
});
26+
};
27+
$scope.removeFromList1 = function() {
28+
return $scope.firstListAdapter.applyUpdates(function(item, scope) {
29+
if (scope.$index % 2 === 0) {
30+
return [];
31+
}
32+
});
33+
};
34+
idList1 = 1000;
35+
$scope.addToList1 = function() {
36+
return $scope.firstListAdapter.applyUpdates(function(item, scope) {
37+
var newItem;
38+
newItem = void 0;
39+
if (scope.$index === 2) {
40+
newItem = {
41+
id: idList1,
42+
content: 'a new one #' + idList1
43+
};
44+
idList1++;
45+
return [item, newItem];
46+
}
47+
});
48+
};
49+
$scope.updateList2 = function() {
50+
return $scope.second.list.adapter.applyUpdates(function(item, scope) {
51+
return item.content += ' *';
52+
});
53+
};
54+
$scope.removeFromList2 = function() {
55+
return $scope.second.list.adapter.applyUpdates(function(item, scope) {
56+
if (scope.$index % 2 !== 0) {
57+
return [];
58+
}
59+
});
60+
};
61+
idList2 = 2000;
62+
return $scope.addToList2 = function() {
63+
return $scope.second.list.adapter.applyUpdates(function(item, scope) {
64+
var newItem;
65+
newItem = void 0;
66+
if (scope.$index === 4) {
67+
newItem = {
68+
id: idList2,
69+
content: 'a new one #' + idList1
70+
};
71+
idList2++;
72+
return [item, newItem];
73+
}
74+
});
75+
};
76+
}
77+
]);
78+
79+
80+
81+
82+
/*
83+
//# sourceURL=src/adapter.js
84+
*/
85+
86+
// ---
87+
// generated by coffee-script 1.9.2

‎demo/animation/animation.html

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!doctype html>
2+
<html ng-app="application">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Scroller Demo (animation)</title>
6+
7+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
8+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-animate.js"></script>
9+
<script src="../../dist/ui-scroll.js"></script>
10+
<script src="../../dist/ui-scroll-jqlite.js"></script>
11+
12+
13+
14+
<script src="animation.js"></script>
15+
<link rel="stylesheet" href="../css/style.css" type="text/css"/>
16+
17+
</head>
18+
<body ng-controller="mainController" ng-app="application">
19+
20+
<!--
21+
<h2>
22+
Animation demo
23+
</h2>
24+
25+
<table>
26+
<tr>
27+
<td>
28+
<div ui-scroll-viewport class="viewport">
29+
<div ui-scroll="item in datasource" class="item"
30+
adapter="adapterContainer.adapter"
31+
buffer-size="5"
32+
is-loading="my.trololo.isLoading">
33+
{{$index}}) {{item.content}}
34+
</div>
35+
</div>
36+
<button ng-click="updateList()">update this list</button>
37+
<button ng-click="addToList()">add new 3d item</button>
38+
<button ng-click="removeFromList()">remove even items</button>
39+
<button ng-click="refresh()">refresh</button>
40+
</td>
41+
</tr>
42+
</table>
43+
-->
44+
45+
46+
47+
48+
49+
50+
51+
52+
<div class="cont cont-global">
53+
<a class="back" href="../index.html">browse other examples</a>
54+
<h1 class="page-header page-header-exapmle">Animation demo</h1>
55+
56+
<div class="actions">
57+
<button class="btn btn-default" ng-click="updateList()">update this list</button>
58+
<button class="btn btn-default" ng-click="addToList()">add new 3d item</button>
59+
<button class="btn btn-default" ng-click="removeFromList()">remove even items</button>
60+
<button class="btn btn-default" ng-click="refresh()">refresh</button>
61+
</div>
62+
63+
64+
65+
<div class="viewport viewport-height-fixed" ui-scroll-viewport id="viewport-animation">
66+
<div ui-scroll="item in datasource" class="item"
67+
adapter="adapterContainer.adapter"
68+
buffer-size="5"
69+
is-loading="my.trololo.isLoading">
70+
{{$index}}) {{item.content}}
71+
</div>
72+
</div>
73+
74+
</div>
75+
76+
</body>
77+
</html>

‎demo/animation/animation.js

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
angular.module('application', ['ui.scroll', 'ui.scroll.jqlite', 'ngAnimate']).controller('mainController', [
2+
'$scope', '$log', '$timeout', function($scope, console, $timeout) {
3+
var datasource, idList;
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+
if (i <= 0 || i > 14) {
11+
continue;
12+
}
13+
item = {};
14+
item.id = i;
15+
item.content = "item #" + i;
16+
result.push(item);
17+
}
18+
return success(result);
19+
}, 100);
20+
};
21+
$scope.datasource = datasource;
22+
$scope.adapterContainer = {
23+
adapter: {
24+
remain: true
25+
}
26+
};
27+
$scope.updateList = function() {
28+
return $scope.adapterContainer.adapter.applyUpdates(function(item, scope) {
29+
return item.content += ' *';
30+
});
31+
};
32+
$scope.removeFromList = function() {
33+
return $scope.adapterContainer.adapter.applyUpdates(function(item, scope) {
34+
if (scope.$index % 2 === 0) {
35+
return [];
36+
}
37+
});
38+
};
39+
$scope.refresh = function() {
40+
return $scope.adapterContainer.adapter.reload();
41+
};
42+
idList = 1000;
43+
return $scope.addToList = function() {
44+
return $scope.adapterContainer.adapter.applyUpdates(function(item, scope) {
45+
var newItem;
46+
newItem = void 0;
47+
if (scope.$index === 2) {
48+
newItem = {
49+
id: idList,
50+
content: 'a new one #' + idList
51+
};
52+
idList++;
53+
return [item, newItem];
54+
}
55+
});
56+
};
57+
}
58+
]);
59+
60+
61+
62+
63+
/*
64+
//# sourceURL=src/animation.js
65+
*/
66+
67+
// ---
68+
// generated by coffee-script 1.9.2

‎demo/cache/cache.html

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!doctype html>
2+
<html ng-app="application">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Scroller Demo (cache option) </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="cache.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">Cache within datasource implementation</h1>
19+
20+
<div class="description">
21+
<p>
22+
The cache that is implemented here is a facade over standard datasource.
23+
So all you need here is to initialize Cache:
24+
<div class="code">
25+
<pre>datasource.cache.initialize();</pre>
26+
</div>
27+
Base data retrieving method <em>datasource.get()</em> isn't changed.
28+
It may has any implementation like no any cache is presented.
29+
</p>
30+
<p>
31+
You may disable/enable Cache programmatically:
32+
<div class="code">
33+
<pre>datasource.cache.isEnabled = true;</pre>
34+
</div>
35+
Toggle-link demonstrates this ability. You can see the difference between cache and no-cache modes because of <em>$timeout</em> back-end delay emulation on <em>datasource.get</em>.
36+
</p>
37+
</div>
38+
39+
<div class="actions">
40+
Cache is {{datasource.cache.isEnabled ? 'enabled' : 'disabled'}}
41+
<a class="toggler" ng-click="datasource.cache.toggle()">[toggle]</a>
42+
</div>
43+
44+
<div class="viewport" id="viewport-cache" ui-scroll-viewport>
45+
<div class="item" ui-scroll="item in datasource" buffer-size='5'>*{{item.content}}*</div>
46+
</div>
47+
48+
</div>
49+
50+
</body>
51+
</html>

0 commit comments

Comments
 (0)