Compare commits

..

15 Commits

Author SHA1 Message Date
Maxime Thirouin
a17a6b90be v0.1.4 2014-10-14 07:42:56 +02:00
Maxime Thirouin
7541d82095 prepare v0.1.4 2014-10-14 07:42:35 +02:00
Maxime Thirouin
e0d33c9e18 Fix pjax on iOS Simulator
The iOS 8.0 simulator on Mavericks contains the following in its
user-agent string: "iPhone; CPU iPhone OS 10_9_5 like Mac OS X"

The "OS 1" bit gets interpreted by our regex as if it were iOS 1.0 and
thus forcing pjax to be disabled since history manipulation APIs weren't
stable until iOS 5.0.

Close #19
Credits:
https://github.com/defunkt/jquery-pjax/commit/863b802a84af8a9c72def4984d
4d38163541fe6d
2014-10-14 07:39:37 +02:00
Maxime Thirouin
ce28c1adc3 Make some dirty fixes
Close #13
2014-10-14 07:38:06 +02:00
Maxime Thirouin
fa72f25fd5 Fix issue when <html> doesn't have any attribs
Close #6
2014-10-14 07:29:59 +02:00
Maxime Thirouin
743196fe7e Update some metas stuff 2014-10-14 07:29:16 +02:00
Maxime Thirouin
0a14fd9e70 v0.1.3 2014-09-16 07:56:13 +02:00
Maxime Thirouin
02fabcca8d prepare 0.1.3 & rename clickReload to currentUrlFullReload 2014-09-16 07:54:12 +02:00
Maxime Thirouin
c65507ec50 Merge pull request #16 from mduheaume/master
Add title when calling createHTMLDocument
2014-09-16 07:51:04 +02:00
Maxime Thirouin
075cc43b68 Merge pull request #15 from gillesfabio/issue-14
Fix issue #14 (click on current url don't make a full reload anymore).
2014-09-16 06:47:06 +02:00
Mike du Heaume
2b4c614890 Add title when calling createHTMLDocument
document.implementation.createHTMLDocument in IE10 (possibly other versions) throws an exception if no argument is provided.
2014-09-10 15:13:17 -06:00
Gilles Fabio
f9c5929e2d Fix issue #14 (click reload). 2014-09-01 09:47:28 +02:00
Maxime Thirouin
54ed7a276c Add a note about WIP tests on testling branch 2014-05-22 06:23:24 +02:00
Maxime Thirouin
d72e2a852c Update description & README just a little. 2014-04-19 07:05:00 +02:00
Maxime Thirouin
1320dae352 Add FAQ section in README with a Disqus use case 2014-04-03 08:17:23 +02:00
9 changed files with 150 additions and 343 deletions

View File

