Droppable

app/assets/javascripts/spina/admin/application.coffee.erb

@@ -30,6 +30,7 @@
 #= require ./uploads
 #= require ./navigation
 #= require ./notifications
+#= require ./media_gallery
 
 #= require ./account
 #= require ./confirm_delete

app/assets/javascripts/spina/admin/media_gallery.coffee

@@ -0,0 +1,40 @@
+ready = ->
+  $('.media-folder').droppable(
+    drop: (event, ui) ->
+      $(ui.draggable).addClass('dropped').fadeOut()
+      photoCount = parseInt($(this).find('.media-folder-thumbnail').attr('data-badge'))
+      imgSrc = $(ui.draggable).find('img').attr('src')
+
+      $(this).removeClass('dropping')
+      $(this).find('.media-folder-thumbnail').attr('data-badge', photoCount + 1)
+      $(this).find('.media-folder-thumbnail img').attr('src', imgSrc)
+
+      url = $(this).attr('data-add-to-media-folder-url')
+      photo_id = $(ui.draggable).find('input[type="radio"]').val()
+
+      $.ajax({
+        url: url,
+        type: 'PUT',
+        data: {
+          photo_id: photo_id
+        },
+        dataType: 'json',
+        success: (result) ->
+          console.log result
+      })
+
+    over: (event, ui) ->
+      $(ui.draggable).addClass('dropping')
+
+      $(this).addClass('dropping')
+    out: (event, ui) ->
+      $(ui.draggable).removeClass('dropping')
+
+      $(this).removeClass('dropping')
+  )
+
+  $('.gallery .infinite-scroll .item').draggable(
+    revert: 'invalid'
+  )
+
+$(document).on 'turbolinks:load', ready

app/assets/stylesheets/spina/_gallery.sass

@@ -19,6 +19,7 @@
     margin: 8px
     overflow: hidden
     position: relative
+    transition: transform .3s ease
     width: 150px
     z-index: 3
 
@@ -86,16 +87,22 @@
         word-break: break-word
         z-index: 3
 
-    &:hover
-      .overlay
-        background: rgba(0, 0, 0, 0.5)
+    // &:hover
+    //   .overlay
+    //     background: rgba(0, 0, 0, 0.5)
 
-        a
-          opacity: 1
-          transform: translateY(0%)
+    //     a
+    //       opacity: 1
+    //       transform: translateY(0%)
 
-        .photo-name
-          transform: translateY(0%)
+    //     .photo-name
+    //       transform: translateY(0%)
+
+    &.dropping:not(.media-folder)
+      transform: scale(0.8)
+
+    &.dropped:not(.media-folder)
+      transform: scale(0)
 
     form
       height: 100%
@@ -276,7 +283,7 @@
   justify-content: center
   line-height: 20px
 
-  &:hover
+  &:hover, &.dropping
     .media-folder-thumbnail
       transform: rotate(-4deg)
     .media-folder-thumbnail:after

app/controllers/spina/admin/photos_controller.rb

@@ -19,6 +19,12 @@ def media_folder
         @photos = @media_folder.photos.sorted.page(params[:page])
       end
 
+      def add_to_media_folder
+        @media_folder = MediaFolder.find(params[:id])
+        @media_folder.photos << Photo.find(params[:photo_id])
+        render json: @media_folder
+      end
+
       def media_library
         redirect_to spina.admin_photos_path
       end
@@ -32,7 +38,7 @@ def create
       def destroy
         @photo = Photo.find(params[:id])
         @photo.destroy
-        redirect_to spina.admin_photos_url
+        redirect_back fallback_location: spina.admin_photos_url
       end
 
       def photo_select

app/views/spina/admin/photos/index.html.haml

@@ -7,7 +7,7 @@
         = f.file_field :files, multiple: true, data: {customfileinput: true}
 
     - @media_folders.each do |media_folder|
-      = link_to media_folder_admin_photos_path(media_folder), class: 'item media-folder' do
+      = link_to media_folder_admin_photos_path(media_folder), class: 'item media-folder', data: {add_to_media_folder_url: add_to_media_folder_admin_photos_url(media_folder)} do
         .media-folder-thumbnail{data: {badge: media_folder.photos.count}}
           - if media_folder.photos.any?
             = image_tag media_folder.photos.last.file.thumb

config/routes.rb

@@ -54,6 +54,7 @@
         post 'insert_photo/:page_part_id' => 'photos#insert_photo', as: :insert_photo
         post 'insert_photo_collection/:page_part_id' => 'photos#insert_photo_collection', as: :insert_photo_collection
         get 'folder/:id' => 'photos#media_folder', as: :media_folder
+        put 'folder/:id' => 'photos#add_to_media_folder', as: :add_to_media_folder
       end
     end
   end