epaper/app/views/admin/e_paper_subscribers/batch_delete_subscribers.html.erb

<%= stylesheet_link_tag "member_select" %>
<%= stylesheet_link_tag "lib/checkbox-card" %>
  <div class="mini-layout-body span10">
    <div class="tab-content">
      <div class="tab-pane fade in active" id="subscribers_block">
          <div class="tab-pane-head">
            <h4><%= t('e_paper.batch_delete_subscribers') %></h4>
          </div>
          <ul id="card-list-members" class="checkbox-card clearfix">
            <fieldset style="background-color: white;border: 0.125em solid #666;font-family: cursive,serif;">
              <%= form_tag admin_e_paper_subscribers_delete_subscribers_path , :id=>'members_form' do %>
               <div id="members_field" style="display: none;margin-left: 1.5em;margin-left: 1.5em;"></div>
               <p id="edit_member_hint" aligin="center" style="font-size: 1.5em;padding: 2em;text-align: center;"><%= t("e_paper.delete_subscribers_hint") %></p>
               <input id="submit-type" name="type" type="hidden" value="">
              <% end %>
            </fieldset>
          </ul>
      </div>
    </div>
  </div>
</div>

<!-- footer -->
<div class="bottomnav clearfix">
  <div class="action pull-right">
    <div class="btn-group dropup">
      <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        <%= t("select") %>
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#" id="select_all"><i class="icon-ok"></i> <%= t("select_all") %></a></li>
        <li><a href="#" id="deselect_all"><i class="icon-remove"></i> <%= t("de_select_all") %></a></li>
      </ul>
  </div>
    <button class="btn btn-primary select_member_modal" href="#" type="button">
      <i class="icons-plus"></i>
      <%=t(:add)%>
    </button>
    <button class="btn" id="remove_subscribers" style="display: none;"><i class="icon-trash"></i> <%=t('site.edit_members.delete_from_choice') %></button>
    <button class="btn btn-danger" id="remove_subscribers_forever" style="display: none;"><i class="icon-trash"></i> <%=t('e_paper.delete_subscribers') %></button>
    <!-- <button class="btn" id="edit_members" style="display: none;"><i class="icon-trash"></i> <%=t('site.edit_members.edit_members') %></button> -->
    <% if @thread %>
      <button class="show_progress btn btn-primary" type="button"><%= t("e_paper.show_progress") %></button>
    <% end %>
  </div>
</div>
<% if @thread %>
  <div id="threadModal" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="threadModal" aria-hidden="false">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h3 id="threadModal"><%=t("e_paper.#{@thread.key}")%></h3>
        </div>
        <div class="modal-body">
          <div class="thread-status"><%= @thread.status[:status] %></div>
          <div><span class="thread-current-count"><%= @thread.status[:current_count].to_i %></span>/<span class="thread-all-count"><%= @thread.status[:all_count].to_i %></span></div>
          <span class="thread-finish_percent"><%= @thread.status[:finish_percent].to_i %></span> % finished
        </div>
        <div class="modal-footer">
          <button class="btn" id="modal-close-btn" style="width: 4em;" data-dismiss="modal" aria-hidden="true"><%=t('close')%></button>
        </div>
      </div>
    </div>
  </div>
<% end %>
<div id='select_member_modal'></div>
  <script src="/assets/lib/jquery-ui-1.12.1/jquery-ui.min.js"></script>
  <script type="text/javascript">
  /*     修正bootstap.js和jquery-ui.js間的衝突,使tab按鈕能正常運作                        */
  var Button = function (element, options) {
    this.$element = $(element)
    this.options = $.extend({}, $.fn.button.defaults, options)
  }

  Button.prototype.setState = function (state) {
    var d = 'disabled'
      , $el = this.$element
      , data = $el.data()
      , val = $el.is('input') ? 'val' : 'html'

    state = state + 'Text'
    data.resetText || $el.data('resetText', $el[val]())

    $el[val](data[state] || this.options[state])

    // push to event loop to allow forms to submit
    setTimeout(function () {
      state == 'loadingText' ?
        $el.addClass(d).attr(d, d) :
        $el.removeClass(d).removeAttr(d)
    }, 0)
  }

  Button.prototype.toggle = function () {
    var $parent = this.$element.closest('[data-toggle="buttons-radio"]')

    $parent && $parent
      .find('.active')
      .removeClass('active')

    this.$element.toggleClass('active')
  }

 /* BUTTON PLUGIN DEFINITION
  * ======================== */

  var old = $.fn.button

  $.fn.button = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('button')
        , options = typeof option == 'object' && option
      if (!data) $this.data('button', (data = new Button(this, options)))
      if (option == 'toggle') data.toggle()
      else if (option) data.setState(option)
    })
  }
  /*     修正bootstap.js和jquery-ui.js間的衝突,使tab按鈕能正常運作                        */
  </script>
 <link rel="stylesheet" href="/assets/lib/jquery-ui-1.12.1/jquery-ui.min.css">
