instantpage.js 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. /*! instant.page v5.1.0 - (C) 2019-2020 Alexandre Dieulot - https://instant.page/license */
  2. let mouseoverTimer
  3. let lastTouchTimestamp
  4. const prefetches = new Set()
  5. const prefetchElement = document.createElement('link')
  6. const isSupported = prefetchElement.relList && prefetchElement.relList.supports && prefetchElement.relList.supports('prefetch')
  7. && window.IntersectionObserver && 'isIntersecting' in IntersectionObserverEntry.prototype
  8. const allowQueryString = 'instantAllowQueryString' in document.body.dataset
  9. const allowExternalLinks = 'instantAllowExternalLinks' in document.body.dataset
  10. const useWhitelist = 'instantWhitelist' in document.body.dataset
  11. const mousedownShortcut = 'instantMousedownShortcut' in document.body.dataset
  12. const DELAY_TO_NOT_BE_CONSIDERED_A_TOUCH_INITIATED_ACTION = 1111
  13. let delayOnHover = 65
  14. let useMousedown = false
  15. let useMousedownOnly = false
  16. let useViewport = false
  17. if ('instantIntensity' in document.body.dataset) {
  18. const intensity = document.body.dataset.instantIntensity
  19. if (intensity.substr(0, 'mousedown'.length) == 'mousedown') {
  20. useMousedown = true
  21. if (intensity == 'mousedown-only') {
  22. useMousedownOnly = true
  23. }
  24. }
  25. else if (intensity.substr(0, 'viewport'.length) == 'viewport') {
  26. if (!(navigator.connection && (navigator.connection.saveData || (navigator.connection.effectiveType && navigator.connection.effectiveType.includes('2g'))))) {
  27. if (intensity == "viewport") {
  28. /* Biggest iPhone resolution (which we want): 414 × 896 = 370944
  29. * Small 7" tablet resolution (which we don’t want): 600 × 1024 = 614400
  30. * Note that the viewport (which we check here) is smaller than the resolution due to the UI’s chrome */
  31. if (document.documentElement.clientWidth * document.documentElement.clientHeight < 450000) {
  32. useViewport = true
  33. }
  34. }
  35. else if (intensity == "viewport-all") {
  36. useViewport = true
  37. }
  38. }
  39. }
  40. else {
  41. const milliseconds = parseInt(intensity)
  42. if (!isNaN(milliseconds)) {
  43. delayOnHover = milliseconds
  44. }
  45. }
  46. }
  47. if (isSupported) {
  48. const eventListenersOptions = {
  49. capture: true,
  50. passive: true,
  51. }
  52. if (!useMousedownOnly) {
  53. document.addEventListener('touchstart', touchstartListener, eventListenersOptions)
  54. }
  55. if (!useMousedown) {
  56. document.addEventListener('mouseover', mouseoverListener, eventListenersOptions)
  57. }
  58. else if (!mousedownShortcut) {
  59. document.addEventListener('mousedown', mousedownListener, eventListenersOptions)
  60. }
  61. if (mousedownShortcut) {
  62. document.addEventListener('mousedown', mousedownShortcutListener, eventListenersOptions)
  63. }
  64. if (useViewport) {
  65. let triggeringFunction
  66. if (window.requestIdleCallback) {
  67. triggeringFunction = (callback) => {
  68. requestIdleCallback(callback, {
  69. timeout: 1500,
  70. })
  71. }
  72. }
  73. else {
  74. triggeringFunction = (callback) => {
  75. callback()
  76. }
  77. }
  78. triggeringFunction(() => {
  79. const intersectionObserver = new IntersectionObserver((entries) => {
  80. entries.forEach((entry) => {
  81. if (entry.isIntersecting) {
  82. const linkElement = entry.target
  83. intersectionObserver.unobserve(linkElement)
  84. preload(linkElement.href)
  85. }
  86. })
  87. })
  88. document.querySelectorAll('a').forEach((linkElement) => {
  89. if (isPreloadable(linkElement)) {
  90. intersectionObserver.observe(linkElement)
  91. }
  92. })
  93. })
  94. }
  95. }
  96. function touchstartListener(event) {
  97. /* Chrome on Android calls mouseover before touchcancel so `lastTouchTimestamp`
  98. * must be assigned on touchstart to be measured on mouseover. */
  99. lastTouchTimestamp = performance.now()
  100. const linkElement = event.target.closest('a')
  101. if (!isPreloadable(linkElement)) {
  102. return
  103. }
  104. preload(linkElement.href)
  105. }
  106. function mouseoverListener(event) {
  107. if (performance.now() - lastTouchTimestamp < DELAY_TO_NOT_BE_CONSIDERED_A_TOUCH_INITIATED_ACTION) {
  108. return
  109. }
  110. const linkElement = event.target.closest('a')
  111. if (!isPreloadable(linkElement)) {
  112. return
  113. }
  114. linkElement.addEventListener('mouseout', mouseoutListener, {passive: true})
  115. mouseoverTimer = setTimeout(() => {
  116. preload(linkElement.href)
  117. mouseoverTimer = undefined
  118. }, delayOnHover)
  119. }
  120. function mousedownListener(event) {
  121. const linkElement = event.target.closest('a')
  122. if (!isPreloadable(linkElement)) {
  123. return
  124. }
  125. preload(linkElement.href)
  126. }
  127. function mouseoutListener(event) {
  128. if (event.relatedTarget && event.target.closest('a') == event.relatedTarget.closest('a')) {
  129. return
  130. }
  131. if (mouseoverTimer) {
  132. clearTimeout(mouseoverTimer)
  133. mouseoverTimer = undefined
  134. }
  135. }
  136. function mousedownShortcutListener(event) {
  137. if (performance.now() - lastTouchTimestamp < DELAY_TO_NOT_BE_CONSIDERED_A_TOUCH_INITIATED_ACTION) {
  138. return
  139. }
  140. const linkElement = event.target.closest('a')
  141. if (event.which > 1 || event.metaKey || event.ctrlKey) {
  142. return
  143. }
  144. if (!linkElement) {
  145. return
  146. }
  147. linkElement.addEventListener('click', function (event) {
  148. if (event.detail == 1337) {
  149. return
  150. }
  151. event.preventDefault()
  152. }, {capture: true, passive: false, once: true})
  153. const customEvent = new MouseEvent('click', {view: window, bubbles: true, cancelable: false, detail: 1337})
  154. linkElement.dispatchEvent(customEvent)
  155. }
  156. function isPreloadable(linkElement) {
  157. if (!linkElement || !linkElement.href) {
  158. return
  159. }
  160. if (useWhitelist && !('instant' in linkElement.dataset)) {
  161. return
  162. }
  163. if (!allowExternalLinks && linkElement.origin != location.origin && !('instant' in linkElement.dataset)) {
  164. return
  165. }
  166. if (!['http:', 'https:'].includes(linkElement.protocol)) {
  167. return
  168. }
  169. if (linkElement.protocol == 'http:' && location.protocol == 'https:') {
  170. return
  171. }
  172. if (!allowQueryString && linkElement.search && !('instant' in linkElement.dataset)) {
  173. return
  174. }
  175. if (linkElement.hash && linkElement.pathname + linkElement.search == location.pathname + location.search) {
  176. return
  177. }
  178. if ('noInstant' in linkElement.dataset) {
  179. return
  180. }
  181. return true
  182. }
  183. function preload(url) {
  184. if (prefetches.has(url)) {
  185. return
  186. }
  187. const prefetcher = document.createElement('link')
  188. prefetcher.rel = 'prefetch'
  189. prefetcher.href = url
  190. document.head.appendChild(prefetcher)
  191. prefetches.add(url)
  192. }