Wijmo 5 - Context Menu

Shows how to: - implement a context menu using the ListBox control

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://prerelease.componentone.com/wijmo5/latest/controls/wijmo.min.js"></script>
<script src="http://prerelease.componentone.com/wijmo5/latest/controls/wijmo.input.min.js"></script>
<link rel="stylesheet" href="http://prerelease.componentone.com/wijmo5/latest/styles/wijmo.min.css">
<h1>Wijmo Context Menu</h1>

<p>
    The elements below have context menus.
    Right-click any of them to see the menus.</p>

<div id="m1" class="box">
    I have a context menu!
</div>

<p></p>

<div id="m2" class="box" style="margin-left:40px">
    me too!
</div>

<p></p>

<div id="m3" class="box" style="float:right;margin-top:200px">
    and I have a context menu.
</div>

CSS

.box {
    display: inline-block;
    background-color: yellow;
    padding: 12px;
    border: 1px solid black;
}

JavaScript

onload = function () {

    // create context menu
    var menu = createContextMenu('New,Open,Close,Save,Save As,Exit'.split(','), function (option) {
        alert('thanks for selecting option **' + option + '**');
    });
    
    // attach context menu to elements on the page
    for (var id = 1; id <= 3; id++) {
        var element = document.getElementById('m' + id);
        element.addEventListener('contextmenu', function (e) {
            e.preventDefault();
            showPopup(menu, e);
        });
    }
    
    // create a context menu element using a ListBox control
    function createContextMenu(options, callback) {
        var menu = document.createElement('div'),
            lb = new wijmo.input.ListBox(menu);
        lb.itemsSource = options;
        lb.selectedIndex = -1;
        menu.addEventListener('click', function (e) {
            menu.style.visibility = 'hidden';
            callback(lb.selectedItem);
            lb.selectedIndex = -1;
        });
        menu.addEventListener('keydown', function (e) {
            if (e.keyCode == wijmo.Key.Escape) {
                menu.style.visibility = 'hidden';
            }
        });
        menu.addEventListener('blur', function (e) {
            setTimeout(function() {
                menu.style.visibility = 'hidden';
            }, 300);
        });
        return menu;
    }
    
    // show an element as a popup
    function showPopup(popup, ref) {
        
        // make sure popup is a child of the body
        if (!popup.parentElement) {
            document.body.appendChild(popup);
        }
        
        // calculate popup position
        var sz = popup.getBoundingClientRect(),
            left = ref.clientX - sz.width / 2,
            top = ref.clientY - sz.height / 2;
        
        // make sure popup is visible
        left = Math.max(0, Math.min(left, innerWidth - sz.width));
        top = Math.max(0, Math.min(top, innerHeight - sz.height));
        
        // show the popup
...