Make overflow dynamically configurable

tinydesk · May 11, 2016 · 70d6859 · 70d6859
1 parent f2a3b99
commit 70d6859
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -49,6 +49,10 @@
           <label for="debounce">Debounce:</label>
           <input id="debounce" class="form-control" type="number" ng-model="options.debounce">
         </fieldset>
+        <fieldset class="form-group">
+          <label for="overflow">Overflow:</label>
+          <input id="overflow" class="form-control" type="number" ng-model="options.overflow">
+        </fieldset>
         <button type="button" class="btn btn-default" ng-click="fixSize()">Fix size</button>
         <button type="button" class="btn btn-default" ng-click="changeData()">Change Data</button>
         <button type="button" class="btn btn-default" ng-click="insert()">Insert</button>

diff --git a/dist/tileview.js b/dist/tileview.js
@@ -31,7 +31,7 @@
      * - **scrollEndOffset** - {number} - Some features that rely on the `scrollEnd` callback need to be informed in advance.
      * This property specifies an offset in rows to trigger the scroll end event before actually hitting the bottom of the data. **Default**: 0
      * - **overflow** - {number} - Number of rows that are rendered additionally to the visible rows to make the scrolling experience more fluent. **Default**: 2
-     * - **debounce** - {number} - Debounce in milliseconds. This will only affect the calls to `$digest`. The cells will still be moved smoothly. A value of `0` is interpreted as no debounce. **Default**: 0.
+     * - **debounce** - {number} - Debounce for the scroll event. A value of `0` is interpreted as no debounce. **Default**: 0.
        */
     mod.directive('tdTileview', ['$compile', '$templateCache', '$timeout', '$window', function ($compile, $templateCache, $timeout, $window) {
             return {
@@ -107,6 +107,7 @@
                         lastScrollPosition = Number.NEGATIVE_INFINITY;
                         layout();
                     });
+                    scope.$watch('options.overflow', layout);
                     scope.$on('td.tileview.resize', resize);
                     angular.element($window).on('resize', onResize);
                     scope.$on('$destroy', function () {
@@ -270,7 +271,7 @@
                                 debounceTimeout = $timeout(function () {
                                     debounceTimeout = undefined;
                                     update();
-                                }, scope.options.debounce);
+                                }, scope.options.debounce, false);
                             }
                         }
                         else {

diff --git a/src/tileview.ts b/src/tileview.ts
@@ -116,6 +116,7 @@ declare const angular: any;
           lastScrollPosition = Number.NEGATIVE_INFINITY;
           layout();
         });
+        scope.$watch('options.overflow', layout);
         scope.$on('td.tileview.resize', resize);
 
         angular.element($window).on('resize', onResize);
@@ -306,7 +307,7 @@ declare const angular: any;
               debounceTimeout = $timeout(function() {
                 debounceTimeout = undefined;
                 update();  
-              }, scope.options.debounce);
+              }, scope.options.debounce, false);
             }
           } else {
             update();