gallery/app/views/admin/galleries/_select_albums_form.html.erb

<% unless @include_js_css_flag %>
  <%= javascript_include_tag "lib/checkbox.card.js" %>
  <%= stylesheet_link_tag 'basic/global' %>
  <%= stylesheet_link_tag 'member_select' %>
  <style>
    .modal-backdrop, .modal-backdrop.fade.in {
      opacity: 0.8;
      filter: alpha(opacity=80);
    }
    .modal-header {
      padding: 9px 15px;
      border-bottom: 1px solid #eee;
    }
    .modal-header h3 {
      margin: 0;
      line-height: 30px;
      font-weight: bold;
      color: inherit;
      text-rendering: optimizelegibility;
    }
    .modal-body input, .modal-body label {
      font-size: 14px;
      font-weight: normal;
      line-height: 20px;
    }
    .modal {
      position: fixed;
      top: 10%;
      left: 50%;
      z-index: 1050;
      width: 560px;
      margin-left: -280px;
      background-color: #ffffff;
      border: 1px solid #999;
      border: 1px solid rgba(0, 0, 0, 0.3);
      *border: 1px solid #999;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;
      outline: none;
      -webkit-box-shadow: 0 3px 7px rgb(0 0 0 / 30%);
      -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
      box-shadow: 0 3px 7px rgb(0 0 0 / 30%);
      -webkit-background-clip: padding-box;
      -moz-background-clip: padding-box;
      background-clip: padding-box;
    }
    .modal-body input[type="checkbox"] {
      cursor: pointer;
    }
    .checkbox-card li {
      width: 100px;
      height: auto;
    }
    .selected_album {
      display: inline-block;
    }
    #albums-filter .tabs-left > .nano {
      width: 160px;
      min-height: 425px;
      float: left;
      margin-right: 1em;
    }
    .albums-filter-result {
      min-height: 360px;
      width: auto;
    }
    .checkbox-card li.active {
      background-color: #0088cc;
    }
    .selected_album img {
      width: 100px;
    }
  </style>
  <% @include_js_css_flag = true %>
<% end %>
<% index = '' unless defined?(index) %>
<div class="control-group">
  <label class="control-label muted"><%= t('gallery.album') %></label>
  <div class="controls">
    <div id="selected_albums<%= index %>" class="selected_albums">
      <% albums.each do |album| %>
        <span class="alert alert-info selected_album" id="<%= album.id %>">
          <span class='close remove_album' onclick='removeAlbum<%=index%>($(this))'>x</span>
          <% if album.cover == "default" %>
           <%= image_tag "gallery/default.jpg" %>
          <% else %>
           <img src="<%= album.cover_path %>">
          <% end %>
          <p class="album_name"><%= album.name %></p>
          <%= hidden_field_tag field, album.id %>
        </span>
      <% end %>
    </div>
    <a class="btn btn-primary btn-small select_album_modal<%=index%>"><%= t(:add) %></a>
  </div>
</div>
<script type="text/javascript">
  selected_albums<%=index%> = Array();

  $(function(){
    $.each($("#selected_albums<%= index %> .selected_album"),function(i){
      selected_albums<%=index%>.push($(this).attr("id"));
    });

    $(".select_album_modal<%=index%>").click(function(){
      if($("#select_album<%=index%>").length==0) {
        $("body").append("<span id='select_album<%=index%>'></span>");
        $('.checkbox-card').cardCheck();
      }
      $.post("<%= select_albums_admin_galleries_path %>?index=<%=index%>",function(modal){
        $("#select_album<%=index%>").html(modal);
        $('#albums-filter').on('shown.bs.modal', function() {
          $("#albums-filter .nano").nanoScroller();
        });
        $('#albums-filter').on('hidden.bs.modal', function () {
          $("#select_album<%=index%>").remove();
        });
        updateModal<%=index%>();
        $("#albums-filter").modal('show');
      });
    });

  });

  var addByCategory<%=index%> = function(category_id){
    var flag = true;
    var BreakException = {};
    try {
      selected_albums<%=index%>.forEach(function(album_id){
          if($("#album_ids_"+category_id+"_"+album_id).prop('checked')){
            flag = false;
          }
          if(!flag){
            throw BreakException;
          }
      })
    } catch (e) {
      if (e !== BreakException) throw e;
    }
    if(flag){
      $.each($("#category_"+category_id+" .check-item"), function(){
        selected_albums<%=index%>.push($(this).find("input[type='checkbox']").val());
      });
    }
  }

  var removeAlbum<%=index%> = function(album){
    var id = $(album).parent().attr('id');
    $("#select_album<%=index%> input[type='checkbox'][value=\""+id+"\"]").prop('checked', false).parent('.check-item').removeClass('active').css('display','');
    selected_albums<%=index%> = $.grep(selected_albums<%=index%>, function(value) {return value != id;});
    $(album).parent().remove();
  }
  Array.prototype.unique = function(){
    const distinct = (value, index, self) =>{
      return self.indexOf(value) === index;
    }
    return this.filter(distinct);
  }
  var updateUsers<%=index%> = function(){
    $.each($(".category_field input:checked"), function(){
      addByCategory<%=index%>($(this).val());
    });

    $("#selected_albums<%= index %>").html("");
    selected_albums<%=index%> = selected_albums<%=index%>.unique();
    $.each(selected_albums<%=index%>, function(i, album_id){
      var wrapper = $("input[value='"+album_id+"']").parent();
      var album_name = wrapper.find(".album_name").html();
      $("#selected_albums<%= index %>").append(
          " <span class='alert alert-info selected_album' id='"+album_id+"'>"+
          "<span class='close remove_album' onclick='removeAlbum<%=index%>($(this))'>x</span>"+
          "<img src=\"" + wrapper.find('img').attr('src') + "\">" +
          "<p class=\"album_name\">" + album_name + "</p>" +
          "<input type='hidden' name='<%= field %>' value='"+album_id+"' >"+
          "</span>"
        );
    });

  }

  var updateModal<%=index%> = function(){
    $.each($("#selected_albums<%= index %> .selected_album"),function(){
      var album_id = $(this).attr('id');
      $("input[value='"+album_id+"']").parent("li").hide().addClass('active').find("input[type='checkbox']").prop('checked', true);
    });
    
    $('.check-item').click(function(){
      var check_box = $(this).find("input[type='checkbox']"); 
      var album_id = check_box.val();
      if(check_box.prop('checked')){
        selected_albums<%=index%>.push(album_id);
      }else{
        selected_albums<%=index%> = $.grep(selected_albums<%=index%>, function(value) {return value != album_id;});
      }
    });
  }
</script>