Home Explore Help
Sign In
hugh
/
instant.page
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

mousedown & mousedown-only

Alexandre Dieulot 5 years ago
parent
3ad963aaf0
commit
d57a390b9c
4 changed files with 57 additions and 17 deletions
Unified View Show Diff Stats
  1. 42 9
      instantpage.js
  2. 8 5
      test/app.js
  3. 1 1
      test/footer.html
  4. 6 2
      test/header.html

+ 42 - 9
instantpage.js
View File 

@@ -12,10 +12,20 @@ const allowExternalLinks = 'instantAllowExternalLinks' in document.body.dataset
 
 const useWhitelist = 'instantWhitelist' in document.body.dataset
 
 const useWhitelist = 'instantWhitelist' in document.body.dataset
 
 
 
 let delayOnHover = 65
 
 let delayOnHover = 65
 
+let useMousedown = false
 
+let useMousedownOnly = false
 
 if ('instantIntensity' in document.body.dataset) {
 
 if ('instantIntensity' in document.body.dataset) {
 
-  const milliseconds = parseInt(document.body.dataset.instantIntensity)
 
-  if (milliseconds != NaN) {
 
-    delayOnHover = milliseconds
 
+  if (document.body.dataset.instantIntensity.substr(0, 'mousedown'.length) == 'mousedown') {
 
+    useMousedown = true
 
+    if (document.body.dataset.instantIntensity == 'mousedown-only') {
 
+      useMousedownOnly = true
 
+    }
 
+  }
 
+  else {
 
+    const milliseconds = parseInt(document.body.dataset.instantIntensity)
 
+    if (milliseconds != NaN) {
 
+      delayOnHover = milliseconds
 
+    }
 
   }
 
   }
 
 }
 
 }
 
 
 
@@ -27,8 +37,17 @@ if (isSupported && !isDataSaverEnabled) {
 
     capture: true,
 
     capture: true,
 
     passive: true,
 
     passive: true,
 
   }
 
   }
 
-  document.addEventListener('touchstart', touchstartListener, eventListenersOptions)
 
-  document.addEventListener('mouseover', mouseoverListener, eventListenersOptions)
 
+
 
+  if (!useMousedownOnly) {
 
+    document.addEventListener('touchstart', touchstartListener, eventListenersOptions)
 
+  }
 
+
 
+  if (!useMousedown) {
 
+    document.addEventListener('mouseover', mouseoverListener, eventListenersOptions)
 
+  }
 
+  else {
 
+    document.addEventListener('mousedown', mousedownListener, eventListenersOptions)
 
+  }
 
 }
 
 }
 
 
 
 function touchstartListener(event) {
 
 function touchstartListener(event) {
 
@@ -75,6 +94,20 @@ function mouseoverListener(event) {
 
   }, delayOnHover)
 
   }, delayOnHover)
 
 }
 
 }
 
 
 
+function mousedownListener(event) {
 
+  const linkElement = event.target.closest('a')
 
+
 
+  if (!isPreloadable(linkElement)) {
 
+    return
 
+  }
 
+
 
+  linkElement.addEventListener('mouseout', mouseoutListener, {passive: true})
 
+
 
+  urlToPreload = linkElement.href
 
+
 
+  preload(linkElement.href)
 
+}
 
+
 
 function mouseoutListener(event) {
 
 function mouseoutListener(event) {
 
   if (event.relatedTarget && event.target.closest('a') == event.relatedTarget.closest('a')) {
 
   if (event.relatedTarget && event.target.closest('a') == event.relatedTarget.closest('a')) {
 
     return
 
     return
 
@@ -84,10 +117,10 @@ function mouseoutListener(event) {
 
     clearTimeout(mouseoverTimer)
 
     clearTimeout(mouseoverTimer)
 
     mouseoverTimer = undefined
 
     mouseoverTimer = undefined
 
   }
 
   }
 
-  else {
 
-    urlToPreload = undefined
 
-    stopPreloading()
 
-  }
 
+
 
+  urlToPreload = undefined
 
+
 
+  stopPreloading()
 
 }
 
 }
 
 
 
 function isPreloadable(linkElement) {
 
 function isPreloadable(linkElement) {

+ 8 - 5
test/app.js
View File 

@@ -15,7 +15,7 @@ let DATA_INSTANT = 0
 
 let SLEEP_TIME = 200
 
 let SLEEP_TIME = 200
 
 let CACHE_MAX_AGE = 0
 
 let CACHE_MAX_AGE = 0
 
 let USE_WHITELIST = 0
 
 let USE_WHITELIST = 0
 
-let HOVER_DELAY = 65
 
+let INTENSITY = 65
 
 
 
 function handleCookies(req) {
 
 function handleCookies(req) {
 
   const cookies = req.headers.cookie
 
   const cookies = req.headers.cookie
 
@@ -36,7 +36,10 @@ function handleCookies(req) {
 
     SLEEP_TIME = cookieValueSplit[1]
 
     SLEEP_TIME = cookieValueSplit[1]
 
     CACHE_MAX_AGE = cookieValueSplit[2]
 
     CACHE_MAX_AGE = cookieValueSplit[2]
 
     USE_WHITELIST = cookieValueSplit[3]
 
     USE_WHITELIST = cookieValueSplit[3]
 
-    HOVER_DELAY = cookieValueSplit[4]
 
+    INTENSITY = cookieValueSplit[4]
 
+    if (isNaN(INTENSITY)) {
 
+      INTENSITY = value.split(',')[4]
 
+    }
 
   })
 
   })
 
 }
 
 }
 
 
 
