bottomVisible demo

dhilt · dhilt · commit 6aaee0887eb3 · 2017-03-09T12:03:44.000+03:00
diff --git a/demo/bottomVisible/bottomVisibleAdapter.html b/demo/bottomVisible/bottomVisibleAdapter.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Bottom visible (Adapter)</title>
+	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
+	<script src="../../dist/ui-scroll.js"></script>
+	<script src="bottomVisibleAdapter.js"></script>
+	<link rel="stylesheet" href="../css/style.css" type="text/css"/>
+</head>
+<body ng-app="application" ng-controller="mainController">
+
+	<div class="cont cont-global">
+
+		<a class="back" href="../index.html">browse other examples</a>
+
+		<h1 class="page-header page-header-exapmle">Bottom visible (Adapter)</h1>
+
+		<div class="description">
+			The Adapter implements bottomVisible property which is a reference to the item currently in the very bottom visible position.
+
+			<div class="code">
+				<pre>&lt;li ui-scroll="item in datasource" adapter="adapter"&gt;*{{item}<!---->}*&lt;/li&gt;</pre>
+			</div>
+
+			<div class="code">
+				<pre>bottom visible: {{adapter.bottomVisible}<!---->}</pre>
+			</div>
+		</div>
+
+		<div class="info">
+			<div class="info-item"><span class="info-item-label">bottom visible:</span> {{adapter.bottomVisible}}</div>
+		</div>
+
+		<div class="viewport" id="viewport-listScroller" ui-scroll-viewport>
+			<div class="item" ui-scroll="item in datasource" adapter="adapter">*{{item}}*</div>
+		</div>
+
+	</div>
+
+</body>
+</html>
diff --git a/demo/bottomVisible/bottomVisibleAdapter.js b/demo/bottomVisible/bottomVisibleAdapter.js
@@ -0,0 +1,20 @@
+angular.module('application', ['ui.scroll'])
+	.controller('mainController', [
+		'$scope', '$log', '$timeout', function ($scope, console, $timeout) {
+
+			$scope.adapter = {};
+
+			$scope.datasource = {};
+
+			$scope.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);
+			};
+
+		}
+	]);
diff --git a/demo/index.html b/demo/index.html
@@ -55,10 +55,15 @@ <h1 class="page-header">Scroller Examples</h1>
 				Top visible
 			</a>
 			&nbsp; / &nbsp;
-			<a href="topVisible/topVisible.html">
+			<a href="topVisible/topVisibleAdapter.html">
 				Top visible (Adapter)
 			</a>
 		</li>
+		<li>
+			<a href="bottomVisible/bottomVisibleAdapter.html">
+				Bottom visible (Adapter)
+			</a>
+		</li>
 		<li>
 			<a href="reload100/reload100.html">
 				Reload datasource to specified index
