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")
        }
    });
  }
});
Array.prototype.uniq = function(){
  var attr = this
  attr = $.grep(attr, function(v, k){
      return $.inArray(v ,attr) === k;
  });
  return attr;
}

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(){
        var tmp = $(this).parents('.rgalbum').eq(0)
        var now_this = $(this)
        if (tmp.find('.albumtag').eq(0).find('li.label').length == 0){
          var ele_id = tmp.attr('data-image-id')
          $.ajax({
            type : "post",
            url : "/admin/galleries/get_tag",
            dataType : "text",
            data:{ele_id: ele_id},
            global:false,
            success: function(data)
                   {
                    tmp.find('.albumtag').eq(0).html(data)
                    now_this.parents('.gallery_info').nextAll('.albumtag').slideToggle(300);
                   },
            error : function(data){
              alert('init process failed, please try again later.')
            }
          });
        }else{
          $(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" });
      images_order = images_order.uniq();
      $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");
        temp = temp.uniq()
      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
    });
});