v0.1.3

Add title when calling createHTMLDocument

CHANGELOG.md

@@ -1,5 +1,10 @@
 # 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/`

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

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "pjax",
-  "version": "0.1.2",
-  "description": "Boost browsing experience using Ajax navigation (+ Push state)",
+  "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": [

package.json

@@ -1,7 +1,7 @@
 {
   "name": "pjax",
-  "version": "0.1.2",
-  "description": "Boost browsing experience using Ajax navigation (+ Push state)",
+  "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"

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,10 +272,11 @@
 
         event.preventDefault()
 
-        // don’t do "nothing" if user try to reload the page
-        if (el.href === window.location.href) {
-          window.location.reload()
-          return -6
+        if (this.options.currentUrlFullReload) {
+          if (el.href === window.location.href) {
+            window.location.reload()
+            return -6
+          }
         }
 
         this.loadUrl(el.href, Pjax.clone(this.options))
@@ -339,7 +341,7 @@
     }
 
   , 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>)