gallery/app/assets/javascripts/gallery.js

!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){
    if (navigator.onLine) {
        $.ajax({
            url : "/admin/galleries/translate",
            dataType : "json",
            type : "post",
            data:{text:text},
            success:function(data){
                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))
                }
                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))
        }
        ele.html(pretext + result.join(' '))
        alert('Please connect the network and try again later!')
    }
}
$(function() {
    var length_upload
    var count_upload
    var send_start
    $( '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'
    			}
    		})
        }
    });
    $( 'form#fileupload' ).ajaxSend(function() {
        if (typeof send_start == "undefined"){
          send_start = 1
          $.ajax({
			url : "/admin/galleries/init_upload",
            dataType : "json",
            type : "post",
			error : function(data){
				alert('init upload process failed, please try again later.')
			}
		})
        }
    });
	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')
		}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')
		}
		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')
					$('.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')
					$('.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);
					}
				});
			}
		})

	}
});