ウォール: クリップ詳細ダイアログの表示速度を改善

Gemfile

@@ -37,9 +37,9 @@ group :assets do
   # ブロック整列, image loaded, infinitescroll
   gem 'masonry-rails'
 
-  # to use Twitter-Boostrap
+  # to use Twitter-Bootstrap
   gem 'therubyracer'
-  gem 'bootstrap-sass', '~> 2.3.1.0'
+  gem 'bootstrap-sass'
   gem 'bootstrap-modal-rails'
 
   gem 'compass-rails'
@@ -50,8 +50,7 @@ group :assets do
   gem 'turbo-sprockets-rails3'
 end
 
-# 最新版(jQuery 1.9)だとinfinitescrollが動作しないため2.1.x系(jQuery 1.8)を指定
-gem 'jquery-rails', '~> 2.1.4'
+gem 'jquery-rails'
 gem 'jquery-ui-rails'
 
 # Support CoffeeScript

Gemfile.lock

@@ -57,9 +57,9 @@ GEM
       daemons (~> 1.1.4)
       i18n (>= 0.5.0)
       state_machine (~> 1.1)
-    bootstrap-modal-rails (2.1.1)
+    bootstrap-modal-rails (2.2.0)
       railties (>= 3.1)
-    bootstrap-sass (2.3.1.0)
+    bootstrap-sass (2.3.2.2)
       sass (~> 3.2)
     builder (3.0.4)
     capistrano (2.14.2)
@@ -180,7 +180,7 @@ GEM
       rails (>= 3.0.0)
     image_size (1.1.2)
     journey (1.0.4)
-    jquery-rails (2.1.4)
+    jquery-rails (2.3.0)
       railties (>= 3.0, < 5.0)
       thor (>= 0.14, < 2.0)
     jquery-ui-rails (3.0.1)
@@ -211,7 +211,7 @@ GEM
     mini_magick (3.6.0)
       subexec (~> 0.2.1)
     mono_logger (1.1.0)
-    multi_json (1.8.2)
+    multi_json (1.8.4)
     multipart-post (1.2.0)
     mysql2 (0.3.11)
     nested_form (0.3.1)
@@ -309,7 +309,7 @@ GEM
       rspec-expectations (~> 2.13.0)
       rspec-mocks (~> 2.13.0)
     safe_yaml (0.8.4)
-    sass (3.2.8)
+    sass (3.2.13)
     sass-rails (3.2.6)
       railties (~> 3.2.0)
       sass (>= 3.1.10)
@@ -395,7 +395,7 @@ DEPENDENCIES
   addressable
   bluepill
   bootstrap-modal-rails
-  bootstrap-sass (~> 2.3.1.0)
+  bootstrap-sass
   capistrano
   capistrano-rbenv
   capybara
@@ -417,7 +417,7 @@ DEPENDENCIES
   hpricot
   i18n_generators
   image_size
-  jquery-rails (~> 2.1.4)
+  jquery-rails
   jquery-ui-rails
   kaminari
   masonry-rails

app/assets/javascripts/application.js.coffee

@@ -11,9 +11,6 @@
 # GO AFTER THE REQUIRES BELOW.
 #
 #= require jquery
-#= require jquery.ui.dialog
-#= require jquery.ui.effect-slide
-#= require jquery.ui.effect-fade
 #= require jquery_ujs
 #= require bootstrap
 #= require bootstrap-tooltip

app/assets/javascripts/wall.js.coffee.erb

@@ -1,7 +1,6 @@
 $( ->
   initialize_masonry()
   initialize_infinitescroll()
-  register_event_for_close_clip_dialog()
 )
 
 window.destroy_infinitescroll = ->
@@ -100,13 +99,6 @@ window.can_scroll = ->
     # documentだとinfiniscroll後、期待するコンテンツの高さが取得できないので'html'にする
     $(window).height() <= $('html').height()
 
-register_event_for_close_clip_dialog = ->
-  $(document).on('hide', '#clip_dialog', ->
-    # その場でフェードアウトするように以前のtop値をそのまま割り当てる
-    top = $('#clip_dialog.modal.fade.in').css('top')
-    $('#clip_dialog.modal.fade').css({ top: top })
-  )
-
 is_visible_dialog = ->
   $('.ui-dialog').is(':visible')
 

app/assets/stylesheets/application.css.scss.erb

@@ -324,3 +324,7 @@ $main_width: 1000px;
     @extend .navbar-fixed-top;
   }
 }
+
+#dialog {
+  @extend .fade;
+}

app/assets/stylesheets/clips.css.scss

@@ -73,10 +73,6 @@ $info_box_width: $clip_width - $image_box_width - $margin;
     margin-left: -($clip_width / 2);
     left: 50%;
 
-    &.fade {
-      @include transition(opacity 0.3s linear);
-    }
-
     .modal-body {
       max-height: none !important;
     }

app/views/base/_dialog.html.slim

@@ -2,7 +2,7 @@
 - body ||= nil
 - id ||= nil
 
-.modal.fade.hide tabindex="-1" id="#{id}"
+.modal.hide tabindex="-1" id="#{id}"
   .modal-header
     button type="button" class="close" data-dismiss="modal" aria-hidden="true"
       | ×

app/views/clips/show.js.coffee

@@ -2,6 +2,7 @@ $clip_dialog = $('#clip_dialog')
 if $clip_dialog.length == 0
   $clip_dialog = $('<div/>')
 else
+  return if $clip_dialog.is(':visible')
   $clip_dialog.removeAttr('id')
   $clip_dialog.remove()
 

app/views/devise/registrations/new.js.coffee

@@ -2,6 +2,7 @@ $dialog = $('#dialog')
 if $dialog.length == 0
   $dialog = $('<div/>')
 else
+  return if $dialog.is(':visible')
   $dialog.removeAttr('id')
   $dialog.remove()