Counter-Control not counting when unselecting Button Path Filter

Question

Counter-Control not counting when unselecting Button Path Filter

Opened this issue 6 years ago · 0 comments

Not sure if it is a bug or me misusing jplist (awesome plugin btw!) but I want to use button path filters with a counter. Without a

<div data-control-type="button-filter-group"
       data-control-action="filter"></div>

element anywhere in the document, the ListFiltered event and hence the Counter is only triggered when selecting a filter, not when unselecting. With such an element the Counter works either ways. Uncomment the element in my example to reproduce:

<head>
    <script
			  src="https://code.jquery.com/jquery-3.3.1.min.js"
			  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
			  crossorigin="anonymous"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jplist/5.2.0/css/jplist.core.min.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jplist/5.2.0/js/jplist.core.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jplist/5.2.0/css/jplist.filter-toggle-bundle.min.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jplist/5.2.0/js/jplist.filter-toggle-bundle.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jplist/5.2.0/js/jplist.counter-control.min.js"></script>
</head>
<div id="demo">
   <div class="jplist-panel">
     <div data-control-type="button-filter-group"
       data-control-action="filter"></div>
      <button
         type="button"
         data-control-type="button-filter"
         data-control-action="filter"
         data-control-name="architecture-btn"
         data-path=".architecture"
         data-selected="true">
          <span id="architecture_counter"
            data-control-type="counter"
            data-control-action="counter"
            data-control-name="architecture_counter"
            data-format="({count})"
            data-path=".architecture"
            data-mode="filter"
            data-type="path"></span>
            Architecture
         </button>
      <button
         type="button"
         data-control-type="button-filter"
         data-control-action="filter"
         data-control-name="christmas-btn"
         data-path=".christmas">
         <span id="christmas_counter"
           data-control-type="counter"
           data-control-action="counter"
           data-control-name="christmas_counter"
           data-format="({count})"
           data-path=".christmas"
           data-mode="filter"
           data-type="path"></span>
            Christmas
         </button>
   </div>
   <div class="list">
      <div class="list-item">
         <div class="architecture">Architecture</div>
      </div>
      <div class="list-item">
        <div class="architecture christmas"> Architecture and Christmans</div>
      </div>
      <div class="list-item">
         <div class="christmas">Christmans</div>
      </div>
   </div>
   <div class="jplist-no-results">
      <p>No results found</p>
   </div>
</div>
<script type="text/javascript">
$('document').ready(function(){
  $('#demo').jplist({
    itemsBox: '.list'
    ,itemPath: '.list-item'
    ,panelPath: '.jplist-panel'
    });
  var api = $('#demo').data('jplist'),events = api.observer.events;
  api.observer.on(events.listFiltered, function(){
    console.log('list filtered');
    });
});

</script>

For me at least this is very unexpected behaviour. cheers