app.js

// We need to import the CSS so that webpack will load it.
// The MiniCssExtractPlugin is used to separate it out into
// its own CSS file.
import css from "../css/app.css"

// webpack automatically bundles all modules in your
// entry points. Those entry points can be configured
// in "webpack.config.js".
//
// Import dependencies
//
import "phoenix_html"

import { Socket } from 'phoenix'
import { LiveSocket } from "phoenix_live_view"

// Define hooks for LiveView
window.Hooks = {}

window.Hooks.InfiniteScroll = {
  mounted() {
    this.pending = false

    this.observer = new IntersectionObserver((entries) => {
      const target = entries[0]
      if (target.isIntersecting && !this.pending) {
        this.pending = true
        this.pushEvent("load-more", {})
      }
    }, {
      root: null,
      rootMargin: '100px',
      threshold: 0.1
    })

    this.observer.observe(this.el)
  },

  destroyed() {
    if (this.observer) {
      this.observer.disconnect()
    }
  },

  updated() {
    this.pending = false

    // Check if we're still at the bottom after loading content
    // Use requestAnimationFrame to ensure DOM has fully updated
    requestAnimationFrame(() => {
      const target = this.el
      const rect = target.getBoundingClientRect()
      const isIntersecting = rect.top <= (window.innerHeight || document.documentElement.clientHeight)

      if (isIntersecting && !this.pending) {
        this.pending = true
        this.pushEvent("load-more", {})
      }
    })
  }
}

let liveSocket = new LiveSocket("/live", Socket, { hooks: window.Hooks })
liveSocket.connect()

/*
Make it possible to click line numbers to update the address bar to a
link directly to that line.
*/
if (location.hash) {
  document.getElementById(location.hash.replace('#', '')).classList.add('selected')
}

const lines = document.querySelectorAll('.ghd-line-number')
lines.forEach(line => {
  line.addEventListener('click', e => {
    const parent = line.parentNode

    if (parent && parent.id) {
      document.querySelectorAll('.ghd-line.selected').forEach(line => {
        line.classList.remove('selected')
      })

      parent.classList.add('selected')

      history.replaceState(null, null, '#' + parent.id)
    }
  })
})

const fileHeaders = document.querySelectorAll('.ghd-file-header')
fileHeaders.forEach(header => {
  header.addEventListener('click', e => {
    const parent = header.parentNode

    parent.querySelectorAll('.ghd-diff').forEach(diff => {
      diff.classList.toggle('hidden')
    })
    header.classList.toggle('collapsed') && scrollIfNeeded(header)
  })
})

const scrollIfNeeded = elem => {
  elem.getBoundingClientRect().top < 0 && elem.scrollIntoView(true)
}