added reordering of images

This commit is contained in:
Harry Bomrah 2015-04-16 20:07:54 +08:00
parent 2b0deb2244
commit 7e432bd1ed
10 changed files with 83 additions and 17 deletions

View File

@ -34,6 +34,10 @@ $(function () {
$(function() { $(function() {
var $container = $('.gallery'), var $container = $('.gallery'),
$containerData = $container.data(); $containerData = $container.data();
$container.data("order-edit","0");
$container.sortable({
disabled: true
});
$container.imagesLoaded(function(){ $container.imagesLoaded(function(){
var $albumname = $('.albumname'), var $albumname = $('.albumname'),
$img = $('.rgalbum img'); $img = $('.rgalbum img');
@ -215,6 +219,32 @@ $(function() {
$('.rgalbum').removeClass('active'); $('.rgalbum').removeClass('active');
$('.deletephoto, .deselect, .addtags').removeClass('hide') $('.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({ $('.add-imgs').on({
@ -223,11 +253,13 @@ $(function() {
if(!$(this).is(':hidden')) { if(!$(this).is(':hidden')) {
$('.add-imgs').html('<i class="icons-cross-2"></i> Close panel'); $('.add-imgs').html('<i class="icons-cross-2"></i> Close panel');
$('.rgbody').stop(true, false).animate({'padding-bottom': 280}, 300); $('.rgbody').stop(true, false).animate({'padding-bottom': 280}, 300);
$("#edit-order-btn").hide();
} else { } else {
$('.add-imgs').html('<i class="icons-plus"></i> Add Image'); $('.add-imgs').html('<i class="icons-plus"></i> Add Image');
$('.files').empty() $('.files').empty()
$('#file-list').checkListLength(); $('#file-list').checkListLength();
$('.rgbody').stop(true, false).animate({'padding-bottom': 0}, 300); $('.rgbody').stop(true, false).animate({'padding-bottom': 0}, 300);
$("#edit-order-btn").show();
fetchNewImages(); fetchNewImages();
}; };
}); });

View File

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

View File

@ -519,3 +519,16 @@
#fileupload #file-list .action-bnt { #fileupload #file-list .action-bnt {
text-align: right; 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;
}

View File

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

View File

@ -4,7 +4,19 @@ class Admin::ImagesController < OrbitAdminController
@image = AlbumImage.find(params[:id]) @image = AlbumImage.find(params[:id])
@albumid = @image.album_id @albumid = @image.album_id
@album = Album.find(@albumid) @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 end
def delete_photos def delete_photos

View File

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

View File

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

View File

@ -9,6 +9,7 @@
<% end %> <% end %>
<% content_for :page_specific_javascript do %> <% 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.masonry.min.js" %>
<%= javascript_include_tag "jquery.lite.image.resize.js" %> <%= javascript_include_tag "jquery.lite.image.resize.js" %>
<%= javascript_include_tag "gallery" %> <%= javascript_include_tag "gallery" %>

View File

@ -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"> <!-- <div class="topnav clearfix">
<ul class="breadcrumb text-info pull-left"> <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> <li><a href="/orbit_4.0.1/admin/dashboards/dashboards.shtml">Dashboard</a> <span class="divider">/</span></li>
@ -9,6 +10,7 @@
</ul> </ul>
</div> --> </div> -->
<!-- Bottom Nav --> <!-- Bottom Nav -->
<div class="order-edit-notification">Images re-ordering enabled.</div>
<div class="bottomnav clearfix"> <div class="bottomnav clearfix">
<div class="action pull-left"> <div class="action pull-left">
<a href="<%= admin_galleries_path %>" class="btn btn-small"><i class="icons-back"></i> Back</a> <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="#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="#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="<%= 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> <b class="divider"></b>
<a href="#" class="add-imgs btn btn-small btn-primary"><i class="icons-plus"></i> Add Image</a> <a href="#" class="add-imgs btn btn-small btn-primary"><i class="icons-plus"></i> Add Image</a>
@ -169,6 +172,7 @@
</script> </script>
<% content_for :page_specific_javascript do %> <% 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.masonry.min.js" %>
<%= javascript_include_tag "jquery.lite.image.resize.js" %> <%= javascript_include_tag "jquery.lite.image.resize.js" %>
<%= javascript_include_tag "lib/checkbox.card" %> <%= javascript_include_tag "lib/checkbox.card" %>

View File

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