Allow admin to sort gallery photos

Issue #42 Use jQuery UI sortable and acts_as_list to make gallery photos
sortable

![img](http://cl.ly/image/463f3A1Q3i3N/Screen%20Recording%202015-01-22%20at%2005.00%20pm.gif)

app/controllers/admin/galleries_controller.rb

@@ -1,11 +1,12 @@
 class Admin::GalleriesController < ApplicationController
-
   before_filter :check_login
-
+  layout "admin/responsive"
+  respond_to :html, :json
+
   # GET /galleries/1
   # GET /galleries/1.xml
   def show
-    @gallery = Gallery.find(params[:id])
+    @gallery = current_website.galleries.find(params[:id])
 
     respond_to do |format|
       format.html # show.html.erb
@@ -26,8 +27,8 @@ def new
 
   # GET /galleries/1/edit
   def edit
-    @gallery = Gallery.find_or_create_by_content_item_id(params[:id])
-    render :layout => false #if request.xhr?
+    @gallery = current_website.galleries.find(params[:id])
+    @page = @gallery.content_item.page
   end
 
   # POST /galleries
@@ -45,20 +46,14 @@ def create
         format.xml  { render :xml => @gallery.errors, :status => :unprocessable_entity }
       end
     end
-
   end
 
   # PUT /galleries/1
   # PUT /galleries/1.xml
   def update
     @gallery = Gallery.find(params[:id])
     @gallery.update(gallery_params)
-    responds_to_parent do
-      render :update do |page|
-        page.replace_html "gallery_title", @gallery.title
-        page.visual_effect :fade, "edit_gallery_form"
-      end
-    end
+    respond_with :admin, @gallery, location: edit_admin_gallery_path(@gallery)
   end
 
   # DELETE /galleries/1

app/controllers/admin/gallery_photos_controller.rb

@@ -4,7 +4,8 @@ class Admin::GalleryPhotosController < ApplicationController
   # GET /gallery_photos
   # GET /gallery_photos.xml
   def index
-    @gallery_photos = Gallery.find(params[:gallery_id]).gallery_photos
+    @gallery_photos = Gallery.find(params[:gallery_id]).
+      gallery_photos.order("position")
 
     respond_to do |format|
       format.html {
@@ -13,6 +14,14 @@ def index
       format.xml  { render :xml => @gallery_photos }
     end
   end
+  # POST /admin/gallery_photos/sort?gallery_id=1
+  def sort
+    gallery_photos = Gallery.find(params[:gallery_id]).gallery_photos
+    params[:gallery_photo].each_with_index do |id, index|
+      gallery_photos.update_all({position: index + 1}, {id: id})
+    end
+    render nothing: true
+  end
 
   # GET /gallery_photos/1
   # GET /gallery_photos/1.xml

app/models/gallery.rb

@@ -28,7 +28,8 @@ def set_default_liquid_template
   end
 
   def to_liquid
-    { "id" => self.id.to_s, "title" => self.title.to_s, "images" => self.gallery_photos }
+    { "id" => self.id.to_s, "title" => self.title.to_s,
+      "images" => self.gallery_photos.order("position") }
   end
 
   def large_size

app/models/gallery_photo.rb

@@ -15,6 +15,8 @@ class GalleryPhoto < ActiveRecord::Base
 
   process_in_background :photo, only_process: [:large]
 
+  acts_as_list
+
   def slug
     if self.created_at && self.created_at <= Date.parse("2011-08-09")
       self.photo_file_name

app/views/admin/content_items/_content_item.html.erb

@@ -48,12 +48,12 @@
     </div>
   <%
   when "gallery" then %>
+      <% gallery = Gallery.find_or_create_by_content_item_id(content_item.id) %>
       <div id="content_item_<%= content_item.id %>"  class="content_item cms-gallery standoutcms_unselected" style="position: relative; overflow: hidden;  min-height: 32px;" 
         onclick="parent.select_item(this.id)" onmouseover="show_delete_button(this);" 
         onmouseout="hide_delete_button(this)" 
-        ondblclick="parent.load_gallery('<%= content_item.id %>')">
-      	<%= delete_content_item(content_item.id) %>
-        <% gallery = Gallery.find_or_create_by_content_item_id(content_item.id) %>
+        ondblclick="this.style.cursor = 'progress'; parent.location.pathname = '/admin/galleries/<%= gallery.id %>/edit'">
+       <%= delete_content_item(content_item.id) %>
         <%= raw gallery.content %>
       </div>
     <% else %>

app/views/admin/galleries/edit.html.erb

@@ -1,9 +1,59 @@
+<%= link_to admin_page_path(@page) do %>
+  &larr; Tillbaka till <%= @page.title %>
+<% end %>
+
+<script>
+  $(function () {
+    new GalleryPhotoSorter('#gallery_photos');
+    function GalleryPhotoSorter(selector) {
+      this.gallery = $(selector);
+
+      this.gallery.sortable({
+        handle: '.handle',
+        placeholder: 'GalleryItem placeholder',
+        update: updateGalleryPhoto
+      });
+
+      function updateGalleryPhoto() {
+        $.post($(this).data('update-url'), $(this).sortable('serialize'))
+      }
+    }
+  });
+</script>
+
+<style type="text/css">
+  #gallery_photos {
+    overflow: hidden;
+  }
+  #gallery_photos .handle {
+    cursor: move;
+  }
+  .GalleryItem {
+    float: left;
+  }
+  .GalleryItem.photo {
+    height: 150px;
+    width: 110px;
+    margin: 6px;
+    padding: 3px;
+  }
+  .GalleryItem.placeholder {
+    width: 100px;
+    height: 100px;
+    margin: 7px 17px 57px 7px;
+    padding: 0;
+    border: 2px dashed #444;
+    border-radius: 4px;
+    background: #ddd;
+  }
+</style>
+
 <h1><span id="gallery_title"><%= @gallery.title || t('gallery') %></span>
 <%= link_to_function image_tag("edit.png"), "$('#edit_gallery_form').toggle(); $('#gallery_photos').toggle();" %></h1>
 <%= link_to_function image_tag("close_window.png", :style => "position: absolute; top: 0px; right: 0px;"), "frames['edit'].load_editables_and_menus(); $('#overlay-container').hide();" %>
 
 <div id="edit_gallery_form" style="display: none;">
