Facets

by nathanziarek

HTML

<script src="http://draggabilly.desandro.com/draggabilly.pkgd.min.js"></script>
<div class="facet-group ng-scope" data-ng-controller="ProductFilterController">
    <div class="facet is-open" data-test-class="category-facet">
        <div class="facet-title">Categories</div>
        <div class="facet-content">
            <ul>
                <li class="state-undo">	<a href="#">Any Category</a>

                    <ul>
                        <li class="state-undo">	<a href="#">Healthcare Clinical</a>

                            <ul>
                                <li class="state-undo">	<a href="#">Resident Monitoring</a>

                                    <ul>
                                        <li class="state-selected">	<span>Alarm Accessories</span>

                                            <ul>
                                                <li>	<a href="#">Clips</a>&nbsp;<span class="result-count">(14)</span>

                                                </li>
                                                <li>	<a href="#">Boots &amp; Straps</a>&nbsp;<span class="result-count">(12)</span>

                                                </li>
                                                <li>	<a href="#">Cords</a>&nbsp;<span class="result-count">(11)</span>

                                                </li>
                                                <li>	<a href="#">Mounts</a>&nbsp;<span class="result-count">(2)</span>

                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="facet is-open">
        <div class="facet-title">Brand / Manufacturer</div>
        <div class="facet-content">
    ...

CSS

@import"//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css";
 body {
    font-family: Open Sans;
    font-size: 13px;
    background: #f2f2f2
}
a {
    text-decoration: none;
    color: #0066cc
}
a:hover {
    text-decoration: underline;
    color: #0044aa
}
.facet {
    height: auto;
    overflow: hidden;
}
.facet-title {
    color: #666;
    font-weight: 600;
    padding-left: 20px;
    position: relative;
    cursor: pointer;
}
.facet-title:before {
    content:"\f056";
    font-family: FontAwesome;
    color: #B9C2CB;
    font-size: 14px;
    position: absolute;
    top: 2px;
    left: 0
}
.facet-content {
    margin-left: 20px;
}
.facet-content ul {
    list-style: none;
    margin: 0;
    padding: 0
}
.state-undo > a {
    font-size: .9em;
}
.state-undo > a:before {
    content:"« ";
}
.facet-content ul ul {
    margin-left: 10px;
}
.state-selected > span {
    font-weight: 600;
}
li {
    margin: 8px 0;
    line-height: 1.1em
}
.facet + .facet {
    margin-top: 12px;
    border-top: 1px #d7d7d7 dotted;
    padding-top: 12px;
}
.result-count {
    color: #999;
    font-size: .9em;
}
.facet-group {
    width: 200px;
}
.facet-content-full {
    display: none
}
.is-closed {
    height: 18px;
}
.is-closed .facet-title:before {
    content:"\f055";
}
.facet-view-all {
    margin-left: 20px;
    color: #0066cc;
    font-size: .9em;
    cursor: pointer;
}
.facet-view-all:after {
    content:" »";
}
.facet-content-full.is-open {
    display: block;
    width: 100%;
}
.facet-content-full ul {
    list-style: none;
    margin: 0 0 0 20px;
    padding: 0
}
.facet-content-full .heading {
    font-weight: bold;
    display:none;
}
.facet-content-full.is-open + .facet-view-all {
    display: none;
}
.multi-select li:before {
    content:"\f00c";
    font-family: FontAwesome;
    margin-right: 4px;
    color: #ccc;
}
.multi-select li a:hover:before {
    text-decoration: none;
}
.facet-content .slider-widget {
    border: 1px solid #bbb;
   ...

JavaScript

$(".facet-title").click(collapser);

function collapser(e) {
    var p = $(e.currentTarget).parent(".facet");
    $(p).toggleClass("is-closed is-open");
}

$(".facet-view-all").click(function () {
    $(".facet-content-full").toggleClass("is-closed is-open");
});

$(".slider-widget").each(function (i, d) {

    if ($(d).attr("id") == undefined) {
        $(d).attr("id", "slider" + i);
    }
    var id = "#" + $(d).attr("id");

    var sliderWidth = $(d).width() - 16;

    var otherLoc = 0;
    var minNum = parseFloat($(d).parent().attr("data-min"));
    var maxNum = parseFloat($(d).parent().attr("data-max"));
    var jumpNum = findJump();
    var numUnit = $(d).parent().attr("data-unit");
    var numDiff = maxNum - minNum;
    var gridX = sliderWidth / (numDiff / jumpNum);

    $(".slider-node", d).each(function (num, elem) {
        $(elem).attr("id", $(d).attr("id") + "node" + num);
        var sliderId = "#" + $(d).attr("id");
        var dragger = new Draggabilly($(elem).get(0), {
            axis: 'x',
            containment: id,
            grid: [gridX, 20]
        });
        if (num == 1) {
            $(elem).css({
                "left": sliderWidth - ($(elem).outerWidth() - 16)
            })
        }
        dragger.on('dragStart', setOther);
        dragger.on('dragMove', isMoving);
    });

    function setOther(instance, event, pointer) {
        var id = $(instance.element).attr("id");
        if (id.match("node0")) {
            var id2 = id.replace("node0", "node1");
        } else {
            var id2 = id.replace("node1", "node0");
        }
        otherLoc = $("#" + id2).position().left;
    }

    function isMoving(instance, event, pointer) {
        var percentage = instance.position.x / sliderWidth;
        var left = Math.min(percentage, otherLoc / sliderWidth);
        var right = Math.max(percentage, otherLoc / sliderWidth);
        $(".slider-selected").css({
            left: (left * 100) + "%",
            right: ((1 - right) *...