Upgrade clingBottom to handle removals and be easier to use

Co-authored-by: Stamates <stamates@hotmail.com>

apps/block_scout_web/assets/js/pages/address.js

@@ -4,7 +4,7 @@ import URI from 'urijs'
 import humps from 'humps'
 import numeral from 'numeral'
 import socket from '../socket'
-import { batchChannel, initRedux, prependWithClingBottom } from '../utils'
+import { batchChannel, initRedux, slideDownPrepend, clingBottom } from '../utils'
 import { updateAllAges } from '../lib/from_now'
 import { updateAllCalculatedUsdValues } from '../lib/currency.js'
 import { loadTokenBalanceDropdown } from '../lib/token_balance_dropdown'
@@ -209,14 +209,16 @@ if ($addressDetailsPage.length) {
         $channelBatching.hide()
       }
       if (oldState.newInternalTransactions !== state.newInternalTransactions && $internalTransactionsList.length) {
-        prependWithClingBottom($internalTransactionsList, state.newInternalTransactions.slice(oldState.newInternalTransactions.length).reverse().join(''))
+        clingBottom()
+        slideDownPrepend($internalTransactionsList, state.newInternalTransactions.slice(oldState.newInternalTransactions.length).reverse().join(''))
         updateAllAges()
       }
       if (oldState.pendingTransactionHashes.length !== state.pendingTransactionHashes.length && $pendingTransactionsCount.length) {
         $pendingTransactionsCount[0].innerHTML = numeral(state.pendingTransactionHashes.length).format()
       }
       if (oldState.newPendingTransactions !== state.newPendingTransactions && $pendingTransactionsList.length) {
-        prependWithClingBottom($pendingTransactionsList, state.newPendingTransactions.slice(oldState.newPendingTransactions.length).reverse().join(''))
+        clingBottom()
+        slideDownPrepend($pendingTransactionsList, state.newPendingTransactions.slice(oldState.newPendingTransactions.length).reverse().join(''))
         updateAllAges()
       }
       if (oldState.newTransactions !== state.newTransactions && $transactionsList.length) {
@@ -227,15 +229,17 @@ if ($addressDetailsPage.length) {
           setTimeout(() => {
             $transaction.addClass('shrink-out')
             setTimeout(() => {
+              clingBottom()
               $transaction.slideUp({ complete: () => $transaction.remove() })
-              prependWithClingBottom($transactionsList, transactionHtml)
+              slideDownPrepend($transactionsList, transactionHtml)
             }, 400)
           }, 1000)
         })
         updateAllAges()
       }
       if (oldState.newBlock !== state.newBlock) {
-        prependWithClingBottom($validationsList, state.newBlock)
+        clingBottom()
+        slideDownPrepend($validationsList, state.newBlock)
         updateAllAges()
       }
     }

apps/block_scout_web/assets/js/pages/block.js

@@ -4,7 +4,7 @@ import URI from 'urijs'
 import humps from 'humps'
 import socket from '../socket'
 import { updateAllAges } from '../lib/from_now'
-import { buildFullBlockList, initRedux, beforeWithClingBottom, skippedBlockListBuilder } from '../utils'
+import { buildFullBlockList, initRedux, slideDownBefore, skippedBlockListBuilder, clingBottom } from '../utils'
 
 export const initialState = {
   blockNumbers: [],
@@ -97,10 +97,12 @@ if ($blockListPage.length) {
         } else {
           if (skippedBlockNumbers.length) {
             _.forEachRight(skippedBlockNumbers, (skippedBlockNumber) => {
-              beforeWithClingBottom($(`[data-block-number="${skippedBlockNumber - 1}"]`), placeHolderBlock(skippedBlockNumber))
+              clingBottom()
+              slideDownBefore($(`[data-block-number="${skippedBlockNumber - 1}"]`), placeHolderBlock(skippedBlockNumber))
             })
           }
-          beforeWithClingBottom($(`[data-block-number="${state.blockNumbers[0] - 1}"]`), state.newBlock)
+          clingBottom()
+          slideDownBefore($(`[data-block-number="${state.blockNumbers[0] - 1}"]`), state.newBlock)
         }
         updateAllAges()
       }

apps/block_scout_web/assets/js/pages/transaction.js

@@ -5,7 +5,7 @@ import humps from 'humps'
 import numeral from 'numeral'
 import socket from '../socket'
 import { updateAllAges } from '../lib/from_now'
-import { batchChannel, initRedux, prependWithClingBottom } from '../utils'
+import { batchChannel, initRedux, slideDownPrepend, clingBottom } from '../utils'
 
 const BATCH_THRESHOLD = 10
 
