Skip to content

Commit c1c043b

Browse files
dhiltdhilt
committed
Update 'modules' branch to latest 'master'
2 parents 8686d2d + 5b16a0e commit c1c043b

Some content is hidden

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

67 files changed

+6836
-213
lines changed

‎Gruntfile.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ module.exports = function (grunt) {
4545
colors: true,
4646
configFile: './test/karma.conf.js',
4747
keepalive: true,
48-
port: 8081,
48+
port: 8082,
4949
runnerPort: 9100
5050
}
5151
},
@@ -95,6 +95,7 @@ module.exports = function (grunt) {
9595
dynamic_mappings: {
9696
files: {
9797
'dist/ui-scroll.js': ['./temp/**/ui-scroll.js'],
98+
'dist/ui-scroll-grid.js': ['./temp/**/ui-scroll-grid.js'],
9899
'dist/ui-scroll-jqlite.js': ['./temp/**/ui-scroll-jqlite.js']
99100
}
100101
}
@@ -106,6 +107,7 @@ module.exports = function (grunt) {
106107
common: {
107108
files: {
108109
'./dist/ui-scroll.min.js': ['./dist/ui-scroll.js'],
110+
'./dist/ui-scroll-grid.min.js': ['./dist/ui-scroll-grid.js'],
109111
'./dist/ui-scroll-jqlite.min.js': ['./dist/ui-scroll-jqlite.js']
110112
}
111113
}

‎README.md

Lines changed: 127 additions & 68 deletions
Large diffs are not rendered by default.

‎bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-ui-scroll",
3-
"version": "1.4.1",
3+
"version": "1.5.2",
44
"homepage": "https://github.com/angular-ui/ui-scroll.git",
55
"description": "AngularJS infinite scrolling module",
66
"main": "./dist/ui-scroll.js",

‎demo/adapterOnController/adapterOnController.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Adapter On Controller</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="adapterOnController.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">Adapter On Controller</h1>
19+
20+
<div class="description">
21+
There may be some nested scopes between the ui-scroll and the controller where you want the adapter object to be injected. As it follows from the documentation, <em>adapter="expression on controller"</em> format can be used to explicitly specify the scope associated with the specified controller as the target scope for the injection.
22+
<div class="code">
23+
<pre>&lt;div ui-scroll="item in datasource" adapter="adapter on mainController"&gt;{{item}<!---->}&lt;/div&gt;</pre>
24+
</div>
25+
In this sample we have ng-if wrapper over the viewport which causes an intermediate scope. "Is loading" will not work without specifying the controller through the "on controller" syntax .
26+
</div>
27+
28+
<div class="actions" ng-init="reloadIndex = 100">
29+
Is loading: {{adapter.isLoading}}
30+
</div>
31+
32+
<div ng-if="delay" class="viewport" id="viewport-serviceDatasource" ui-scroll-viewport>
33+
<div class="item" ui-scroll="item in datasource" adapter="adapter on mainController">{{item}}</div>
34+
</div>
35+
36+
</div>
37+
38+
</body>
39+
</html>

‎demo/adapterOnController/adapterOnController.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
angular.module('application', ['ui.scroll', 'ui.scroll.jqlite'])
2+
.controller('mainController', [
3+
'$scope', '$log', '$timeout', function ($scope, console, $timeout) {
4+
var datasource = {};
5+
6+
datasource.get = function (index, count, success) {
7+
$timeout(function () {
8+
var result = [];
9+
for (var i = index; i <= index + count - 1; i++) {
10+
result.push("item #" + i);
11+
}
12+
success(result);
13+
}, 100);
14+
};
15+
16+
$scope.datasource = datasource;
17+
18+
$scope.delay = false;
19+
$timeout(function() {
20+
$scope.delay = true;
21+
}, 500);
22+
23+
}
24+
]);

‎demo/append/append.html

Lines changed: 64 additions & 0 deletions
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

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
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+
};
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+
93+
94+
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+
]);

‎demo/chat/chat.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Chat demo</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="chat.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">Chat demo</h1>
19+
20+
<div class="description">
21+
Chat demo provides:
22+
<div> - initial position at the bottom of the dataset</div>
23+
<div> - scroll up to retrieve new items with positive indexes</div>
24+
<div> - special Server service to emulate the remote</div>
25+
</div>
26+
27+
<br/>
28+
29+
<ul class="chat" ui-scroll-viewport>
30+
<li class="item" ui-scroll="item in datasource" adapter="adapter">
31+
<span class="number">{{item.number}})</span>
32+
<span class="title">{{item.title}}</span>
33+
<div class="text">{{item.text}}</div>
34+
</li>
35+
</ul>
36+
37+
</div>
38+
39+
</body>
40+
</html>

0 commit comments

Comments
 (0)