+++ /dev/null
-/* InstantClick 2.1 | (C) 2014 Alexandre Dieulot | http://instantclick.io/license.html */
-var InstantClick = function(document, location) {
- // Internal variables
- var $currentLocationWithoutHash
- var $urlToPreload
- var $preloadTimer
-
- // Preloading-related variables
- var $history = {}
- var $xhr
- var $url = false
- var $title = false
- var $hasBody = true
- var $body = false
- var $timing = {}
- var $isPreloading = false
- var $isWaitingForCompletion = false
-
- // Variables defined by public functions
- var $useWhitelist
- var $preloadOnMousedown
- var $delayBeforePreload
- var $eventsCallbacks = {
- change: []
- }
-
-
- ////////// HELPERS //////////
-
-
- function removeHash(url) {
- var index = url.indexOf('#')
- if (index < 0) {
- return url
- }
- return url.substr(0, index)
- }
-
- function getLinkTarget(target) {
- while (target.nodeName != 'A') {
- target = target.parentNode
- }
- return target
- }
-
- function triggerPageEvent(eventType) {
- for (var i = 0; i < $eventsCallbacks[eventType].length; i++) {
- $eventsCallbacks[eventType][i]()
- }
- }
-
- function changePage(title, body, newUrl, scrollY_) {
- var doc = document.implementation.createHTMLDocument('')
- doc.documentElement.innerHTML = body
- document.documentElement.replaceChild(doc.body, document.body)
- /* We cannot just use `document.body = doc.body` as it causes Safari 5.1, 6.0,
- and Mobile 7.0 to execute script tags directly.
- */
-
- var elem = document.createElement('i')
- elem.innerHTML = title
- document.title = elem.textContent
-
- if (newUrl) {
- history.pushState(null, null, newUrl)
-
- var hashIndex = newUrl.indexOf('#')
- var hashElem = hashIndex > -1 && document.getElementById(newUrl.substr(hashIndex + 1))
- var offset = 0
- if (hashElem) {
- for (; hashElem.offsetParent; hashElem = hashElem.offsetParent) {
- offset += hashElem.offsetTop
- }
- }
- scrollTo(0, offset)
-
- $currentLocationWithoutHash = removeHash(newUrl)
- }
- else {
- scrollTo(0, scrollY_)
- }
-
- instantanize()
-
- triggerPageEvent('change')
- }
-
- function setPreloadingAsHalted() {
- $isPreloading = false
- $isWaitingForCompletion = false
- }
-
-
- ////////// EVENT HANDLERS //////////
-
-
- function mousedown(e) {
- preload(getLinkTarget(e.target).href)
- }
-
- function mouseover(e) {
- var a = getLinkTarget(e.target)
- a.addEventListener('mouseout', mouseout)
- if (!$delayBeforePreload) {
- preload(a.href)
- }
- else {
- $urlToPreload = a.href
- $preloadTimer = setTimeout(preload, $delayBeforePreload)
- }
- }
-
- function click(e) {
- if (e.which > 1 || e.metaKey || e.ctrlKey) { // Opening in new tab
- return
- }
- e.preventDefault()
- display(getLinkTarget(e.target).href)
- }
-
- function mouseout() {
- if ($preloadTimer) {
- clearTimeout($preloadTimer)
- $preloadTimer = false
- return
- }
-
- if (!$isPreloading || $isWaitingForCompletion) {
- return
- }
- $xhr.abort()
- setPreloadingAsHalted()
- }
-
- function readystatechange() {
- if ($xhr.readyState < 4) {
- return
- }
- if ($xhr.status == 0) {
- /* Request aborted */
- return
- }
-
- $timing.ready = +new Date - $timing.start
-
- var text = $xhr.responseText
-
- var titleIndex = text.indexOf('<title')
- if (titleIndex > -1) {
- $title = text.substr(text.indexOf('>', titleIndex) + 1)
- $title = $title.substr(0, $title.indexOf('</title'))
- }
-
- var bodyIndex = text.indexOf('<body')
- if (bodyIndex > -1) {
- $body = text.substr(bodyIndex)
- var closingIndex = $body.indexOf('</body')
- if (closingIndex > -1) {
- $body = $body.substr(0, closingIndex)
- }
-
- var urlWithoutHash = removeHash($url)
- $history[urlWithoutHash] = {
- body: $body,
- title: $title,
- scrollY: urlWithoutHash in $history ? $history[urlWithoutHash].scrollY : 0
- }
- }
- else {
- $hasBody = false
- }
-
- if ($isWaitingForCompletion) {
- $isWaitingForCompletion = false
- display($url)
- }
- }
-
-
- ////////// MAIN FUNCTIONS //////////
-
-
- function instantanize(isInitializing) {
- var as = document.getElementsByTagName('a'), a, domain = location.protocol + '//' + location.host
- for (var i = as.length - 1; i >= 0; i--) {
- a = as[i]
- if (a.target || // target="_blank" etc.
- a.hasAttribute('download') ||
- a.href.indexOf(domain + '/') != 0 || // another domain (or no href attribute)
- a.href.indexOf('#') > -1 && removeHash(a.href) == $currentLocationWithoutHash || // link to an anchor
- ($useWhitelist ? !a.hasAttribute('data-instant') : a.hasAttribute('data-no-instant'))) {
- continue
- }
- if ($preloadOnMousedown) {
- a.addEventListener('mousedown', mousedown)
- }
- else {
- a.addEventListener('mouseover', mouseover)
- }
- a.addEventListener('click', click)
- }
- if (!isInitializing) {
- var scripts = document.getElementsByTagName('script'), script, copy, parentNode, nextSibling
- for (i = 0, j = scripts.length; i < j; i++) {
- script = scripts[i]
- if (script.hasAttribute('data-no-instant')) {
- continue
- }
- copy = document.createElement('script')
- if (script.src) {
- copy.src = script.src
- }
- if (script.innerHTML) {
- copy.innerHTML = script.innerHTML
- }
- parentNode = script.parentNode
- nextSibling = script.nextSibling
- parentNode.removeChild(script)
- parentNode.insertBefore(copy, nextSibling)
- }
- }
- }
-
- function preload(url) {
- if (!$preloadOnMousedown && 'display' in $timing && +new Date - ($timing.start + $timing.display) < 100) {
- /* After a page is displayed, if the user's cursor happens to be above a link
- a mouseover event will be in most browsers triggered automatically, and in
- other browsers it will be triggered when the user moves his mouse by 1px.
-
- Here are the behavior I noticed, all on Windows:
- - Safari 5.1: auto-triggers after 0 ms
- - IE 11: auto-triggers after 30-80 ms (looks like it depends on page's size)
- - Firefox: auto-triggers after 10 ms
- - Opera 18: auto-triggers after 10 ms
-
- - Chrome: triggers when cursor moved
- - Opera 12.16: triggers when cursor moved
-
- To remedy to this, we do not start preloading if last display occurred less than
- 100 ms ago. If they happen to click on the link, they will be redirected.
- */
-
- return
- }
- if ($preloadTimer) {
- $clearTimeout($preloadTimer)
- $preloadTimer = false
- }
-
- if (!url) {
- url = $urlToPreload
- }
-
- if ($isPreloading && (url == $url || $isWaitingForCompletion)) {
- return
- }
- $isPreloading = true
- $isWaitingForCompletion = false
-
- $url = url
- $body = false
- $hasBody = true
- $timing = {
- start: +new Date
- }
- $xhr.open('GET', url)
- $xhr.send()
- }
-
- function display(url) {
- if (!('display' in $timing)) {
- $timing.display = +new Date - $timing.start
- }
- if ($preloadTimer) {
- /* Happens when there’s a delay before preloading and that delay
- hasn't expired (preloading didn't kick in).
- */
-
- if ($url && $url != url) {
- /* Happens when the user clicks on a link before preloading
- kicks in while another link is already preloading.
- */
-
- location.href = url
- return
- }
- preload(url)
- $isWaitingForCompletion = true
- return
- }
- if (!$isPreloading || $isWaitingForCompletion) {
- /* If the page isn't preloaded, it likely means
- the user has focused on a link (with his Tab
- key) and then pressed Return, which triggered a click.
- Because very few people do this, it isn't worth handling this
- case and preloading on focus (also, focusing on a link
- doesn't mean it's likely that you'll "click" on it), so we just
- redirect them when they "click".
- It could also mean the user hovered over a link less than 100 ms
- after a page display, thus we didn't start the preload (see
- comments in `preload()` for the rationale behind this.)
-
- If the page is waiting for completion, the user clicked twice
- while the page was preloading.
- Two possibilities:
- 1) He clicks on the same link again, either because it's slow
- to load (there's no browser loading indicator with
- InstantClick, so he might think his click hasn't registered
- if the page isn't loading fast enough) or because he has
- a habit of double clicking on the web;
- 2) He clicks on another link.
-
- In the first case, we redirect him (send him to the page the old
- way) so that he can have the browser's loading indicator back.
- In the second case, we redirect him because we haven't preloaded
- that link, since we were already preloading the last one.
-
- Determining if it's a double click might be overkill as there is
- (hopefully) not that many people that double click on the web.
- Fighting against the perception that the page is stuck is
- interesting though, a seemingly good way to do that would be to
- later incorporate a progress bar.
- */
-
- location.href = url
- return
- }
- if (!$hasBody) {
- location.href = $url
- return
- }
- if (!$body) {
- $isWaitingForCompletion = true
- return
- }
- $history[$currentLocationWithoutHash].scrollY = pageYOffset
- setPreloadingAsHalted()
- changePage($title, $body, $url)
- }
-
-
- ////////// PUBLIC VARIABLE AND FUNCTIONS //////////
-
-
- var supported = 'pushState' in history
-
- function init() {
- if ($currentLocationWithoutHash) {
- /* Already initialized */
- return
- }
- if (!supported) {
- triggerPageEvent('change')
- return
- }
- for (var i = arguments.length - 1; i >= 0; i--) {
- var arg = arguments[i]
- if (arg === true) {
- $useWhitelist = true
- }
- else if (arg == 'mousedown') {
- $preloadOnMousedown = true
- }
- else if (typeof arg == 'number') {
- $delayBeforePreload = arg
- }
- }
- $currentLocationWithoutHash = removeHash(location.href)
- $history[$currentLocationWithoutHash] = {
- body: document.body.outerHTML,
- title: document.title,
- scrollY: pageYOffset
- }
- $xhr = new XMLHttpRequest()
- $xhr.addEventListener('readystatechange', readystatechange)
-
- instantanize(true)
-
- triggerPageEvent('change')
-
- addEventListener('popstate', function() {
- var loc = removeHash(location.href)
- if (loc == $currentLocationWithoutHash) {
- return
- }
- if (!(loc in $history)) {
- location.href = location.href // Reloads the page and makes use of cache for assets, unlike location.reload()
- return
- }
- $history[$currentLocationWithoutHash].scrollY = pageYOffset
- $currentLocationWithoutHash = loc
- changePage($history[loc].title, $history[loc].body, false, $history[loc].scrollY)
- })
- }
-
- function on(eventType, callback) {
- $eventsCallbacks[eventType].push(callback)
- }
-
- /* The debug function isn't included by default to reduce file size.
- To enable it, add a slash at the beginning of the comment englobing
- the debug function, and uncomment "debug: debug," in the return
- statement below the function. */
-
- /*
- function debug() {
- return {
- currentLocationWithoutHash: $currentLocationWithoutHash,
- history: $history,
- xhr: $xhr,
- url: $url,
- title: $title,
- hasBody: $hasBody,
- body: $body,
- timing: $timing,
- isPreloading: $isPreloading,
- isWaitingForCompletion: $isWaitingForCompletion
- }
- }
- //*/
-
-
- return {
- // debug: debug,
- supported: supported,
- init: init,
- on: on
- }
-
-}(document, location);
projects / odoo / odoo.git / commitdiff