@@ -49,41 +49,6 @@
, "<"
, "<="
]
, "disallowLeftStickedOperators": [
"?"
, "+"
, "-"
, "/"
, "*"
, "="
, "=="
, "==="
, "!="
, "!=="
, ">"
, ">="
, "<"
, "<="
]
, "requireRightStickedOperators": [
"!"
]
, "disallowRightStickedOperators": [
"?"
, "+"
, "/"
, "*"
, ":"
, "="
, "=="
, "==="
, "!="
, "!=="
, ">"
, ">="
, "<"
, "<="
]
, "disallowSpaceAfterPrefixUnaryOperators": [
"++"
, "--"

View File

@@ -1,14 +1,22 @@
# Changelog
# 0.1.4 - 2014-10-14
## 0.1.2 - 2014-04-03
- allow to load pages without any attributes on `<html>` element (fix [#6](https://github.com/MoOx/pjax/issues/6))
- make `Pjax.switches.sideBySide` method usable (fix [#13](https://github.com/MoOx/pjax/issues/13))
# 0.1.3 - 2014-09-16
- clicking on the current url somewhere does not produce a full reload by default (see option `currentUrlFullReload`)
- fix `document.implementation.createHTMLDocument` error (in IE10, ref [#16](https://github.com/MoOx/pjax/pull/16))
# 0.1.2 - 2014-04-03
- pjax.js relocated in `src/`
- <html> attributes of pjaxified document are now available
## 0.1.1 - 2014-04-02
# 0.1.1 - 2014-04-02
- Safer UMD wrapper (fix concat issue)
## 0.1.0 - 2014-03-24
# 0.1.0 - 2014-03-24
Initial release

View File

@@ -1,185 +0,0 @@
# Contributing Guide
Please take a moment to review this document in order to make the contribution
process easy and effective for everyone involved.
Following these guidelines helps to communicate that you respect the time of
the developers managing and developing this open source project. In return,
they should reciprocate that respect in addressing your issue, assessing
changes, and helping you finalize your pull requests.
## Using the issue tracker
The issue tracker is the preferred channel for [bug reports](#bugs),
[features requests](#features) and [submitting pull
requests](#pull-requests).
<a name="bugs"></a>
## Bug reports
A bug is a _demonstrable problem_ that is caused by the code in the repository.
Good bug reports are extremely helpful - thank you!
Guidelines for bug reports:
1. **Use the GitHub issue search** &mdash; check if the issue has already been
reported.
2. **Check if the issue has been fixed** &mdash; try to reproduce it using the
latest `master` or development branch in the repository.
3. **Isolate the problem** &mdash; ideally create a [reduced test
case](http://css-tricks.com/6263-reduced-test-cases/).
A good bug report shouldn't leave others needing to chase you up for more
information. Please try to be as detailed as possible in your report. What is
your environment? What steps will reproduce the issue? What OS experiences the
problem? What would you expect to be the outcome? All these details will help
people to fix any potential bugs.
Example:
> Short and descriptive example bug report title
>
> A summary of the issue and the browser/OS environment in which it occurs. If
> suitable, include the steps required to reproduce the bug.
>
> 1. This is the first step
> 2. This is the second step
> 3. Further steps, etc.
>
> `<url>` - a link to the reduced test case
>
> Any other information you want to share that is relevant to the issue being
> reported. This might include the lines of code that you have identified as
> causing the bug, and potential solutions (and your opinions on their
> merits).
<a name="features"></a>
## Feature requests
Feature requests are welcome. But take a moment to find out whether your idea
fits with the scope and aims of the project. It's up to *you* to make a strong
case to convince the project's developers of the merits of this feature. Please
provide as much detail and context as possible.
<a name="pull-requests"></a>
## Pull requests
Good pull requests - patches, improvements, new features - are a fantastic
help. They should remain focused in scope and avoid containing unrelated
commits.
**Please ask first** before embarking on any significant pull request (e.g.
implementing features, refactoring code), otherwise you risk spending a lot of
time working on something that the project's developers might not want to merge
into the project.
Please adhere to the coding conventions used throughout a project (indentation,
accurate comments, etc.) and any other requirements (such as test coverage).
Adhering to the following this process is the best way to get your work
included in the project:
1. [Fork](http://help.github.com/fork-a-repo/) the project, clone your fork,
and configure the remotes:
```bash
# Clone your fork of the repo into the current directory
git clone https://github.com/<your-username>/happyplan
# Navigate to the newly cloned directory
cd happyplan
# Assign the original repo to a remote called "upstream"
git remote add upstream https://github.com/happyplan/happyplan
```
2. If you cloned a while ago, get the latest changes from upstream:
```bash
git checkout master
git pull upstream master
```
3. Create a new topic branch (off the main project development branch) to
contain your feature, change, or fix:
```bash
git checkout -b <topic-branch-name>
```
4. Make sure to update, or add to the tests when appropriate. Patches and
features will not be accepted without tests. Run `npm test` to check that
all tests pass after you've made changes.
5. Commit your changes in logical chunks. Please adhere to these [git commit
message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
or your code is unlikely be merged into the main project. Use Git's
[interactive rebase](https://help.github.com/articles/interactive-rebase)
feature to tidy up your commits before making them public.
6. Locally merge (or rebase) the upstream development branch into your topic branch:
```bash
git pull [--rebase] upstream master
```
7. Push your topic branch up to your fork:
```bash
git push origin <topic-branch-name>
```
8. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/)
with a clear title and description.
9. If you are asked to amend your changes before they can be merged in, please
use `git commit --amend` (or rebasing for multi-commit Pull Requests) and
force push to your remote feature branch. You may also be asked to squash
commits.
**IMPORTANT**: By submitting a patch, you agree to license your work under the
same license as that used by the project.
<a name="maintainers"></a>
## Maintainers
If you have commit access, please follow this process for merging patches and cutting new releases.
### Reviewing changes
1. Check that a change is within the scope and philosophy of the project.
2. Check that a change has any necessary tests and a proper, descriptive commit message.
3. Checkout the change and test it locally.
4. If the change is good, and authored by someone who cannot commit to
`master`, please try to avoid using GitHub's merge button. Apply the change
to `master` locally (feel free to amend any minor problems in the author's
original commit if necessary).
5. If the change is good, and authored by another maintainer/collaborator, give
them a "Ship it!" comment and let them handle the merge.
### Submitting changes
1. All non-trivial changes should be put up for review using GitHub Pull
Requests.
2. Your change should not be merged into `master` (or another feature branch),
without at least one "Ship it!" comment from another maintainer/collaborator
on the project. "Looks good to me" is not the same as "Ship it!".
3. Try to avoid using GitHub's merge button. Locally rebase your change onto
`master` and then push to GitHub.
4. Once a feature branch has been merged into its target branch, please delete
the feature branch from the remote repository.
### Releasing a new version
1. Include all new functional changes in the CHANGELOG.
2. Use a dedicated commit to increment the version. The version needs to be
added to the `CHANGELOG.md` (inc. date) and the `package.json`.
3. The commit message must be of `v0.0.0` format.
4. Create an annotated tag for the version: `git tag -m "v0.0.0" v0.0.0`.
5. Push the changes and tags to GitHub: `git push --tags origin master`.
6. Publish the new version to npm: `npm publish`.

View File

@@ -1,6 +1,6 @@
The MIT License (MIT)
Copyright (c) 2014 "MoOx" Maxime Thirouin
Copyright (c) 2014 Maxime Thirouin
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in

103
README.md
View File

@@ -2,7 +2,7 @@
<img align="right" src="https://dl.dropboxusercontent.com/u/14108185/memes/mind-blow.gif">
> When Ajax navigation meets Push State
> Easily enable fast Ajax navigation on any website (using pushState + xhr)
Pjax is ~~a jQuery plugin~~ **a standalone JavaScript module** that uses
ajax (XmlHttpRequest) and
@@ -10,11 +10,15 @@ ajax (XmlHttpRequest) and
to deliver a fast browsing experience.
_It allow you to completely transform user experience of standard websites
(server side generated or static ones) to make them feel they browse an app._
(server side generated or static ones) to make them feel they browse an app.
Especially for user that have low bandwidth connection._
**No more full page reload. No more lots of HTTP request.**
## No tests or Demo ?
There is still some work to make this repo sexy with tests & simple demo.
~~There is still some work to make this repo sexy with tests & simple demo.~~
Actually there is a [WIP branch where I'm adding lot of tests](https://github.com/MoOx/pjax/tree/testling)
For now [you can see this running on my website](http://moox.io), with sexy CSS animations when switching pages.
@@ -223,7 +227,7 @@ Callbacks are binded to Pjax instance itself to allow you to reuse it (ex: `this
###### Create a switch callback
Your function can do whatever you want, be should
Your function can do whatever you want, but you need to:
- replace oldEl content by newEl content in some fashion
- call `this.onSwitch()` to trigger attached callback.
@@ -249,7 +253,7 @@ new Pjax({
, switches: {
".js-Pjax": Pjax.switches.sideBySide
}
, switchesClasses: {
, switchesOptions: {
".js-Pjax": {
classNames: {
// class added on the element that will be removed
@@ -274,7 +278,7 @@ new Pjax({
})
```
_Note that remove class include `Animated--reverse` which is a simple way to not have
to create duplicate transition for (slideIn + reverse => slideOut).
to create duplicate transition for (slideIn + reverse => slideOut)._
The following CSS will be required to make something nice
@@ -384,6 +388,10 @@ Value (in px) to scrollTo when a page is switched.
Enable verbose mode & doesn't use fallback when there is an error.
Useful to debug page layout differences.
##### `currentUrlFullReload` (Boolean, default to false)
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
@@ -472,23 +480,78 @@ document.addEventListener("pjax:success", whenContainerReady)
---
## [Changelog](CHANGELOG.md)
## FAQ
### Q: Disqus doesn't work anymore, how can I fix that ?
A: There is a few things you need to do:
- wrap your disqus snippet into a dom element that you will add to the `selector`
arra (or just wrap it with class="js-Pjax") & be sure to have a least the empty
wrapper on each page (to avoid differences of DOM between pages)
- edit your disqus snippet like the one below
#### Disqus snippet before pjax integration
```html
<script>
var disqus_shortname = 'YOURSHORTNAME'
, disqus_identifier = 'PAGEID'
, disqus_url = 'PAGEURL'
, disqus_script = 'embed.js'
(function(d,s) {
s = d.createElement('script');s.async=1;s.src = '//' + disqus_shortname + '.disqus.com/'+disqus_script;
(d.getElementsByTagName('head')[0]).appendChild(s);
})(document)
</script>
```
#### Disqus snippet after Pjax integration
```html
<div class="js-Pjax"><!-- need to be here on every pjaxified page, even if empty -->
<!-- if (blah blah) { // eventual server side test to know wheter or not you include this script -->
<script>
var disqus_shortname = 'YOURSHORTNAME'
, disqus_identifier = 'PAGEID'
, disqus_url = 'PAGEURL'
, disqus_script = 'embed.js'
// here we will only load the disqus <script> if not already loaded
if (!window.DISQUS) {
(function(d,s) {
s = d.createElement('script');s.async=1;s.src = '//' + disqus_shortname + '.disqus.com/'+disqus_script;
(d.getElementsByTagName('head')[0]).appendChild(s);
})(document)
}
// if disqus <script> already loaded, we just reset disqus the right way
// see http://help.disqus.com/customer/portal/articles/472107-using-disqus-on-ajax-sites
else {
DISQUS.reset({
reload: true,
config: function () {
this.page.identifier = disqus_identifier
this.page.url = disqus_url
}
})
}
</script>
<!-- } -->
</div>
```
**Note: The thing you need to understand is that Pjax handle inline `<script>` only for container you are reloading.**
---
## Contributing
Please read the file nobody reads (make me lie) [CONTRIBUTING.md](CONTRIBUTING.md)
Work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature.
### tl;dr;
$ git clone https://github.com/MoOx/pjax.git
$ git checkout -b patch-1
$ npm install
$ npm test
Fork, clone, then
## [Changelog](CHANGELOG.md)
```shell
$ npm i -g gulp
$ npm i
$ gulp
```
Now you can work on the file, then make a commit and a push something when gulp doesn't show any error.
Thanks.
## [License](LICENSE-MIT)
## [License](LICENSE)

View File

@@ -1,17 +1,7 @@
{
"name": "pjax",
"version": "0.1.2",
"description": "Boost browsing experience using Ajax navigation (+ Push state)",
"main": "src/pjax.js",
"homepage": "https://github.com/MoOx/pjax",
"authors": [
"Maxime Thirouin <m@moox.io>"
],
"moduleType": [
"amd",
"globals",
"node"
],
"version": "0.1.4",
"description": "Easily enable fast Ajax navigation on any website (using pushState + xhr)",
"keywords": [
"pjax",
"push",
@@ -21,11 +11,20 @@
"transition",
"animation"
],
"main": "src/pjax.js",
"homepage": "https://github.com/MoOx/pjax",
"authors": [
"Maxime Thirouin"
],
"license": "MIT",
"moduleType": [
"amd",
"globals",
"node"
],
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]

View File

@@ -1,56 +0,0 @@
var pkg = require("./package.json")
, gulp = require("gulp")
, plumber = require("gulp-plumber")
///
// JS Lint
///
var jshint = require("gulp-jshint")
, jsonFiles = [".jshintrc", "*.json"]
, jsFiles = ["*.js", "src/**/*.js"]
gulp.task("scripts.lint", function() {
gulp.src([].concat(jsonFiles).concat(jsFiles))
.pipe(plumber())
.pipe(jshint(".jshintrc"))
.pipe(jshint.reporter("jshint-stylish"))
})
///
// JS Code Sniffing
///
var jscs = require("gulp-jscs")
gulp.task("scripts.cs", function() {
gulp.src(jsFiles)
.pipe(plumber())
.pipe(jscs())
})
// JS Alias
gulp.task("scripts", ["scripts.lint", "scripts.cs"])
///
// Watch
///
gulp.task("watch", function() {
gulp.watch(jsFiles, ["scripts"])
})
///
// Publish gh-branch
///
var buildBranch = require("buildbranch")
gulp.task("publish", ["test"], function(cb) {
buildBranch({folder: "src"}
, function(err) {
if (err) {
throw err
}
console.log(pkg.name + " published.")
cb()
})
})
// Aliases
gulp.task("build", ["scripts"])
gulp.task("test", ["build"])
gulp.task("default", ["test", "watch"])

View File

@@ -1,15 +1,7 @@
{
"name": "pjax",
"version": "0.1.2",
"description": "Boost browsing experience using Ajax navigation (+ Push state)",
"main": "src/pjax.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/MoOx/pjax.git"
},
"version": "0.1.4",
"description": "Easily enable fast Ajax navigation on any website (using pushState + xhr)",
"keywords": [
"pjax",
"push",
@@ -19,18 +11,29 @@
"transition",
"animation"
],
"author": "MoOx <m@moox.io>",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/MoOx/pjax.git"
},
"homepage": "https://github.com/MoOx/pjax",
"bugs": {
"url": "https://github.com/MoOx/pjax/issues"
},
"homepage": "https://github.com/MoOx/pjax",
"author": "Maxime Thirouin",
"license": "MIT",
"main": "src/pjax.js",
"files": [
"CHANGELOG.md",
"LICENSE",
"src"
],
"devDependencies": {
"jshint-stylish": "^0.1.5",
"gulp-jscs": "^0.3.2",
"gulp-plumber": "^0.5.6",
"gulp": "^3.5.6",
"gulp-jshint": "^1.5.1",
"buildbranch": "0.0.1"
"jscs": "^1.6.2",
"jshint": "^2.5.6",
"postcss": "^2.2.5"
},
"scripts": {
"lint": "jscs **/*.js && jshint . --exclude-path .gitignore",
"test": "npm run lint"
}
}

View File

@@ -27,6 +27,7 @@
this.options.switches = this.options.switches || {}
this.options.switchesOptions = this.options.switchesOptions || {}
this.options.history = this.options.history || true
this.options.currentUrlFullReload = this.options.currentUrlFullReload || false
this.options.analytics = this.options.analytics || function(options) {
// options.backward or options.foward can be true or undefined
// by default, we do track back/foward hit
@@ -91,7 +92,7 @@
window.history.pushState &&
window.history.replaceState &&
// pushState isnt reliable on iOS until 5.
!navigator.userAgent.match(/((iPod|iPhone|iPad).+\bOS\s+[1-4]|WebApps\/.+CFNetwork)/)
!navigator.userAgent.match(/((iPod|iPhone|iPad).+\bOS\s+[1-4]\D|WebApps\/.+CFNetwork)/)
}
Pjax.forEachEls = function(els, fn, context) {
@@ -271,11 +272,12 @@
event.preventDefault()
// dont do "nothing" if user try to reload the page
if (this.options.currentUrlFullReload) {
if (el.href === window.location.href) {
window.location.reload()
return -6
}
}
this.loadUrl(el.href, Pjax.clone(this.options))
}.bind(this))
@@ -339,14 +341,14 @@
}
, loadContent: function(html, options) {
var tmpEl = document.implementation.createHTMLDocument()
var tmpEl = document.implementation.createHTMLDocument("")
// parse HTML attributes to copy them
// since we are forced to use documentElement.innerHTML (outerHTML can't be used for <html>)
, htmlRegex = /<html[^>]+>/gi
, htmlAttribsRegex = /\s?[a-z:]+(?:\=(?:\'|\")[^\'\">]+(?:\'|\"))*/gi
, matches = html.match(htmlRegex)
if (matches.length) {
if (matches && matches.length) {
matches = matches[0].match(htmlAttribsRegex)
if (matches.length) {
matches.shift()
@@ -497,7 +499,8 @@
}
, sideBySide: function(oldEl, newEl, options, switchOptions) {
var elsToRemove = []
var forEach = Array.prototype.forEach
, elsToRemove = []
, elsToAdd = []
, fragToAppend = document.createDocumentFragment()
// height transition are shitty on safari
@@ -546,6 +549,8 @@
// oldEl.parentNode.removeChild(newEl)
// oldEl.style.height = oldEl.getBoundingClientRect().height + "px"
switchOptions = switchOptions || {}
forEach.call(oldEl.childNodes, function(el) {
elsToRemove.push(el)
if (el.classList && !el.classList.contains("js-Pjax-remove")) {
@@ -558,7 +563,9 @@
if (switchOptions.callbacks && switchOptions.callbacks.removeElement) {
switchOptions.callbacks.removeElement(el)
}
if (switchOptions.classNames) {
el.className += " " + switchOptions.classNames.remove + " " + (options.backward ? switchOptions.classNames.backward : switchOptions.classNames.forward)
}
animatedElsNumber++
Pjax.on(el, animationEventNames, sexyAnimationEnd, true)
}
@@ -566,7 +573,10 @@
forEach.call(newEl.childNodes, function(el) {
if (el.classList) {
var addClasses = " js-Pjax-add " + switchOptions.classNames.add + " " + (options.backward ? switchOptions.classNames.forward : switchOptions.classNames.backward)
var addClasses = ""
if (switchOptions.classNames) {
addClasses = " js-Pjax-add " + switchOptions.classNames.add + " " + (options.backward ? switchOptions.classNames.forward : switchOptions.classNames.backward)
}
if (switchOptions.callbacks && switchOptions.callbacks.addElement) {
switchOptions.callbacks.addElement(el)
}