Toolbox CSS investigation

by Sky Sigal

HTML

<div class="tools">
    <input id="search" type="text" />
    <input id="go" type="button" value="..." />
    <ul>
        <li>
            <div>Category A</div>
            <ul>
                <li>X</li>
                <li>Y</li>
                <li>Z</li>
                <li>X</li>
                <li>Y</li>
                <li>Z</li>
            </ul>
        </li>
        <li>
            <div>Category B</div>
            <ul>
                <li>X</li>
                <li>Y</li>
                <li>Z</li>
                <li>X</li>
                <li>Y</li>
                <li>Z</li>
            </ul>
        </li>
        <li>
            <div>Category C</div>
            <ul>
                <li>X</li>
                <li>Y</li>
                <li>Z</li>
                <li>X</li>
                <li>Y</li>
                <li>Z</li>
            </ul>
        </li>
    </ul>
</div>

CSS

.tools {
    font-size:0.80em;
    font-family:Arial;
    width:150px;
    border:solid 1px #C0C0C0;
}
.tools ul {
    font-size:1em;
    list-item-type:none;
    padding:0px;
    margin:0px;
    display: inline-block;
}
.tools > ul > li > div {
    background:#202030;
    color:white;
}
.tools > ul > li > ul {
    display: inline-block;
}
.tools > ul > li > ul > li {
    float:left;
    display: inline-block;
    width:24px;
    height:24px;
    border:solid 1px #C0C0C0;
    margin:0.25em;
    text-align:center;
    line-height:24px;
}

JavaScript

var items = [{
    category: 'A',
    title: 'X',
    tags: 'foo'
}, {
    category: 'A',
    title: 'Y'
}, {
    category: 'A',
    title: 'Z'
}, {
    category: 'A',
    title: 'X'
}, {
    category: 'A',
    title: 'Y'
}, {
    category: 'A',
    title: 'Z'
}, {
    category: 'B',
    title: 'X',
    tags: 'foo'
}, {
    category: 'B',
    title: 'Y'
}, {
    category: 'B',
    title: 'Z'
}, {
    category: 'B',
    title: 'X'
}, {
    category: 'B',
    title: 'Y'
}, {
    category: 'B',
    title: 'Z'
}, {
    category: 'C',
    title: 'X',
    tags: 'foo'
}, {
    category: 'C',
    title: 'Y'
}, {
    category: 'C',
    title: 'Z'
}, {
    category: 'C',
    title: 'X'
}, {
    category: 'C',
    title: 'Y'
}, {
    category: 'C',
    title: 'Z'
}];



function filter(f) {
    var filtered = jQuery.grep(
    items,

    function (e, i) {
        var s = e.tags;
        if (!s){return false;}
        var i = s.indexOf(f);
        var r= i >-1;
        return r;
    });
    show(filtered);
}

function show(items) {
    $ul = $('.tools > ul');
    $ul.empty();
    $.map(
        items,
        function (d) {
            addTool(d, $ul);
        });
}

var lastCatText = null;
var $catItem;
var $catItemSubList;


function addTool(d, $ul) {

    $ul = $('.tools > ul');
    //alert($ul.html());

    var catText = d.category;
    if (catText != lastCatText) {
        $catItem = $("<li/>");
        $catItem.append($("<div/>").text(catText));
        $catItemSubList = $("<ul/>");
        $catItem.append($catItemSubList);
        $ul.append($catItem);
        lastCatText = catText;
    }
    $catItemSubList.append($("<li/>").text(d.title));
}

$(function () {
    show(items);
    
    $('#go').click(
        function(){filter( $('#search').val());} );
});