turbolinks 0.1.5 → 0.2.1

data/README.md

@@ -1,7 +1,7 @@
 Turbolinks
 ===========
 
-Turbolinks makes following links in your web application faster. Instead of letting the browser recompile the JavaScript and CSS between each page change, and potentially spend extra HTTP requests checking if the assets are up-to-date, we keep the current instance alive and replace only the body and the title in the head. Think CGI vs persistent process.
+Turbolinks makes following links in your web application faster. Instead of letting the browser recompile the JavaScript and CSS between each page change, we keep the current page instance alive and replace only the body and the title in the head (and potentially spend extra HTTP requests checking if the assets are up-to-date). Think CGI vs persistent process.
 
 This is similar to pjax, but instead of worrying about what element on the page to replace, and tailoring the server-side response to fit, we replace the entire body. This means that you get the bulk of the speed benefits from pjax (no recompiling of the JavaScript or CSS) without having to tailor the server-side response. It just works.
 
@@ -14,10 +14,10 @@ No jQuery or any other framework
 Turbolinks is designed to be as light-weight as possible (so you won't think twice about using it even for mobile stuff). It does not require jQuery or any other framework to work. But it works great _with_ jQuery or Prototype or whatever else have you.
 
 
-The page:update event
+The `page:change` event
 ---------------------
 
-Since pages will change without a full reload with Turbolinks, you can't by default rely on dom:loaded to trigger your JavaScript code. Instead, Turbolinks uses the page:update event.
+Since pages will change without a full reload with Turbolinks, you can't by default rely on `dom:loaded` to trigger your JavaScript code. Instead, Turbolinks uses the `page:change` event. Existing code will not be compatible with this style automatically, so it's your job to ensure that your initialization code will work with this change in events.
 
 
 Triggering a Turbolinks visit manually
@@ -32,9 +32,17 @@ Available only for pushState browsers
 Like pjax, this naturally only works with browsers capable of pushState. But of course we fall back gracefully to full page reloads for browsers that do not support it.
 
 
+Installation
+------------
+
+1. Add `gem 'turbolinks'` to your Gemfile.
+1. Run `bundle install`.
+1. Add `//= require turbolinks` to your Javascript manifest file (usually found at `app/assets/javascripts/application.js`).
+1. Restart your server and you're now using turbolinks!
+
+
 Work left to do
 ---------------
 
 * CSS/JS asset change detection and reload
-* Add a DOM cache for faster back button
-* Remember scroll position when using back button 
+* Add proper unit tests

data/lib/assets/javascripts/turbolinks.js.coffee

@@ -1,5 +1,10 @@
+pageCache    = []
+currentState = null
+initialized  = false
+
 visit = (url) ->
-  if browserSupportsPushState?
+  if browserSupportsPushState
+    cacheCurrentPage()
     reflectNewUrl url
     fetchReplacement url
   else
@@ -10,54 +15,110 @@ fetchReplacement = (url) ->
   xhr = new XMLHttpRequest
   xhr.open 'GET', url, true
   xhr.setRequestHeader 'Accept', 'text/html, application/xhtml+xml, application/xml'
-  xhr.onload  = -> fullReplacement xhr.responseText, url
-  xhr.onabort = -> console.log "Aborted turbolink fetch!"
+  xhr.onload  = -> changePage extractTitleAndBody(xhr.responseText)...
+  xhr.onabort = -> console.log 'Aborted turbolink fetch!'
   xhr.send()
 
-fullReplacement = (html, url) ->
-  replaceHTML html
-  triggerPageChange()
+fetchHistory = (state) ->
+  cacheCurrentPage()
+
+  if page = pageCache[state.position]
+    changePage page.title, page.body.cloneNode(true)
+    recallScrollPosition page
+  else
+    fetchReplacement document.location.href
+
+
+cacheCurrentPage = ->
+  rememberInitialPage()
+
+  pageCache[currentState.position] =
+    url:       document.location.href,
+    body:      document.body,
+    title:     document.title,
+    positionY: window.pageYOffset,
+    positionX: window.pageXOffset
+
+  constrainPageCacheTo(10)
+
+constrainPageCacheTo = (limit) ->
+  delete pageCache[currentState.position - limit] if currentState.position == window.history.length - 1
+
+
+changePage = (title, body) ->
+  document.title = title
+  document.documentElement.replaceChild body, document.body
+
+  currentState = window.history.state
+  triggerEvent 'page:change'
+
 
 reflectNewUrl = (url) ->
-  window.history.pushState { turbolinks: true }, "", url
+  if url isnt document.location.href
+    window.history.pushState { turbolinks: true, position: currentState.position + 1 }, '', url
+
+rememberCurrentUrl = ->
+  window.history.replaceState { turbolinks: true, position: window.history.length - 1 }, '', document.location.href
+
+rememberCurrentState = ->
+  currentState = window.history.state
 
-triggerPageChange = ->
+rememberInitialPage = ->
+  unless initialized
+    rememberCurrentUrl()
+    rememberCurrentState()
+    initialized = true
+
+recallScrollPosition = (page) ->
+  window.scrollTo page.positionX, page.positionX
+
+
+triggerEvent = (name) ->
   event = document.createEvent 'Events'
-  event.initEvent 'page:change', true, true
+  event.initEvent name, true, true
   document.dispatchEvent event
 
+
+extractTitleAndBody = (html) ->
+  doc   = createDocument html
+  title = doc.querySelector 'title'
+  [ title?.textContent, doc.body ]
+
 createDocument = do ->
   createDocumentUsingParser = (html) ->
-    (new DOMParser).parseFromString html, "text/html"
+    (new DOMParser).parseFromString html, 'text/html'
 
   createDocumentUsingWrite = (html) ->
-    doc = document.implementation.createHTMLDocument ""
-    doc.open "replace"
+    doc = document.implementation.createHTMLDocument ''
+    doc.open 'replace'
     doc.write html
     doc.close
     doc
 
   if window.DOMParser
-    testDoc = createDocumentUsingParser "<html><body><p>test"
+    testDoc = createDocumentUsingParser '<html><body><p>test'
 
   if testDoc?.body?.childNodes.length is 1
     createDocumentUsingParser
   else
     createDocumentUsingWrite
 
-replaceHTML = (html) ->
-  doc = createDocument html
-  originalBody = document.body
-  document.documentElement.appendChild doc.body, originalBody
-  document.documentElement.removeChild originalBody
-  document.title = title.textContent if title = doc.querySelector "title"
 
+handleClick = (event) ->
+  link = extractLink event
+
+  if link.nodeName is 'A' and !ignoreClick(event, link)
+    visit link.href
+    event.preventDefault()
 
 extractLink = (event) ->
   link = event.target
   link = link.parentNode until link is document or link.nodeName is 'A'
   link
 
+samePageLink = (link) ->
+  link.href is document.location.href
+
 crossOriginLink = (link) ->
   location.protocol isnt link.protocol or location.host isnt link.host
 
@@ -66,7 +127,7 @@ anchoredLink = (link) ->
     (link.href is location.href + '#')
 
 nonHtmlLink = (link) ->
-  link.href.match(/\.[a-z]+$/g) and not link.href.match(/\.html?$/g)
+  link.href.match(/\.[a-z]+(\?.*)?$/g) and not link.href.match(/\.html?(\?.*)?$/g)
 
 noTurbolink = (link) ->
   link.getAttribute('data-no-turbolink')?
@@ -75,31 +136,19 @@ newTabClick = (event) ->
   event.which > 1 or event.metaKey or event.ctrlKey
 
 ignoreClick = (event, link) ->
-  crossOriginLink(link) or anchoredLink(link) or nonHtmlLink(link) or noTurbolink(link) or newTabClick(event)
+  samePageLink(link) or crossOriginLink(link) or anchoredLink(link) or
+  nonHtmlLink(link)  or noTurbolink(link)     or newTabClick(event)
 
-handleClick = (event) ->
-  link = extractLink event
-
-  if link.nodeName is 'A' and !ignoreClick(event, link)
-    visit link.href
-    event.preventDefault()
-
-
-browserSupportsPushState = window.history and window.history.pushState and window.history.replaceState
-
-rememberInitialPage = ->
-  window.history.replaceState { turbolinks: true }, "", document.location.href
 
+browserSupportsPushState =
+  window.history and window.history.pushState and window.history.replaceState
 
 if browserSupportsPushState
-  rememberInitialPage()
-  
   window.addEventListener 'popstate', (event) ->
-    if event.state?.turbolinks
-      fetchReplacement document.location.href
+    fetchHistory event.state if event.state?.turbolinks
 
   document.addEventListener 'click', (event) ->
     handleClick event
 
 # Call Turbolinks.visit(url) from client code
-@Turbolinks = { visit: visit }
+@Turbolinks = visit: visit

data/test/config.ru

@@ -11,4 +11,4 @@ map "/js" do
   run Assets
 end
 
-run Rack::Directory.new(Root)
+run Rack::Directory.new(File.join(Root, "test"))

data/test/index.html

@@ -10,11 +10,16 @@
     });
   </script>
 </head>
