Compare commits
15 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
917c6f6bcb | ||
|
|
b201b96a37 | ||
|
|
eff7cfd452 | ||
|
|
7976f06043 | ||
|
|
ee530f4c0a | ||
|
|
bf71894395 | ||
|
|
beaa21fb3a | ||
|
|
b96b0f41a7 | ||
|
|
6e113b2d06 | ||
|
|
46912e6797 | ||
|
|
4877bac2ae | ||
|
|
afe0ddb6b9 | ||
|
|
a5d36d28f8 | ||
|
|
7a4056fd77 | ||
|
|
ba6ef126c0 |
16
CHANGELOG.md
16
CHANGELOG.md
@@ -1,3 +1,19 @@
|
||||
# 0.2.4 - 2016-06-28
|
||||
|
||||
- Fixed: ``refresh`` should now work (use `this.parseDOM` for refresh)
|
||||
([#67](https://github.com/MoOx/pjax/pull/67) - @compressed)
|
||||
- Fixed: Some attributes, such as `itemscope` have no corresponding value.
|
||||
This change allows them to still be set.
|
||||
([#67](https://github.com/MoOx/pjax/pull/67) - @compressed)
|
||||
- Added: ``cacheBust`` option
|
||||
([#71](https://github.com/MoOx/pjax/pull/71) - @tremby)
|
||||
|
||||
# 0.2.3 - 2016-03-24
|
||||
|
||||
- Fixed: ``currentUrlFullReload`` option now works
|
||||
- Fixed: ``this.reload`` is now a Function
|
||||
([#65](https://github.com/MoOx/pjax/issues/65))
|
||||
|
||||
# 0.2.2 - 2016-03-12
|
||||
|
||||
- Fixed: added back standalone version in `./pjax.js`
|
||||
|
||||
48
README.md
48
README.md
@@ -1,7 +1,6 @@
|
||||
# Pjax [](https://travis-ci.org/MoOx/pjax)
|
||||
# Pjax
|
||||
|
||||
|
||||
[](https://ci.testling.com/MoOx/pjax)
|
||||
[](https://travis-ci.org/MoOx/pjax) [@todo fix CI](https://github.com/MoOx/pjax/issues/63).
|
||||
|
||||
> Easily enable fast Ajax navigation on any website (using pushState + xhr)
|
||||
|
||||
@@ -16,9 +15,6 @@ Especially for user that have low bandwidth connection._
|
||||
|
||||
**No more full page reload. No more lots of HTTP request.**
|
||||
|
||||
# Note: current master is WIP.
|
||||
|
||||
Checkout [v0.1.4](https://github.com/MoOx/pjax/tree/a17a6b90bebefd8f5209e6a6f7d8c5d59296232a) for latest "stable" (no tests so kind of funny to call that stable).
|
||||
|
||||
## Demo
|
||||
|
||||
@@ -277,6 +273,7 @@ new Pjax({
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
_Note that remove class include `Animated--reverse` which is a simple way to not have
|
||||
@@ -385,6 +382,12 @@ It's called every time a page is switched, even for history buttons.
|
||||
|
||||
Value (in px) to scrollTo when a page is switched.
|
||||
|
||||
##### `cacheBust` (Boolean, default true)
|
||||
|
||||
When set to true,
|
||||
append a timestamp query string segment to the requested URLs
|
||||
in order to skip browser cache.
|
||||
|
||||
##### `debug` (Boolean, default to false)
|
||||
|
||||
Enable verbose mode & doesn't use fallback when there is an error.
|
||||
@@ -394,25 +397,6 @@ Useful to debug page layout differences.
|
||||
|
||||
When set to true, clicking on a link that point the current url trigger a full page reload.
|
||||
|
||||
#### Extend Pjax
|
||||
|
||||
Pjax prototype & utilities methods can be used & changed so you can patch or hack
|
||||
Pjax behavior, as you wish.
|
||||
|
||||
Here is a summary of functions:
|
||||
|
||||
- `Pjax.prototype.log` (`function()`): console.log function that is enable/disabled by `debug` option
|
||||
- `Pjax.prototype.getElements` (`function(el)`): retrieve elements to attach Pjax behavior
|
||||
- `Pjax.prototype.parseDOM` (`function(el)`): parse DOM to attach behavior using `Pjax.prototype.getElements` & `Pjax.prototype.attachLink`
|
||||
- `Pjax.prototype.attachLink` (`function(el)`): attach Pjax behavior to a link
|
||||
- `Pjax.prototype.forEachSelectors` (`function(cb, context, DOMcontext)`): call a function for each selectors defined
|
||||
- `Pjax.prototype.switchSelectors` (`function(selectors, fromEl, toEl, options)`): loop on selectors to switch elements
|
||||
- `Pjax.prototype.latestChance` (`function(href)`): when everything is fucked up, it's our only hope (just call `window.location = href`)
|
||||
- `Pjax.prototype.onSwitch` (`function()`): callback triggered when elements are switched, for now it's just trigger a window resize event (lots of lib are listening to this event to draw stuff)
|
||||
- `Pjax.prototype.loadContent` (`function(html, options)`): switch elements for each selectors
|
||||
- `Pjax.prototype.doRequest` (`function(location, callback)`): make the ajax request to grab page from the server
|
||||
- `Pjax.prototype.loadUrl` (`function(href, options)`): do the ajax request, handle html results & eventually handle browser history, analytics & scroll.
|
||||
|
||||
### Events
|
||||
|
||||
Pjax fires a number of events regardless of how its invoked.
|
||||
@@ -543,15 +527,13 @@ Clone this repository and run `npm run example`, then open `http://localhost:300
|
||||
|
||||
---
|
||||
|
||||
## Contributing
|
||||
## CONTRIBUTING
|
||||
|
||||
Work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature.
|
||||
* ⇄ Pull requests and ★ Stars are always welcome.
|
||||
* For bugs and feature requests, please create an issue.
|
||||
* Pull requests must be accompanied by passing automated tests (`$ npm test`).
|
||||
|
||||
$ git clone https://github.com/MoOx/pjax.git
|
||||
$ git checkout -b patch-1
|
||||
$ npm install
|
||||
$ npm test
|
||||
## [CHANGELOG](CHANGELOG.md)
|
||||
|
||||
## [Changelog](CHANGELOG.md)
|
||||
## [LICENSE](LICENSE)
|
||||
|
||||
## [License](LICENSE)
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "pjax",
|
||||
"version": "0.2.2",
|
||||
"version": "0.2.4",
|
||||
"description": "Easily enable fast Ajax navigation on any website (using pushState + xhr)",
|
||||
"keywords": [
|
||||
"pjax",
|
||||
|
||||
@@ -19,8 +19,8 @@ document.addEventListener("pjax:success", function() {
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var pjax = new Pjax({
|
||||
selectors: [".body"]
|
||||
selectors: [".body"],
|
||||
// currentUrlFullReload: true,
|
||||
})
|
||||
console.log("Pjax initialized.", pjax)
|
||||
})
|
||||
|
||||
|
||||
@@ -9,7 +9,9 @@
|
||||
<body>
|
||||
<div class='body'>
|
||||
<h1>Index</h1>
|
||||
hello. Go to <a href='page2.html'>Page 2</a> and view your console to see Pjax events.
|
||||
Hello.
|
||||
Go to <a href='page2.html'>Page 2</a> and view your console to see Pjax events.
|
||||
Clicking on <a href='index.html'>this page</a> will just reload the page entierly.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
7
index.js
7
index.js
@@ -51,6 +51,8 @@ Pjax.prototype = {
|
||||
|
||||
refresh: require("./lib/proto/refresh.js"),
|
||||
|
||||
reload: require("./lib/reload.js"),
|
||||
|
||||
attachLink: require("./lib/proto/attach-link.js"),
|
||||
|
||||
forEachSelectors: function(cb, context, DOMcontext) {
|
||||
@@ -92,7 +94,12 @@ Pjax.prototype = {
|
||||
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))
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -43,7 +43,10 @@ var linkAction = function(el, event) {
|
||||
event.preventDefault()
|
||||
|
||||
// don’t do "nothing" if user try to reload the page by clicking the same link twice
|
||||
if (el.href === window.location.href.split("#")[0]) {
|
||||
if (
|
||||
this.options.currentUrlFullReload &&
|
||||
el.href === window.location.href.split("#")[0]
|
||||
) {
|
||||
el.setAttribute(attrClick, "reload")
|
||||
this.reload()
|
||||
return
|
||||
|
||||
@@ -19,6 +19,7 @@ module.exports = function(options){
|
||||
}
|
||||
}
|
||||
this.options.scrollTo = (typeof this.options.scrollTo === 'undefined') ? 0 : this.options.scrollTo;
|
||||
this.options.cacheBust = (typeof this.options.cacheBust === 'undefined') ? true : this.options.cacheBust
|
||||
this.options.debug = this.options.debug || false
|
||||
|
||||
// we can’t replace body.outerHTML or head.outerHTML
|
||||
|
||||
@@ -1,6 +1,3 @@
|
||||
|
||||
var parseDom = require("./parse-dom")
|
||||
|
||||
module.exports = function(el) {
|
||||
parseDom(el || document)
|
||||
this.parseDOM(el || document)
|
||||
}
|
||||
|
||||
@@ -12,7 +12,12 @@ module.exports = function(location, callback) {
|
||||
}
|
||||
}
|
||||
|
||||
request.open("GET", location + (!/[?&]/.test(location) ? "?" : "&") + (new Date().getTime()), true)
|
||||
// Add a timestamp as part of the query string if cache busting is enabled
|
||||
if (this.options.cacheBust) {
|
||||
location += (!/[?&]/.test(location) ? "?" : "&") + new Date().getTime()
|
||||
}
|
||||
|
||||
request.open("GET", location, true)
|
||||
request.setRequestHeader("X-Requested-With", "XMLHttpRequest")
|
||||
request.send(null)
|
||||
return request
|
||||
|
||||
10
package.json
10
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "pjax",
|
||||
"version": "0.2.2",
|
||||
"version": "0.2.4",
|
||||
"description": "Easily enable fast Ajax navigation on any website (using pushState + xhr)",
|
||||
"keywords": [
|
||||
"pjax",
|
||||
@@ -25,6 +25,8 @@
|
||||
"coverify": "^1.0.6",
|
||||
"jscs": "^1.6.2",
|
||||
"jshint": "^2.5.6",
|
||||
"npmpub": "^3.1.0",
|
||||
"opn-cli": "^3.1.0",
|
||||
"serve": "1.4.0",
|
||||
"tape": "^3.0.0",
|
||||
"testling": "^1.6.1"
|
||||
@@ -36,8 +38,10 @@
|
||||
"test": "npm run lint && npm run standalone && npm run tests",
|
||||
"test--html": "testling --html > tests/scripts/index.html",
|
||||
"coverage": "browserify -t coverify tests/**/*.js | testling | coverify",
|
||||
"example": "echo '\n==> Open http://localhost:3000/example in your browser.'; serve .",
|
||||
"prepublish": "npm run standalone"
|
||||
"example": "opn http://localhost:3000/example/; serve .",
|
||||
"prepublish": "npm run standalone",
|
||||
"#release": "testling does not work in a process launch by npm... :facepalm:",
|
||||
"release": "echo \"npmpub --skip-test --dry && npm test && npmpub --skip-test --skip-cleanup\""
|
||||
},
|
||||
"testling": {
|
||||
"files": "tests/**/*.js",
|
||||
|
||||
@@ -46,6 +46,7 @@ tape("test parse initalization options function", function(t) {
|
||||
t.deepEqual(typeof body_1.options.analytics,"function");
|
||||
|
||||
t.deepEqual(body_1.options.scrollTo,0);
|
||||
t.deepEqual(body_1.options.cacheBust,true);
|
||||
t.deepEqual(body_1.options.debug,false);
|
||||
t.end();
|
||||
});
|
||||
|
||||
@@ -2,8 +2,27 @@ var tape = require("tape")
|
||||
|
||||
var request = require("../../lib/request.js")
|
||||
|
||||
// Polyfill responseURL property into XMLHttpRequest if it doesn't exist,
|
||||
// just for the purposes of this test
|
||||
// This polyfill is not complete; it won't show the updated location if a
|
||||
// redirection occurred, but it's fine for our purposes.
|
||||
if (!('responseURL' in XMLHttpRequest.prototype)) {
|
||||
var nativeOpen = XMLHttpRequest.prototype.open
|
||||
XMLHttpRequest.prototype.open = function (method, url) {
|
||||
this.responseURL = url
|
||||
return nativeOpen.apply(this, arguments)
|
||||
}
|
||||
}
|
||||
|
||||
tape("test xhr request", function(t) {
|
||||
request("https://api.github.com/", function(result) {
|
||||
t.test("- request is made, gets a result, and is cache-busted", function(t) {
|
||||
var requestCacheBust = request.bind({
|
||||
options: {
|
||||
cacheBust: true,
|
||||
},
|
||||
});
|
||||
var r = requestCacheBust("https://api.github.com/", function(result) {
|
||||
t.equal(r.responseURL.indexOf("?"), 23, "XHR URL is cache-busted when configured to be")
|
||||
try {
|
||||
result = JSON.parse(result)
|
||||
}
|
||||
@@ -13,4 +32,17 @@ tape("test xhr request", function(t) {
|
||||
t.same(typeof result, "object", "xhr request get a result")
|
||||
t.end()
|
||||
})
|
||||
})
|
||||
t.test("- request is not cache-busted when configured not to be", function(t) {
|
||||
var requestNoCacheBust = request.bind({
|
||||
options: {
|
||||
cacheBust: false,
|
||||
},
|
||||
});
|
||||
var r = requestNoCacheBust("https://api.github.com/", function() {
|
||||
t.equal(r.responseURL, "https://api.github.com/", "XHR URL is left untouched")
|
||||
t.end()
|
||||
})
|
||||
})
|
||||
t.end()
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user