examples updates

Author: dhilt

demo/adapter/adapter.html

@@ -18,14 +18,14 @@ <h1 class="page-header page-header-exapmle">Adapter (updatable scroller)</h1>
 
 		<div class="description">
 			<ul>
-				<li>New mechanism of scroller data custom processing is introduced. </li>
-				<li>Single datasource but two different viewports with two different processing adapters.</li>
-				<li>The firstListAdapter is initially defined on ctrl $scope as a first level object with some property.</li>
-				<li>The second.list.adapter chain is not defined on ctrl $scope. The scroller defines it during linking.</li>
+				<li>This is a simple demo which demonstrates some basic Adapter usage.</li>
+				<li>For all operations presented here the only one Adapter method is being used: applyUpdates.</li>
+				<li>In this demo we have single datasource defined on the Main Controller .</li>
+				<li>And two different viewports with two different processing Adapters (on the First and the Second Controllers).</li>
 			</ul>
 		</div>
 
-		<div class="viewport-group">
+		<div class="viewport-group" ng-controller="firstController">
 			<h2 class="viewport-group-tilte">1st list</h2>
 
 			<div class="info">
@@ -49,7 +49,7 @@ <h2 class="viewport-group-tilte">1st list</h2>
 
 		<hr>
 
-		<div class="viewport-group">
+		<div class="viewport-group" ng-controller="secondController">
 			<h2 class="viewport-group-tilte">2st list</h2>
 
 			<div class="info">

demo/adapter/adapter.js

