Add infinite scroll on list/tree

issue8729
review282261002

CHANGELOG

@@ -1,3 +1,5 @@
+* Add infinite scroll
+
 Version 5.4.0 - 2019-11-04
 * Bug fixes (see mercurial logs for details)
 * Support visual context on tree view

src/sao.less

@@ -120,6 +120,13 @@
 
 .modal-body {
     overflow-x: auto;
+    max-height: calc(100vh - 200px);
+}
+
+@media screen and (max-height: 500px) {
+    .modal-body {
+        max-height: 300px;
+    }
 }
 
 .modal-lg {

src/view/tree.js

@@ -3,6 +3,18 @@
 (function() {
     'use strict';
 
+    if ('IntersectionObserver' in window) {
+        var moreObserver = new IntersectionObserver(function(entries, observer) {
+            entries.forEach(function(entry) {
+                if (entry.isIntersecting) {
+                    jQuery(entry.target).trigger('click');
+                }
+            });
+        }, {
+            rootMargin: '0px 0px 50px 0px',
+        });
+    }
+
     Sao.View.TreeXMLViewParser = Sao.class_(Sao.View.XMLViewParser, {
         _parse_tree: function(node, attributes) {
             [].forEach.call(node.childNodes, function(child) {
@@ -692,6 +704,9 @@
                 more_cell.append(more_button);
                 more_row.append(more_cell);
                 this.tbody.append(more_row);
+                if (moreObserver) {
+                    moreObserver.observe(more_button[0]);
+                }
             }
         },
         redraw: function(selected, expanded) {