@@ -83,8 +86,8 @@ async function requestListener(req, res) {
 
     if (USE_WHITELIST) {
 
     if (USE_WHITELIST) {
 
       content = content.replace('<body', '<body data-instant-whitelist')
 
       content = content.replace('<body', '<body data-instant-whitelist')
 
     }
 
     }
 
-    if (HOVER_DELAY != 65) {
 
-      content = content.replace('<body', `<body data-instant-intensity="${HOVER_DELAY}"`)
 
+    else if (INTENSITY != 65) {
 
+      content = content.replace('<body', `<body data-instant-intensity="${INTENSITY}"`)
 
     }
 
     }
 
     dataInstantAttribute = DATA_INSTANT || USE_WHITELIST ? `data-instant` : ``
 
     dataInstantAttribute = DATA_INSTANT || USE_WHITELIST ? `data-instant` : ``
 
 
 
@@ -92,7 +95,7 @@ async function requestListener(req, res) {
 
     content = content.replace(':checked_whitelist', USE_WHITELIST ? 'checked' : '')
 
     content = content.replace(':checked_whitelist', USE_WHITELIST ? 'checked' : '')
 
     content = content.replace(':value_sleep', `value="${SLEEP_TIME}"`)
 
     content = content.replace(':value_sleep', `value="${SLEEP_TIME}"`)
 
     content = content.replace(':value_cacheAge', `value="${CACHE_MAX_AGE}"`)
 
     content = content.replace(':value_cacheAge', `value="${CACHE_MAX_AGE}"`)
 
-    content = content.replace(':value_hoverDelay', `value="${HOVER_DELAY}"`)
 
+    content = content.replace(':value_intensity', `value="${INTENSITY}"`)
 
 
 
     content += `<h1>Page ${page}</h1>`
 
     content += `<h1>Page ${page}</h1>`
 
     for (let i = 1; i <= 3; i++) {
 
     for (let i = 1; i <= 3; i++) {

+ 1 - 1
test/footer.html
View File 

@@ -29,7 +29,7 @@ form.addEventListener('submit', (e) => {
 
     form.sleep.value,
 
     form.sleep.value,
 
     form.cacheAge.value,
 
     form.cacheAge.value,
 
     form.whitelist.checked ? 1 : 0,
 
     form.whitelist.checked ? 1 : 0,
 
-    form.hoverDelay.value,
 
+    form.intensity.value,
 
   ].join(',')
 
   ].join(',')
 
   document.cookie = `instantpage_test=${cookieValue}`
 
   document.cookie = `instantpage_test=${cookieValue}`
 
   location.reload()
 
   location.reload()

+ 6 - 2
test/header.html
View File 

@@ -48,6 +48,10 @@ form label {
 
 form input[type="number"] {
 
 form input[type="number"] {
 
   width: 50px;
 
   width: 50px;
 
 }
 
 }
 
+
 
+form input[type="text"] {
 
+  width: 110px;
 
+}
 
 </style>
 
 </style>
 
 
 
 <body>
 
 <body>
 
@@ -66,8 +70,8 @@ form input[type="number"] {
 
     <input name="sleep" type="number" :value_sleep>
 
     <input name="sleep" type="number" :value_sleep>
 
   </label>
 
   </label>
 
   <label>
 
   <label>
 
-    Delay on hover:
 
-    <input name="hoverDelay" type="number" :value_hoverDelay>
 
+    Intensity:
 
+    <input name="intensity" type="text" :value_intensity>
 
   </label>
 
   </label>
 
   <label>
 
   <label>
 
     Cache max age (in seconds):
 
     Cache max age (in seconds):