added reordering of images

app/assets/javascripts/gallery.js

@@ -34,6 +34,10 @@ $(function () {
 $(function() {
 	var $container = $('.gallery'),
 		$containerData = $container.data();
+	$container.data("order-edit","0");
+	$container.sortable({
+		 disabled: true
+	});
 	$container.imagesLoaded(function(){
 		var $albumname = $('.albumname'),
 			$img = $('.rgalbum img');
@@ -146,11 +150,11 @@ $(function() {
 	}
 
 	if($("#imgholder").length){
-    $('.open').pageslide({
+	    $('.open').pageslide({
-      loadComplete: function(instance,elem) {
+	      loadComplete: function(instance,elem) {
-        bindEvent(instance,elem);
+	        bindEvent(instance,elem);
-      }
+	      }
-    })
+	    })
 	}
 	
 	
@@ -215,6 +219,32 @@ $(function() {
 		$('.rgalbum').removeClass('active');
 		$('.deletephoto, .deselect, .addtags').removeClass('hide')
 	});
+	var images_order = [];
+	$("#edit-order-btn").on("click",function(){
+		var el = $(this);
+		if($container.data("order-edit") == "0"){
+			$container.sortable("enable");
+			$(".order-edit-notification").slideDown();
+			images_order = $container.sortable( "toArray", { attribute: "data-image-id" });
+			$container.data("order-edit","1");
+			el.text("Save Order");
+		}else{
+			var temp = $container.sortable( "toArray", { attribute: "data-image-id" });
+			if(images_order.toString() != temp.toString()){
+				$.ajax({
+					url : "/admin/galleries/order",
+					data : {"imageids" : temp },
+					type : "post",
+					dataType : "json"
+				})
+			}
+			$(".order-edit-notification").slideUp();
+			$container.sortable("disable");
+			$container.data("order-edit","0");
+			el.text("Edit Order");
+		}
+		return false;
+	})
 
     // 
 	$('.add-imgs').on({
@@ -223,11 +253,13 @@ $(function() {
 				if(!$(this).is(':hidden')) {
 					$('.add-imgs').html('<i class="icons-cross-2"></i> Close panel');
 					$('.rgbody').stop(true, false).animate({'padding-bottom': 280}, 300);
+					$("#edit-order-btn").hide();
 				} else {
 					$('.add-imgs').html('<i class="icons-plus"></i> Add Image');
 					$('.files').empty()
 					$('#file-list').checkListLength();
 					$('.rgbody').stop(true, false).animate({'padding-bottom': 0}, 300);
+					$("#edit-order-btn").show();
 					fetchNewImages();
 				};
 			});

app/assets/javascripts/galleryAPI.js.erb

@@ -17,7 +17,7 @@ var galleryAPI = function(){
 	this.loadTheater = function(id){
 		
 		g.loadstart();
-		var imageArray;
+		var imageArray = [];
 		var imagecount = 0;
 		var picHeight = 0;
 		var bindHandlers = function(){
@@ -255,8 +255,9 @@ var galleryAPI = function(){
 		
 		var preparestage = function(albumid){
 			$.getJSON("../galleries/"+albumid+"/imgs",function(album){
-				imageArray = eval(album.images);
+				// imageArray = eval(album.images);
 				$.each(album.images,function(i,image){
+					imageArray.push(image)
 					if(image._id == id)
 						imagecount = i;
 				})

app/assets/stylesheets/gallery.css

@@ -518,4 +518,17 @@
 }
 #fileupload #file-list .action-bnt {
 	text-align: right;
+}
+
+.order-edit-notification{
+	background-color: #ffffd5;
+    display: none;
+    height: 25px;
+    margin-left: 40%;
+    position: fixed;
+    text-align: center;
+    margin-top: 5px;
+    top: 85px;
+    width: 250px;
+    font-size: 13px;
 }

app/controllers/admin/galleries_controller.rb

@@ -10,7 +10,7 @@ class Admin::GalleriesController < OrbitAdminController
 
   def show
     @album = Album.find(params[:id])
-    @images = @album.album_images
+    @images = @album.album_images.asc(:order)
     image_content = []
     @images.each do |image|
       image_content << {"id" => image.id.to_s, "description" => image.description_translations,"tags" => image.tags.collect{|t| t.id.to_s}}
@@ -127,7 +127,7 @@ class Admin::GalleriesController < OrbitAdminController
   def imgs
     @album = Album.find(params[:gallery_id])
     @tag_names = Array.new
-    @images = @album.album_images.all
+    @images = @album.album_images.asc(:order)
     @output =  Array.new
     @images.each do |values|
     @output << { _id:  values.id.to_s,
@@ -136,6 +136,7 @@ class Admin::GalleriesController < OrbitAdminController
                  title: values.title,
                  file: values.file.as_json[:file],
                  gallery_album_id: values.album_id,
+                 order: values.order,
                  tags: values.tags}
     end
       render :json=>{"images" => @output, "tags" => @album.tags}.to_json

app/controllers/admin/images_controller.rb

@@ -4,9 +4,21 @@ class Admin::ImagesController < OrbitAdminController
 		@image = AlbumImage.find(params[:id])
 		@albumid = @image.album_id
 		@album = Album.find(@albumid)
-		@images = @album.album_images.all
+		@images = @album.album_images.asc(:order)
 	end
 
+	def changeorder
+		images = params[:imageids]
+		images.each_with_index do |image, i|
+			img = AlbumImage.find(image) rescue nil
+			if !img.nil?
+				img.order = i
+				img.save 
+			end
+		end
+    	render :json => {"success" => true}.to_json
+  	end
+
 	def delete_photos
 		images = params['images']
 		images.each do |image|

app/controllers/galleries_controller.rb

@@ -20,7 +20,7 @@ class GalleriesController < ApplicationController
   def show
     params = OrbitHelper.params
     album = Album.find_by_param(params[:uid])
-  	images = album.album_images.collect do |a|
+  	images = album.album_images.asc(:order).collect do |a|
 	    {
         "image-description" => a.description,
 	     "link_to_show" =>  "/" + I18n.locale.to_s + params[:url] + "/-" + a.id.to_s + "?method=theater",
@@ -69,7 +69,7 @@ class GalleriesController < ApplicationController
   def imgs(album_id)
     album = Album.find(album_id)
     tag_names = Array.new
-    images = album.album_images.all
+    images = album.album_images.asc(:order)
     output =  Array.new
     images.each do |values|
     output << { _id:  values.id.to_s,
@@ -87,7 +87,7 @@ class GalleriesController < ApplicationController
     image = AlbumImage.find(params[:uid])
     albumid = image.album_id
     album = Album.find(albumid)
-    images = album.album_images.all
+    images = album.album_images.asc(:order)
    {
     "album" => album,
     "images" => images,

app/models/album_image.rb

@@ -8,6 +8,7 @@ class AlbumImage
 	field :title
 	field :description, localize: true
 	field :rss2_id, type: String
+	field :order, type: Integer, default: 0
 
 	# has_and_belongs_to_many :tags, :class_name => "GalleryTag"
 

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

@@ -9,6 +9,7 @@
 <% end %>
 
 <% content_for :page_specific_javascript do %>
+ <%= javascript_include_tag "lib/jquery-ui-1.10.0.custom.min" %>
   <%= javascript_include_tag "jquery.masonry.min.js" %>
   <%= javascript_include_tag "jquery.lite.image.resize.js" %>
   <%= javascript_include_tag "gallery" %>

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

@@ -1,6 +1,7 @@
-
+<% content_for :page_specific_css do %>
-<%= stylesheet_link_tag "gallery" %>
+  <%= stylesheet_link_tag "gallery" %>
-<%= stylesheet_link_tag "lib/tags-groups" %>
+  <%= stylesheet_link_tag "lib/tags-groups" %>
+<% end %>
 <!-- <div class="topnav clearfix">
   <ul class="breadcrumb text-info pull-left">
     <li><a href="/orbit_4.0.1/admin/dashboards/dashboards.shtml">Dashboard</a> <span class="divider">/</span></li>
@@ -9,6 +10,7 @@
   </ul>
 </div> -->
 <!-- Bottom Nav -->
+<div class="order-edit-notification">Images re-ordering enabled.</div>
 <div class="bottomnav clearfix">
   <div class="action pull-left">
     <a href="<%= admin_galleries_path %>" class="btn btn-small"><i class="icons-back"></i> Back</a>
@@ -19,6 +21,7 @@
       <a href="#dialog" data-toggle="modal" class="btn btn-warning btn-small deletephoto hide"><i class="icons-cross-3"></i> Delete Photo</a>
       <a href="#view-photo-tags" class="btn btn-primary btn-small addtags open hide" for="batch"><i class="icons-tag"></i> Add Tags</a>
       <a href="<%= edit_admin_gallery_path(@album.id) %>" class="btn btn-small btn-success"><i class="icon-edit"></i> Edit</a>
+      <a href="#" class="btn btn-small btn-info" id="edit-order-btn">Edit Order</a>
       <b class="divider"></b>
      
       <a href="#" class="add-imgs btn btn-small btn-primary"><i class="icons-plus"></i> Add Image</a>
@@ -169,6 +172,7 @@
 </script>
 
 <% content_for :page_specific_javascript do %>
+  <%= javascript_include_tag "lib/jquery-ui-1.10.0.custom.min" %>
   <%= javascript_include_tag "jquery.masonry.min.js" %>
   <%= javascript_include_tag "jquery.lite.image.resize.js" %>
   <%= javascript_include_tag "lib/checkbox.card" %>

config/routes.rb

@@ -17,8 +17,9 @@ Rails.application.routes.draw do
         post "galleries/delete_photos" => "images#delete_photos"
         post "galleries/update_image" => "images#update_image"
         post "galleries/image_tagging" => "images#image_tagging"
+        post "galleries/order" => "images#changeorder"
         # match "image_tagging" => "album_images#image_tagging"
      end
-    
    end
+
 end