gallery/app/assets/javascripts/gallery.js

function rotate(){
	$("#crop_div").dialog("open");
}
function change_degree(degree_change){
	var degree_org = parseInt($('#show_degree').text())
	degree_org+=degree_change
	if (degree_org==360 || degree_org==-360){
		degree_org = 0
	}
	$('#show_degree').text(degree_org)
}
function init_upload(temp_length){
	var value = $("input[name='all_upload_length']")
	if (value.val()==''){
		value.val(temp_length)
		$.ajax({
			type : "post",
			url : "/admin/galleries/init_upload",
			dataType : "json",
			data:{all_length: value.val()},
			async: false,
			global:false,
			success: function()
	           {
	           },
			error : function(data){
				alert('init upload process failed, please try again later.')
			}
		});
		if (value.val()=='1'){
			value.val('')
		}
	}	
}
function form_submit() {
    var temp_length = $('#file-list').find('li.template-upload').length
    init_upload(temp_length)
    var length_upload
    var count_upload
    var send_start
    if (temp_length>1){
        $( 'form#fileupload' ).ajaxSuccess(function() {
            if (typeof length_upload == "undefined"){
              count_upload = 1
              length_upload = $('#file-list').find('li.template-upload').length
            }
            else{
                count_upload ++
            }
            if (count_upload === length_upload){
                send_start = undefined
                $.ajax({
        			url : "/admin/galleries/start_upload_process",
        			dataType : "json",
                    type : "post",
        			error: function(){
        				alert('init upload process failed, please try again later.')
        			},
        			success: function(){
        				window.location.href = '/admin/galleries/upload_process'
        			}
        		})
                $.ajax({
        			url : "/admin/galleries/start_upload_process",
        			dataType : "json",
                    type : "post",
        			error: function(){
        				alert('init upload process failed, please try again later.')
        			},
        			success: function(){
        				window.location.href = '/admin/galleries/upload_process'
        			}
        		})
            }
        });
    }
}
function form_only_one_submit() {
    var temp_length = 1
	init_upload(temp_length)
}
!function ($) {
    $.fn.checkListLength = function (param){
        _defaultSettings = {
            onlyOne: null,
        };
        _set = $.extend(_defaultSettings, param);
        $this = this;
        $li = this.children('li');
        $dropzone = $('#dropzone');
        if(($li.length - _set.onlyOne) === 0) {
		    $('#dropzone').fadeIn(300);
		} else {
		    $('#dropzone').fadeOut(300);
		}
		$('#file-list').nanoScroller({ scrollTop: 0, iOSNativeScrolling: true });
    };
}(window.jQuery);

