v0.1.3

prepare 0.1.3 & rename clickReload to currentUrlFullReload
Merge pull request #16 from mduheaume/master
2014-09-16 07:56:13 +02:00 · 2014-09-16 07:54:12 +02:00 · 2014-09-16 07:51:04 +02:00 · 2014-09-16 06:47:06 +02:00 · 2014-09-10 15:13:17 -06:00 · 2014-09-01 09:47:28 +02:00
6 changed files with 155 additions and 25 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,19 @@
 # Changelog

+## 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
+
+- Safer UMD wrapper (fix concat issue)
+
 ## 0.1.0 - 2014-03-24

 Initial release
--- a/README.md
+++ b/README.md
@@ -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.
@@ -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,6 +480,69 @@ document.addEventListener("pjax:success", whenContainerReady)

 ---

+## 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.**
+
+---
+
 ## [Changelog](CHANGELOG.md)

 ## Contributing
--- a/bower.json
+++ b/bower.json
@@ -1,12 +1,12 @@
 {
  "name": "pjax",
-  "main": "pjax.js",
-  "version": "0.1.1",
+  "version": "0.1.3",
+  "description": "Easily enable fast Ajax navigation on any website (using pushState +  xhr)",
+  "main": "src/pjax.js",
  "homepage": "https://github.com/MoOx/pjax",
  "authors": [
    "Maxime Thirouin <m@moox.io>"
  ],
-  "description": "Boost browsing experience using Ajax navigation (+ Push state)",
  "moduleType": [
    "amd",
    "globals",
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,31 +1,56 @@
-///
 var pkg = require("./package.json")
  , gulp = require("gulp")
  , plumber = require("gulp-plumber")

 ///
-// Lint JS
+// JS Lint
 ///
 var jshint = require("gulp-jshint")
-  , jsFiles = [".jshintrc", "*.json", "*.js"]
+  , jsonFiles = [".jshintrc", "*.json"]
+  , jsFiles = ["*.js", "src/**/*.js"]
 gulp.task("scripts.lint", function() {
-  gulp.src(jsFiles)
+  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("*.js")
+  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"])
+  gulp.watch(jsFiles, ["scripts"])
 })

-gulp.task("default", ["scripts", "watch"])
+///
+// 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"])
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
  "name": "pjax",
-  "version": "0.1.1",
-  "description": "Boost browsing experience using Ajax navigation (+ Push state)",
-  "main": "pjax.js",
+  "version": "0.1.3",
+  "description": "Easily enable fast Ajax navigation on any website (using pushState +  xhr)",
+  "main": "src/pjax.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
@@ -30,6 +30,7 @@
    "gulp-jscs": "^0.3.2",
    "gulp-plumber": "^0.5.6",
    "gulp": "^3.5.6",
-    "gulp-jshint": "^1.5.1"
+    "gulp-jshint": "^1.5.1",
+    "buildbranch": "0.0.1"
  }
 }
--- a/src/pjax.js
+++ b/src/pjax.js
@@ -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
@@ -271,11 +272,12 @@

        event.preventDefault()

-        // don’t 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,9 +341,26 @@
    }

  , 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) {
+          matches = matches[0].match(htmlAttribsRegex)
+          if (matches.length) {
+            matches.shift()
+            matches.forEach(function(htmlAttrib) {
+              var attr = htmlAttrib.trim().split("=")
+              tmpEl.documentElement.setAttribute(attr[0], attr[1].slice(1, -1))
+            })
+          }
+        }
+
      tmpEl.documentElement.innerHTML = html
-      // this.log("load content", tmpEl.documentElement.innerHTML)
+      this.log("load content", tmpEl.documentElement.attributes, tmpEl.documentElement.innerHTML.length)
      // try {
        this.switchSelectors(this.options.selectors, tmpEl, document, options)
Author	SHA1	Message	Date
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
Maxime Thirouin	aa294a3a1a	0.1.2	2014-04-03 07:08:47 +02:00
Maxime Thirouin	71fcd4b24b	v0.1.2	2014-04-03 07:08:47 +02:00
Maxime Thirouin	31d0232ef4	Update Changelog	2014-04-03 07:07:46 +02:00
Maxime Thirouin	e09c164491	Update gulpfile from my boilerplate & relocate pjax.js into src folder	2014-04-03 07:07:34 +02:00
Maxime Thirouin	4a3ba25547	Make <html> attributes available	2014-04-03 06:53:41 +02:00