Responsive Article Filter

For a static page Limit number of articles displayed initially Limit is smaller for mobile</li> Show more button

by jimfrenette

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"]'...

CSS

/**
 * used by js as flags for the css breakpoints/mediaqueries
 */
body:before {
    display: none;
    content: "mobile";
}


ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    width: 100%;
}

ul li {
    display: block;
    margin-top: 10px;
    padding: 5%;
    min-height: 30px;
    background-color: #E6E6E6;
    border-top: 1px solid #BDBDBD;
}


@media (min-width:640px) {
    body:before {
        content: "desktop";
    }

    ul li {
        display: inline-block;
        margin: 1%;
        width: 20%;
        border: 1px solid #BDBDBD;
    }

}
.jsHidden {
    display: none;
}

JavaScript

$(function($){
    var eventsInitialized = false,
        articlesDefault = 6,
        articlesDefaultDesktop = 9,
        articlesLimit = 0,
        $article = $("ul li"),
        $filter = $("#filter");
        $more = $("#more");

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

        initEvents: function() {
            if(!eventsInitialized) {
                var id;
                $(window).on('resize', function() {
                    clearTimeout(id);
                    id = setTimeout(module.getBreakpoint, 500);
                });
            }
            eventsInitialized = true;
        },

        /**
         * 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);

            module.displayArticles();
        },

        displayArticles: function() {
            $article.addClass('jsHidden');
            $more.addClass('jsHidden');

            val = $filter.val();
            if (val.length > 0) {

                if(module.breakpoint == 'desktop') {
                    articlesLimit = articlesDefaultDesktop;
                } else {
                    articlesLimit = articlesDefault;
                }

                var count = 0;
                $article.each(function() {
                    catArr = $(this).data('category');
                    if (catArr.indexOf(val) === -1) {

                        $(this).addClass('jsHidden');

                    } else {
                        count = count + 1;

                        // break if past limit
                       ...