@@ -1,39 +1,54 @@
-angular.module('application', ['ui.scroll']).controller('mainController', [
-  '$scope', '$log', '$timeout', function($scope, console, $timeout) {
-    var datasource, idList1, idList2;
-    datasource = {};
-    datasource.get = function(index, count, success) {
-      return $timeout(function() {
-        var i, item, j, ref, ref1, result;
-        result = [];
-        for (i = j = ref = index, ref1 = index + count - 1; ref <= ref1 ? j <= ref1 : j >= ref1; i = ref <= ref1 ? ++j : --j) {
-          item = {};
-          item.id = i;
-          item.content = "item #" + i;
-          result.push(item);
-        }
-        return success(result);
-      }, 100);
-    };
-    $scope.datasource = datasource;
+angular.module('application', ['ui.scroll'])
+
+  .controller('mainController', [
+    '$scope', '$timeout',
+    function ($scope, $timeout) {
+
+      $scope.title = 'Main Controller';
+
+      var datasource = {};
+
+      datasource.get = function (index, count, success) {
+        $timeout(function () {
+          var result = [];
+          for (var i = index; i <= index + count - 1; i++) {
+            result.push({
+              id: i,
+              content: "item #" + i
+            });
+          }
+          success(result);
+        }, 100);
+      };
+
+      $scope.datasource = datasource;
+    }
+  ])
+
+  .controller('firstController', ['$scope', function ($scope) {
+    $scope.title = 'First Controller';
+
     $scope.firstListAdapter = {
       remain: true
     };
-    $scope.updateList1 = function() {
-      return $scope.firstListAdapter.applyUpdates(function(item, scope) {
+
+    $scope.updateList1 = function () {
+      return $scope.firstListAdapter.applyUpdates(function (item, scope) {
         return item.content += ' *';
       });
     };
-    $scope.removeFromList1 = function() {
-      return $scope.firstListAdapter.applyUpdates(function(item, scope) {
+
+    $scope.removeFromList1 = function () {
+      return $scope.firstListAdapter.applyUpdates(function (item, scope) {
         if (scope.$index % 2 === 0) {
           return [];
         }
       });
     };
-    idList1 = 1000;
-    $scope.addToList1 = function() {
-      return $scope.firstListAdapter.applyUpdates(function(item, scope) {
+
+    var idList1 = 1000;
+    $scope.addToList1 = function () {
+      return $scope.firstListAdapter.applyUpdates(function (item, scope) {
         var newItem;
         newItem = void 0;
         if (scope.$index === 2) {
@@ -46,42 +61,38 @@ angular.module('application', ['ui.scroll']).controller('mainController', [
         }
       });
     };
-    $scope.updateList2 = function() {
-      return $scope.second.list.adapter.applyUpdates(function(item, scope) {
+  }])
+
+  .controller('secondController', ['$scope', function ($scope) {
+    $scope.title = 'Second Controller';
+
+    $scope.updateList2 = function () {
+      return $scope.second.list.adapter.applyUpdates(function (item, scope) {
         return item.content += ' *';
       });
     };
-    $scope.removeFromList2 = function() {
-      return $scope.second.list.adapter.applyUpdates(function(item, scope) {
+
+    $scope.removeFromList2 = function () {
+      return $scope.second.list.adapter.applyUpdates(function (item, scope) {
         if (scope.$index % 2 !== 0) {
           return [];
         }
       });
     };
-    idList2 = 2000;
-    return $scope.addToList2 = function() {
-      return $scope.second.list.adapter.applyUpdates(function(item, scope) {
+
+    var idList2 = 2000;
+    $scope.addToList2 = function () {
+      return $scope.second.list.adapter.applyUpdates(function (item, scope) {
         var newItem;
         newItem = void 0;
         if (scope.$index === 4) {
           newItem = {
             id: idList2,
-            content: 'a new one #' + idList1
+            content: 'a new one #' + idList2
           };
           idList2++;
           return [item, newItem];
         }
       });
     };
-  }
-]);
-
-
-
-
-/*
-//# sourceURL=src/adapter.js
- */
-
-// ---
-// generated by coffee-script 1.9.2
+  }]);

demo/append/append.html

@@ -40,7 +40,7 @@ <h1 class="page-header page-header-exapmle">Append and prepend demo</h1>
 			Then we have <em>adapter.append()</em> and <em>adapter.prepend()</em> methods to provide an injection of
 			just created item to the viewport. Note that in this demo new items would not be appended to the viewport if
 			the EOF (end of file) is not reached. Also new items would not be prepended to the viewport if the BOF
-			(begin of file) is not reached. This is very important to build proper UI. Learn sources!
+			(begin of file) is not reached. This is very important to build proper UI. Follow the sources of the demo!
 		</p>
 	</div>
 

demo/css/style.css

@@ -291,7 +291,7 @@
 }
 #viewport-scrollBubblingPrevent-wrap:before,
 #viewport-scrollBubblingPrevent-wrap:after {
-  content: "padding";
+  content: "wrapper";
   position: absolute;
   width: 100%;
   text-align: center;

demo/css/style.less

@@ -384,7 +384,7 @@
 
 	&:before,
 	&:after {
-		content: "padding";
+		content: "wrapper";
 		position: absolute;
 		width: 100%;
 		text-align: center;

demo/grid-layout-manipulations/grid-layout-manipulations.html

@@ -29,7 +29,7 @@ <h1 class="page-header page-header-exapmle">Grid layout manipulations</h1>
 		</div>
 				<pre>
 layout = $scope.adapter.gridAdapter.getLayout()</pre>
-			Note that saving via cookie does not work when you run this demo locally.
+			Note that saving via cookie requires web-server.
 		</p>
 	</div>
 

demo/index.html

@@ -121,12 +121,12 @@ <h1 class="page-header">Scroller Examples</h1>
 		</li>
 		<li>
 			<a href="insideComponent/insideComponent.html">
-				Inside the es6 component
+				Inside Angular 1.5+ Component
 			</a>
 		</li>
 		<li>
 			<a href="adapterOnController/adapterOnController.html">
-				Append on controller
+				Adapter "on controller"
 			</a>
 		</li>
 		<li>

demo/insideComponent/insideComponent.html

@@ -2,7 +2,7 @@
 <html>
 <head>
 	<meta charset="utf-8">
-	<title>Inside es6 component</title>
+	<title>Inside Angular 1.5+ component</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="insideComponent.js"></script>
@@ -14,10 +14,14 @@
 
 		<a class="back" href="../index.html">browse other examples</a>
 
-		<h1 class="page-header page-header-exapmle">Scroller inside ES6 Component</h1>
+		<h1 class="page-header page-header-exapmle">Scroller inside Angular 1.5+ Component</h1>
 
 		<div class="description">
-			This sample demonstrates encapsulation of the ui-scroll directive inside some custom component (Angular 1.5+). The controller of this Component is implemented as ES6 class. Note that this demo might not work in old browsers which don't support ES6 classes.
+			This sample demonstrates encapsulation of the ui-scroll directive inside some custom component (Angular 1.5+).
+
+			To demonstrate the work of the Adapter, click on any row. The text of the item should change after click.
+
+			The controller of this Component is implemented as ES6 class. Note that this demo might not work in old browsers which don't support ES6 classes.
 		</div>
 
 		<my-component></my-component>

demo/insideComponent/insideComponent.js

@@ -1,9 +1,10 @@
-(function(angular) {
+(function (angular) {
 
   class Ctrl {
-    constructor($timeout) {
-        this.timeout = $timeout;
-				this.show = true;
+    constructor($timeout, $scope) {
+      this.timeout = $timeout;
+      this.show = true;
+      this.$scope = $scope;
     }
 
     get(index, count, success) {
@@ -20,7 +21,7 @@
     }
 
     update(id) {
-      return this.scrollAdapter.applyUpdates(function(item) {
+      return this.scrollAdapter.applyUpdates(function (item) {
         if (item.id === id) {
           item.name += " *";
         }
@@ -40,5 +41,5 @@
       '</div>',
       controller: Ctrl
     });
-    
+
 })(angular);

demo/insideDirective/insideDirective.html

@@ -18,6 +18,7 @@ <h1 class="page-header page-header-exapmle">Scroller inside the directive</h1>
 
 		<div class="description">
 			This sample demonstrates encapsulation of the ui-scroll directive inside another custom directive wich has it's own controller and wich uses "Controller As" syntax in it's template.
+			To demonstrate the work of the Adapter, click on any row. The text of the item should change after click.
 		</div>
 
 		<div ng-controller="mainController">

demo/scopeDatasource/scopeDatasource.html

@@ -28,10 +28,14 @@ <h1 class="page-header page-header-exapmle">Datasource on scope (not as service)
 
 			<div class="code">
 				<pre>
-angular.module('application', ['ui.scroll']).controller('mainController', ...
+angular.module('application', ['ui.scroll'])
+  .controller('mainController', ...
 
-	$scope.datasource = {}
-	$scope.datasource.get = function...</pre>
+    var get = function(index, count, success) { ... };
+
+    $scope.datasource = { get: get };
+
+  );</pre>
 			</div>
 		</div>
 

demo/serviceDatasource/serviceDatasource.html

@@ -27,11 +27,13 @@ <h1 class="page-header page-header-exapmle">Datasource as service</h1>
 
 			<div class="code">
 				<pre>
-angular.module('application', ['ui.scroll']).factory('datasource', ...
+angular.module('application', ['ui.scroll'])
+  .factory('datasource', function() { ...
 
-	var get = function ...
+    var get = function(index, count, success) { ... };
 
-	return { get: get };</pre>
+    return { get: get };
+  });</pre>
 			</div>
 
 		</div>