Dynamic Menu

will be used in partnership with some angular view controller

by simonmeaden

HTML

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="JavaScript1.js"></script>
    <img id="planets" src="http://www.w3schools.com/tags/planets.gif" usemap="#planetmap">
    <map name="planetmap" width="145" height="126" alt="Planets">
        <area id="planetmap_AreaSun" shape="rect" coords="0,0,82,126" href="http://www.w3schools.com/tags/sun.htm" alt="Sun">
        <area id="planetmap_AreaMercury" shape="circle" coords="90,58,3" href="http://www.w3schools.com/tags/mercur.htm" alt="Mercury">
        <area id="planetmap_AreaVenus" shape="circle" coords="124,58,8" href="http://www.w3schools.com/tags/venus.htm" alt="Venus">
    </map>
    <table>
        <tr>
            <td>
                <ul class="context-menu" id="my_custom_menu">
                    <!--style="display:none;"-->
                    <li>Strawberry</li>
                    <li>Raspberry</li>
                </ul>
            </td>
        </tr>
    </table>
        <!--<button id="button_ShowMenu2" onclick="setMenu('my_custom_menu', this, dynamicMenu())" type="button">Show Menu</button> -->
        <button id="button_ShowMenu" type="button">Show Menu</button>
        <button id="button_HideMenu" onclick="hideMenu()" type="button">Hide Menu</button>

</body>

CSS

.context-menu {
    /*position: absolute;*/
    display: block;
    background-color: #f2f2f2;
    border-radius: 4px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    min-width: 150px;
    border: 1px solid #d4d4d4;
    z-index:1200;
    list-style-type: none
}
.context-menu ul {
    list-style-type: none;
    margin: 4px 0px;
    padding: 0px;
    cursor: default;
}
.context-menu ul li {
    padding: 4px 16px;
}
.context-menu ul li:hover {
    background-color: #4677f8;
    color: #fefefe;
}

a:hover, a:hover span {
    color:#9A1A4A;
}

JavaScript

function hideMenu() {
    console.log("hideMenu entered");
    var sMenuId = $('body').data('data-activeMenu');
    if (sMenuId !== '') {
        var jqMenu = $('#' + sMenuId);

        if (jqMenu) {
            jqMenu.css('display', 'none');
        } else {
            alert("menu (ul) id '" + sMenuId + "' not found!");
        }
    } else {
        alert("menu id '" + sMenuId + "' is null!");
    }
}

$(document).ready(function () {

    wireUpContextMenu('#planetmap_AreaVenus');
    wireUpButton();
    //alert("run");

    function dynamicMenu() {
        var fruits = [{
            itemText: "Apple",
            href: "http:\/\/images.clipartpanda.com\/teacher-apple-clipart-apple-clipartclipart---simple-red-apple-3e7q8rci.png"
        }, {
            itemText: "Orange",
            href: "http:\/\/www.google.com"
        }, {
            itemText: "Banana",
            href: "http:\/\/www.bbc.co.uk"
        }, {
            itemText: "Grape",
            href: "http:\/\/www.hotmail.com"
        }];
        return fruits;
    }


    function wireUpContextMenu(elementId) {
        var elementForMenuLaunch = $(elementId);
        if (elementForMenuLaunch) {
            elementForMenuLaunch.bind('contextmenu', function (e) {
                e.preventDefault();
                var lPixelLeft = this.offsetLeft;
                var lPixelTop = this.offsetTop;
                setMenuInner('my_custom_menu', lPixelLeft, lPixelTop, dynamicMenu());
                
                //alert('The eventhandler will make sure, that the contextmenu doesn\'t appear.');
            });

        } else {
            alert("elementForMenuLaunch '" + elementId + "'is not found!");
        }
    };

    function navigateTo(e) {
        console.log("hideMenu entered");
        hideMenu();
        var href = jQuery.data(this, 'data-href');
        console.log("called navigateTo " + href);
        window.location.href = href;  
    }




    function setMenuInner(sMenuId,...