-<body>
-  <ul>
-    <li><a href="/test/other.html">Other page</a></li>
-    <li><a href="/test/other.html"><span>Wrapped link</span></a></li>
+<body class="page-index">
+  <ul style="margin-top:200px;">
+    <li><a href="/other.html">Other page</a></li>
+    <li><a href="/other.html"><span>Wrapped link</span></a></li>
     <li><a href="http://www.google.com/">Cross origin</a></li>
+    <li><a href="/dummy.gif?12345">Query Param Image Link</a></li>
+    <li><a href="#">Hash link</a></li>
   </ul>
+
+  <div style="background:#ccc;height:5000px;width:200px;">
+  </div>
 </body>
 </html>

data/test/other.html

@@ -10,9 +10,9 @@
     });
   </script>
 </head>
-<body>
+<body class="page-other">
   <ul>
-    <li><a href="/test/index.html">Home</a></li>
+    <li><a href="/index.html">Home</a></li>
   </ul>
 </body>
 </html>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: turbolinks
 version: !ruby/object:Gem::Version
-  version: 0.1.5
+  version: 0.2.1
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-09-26 00:00:00.000000000 Z
+date: 2012-09-27 00:00:00.000000000 Z
 dependencies: []
 description: 
 email: david@loudthinking.com
@@ -22,6 +22,7 @@ files:
 - README.md
 - MIT-LICENSE
 - test/config.ru
+- test/dummy.gif
 - test/index.html
 - test/other.html
 homepage: