Edit and delete media folders

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

@@ -1,27 +1,38 @@
+$(document).on 'click', '.organize-switch', (e) ->
+  $items = $('.gallery .infinite-scroll .item')
+  disabled = $items.draggable('option', 'disabled')
+  if disabled 
+    $(this).addClass('button-success')
+    $(this).text($(this).attr('data-done-organizing'))
+    $(this).prepend('<i class="icon icon-random"></i>')
+  else 
+    $(this).removeClass('button-success')
+    $(this).text($(this).attr('data-organize-images'))
+    $(this).prepend('<i class="icon icon-random"></i>')
+  $items.draggable('option', 'disabled', !disabled)
+  e.preventDefault()
+
 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({
+      $.ajax
         url: url,
         type: 'PUT',
         data: {
           photo_id: photo_id
         },
         dataType: 'json',
-        success: (result) ->
-          console.log result
-      })
+        success: (result) =>
+          $(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)
 
     over: (event, ui) ->
       $(ui.draggable).addClass('dropping')
@@ -34,7 +45,8 @@ ready = ->
   )
 
   $('.gallery .infinite-scroll .item').draggable(
-    revert: 'invalid'
+    revert: 'invalid',
+    disabled: true
   )
 
 $(document).on 'turbolinks:load', ready

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

