Files
pjax/index.js

280 lines
8.0 KiB
JavaScript
Raw Normal View History

2018-01-09 00:44:20 -05:00
var executeScripts = require("./lib/execute-scripts.js")
2016-01-05 14:30:09 +11:00
var forEachEls = require("./lib/foreach-els.js")
var parseOptions = require("./lib/parse-options.js")
var switches = require("./lib/switches")
2014-10-14 08:13:50 +02:00
var newUid = require("./lib/uniqueid.js")
2014-10-14 11:42:36 +02:00
var on = require("./lib/events/on.js")
var trigger = require("./lib/events/trigger.js")
var clone = require("./lib/util/clone.js")
var contains = require("./lib/util/contains.js")
var extend = require("./lib/util/extend.js")
var noop = require("./lib/util/noop")
2016-01-05 14:30:09 +11:00
2014-10-14 08:13:50 +02:00
var Pjax = function(options) {
this.state = {
numPendingSwitches: 0,
href: null,
options: null
}
2014-10-14 08:13:50 +02:00
this.options = parseOptions(options)
2014-10-14 08:13:50 +02:00
this.log("Pjax options", this.options)
if (this.options.scrollRestoration && "scrollRestoration" in history) {
history.scrollRestoration = "manual"
}
this.maxUid = this.lastUid = newUid()
2014-10-14 08:13:50 +02:00
this.parseDOM(document)
2014-10-14 11:42:36 +02:00
on(window, "popstate", function(st) {
2014-10-14 08:13:50 +02:00
if (st.state) {
2016-01-05 15:02:39 +11:00
var opt = clone(this.options)
2014-10-14 08:13:50 +02:00
opt.url = st.state.url
opt.title = st.state.title
opt.history = false
opt.scrollPos = st.state.scrollPos
2014-10-14 08:13:50 +02:00
if (st.state.uid < this.lastUid) {
opt.backward = true
}
else {
opt.forward = true
}
this.lastUid = st.state.uid
// @todo implement history cache here, based on uid
this.loadUrl(st.state.url, opt)
}
}.bind(this))
}
Pjax.switches = switches
2014-10-14 08:13:50 +02:00
Pjax.prototype = {
log: require("./lib/proto/log.js"),
getElements: function(el) {
return el.querySelectorAll(this.options.elements)
},
2014-10-14 08:13:50 +02:00
parseDOM: function(el) {
var parseElement = require("./lib/proto/parse-element")
forEachEls(this.getElements(el), parseElement, this)
},
2014-10-14 08:13:50 +02:00
refresh: function(el) {
this.parseDOM(el || document)
},
reload: function() {
window.location.reload()
},
2014-10-14 08:13:50 +02:00
attachLink: require("./lib/proto/attach-link.js"),
attachForm: require("./lib/proto/attach-form.js"),
2014-10-14 08:13:50 +02:00
forEachSelectors: function(cb, context, DOMcontext) {
2016-01-05 14:22:03 +11:00
return require("./lib/foreach-selectors.js").bind(this)(this.options.selectors, cb, context, DOMcontext)
2014-10-14 08:13:50 +02:00
},
switchSelectors: function(selectors, fromEl, toEl, options) {
2016-01-05 14:22:03 +11:00
return require("./lib/switches-selectors.js").bind(this)(this.options.switches, this.options.switchesOptions, selectors, fromEl, toEl, options)
2014-10-14 08:13:50 +02:00
},
latestChance: function(href) {
window.location = href
},
onSwitch: function() {
trigger(window, "resize scroll")
this.state.numPendingSwitches--
// debounce calls, so we only run this once after all switches are finished.
if (this.state.numPendingSwitches === 0) {
this.afterAllSwitches()
}
2014-10-14 08:13:50 +02:00
},
loadContent: function(html, options) {
2017-11-02 13:02:17 +01:00
var tmpEl = document.implementation.createHTMLDocument("pjax")
2014-10-14 08:13:50 +02:00
// parse HTML attributes to copy them
// since we are forced to use documentElement.innerHTML (outerHTML can't be used for <html>)
var htmlRegex = /<html[^>]+>/gi
var htmlAttribsRegex = /\s?[a-z:]+(?:\=(?:\'|\")[^\'\">]+(?:\'|\"))*/gi
var matches = html.match(htmlRegex)
if (matches && matches.length) {
matches = matches[0].match(htmlAttribsRegex)
if (matches.length) {
matches.shift()
matches.forEach(function(htmlAttrib) {
var attr = htmlAttrib.trim().split("=")
if (attr.length === 1) {
tmpEl.documentElement.setAttribute(attr[0], true)
}
else {
tmpEl.documentElement.setAttribute(attr[0], attr[1].slice(1, -1))
}
2014-10-14 08:13:50 +02:00
})
}
}
tmpEl.documentElement.innerHTML = html
this.log("load content", tmpEl.documentElement.attributes, tmpEl.documentElement.innerHTML.length)
// Clear out any focused controls before inserting new page contents.
if (document.activeElement && contains(document, this.options.selectors, document.activeElement)) {
2014-10-14 08:13:50 +02:00
try {
document.activeElement.blur()
} catch (e) { }
}
2014-10-14 11:42:36 +02:00
this.switchSelectors(this.options.selectors, tmpEl, document, options)
2014-10-14 08:13:50 +02:00
},
abortRequest: require("./lib/abort-request.js"),
doRequest: require("./lib/send-request.js"),
2014-10-14 08:13:50 +02:00
handleResponse: require("./lib/proto/handle-response.js"),
2014-10-14 08:13:50 +02:00
loadUrl: function(href, options) {
options = typeof options === "object" ?
extend({}, this.options, options) :
clone(this.options)
2014-10-14 08:13:50 +02:00
this.log("load href", href, options)
// Abort any previous request
this.abortRequest(this.request)
trigger(document, "pjax:send", options)
2014-10-14 08:13:50 +02:00
// Do the request
this.request = this.doRequest(href, options, this.handleResponse.bind(this))
},
afterAllSwitches: function() {
// FF bug: Wont autofocus fields that are inserted via JS.
// This behavior is incorrect. So if theres no current focus, autofocus
// the last field.
//
// http://www.w3.org/html/wg/drafts/html/master/forms.html
var autofocusEl = Array.prototype.slice.call(document.querySelectorAll("[autofocus]")).pop()
if (autofocusEl && document.activeElement !== autofocusEl) {
autofocusEl.focus()
}
2014-10-14 08:13:50 +02:00
// execute scripts when DOM have been completely updated
this.options.selectors.forEach(function(selector) {
forEachEls(document.querySelectorAll(selector), function(el) {
executeScripts(el)
})
})
var state = this.state
if (state.options.history) {
if (!window.history.state) {
this.lastUid = this.maxUid = newUid()
window.history.replaceState({
2014-10-14 11:42:36 +02:00
url: window.location.href,
title: document.title,
uid: this.maxUid,
2018-01-22 17:32:59 -05:00
scrollPos: [0, 0]
2014-10-14 11:42:36 +02:00
},
document.title)
}
2014-10-14 08:13:50 +02:00
// Update browser history
this.lastUid = this.maxUid = newUid()
window.history.pushState({
url: state.href,
title: state.options.title,
uid: this.maxUid,
2018-01-22 17:32:59 -05:00
scrollPos: [0, 0]
2014-10-14 11:42:36 +02:00
},
state.options.title,
state.href)
}
2014-10-14 08:13:50 +02:00
this.forEachSelectors(function(el) {
this.parseDOM(el)
}, this)
2014-10-14 08:13:50 +02:00
// Fire Events
trigger(document,"pjax:complete pjax:success", state.options)
2014-10-14 08:13:50 +02:00
2018-01-22 19:06:45 +00:00
if (typeof state.options.analytics === "function") {
state.options.analytics()
}
2014-10-14 08:13:50 +02:00
if (state.options.history) {
// First parse url and check for hash to override scroll
var a = document.createElement("a")
a.href = this.state.href
if (a.hash) {
var name = a.hash.slice(1)
name = decodeURIComponent(name)
var curtop = 0
var target = document.getElementById(name) || document.getElementsByName(name)[0]
if (target) {
// http://stackoverflow.com/questions/8111094/cross-browser-javascript-function-to-find-actual-position-of-an-element-in-page
if (target.offsetParent) {
do {
curtop += target.offsetTop
target = target.offsetParent
} while (target)
}
}
window.scrollTo(0, curtop)
}
else if (state.options.scrollTo !== false) {
// Scroll page to top on new page load
if (state.options.scrollTo.length > 1) {
window.scrollTo(state.options.scrollTo[0], state.options.scrollTo[1])
}
else {
window.scrollTo(0, state.options.scrollTo)
}
}
}
2018-01-22 18:56:22 -05:00
else if (state.options.scrollRestoration && state.options.scrollPos) {
window.scrollTo(state.options.scrollPos[0], state.options.scrollPos[1])
}
this.state = {
numPendingSwitches: 0,
href: null,
options: null
}
2014-10-14 08:13:50 +02:00
}
}
Pjax.isSupported = require("./lib/is-supported.js")
2018-01-09 00:44:20 -05:00
// arguably could do `if( require("./lib/is-supported.js")()) {` but that might be a little to simple
2014-10-14 08:13:50 +02:00
if (Pjax.isSupported()) {
module.exports = Pjax
}
// if there isnt required browser functions, returning stupid api
else {
2018-01-24 14:51:16 +00:00
var stupidPjax = noop
2014-10-14 08:13:50 +02:00
for (var key in Pjax.prototype) {
if (Pjax.prototype.hasOwnProperty(key) && typeof Pjax.prototype[key] === "function") {
2018-01-24 14:51:16 +00:00
stupidPjax[key] = noop
2014-10-14 08:13:50 +02:00
}
}
module.exports = stupidPjax
}