ui-scroll runner: removed mandatory timeout, added occasional interval

Author: dhilt

src/modules/viewport.js

@@ -27,12 +27,18 @@ export default function Viewport(elementRoutines, buffer, element, viewportContr
       bottomPadding = new Padding(template);
       element.before(topPadding.element);
       element.after(bottomPadding.element);
+      topPadding.height(0);
+      bottomPadding.height(0);
     },
 
     applyContainerStyle() {
-      if (container && container !== viewport) {
+      if (!container) {
+        return true;
+      }
+      if(container !== viewport) {
         viewport.css('height', window.getComputedStyle(container[0]).height);
       }
+      return viewport.height() > 0;
     },
 
     bottomDataPos() {

src/ui-scroll.js

@@ -39,9 +39,10 @@ angular.module('ui.scroll', [])
     '$injector',
     '$rootScope',
     '$timeout',
+    '$interval',
     '$q',
     '$parse',
-    function (console, $injector, $rootScope, $timeout, $q, $parse) {
+    function (console, $injector, $rootScope, $timeout, $interval, $q, $parse) {
 
       return {
         require: ['?^uiScrollViewport'],
@@ -59,14 +60,16 @@ angular.module('ui.scroll', [])
         }
 
         function parseNumericAttr(value, defaultValue) {
-          let result = $parse(value)($scope);
+          const result = $parse(value)($scope);
           return isNaN(result) ? defaultValue : result;
         }
 
         const BUFFER_MIN = 3;
         const BUFFER_DEFAULT = 10;
         const PADDING_MIN = 0.3;
         const PADDING_DEFAULT = 0.5;
+        const MAX_VIEWPORT_DELAY = 500;
+        const VIEWPORT_POLLING_INTERVAL = 75;
 
         let datasource = null;
         const itemName = match[1];
@@ -78,16 +81,16 @@ angular.module('ui.scroll', [])
         let ridActual = 0;// current data revision id
         let pending = [];
 
-        let elementRoutines = new ElementRoutines($injector, $q);
-        let buffer = new ScrollBuffer(elementRoutines, bufferSize);
-        let viewport = new Viewport(elementRoutines, buffer, element, viewportController, $rootScope, padding);
-        let adapter = new Adapter(viewport, buffer, adjustBuffer, reload, $attr, $parse, $scope);
+        const elementRoutines = new ElementRoutines($injector, $q);
+        const buffer = new ScrollBuffer(elementRoutines, bufferSize);
+        const viewport = new Viewport(elementRoutines, buffer, element, viewportController, $rootScope, padding);
+        const adapter = new Adapter(viewport, buffer, adjustBuffer, reload, $attr, $parse, $scope);
 
         if (viewportController) {
           viewportController.adapter = adapter;
         }
 
-        let isDatasourceValid = () => angular.isObject(datasource) && angular.isFunction(datasource.get);
+        const isDatasourceValid = () => angular.isObject(datasource) && angular.isFunction(datasource.get);
         datasource = $parse(datasourceName)($scope); // try to get datasource on scope
         if (!isDatasourceValid()) {
           datasource = $injector.get(datasourceName); // try to inject datasource as service
@@ -114,7 +117,7 @@ angular.module('ui.scroll', [])
         }
 
         function defineIndexProperty(datasource, propName, propUserName) {
-          let descriptor = Object.getOwnPropertyDescriptor(datasource, propName);
+          const descriptor = Object.getOwnPropertyDescriptor(datasource, propName);
           if (descriptor && (descriptor.set || descriptor.get)) {
             return;
           }
@@ -124,7 +127,7 @@ angular.module('ui.scroll', [])
             set: (value) => {
               getter = value;
               buffer[propUserName] = value;
-              let topPaddingHeightOld = viewport.topDataPos();
+              const topPaddingHeightOld = viewport.topDataPos();
               viewport.adjustPaddings();
               if (propName === 'minIndex') {
                 viewport.onAfterMinIndexSet(topPaddingHeightOld);
@@ -157,6 +160,25 @@ angular.module('ui.scroll', [])
             }, success);
           };
 
+        const run = () => {
+          let tryCount = 0;
+          if(!viewport.applyContainerStyle()) {
+            const timer = $interval(() => {
+              tryCount++;
+              if(viewport.applyContainerStyle()) {
+                $interval.cancel(timer);
+                reload();
+              }
+              if(tryCount * VIEWPORT_POLLING_INTERVAL >= MAX_VIEWPORT_DELAY) {
+                throw Error(`ui-scroll directive requires a viewport with non-zero height in ${MAX_VIEWPORT_DELAY}ms`);
+              }
+            }, VIEWPORT_POLLING_INTERVAL);
+          }
+          else {
+            reload();
+          }
+        };
+
         /**
          * Build padding elements
          *
@@ -180,10 +202,7 @@ angular.module('ui.scroll', [])
 
         viewport.bind('mousewheel', wheelHandler);
 
-        $timeout(() => {
-          viewport.applyContainerStyle();
-          reload();
-        });
+        run();
 
         /* Private function definitions */
 
@@ -239,7 +258,7 @@ angular.module('ui.scroll', [])
 
         function createElement(wrapper, insertAfter, insertElement) {
           let promises = null;
-          let sibling = (insertAfter > 0) ? buffer[insertAfter - 1].element : undefined;
+          const sibling = (insertAfter > 0) ? buffer[insertAfter - 1].element : undefined;
           linker((clone, scope) => {
             promises = insertElement(clone, sibling);
             wrapper.element = clone;
@@ -248,7 +267,7 @@ angular.module('ui.scroll', [])
           });
           // ui-scroll-grid apply
           if (adapter.transform) {
-            let tdInitializer = wrapper.scope.uiScrollTdInitializer;
+            const tdInitializer = wrapper.scope.uiScrollTdInitializer;
             if (tdInitializer && tdInitializer.linking) {
               adapter.transform(wrapper.scope, wrapper.element);
             } else {
@@ -459,8 +478,8 @@ angular.module('ui.scroll', [])
 
         function wheelHandler(event) {
           if (!adapter.disabled) {
-            let scrollTop = viewport[0].scrollTop;
-            let yMax = viewport[0].scrollHeight - viewport[0].clientHeight;
+            const scrollTop = viewport[0].scrollTop;
+            const yMax = viewport[0].scrollHeight - viewport[0].clientHeight;
 
             if ((scrollTop === 0 && !buffer.bof) || (scrollTop === yMax && !buffer.eof)) {
               event.preventDefault();