Enable turbolinks using jquery-turbolinks gem

yamamuteki · May 1, 2016 · c1cd3fa · c1cd3fa
1 parent a8d752f
commit c1cd3fa
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 1 deletion.
diff --git a/Gemfile b/Gemfile
@@ -53,4 +53,5 @@ gem 'google-analytics-rails'
 gem 'gmaps4rails'
 gem 'quiet_assets', group: :development
 gem 'rack-user_agent'
+gem 'jquery-turbolinks'
 
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -70,6 +70,9 @@ GEM
  rails-dom-testing (>= 1, < 3)
  railties (>= 4.2.0)
  thor (>= 0.14, < 2.0)
+ jquery-turbolinks (2.1.0)
+ railties (>= 3.1.0)
+ turbolinks
  json (1.8.3)
  loofah (2.0.3)
  nokogiri (>= 1.5.9)
@@ -167,6 +170,7 @@ DEPENDENCIES
  google-analytics-rails
  jbuilder (~> 2.0)
  jquery-rails
+ jquery-turbolinks
  pg
  quiet_assets
  rack-user_agent

diff --git a/app/assets/images/loading.gif b/app/assets/images/loading.gif
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -15,5 +15,6 @@
 //= require bootstrap-sprockets
 //= require underscore-min
 //= require gmaps/google
-// require turbolinks
+//= require jquery.turbolinks
+//= require turbolinks
 //= require_tree .
diff --git a/app/assets/javascripts/geolocation.coffee b/app/assets/javascripts/geolocation.coffee
@@ -31,3 +31,12 @@ $ ->
  value = $(this).prop('checked')
  handler.getMap().setOptions({draggable: !value})
  $("input[data-toggle-draggable]").prop("checked", from_smartphone()).change()
+
+$ ->
+ $(document).on 'page:fetch', ->
+ $(".turbolinks-loading").show()
+ return
+
+ $(document).on 'page:change', ->
+ $(".turbolinks-loading").fadeOut 100
+ return
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -68,3 +68,18 @@ textarea {
 .draggable-checkbox {
  margin-right: 10px;
 }
+
+.turbolinks-loading {
+ background-color: rgba(0, 0, 0, 0.1);
+ z-index: 10000;
+ position: fixed;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-image: image-url("loading.gif");
+ background-size: 64px 64px;
+ background-position: center;
+ background-repeat: no-repeat;
+ display: none;
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -28,6 +28,7 @@ function from_smartphone(){
  </script>
  </head>
  <body>
+ <div class="turbolinks-loading"></div>
  <div class="container-fluid">
  <%= yield %>
  </div>