New Launchpad Button

This is a replacement for the current launchpad. This gets JSON for the information and builds the menu WHEN USED.

by Trever Shick

HTML

<script src="//s3.amazonaws.com/trevershick-experiments/jquery.hoverIntent.minified.js"></script>
<div>
    <img src="https://www.railinc.com/images/logo.png" /> <span id="chili"></span> 
</div>
<p>Hover over the blue box!</p>

CSS

#chili {
    /*position to the right*/
    min-width:300px;
    margin-right:50px;
    float:right;
    text-align:right;
    font-family:"Arial", "sans-serif";
    font-size:10pt;
    line-height:24px;
}
#chili-user {
    margin-right:10px;
}
#chili-bean {
    /*reset chili sizing*/
    line-height;
    10px;
    text-align:left;
    display:inline-block;
    width:25px;
    height:25px;
    list-style:none;
    padding:0;
    margin:0;
    background-color:rgb(61, 106, 162);
}
#chili-bean li {
    display:inline-block;
    list-style:none;
    position:relative;
    /* important */
}
#chili-tgr {
    font-family:"Arial Black", "Arial Black", "Gadget", "sans-serif";
    display:inline-block;
    line-height:24px;
    text-align:center;
    width:24px;
    height:24px;
    margin:0px;
    padding:0px;
    font-weight:bold;
    color:white;
    border:1px solid rgb(100, 100, 162);
    text-decoration:none;
    cursor:pointer;
}
#chili-pad {
    background-color:white;
    font-weight:normal;
    font-size:8pt;
    margin:0px;
    padding:5px;
    display: none;
    border:1px solid rgb(61, 106, 162);
    position: absolute;
    width:300px;
    left:-286px;
    top:25px;
}
#chili-pad.chili-hovering {
    /* this is the magic really, called by addMega */
    display: block;
}
#chili-pad h2 {
    padding:0;
    margin:0;
    font-size:10pt;
    font-weight:bold;
    margin-bottom:5px;
    border-bottom:1px solid silver;
}
#chili-pad ul {
    float:left;
    width:125px;
    margin:0px;
    padding:0px;
    margin-left:5px;
    margin-top:10px;
}
#chili-pad li {
    display:block;
    line-height:15px;
    margin:0px;
}

JavaScript

$(document).ready(function () {
    var loaded = false;
    var mockapps = {
        user: {
            id: 'xxxxxxxx',
            employer: 'Railinc Corporation'
        },
        applications: [{
            url: 'http://www.railinc.com/loa',
            name: 'Letter of Authorization'
        }, {
            url: 'http://www.railinc.com/pups',
            name: 'PUPS'
        }],
        categories: [{
            name: 'Administration',
            links: [{
                url: 'http://www.railinc.com/rsso/pr',
                name: 'Permission Requests'
            }]
        }, {
            name: 'My Account',
            links: [{
                url: 'http://www.railinc.com/rsso/edit',
                name: 'Change My Password'
            }, {
                url: 'http://www.railinc.com/rsso/edit',
                name: 'Edit My Profile'
            }]
        }]
    };

    function signedIn(el) {
        return function (data) {
            data = mockapps;

            $("#chili-user").html(data.user.id + " - " + data.user.employer);
            el.html("");
            /* build the contnet here from the json we got. */
            if (data.applications) {
                var items = [];
                items.push('<li><h2>Applications</h2></li>');
                $.each(data.applications, function (k, v) {
                    items.push('<li class="chili-app">' + v.name + '</li>');
                });
                console.log("append html " + items.join(""));
                var u = $('<ul/>');
                u.html(items.join(''));
                el.append(u);
            }
            if (data.categories) {
                $.each(data.categories, function (k, cat) {
                    var items = [];
                    items.push('<li><h2>' + cat.name + '</h2></li>');
                    $.each(cat.links, function (k2, v) {
                        items.push('<li class="chili-app">' + v.name + '</li>');
                    });
       ...