turbolinks-js 0.1.0 → 0.2.0

data/README.md

@@ -1,52 +1,14 @@
 Turbolinks-js
 =============
 
-Same as [Turbolinks](https://github.com/rails/turbolinks) but without CoffeeScript
-requirement.
+Same as Turbolinks but without the CoffeeScript requirement.
+Check [Turbolinks](https://github.com/rails/turbolinks) for
+more information.
 
-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.
+Installation
+------------
 
-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.
-
-By default, all internal links will be funneled through Turbolinks, but you can opt
-out by marking links with data-no-turbolink.
-
-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
----------------------
-
-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.
-
-Triggering a Turbolinks visit manually
----------------------------------------
-
-You can use `Turbolinks.visit(path)` to go to a URL through Turbolinks.
-
-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.
-
-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.
+1. Add `gem 'turbolinks-js'` to your Gemfile.
+2. Run `bundle install`.
+3. Add `//= require turbolinks` to your Javascript manifest file (usually found at `app/assets/javascripts/application.js`).
+4. Restart your server and you're now using turbolinks!

data/lib/assets/javascripts/turbolinks.js

@@ -1,8 +1,16 @@
+// Generated by CoffeeScript 1.3.3
 (function() {
-  var anchoredLink, browserSupportsPushState, createDocument, crossOriginLink, extractLink, fetchReplacement, fullReplacement, handleClick, ignoreClick, newTabClick, noTurbolink, nonHtmlLink, reflectNewUrl, rememberInitialPage, replaceHTML, triggerPageChange, visit;
+  var anchoredLink, browserSupportsPushState, cacheCurrentPage, changePage, createDocument, crossOriginLink, currentState, extractLink, extractTitleAndBody, fetchHistory, fetchReplacement, garbageCollectCache, handleClick, ignoreClick, initialized, newTabClick, noTurbolink, nonHtmlLink, pageCache, recallScrollPosition, reflectNewUrl, rememberCurrentState, rememberCurrentUrl, rememberInitialPage, samePageLink, triggerEvent, visit;
+
+  pageCache = [];
+
+  currentState = null;
+
+  initialized = false;
 
   visit = function(url) {
-    if (typeof browserSupportsPushState !== "undefined" && browserSupportsPushState !== null) {
+    if (browserSupportsPushState) {
+      cacheCurrentPage();
       reflectNewUrl(url);
       return fetchReplacement(url);
     } else {
@@ -16,47 +24,109 @@
     xhr.open('GET', url, true);
     xhr.setRequestHeader('Accept', 'text/html, application/xhtml+xml, application/xml');
     xhr.onload = function() {
-      return fullReplacement(xhr.responseText, url);
+      return changePage.apply(null, extractTitleAndBody(xhr.responseText));
     };
     xhr.onabort = function() {
-      return console.log("Aborted turbolink fetch!");
+      return console.log('Aborted turbolink fetch!');
     };
     return xhr.send();
   };
 
-  fullReplacement = function(html, url) {
-    replaceHTML(html);
-    return triggerPageChange();
+  fetchHistory = function(state) {
+    var page;
+    cacheCurrentPage();
+    if (page = pageCache[state.position]) {
+      changePage(page.title, page.body.cloneNode(true));
+      return recallScrollPosition(page);
+    } else {
+      return fetchReplacement(document.location.href);
+    }
+  };
+
+  cacheCurrentPage = function() {
+    rememberInitialPage();
+    pageCache[currentState.position] = {
+      url: document.location.href,
+      body: document.body,
+      title: document.title,
+      positionY: window.pageYOffset,
+      positionX: window.pageXOffset
+    };
+    return garbageCollectCache();
+  };
+
+  garbageCollectCache = function() {
+    if (currentState.position === window.history.length - 1 && pageCache[currentState.position - 10] !== void 0) {
+      return delete pageCache[currentState.position - 10];
+    }
+  };
+
+  changePage = function(title, body) {
+    document.title = title;
+    document.documentElement.replaceChild(body, document.body);
+    currentState = window.history.state;
+    return triggerEvent('page:change');
   };
 
   reflectNewUrl = function(url) {
     return window.history.pushState({
-      turbolinks: true
-    }, "", url);
+      turbolinks: true,
+      position: window.history.length
+    }, '', url);
+  };
+
+  rememberCurrentUrl = function() {
+    return window.history.replaceState({
+      turbolinks: true,
+      position: window.history.length - 1
+    }, '', document.location.href);
   };
 
-  triggerPageChange = function() {
+  rememberCurrentState = function() {
+    return currentState = window.history.state;
+  };
+
+  rememberInitialPage = function() {
+    if (!initialized) {
+      rememberCurrentUrl();
+      rememberCurrentState();
+      return initialized = true;
+    }
+  };
+
+  recallScrollPosition = function(page) {
+    return window.scrollTo(page.positionX, page.positionX);
+  };
+
+  triggerEvent = function(name) {
     var event;
     event = document.createEvent('Events');
-    event.initEvent('page:change', true, true);
+    event.initEvent(name, true, true);
     return document.dispatchEvent(event);
   };
 
+  extractTitleAndBody = function(html) {
+    var doc, title;
+    doc = createDocument(html);
+    title = doc.querySelector('title');
+    return [title != null ? title.textContent : void 0, doc.body];
+  };
+
   createDocument = (function() {
     var createDocumentUsingParser, createDocumentUsingWrite, testDoc, _ref;
     createDocumentUsingParser = function(html) {
-      return (new DOMParser).parseFromString(html, "text/html");
+      return (new DOMParser).parseFromString(html, 'text/html');
     };
     createDocumentUsingWrite = function(html) {
       var doc;
-      doc = document.implementation.createHTMLDocument("");
-      doc.open("replace");
+      doc = document.implementation.createHTMLDocument('');
+      doc.open('replace');
       doc.write(html);
       doc.close;
       return doc;
     };
     if (window.DOMParser) {
-      testDoc = createDocumentUsingParser("<html><body><p>test");
+      testDoc = createDocumentUsingParser('<html><body><p>test');
     }
     if ((testDoc != null ? (_ref = testDoc.body) != null ? _ref.childNodes.length : void 0 : void 0) === 1) {
       return createDocumentUsingParser;
@@ -65,17 +135,6 @@
     }
   })();
 
-  replaceHTML = function(html) {
-    var doc, originalBody, title;
-    doc = createDocument(html);
-    originalBody = document.body;
-    document.documentElement.appendChild(doc.body, originalBody);
-    document.documentElement.removeChild(originalBody);
-    if (title = doc.querySelector("title")) {
-      return document.title = title.textContent;
-    }
-  };
-
   extractLink = function(event) {
     var link;
     link = event.target;
@@ -85,6 +144,10 @@
     return link;
   };
 
+  samePageLink = function(link) {
+    return link.href === document.location.href;
+  };
+
   crossOriginLink = function(link) {
     return location.protocol !== link.protocol || location.host !== link.host;
   };
@@ -106,7 +169,7 @@
   };
 
   ignoreClick = function(event, link) {
-    return crossOriginLink(link) || anchoredLink(link) || nonHtmlLink(link) || noTurbolink(link) || newTabClick(event);
+    return samePageLink(link) || crossOriginLink(link) || anchoredLink(link) || nonHtmlLink(link) || noTurbolink(link) || newTabClick(event);
   };
 
   handleClick = function(event) {
@@ -120,18 +183,11 @@
 
   browserSupportsPushState = window.history && window.history.pushState && window.history.replaceState;
 
-  rememberInitialPage = function() {
-    return window.history.replaceState({
-      turbolinks: true
-    }, "", document.location.href);
-  };
-
   if (browserSupportsPushState) {
-    rememberInitialPage();
     window.addEventListener('popstate', function(event) {
       var _ref;
       if ((_ref = event.state) != null ? _ref.turbolinks : void 0) {
-        return fetchReplacement(document.location.href);
+        return fetchHistory(event.state);
       }
     });
     document.addEventListener('click', function(event) {

data/test/config.ru

@@ -1,10 +1,9 @@
 require 'sprockets'
-require 'coffee-script'
 
 Root = File.expand_path("../..", __FILE__)
 
 Assets = Sprockets::Environment.new do |env|
-  env.append_path File.join(Root, "lib", "assets", "javascripts")
+  env.append_path File.join(Root, 'lib', 'assets', 'javascripts')
 end
 
 map "/js" do

data/test/index.html

@@ -10,11 +10,16 @@
     });
   </script>
 </head>
-<body>
-  <ul>
+<body class="page-index">
+  <ul style="margin-top:200px;">
     <li><a href="/test/other.html">Other page</a></li>
     <li><a href="/test/other.html"><span>Wrapped link</span></a></li>
     <li><a href="http://www.google.com/">Cross origin</a></li>
+    <li><a href="/test/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,7 +10,7 @@
     });
   </script>
 </head>
-<body>
+<body class="page-other">
   <ul>
     <li><a href="/test/index.html">Home</a></li>
   </ul>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: turbolinks-js
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
   prerelease: 
 platform: ruby
 authors:
@@ -24,6 +24,7 @@ files:
 - README.md
 - MIT-LICENSE
 - test/config.ru
+- test/dummy.gif
 - test/index.html
 - test/other.html
 homepage: 
@@ -49,7 +50,6 @@ rubyforge_project:
 rubygems_version: 1.8.23
 signing_key: 
 specification_version: 3
-summary: Turbolinks-js makes following links in your web application faster (use with
-  Rails Asset Pipeline). No CoffeeScript requirement.
+summary: Same as Turbolinks but without the CoffeeScript requirement
 test_files: []
 has_rdoc: