JimFrenette.com | Sandbox - Responsive Filter

HTML

<select id="filter">
    <option value="">View All Categories</option>
    <option value="cat1">Category 1</option>
    <option value="cat2">Category 2</option>
    <option value="cat3">Category 3</option>
    <option value="cat4">Category 4</option>
</select>
<ul data-mobile-show="6" data-desktop-show="9">
    <li data-category='["cat1","cat2"]' class="jsHidden"><a href="javascript:void(0)">Article 1</a></li>
    <li data-category='["cat3","cat4"]' class="jsHidden"><a href="javascript:void(0)">Article 2</a></li>
    <li data-category='["cat3"]' class="jsHidden"><a href="javascript:void(0)">Article 3</a></li>
    <li data-category='["cat4"]' class="jsHidden"><a href="javascript:void(0)">Article 4</a></li>
    <li data-category='["cat4"]' class="jsHidden"><a href="javascript:void(0)">Article 5</a></li>
    <li data-category='["cat1"]' class="jsHidden"><a href="javascript:void(0)">Article 6</a></li>
    <li data-category='["cat2"]' class="jsHidden"><a href="javascript:void(0)">Article 7</a></li>
    <li data-category='["cat1","cat2","cat3"]' class="jsHidden"><a href="javascript:void(0)">Article 8</a></li>
    <li data-category='["cat1","cat2","cat3","cat4"]' class="jsHidden"><a href="javascript:void(0)">Article 9</a></li>
    <li data-category='["cat1"]' class="jsHidden"><a href="javascript:void(0)">Article 10</a></li>
    <li data-category='["cat2"]' class="jsHidden"><a href="javascript:void(0)">Article 11</a></li>
    <li data-category='["cat2","cat3"]' class="jsHidden"><a href="javascript:void(0)">Article 12</a></li>
    <li data-category='["cat1","cat2"]' class="jsHidden"><a href="javascript:void(0)">Article 13</a></li>
    <li data-category='["cat3","cat4"]' class="jsHidden"><a href="javascript:void(0)">Article 14</a></li>
    <li data-category='["cat3"]' class="jsHidden"><a href="javascript:void(0)">Article 15</a></li>
    <li data-category='["cat4"]' class="jsHidden"><a href="javascript:void(0)">Article 16</a></li>
    <li data-category='["cat4"]' class="jsHidden"><a href="javascript:void(0)">Article 17</a></li>
    <li data-category='["cat1"]' class="jsHidden"><a href="javascript:void(0)">Article 18</a></li>
    <li data-category='["cat2"]' class="jsHidden"><a href="javascript:void(0)">Article 19</a></li>
    <li data-category='["cat1","cat2","cat3"]' class="jsHidden"><a href="javascript:void(0)">Article 20</a></li>
    <li data-category='["cat1","cat2","cat3","cat4"]' class="jsHidden"><a href="javascript:void(0)">Article 21</a></li>
    <li data-category='["cat1"]' class="jsHidden"><a href="javascript:void(0)">Article 22</a></li>
    <li data-category='["cat2"]' class="jsHidden"><a href="javascript:void(0)">Article 23</a></li>
    <li data-category='["cat2","cat3"]' class="jsHidden"><a href="javascript:void(0)">Article 24</a></li>
    <li data-category='["cat1","cat2"]' class="jsHidden"><a href="javascript:void(0)">Article 25</a></li>
    <li data-category='["cat3","cat4"]' class="jsHidden"><a href="javascript:void(0)">Article 26</a></li>
    <li data-category='["cat3"]' class="jsHidden"><a href="javascript:void(0)">Article 27</a></li>
    <li data-category='["cat4"]' class="jsHidden"><a href="javascript:void(0)">Article 28</a></li>
    <li data-category='["cat4"]' class="jsHidden"><a href="javascript:void(0)">Article 29</a></li>
    <li data-category='["cat1"]' class="jsHidden"><a href="javascript:void(0)">Article 30</a></li>
    <li data-category='["cat2"]' class="jsHidden"><a href="javascript:void(0)">Article 31</a></li>
    <li data-category='["cat1","cat2","cat3"]' class="jsHidden"><a href="javascript:void(0)">Article 32</a></li>
    <li data-category='["cat1","cat2","cat3","cat4"]' class="jsHidden"><a href="javascript:void(0)">Article 33</a></li>
</ul>

CSS

JavaScript

(function(){
    const articleNodeList = document.querySelectorAll("ul li"),
            $article = Array.from(articleNodeList),	
            $filter = document.getElementById("filter"),
            $more = document.getElementById("more");

var articlesDefault = 6,
        articlesDefaultDesktop = 9,
        eventsInitialized = false,
        articlesLimit = 0;

var module = {
        breakpoint: null,
        init: function() {
            module.initEvents();
            module.getBreakpoint();
        },

initEvents: function() {
            if(!eventsInitialized) {

/**
         * Sets the breakpoint value based on :before content of the body element. The content is controlled by mediaqueries.
         * Possible values are mobile | desktop
         */
        getBreakpoint: function() {
            module.breakpoint = window.getComputedStyle(document.querySelector('body'), ':before').getPropertyValue('content').replace(/\"|\'/g, '');
            console.log("BREAKPOINT: "+ module.breakpoint);$article
            module.displayArticles();
        },

displayArticles: function() {
			
            $more.classList.add('jsHidden');

val = $filter.options[$filter.selectedIndex].value;
            
            if(module.breakpoint == 'desktop') {
                articlesLimit = articlesDefaultDesktop;
            } else {
                articlesLimit = articlesDefault;
            }

var count = 0;
            
            $article.forEach(el => {
                if (el !== null) {
                    el.classList.add('jsHidden');
                    
                    if (val.length > 0) {

catArr = el.dataset.category;

if (catArr.indexOf(val) != -1) {
                            count = count + 1;
                            // break if past limit
                            if (articlesLimit > 0 && (count > articlesLimit)) {
                                module.moreArticles(count, articlesLimit);
                                return false;
                            } else {
                                el.classList.remove('jsHidden');
                            }
                        }
                    } else {
                        // show all articles
                        // break if past limit
                        count = count + 1;

if (articlesLimit > 0 && (count > articlesLimit)) {
                            module.moreArticles(count, articlesLimit);
                            return false;
                        } else {
                            el.classList.remove('jsHidden');
                        }
                    }
                }
            });
        },

moreArticles: function(count, limit) {
            if (count && limit) {
                if (count > limit) {
                    $more.classList.remove('jsHidden');
                }
            } else { // display 9 more articles
                articlesDefault = articlesDefault + 9;
                articlesDefaultDesktop = articlesDefaultDesktop + 9;
                module.displayArticles();
            }
        }

};

module.init();

$filter.addEventListener("change", function() {
        module.displayArticles();
    });

$more.addEventListener("click", function(event) {
        event.preventDefault();
        module.moreArticles();
    });

})();