Merge pull request #32405 from yhirano55/use_turbolinks_in_guide

Use Turbolinks in Rails guides
rails · Sep 6, 2018 · 53be013 · 53be013
2 parents 54a9dbf + e5d38a2
commit 53be013
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 32 deletions.
diff --git a/guides/assets/javascripts/guides.js b/guides/assets/javascripts/guides.js
@@ -19,7 +19,18 @@
     return elem;
   }
 
-  document.addEventListener("DOMContentLoaded", function() {
+  // For old browsers
+  this.each = function(node, callback) {
+    var array = Array.prototype.slice.call(node);
+    for(var i = 0; i < array.length; i++) callback(array[i]);
+  }
+
+  // Viewable on local
+  if (window.location.protocol === "file:") Turbolinks.supported = false;
+
+  document.addEventListener("turbolinks:load", function() {
+    window.SyntaxHighlighter.highlight({ "auto-links": false });
+
     var guidesMenu = document.getElementById("guidesMenu");
     var guides     = document.getElementById("guides");
 
@@ -28,12 +39,22 @@
       guides.classList.toggle("visible");
     });
 
+    each(document.querySelectorAll("#guides a"), function(element) {
+      element.addEventListener("click", function(e) {
+        guides.classList.toggle("visible");
+      });
+    });
+
     var guidesIndexItem   = document.querySelector("select.guides-index-item");
     var currentGuidePath  = window.location.pathname;
     guidesIndexItem.value = currentGuidePath.substring(currentGuidePath.lastIndexOf("/") + 1);
 
     guidesIndexItem.addEventListener("change", function(e) {
-      window.location = e.target.value;
+      if (Turbolinks.supported) {
+        Turbolinks.visit(e.target.value);
+      } else {
+        window.location = e.target.value;
+      }
     });
 
     var moreInfoButton = document.querySelector(".more-info-button");

diff --git a/guides/assets/javascripts/responsive-tables.js b/guides/assets/javascripts/responsive-tables.js
@@ -3,16 +3,6 @@
 
   var switched = false;
 
-  // For old browsers
-  var each = function(node, callback) {
-    var array = Array.prototype.slice.call(node);
-    for(var i = 0; i < array.length; i++) callback(array[i]);
-  }
-
-  each(document.querySelectorAll(":not(.syntaxhighlighter)>table"), function(element) {
-    element.classList.add("responsive");
-  });
-
   var updateTables = function() {
     if (document.documentElement.clientWidth < 767 && !switched) {
       switched = true;
@@ -23,7 +13,13 @@
     }
   }
 
-  document.addEventListener("DOMContentLoaded", updateTables);
+  document.addEventListener("turbolinks:load", function() {
+    each(document.querySelectorAll(":not(.syntaxhighlighter)>table"), function(element) {
+      element.classList.add("responsive");
+    });
+    updateTables();
+  });
+
   window.addEventListener("resize", updateTables);
 
   var splitTable = function(original) {

diff --git a/guides/assets/javascripts/turbolinks.js b/guides/assets/javascripts/turbolinks.js
diff --git a/guides/assets/stylesheets/style.css b/guides/assets/stylesheets/style.css
@@ -11,3 +11,4 @@ Import advanced style sheet
 
 @import url("reset.css");
 @import url("main.css");
+@import url("turbolinks.css");
diff --git a/guides/assets/stylesheets/turbolinks.css b/guides/assets/stylesheets/turbolinks.css
@@ -0,0 +1,3 @@
+.turbolinks-progress-bar {
+  background-color: #c52f24;
+}
diff --git a/guides/source/layout.html.erb b/guides/source/layout.html.erb
@@ -1,20 +1,19 @@
 <!DOCTYPE html>
-
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<html lang="en">
 <head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-<meta name="viewport" content="width=device-width, initial-scale=1"/>
-
-<title><%= yield(:page_title) || 'Ruby on Rails Guides' %></title>
-<link rel="stylesheet" type="text/css" href="stylesheets/style.css" />
-<link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print" />
-
-<link rel="stylesheet" type="text/css" href="stylesheets/syntaxhighlighter/shCore.css" />
-<link rel="stylesheet" type="text/css" href="stylesheets/syntaxhighlighter/shThemeRailsGuides.css" />
-
-<link rel="stylesheet" type="text/css" href="stylesheets/fixes.css" />
-
-<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title><%= yield(:page_title) || 'Ruby on Rails Guides' %></title>
+  <link rel="stylesheet" type="text/css" href="stylesheets/style.css" data-turbolinks-track="reload">
+  <link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print">
+  <link rel="stylesheet" type="text/css" href="stylesheets/syntaxhighlighter/shCore.css" data-turbolinks-track="reload">
+  <link rel="stylesheet" type="text/css" href="stylesheets/syntaxhighlighter/shThemeRailsGuides.css" data-turbolinks-track="reload">
+  <link rel="stylesheet" type="text/css" href="stylesheets/fixes.css" data-turbolinks-track="reload">
+  <link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
+  <script src="javascripts/syntaxhighlighter.js" data-turbolinks-track="reload"></script>
+  <script src="javascripts/turbolinks.js" data-turbolinks-track="reload"></script>
+  <script src="javascripts/guides.js" data-turbolinks-track="reload"></script>
+  <script src="javascripts/responsive-tables.js" data-turbolinks-track="reload"></script>
 </head>
 <body class="guide">
   <% if @edge %>
@@ -122,9 +121,5 @@
       <%= render 'license' %>
     </div>
   </div>
-
-  <script type="text/javascript" src="javascripts/syntaxhighlighter.js"></script>
-  <script type="text/javascript" src="javascripts/guides.js"></script>
-  <script type="text/javascript" src="javascripts/responsive-tables.js"></script>
 </body>
 </html>