iLoveElysia/pjax
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

Merge branch 'master' into bram1028-patch-1

Browse Source
This commit is contained in:
Maxime Thirouin
2017-12-19 13:50:13 +01:00
committed by GitHub
parent d076f293df 75eddfcab6
commit 78b58c80f7
12 changed files with 240 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@@ -15,7 +15,6 @@ Especially for user that have low bandwidth connection._
**No more full page reload. No more lots of HTTP request.** **No more full page reload. No more lots of HTTP request.**
## Demo ## Demo
[You can see this running on my website](http://moox.io), with sexy CSS animations when switching pages. [You can see this running on my website](http://moox.io), with sexy CSS animations when switching pages.
@@ -249,7 +248,7 @@ with or without [WOW.js](https://github.com/matthieua/WOW).
new Pjax({ new Pjax({
selectors: ["title", ".js-Pjax"], selectors: ["title", ".js-Pjax"],
switches: { switches: {
".js-Pjax": require("pjax/lib/switches.js").sideBySide ".js-Pjax": Pjax.switches.sideBySide
}, },
switchesOptions: { switchesOptions: {
".js-Pjax": { ".js-Pjax": {

12
index.js
View File

@@ -9,6 +9,8 @@ var on = require("./lib/events/on.js")
// var off = require("./lib/events/on.js") // var off = require("./lib/events/on.js")
var trigger = require("./lib/events/trigger.js") var trigger = require("./lib/events/trigger.js")
var defaultSwitches = require("./lib/switches")
var Pjax = function(options) { var Pjax = function(options) {
this.firstrun = true this.firstrun = true
@@ -27,7 +29,7 @@ var Pjax = function(options) {
opt.url = st.state.url opt.url = st.state.url
opt.title = st.state.title opt.title = st.state.title
opt.history = false opt.history = false
opt.requestOptions = {};
if (st.state.uid < this.lastUid) { if (st.state.uid < this.lastUid) {
opt.backward = true opt.backward = true
} }
@@ -42,6 +44,8 @@ var Pjax = function(options) {
}.bind(this)) }.bind(this))
} }
Pjax.switches = defaultSwitches
Pjax.prototype = { Pjax.prototype = {
log: require("./lib/proto/log.js"), log: require("./lib/proto/log.js"),
@@ -55,6 +59,8 @@ Pjax.prototype = {
attachLink: require("./lib/proto/attach-link.js"), attachLink: require("./lib/proto/attach-link.js"),
attachForm: require("./lib/proto/attach-form.js"),
forEachSelectors: function(cb, context, DOMcontext) { forEachSelectors: function(cb, context, DOMcontext) {
return require("./lib/foreach-selectors.js").bind(this)(this.options.selectors, cb, context, DOMcontext) return require("./lib/foreach-selectors.js").bind(this)(this.options.selectors, cb, context, DOMcontext)
}, },
@@ -81,7 +87,7 @@ Pjax.prototype = {
}, },
loadContent: function(html, options) { loadContent: function(html, options) {
var tmpEl = document.implementation.createHTMLDocument() var tmpEl = document.implementation.createHTMLDocument("pjax")
// parse HTML attributes to copy them // parse HTML attributes to copy them
// since we are forced to use documentElement.innerHTML (outerHTML can't be used for <html>) // since we are forced to use documentElement.innerHTML (outerHTML can't be used for <html>)
@@ -151,7 +157,7 @@ Pjax.prototype = {
trigger(document, "pjax:send", options); trigger(document, "pjax:send", options);
// Do the request // Do the request
this.doRequest(href, function(html) { this.doRequest(href, options.requestOptions, function(html) {
// Fail if unable to load HTML via AJAX // Fail if unable to load HTML via AJAX
if (html === false) { if (html === false) {
trigger(document,"pjax:complete pjax:error", options) trigger(document,"pjax:complete pjax:error", options)

31
lib/eval-script.js
View File

@@ -2,7 +2,8 @@ module.exports = function(el) {
// console.log("going to execute script", el) // console.log("going to execute script", el)
var code = (el.text || el.textContent || el.innerHTML || "") var code = (el.text || el.textContent || el.innerHTML || "")
var head = document.querySelector("head") || document.documentElement var src = (el.src || "");
var parent = el.parentNode || document.querySelector("head") || document.documentElement
var script = document.createElement("script") var script = document.createElement("script")
if (code.match("document.write")) { if (code.match("document.write")) {
@@ -13,17 +14,29 @@ module.exports = function(el) {
} }
script.type = "text/javascript" script.type = "text/javascript"
try {
script.appendChild(document.createTextNode(code)) if (src != "") {
script.src = src;
script.onload = function() { document.dispatchEvent((new Event("pjax:complete"))); }
script.async = false; // force asynchronous loading of peripheral js
} }
catch (e) {
// old IEs have funky script nodes if (code != "") {
script.text = code try {
script.appendChild(document.createTextNode(code))
}
catch (e) {
// old IEs have funky script nodes
script.text = code
}
} }
// execute // execute
head.insertBefore(script, head.firstChild) parent.appendChild(script);
head.removeChild(script) // avoid pollution // avoid pollution only in head or body tags
if (["head","body"].indexOf(parent.tagName.toLowerCase()) > 0) {
parent.removeChild(script)
}
return true return true;
} }

9
lib/execute-scripts.js
View File

@@ -4,12 +4,17 @@ var evalScript = require("./eval-script")
// Needed since innerHTML does not run scripts // Needed since innerHTML does not run scripts
module.exports = function(el) { module.exports = function(el) {
// console.log("going to execute scripts for ", el) // console.log("going to execute scripts for ", el)
if (el.tagName.toLowerCase() === "script") {
evalScript(el);
}
forEachEls(el.querySelectorAll("script"), function(script) { forEachEls(el.querySelectorAll("script"), function(script) {
if (!script.type || script.type.toLowerCase() === "text/javascript") { if (!script.type || script.type.toLowerCase() === "text/javascript") {
if (script.parentNode) { if (script.parentNode) {
script.parentNode.removeChild(script) script.parentNode.removeChild(script)
} }
evalScript(script) evalScript(script);
} }
}) });
} }

93
lib/proto/attach-form.js Normal file
View File

@@ -0,0 +1,93 @@
require("../polyfills/Function.prototype.bind")
var on = require("../events/on")
var clone = require("../clone")
var attrClick = "data-pjax-click-state"
var formAction = function(el, event){
this.options.requestOptions = {
requestUrl : el.getAttribute('action') || window.location.href,
requestMethod : el.getAttribute('method') || 'GET',
}
//create a testable virtual link of the form action
var virtLinkElement = document.createElement('a');
virtLinkElement.setAttribute('href', this.options.requestOptions.requestUrl);
// Ignore external links.
if (virtLinkElement.protocol !== window.location.protocol || virtLinkElement.host !== window.location.host) {
el.setAttribute(attrClick, "external");
return
}
// Ignore click if we are on an anchor on the same page
if (virtLinkElement.pathname === window.location.pathname && virtLinkElement.hash.length > 0) {
el.setAttribute(attrClick, "anchor-present");
return
}
// Ignore empty anchor "foo.html#"
if (virtLinkElement.href === window.location.href.split("#")[0] + "#") {
el.setAttribute(attrClick, "anchor-empty")
return
}
// if declared as a full reload, just normally submit the form
if ( this.options.currentUrlFullReload) {
el.setAttribute(attrClick, "reload");
return;
}
event.preventDefault()
var paramObject = [];
for(var elementKey in el.elements) {
var element = el.elements[elementKey];
if (!!element.name && element.attributes !== undefined && element.tagName.toLowerCase() !== 'button'){
if ((element.attributes.type !== 'checkbox' && element.attributes.type !== 'radio') || element.checked) {
paramObject.push({ name: encodeURIComponent(element.name), value: encodeURIComponent(element.value)});
}
}
}
//Creating a getString
var paramsString = (paramObject.map(function(value){return value.name+"="+value.value;})).join('&');
this.options.requestOptions.requestPayload = paramObject;
this.options.requestOptions.requestPayloadString = paramsString;
el.setAttribute(attrClick, "submit");
this.loadUrl(virtLinkElement.href, clone(this.options))
};
var isDefaultPrevented = function(event) {
return event.defaultPrevented || event.returnValue === false;
};
module.exports = function(el) {
var that = this
on(el, "submit", function(event) {
if (isDefaultPrevented(event)) {
return
}
formAction.call(that, el, event)
})
on(el, "keyup", function(event) {
if (isDefaultPrevented(event)) {
return
}
if (event.keyCode == 13) {
formAction.call(that, el, event)
}
}.bind(this))
}

2
lib/proto/attach-link.js
View File

@@ -51,7 +51,7 @@ var linkAction = function(el, event) {
this.reload() this.reload()
return return
} }
this.options.requestOptions = this.options.requestOptions || {};
el.setAttribute(attrClick, "load") el.setAttribute(attrClick, "load")
this.loadUrl(el.href, clone(this.options)) this.loadUrl(el.href, clone(this.options))
} }

7
lib/proto/parse-element.js
View File

@@ -7,8 +7,11 @@ module.exports = function(el) {
} }
break break
case "form": case "form":
throw "Pjax doesnt support <form> yet." // only attach link if el does not already have link attached
if (!el.hasAttribute('data-pjax-click-state')) {
this.attachForm(el)
}
break break
default: default:

17
lib/request.js
View File

@@ -1,4 +1,7 @@
module.exports = function(location, callback) { module.exports = function(location, options, callback) {
options = options || {};
var requestMethod = options.requestMethod || "GET";
var requestPayload = options.requestPayloadString || null;
var request = new XMLHttpRequest() var request = new XMLHttpRequest()
request.onreadystatechange = function() { request.onreadystatechange = function() {
@@ -17,9 +20,17 @@ module.exports = function(location, callback) {
location += (!/[?&]/.test(location) ? "?" : "&") + new Date().getTime() location += (!/[?&]/.test(location) ? "?" : "&") + new Date().getTime()
} }
request.open("GET", location, true) request.open(requestMethod.toUpperCase(), location, true)
request.setRequestHeader("X-Requested-With", "XMLHttpRequest") request.setRequestHeader("X-Requested-With", "XMLHttpRequest")
request.setRequestHeader("X-PJAX", "true") request.setRequestHeader("X-PJAX", "true")
request.send(null)
// Add the request payload if available
if (options.requestPayloadString != undefined && options.requestPayloadString != "") {
// Send the proper header information along with the request
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
}
request.send(requestPayload)
return request return request
} }

1
package.json
View File

@@ -34,6 +34,7 @@
"scripts": { "scripts": {
"lint": "jscs **/*.js && jshint . --exclude-path .gitignore", "lint": "jscs **/*.js && jshint . --exclude-path .gitignore",
"standalone": "browserify index.js --standalone Pjax > pjax.js", "standalone": "browserify index.js --standalone Pjax > pjax.js",
"build-debug": "browserify index.js --debug --standalone Pjax > pjax.js",
"tests": "testling", "tests": "testling",
"test": "npm run lint && npm run standalone && npm run tests", "test": "npm run lint && npm run standalone && npm run tests",
"test--html": "testling --html > tests/scripts/index.html", "test--html": "testling --html > tests/scripts/index.html",

78
tests/lib/proto/attach-form.js Normal file
View File

@@ -0,0 +1,78 @@
var tape = require("tape")
var on = require("../../../lib/events/on")
var trigger = require("../../../lib/events/trigger")
var attachForm = require("../../../lib/proto/attach-form")
var form = document.createElement("form")
var attr = "data-pjax-click-state"
var preventDefault = function(e) { e.preventDefault() }
tape("test attach form prototype method", function(t) {
t.plan(7)
attachForm.call({
options: {},
reload: function() {
t.equal(form.getAttribute(attr), "reload", "triggering a simple reload will just submit the form")
},
loadUrl: function() {
t.equal(form.getAttribute(attr), "submit", "triggering a post to the next page")
}
}, form)
var internalUri = window.location.protocol + "//" + window.location.host + window.location.pathname + window.location.search
form.action = "http://external.com/"
trigger(form, "submit")
t.equal(form.getAttribute(attr), "external", "external url stop behavior")
form.action = internalUri + "#anchor"
trigger(form, "submit")
t.equal(form.getAttribute(attr), "anchor-present", "internal anchor stop behavior")
window.location.hash = "#anchor"
form.action = internalUri + "#another-anchor"
trigger(form, "submit")
t.notEqual(form.getAttribute(attr), "anchor", "differents anchors stop behavior")
window.location.hash = ""
form.action = internalUri + "#"
trigger(form, "submit")
t.equal(form.getAttribute(attr), "anchor-empty", "empty anchor stop behavior")
form.action = internalUri
trigger(form, "submit")
// see reload defined above
form.action = window.location.protocol + "//" + window.location.host + "/internal"
form.method = 'POST'
trigger(form, "submit")
// see post defined above
form.action = window.location.protocol + "//" + window.location.host + "/internal"
form.method = 'GET'
trigger(form, "submit")
// see post defined above
t.end()
})
tape("test attach form preventDefaulted events", function(t) {
var callbacked = false
var form = document.createElement("form")
attachForm.call({
options: {},
loadUrl: function() {
callbacked = true
}
}, form)
form.action = "#"
on(form, "submit", preventDefault)
trigger(form, "submit")
t.equal(callbacked, false, "events that are preventDefaulted should not fire callback")
t.end()
})

10
tests/lib/proto/parse-element.js
View File

@@ -1,17 +1,21 @@
var tape = require("tape") var tape = require("tape")
var parseElement = require("../../../lib/proto/parse-element") var parseElement = require("../../../lib/proto/parse-element")
var protoMock = {attachLink: function() { return true}} var protoMock = {
attachLink: function() { return true },
attachForm: function() { return true }
}
tape("test parse element prototype method", function(t) { tape("test parse element prototype method", function(t) {
t.doesNotThrow(function() { t.doesNotThrow(function() {
var a = document.createElement("a") var a = document.createElement("a")
parseElement.call(protoMock, a) parseElement.call(protoMock, a)
}, "<a> element can be parsed") }, "<a> element can be parsed")
t.throws(function() { t.doesNotThrow(function() {
var form = document.createElement("form") var form = document.createElement("form")
parseElement.call(protoMock, form) parseElement.call(protoMock, form)
}, "<form> cannot be used (for now)") }, "<form> element can be parsed")
t.end() t.end()
}) })

4
tests/lib/request.js
View File

@@ -21,7 +21,7 @@ tape("test xhr request", function(t) {
cacheBust: true, cacheBust: true,
}, },
}); });
var r = requestCacheBust("https://api.github.com/", function(result) { var r = requestCacheBust("https://api.github.com/", {}, function(result) {
t.equal(r.responseURL.indexOf("?"), 23, "XHR URL is cache-busted when configured to be") t.equal(r.responseURL.indexOf("?"), 23, "XHR URL is cache-busted when configured to be")
try { try {
result = JSON.parse(result) result = JSON.parse(result)
@@ -39,7 +39,7 @@ tape("test xhr request", function(t) {
cacheBust: false, cacheBust: false,
}, },
}); });
var r = requestNoCacheBust("https://api.github.com/", function() { var r = requestNoCacheBust("https://api.github.com/", {}, function() {
t.equal(r.responseURL, "https://api.github.com/", "XHR URL is left untouched") t.equal(r.responseURL, "https://api.github.com/", "XHR URL is left untouched")
t.end() t.end()
}) })