Turbo Hover Preloading

turbo_hover_preloading.js

class Preloader {
  static delay = 100

  constructor (element) {
    this.element = element

    this.element.addEventListener("mouseenter", this.didMouseEnter)
    this.element.addEventListener("mouseleave", this.didMouseLeave)
  }

  didMouseEnter = () => {
    if (this.mouseOverTimeout) { return }

    this.mouseOverTimeout = setTimeout(this.preload, this.delay)
  }

  didMouseLeave = () => {
    clearTimeout(this.mouseOverTimeout)

    this.mouseOverTimeout = null
  }

  preload = () => {
    const event = new CustomEvent("preload", { bubbles: true, cancelable: true })

    if(this.element.dispatchEvent(event)) {
      Turbo.session.preloader.preloadURL(this.element);
    }
  }
}

export default class TurboHoverPreloadingObserver {
  start () {
    this.observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        mutation.addedNodes.forEach((node) => {
          if (node instanceof Element) {
            this.attachPreloadingControllers(node)
          }
        })
      })
    })

    this.observer.observe(document, { childList: true, subtree: true })

    this.attachPreloadingControllers(document)
  }

  stop () {
    this.observer.disconnect()
  }

  attachPreloadingControllers = (parent) => {
    parent.querySelectorAll("a").forEach((linkElement) => {
      if (linkElement.preloader) { return }

      linkElement.preloader = new Preloader(linkElement)
    })
  }
}