MooTools - Table with 'DataObjects'

by pythondave

HTML

<script src="https://github.com/czukowski/mootools-ToolTip/raw/master/Source/ToolTip.js"></script>
<p>Hover over the table...</p>
<table id="eTableStudents">
    <thead>
        <tr>
            <th>Student</th>
            <th>House</th>
            <th>Tutor Group</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td objectType='student' info="{dwPersonId:1234}">Fred Astaire</td>
            <td objectType='house' info="{house:'r'}">Red</td>
            <td objectType='tutorGroup' info="{tutorGroup:'ABC'}">Class ABC</td>
            <td>test</td>
        </tr>
        <tr>
            <td objectType='student' info="{dwPersonId:1235}">Ginger Rogers</td>
            <td objectType='house' info="{house:'o'}">Orange</td>
            <td objectType='tutorGroup' info="{tutorGroup:'XYZ'}">Class XYZ</td>
            <td>test</td>
        </tr>
    </tbody>
</table>

CSS

table {margin: 100px 0 0 150px;}

th {
    background-color: PowderBlue;
    font-weight: bold;
}

th, td {
    white-space: nowrap;
    font-size: 12px;
    border: 1px black solid;
    padding: 2px;
}

/**
 * CSS arrows Based on Jon Rohan's post Creating Triangles in CSS
 * @see http://www.dinnermint.org/css/creating-triangles-in-css/
 */
.css-arrow-left {
    border-color: transparent #000 transparent transparent;
    border-style: solid;
    border-width: 10px 20px 10px 0;
    height: 0;
    margin: 10px 0;
    width: 0;
}
.css-arrow-down {
    border-color: #000 transparent transparent;
    border-style: solid;
    border-width: 20px 20px 0;
    height: 0;
    margin: 0 10px;
    width: 0;
}
.css-arrow-up {
    border-color: transparent transparent #000;
    border-style: solid;
    border-width: 0 20px 20px;
    height: 0;
    margin: 0 10px;
    width: 0;
}
.css-arrow-right {
    border-color: transparent transparent transparent #000;
    border-style: solid;
    border-width: 10px 0 10px 20px;
    height: 0;
    margin: 10px 0;
    width: 0;
}
.tooltip {
    background: #000;
    border-radius: 5px;
    box-shadow: 2px 2px 10px rgba(0,0,0,.3);
    color: #fff;
    max-width: 640px;
    padding: 5px 8px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-box-shadow: 2px 2px 10px rgba(0,0,0,.3);
    -webkit-box-shadow: 2px 2px 10px rgba(0,0,0,.3);
}
.tooltip a {
    color: #fff;
}
.tooltip div.close {
    background: url(tooltip-close.png) no-repeat;
    border: 1px solid #000;
    float: right;
    height: 6px;
    margin-left: 5px;
    width: 7px;
}
.tooltip div.close:hover {
    border-style: outset;
}

JavaScript

main();

function main() {
    //add td mouseover events (usibng event delegation)
    $('eTableStudents').addEvent('mouseover:relay(td[info])', function() {
        console.log(this.get('text'));
        new DataObject({element:this});
    });
}

var DataObject = new Class({
    initialize: function(options) {
        _this = this;
        
        //options
        this.element = options.element;

        this.objectType = this.element.get('objectType');
        this.info = this.element.get('info');
        this.options = JSON.decode(this.info);
        
        switch (this.objectType) {
            case 'student': this.object = new Student(this.options); break;
            case 'house': this.object = new House(this.options); break;
            case 'tutorGroup': this.object = new TutorGroup(this.options); break;
        }
        
        this.addToolTip();
    },
    addToolTip: function() {
        this.object.getData(function(object) {
            ToolTip.instance(_this.element,
                { position: {position: 'bottom', edge: 'top'}, offset: '0' },
                object.toSpanElement()
            ).show();
        });
    }
});

var Student = new Class({
    initialize: function(options) {
        //options
        this.dwPersonId = options.dwPersonId;
    },
    getData: function(options) {
        //options
        if (typeof(options) == 'function') { options.callback = options; }
        this.callback = options.callback;

        //replicate getting the corresponding data
        switch (this.dwPersonId) {
            case 1234:
                this.fullName = 'Fred Astaire';
                this.imageUrl = "http://t2.gstatic.com/images?q=tbn:ANd9GcSwRwGSg3az2sxAZ5hLt3mPfL7sv3LeD3iYh1IHBMiL0wEFgXyF2U8ILgn_sQ";
                this.attendancePercentage = 100;
                break;
            case 1235:
                this.fullName = 'Ginger Rogers';
                this.imageUrl =...