Compare commits
26 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
01536bfbf5 | ||
|
|
722ddf2a30 | ||
|
|
34fc00c89d | ||
|
|
c02193c61b | ||
|
|
824b229158 | ||
|
|
e3d0f8cc1b | ||
|
|
8ea8ffad07 | ||
|
|
c12e4cdedd | ||
|
|
546b7e309a | ||
|
|
2f4bd760a5 | ||
|
|
477d967804 | ||
|
|
e882b8639a | ||
|
|
3d25bee131 | ||
|
|
47059bdb04 | ||
|
|
791400ed20 | ||
|
|
97c8b2d749 | ||
|
|
b156a4f389 | ||
|
|
1d292a1a6e | ||
|
|
aaa2631eb7 | ||
|
|
460dea8a9e | ||
|
|
b908621842 | ||
|
|
b20ee2261e | ||
|
|
ad6292fffb | ||
|
|
4ed4577539 | ||
|
|
6eafcf8dc6 | ||
|
|
b244a8cac4 |
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1,3 +1,4 @@
|
|||||||
.DS_Store
|
.DS_Store
|
||||||
node_modules/
|
node_modules/
|
||||||
tests/scripts/index.html
|
tests/scripts/index.html
|
||||||
|
pjax.js
|
||||||
|
|||||||
21
CHANGELOG.md
21
CHANGELOG.md
@@ -1,6 +1,23 @@
|
|||||||
# unreleased
|
# 0.2.2 - 2016-03-12
|
||||||
|
|
||||||
-
|
- Fixed: added back standalone version in `./pjax.js`
|
||||||
|
([#57](https://github.com/MoOx/pjax/issues/57)
|
||||||
|
- Fixed: error when using pjax with google analytics (``options`` was undefined)
|
||||||
|
([#59](https://github.com/MoOx/pjax/pull/59))
|
||||||
|
- Fixed: HierarchyRequestError error
|
||||||
|
([#49](https://github.com/MoOx/pjax/pull/49))
|
||||||
|
- Fixed: ``TypeError: Pjax.forEachEls is not a function``
|
||||||
|
([#52](https://github.com/MoOx/pjax/pull/52))
|
||||||
|
- Fixed: ``TypeError: Pjax.executeScripts is not a function``
|
||||||
|
([#52](https://github.com/MoOx/pjax/pull/52))
|
||||||
|
- Fixed: ``TypeError: Pjax.clone is not a function``
|
||||||
|
([#52](https://github.com/MoOx/pjax/pull/52))
|
||||||
|
- Added: Ignore events with prevented defaults
|
||||||
|
([#50](https://github.com/MoOx/pjax/pull/50))
|
||||||
|
|
||||||
|
# 0.2.1 - 2015-02-04
|
||||||
|
|
||||||
|
- Fixed: it's better when a release have actual files.
|
||||||
|
|
||||||
# 0.2.0 - 2015-02-04
|
# 0.2.0 - 2015-02-04
|
||||||
|
|
||||||
|
|||||||
@@ -44,7 +44,7 @@ want (including html metas, title, navigation state).
|
|||||||
### Under the hood
|
### Under the hood
|
||||||
|
|
||||||
- It listen to every clicks on links _you want_ (by default all of them),
|
- It listen to every clicks on links _you want_ (by default all of them),
|
||||||
- When a internal link hitted, Pjax grabs HTML from your server via ajax,
|
- When an internal link is clicked, Pjax grabs HTML from your server via ajax,
|
||||||
- Pjax render pages DOM tree (without loading any resources - images, css, js...)
|
- Pjax render pages DOM tree (without loading any resources - images, css, js...)
|
||||||
- It check if all defined parts can be replaced:
|
- It check if all defined parts can be replaced:
|
||||||
- if page doesn't suit requirement, classic navigation used,
|
- if page doesn't suit requirement, classic navigation used,
|
||||||
@@ -537,6 +537,12 @@ wrapper on each page (to avoid differences of DOM between pages)
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
Clone this repository and run `npm run example`, then open `http://localhost:3000/example` in your browser.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## Contributing
|
## Contributing
|
||||||
|
|
||||||
Work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature.
|
Work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature.
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "pjax",
|
"name": "pjax",
|
||||||
"version": "0.1.4",
|
"version": "0.2.2",
|
||||||
"description": "Easily enable fast Ajax navigation on any website (using pushState + xhr)",
|
"description": "Easily enable fast Ajax navigation on any website (using pushState + xhr)",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"pjax",
|
"pjax",
|
||||||
@@ -11,7 +11,7 @@
|
|||||||
"transition",
|
"transition",
|
||||||
"animation"
|
"animation"
|
||||||
],
|
],
|
||||||
"main": "src/pjax.js",
|
"main": "pjax.js",
|
||||||
"homepage": "https://github.com/MoOx/pjax",
|
"homepage": "https://github.com/MoOx/pjax",
|
||||||
"authors": [
|
"authors": [
|
||||||
"Maxime Thirouin"
|
"Maxime Thirouin"
|
||||||
|
|||||||
26
example/example.js
Normal file
26
example/example.js
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
/* global Pjax */
|
||||||
|
console.log("Document initialized:", window.location.href)
|
||||||
|
|
||||||
|
document.addEventListener("pjax:send", function() {
|
||||||
|
console.log("Event: pjax:send", arguments)
|
||||||
|
})
|
||||||
|
|
||||||
|
document.addEventListener("pjax:complete", function() {
|
||||||
|
console.log("Event: pjax:complete", arguments)
|
||||||
|
})
|
||||||
|
|
||||||
|
document.addEventListener("pjax:error", function() {
|
||||||
|
console.log("Event: pjax:error", arguments)
|
||||||
|
})
|
||||||
|
|
||||||
|
document.addEventListener("pjax:success", function() {
|
||||||
|
console.log("Event: pjax:success", arguments)
|
||||||
|
})
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
|
var pjax = new Pjax({
|
||||||
|
selectors: [".body"]
|
||||||
|
})
|
||||||
|
console.log("Pjax initialized.", pjax)
|
||||||
|
})
|
||||||
|
|
||||||
15
example/index.html
Normal file
15
example/index.html
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset='utf-8'>
|
||||||
|
<title>Hello</title>
|
||||||
|
<script src='../pjax.js'></script>
|
||||||
|
<script src='example.js'></script>
|
||||||
|
</head>
|
||||||
|
<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.
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
15
example/page2.html
Normal file
15
example/page2.html
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset='utf-8'>
|
||||||
|
<title>Hello</title>
|
||||||
|
<script src='../pjax.js'></script>
|
||||||
|
<script src='example.js'></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class='body'>
|
||||||
|
<h1>Page 2</h1>
|
||||||
|
Hello. Go to <a href='index.html'>Index</a>.
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
15
index.js
15
index.js
@@ -1,3 +1,7 @@
|
|||||||
|
var clone = require('./lib/clone.js')
|
||||||
|
var executeScripts = require('./lib/execute-scripts.js')
|
||||||
|
|
||||||
|
var forEachEls = require("./lib/foreach-els.js")
|
||||||
|
|
||||||
var newUid = require("./lib/uniqueid.js")
|
var newUid = require("./lib/uniqueid.js")
|
||||||
|
|
||||||
@@ -5,6 +9,7 @@ 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 Pjax = function(options) {
|
var Pjax = function(options) {
|
||||||
this.firstrun = true
|
this.firstrun = true
|
||||||
|
|
||||||
@@ -18,7 +23,7 @@ var Pjax = function(options) {
|
|||||||
|
|
||||||
on(window, "popstate", function(st) {
|
on(window, "popstate", function(st) {
|
||||||
if (st.state) {
|
if (st.state) {
|
||||||
var opt = Pjax.clone(this.options)
|
var opt = clone(this.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
|
||||||
@@ -49,11 +54,11 @@ Pjax.prototype = {
|
|||||||
attachLink: require("./lib/proto/attach-link.js"),
|
attachLink: require("./lib/proto/attach-link.js"),
|
||||||
|
|
||||||
forEachSelectors: function(cb, context, DOMcontext) {
|
forEachSelectors: function(cb, context, DOMcontext) {
|
||||||
return require("./lib/foreach-selectors.js")(this.options.selectors, cb, context, DOMcontext)
|
return require("./lib/foreach-selectors.js").bind(this)(this.options.selectors, cb, context, DOMcontext)
|
||||||
},
|
},
|
||||||
|
|
||||||
switchSelectors: function(selectors, fromEl, toEl, options) {
|
switchSelectors: function(selectors, fromEl, toEl, options) {
|
||||||
return require("./lib/switches-selectors.js")(this.options.switches, this.options.switchesOptions, selectors, fromEl, toEl, options)
|
return require("./lib/switches-selectors.js").bind(this)(this.options.switches, this.options.switchesOptions, selectors, fromEl, toEl, options)
|
||||||
},
|
},
|
||||||
|
|
||||||
// too much problem with the code below
|
// too much problem with the code below
|
||||||
@@ -118,8 +123,8 @@ Pjax.prototype = {
|
|||||||
|
|
||||||
// execute scripts when DOM have been completely updated
|
// execute scripts when DOM have been completely updated
|
||||||
this.options.selectors.forEach(function(selector) {
|
this.options.selectors.forEach(function(selector) {
|
||||||
Pjax.forEachEls(document.querySelectorAll(selector), function(el) {
|
forEachEls(document.querySelectorAll(selector), function(el) {
|
||||||
Pjax.executeScripts(el)
|
executeScripts(el)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
// }
|
// }
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ module.exports = function(els, events, opts) {
|
|||||||
|
|
||||||
forEachEls(els, function(el) {
|
forEachEls(els, function(el) {
|
||||||
var domFix = false
|
var domFix = false
|
||||||
if (!el.parentNode) {
|
if (!el.parentNode && el !== document && el !== window) {
|
||||||
// THANKS YOU IE (9/10//11 concerned)
|
// THANKS YOU IE (9/10//11 concerned)
|
||||||
// dispatchEvent doesn't work if element is not in the dom
|
// dispatchEvent doesn't work if element is not in the dom
|
||||||
domFix = true
|
domFix = true
|
||||||
|
|||||||
@@ -53,14 +53,26 @@ var linkAction = function(el, event) {
|
|||||||
this.loadUrl(el.href, clone(this.options))
|
this.loadUrl(el.href, clone(this.options))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var isDefaultPrevented = function(event) {
|
||||||
|
return event.defaultPrevented || event.returnValue === false;
|
||||||
|
}
|
||||||
|
|
||||||
module.exports = function(el) {
|
module.exports = function(el) {
|
||||||
var that = this
|
var that = this
|
||||||
|
|
||||||
on(el, "click", function(event) {
|
on(el, "click", function(event) {
|
||||||
|
if (isDefaultPrevented(event)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
linkAction.call(that, el, event)
|
linkAction.call(that, el, event)
|
||||||
})
|
})
|
||||||
|
|
||||||
on(el, "keyup", function(event) {
|
on(el, "keyup", function(event) {
|
||||||
|
if (isDefaultPrevented(event)) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
// Don’t break browser special behavior on links (like page in new window)
|
// Don’t break browser special behavior on links (like page in new window)
|
||||||
if (event.which > 1 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
|
if (event.which > 1 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
|
||||||
el.setAttribute(attrKey, "modifier")
|
el.setAttribute(attrKey, "modifier")
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ module.exports = function(options){
|
|||||||
this.options.switches = this.options.switches || {}
|
this.options.switches = this.options.switches || {}
|
||||||
this.options.switchesOptions = this.options.switchesOptions || {}
|
this.options.switchesOptions = this.options.switchesOptions || {}
|
||||||
this.options.history = this.options.history || true
|
this.options.history = this.options.history || true
|
||||||
this.options.analytics = this.options.analytics || function(options) {
|
this.options.analytics = this.options.analytics || function() {
|
||||||
// options.backward or options.foward can be true or undefined
|
// options.backward or options.foward can be true or undefined
|
||||||
// by default, we do track back/foward hit
|
// by default, we do track back/foward hit
|
||||||
// https://productforums.google.com/forum/#!topic/analytics/WVwMDjLhXYk
|
// https://productforums.google.com/forum/#!topic/analytics/WVwMDjLhXYk
|
||||||
@@ -15,7 +15,7 @@ module.exports = function(options){
|
|||||||
_gaq.push(["_trackPageview"])
|
_gaq.push(["_trackPageview"])
|
||||||
}
|
}
|
||||||
if (window.ga) {
|
if (window.ga) {
|
||||||
ga("send", "pageview", {page: options.url, title: options.title})
|
ga("send", "pageview", {page: location.pathname, title: document.title})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.options.scrollTo = (typeof this.options.scrollTo === 'undefined') ? 0 : this.options.scrollTo;
|
this.options.scrollTo = (typeof this.options.scrollTo === 'undefined') ? 0 : this.options.scrollTo;
|
||||||
|
|||||||
34
package.json
34
package.json
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "pjax",
|
"name": "pjax",
|
||||||
"version": "0.2.0",
|
"version": "0.2.2",
|
||||||
"description": "Easily enable fast Ajax navigation on any website (using pushState + xhr)",
|
"description": "Easily enable fast Ajax navigation on any website (using pushState + xhr)",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"pjax",
|
"pjax",
|
||||||
@@ -11,42 +11,44 @@
|
|||||||
"transition",
|
"transition",
|
||||||
"animation"
|
"animation"
|
||||||
],
|
],
|
||||||
"repository": {
|
"repository": "https://github.com/MoOx/pjax.git",
|
||||||
"type": "git",
|
|
||||||
"url": "https://github.com/MoOx/pjax.git"
|
|
||||||
},
|
|
||||||
"homepage": "https://github.com/MoOx/pjax",
|
|
||||||
"bugs": {
|
|
||||||
"url": "https://github.com/MoOx/pjax/issues"
|
|
||||||
},
|
|
||||||
"author": "Maxime Thirouin",
|
"author": "Maxime Thirouin",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"main": "src/pjax.js",
|
"main": "src/pjax.js",
|
||||||
"files": [
|
"files": [
|
||||||
"CHANGELOG.md",
|
"index.js",
|
||||||
"LICENSE",
|
"lib",
|
||||||
"src"
|
"pjax.js"
|
||||||
],
|
],
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"browserify": "^3.46.0",
|
"browserify": "^3.46.0",
|
||||||
"coverify": "^1.0.6",
|
"coverify": "^1.0.6",
|
||||||
"jscs": "^1.6.2",
|
"jscs": "^1.6.2",
|
||||||
"jshint": "^2.5.6",
|
"jshint": "^2.5.6",
|
||||||
|
"serve": "1.4.0",
|
||||||
"tape": "^3.0.0",
|
"tape": "^3.0.0",
|
||||||
"testling": "^1.6.1"
|
"testling": "^1.6.1"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"lint": "jscs **/*.js && jshint . --exclude-path .gitignore",
|
"lint": "jscs **/*.js && jshint . --exclude-path .gitignore",
|
||||||
"test": "npm run lint && testling",
|
"standalone": "browserify index.js --standalone Pjax > pjax.js",
|
||||||
|
"tests": "testling",
|
||||||
|
"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",
|
||||||
"coverage": "browserify -t coverify tests/**/*.js | testling | coverify"
|
"coverage": "browserify -t coverify tests/**/*.js | testling | coverify",
|
||||||
|
"example": "echo '\n==> Open http://localhost:3000/example in your browser.'; serve .",
|
||||||
|
"prepublish": "npm run standalone"
|
||||||
},
|
},
|
||||||
"testling": {
|
"testling": {
|
||||||
"files": "tests/**/*.js",
|
"files": "tests/**/*.js",
|
||||||
"browsers": [
|
"browsers": [
|
||||||
"ie/10..latest",
|
"ie/10..latest",
|
||||||
"firefox/4.0", "firefox/latest", "firefox/nightly",
|
"firefox/4.0",
|
||||||
"chrome/10", "chrome/latest", "chrome/canary",
|
"firefox/latest",
|
||||||
|
"firefox/nightly",
|
||||||
|
"chrome/10",
|
||||||
|
"chrome/latest",
|
||||||
|
"chrome/canary",
|
||||||
"opera/12..latest",
|
"opera/12..latest",
|
||||||
"opera/next",
|
"opera/next",
|
||||||
"safari/5.1..latest",
|
"safari/5.1..latest",
|
||||||
|
|||||||
@@ -90,3 +90,21 @@ tape("test events on/off/trigger for multiple elements, multiple events", functi
|
|||||||
|
|
||||||
t.end()
|
t.end()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
tape("test events on top level elements", function(t) {
|
||||||
|
var el = document;
|
||||||
|
|
||||||
|
el.className = ""
|
||||||
|
on(el, "click", classCb)
|
||||||
|
trigger(el, "click")
|
||||||
|
t.equal(el.className, "on", "attached callback has been fired properly on document")
|
||||||
|
|
||||||
|
el = window;
|
||||||
|
|
||||||
|
el.className = ""
|
||||||
|
on(el, "click", classCb)
|
||||||
|
trigger(el, "click")
|
||||||
|
t.equal(el.className, "on", "attached callback has been fired properly on window")
|
||||||
|
|
||||||
|
t.end()
|
||||||
|
})
|
||||||
|
|||||||
@@ -56,3 +56,22 @@ tape("test attach link prototype method", function(t) {
|
|||||||
|
|
||||||
t.end()
|
t.end()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
tape("test attach link preventDefaulted events", function(t) {
|
||||||
|
var callbacked = false
|
||||||
|
var a = document.createElement("a")
|
||||||
|
|
||||||
|
attachLink.call({
|
||||||
|
options: {},
|
||||||
|
loadUrl: function() {
|
||||||
|
callbacked = true
|
||||||
|
}
|
||||||
|
}, a)
|
||||||
|
|
||||||
|
a.href = "#"
|
||||||
|
on(a, "click", preventDefault)
|
||||||
|
trigger(a, "click")
|
||||||
|
t.equal(callbacked, false, "events that are preventDefaulted should not fire callback")
|
||||||
|
|
||||||
|
t.end()
|
||||||
|
})
|
||||||
|
|||||||
@@ -1,9 +1,41 @@
|
|||||||
var tape = require("tape")
|
var tape = require("tape")
|
||||||
|
|
||||||
// var switchesSelectors = require("../../lib/switches-selectors.js")
|
var switchesSelectors = require("../../lib/switches-selectors.js")
|
||||||
|
|
||||||
|
// @author darylteo
|
||||||
tape("test switchesSelectors", function(t) {
|
tape("test switchesSelectors", function(t) {
|
||||||
t.fail()
|
// switchesSelectors relies on a higher level function callback
|
||||||
|
// should really be passed in instead so I'll leave it here as a TODO:
|
||||||
|
var pjax = {
|
||||||
|
onSwitch: function() {
|
||||||
|
console.log('Switched')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var tmpEl = document.implementation.createHTMLDocument()
|
||||||
|
|
||||||
|
// a div container is used because swapping the containers
|
||||||
|
// will generate a new element, so things get weird
|
||||||
|
// using "body" generates a lot of testling cruft that I don't
|
||||||
|
// want so let's avoid that
|
||||||
|
var container = document.createElement("div")
|
||||||
|
container.innerHTML = "<p>Original Text</p><span>No Change</span>"
|
||||||
|
document.body.appendChild(container)
|
||||||
|
|
||||||
|
var container2 = tmpEl.createElement("div")
|
||||||
|
container2.innerHTML = "<p>New Text</p><span>New Span</span>"
|
||||||
|
tmpEl.body.appendChild(container2)
|
||||||
|
|
||||||
|
switchesSelectors.bind(pjax)(
|
||||||
|
{}, // switches
|
||||||
|
{}, // switchesOptions
|
||||||
|
['p'], //selectors,
|
||||||
|
tmpEl, // fromEl
|
||||||
|
document, // toEl,
|
||||||
|
{} // options
|
||||||
|
)
|
||||||
|
|
||||||
|
t.equals(container.innerHTML, '<p>New Text</p><span>No Change</span>', 'Elements correctly switched')
|
||||||
|
|
||||||
t.end()
|
t.end()
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user