*TeamViewer* kendoMenu example

by antouank

HTML

<script src="http://login.teamviewer.com/Scripts/kendo/2012.3.1315-debug/kendo.all.js"></script>
<link rel="stylesheet" href="https://dev-trunk.teamviewer.com//Content/kendo/2012.3.1315/kendo.common.css">
<link rel="stylesheet" href="https://dev-trunk.teamviewer.com//Content/kendo/2012.3.1315/kendo.metro.css">
<div id='testDiv'></div>
<div><ul id='log'></ul></div>

<div id='hidden'>
    <div>
        <ul id='dummyMenu'>
            <li>DummyMenu
                <ul></ul>
            </li>
        </ul>
    </div>
    <div>
        <ul id='menu' class='bottomLeft'>
            <li>realMenu
                <ul>
                    <li class='selection'>ww</li>
                    <li class='selection'>ww</li>
                    <li class='selection'>ww</li>
                    <li class='selection'>ww</li>
                </ul>
            </li>
        </ul>
    </div>
</div>

CSS

.bottomLeft .k-animation-container {
    position: absolute;
    left: auto !important;
    right: -3px;
}

#hidden {
    display: none;
}

#testDiv {
    float: right;
    width: 150px;
    height: 100px;
    border: 1px dotted #444;
}

JavaScript

var $log = $('#log'),
    $dummyMenu = $('#dummyMenu'),
    $menu = $('#menu'),
    $testDiv = $('#testDiv'),
    $hidden = $('#hidden'),
    data = 'wwwwwwwwwwww',
    menuCache;

//    make the dummy menu
$dummyMenu.kendoMenu();
//    make the real menu
menuCache = $menu.kendoMenu({
    openOnClick: true,
    animation: false,
    hoverDelay: 0
});

menuCache.data('kendoMenu').bind("select", function(e) {
    
    data = data === 'ww' ? 'wwwwwwwwwwww': 'ww';
    menuCache.appendTo($hidden);
    //$testDiv.html('</br>');
 });

//    make menus able to swap
$dummyMenu.click(function(){

    clearMenus();
    processMenu(data,menuCache);    // process the menu ( change selections text )
    menuCache.appendTo($testDiv);
    logIt('real menu moved');
    menuCache.data('kendoMenu').open(menuCache.children('li'));
    logIt('real menu opened');
});

//    bind testDiv on enter and leave
$testDiv
.mouseenter(function () {
    
    if($('#testDiv').children().length===0){
        $dummyMenu.appendTo($testDiv);
        logIt('dummy appended to testDiv');
    }
})
.mouseleave(function () {
    
    clearMenus();
});

//    helpers
var clearMenus = function () {
    
    $dummyMenu.appendTo($hidden);
    menuCache.appendTo($hidden);
    logIt('clearDummy(); dummy and real were hidden');
};

var logIt = function(msg){
    
    $log.prepend($('<li>').text(Date().substring(15,24)+': '+msg));
};

var processMenu = function(data, obj){
    // handle the data
    var $lines = obj.find('.selection');
    
    $lines.each(function(i){
        this.textContent = data;
    });
}