12033: Fix auto scroll after search; acknowledge end of results.
authorTom Clegg <tom@curoverse.com>
Fri, 11 Aug 2017 05:23:07 +0000 (01:23 -0400)
committerTom Clegg <tom@curoverse.com>
Fri, 11 Aug 2017 05:23:07 +0000 (01:23 -0400)
Arvados-DCO-1.1-Signed-off-by: Tom Clegg <tom@curoverse.com>

apps/workbench/app/assets/javascripts/components/collections.js
apps/workbench/app/assets/javascripts/models/loader.js

index 19f2fd2e31f3da5928b4d8e01d8b17732c2b18f6..a06e2bba7efc88e0de382c6d45ceee8f9a59bf5d 100644 (file)
@@ -4,30 +4,36 @@
 
 window.components = window.components || {}
 window.components.collection_table = {
-    oncreate: function(vnode) {
-        vnode.state.autoload = function() {
-            if (!vnode.attrs.loader.loadMore)
-                // Can't load more content anyway: no point in
-                // checking anything else.
-                return
-            var contentRect = vnode.dom.getBoundingClientRect()
-            var scroller = window // TODO: use vnode.dom's nearest ancestor with scrollbars
-            if (contentRect.bottom < 2 * scroller.innerHeight) {
-                // We have less than 1 page worth of content available
-                // below the visible area. Load more.
-                vnode.attrs.loader.loadMore()
-                // Indicate loading is in progress.
-                window.requestAnimationFrame(m.redraw)
-            }
+    maybeLoadMore: function(dom) {
+        var loader = this.loader
+        if (loader.done || !loader.loadMore)
+            // Can't load more content anyway: no point in
+            // checking anything else.
+            return
+        var contentRect = dom.getBoundingClientRect()
+        var scroller = window // TODO: use dom's nearest ancestor with scrollbars
+        if (contentRect.bottom < 2 * scroller.innerHeight) {
+            // We have less than 1 page worth of content available
+            // below the visible area. Load more.
+            loader.loadMore()
+            // Indicate loading is in progress.
+            window.requestAnimationFrame(m.redraw)
         }
-        window.addEventListener('scroll', vnode.state.autoload)
-        window.addEventListener('resize', vnode.state.autoload)
-        vnode.state.autoloadTimer = window.setInterval(vnode.state.autoload, 200)
+    },
+    oncreate: function(vnode) {
+        vnode.state.maybeLoadMore = vnode.state.maybeLoadMore.bind(vnode.state, vnode.dom)
+        window.addEventListener('scroll', vnode.state.maybeLoadMore)
+        window.addEventListener('resize', vnode.state.maybeLoadMore)
+        vnode.state.timer = window.setInterval(vnode.state.maybeLoadMore, 200)
+        vnode.state.onupdate(vnode)
+    },
+    onupdate: function(vnode) {
+        vnode.state.loader = vnode.attrs.loader
     },
     onremove: function(vnode) {
-        window.clearInterval(vnode.state.autoloadTimer)
-        window.removeEventListener('scroll', vnode.state.autoload)
-        window.removeEventListener('resize', vnode.state.autoload)
+        window.clearInterval(vnode.state.timer)
+        window.removeEventListener('scroll', vnode.state.maybeLoadMore)
+        window.removeEventListener('resize', vnode.state.maybeLoadMore)
     },
     view: function(vnode) {
         return m('table.table.table-condensed', [
@@ -48,7 +54,7 @@ window.components.collection_table = {
                 }),
             ]),
             m('tfoot', m('tr', [
-                m('th[colspan=4]', m('button.btn.btn-xs', {
+                vnode.attrs.loader.done ? null : m('th[colspan=4]', m('button.btn.btn-xs', {
                     className: vnode.attrs.loader.loadMore ? 'btn-primary' : 'btn-default',
                     style: {
                         display: 'block',
index 1dc70797526df7b68cdd5c052e424321812198f9..0a3181bf2d2bdf22428c6a297cdb473267128138 100644 (file)
@@ -10,7 +10,7 @@ window.models.Pager = function(loadFunc) {
         done: false,
         items: m.stream(),
         thresholdItem: null,
-        loadNextPage: function() {
+        loadMore: function() {
             // Get the next page, if there are any more items to get.
             if (pager.done)
                 return
@@ -53,6 +53,7 @@ window.models.MultisiteLoader = function(config) {
     Object.assign(loader, config, {
         // Sorted items ready to display, merged from all pagers.
         displayable: [],
+        done: false,
         pagers: {},
         loadMore: false,
         // Number of undisplayed items to keep on hand for each result
@@ -68,7 +69,7 @@ window.models.MultisiteLoader = function(config) {
     m.stream.merge(Object.keys(sessions).map(function(key) {
         var pager = new window.models.Pager(loader.loadFunc.bind(null, sessions[key]))
         loader.pagers[key] = pager
-        pager.loadNextPage()
+        pager.loadMore()
         // Resolve the stream with the session key when the results
         // arrive.
         return pager.items.map(function() { return key })
@@ -112,14 +113,15 @@ window.models.MultisiteLoader = function(config) {
             if (!loader.pagers[key].done)
                 loadable.push(loader.pagers[key])
         })
-        if (loadable.length == 0)
+        if (loadable.length == 0) {
+            loader.done = true
             loader.loadMore = false
-        else
+        else
             loader.loadMore = function() {
                 loader.loadMore = false
                 loadable.map(function(pager) {
                     if (pager.items().length - pager.itemsDisplayed < loader.lowWaterMark)
-                        pager.loadNextPage()
+                        pager.loadMore()
                 })
             }
     })