script.js

var RightClick = RightClick || {};

(function(window, $, exports, undefined) {
    'use strict';

    exports.appName = 'files_rightclick';
    exports.selectors = {
        containerId: 'rightClickMenus',
        detectorId: 'rightClickDetector',
        menuId: 'rightClickMenu',
        menuClass: 'rightClickMenu',
        subMenuClass: 'rightClickSubMenu',
        openedClass: 'rightClickOpened',
        arrowClass: 'rightClickArrow',
    };
    exports.handableKeys = [
        'ctrl', 'shift', 'alt'
    ];

    // Object where all options are listed for one (sub)menu
    exports.Options = function (options) {
        this.options = [];

        this.getIndexFromOptionName = function (name) {
            return this.getNbrOfOptions(); // TODO
        };

        // Add one or more options
        this.add = function (options, index) {
            if (!(typeof index === 'number'))
                index = this.getIndexFromOptionName(index);

            if (index === undefined)
                index = this.getNbrOfOptions();

            if (typeof options === 'string' || typeof options === 'number')
                options = new exports.Option(options);

            if (options instanceof exports.Option)
                this.options.splice(index, 0, options);
            else if (options !== undefined && Array.isArray(options)) {
                for (var name in options) {
                    var option = options[name];

                    if (typeof option !== 'function') {
                        if (typeof option === 'string' || typeof option === 'number')
                            option = new exports.Option(option);
                    }

                    if (option instanceof exports.Option)
                        this.options.splice(index, 0, option);
                }
            }

            return this;
        };

        this.prepend = function (options) {
            return this.add(options, 0);
        };

        this.append = function (options) {
            return this.add(options, this.getNbrOfOptions());
        };

        // Generate all html options
        this.generate = function () {
            var ul = $('<ul>');

            for (var name in this.options) {
                var li = this.options[name].generate();

                if (li) {
                    li.addClass('action-' + name);
                    ul.append(li);
                }
            }

            return ul;
        };

        this.getNbrOfOptions = function () {
            return this.options.length;
        };

        this.isDisabled = function () {
            for (var name in this.options) {
                if (!this.options[name].isDisabled())
                    return false;
            }

            return true;
        };

        this.isFirstDisabled = function () {
            if (this.getNbrOfOptions() === 0)
                return true;
            else
                return this.options[Object.keys(this.options)[0]].isDisabled();
        };

        this.add(options);
    };

    exports.Option = function (name, text, icon, onClick, subOptions) {
        this.name = name;
        this.text = text;
        this.icon = icon;
        this.onClick = onClick;
        this.subOptions = subOptions;
        var option = this;

        this.printIfAppEnabled = function (appName) {
            this.appName = appName;
            this.printIfNoApp = false;
        }

        this.enableIfAppEnabled = function (appName) {
            this.appName = appName;
            this.printIfNoApp = true;
        }

        this.generate = function () {
            var a = $('<a>', {
                'class': 'menu-option option-' + this.name.toLowerCase()
            }).css('width', '100%');
            var iconSpan = $('<span>', {
                'class': 'icon ' + this.icon
            });
            var textSpan = $('<span>', {
                'text': this.text,
            });

            if (this.appName && !this.printIfNoApp && !exports.isAppAvailable(this.appName))
                return;

            if (this.isDisabled()) {
                a.attr('disabled', true).css({
                    'cursor': 'default',
                    'background-color': '#AAA'
                });

                iconSpan.css('cursor', 'default');
                textSpan.css('cursor', 'default');
            }

            if (typeof this.onClick === 'string') {
                a.on('click', function (event) {
                    event.stopPropagation();
                    event.preventDefault();

                    var $temp = $("<input>");
                    $("body").append($temp);
                    $temp.val(option.onClick).select();
                    document.execCommand("copy");
                    $temp.remove();

                    var html = textSpan.html();
                    textSpan.html(t('files_rightclick', 'Copied !'));

                    setTimeout(function () {
                        textSpan.html(html);
                    }, 1000);
                });
            }
            else {
                a.on('click', function (event) {
                    event.stopPropagation();
                    event.preventDefault();

                    exports.closeAllMenus();

                    onClick(event, option);
                });
            }


            var li = $('<li>').append(a.append(iconSpan).append(textSpan));

            if (this.subOptions instanceof exports.Options && this.subOptions.getNbrOfOptions() > 0) {
                var sub = $('<a>').append($('<span>').text('▶')
                    .css('padding-right', '10px')).addClass(exports.selectors.arrowClass)
                    .attr('style', 'width: auto; padding-right: 0px !important');

                new exports.Menu(sub, this.subOptions, li).setAsSubMenu().setAlsoOnHover().setAlsoOnLeftClick();
                li.append(sub);
            }

            return li;
        };

        this.isDisabled = function () {
            if (this.appName && !exports.isAppAvailable(this.appName))
                return true;

            return this.onClick === undefined;
        };
    };

    exports.menus = [];
    exports.Menu = function (delimiter, options, context, onClose, handledKeys) {
        this.delimiter = $(delimiter);
        this.context = context;
        this.currentContext = undefined;
        this.options = options || new exports.Options();
        this.onClose = onClose;

        this.isSubMenu = false;

        if (delimiter === undefined)
            return undefined;

        // Allow onClick function to access to menu data
        var menu = this;

        this.setContext = function (context) {
            this.context = context;

            return this;
        };

        this.isOpened = function () {
            return this.element !== undefined;
        }

        this.handleKeys = function (handledKeys) {
            this.handledKeys = {};
            handledKeys = handledKeys || {};

            for (var key in exports.handableKeys) {
                var keyName = exports.handableKeys[key];

                this.handledKeys[keyName] = handledKeys[keyName] || false;
            }
        };
        this.handleKeys(handledKeys);

        var onClick = function (event, originalEvent) {
            for (var key in exports.handableKeys) {
                var keyName = exports.handableKeys[key];
                var targetedEvent = originalEvent || event;

                if (targetedEvent[keyName + 'Key'] && !menu.handledKeys[keyName]) {
                    return true;
                }
            }

            event.stopPropagation();
            event.preventDefault();

            if (originalEvent) {
                event.clientX = originalEvent.clientX;
                event.clientY = originalEvent.clientY;
            }

            var delimiter = $(this);
            var context = menu.context;
            var options = menu.options;
            var params = menu.params;

            if (menu.isSubMenu) {
                if (!exports.closeAllSubMenus()) {
                    return !exports.clean();
                }
            }
            else if (!exports.closeAllMenus()) {
                return !exports.clean();
            }

            if (menu.isOpened()) {
                return !exports.clean();
            }

            exports.prepare();

            menu.attachedEvent = event;

            if (typeof context === "function")
                context = context(event);

            context = (context === undefined) ? delimiter : $(context[0]);
            menu.currentContext = context;

            if (typeof options === "function")
                options = options(event, context, delimiter);

            if (options.getNbrOfOptions() === 0) {
                return !exports.clean();
            }

            var className = exports.selectors.menuClass + ' bubble open';

            menu.element = $('<div>', menu.isSubMenu ? {
                'class': exports.selectord.subMenuClass +  ' ' + className
            } : {
                'id': exports.selectors.menuId,
                'class': className
            }).append(options.generate());

            menu.element.appendTo(exports.container);

            if (menu.isSubMenu) {
                var menuPosition = context.parents('.rightClick').first().position();
                var contextPosition = context.position();
                var top = menuPosition.top - contextPosition.top;
                var left = menuPosition.left + context.width() + 2;
            }
            else {
                var top = event.clientY - parseInt(menu.element.css("marginTop").replace('px', ''));
                var left = event.clientX - parseInt(menu.element.css("marginLeft").replace('px', ''));
            }

            var height = menu.element.outerHeight();
            var width = menu.element.outerWidth();

            if (left + width >= $(window).width()) {
                left -= width;
            }
            if (top + height >= $(window).height()) {
                top -= height;
            }

            if (top < 0) {
                top = 0;
            }
            if (left < 0) {
                left = 0;
            }

            menu.element.css({
                'top': top,
                'left': left,
                'right': 'auto',
            });

            var optionsDisabled = options.isDisabled();

            if (optionsDisabled)
                menu.element.css('background-color', '#AAA');

            menu.element.on('contextmenu', function () {
                return false;
            });
            menu.element.on('mouseleave', function (event) {
                if (menu.isOpenedOnHover)
                    menu.close();
            });

            return false;
        };

        this.close = function () {
            if (!this.isOpened())
                return true;

            if (this.element) {
                if (this.onClose) {
                    if (this.onClose(this.attachedEvent, this.currentContext, this.delimiter) === false)
                        return false;
                }

                this.element.remove();
                delete this.element;

                exports.clean();
            }

            return true;
        };

        this.setAlsoOnLeftClick = function () {
            this.delimiter.on('click', function (event) {
                if (menu.isOpened() && !menu.isOpenedOnHover) {
                    menu.close();

                    return false;
                }

                menu.isOpenedOnHover = false;
            }).on('click', onClick);

            return this;
        };

        this.setAlsoOnHover = function () {
            this.delimiter.on('mouseenter', function (event) {
                menu.isOpenedOnHover = true;
            }).on('mouseenter', onClick);

            return this;
        };

        this.setAsSubMenu = function (isSubMenu) {
            this.isSubMenu = isSubMenu || true;

            return this;
        };

        this.delimiter.contextmenu(onClick);
        exports.menus.push(this);
    };

    exports.closeAllMenus = function () {
        for (var key in exports.menus) {
            if (exports.menus.hasOwnProperty(key)) {
                if (exports.menus[key].close() === false)
                    return false;
            }
        }

        return true;
    };

    exports.closeAllSubMenus = function () {
        for (var key in exports.menus) {
            if (exports.menus.hasOwnProperty(key)) {
                if (exports.menus[key].isSubMenu) {
                    if (exports.menus[key].close() === false)
                        return false;
                }
            }
        }

        return true;
    };

    exports.isAMenuOpened = function () {
        for (var key = 0; key < exports.menus.length; key++) {
            if (exports.menus[key].isOpened()) {
                return true;
            }
        }

        return false;
    };

    exports.prepare = function () {
        if (!exports.isAMenuOpened()) {
            $(window).on('resize', exports.closeAllMenus);
            $('body').addClass(exports.selectors.openedClass);
        }

        $('#' + exports.selectors.detectorId).css('display', 'block');
    }

    exports.onKeyUp = function (event) {
        event = event || window.event;
        var isEscape = false;

        if ("key" in event) {
            isEscape = (event.key == "Escape" || event.key == "Esc");
        } else {
            isEscape = (event.keyCode === 27);
        }

        if (isEscape) {
            if (exports.isAMenuOpened()) {
                exports.closeAllMenus();

                event.stopPropagation();
            }
        }
    };

    exports.clean = function () {
        if (!exports.isAMenuOpened()) {
            $(window).off('resize', exports.closeAllMenus);
            $('body').removeClass(exports.selectors.openedClass);
            $('#' + exports.selectors.detectorId).css('display', 'none');

            return true;
        }

        return false;
    };

    exports.propagateRightClick = function (event) {
        exports.closeAllMenus();
        event.preventDefault();
        event.stopPropagation();

        $(document.elementFromPoint(event.clientX, event.clientY)).trigger('contextmenu', event);
    }

    exports.container = $('<div id="' + exports.selectors.containerId + '"></div>').appendTo('body');
    exports.detector = $('<div id="' + exports.selectors.detectorId + '"></div>').appendTo('body');

    exports.detector.on('click resize', exports.closeAllMenus);
    exports.detector.on('contextmenu', exports.propagateRightClick);

    document.onkeyup = exports.onKeyUp;
})(window, jQuery, RightClick);