From f762f57d1cb57f8f837c73e1f7dc22d7488059ac Mon Sep 17 00:00:00 2001
From: Joseph Nuthalapati <njoseph@thoughtworks.com>
Date: Sat, 23 Jun 2018 13:22:16 +0530
Subject: [PATCH] Add turbolinks

- Load scripts in the head with `defer` instead of at the end of the body
- Disable turbolinks for application shortcuts and manual download

Signed-off-by: Joseph Nuthalapati <njoseph@thoughtworks.com>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
---
 debian/control                                |  1 +
 plinth/modules/help/templates/help_index.html |  9 +++++++++
 plinth/templates/base.html                    | 17 +++++++++--------
 plinth/templates/index.html                   |  4 ++--
 4 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/debian/control b/debian/control
index fc8e11424..6a780fed7 100644
--- a/debian/control
+++ b/debian/control
@@ -63,6 +63,7 @@ Depends: ${python3:Depends}
  , libjs-jquery
  , libjs-modernizr
  , network-manager
+ , node-turbolinks
  , ppp
  , pppoe
  , python3-apt
diff --git a/plinth/modules/help/templates/help_index.html b/plinth/modules/help/templates/help_index.html
index 3f4861252..16ef9560b 100644
--- a/plinth/modules/help/templates/help_index.html
+++ b/plinth/modules/help/templates/help_index.html
@@ -94,3 +94,12 @@
   {% endif %}
 
 {% endblock %}
+
+{% block page_js %}
+  <script type="text/javascript">
+   (function($) {
+       let downloadManualButton = $('a[href="/plinth/help/manual/download/"]');
+       downloadManualButton.attr("data-turbolinks", "false");
+   })(jQuery);
+  </script>
+{% endblock %}
diff --git a/plinth/templates/base.html b/plinth/templates/base.html
index 568e7b53b..c651aff41 100644
--- a/plinth/templates/base.html
+++ b/plinth/templates/base.html
@@ -70,6 +70,15 @@
   <link rel="stylesheet" href="{% static '/javascript/bootstrap/css/bootstrap.min.css' %}"/>
   <link rel="stylesheet" href="{% static 'theme/css/plinth.css' %}"/>
   <link rel="stylesheet" href="{% static 'theme/css/responsive.css' %}"/>
+  <!-- Local link to system Turbolinks JS -->
+  <script type="text/javascript" src="{% static '/javascript/turbolinks/turbolinks.js' %}" defer></script>
+  <!-- Local link to system Modernizr (includes HTML5 Shiv) -->
+  <script type="text/javascript" src="{% static '/javascript/modernizr/modernizr.min.js' %}" defer></script>
+  <!-- Local link to system jQuery -->
+  <!-- TODO Deferring jQuery is causing scripts to be loaded before jQuery is available -->
+  <script type="text/javascript" src="{% static '/javascript/jquery/jquery.min.js' %}"></script>
+  <!-- Local link to system Bootstrap JS -->
+  <script type="text/javascript" src="{% static '/javascript/bootstrap/js/bootstrap.min.js' %}" defer></script>
   {% block app_head %}<!-- placeholder for app/module-specific head files -->{% endblock %}
   {% block page_head %}<!-- placeholder for page-specific head files -->{% endblock %}
 </head>
@@ -244,14 +253,6 @@
     </div>
   </footer><!--/.footer-->
 </div><!--/#container-->
-  <!-- JavaScript <script> tags are placed at the end of the document to speed up initial page loads-->
-  <!-- Local link to system Modernizr (includes HTML5 Shiv) -->
-  <script type="text/javascript" src="{% static '/javascript/modernizr/modernizr.min.js' %}"></script>
-  <!-- Local link to system jQuery -->
-  <script type="text/javascript" src="{% static '/javascript/jquery/jquery.min.js' %}"></script>
-  <!-- Local link to system Bootstrap JS -->
-  <script type="text/javascript" src="{% static '/javascript/bootstrap/js/bootstrap.min.js' %}"></script>
-
   {% block app_js %}<!-- placeholder for app-specific js files -->{% endblock %}
   {% block page_js %}<!-- placeholder for page-specific js files -->{% endblock %}
 </body>
diff --git a/plinth/templates/index.html b/plinth/templates/index.html
index 695eaddc1..d229dca43 100644
--- a/plinth/templates/index.html
+++ b/plinth/templates/index.html
@@ -82,9 +82,9 @@
               {% if user.is_authenticated or not shortcut.login_required %}
                 <div class="card thumbnail">
                   {% if selected_id == shortcut.id %}
-                    <a href="{{ shortcut.url }}" class="nav-link active">
+                    <a href="{{ shortcut.url }}" class="nav-link active" data-turbolinks="false">
                   {% else %}
-                    <a href="{{ shortcut.url }}" class="nav-link">
+                    <a href="{{ shortcut.url }}" class="nav-link" data-turbolinks="false">
                   {% endif %}
                         <div class="card-icon">
                           <img src="{% static 'theme/icons/' %}{{ shortcut.icon }}.png"/>