remote emulation demo

dhilt · dhilt · commit 14b6bfb7fa10 · 2017-08-16T19:03:47.000+03:00
diff --git a/demo/remote/remote.html b/demo/remote/remote.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Remote server emulation</title>
+  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
+  <script src="../../dist/ui-scroll.js"></script>
+  <script src="remote.js"></script>
+  <link rel="stylesheet" href="../css/style.css" type="text/css" />
+</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">Remote server emulation</h1>
+    <div class="description">
+      This demo implements Remote server emulation factory, so the datasource get method looks like
+      <div class="code">
+        <pre>
+datasource.get = function(index, count, success) {
+  Server.request(index, count).then(success);
+};</pre>
+      </div>
+    </div>
+    <div class="viewport" ui-scroll-viewport>
+      <div class="item" ui-scroll="item in datasource" start-index="firstIndex">
+        {{item.content}}
+      </div>
+    </div>
+  </div>
+</body>
+
+</html>
diff --git a/demo/remote/remote.js b/demo/remote/remote.js
@@ -0,0 +1,73 @@
+angular.module('application', ['ui.scroll'])
+
+  .factory('Server', function($timeout, $q) {
+    return {
+
+      default: {
+        first: 0,
+        max: 99,
+        delay: 100
+      },
+
+      data: [],
+
+      init: function(settings = {}) {
+        this.first = settings.hasOwnProperty('first') ? settings.first : this.default.first;
+        this.max = settings.hasOwnProperty('max') ? settings.max : this.default.max;
+        this.delay = settings.hasOwnProperty('delay') ? settings.delay : this.default.delay;
+        for (var i = this.first; i <= this.max; i++) {
+          this.data[i] = {
+            index: i,
+            content: 'Item #' + i
+          };
+        }
+      },
+
+      getFirst: function() {
+        return this.first;
+      },
+
+      request: function(index, count) {
+        var self = this;
+        var deferred = $q.defer();
+
+        var start = index;
+        var end = index + count - 1;
+
+        $timeout(function() {
+          var item, result = [];
+          if (start <= end) {
+            for (var i = start; i <= end; i++) {
+              if (item = self.data[i]) {
+                result.push(item);
+              }
+            }
+          }
+          deferred.resolve(result);
+        }, self.delay);
+
+        return deferred.promise;
+      }
+    };
+  })
+
+  .controller('mainController', function($scope, Server) {
+
+    $scope.firstIndex = 1;
+
+    Server.init({
+      first: $scope.firstIndex,
+      max: 100,
+      delay: 40
+    });
+
+    $scope.datasource = {
+      get: function(index, count, success) {
+        console.log('requested index = ' + index + ', count = ' + count);
+        Server.request(index, count).then(function(result) {
+          console.log('resolved ' + result.length + ' items');
+          success(result);
+        });
+      }
+    };
+  });
