Node List Menu

Click on the node to make the menu appear

by jamesdh

HTML

<script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone.js"></script>
<div id="holder"></div>

CSS

body {
    background: #FFF;
    color: #fff;
    font: 300 100.1% "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
}
#holder {
    height: 600px;
    left: 50%;
    margin: -300px 0 0 -300px;
    position: absolute;
    top: 50%;
    width: 600px;
}

JavaScript

var MapListView = Backbone.View.extend({

    initialize: function() {
        this.items = this.options.items;
        this.R = this.options.R;
        this.node = this.options.node;
    },
    
    render: function() {
        var nodeBbox = this.node.getBBox();
        var x = nodeBbox.x + nodeBbox.width + 50;
        var y = nodeBbox.y + nodeBbox.height/2 - 15*this.items.length;
        this.R.setStart();
        _.each(this.items, function(item, index) {
            var offsetY = y + (30*index) + 15;
            var icon = this.R.image(item.icon, x, offsetY - 5, 20, 20);
            icon.attr({'cursor': 'pointer'});
            var text = this.R.text(x + 28, offsetY + 6, item.name);
            text.attr({'text-anchor': 'start', 'font-size': '11', 'cursor': 'pointer'});
            var listItem = this.R.set();
            listItem.push(icon);
            listItem.push(text);
            /*listItem.hover(function() {
                var textBBox = text.getBBox();
                var textUnderline = this.R.path("M" + textBBox.x + " " + (textBBox.y + textBBox.height) + "L" + (textBBox.x + textBBox.width) + " " + (textBBox.y + textBBox.height));
                listItem.push(textUnderline);
            }, null, this);*/
            listItem.click(function() {
                item.onclick.call(this);                    
            });
        }, this); 
        this.list = this.R.setFinish(); 
        var bbox = this.list.getBBox();
        var background = this.R.rect(bbox.x - 8, bbox.y - 8, bbox.width + 16, bbox.height + 16, 5);
        background.attr({opacity: .2, fill: '#3C9BD2'});
        this.list.toFront();
        this.list.push(background); 
    },
    
    clear: function() {
        this.list.animate({opacity: 0}, 300, ">", _.bind(function() {
            this.list.remove();
            this.chart = null;
        }, this));
    }
    
});


var raph = Raphael("holder", 600, 600);
var icon =...