JSFiddle - React, Tailwind, and code Playground

by trolleymusic

JavaScript

(function (Site, $, undefined) {

    Site.init = (function () {

      // Listing page filtration
          $(document).ready(function() {
            if ($('.listing>ul').length && $(".list-archives-buttons button").length && $('button.more-results').length) {
              Site.Filter.Init($('.listing>ul').children(), $(".list-archives-buttons button"), $('button.more-results'), 8, true);
            }
          });
        
    }());
    
    /* Currently the filter resets the visible count to maxPerPage on filter
        We should consider if that's the behaviour that we want,
        or we want the current visible items to remain visible */
    Site.Filter = (function () {
      var Filter = function () {
        // object properties
             this.currentFiltered = [];
             var currentFilter;
             
             // methods
             
        this.Init = function(articleList, filterButtons, moreResults, maxArticlesPerPage, activate) {
               this.articleList = articleList;
               this.filterButtons = filterButtons;
               this.moreResults = moreResults;
          this.maxArticlesPerPage = maxArticlesPerPage || (Site.config.Filter.maxArticlesPerPage || 8);
              this.currentFilterLength = this.maxArticlesPerPage;
              
              this.callbacks = {
                filter : function () {},
                loadMore : function () {}
              }
              
              currentFilter = null;
              
              var f = this;

          // event handler
          this.filterButtons.on("click", function(e) {
            e.preventDefault();
            f.activeFilter($(this).attr('data-filter') || $(this).val());
          });
          
          this.moreResults.on("click", function(e) {
            e.preventDefault();
            f.increaseArticleCount();
            f.showArticles(f.currentFiltered);
            f.callbacks.loadMore();
          });
              
              if...