punctuated tree navigation #2

by fschwiet

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div>
    <div class="node-level">
        <div data-nodeKey="79e8cfe65a31a19dad3437b35cc8c6c0a68fc038" class="node"><a>Get Low</a>
        </div>
    </div>
    <div class="node-level">
        <div data-parentKey="79e8cfe65a31a19dad3437b35cc8c6c0a68fc038" data-nodeKey="bde9645320fc31796892ecd6c343645b94a1c37d" class="node"><a>entrance</a>
        </div>
        <div data-parentKey="79e8cfe65a31a19dad3437b35cc8c6c0a68fc038" data-nodeKey="c8b03d046e2b3607dcfa63ae86514bec4096ec68" class="node"><a>standoff</a>
        </div>
        <div data-parentKey="79e8cfe65a31a19dad3437b35cc8c6c0a68fc038" data-nodeKey="6a47bcf8274fb74eb51b702e3ada2858a802be7e" class="node"><a>get down</a>
        </div>
        <div data-parentKey="79e8cfe65a31a19dad3437b35cc8c6c0a68fc038" data-nodeKey="2c1cfde1d59441b8d30bba405fd714b90aac43a2" class="node"><a>finish</a>
        </div>
    </div>
    <div class="node-level">
        <div data-parentKey="bde9645320fc31796892ecd6c343645b94a1c37d" data-nodeKey="7a5481c0bcc39eb711780af599a28755419d8d80" class="node"><a>to the floor</a>
        </div>
        <div data-parentKey="bde9645320fc31796892ecd6c343645b94a1c37d" data-nodeKey="eda6bebbf559454f16652393339e26b7cd79c3bb" class="node"><a>stumblin up</a>
        </div>
        <div data-parentKey="c8b03d046e2b3607dcfa63ae86514bec4096ec68" data-nodeKey="e5764c691d41e9b6f38bfd92daeb1faf73ff82d6" class="node"><a>quarantine</a>
        </div>
        <div data-parentKey="c8b03d046e2b3607dcfa63ae86514bec4096ec68" data-nodeKey="55b24694b6da8316e153afa0f9418c6b8f716b1d" class="node"><a>first world drunk</a>
        </div>
        <div data-parentKey="c8b03d046e2b3607dcfa63ae86514bec4096ec68" data-nodeKey="3860e656fc0edcb4285b73629a1845303e8c0b0b" class="node"><a>full health</a>
        </div>
        <div data-parentKey="c8b03d046e2b3607dcfa63ae86514bec4096ec68"...

CSS

.node-level {
    float:left;
    margin: 10px;
}
.selected-path > a {
    background-color: #33FFFF
}
.sibling-option > a {
    background-color: #3300FF
}
.child-option > a {
    background-color: #33FF00
}

[data-nodeKey]:not(.node-visible) {
    display:none;
}

JavaScript

var nodeLinkSelector = "[data-nodeKey] a";

$("body").on("click", nodeLinkSelector, function () {

    $(".node").removeClass("selected-path child-option sibling-option node-visible");

    var clicked = $(this).parent("[data-nodeKey]");

    var nodeKey = clicked.data("nodekey");
    var parentKey = clicked.data("parentkey");
    
    function visitSelected(selected) {
        selected.addClass("selected-path node-visible");
        
        var selectedParentKey = selected.data("parentkey");
        
        if (selectedParentKey) {
            selected.prev("[data-nodeKey][data-parentKey='" + selectedParentKey + "']").addClass("sibling-option node-visible");
            selected.next("[data-nodeKey][data-parentKey='" + selectedParentKey + "']").addClass("sibling-option node-visible");
        }
    }

    visitSelected(clicked);

    while (parentKey) {
        var parent = $("[data-nodekey=" + parentKey + "]");
        visitSelected(parent);
        parentKey = parent.data("parentkey");
    }
    
    var children = clicked.parent(".node-level").next(".node-level").children("[data-parentkey=" + nodeKey + "]");
    
    children.addClass("child-option node-visible");
});

$(nodeLinkSelector + ":eq(0)").click();