@@ -189,7 +189,8 @@ if ($transactionPendingListPage.length) {
       }
       if (oldState.newPendingTransactions !== state.newPendingTransactions) {
         const newTransactionsToInsert = state.newPendingTransactions.slice(oldState.newPendingTransactions.length)
-        prependWithClingBottom($pendingTransactionsList, newTransactionsToInsert.reverse().join(''))
+        clingBottom()
+        slideDownPrepend($pendingTransactionsList, newTransactionsToInsert.reverse().join(''))
 
         updateAllAges()
       }
@@ -230,7 +231,8 @@ if ($transactionListPage.length) {
       }
       if (oldState.newTransactions !== state.newTransactions) {
         const newTransactionsToInsert = state.newTransactions.slice(oldState.newTransactions.length)
-        prependWithClingBottom($transactionsList, newTransactionsToInsert.reverse().join(''))
+        clingBottom()
+        slideDownPrepend($transactionsList, newTransactionsToInsert.reverse().join(''))
 
         updateAllAges()
       }

apps/block_scout_web/assets/js/utils.js

@@ -45,61 +45,54 @@ export function skippedBlockListBuilder (skippedBlockNumbers, newestBlock, oldes
   return skippedBlockNumbers
 }
 
-export function slideDownPrepend ($el, content, callback) {
+export function slideDownPrepend ($el, content) {
   const $content = $(content)
   $el.prepend($content.hide())
-  $content.slideDown({ complete: callback })
+  return $content.slideDown()
 }
-export function slideDownBefore ($el, content, callback) {
+export function slideDownBefore ($el, content) {
   const $content = $(content)
   $el.before($content.hide())
-  $content.slideDown({ complete: callback })
-}
-export function prependWithClingBottom ($el, content) {
-  return slideDownPrepend($el, content, clingBottom($el))
-}
-export function beforeWithClingBottom ($el, content) {
-  return slideDownBefore($el, content, clingBottom($el))
+  return $content.slideDown()
 }
 
-function clingBottom ($el) {
+let clingBottomLoop
+export function clingBottom ($el, content) {
+  if (clingBottomLoop) window.cancelAnimationFrame(clingBottomLoop)
+
   function userAtTop () {
     return window.scrollY < $('[data-selector="navbar"]').outerHeight()
   }
-  if (userAtTop()) return true
-
-  let isAnimating
-  function setIsAnimating () {
-    isAnimating = true
-  }
-  $el.on('animationstart', setIsAnimating)
+  if (userAtTop()) return
 
+  let pageHeight = document.body.scrollHeight
   let startingScrollPosition = window.scrollY
   let endingScrollPosition = window.scrollY
   function userIsScrolling () {
-    return window.scrollY < startingScrollPosition || endingScrollPosition < window.scrollY
+    const pageHeightDiff = Math.abs(document.body.scrollHeight - pageHeight)
+    const minScrollPosition = _.min([
+      startingScrollPosition,
+      endingScrollPosition
+    ]) - pageHeightDiff
+    const maxScrollPosition = _.max([
+      startingScrollPosition,
+      endingScrollPosition
+    ]) + pageHeightDiff
+    return window.scrollY < minScrollPosition || maxScrollPosition < window.scrollY
   }
 
   const clingDistanceFromBottom = document.body.scrollHeight - window.scrollY
-  let clingBottomLoop = window.requestAnimationFrame(function clingBottom () {
-    if (userIsScrolling()) return stopClinging()
+  clingBottomLoop = window.requestAnimationFrame(function clingBottomFrame () {
+    if (userIsScrolling()) {
+      window.cancelAnimationFrame(clingBottomLoop)
+      clingBottomLoop = null
+      return
+    }
 
+    pageHeight = document.body.scrollHeight
     startingScrollPosition = window.scrollY
-    endingScrollPosition = document.body.scrollHeight - clingDistanceFromBottom
+    endingScrollPosition = pageHeight - clingDistanceFromBottom
     $(window).scrollTop(endingScrollPosition)
-    clingBottomLoop = window.requestAnimationFrame(clingBottom)
+    clingBottomLoop = window.requestAnimationFrame(clingBottomFrame)
   })
-
-  function stopClinging () {
-    window.cancelAnimationFrame(clingBottomLoop)
-    $el.off('animationstart', setIsAnimating)
-    $el.off('animationend animationcancel', stopClinging)
-  }
-
-  return {
-    function () {
-      $el.on('animationend animationcancel', stopClinging)
-      setTimeout(() => !isAnimating && stopClinging(), 100)
-    }
-  }
 }