リファクタリング: 共通処理の切り出し

hyoshida · Nov 10, 2013 · 7785ece · 7785ece
1 parent 3d828f9
commit 7785ece
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 105 deletions.
diff --git a/app/assets/javascripts/clips_form.js.coffee.erb b/app/assets/javascripts/clips_form.js.coffee.erb
@@ -14,6 +14,22 @@ $( ->
     }
   })
 
+  $container.on('click', '.box img', ->
+    $('img#selected').removeAttr('id')
+    $(@).attr('id', 'selected')
+
+    url = $(@).attr('src')
+    $('#clip_url').attr('value', url)
+
+    link = $('<a/>')
+    link.attr('src', url)
+    link.attr('id', 'link')
+    link.insertBefore('img#selected')
+
+    $(@).appedTo('#link')
+    link.removeAttr('id')
+  )
+
   $container.on('click', '#selected', ->
     $preview_image = $('<img/>')
     $preview_image.attr('src', $(@).attr('src'))

diff --git a/app/assets/javascripts/wall.js.coffee.erb b/app/assets/javascripts/wall.js.coffee.erb
@@ -1,22 +1,25 @@
-is_available_image_size = (width, height) ->
-  aspect = width / height * 1.0
-  width > <%= Settings.minimum_image_width %> &&
-    height > <%= Settings.minimum_image_height %> &&
-    aspect < <%= Settings.allowed_image_aspect[0] / Settings.allowed_image_aspect[1] * 1.0 %> &&
-    aspect > <%= Settings.allowed_image_aspect[1] / Settings.allowed_image_aspect[0] * 1.0 %>
+$ ->
+  initialize_masonry()
+  initialize_infinitescroll()
+  register_event_for_close_clip_detail_pane()
 
-resize_images = ->
-  $('#container').find('.box img').each( ->
-    width = <%= Settings.thumb_width %>
-    height = Math.floor($(@).height() * (width / $(@).width() * 1.0))
-    if is_available_image_size(width, height)
-      $(@).width(width)
-      $(@).height(height)
-    else
-      $(@).parent().remove()
+window.destroy_infinitescroll = ->
+  $container = $('#container')
+  $container.infinitescroll('destroy')
+  $container.data('infinitescroll', null)
+
+window.initialize_infinitescroll = ->
+  $container = $('#container')
+  $container.infinitescroll(infinitescroll_options(), (newElements) ->
+    $(newElements).css({ opacity: 0 }).imagesLoaded( ->
+      resize_images()
+      $container.masonry('appended', @, true)
+      @.animate({ opacity: 1 })
+    )
   )
+  $container.infinitescroll('bind')
 
-hideContainerToImageLoaded = ->
+window.initialize_masonry = ->
   $('#container').css({ opacity: 0 }).imagesLoaded( ->
     @.removeClass('hidden')
     @.masonry({
@@ -26,35 +29,42 @@ hideContainerToImageLoaded = ->
     @.animate({ opacity: 1 })
   )
 
-prepareInfinitescrollContainer = ->
-  $container = $('#container')
-  $container.infinitescroll(infinitescrollOptions(), (newElements) ->
-    $(newElements).css({ opacity: 0 }).imagesLoaded( ->
-      resize_images()
-      $container.masonry('appended', @, true)
-      @.animate({ opacity: 1 })
-    )
+window.register_event_for_close_clip_detail_pane =->
+  $(document).on('click', '#slide_overlay', ->
+    $('#clip_detail_pane').hide("slide", { direction: "right" }, 400, -> $(@).remove())
+    $('#slide_overlay').hide("fade", null, 400, -> $(@).remove())
+    $('body').removeClass('noscroll')
   )
 
-infinitescrollOptions = ->
+window.resize_images = ->
+  $('#container').find('.box img').each( ->
+    width = <%= Settings.thumb_width %>
+    height = Math.floor($(@).height() * (width / $(@).width() * 1.0))
+    if is_available_image_size(width, height)
+      $(@).width(width)
+      $(@).height(height)
+    else
+      $(@).parent().remove()
+  )
+
+is_available_image_size = (width, height) ->
+  aspect = width / height * 1.0
+  width > <%= Settings.minimum_image_width %> &&
+    height > <%= Settings.minimum_image_height %> &&
+    aspect < <%= Settings.allowed_image_aspect[0] / Settings.allowed_image_aspect[1] * 1.0 %> &&
+    aspect > <%= Settings.allowed_image_aspect[1] / Settings.allowed_image_aspect[0] * 1.0 %>
+
+infinitescroll_options = ->
   {
-    navSelector: '#page-nav',     # ページのナビゲーションを選択 
+    navSelector: '#page-nav',     # ページのナビゲーションを選択
     nextSelector: '#page-nav a',  # 次ページへのリンク
     itemSelector: '.box',         # 持ってくる要素のclass
     loading: {
       finishedMsg: 'image was finished.',   # 次のページがない場合に表示するテキスト
       img: '<%= image_path 'loader.gif' %>' # ローディング画像のパス
+    },
+    state: {
+      isDestroyed: false,
+      isDone: false
     }
   }
-
-registerEventForCloseClipDetailPane =->
-  $(document).on('click', '#slide_overlay', ->
-    $('#clip_detail_pane').hide("slide", { direction: "right" }, 400, -> $(@).remove())
-    $('#slide_overlay').hide("fade", null, 400, -> $(@).remove())
-    $('body').removeClass('noscroll')
-  )
-
-$ ->
-  hideContainerToImageLoaded()
-  prepareInfinitescrollContainer()
-  registerEventForCloseClipDetailPane()
diff --git a/app/views/clips/get_image_tags.js.coffee b/app/views/clips/get_image_tags.js.coffee
@@ -1,57 +1,7 @@
-is_available_image_size = (width, height) ->
-  aspect = width / height * 1.0
-  width > <%= Settings.minimum_image_width %> &&
-    height > <%= Settings.minimum_image_height %> &&
-    aspect < <%= Settings.allowed_image_aspect[0] / Settings.allowed_image_aspect[1] * 1.0 %> &&
-    aspect > <%= Settings.allowed_image_aspect[1] / Settings.allowed_image_aspect[0] * 1.0 %>
-
-resize_images = ->
-  $('#container').find('.box img').each( ->
-    width = <%= Settings.thumb_width %>
-    height = Math.floor($(@).height() * (width / $(@).width() * 1.0))
-    if is_available_image_size(width, height)
-      $(@).width(width)
-      $(@).height(height)
-    else
-      $(@).parent().remove()
-  )
-
-infinitescroll_options = ->
-  {
-    navSelector: '#page-nav',
-    nextSelector: '#page-nav a',
-    itemSelector: '.box',
-    loading: {
-      finishedMsg: 'image was finished.',
-      img: '<%= asset_path 'loader.gif' %>'
-    },
-    state: {
-      isDestroyed: false,
-      isDone: false
-    }
-  }
-
-destroy_infinitescroll = ->
-  $container = $('#container')
-  $container.infinitescroll('destroy')
-  $container.data('infinitescroll', null)
-
-initialize_infinitescroll = ->
-  $container = $('#container')
-  $container.infinitescroll(infinitescroll_options(), (newElements) ->
-    $(newElements).css({ opacity: 0 }).imagesLoaded( ->
-      resize_images()
-      $container.masonry('appended', @, true)
-      @.animate({ opacity: 1 })
-    )
-  )
-  $container.infinitescroll('bind')
-
-$container = $('#container')
-
 # 古い無限スクロールのメタデータを破棄
 destroy_infinitescroll()
 
+$container = $('#container')
 $container.html('&nbsp;')
 $container.attr('style', 'position: relative;')
 
@@ -81,20 +31,4 @@ $container.css({ opacity: 0 }).imagesLoaded( ->
   initialize_infinitescroll()
 )
 
-$container.on('click', '.box img', ->
-  $('img#selected').removeAttr('id')
-  $(@).attr('id', 'selected')
-
-  url = $(@).attr('src')
-  $('#clip_url').attr('value', url)
-
-  link = $('<a/>')
-  link.attr('src', url)
-  link.attr('id', 'link')
-  link.insertBefore('img#selected')
-
-  $(@).appedTo('#link')
-  link.removeAttr('id')
-)
-
 $('#clip_origin_url').attr('value', '<%= @clip.origin_url %>')