@@ -30,13 +30,10 @@ Trix.config.blockAttributes = $.extend Trix.config.blockAttributes, {
 
 class Spina.TrixAttachment
   @photoSelect: (e) ->
-    console.log 'hi'
     editor_id = $(this).closest('trix-toolbar').data('trix-editor-id')
     $.get("<%= Spina::Engine.routes.url_helpers.trix_select_admin_photos_path('') %>/#{editor_id}")
 
   @photoInsert: (e, url) ->
-    length = this.editor.getDocument().toString().length
-    this.editor.setSelectedRange(length - 1)
     this.editor.insertHTML "<img src='#{ url }' />"
 
 document.addEventListener 'trix-file-accept', (e) ->

app/assets/stylesheets/spina/_gallery.sass

@@ -87,16 +87,19 @@
         word-break: break-word
         z-index: 3
 
-    // &:hover
-    //   .overlay
-    //     background: rgba(0, 0, 0, 0.5)
+    &.ui-draggable:not(.ui-draggable-disabled):hover
+      cursor: move
 
-    //     a
-    //       opacity: 1
-    //       transform: translateY(0%)
+    &.ui-draggable-disabled:hover
+      .overlay
+        background: rgba(0, 0, 0, 0.5)
 
-    //     .photo-name
-    //       transform: translateY(0%)
+        a
+          opacity: 1
+          transform: translateY(0%)
+
+        .photo-name
+          transform: translateY(0%)
 
     &.dropping:not(.media-folder)
       transform: scale(0.8)
@@ -294,6 +297,7 @@
       transform: rotate(6deg)
 
 .media-folder-thumbnail
+  height: 70px
   position: relative
   transform-origin: center bottom
   transition: transform .4s ease
@@ -343,4 +347,8 @@
 .media-folder-name
   color: #4d4f81
   font-size: 14px
-  font-weight: 600
+  font-weight: 600
+  height: 16px
+  line-height: 16px
+  margin-top: 6px
+  text-align: center

app/assets/stylesheets/spina/_trix.sass

@@ -4,14 +4,17 @@ trix-toolbar
   .button-group
     margin-right: 10px
 
-  .button.active
+  .button.trix-active
     background: $primary-color
     color: #fff
 
-  .link_url_fields input
+  .trix-dialog__link-fields
+    clear: both
+
+  .trix-dialog__link-fields input
     margin-top: 6px
 
-  .link_url_fields .button-group input
+  .trix-dialog__link-fields .button-group input
     margin-top: 10px
 
 trix-editor

app/controllers/spina/admin/media_folders_controller.rb

@@ -0,0 +1,28 @@
+module Spina
+  module Admin
+    class MediaFoldersController < AdminController
+
+      def new
+        @media_folder = MediaFolder.new
+      end
+
+      def create
+        @media_folder = MediaFolder.new(media_folder_params)
+        @media_folder.save
+        redirect_to spina.admin_photos_path
+      end
+
+      def destroy
+        @media_folder = MediaFolder.find(params[:id])
+        @media_folder.destroy
+        redirect_to spina.admin_photos_path
+      end
+
+      private
+
+        def media_folder_params
+          params.require(:media_folder).permit(:name)
+        end
+    end
+  end
+end

app/views/layouts/spina/admin/media_library.html.haml

@@ -1,5 +1,8 @@
 - content_for :application do
   %header#header
+    #header_actions
+      = yield(:header_actions)
+
     = render partial: 'spina/admin/shared/breadcrumbs'
 
     %nav#secondary.tabs

app/views/spina/admin/media_folders/_form.html.haml

@@ -0,0 +1,14 @@
+.modal
+  %header
+    = link_to '#', data: {dismiss: "modal"} do
+      = icon('cross')
+    %h3=t 'spina.photos.new_folder'
+
+  = form_for [spina, :admin, @media_folder] do |f|
+    %section
+      = f.text_field :name, placeholder: Spina::MediaFolder.human_attribute_name(:name)
+    %footer
+      = link_to t('spina.cancel'), '#', data: {dismiss: 'modal'}
+      = button_tag type: :submit, class: 'primary' do
+        %i.icon.icon-plus{style: 'margin-right: 4px'}
+        =t 'spina.photos.new_folder'

app/views/spina/admin/media_folders/new.js.erb

@@ -0,0 +1 @@
+$("<%=j render 'form' %>").modal()

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

@@ -1,3 +1,13 @@
+- content_for(:header_actions) do
+  - if @media_folders.any?
+    = link_to '#', class: 'button organize-switch', data: {organize_images: t('spina.photos.organize'), done_organizing: t('spina.photos.done_organizing')} do
+      = icon('random')
+      = t('spina.photos.organize')
+
+  = link_to spina.new_admin_media_folder_path, class: 'button button-primary', style: 'margin-right: 0; margin-left: 4px', data: {remote: true} do
+    = icon('plus')
+    =t 'spina.photos.new_folder'
+
 .gallery-container
   .gallery
     .item
@@ -11,6 +21,8 @@
         .media-folder-thumbnail{data: {badge: media_folder.photos.count}}
           - if media_folder.photos.any?
             = image_tag media_folder.photos.last.file.thumb
+          - else
+            = image_tag 'spina/media_folder_placeholder.png'
           .media-folder-shadow
         .media-folder-name= media_folder.name
 

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

@@ -1,3 +1,6 @@
+- content_for(:header_actions) do
+  = link_to t('spina.photos.delete_folder'), spina.admin_media_folder_path(@media_folder), class: 'button button-danger button-link', style: "margin-right: 0", data: {method: :delete, confirm: t('spina.delete_confirmation', subject: @media_folder.name)}
+
 .gallery-container
   .gallery
     .item

app/views/spina/admin/shared/_rich_text_field.html.haml

@@ -18,16 +18,16 @@
 
     .button-group.pull-left
       %button.button.button-small{ type: 'button', tabindex: -1, title: 'h1', data: { trix_attribute: 'heading1' }} H1
-      %button.button.button-small{ type: 'button', tabindex: -1, title: 'h1', data: { trix_attribute: 'heading2' }} H2
-      %button.button.button-small{ type: 'button', tabindex: -1, title: 'h2', data: { trix_attribute: 'heading3' }} H3
-      %button.button.button-small{ type: 'button', tabindex: -1, title: 'h3', data: { trix_attribute: 'heading4' }} H4
-      %button.button.button-small{ type: 'button', tabindex: -1, title: 'h4', data: { trix_attribute: 'heading5' }} H5
-      %button.button.button-small{ type: 'button', tabindex: -1, title: 'h5', data: { trix_attribute: 'heading6' }} H6
+      %button.button.button-small{ type: 'button', tabindex: -1, title: 'h2', data: { trix_attribute: 'heading2' }} H2
+      %button.button.button-small{ type: 'button', tabindex: -1, title: 'h3', data: { trix_attribute: 'heading3' }} H3
+      %button.button.button-small{ type: 'button', tabindex: -1, title: 'h4', data: { trix_attribute: 'heading4' }} H4
+      %button.button.button-small{ type: 'button', tabindex: -1, title: 'h5', data: { trix_attribute: 'heading5' }} H5
+      %button.button.button-small{ type: 'button', tabindex: -1, title: 'h6', data: { trix_attribute: 'heading6' }} H6
 
-  .dialogs
-    .dialog.link_dialog{ data: { trix_attribute: 'href', trix_dialog: 'href'}}
-      .link_url_fields
-        %input{type: 'text', name: 'href', placeholder: 'Enter a URL…', required: true}
+  .trix-dialogs{data: {trix_dialogs: true}}
+    .trix-dialog.trix-dialog--link{ data: { trix_dialog_attribute: 'href', trix_dialog: 'href'}}
+      .trix-dialog__link-fields
+        %input.trix-input.trix-input--dialog{type: 'text', name: 'href', placeholder: 'Enter a URL…', required: true, data: {trix_input: true}}
         .button-group
           %input.button{type: 'button', tabindex: -1, value: 'Link', data: { trix_method: 'setAttribute'}}
           %input.button{type: 'button', tabindex: -1, value: 'Unlink', data: { trix_method: 'removeAttribute'}}

config/initializers/assets.rb

@@ -1 +1 @@
-Rails.application.config.assets.precompile += %w(spina/spina.png spina/admin/spina.png spina/spina_small.png)
+Rails.application.config.assets.precompile += %w(spina/spina.png spina/admin/spina.png spina/spina_small.png spina/media_folder_placeholder.png)

config/locales/en.yml

@@ -86,6 +86,10 @@ en:
       link: "URL of your image:"
       cannot_be_created: "Image could not be processed:"
       upload_image: "Upload an image"
+      organize: Organize images
+      done_organizing: Done organizing
+      new_folder: New folder
+      delete_folder: Delete folder
 
     wysiwyg:
       paragraph: Paragraph
@@ -186,6 +190,9 @@ en:
         ancestry: Parent page
         no_parent: No parent
 
+      spina/media_folder:
+        name: Name
+
       spina/navigation:
         label: Label
         auto_add_pages: Automatically add pages

config/routes.rb

@@ -45,6 +45,8 @@
       end
     end
 
+    resources :media_folders
+
     resources :photos do
       collection do
         get 'trix_select/:object_id' => 'photos#trix_select', as: :trix_select