angular-ui · dhilt · Jun 4, 2019 · Jun 4, 2019 · Jun 5, 2019 · Jun 5, 2019
diff --git a/demo/fixedRowHeight/fixedRowHeight.html b/demo/fixedRowHeight/fixedRowHeight.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Fixed Row Height</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="fixedRowHeight.js"></script>
+  <link rel="stylesheet" href="../css/style.css" type="text/css" />
+</head>
+
+<body ng-app="application">
+
+  <div class="cont cont-global" ng-controller="MainCtrl">
+
+    <a class="back" href="../index.html">browse other examples</a>
+
+    <h1 class="page-header page-header-exapmle">Fixed Row Height</h1>
+
+    <div class="description">
+      <p>
+        If the height of all the viewport rows is known and not going to be changed,
+        it might be passed as "row-height" attribute.
+        This reduces inner calculations and browser reflows,
+        which leads to a performance increase.
+      </p>
+    </div>
+
+    <div class="actions">
+      <input ng-model="perfSlowCount" size="4" /> performance decrease coefficient (0 - fastest)
+    </div>
+
+    <div class="viewport" ui-scroll-viewport>
+      <div ui-scroll="item in datasource" buffer-size="10" row-height="25" adapter="adapter">
+        <div class="item" ng-style="{'height': '25px'}">
+
+          {{item.text}}
+          <span ng-repeat="(key, value) in item.input track by $index">
+            <input ng-model="value.value" size="2" />
+          </span>
+          {{getSum(item)}}
+          {{getMul(item)}}
+          {{getText(item)}}
+
+          <span ng-repeat="(key, value) in perfSlowCountList track by $index">
+            <div style="height: 1px; width: 1px; overflow: hidden;">
+              {{item.text}}
+              <span ng-repeat="(key, value) in item.input track by $index">
+                <input ng-model="value.value" size="2" />
+              </span>
+              {{getSum(item)}}
+              {{getMul(item)}}
+              {{getText(item)}}
+            </div>
+          </span>
+
+        </div>
+      </div>
+    </div>
+
+</body>
+
+</html>
diff --git a/demo/fixedRowHeight/fixedRowHeight.js b/demo/fixedRowHeight/fixedRowHeight.js
@@ -0,0 +1,74 @@
+angular.module('application', ['ui.scroll'])
+
+  .controller('MainCtrl', ($scope) => {
+    $scope.hello = 'Hello Main Controller!';
+
+    let min = -150, max = 200, delay = 0, inputs = 10;
+
+    const getInput = index => {
+      const result = [];
+      for (let i = 0; i < inputs; i++) {
+        result.push({ value: ((index % 2 === 0 ? -1 : 1) * (i + 1)).toString() });
+      }
+      return result;
+    }
+
+    const data = [];
+    for (let i = min; i <= max; i++) {
+      height = 50 + (i + 1);
+      data.push({
+        index: i,
+        text: 'item #' + i,
+        input: getInput(i)
+      });
+    }
+
+    $scope.datasource = {
+      get: (index, count, success) => {
+        console.log('Getting ' + count + ' items started from ' + index + '...');
+        setTimeout(() => {
+          const result = [];
+          const start = Math.max(min, index);
+          const end = Math.min(index + count - 1, max);
+          if (start <= end) {
+            for (let i = start; i <= end; i++) {
+              const _item = data.find(item => item.index === i);
+              if (_item) {
+                result.push(_item);
+              }
+            }
+          }
+          console.log('Got ' + result.length + ' items [' + start + '..' + end + ']');
+          success(result);
+        }, delay);
+      }
+    };
+
+    $scope.getSum = item =>
+      item.input.reduce((a, i) => a + Number(i.value), 0);
+
+    $scope.getMul = item =>
+      item.input.reduce((a, i) => a * Number(i.value), 1);
+
+    $scope.getText = item => {
+      const num = $scope.getMul(item).toString();
+      const result = [];
+      for (let i = 0; i < item.text.length; i++) {
+        result.push(item.text[i]);
+        result.push(i < num.length ? num[i] : 'x');
+      }
+      return result.join('');
+    }
+
+    const perfSlowCountDefault = 2;
+    $scope.perfSlowCount = perfSlowCountDefault;
+    $scope.perfSlowCountList = [];
+    $scope.$watch('perfSlowCount', () => {
+      let size = Number($scope.perfSlowCount);
+      if (isNaN(size)) {
+        size = perfSlowCountDefault;
+      }
+      $scope.perfSlowCountList = (new Array(size)).fill(0);
+    })
+
+  });
diff --git a/demo/index.html b/demo/index.html
@@ -64,6 +64,11 @@ <h1 class="page-header">Scroller Examples</h1>
         Bottom visible (Adapter)
       </a>
     </li>
+    <li>
+      <a href="fixedRowHeight/fixedRowHeight.html">
+        Fixed row height (higher perfromance)
+      </a>
+    </li>
     <li>
       <a href="reload100/reload100.html">
         Reload datasource to specified index

diff --git a/dist/ui-scroll-grid.js b/dist/ui-scroll-grid.js
diff --git a/dist/ui-scroll.js b/dist/ui-scroll.js
diff --git a/dist/ui-scroll.js.map b/dist/ui-scroll.js.map
diff --git a/dist/ui-scroll.min.js b/dist/ui-scroll.min.js
diff --git a/dist/ui-scroll.min.js.map b/dist/ui-scroll.min.js.map