From cae5b4accca2f880bbd4a5ffae265f78c689075c Mon Sep 17 00:00:00 2001
From: hukl <contact@smyck.org>
Date: Tue, 1 Sep 2009 23:13:45 +0200
Subject: Added javascript goodness to add and sort and drag and drop images on
 pages

---
 app/controllers/pages_controller.rb   | 14 ++++++++++++++
 app/views/nodes/edit.html.erb         | 23 ++++++++++++++++++----
 app/views/nodes/show.html.erb         |  2 +-
 config/routes.rb                      |  2 +-
 public/javascripts/admin_interface.js | 36 +++++++++++++++++++++++++++++++++++
 public/stylesheets/admin.css          | 28 ++++++++++++++++++++++++++-
 6 files changed, 98 insertions(+), 7 deletions(-)

diff --git a/app/controllers/pages_controller.rb b/app/controllers/pages_controller.rb
index e298265..4b3b541 100644
--- a/app/controllers/pages_controller.rb
+++ b/app/controllers/pages_controller.rb
@@ -12,4 +12,18 @@ class PagesController < ApplicationController
     end
     
   end
+  
+  
+  def sort_images
+    page = Page.find(params[:id])
+    
+    page.related_assets.destroy_all
+    
+    params[:images].each_with_index do |id, index|
+      asset = Asset.find(id)
+      page.related_assets.create(:asset_id => asset.id, :position => index+1)
+    end
+    
+    render :nothing => true, :status => 200
+  end
 end
diff --git a/app/views/nodes/edit.html.erb b/app/views/nodes/edit.html.erb
index 00815b7..a8138c2 100644
--- a/app/views/nodes/edit.html.erb
+++ b/app/views/nodes/edit.html.erb
@@ -36,10 +36,15 @@
       </tr>
       <tr>
         <td class="description">Images</td>
-        <td style="height: 200px">
-          <% @draft.assets.images.each do |image| %>
-            <%= image_tag(image.upload.url(:thumb)) %>
-          <% end %>
+        <td> 
+          <ul id="image_box" rel="<%= @draft.id %>">
+            <% @draft.assets.images.each do |image| %>
+              <li rel="images_<%= image.id %>">
+                <%= image_tag(image.upload.url(:thumb)) %>
+              </li>
+            <% end %>
+          </ul>
+          add image
         </td>
       </tr>
     </table>
@@ -69,4 +74,14 @@
   </table>
   <% end %>
 <% end %>
+</div>
+
+
+
+<div id="asset_toolbox">
+  <ul>
+    <% Asset.images.each do |image| %>
+    <li rel="images_<%= image.id %>"><%= image_tag(image.upload.url(:thumb)) %></li>
+    <% end %>
+  </ul>
 </div>
\ No newline at end of file
diff --git a/app/views/nodes/show.html.erb b/app/views/nodes/show.html.erb
index 8aaedc5..15547f9 100644
--- a/app/views/nodes/show.html.erb
+++ b/app/views/nodes/show.html.erb
@@ -1,5 +1,5 @@
 <% content_for :subnavigation do %>
-  <%= link_to 'Edit', edit_node_path(@node), :id => 'button', :class => "unselected" %>
+  <%= link_to 'Edit', edit_node_path(@node), :class => "unselected" %>
   <%= link_to 'Preview', preview_page_path(@page) %>
   <%= link_to 'Revisions', revision_path(params[:id]) %>  
 <% end %>
diff --git a/config/routes.rb b/config/routes.rb
index f94b61c..b8c877b 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -13,7 +13,7 @@ ActionController::Routing::Routes.draw do |map|
   map.resources :occurrences
   map.resources :events
   map.resources :revisions, :member => {:diff => :post, :restore => :put}
-  map.resources :pages,     :member => {:preview => :get}
+  map.resources :pages,     :member => {:preview => :get, :sort_images => :put}
   map.resources :nodes,     :member => {:publish => :put, :unlock => :put}
   map.logout    '/logout',  :controller => 'sessions', :action => 'destroy'
   map.login     '/login',   :controller => 'sessions', :action => 'new'
diff --git a/public/javascripts/admin_interface.js b/public/javascripts/admin_interface.js
index ce971a4..977e42a 100644
--- a/public/javascripts/admin_interface.js
+++ b/public/javascripts/admin_interface.js
@@ -4,6 +4,7 @@ $(document).ready(function () {
   meta_data.initialize();
   menu_item_sorter.initialize();
   
+  
   jQuery.ajaxSetup({ 
     'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}
   })
@@ -27,6 +28,7 @@ meta_data = {
 
       if ($("#button").attr("class") == "unselected") {
         $("#button").attr("class", "selected");
+        image_interface.initialize(); 
       }
       else {
         $("#button").attr("class", "unselected");
@@ -110,5 +112,39 @@ menu_item_sorter = {
     $(".ui-state-highlight").html("<td colspan='100%'></td>");
   }
 }
+
+image_interface = {
+  initialize : function() {
+    $("ul#image_box").sortable({
+      revert  : true,
+      stop    : function(event, ui) {
+        $.ajax({
+          type : "POST",
+          url  : "/pages/" + $("ul#image_box").attr("rel") + "/sort_images",
+          dataType : "json",
+          data : $("ul#image_box").sortable("serialize", {attribute : "rel"}) + "&_method=put",
+          success : function() {}
+        });
+      }
+    });
+    
+    $("ul#image_box").droppable({
+      out : function(event, ui) {
+        $(ui.draggable).bind("mouseup", function() {$(this).remove()})
+      }
+    });
+    
+    $("div#asset_toolbox ul li").draggable({
+      connectToSortable : 'ul#image_box',
+      helper : 'clone',
+      revert : 'invalid',
+      stop   : function() {
+        
+      }
+    });
+    
+    $("ul, li").disableSelection();
+  }
+}
       
 
diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index a2da502..d414b94 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -355,4 +355,30 @@ table#content th.content {
 
 .ui-state-highlight td{
   height: 20px;
-}
\ No newline at end of file
+}
+
+#metadata ul#image_box {
+  margin: 0;
+  padding-left: 0;
+  height: 100px;
+  width: 690px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  border: 1px solid #989898;
+}
+
+#metadata ul#image_box li {
+  float: left;
+  list-style-type: none;
+  margin: 5px;
+}
+
+div#asset_toolbox {
+  position: absolute;
+  top: 40px;
+  left: 800px;
+}
+
+div#asset_toolbox ul li {
+  list-style-type: none;
+}
-- 
cgit v1.3