Pagination working for columns

Bring pagination system from KIA that is compatible with page refreshes

app/javascript/helpers/html_helpers.js

@@ -0,0 +1,9 @@
+export function createElement(name, properties) {
+  const element = document.createElement(name)
+
+  for (var key in properties) {
+    element.setAttribute(key, properties[key])
+  }
+
+  return element
+}

app/javascript/helpers/scroll_helpers.js

@@ -0,0 +1,71 @@
+export async function keepingScrollPosition(element, promise) {
+  const originalPosition = element.getBoundingClientRect()
+
+  await promise
+
+  const currentPosition = element.getBoundingClientRect()
+
+  const yDiff = currentPosition.top - originalPosition.top
+  const xDiff = currentPosition.left - originalPosition.left
+
+  findNearestScrollableYAncestor(element).scrollTop += yDiff
+  findNearestScrollableXAncestor(element).scrollLeft += xDiff
+}
+
+export function isFullyVisible(element, container = document.documentElement) {
+  const elementRect = element.getBoundingClientRect()
+  const containerRect = container.getBoundingClientRect()
+
+  return elementRect.top >= containerRect.top &&
+    elementRect.bottom <= containerRect.bottom &&
+    elementRect.left >= containerRect.left &&
+    elementRect.right <= containerRect.right
+}
+
+export function isScrolledToBottom(element, threshold = 100) {
+  return (element.scrollHeight - element.scrollTop - element.clientHeight) < threshold
+}
+
+export function scrollToBottom(element) {
+  element.scrollTop = element.scrollHeight
+}
+
+export function scrollIntoView(element, options = { inline: "center", block: "center", behavior: "instant" }) {
+  element.scrollIntoView(options)
+}
+
+// Private
+
+function findNearestScrollableYAncestor(refElement) {
+  return findNearest(refElement, (element) => {
+    const largerThanVisibleArea = element.scrollHeight > element.clientHeight
+
+    const overflowY = getComputedStyle(element).overflowY
+    const scrollableStyle = overflowY === "scroll" || overflowY === "auto"
+
+    return largerThanVisibleArea && scrollableStyle
+  })
+}
+
+function findNearestScrollableXAncestor(refElement) {
+  return findNearest(refElement, (element) => {
+    const largerThanVisibleArea = element.scrollWidth > element.clientWidth
+
+    const overflowX = getComputedStyle(element).overflowX
+    const scrollableStyle = overflowX === "scroll" || overflowX === "auto"
+
+    return largerThanVisibleArea && scrollableStyle
+  })
+}
+
+function findNearest(element, fn) {
+  while (element) {
+    if (fn(element)) {
+      return element
+    } else {
+      element = element.parentElement
+    }
+  }
+
+  return document.documentElement
+}

app/javascript/helpers/timing_helpers.js

@@ -26,6 +26,11 @@ export function onNextEventLoopTick(callback) {
   setTimeout(callback, 0)
 }
 
+export function nextEvent(element, eventName) {
+  return new Promise(resolve => element.addEventListener(eventName, resolve, { once: true }))
+}
+
+
 export function nextFrame() {
   return new Promise(requestAnimationFrame)
 }