-<%= form_for([:admin, @gallery], :html => {:method => :put, :multipart => true, :target => "gallery_upload_iframe"}) do |f| %>
+<%= form_for([:admin, @gallery], html: {method: "put", multipart: true}) do |f| %>
 
 <p>
   <%= f.label :title, t('title') %><br />
@@ -12,7 +62,7 @@
 
 <p>
   <%= f.label :liquid %><br />
-  <%= f.text_area :liquid, :rows => 5 %>
+  <%= f.text_area :liquid, :rows => 5, "ng-non-bindable" => "true" %>
 </p>
 
 <p>
@@ -29,7 +79,7 @@
   <%= t('templates') %>:<br />
   <% Gallery::STYLES.each do |style| %>
   <a href="#" class="gallery-style-selector" onclick="$('#gallery_liquid').val(($(this).next('textarea').val())); return false;"><%= style.titleize %></a>
-  <textarea style="display: none;"><%= File.read("#{Rails.root}/lib/liquid_templates/galleries/#{style}.liquid").to_s %></textarea>
+  <textarea style="display: none;" ng-non-bindable=""><%= File.read("#{Rails.root}/lib/liquid_templates/galleries/#{style}.liquid").to_s %></textarea>
   <% end %>
 </p>
 
@@ -50,11 +100,8 @@
   <%= f.submit t('upload') %>
 <% end %>
 
-
-
-
-<div id="admin-gallery-photos">
-  <%= render :partial => "admin/gallery_photos/photo", :collection => @gallery.gallery_photos %>
+<div id="gallery_photos" data-update-url="<%= sort_admin_gallery_photos_path(gallery_id: @gallery) %>">
+  <%= render partial: "admin/gallery_photos/photo", collection: @gallery.gallery_photos.order("position") %>
 </div>
 
 <!-- this receives the upload of oversight images -->

app/views/admin/gallery_photos/_photo.html.erb

@@ -1,10 +1,10 @@
-<div id="gallery_photo_<%= photo.id %>" style="position: relative; float: left; height: 150px; width: 110px; margin: 6px; overflow: hidden; padding: 3px; background: white;">
+<div id="gallery_photo_<%= photo.id %>" style="position: relative; overflow: hidden; background: white;" class="GalleryItem photo">
   <%= link_to image_tag('delete.png'), [:admin, photo], { :method => :delete, :remote => true, :style => 'border: 0; position: absolute; right: 0; top: 0;', :class => 'delete-and-remove-parent' } %>
-  <%= image_tag photo.photo.url(:thumb), :style => "width: 100px; border: 1px #333 solid;" rescue nil %>
+  <%= image_tag photo.photo.url(:thumb), :style => "width: 100px; border: 1px #333 solid; min-height: 50px", class: "handle" rescue nil %>
   <%= form_for([:admin, photo]) do |f| %>
     <span class='in_place_edit_text'><%= photo.caption %></span>
     <span class='in_place_edit_field' style="display: none;">
       <%= f.text_field :caption, :value => photo.caption %>
     </span>
   <% end %>
-</div>
+</div>

app/views/layouts/admin/responsive.html.slim

@@ -0,0 +1,15 @@
+doctype html
+html ng-app="app"
+  head
+    meta http-equiv="content-type" content="text/html;charset=UTF-8"
+    title Standout CMS [#{Version.current}]
+    = stylesheet_link_tag 'admin', 'custom_data_lists', 'jquery.Jcrop.css', 'ui-lightness/jquery-ui-1.8.10.custom.css'
+    = javascript_include_tag :application
+    = csrf_meta_tag
+    = yield(:head)
+  body(style="padding-left: 0")
+    #wrapper
+      = render partial: 'shared/menu', locals: { menu_selection: 'none' }
+      = render partial: 'pages/menu' if params[:controller] == 'pages'
+      #viewport(style="margin:0 auto;max-width:1200px;padding:20px")
+        = yield

config/routes.rb

@@ -109,7 +109,9 @@
         resources :page_templates
       end
       resources :galleries
-      resources :gallery_photos
+      resources :gallery_photos do
+        post :sort, on: :collection
+      end
       resources :orders do
         resources :payments
       end

lib/liquid_templates/galleries/default.liquid

@@ -14,4 +14,4 @@ Include the following files in your template:
  - http://cms.standout.se/javascripts/gallery/gallery.min.js
  - http://cms.standout.se/javascripts/gallery/gallery.css
 
--->
+-->