$(function () {
    'use strict';
    // Initialize the jQuery File Upload widget:
    if($('#fileupload').length){
	    $('#fileupload').fileupload({
	        //maxFileSize: 5000000,=
	        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
	        dropZone: $('#dropzone'),
	        headers:{
	            'X-CSRF-Token': $('meta[name="csrf-token"]').attr("content")
	        }
	    });
	}
});
function batch_crop(){
    var check_li = $('#imgholder').find("input[type='checkbox']:checked").parents('li');
    var image_ids =[];
    if (check_li.length>0){
        check_li.each(function(){
            image_ids.push($(this).data('image-id'));
        });
        if (navigator.onLine) {
            window.location.href = '/admin/galleries/batch_crop?image_ids=' + image_ids.join(',') 
        } else {
            alert('Please connect the network and try again later!')
        }
    }else{
        alert('Please select at least one')
    }
}
function select_all() {
    $('#imgholder').find("input[type='checkbox']:not(:checked)").trigger('click')
}
function translate(ele,pretext,text,return_flag){
	var return_value
    if (navigator.onLine) {
        $.ajax({
            url : "/admin/galleries/translate",
            dataType : "json",
            type : "post",
            async: false,
            data:{text:text},
            success:function(data){
            	if (return_flag){
            		return_value = data.translate
            	}
            	else{
            		ele.html(pretext + data.translate)
            	}
            },
            error:function(){
                var back = text.split('.')[1].split('_')
                var result = []
                for (i=0;i<back.length;i++){
                    result.push(back[i].charAt(0).toUpperCase() + back[i].slice(1))
                }
                if (return_flag){
            		return_value = result.join(' ')
            	}
            	else{
	                ele.html(pretext + result.join(' '))
	            }
                alert('Your server has some problem, please try again later!')
            }
            })

    } else {
        var back = text.split('.')[1].split('_')
        var result = []
        for (i=0;i<back.length;i++){
            result.push(back[i].charAt(0).toUpperCase() + back[i].slice(1))
        }
        if (return_flag){
    		return_value = result.join(' ')
    	}
    	else{
	        ele.html(pretext + result.join(' '))
	    }
        alert('Please connect the network and try again later!')
    }
    if (return_flag){
    	return return_value
    }
}
$(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');
		$('.rgalbum > a').rsImg();
		if($containerData.galleryId == 'gallery') {
			// $container.masonry({
			// 	itemSelector : '.rgalbum',
			// 	isAnimated: true,
			// });
			$albumname.each(function(i) {
				var $albumblock = $(this).closest('a').height(),
					$H = $(this).outerHeight(true);
				if($H > $albumblock) {
					$(this).css({
						'bottom': "auto",
						'top': 0,
					});
					$(this).hover(function() {
						$(this).stop(true, true).delay(500).animate({
							'top': '-='+($H-$albumblock),
						},($H-$albumblock)*10)
					},function() {
						$(this).stop(true, true);
						$(this).css({
							'bottom': "auto",
							'top': 0,
						});
					});
				};
			});
			$('#orbit_gallery').delegate('.icons-tag', clickEvent, function(){
				$(this).parents('.gallery_info').nextAll('.albumtag').slideToggle(300);
			});
		};
	});

	var bindEvent = function(instance,elem){
		var $e = elem,
			image_id = $e.closest(".rgalbum").data("image-id");
			obj = photosData.galleries.filter(function(a) {
					return a.id == image_id;
				})[0];
		switch($e.attr("for")){
			case "description":
				if(obj.description){
					instance.find("textarea").each(function(){
						if(obj.description[$(this).attr("for")])
							$(this).val(obj.description[$(this).attr("for")]);
					})
					
				}
				instance.find("input[type=hidden]").val(image_id);
				instance.find("form").bind("ajax:success",function(evt, data, status){
					$.pageslide.close();
					photosData = data;
				})
				break;
			case "tags":
				instance.find('.tags-groups').cardCheck({
       			 	item: '.card'
    			});
    			for(i = 0; i < obj.tags.length; i++){
    				instance.find("input[value="+obj.tags[i]+"]").parent().addClass('active');
    				instance.find("input[value="+obj.tags[i]+"]").prop("checked","checked");
    			}
    			instance.find("form").submit(function(event) {
    				var checkboxes = $(this).find("input[type=checkbox]:checked"),
    					tag_ids = [],
    					image_ids =[image_id];

    				checkboxes.each(function(){
    					tag_ids.push($(this).val());
    				})
    				
    				$.post("/admin/galleries/image_tagging",{"image_ids":image_ids,"tag_ids":tag_ids},function(json){
    					$.pageslide.close();
    					photosData = json;
    				})
    				return false;
    			});
    			break;
    		case "batch":
    			instance.find('.tags-groups').cardCheck({
       			 	item: '.card'
    			});
    			instance.find("form").submit(function(event) {
    				var checkboxes = $(this).find("input[type=checkbox]:checked"),
    					tag_ids = [],
    					image_ids =[],
    					images =  $("#imgholder .rgalbum.active");
    				checkboxes.each(function(){
    					tag_ids.push($(this).val());
    				})
    				images.each(function(){
    					image_ids.push($(this).data("image-id"));
    				})
    				$.post("/admin/galleries/image_tagging",{"image_ids":image_ids,"tag_ids":tag_ids},function(json){
    					$.pageslide.close();
    					photosData = json;
    				})
    				return false;
    			});
    			break;
		}
	}

	if($("#imgholder").length){
	    $('.open').pageslide({
	      loadComplete: function(instance,elem) {
	        bindEvent(instance,elem);
	      }
	    })
	}
	
	

	$("#imgholder").on(clickEvent, '.photo_cover', function(event) {
		var image_id = $(this).closest(".rgalbum").data("image-id"),
			album_id = $("#imgholder").data("gallery-id"),
			set_cover = true;
		if($(this).children().hasClass("icons-star-2")){
			$(".icons-star").removeClass("icons-star").addClass('icons-star-2');
			$(this).children().removeClass("icons-star-2").addClass("icons-star");
		}else{
			$(this).children().removeClass("icons-star").addClass("icons-star-2");
			set_cover = false;
		}
		$.post("/admin/galleries/set_cover",{"album_id":album_id,"image_id":image_id,"set_cover":set_cover});

	});

	$("#delete_selected_photos_btn").click(function(){
		var photos_to_delete = [],
			delete_cover = false,
			$photos = $(".rgalbum.active"),
			album_id = $("#imgholder").data("gallery-id");
		$('.modal-body .spinning').fadeIn('fast');
		$('.modal-body .text-warning').hide(0);
		$photos.each(function(){
			photos_to_delete.push($(this).data('image-id'));
			if ($(this).find(".icons-star").length) {
				delete_cover = true;
			};
		});
		 $.ajax({
		 	url : "/admin/galleries/delete_photos",
		 	type : "POST",
		 	data : {"images":photos_to_delete,"delete_cover":delete_cover,"album_id":album_id},
		 	success : function(){
		 		$photos.slideUp(300,function() {
		 			$(this).remove();
		 		});
		 		$('#dialog').modal('hide');
		 		$('.modal-body .spinning').hide();
				$('.modal-body .text-warning').show();
				$('.deletephoto, .deselect, .addtags').addClass('hide')
		 	}
		 });
	})

	$('#imgholder').on(clickEvent, '.checkbox', function() {
		$(this).prop('checked') ? $(this).closest('.rgalbum').addClass('active') : $(this).closest('.rgalbum').removeClass('active');
		var checkLength = $("#imgholder .rgalbum.active");
		checkLength.length ? $('.deletephoto, .deselect, .addtags, .crop').removeClass('hide') : $('.deletephoto, .deselect, .addtags, .crop').addClass('hide');
	});
	$('.deselect').on(clickEvent, function(event) {
		$('.rgalbum').removeClass('active');
		$('.checkbox').prop('checked', false)
		$('.deletephoto, .deselect, .addtags').addClass('hide')
		event.preventDefault();
	});
	$('.phtot-action').delegate('li', clickEvent, function(event) {
		$('.checkbox').prop('checked', false)
		$('.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");
			translate(el,'','gallery.save_order',false)
		}else{
			var temp = $container.sortable( "toArray", { attribute: "data-image-id" }),
				type = $container.attr("id");
			if(images_order.toString() != temp.toString()){
				$.ajax({
					url : "/admin/galleries/order",
					data : {"imageids" : temp, "type" : type},
					type : "post",
					dataType : "json"
				})
			}
			$(".order-edit-notification").slideUp();
			$container.sortable("disable");
			$container.data("order-edit","0");
			translate(el,'','gallery.edit_order',false)
		}
		return false;
	})

    // 

    var last_image_id = null;
	$('.add-imgs').on({
		click: function() {
			$('#fileupload').slideToggle(300, function() {
				if(!$(this).is(':hidden')) {
				    translate($('.add-imgs'),'<i class="icons-cross-2"></i> ','gallery.close_panel',false)
					$('.rgbody').stop(true, false).animate({'padding-bottom': 280}, 300);
					$("#edit-order-btn").hide();
					$.ajax({
						url : "/admin/galleries/last_image_id",
						data : {"albumid" : $("#fileupload_aid").val()},
						dataType : "json",
						type : "get"
					}).done(function(d){
						last_image_id = d.last_image_id;
					})
				} else {
				    translate($('.add-imgs'),'<i class="icons-plus"></i> ','gallery.add_image',false)
					$('.files').empty()
					$('#file-list').checkListLength();
					$('.rgbody').stop(true, false).animate({'padding-bottom': 0}, 300);
					$("#edit-order-btn").show();
					fetchNewImages();
				};
			});
			return false;
		}
	});
	var fetchNewImages = function(){
		var albumid = $("#fileupload_aid").val();
			
		$.getJSON('/admin/galleries/get_photoData_json?id='+albumid, function(json, textStatus) {
			photosData = json;
		});

		$.ajax({
			url : "/admin/galleries/new_images",
			data : {"last_image_id" : last_image_id, "album_id" : albumid},
			success : function(data){
				var $e = $(data);
				$imgs = $e.find("img");
				$("#imgholder").prepend($e);
				$os = $e.find("a.open");
				$os.pageslide({
					loadComplete: function(instance,elem) {
						bindEvent(instance,elem);
					}
				});
			}
		})

	}
	var buttons_option={}
	var op_fn1 = function() { 
		var check_img = $('#imgholder').find("input[type='checkbox']:checked").parents('li').find('img');
		check_img.each(function(){
            check_img.css('transform','rotate('+$('#show_degree').text()+'deg)');
        });
	}
	var op_fn2 = function() { 
		var confirm_msg = translate('','','gallery.confirm_msg',true)
		if ( confirm (confirm_msg) ){
			var check_li = $('#imgholder').find("input[type='checkbox']:checked").parents('li');
			var image_ids =[];
			check_li.each(function(){
	            image_ids.push($(this).data('image-id'));
	        });
	        if (navigator.onLine) {
	            window.location.href = '/admin/galleries/rotate_images?image_ids=' + image_ids.join(',') +'&rotate_angle=' + $('#show_degree').text()
	        } else {
	            alert('Please connect the network and try again later!')
	        }
	        console.log(image_ids)
			$(this).dialog("close"); 
		}
		
	}
	var op_fn3 = function() { $(this).dialog("close"); }
	var op1 = translate('','','gallery.review',true)
	var op2 = translate('','','gallery.rotate',true)
	var op3 = translate('','','gallery.close_panel',true)
	buttons_option[op1] = op_fn1
	buttons_option[op2] = op_fn2
	buttons_option[op3] = op_fn3
	$("#crop_div").dialog({
        autoOpen: false,
        show: "blind",
        hide: "explode",
        buttons: buttons_option
    });
});