<script type="text/javascript">
  if( Array.prototype.delete == undefined ){
    Array.prototype.delete = function(v){
      var idx = this.indexOf(v);
      if(idx != -1){
        return this.splice(idx, 1)[0];
      }else{
        return null;
      }
    }
  }
  function double_confirm_message(message){
    if(window.confirm(message)){
      if(window.confirm(message)){
        return true;
      }else{
        return false;
      };
    }else{
      return false;
    };
  };
  $(document).ready(function(){
    $(document).on('click','.modal-body .tab-content .check-item',function(){
      if($(this).hasClass("active"))
        $(this).removeClass("active");
      else
        $(this).addClass("active");
    });
    $(document).on('click',"#select_all",function(){
      $('#members_field').find(".check-item").addClass("active");
      $('#members_field').find(".check-item input[type=checkbox]").prop("checked","checked");
      $(".bottomnav .dropup").removeClass("open");
      if($('#members_field .filter-item').length != 0)
        $('#remove_subscribers').css('display','inline-block');
      return false;
    });
    $(document).on('click',"#deselect_all",function(){
      $('#members_field').find(".check-item").removeClass("active");
      $('#members_field').find(".check-item input[type=checkbox]").removeAttr("checked");
      $(".bottomnav .dropup").removeClass("open");
      $('#remove_subscribers').css('display','none');
      return false;
    });
    $(document).on('click',".select_all_modal",function(){
      $('#select_member_modal .tab-pane.active').find('.check-item:not(.hide)').addClass("active");
      $('#select_member_modal .tab-pane.active').find('.check-item:not(.hide) input[type=checkbox]').prop("checked","checked");
      $(".modal-body .dropup").removeClass("open");
      return false;
    });
    $(document).on('click',".deselect_all_modal",function(){
      $('#select_member_modal .tab-pane.active').find('.check-item:not(.hide)').removeClass("active");
      $('#select_member_modal .tab-pane.active').find('.check-item:not(.hide) input[type=checkbox]').prop("checked","");
      $(".modal-body .dropup").removeClass("open");
      return false;
    });
    $(document).on('click',".select_member_modal",function () {
      if(window.still_processing){
        return;
      }
      window.still_processing = true;
      $.get("<%= admin_e_paper_subscribers_get_subscribers_modal_path %>").done(function(data){
        $("#select_member_modal").html(data);
        $("#member-filter").modal('show');
        window.still_processing = false;
      }).fail(function(){
        window.still_processing = false;
      });
      return false;
    });
    $('#remove_subscribers').click(function(){
      var $delete_items = $('#members_field .check-item.active');
      var delete_count = $delete_items.length;
      for(var i = 0;i < delete_count;i++){
        window.selected_subscriber_ids.delete($delete_items.eq(i).find('input').val());
        $delete_items.eq(i).remove();
      };
      if($('#members_field .check-item').length == 0)
        $('#edit_member_hint').css('display','block');
      $(this).css('display','none');
      if($('#members_field .check-item').length != 0){
        $('#remove_subscribers_forever').css('display','inline-block');
        $('#edit_members').css('display','inline-block');
      }else{
        $('#remove_subscribers_forever').css('display','none');
        $('#edit_members').css('display','none');
      };
    });
    $('#members_field').change(function(){
      if($('#members_field .check-item').length != 0){
        $('#remove_subscribers_forever').css('display','inline-block');
        $('#edit_members').css('display','inline-block');
      }else{
        $('#remove_subscribers_forever').css('display','none');
        $('#edit_members').css('display','none');
      };
      $('#members_field .check-item').off('click').on('click',function(){
        $el = $(this).parent().parent();
        if($el.hasClass("active")){
          $el.removeClass('active');
          if($('#members_field .check-item.active').length != 0)
            $('#remove_subscribers').css('display','inline-block');
          else
            $('#remove_subscribers').css('display','none');
        }else{
          $el.addClass('active');
          $('#remove_subscribers').css('display','inline-block');
        }
        return false;
      });
      $('#members_field .check-item').off('click').on('click',function(){
        if($(this).hasClass("active"))
          $(this).removeClass("active");
        else
          $(this).addClass("active");
        if($('#members_field .check-item.active').length != 0)
          $('#remove_subscribers').css('display','inline-block');
        else
          $('#remove_subscribers').css('display','none');
        return false;
      });
      $('.fa-caret-down').off('click').on('click',function(){
        if($(this).parent().hasClass('open'))
          $(this).parent().removeClass("open");
        else
          $(this).parent().addClass("open");
      })
      $('#remove_subscribers_forever').off('click').on('click',function(){
        if(window.still_processing){
          return;
        }
        window.still_processing = true;
        var member_cards;
        var check_items = $('#members_field #card-list-managers .check-item');
        if(check_items.length > 50){
          member_cards = '<ul id="card-list-managers" class="checkbox-card clearfix" style="clear: left;">'+check_items.slice(0,50).map(function(i,v){ return $(v).prop('outerHTML')}).toArray().join('')+'<li style="background: transparent;color: black;">... etc</li>'+'</ul>';
        }else{
          member_cards = '<ul id="card-list-managers" class="checkbox-card clearfix" style="clear: left;">'+$('#members_field #card-list-managers').html()+'</ul>';
        }
        window.still_processing = false;
        if(double_confirm_message('<%= t('e_paper.delete_subscribers_hint') %>')){
          if($('#dialog-confirm').length == 0){
            $("#members_form").before("<div id='dialog-confirm' title='"+"<%= t('site.edit_members.delete_hint1') %>'>"+
                      "<div style='clear:both;'></div><div><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>"+
                      "<%= t('e_paper.delete_subscribers_hint2') %>"+member_cards+"</div>"+
                      "</div>");
          }else{
            $('#dialog-confirm').html("<div style='clear:both;'></div><div><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>"+
                      "<%= t('e_paper.delete_subscribers_hint2') %>"+member_cards+"</div>");
          }
          $( "#dialog-confirm" ).dialog({
              resizable: true,
              minHeight: 100,
              maxHeight: 400,
              modal: true,
              buttons: {
              "<%= t('site.edit_members.confirm') %>": function(){$('#submit-type').val('remove_subscribers_forever');$('#members_form').submit();$( this ).dialog( "close" );},
              "<%= t('site.edit_members.cancel') %>": function() {
                $( this ).dialog( "close" );
                $( this ).remove();
              }
              }
          });
        }
      });
      $('#edit_members').off('click').on('click',function(){
        $('#submit-type').val('select_edit_members');
        $('#members_form').submit();
      });
    })
    function update_thread(){
      $.post("<%=admin_threads_get_status_path%>",{"id": "<%=params[:thread_id]%>"}).done(function(data){
        var finish_percent = data["finish_percent"];
        var current_count = data["current_count"];
        var all_count = data["all_count"];
        var is_finish = (data["status"] == "finish");
        if(finish_percent){
          $("#threadModal .modal-body .thread-status").text(data["status"]);
          if(data["status"] != 'Processing'){
            $("#threadModal .modal-body .thread-current-count").text(current_count);
            $("#threadModal .modal-body .thread-all-count").text(all_count);
          }
          $("#threadModal .modal-body .thread-finish_percent").text(finish_percent)
        }
        if(!is_finish){
          window.time_out_id = window.setTimeout(update_thread, 1000);
        }else{
          if(window.time_out_id)
            window.clearTimeout(window.time_out_id);
          window.setTimeout(function(){
            $("#threadModal").modal("hide");
            alert(data["status"]);
          }, 3000);
          return;
        }
      });
    }
    if($("#threadModal").length != 0){
      $("#threadModal").on('hidden.bs.modal',function(){
        window.clearTimeout(window.time_out_id);
      })
      $("#threadModal").on('shown.bs.modal',function(){
        window.time_out_id = window.setTimeout(update_thread, 1000);
      })
      $("#threadModal").modal("show");
      $(".show_progress").click(function(){
        $("#threadModal").modal("show");
      })
    }
    $(document).on('click','.modal-backdrop',function(){
      $('.modal').modal('hide');
    })
  })
</script>
<style type="text/css">
  .checkbox-card li:focus-within span{
    color: white;
  }
  .fa-caret-down:before {
    content: "\f078";
  }
  .sub-items{
    display: none;
  }
  .open .sub-items{
    display: block;
    margin: 0 0.5em;
  }
  .selected_role .selected_member:hover{
    background-color: #cccccc;
  }
  .selected_role .selected_member{
    width: 100%;
  }
  li.selected_role:hover{
    background-color: #696969;
  }
  .selected:hover{
    background-color: #0088cc;
  }
  .selected{
    height: 40px;
  }
  #remove_subscribers{
    background: black;
    color: white;
  }
  #edit_members{
    background: green;
    color: white;
  }
  #members_field .checkbox-card li:hover label span.user-name {
    color: black;
  }
  #members_field .checkbox-card li:hover > label > span.user-name {
    color: white;
  }
</style>