instantpage.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. /*! instant.page v0.0.0 - (C) 2019 Alexandre Dieulot - https://instant.page/license */
  2. let urlToPreload
  3. let mouseoverTimer
  4. let lastTouchTimestamp
  5. const prefetcher = document.createElement('link')
  6. const isSupported = prefetcher.relList && prefetcher.relList.supports && prefetcher.relList.supports('prefetch')
  7. if (isSupported) {
  8. prefetcher.rel = 'prefetch'
  9. document.head.appendChild(prefetcher)
  10. const eventListenersOptions = {
  11. capture: true,
  12. passive: true,
  13. }
  14. document.addEventListener('touchstart', touchstartListener, eventListenersOptions)
  15. document.addEventListener('mouseover', mouseoverListener, eventListenersOptions)
  16. }
  17. function touchstartListener(event) {
  18. /* Chrome on Android calls mouseover before touchcancel so `lastTouchTimestamp`
  19. * must be assigned on touchstart to be measured on mouseover. */
  20. lastTouchTimestamp = performance.now()
  21. const linkElement = event.target.closest('a')
  22. if (!linkElement) {
  23. return
  24. }
  25. if (!isPreloadable(linkElement)) {
  26. return
  27. }
  28. linkElement.addEventListener('touchcancel', touchendAndTouchcancelListener, {passive: true})
  29. linkElement.addEventListener('touchend', touchendAndTouchcancelListener, {passive: true})
  30. urlToPreload = linkElement.href
  31. preload(linkElement.href)
  32. }
  33. function touchendAndTouchcancelListener() {
  34. urlToPreload = undefined
  35. stopPreloading()
  36. }
  37. function mouseoverListener(event) {
  38. if (performance.now() - lastTouchTimestamp < 1100) {
  39. return
  40. }
  41. const linkElement = event.target.closest('a')
  42. if (!linkElement) {
  43. return
  44. }
  45. if (!isPreloadable(linkElement)) {
  46. return
  47. }
  48. linkElement.addEventListener('mouseout', mouseoutListener, {passive: true})
  49. urlToPreload = linkElement.href
  50. mouseoverTimer = setTimeout(() => {
  51. preload(linkElement.href)
  52. mouseoverTimer = undefined
  53. }, 65)
  54. }
  55. function mouseoutListener(event) {
  56. if (event.relatedTarget && event.target.closest('a') == event.relatedTarget.closest('a')) {
  57. return
  58. }
  59. if (mouseoverTimer) {
  60. clearTimeout(mouseoverTimer)
  61. mouseoverTimer = undefined
  62. }
  63. else {
  64. urlToPreload = undefined
  65. stopPreloading()
  66. }
  67. }
  68. function isPreloadable(linkElement) {
  69. if (urlToPreload == linkElement.href) {
  70. return false
  71. }
  72. const urlObject = new URL(linkElement.href)
  73. if (urlObject.origin != location.origin) {
  74. return false
  75. }
  76. if (urlObject.pathname + urlObject.search == location.pathname + location.search && urlObject.hash) {
  77. return
  78. }
  79. if ('noInstant' in linkElement.dataset) {
  80. return false
  81. }
  82. return true
  83. }
  84. function preload(url) {
  85. prefetcher.href = url
  86. }
  87. function stopPreloading() {
  88. /* The spec says an empty string should abort the prefetching
  89. * but Firefox 64 interprets it as a relative URL to prefetch. */
  90. prefetcher.removeAttribute('href')
  91. }