JSFiddle - React, Tailwind, and code Playground

by Admiral Potato

HTML

<script type="text/template" id="assetTemplate" class="template">
    <li class="#classList#">
        <a href="#link#">
            <span class="icon"><img src="#image#" /></span>
            <span class="title">#title#</span>
            <span class="description">#description#</span>
        </a>
    </li>
</script>
<script type="text/template" id="filterTemplate" class="template">
    <li><a id="filter-#index#" class="filter">#name#</a></li>
</script>

<ul id="filterList"></ul>
<ul id="assetList"></ul>

CSS

*{
    font-family: sans-serif;
    font-size: 11px;
}
.hidden{
    display: none;
}
#filterList,
#assetList{
    list-style: none;
    overflow: hidden;
}
#filterList{
    background-color: #666;
}
#filterList li{
    width: 20%;
    float: left;
}
#filterList li a{
    color: #ccc;
    display: block;
    cursor: pointer;
    text-align: center;
    line-height: 24px;
    font-size: 12px;
}
#filterList li a:hover{
    color: #fff;
    background-color: #999;
}


#assetList li{
    width: 32%;
    margin: 8px 8px 0 0;
    float: left;
}

#assetList li a{
    display: block;
    border: 1px solid #000;
    height: 88px;
    color: #000;
    text-decoration: none;
}

#assetList .icon{
    display: block;
    position: absolute;
    width: 56px;
    height: 48px;
    padding: 8px;
    text-align: center;
}
#assetList .icon img{
    border: 1px solid #000;
}
#assetList .title{
    display: block;
    margin: 8px 8px 0 72px;
    padding: 4px;
    font-weight: bold;
    background-color: #f90;
}
#assetList .description{
    display: block;
    margin: 0 8px 8px 72px;
    padding: 4px;
    background-color: #f90;
    height: 42px;
}

JavaScript

var $doc = $(document),
    templateMap = {};

var makeTemplate = function(index, element){
    templateMap[element.id] = element.innerText;
};

$('.template').each(makeTemplate);
console.log(templateMap);

var useTemplate = function(templateName, data) {
    var template = templateMap[templateName], output, search, searchRegex, replace;
    if(template !== undefined && data !== undefined){
        output = template;
        for(search in data){
            if(data.hasOwnProperty(search)){
                replace = data[search];
                searchRegex = new RegExp('#' + search + '#', 'g');
                output = output.replace(searchRegex, replace);
            }
        }
    }
    return output;
}



var assetData,
    $filters = $('#filterList'),
    $assets = $('#assetList');

var handleData = function(data) {
    var index,
        list = data.categoryList,
        length = list.length,
        item,
        template = 'filterTemplate';
    console.log(data);
    assetData = data;
    //build filter categories from data
    for (index = 0; index < length; index += 1) {
        item = {
            index: index,
            name: list[index]
        };
        $filters.append(useTemplate(template, item));
    }
    
    
    list = data.assetList;
    length = list.length;
    template = 'assetTemplate';
    //build assets from data
    for (index = 0; index < length; index += 1) {
        item = list[index];
        var b = [];
        for (a = 0; a < item.categories.length; a += 1) {
            b.push(data.categoryList[item.categories[a]]);
        }
        
        item.classList = b.join(' ');
        $assets.append(useTemplate(template, item));
    }
};

var filterData = function(event) {
    console.log(event.currentTarget);
    assetData.categoryList
    var index,
        list = assetData.categoryList,
        length = list.length,
        item;
    $assets.find('li').addClass('hidden');
    var show =...