JSFiddle - React, Tailwind, and code Playground

by charlescarver

HTML

<script src="http://razorjack.net/quicksand/javascripts/all.js"></script>
<form id="filter">
    <label>
        <input type="radio" name="type" value="all" checked="checked" />All</label>
    <label>
        <input type="radio" name="type" value="art" />Arts and Entertainment</label>
    <label>
        <input type="radio" name="type" value="auto" />Automotive</label>
    <label>
        <input type="radio" name="type" value="edu" />Education</label>
    <label>
        <input type="radio" name="type" value="food" />Food and Dining</label>
    <label>
        <input type="radio" name="type" value="health" />Health and Medicine</label>
    <label>
        <input type="radio" name="type" value="legal" />Legal and Finance</label>
    <label>
        <input type="radio" name="type" value="media" />Media and Communications</label>
    <label>
        <input type="radio" name="type" value="nfp" />Not for Profit</label>
    <label>
        <input type="radio" name="type" value="care" />Personal Care Services</label>
    <label>
        <input type="radio" name="type" value="reail" />Retail</label>
    <label>
        <input type="radio" name="type" value="sports" />Sports &nbsp; Rec</label>
    <label>
        <input type="radio" name="type" value="auto" />Travel and Transportation</label>
</form>
<ul id="applications" class="image-grid">
    <li data-id="id-1" data-type="art">Attractions</li>
    <li data-id="id-2" data-type="art">Casinos</li>
    <li data-id="id-3" data-type="art">Live Theatre</li>
    <li data-id="id-4" data-type="art">Ballet</li>
    <li data-id="id-5" data-type="art">Opera</li>
    <li data-id="id-6" data-type="art">Festivals</li>
    <li data-id="id-7" data-type="art">Concerts</li>
    <li data-id="id-8" data-type="auto">Local Dealer Groups</li>
    <li data-id="id-9" data-type="auto">National Caompaigns</li>
    <li data-id="id-10" data-type="auto">Promotions</li>
    <li data-id="id-11" data-type="edu">Continuing Education</li>
    <li...

CSS

label{
    background-color:#D647BC;
    font-family: MyriadPro-SemiBold, Myriad Pro, Helvetica, Arial;
    font-size:13px;
    color:#fff;
    display:inline-block;
    padding:5px;
    margin:2px;
}

label input{
    display:none;
}

JavaScript

// Custom sorting plugin
(function ($) {
    $.fn.sorted = function (customOptions) {
        var options = {
            reversed: false,
            by: function (a) {
                return a.text();
            }
        };
        $.extend(options, customOptions);
        $data = $(this);
        arr = $data.get();
        arr.sort(function (a, b) {
            var valA = options.by($(a));
            var valB = options.by($(b));
            if (options.reversed) {
                return (valA < valB) ? 1 : (valA > valB) ? -1 : 0;
            } else {
                return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;
            }
        });
        return $(arr);
    };
})(jQuery);

// DOMContentLoaded
$(function () {

    // bind radiobuttons in the form
    var $filterType = $('#filter input[name="type"]');
    var $filterSort = $('#filter input[name="sort"]');

    // get the first collection
    var $applications = $('#applications');

    // clone applications to get a second collection
    var $data = $applications.clone();

    // attempt to call Quicksand on every form change
    $filterType.add($filterSort).change(function (e) {
        if ($($filterType + ':checked').val() == 'all') {
            var $filteredData = $data.find('li');
        } else {
            var $filteredData = $data.find('li[data-type=' + $($filterType + ":checked").val() + ']');
        }

        // if sorted by size
        if ($('#filter input[name="sort"]:checked').val() == "size") {
            var $sortedData = $filteredData.sorted({
                by: function (v) {
                    return parseFloat($(v).find('span[data-type=size]').text());
                }
            });
        } else {
            // if sorted by name
            var $sortedData = $filteredData.sorted({
                by: function (v) {
                    return $(v).find('strong').text().toLowerCase();
                }
            });
        }

        // finally, call quicksand
     ...