start/end indexes manipulating demo

dhilt · dhilt · commit bcbfd3134ed5 · 2016-04-01T18:18:28.000+03:00
diff --git a/demo/index.html b/demo/index.html
@@ -59,6 +59,11 @@ <h1 class="page-header">Scroller Examples</h1>
 				Reload datasource to specified index
 			</a>
 		</li>
+		<li>
+			<a href="userIndexes/userIndexes.html">
+				Manipulate start and end indexes outside the directive
+			</a>
+		</li>
 		<li>
 			<a href="visibility/visibility.html">
 				Visibility
@@ -109,7 +114,7 @@ <h1 class="page-header">Scroller Examples</h1>
 	<div class="more-wrap">
 		<a href="https://github.com/angular-ui/ui-scroll/">read more...</a>
 	</div>
-	
+
 </div>
 </body>
 </html>
diff --git a/demo/userIndexes/userIndexes.html b/demo/userIndexes/userIndexes.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>User min and max indexes</title>
+	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
+	<script src="../../dist/ui-scroll.js"></script>
+	<script src="../../dist/ui-scroll-jqlite.js"></script>
+	<script src="userIndexes.js"></script>
+	<link rel="stylesheet" href="../css/style.css" type="text/css"/>
+	<style type="text/css">
+		button {
+			width: 180px;
+			margin-bottom: 3px;
+			margin-right: 7px;
+		}
+	</style>
+</head>
+<body ng-controller="mainController" ng-app="application">
+
+<div class="cont cont-global">
+
+	<a class="back" href="../index.html">browse other examples</a>
+
+	<h1 class="page-header page-header-exapmle">Set user min and max indexes</h1>
+
+	<div class="description">
+		Here we provide an ability of external min and max indexes setting to let the viewport know how many items do we have.
+	</div>
+
+	<div class="actions" ng-init="userMinIndex = -100; userMaxIndex = 100">
+		<button ng-click="setUserMinIndex()"> Set minIndex = {{userMinIndex}} </button>
+		<input ng-model="userMinIndex" size="2"> minIndex value to set
+		<br>
+		<button ng-click="setUserMaxIndex()"> Set maxIndex = {{userMaxIndex}} </button>
+		<input ng-model="userMaxIndex" size="2"> maxIndex value to set
+		<br>
+		<button ng-click="setUserIndexes()"> Set both Indexes </button>
+	</div>
+
+	<div ng-if="delay" class="viewport" id="viewport-serviceDatasource" ui-scroll-viewport>
+		<div class="item" ui-scroll="item in datasource" adapter="adapter">{{item}}</div>
+	</div>
+
+</div>
+
+</body>
+</html>
diff --git a/demo/userIndexes/userIndexes.js b/demo/userIndexes/userIndexes.js
@@ -0,0 +1,42 @@
+angular.module('application', ['ui.scroll', 'ui.scroll.jqlite'])
+	.controller('mainController', [
+		'$scope', '$log', '$timeout', function ($scope, console, $timeout) {
+			var datasource = {};
+
+			datasource.get = function (index, count, success) {
+				$timeout(function () {
+					var result = [];
+					for (var i = index; i <= index + count - 1; i++) {
+						result.push("item #" + i);
+					}
+					success(result);
+				}, 100);
+			};
+
+			$scope.datasource = datasource;
+			$scope.adapter = {};
+
+			$scope.setUserMinIndex = function () {
+				var userMinIndex = parseInt($scope.userMinIndex, 10);
+				if(!isNaN(userMinIndex))
+					$scope.datasource.minIndex = userMinIndex;
+			};
+
+			$scope.setUserMaxIndex = function () {
+				var userMaxIndex = parseInt($scope.userMaxIndex, 10);
+				if(!isNaN(userMaxIndex))
+					$scope.datasource.maxIndex = userMaxIndex;
+			};
+
+			$scope.setUserIndexes = function () {
+				$scope.setUserMinIndex();
+				$scope.setUserMaxIndex();
+			};
+
+			$scope.delay = false;
+			$timeout(function() {
+				$scope.delay = true;
+			}, 500);
+
+		}
+	]);
