responsivewebframework/src/js/context-menu.js

Jalasoft Foundation Front End Framework ========================================

/*
    global $:false,
        jQuery:false
*/

$(function () {
    'use strict';

    $().customContextMenu(function (event) {
        var menuName = $(this).attr('class').split(' ')[0],
            menu = $('ul[class^="context-menu ' + menuName + '"]');
        $('ul[class^="context-menu"]')
            .not(menu)
            .hide();
        menu.css('left', event.pageX).
            css('top', event.pageY);
        if (menu.css('display') === 'none') {
            menu.show();
        } else {
            menu.hide();
        }
        event.preventDefault();
        event.stopPropagation();
    });

    $('html').click(function (event) {
        if (!$(event.target).closest('ul[class^="context-menu"]').length ||
            $(event.target).closest('ul[class^="context-menu"]').length &&
            !$(event.target).children('ul').length) {
            $('ul[class^="context-menu"]').hide();
        }
    });

    $('html').bind('contextmenu', function (event) {
        var target = $(event.target);
        $('ul[class^="context-menu"]').each(function () {
            var menu = $(this);
            $('.' + $(this).attr('class').split(' ')[1] +
                ':not(ul[class*="context-menu"])').each(function () {
                if ($(this).attr('class') !== target.attr('class')) {
                    menu.hide();
                }
            });
        });
    });

    $('div[class^="context-menu-anchor"]').click(function (event) {
        var menuName = $(this).attr('class').split(' ')[1],
            menu = $('ul[class^="context-menu ' + menuName + '"]');
        $('ul[class^="context-menu "]')
            .not(menu)
            .hide();
        menu.css('left', $(this).offset().left).
            css('top', $(this).offset().top + $(this).height() + 7);
        if (menu.css('display') === 'none') {
            menu.show();
        } else {
            menu.hide();
        }
        event.stopPropagation();
    });
});

(function ($) {
    'use strict';
    $.fn.extend({
        customContextMenu: function (func) {
            var alignMenu = function () {
                var menu = $(this).children('li');
                if (menu.children('span:first-child').length) {
                    menu.each(function () {
                        if (!$(this).children().length ||
                            !$(this).children('span:first-child').length) {
                            $(this).css('padding-left', 40);
                        }
                    });
                }
                menu.each(function () {
                    if ($(this).children('ul').length &&
                        !$(this).children('span:last-child').length) {
                        $(this).append('<span class="icon-next-xbase"></span>');
                    }
                });
                menu.children('ul').each(alignMenu);
            };
            $('ul[class^="context-menu "]').each(function () {
                $(this).each(alignMenu);
                $('.' + $(this).attr('class').split(' ')[1] +
                    ':not(ul[class*="context-menu "])' +
                    ':not(div[class*="context-menu-anchor "])')
                        .each(function () {
                            $(this).bind('contextmenu', func);
                        });
            });
        }
    });
})(jQuery);