API Docs for: 3.8.0
Show:

File: event/js/contextmenu.js

/**
 * Provides extended keyboard support for the "contextmenu" event such that:
 * <ul>
 * <li>The browser's default context menu is suppressed regardless of how the event is triggered.</li>
 * <li>On Windows the "contextmenu" event is fired consistently regardless of whether the user pressed the Menu key or Shift + F10.</li>
 * <li>When the "contextmenu" event is fired via the keyboard, the pageX, pageY, clientX and clientY properties reference the center of the event target. This makes it easy for "contextmenu" event listeners to position an overlay in response to the event by not having to worry about special handling of the x and y coordinates based on the device that fired the event.</li>
 * <li>For Webkit and Gecko on the Mac it enables the use of the Shift + Control + Option + M keyboard shortcut to fire the "contextmenu" event, which (by default) is only available when VoiceOver (the screen reader on the Mac) is enabled.</li>
 * <li>For Opera on the Mac it ensures the "contextmenu" event is fired when the user presses Shift + Command + M (Opera's context menu keyboard shortcut).</li>
 * </ul>
 * @module event-contextmenu
 * @requires event
 */

var Event = Y.Event,
    DOM = Y.DOM,
    UA = Y.UA,
    OS = Y.UA.os,

    ie = UA.ie,
    gecko = UA.gecko,
    webkit = UA.webkit,
    opera = UA.opera,

    isWin = (OS === "windows"),
    isMac = (OS === "macintosh"),

    eventData = {},

    conf = {

        on: function (node, subscription, notifier, filter) {

            var handles = [];

            handles.push(Event._attach(["contextmenu", function (e) {

                // Any developer listening for the "contextmenu" event is likely
                // going to call preventDefault() to prevent the display of 
                // the browser's context menu. So, you know, save them a step.
                e.preventDefault();

                var id = Y.stamp(node),
                    data = eventData[id];

                if (data) {
                    e.clientX = data.clientX;
                    e.clientY = data.clientY;
                    e.pageX = data.pageX;
                    e.pageY = data.pageY;
                    delete eventData[id];
                }

                notifier.fire(e);

            }, node]));


            handles.push(node[filter ? "delegate" : "on"]("keydown", function (e) {

                var target = this.getDOMNode(),
                    shiftKey = e.shiftKey,
                    keyCode = e.keyCode,
                    shiftF10 = (shiftKey && keyCode == 121),
                    menuKey = (isWin && keyCode == 93),
                    ctrlKey = e.ctrlKey,
                    mKey = (keyCode === 77),
                    macWebkitAndGeckoShortcut = (isMac && (webkit || gecko) && ctrlKey && shiftKey && e.altKey && mKey),

                    // Note: The context menu keyboard shortcut for Opera on the Mac is Shift + Cmd (metaKey) + M,
                    // but e.metaKey is false for Opera, and Opera sets e.ctrlKey to true instead.
                    macOperaShortcut = (isMac && opera && ctrlKey && shiftKey && mKey),

                    clientX = 0,
                    clientY = 0,
                    scrollX,
                    scrollY,
                    pageX,
                    pageY,
                    xy,
                    x,
                    y;


                if ((isWin && (shiftF10 || menuKey)) ||
                        (macWebkitAndGeckoShortcut || macOperaShortcut)) {

                    // Need to call preventDefault() here b/c:
                    // 1) To prevent IE's menubar from gaining focus when the
                    // user presses Shift + F10
                    // 2) In Firefox and Opera for Win, Shift + F10 will display a
                    // context menu, but won't fire the "contextmenu" event. So, need
                    // to call preventDefault() to prevent the display of the
                    // browser's context menu
                    // 3) For Opera on the Mac the context menu keyboard shortcut
                    // (Shift + Cmd + M) will display a context menu, but like Firefox
                    // and Opera on windows, Opera doesn't fire a "contextmenu" event,
                    // so preventDefault() is just used to supress Opera's
                    // default context menu.
                    if (((ie || (isWin && (gecko || opera))) && shiftF10) || macOperaShortcut) {
                        e.preventDefault();
                    }

                    xy = DOM.getXY(target);
                    x = xy[0];
                    y = xy[1];
                    scrollX = DOM.docScrollX();
                    scrollY = DOM.docScrollY();

                    // Protect against instances where xy and might not be returned,
                    // for example if the target is the document.
                    if (!Y.Lang.isUndefined(x)) {
                        clientX = (x + (target.offsetWidth/2)) - scrollX;
                        clientY = (y + (target.offsetHeight/2)) - scrollY;
                    }

                    pageX = clientX + scrollX;
                    pageY = clientY + scrollY;

                    // When the "contextmenu" event is fired from the keyboard
                    // clientX, clientY, pageX or pageY aren't set to useful
                    // values. So, we follow Safari's model here of setting
                    // the x & x coords to the center of the event target.

                    if (menuKey || (isWin && webkit && shiftF10)) {
                        eventData[Y.stamp(node)] = { 
                            clientX: clientX,
                            clientY: clientY,
                            pageX: pageX,
                            pageY: pageY
                        };
                    }

                    // Don't need to call notifier.fire(e) when the Menu key
                    // is pressed as it fires the "contextmenu" event by default.
                    //
                    // In IE the call to preventDefault() for Shift + F10
                    // prevents the "contextmenu" event from firing, so we need
                    // to call notifier.fire(e)
                    //
                    // Need to also call notifier.fire(e) for Gecko and Opera since
                    // neither Shift + F10 or Shift + Cmd + M fire the "contextmenu" event.
                    //
                    // Lastly, also need to call notifier.fire(e) for all Mac browsers
                    // since neither Shift + Ctrl + Option + M (Webkit and Gecko) or
                    // Shift + Command + M (Opera) fire the "contextmenu" event.

                    if (((ie || (isWin && (gecko || opera))) && shiftF10) || isMac) {

                        e.clientX = clientX;
                        e.clientY = clientY;
                        e.pageX = pageX;
                        e.pageY = pageY;

                        notifier.fire(e);
                    }

                }

            }, filter));

            subscription._handles = handles;

        },

        detach: function (node, subscription, notifier) {

            Y.each(subscription._handles, function (handle) {
                handle.detach();
            });

        }

    };


conf.delegate = conf.on;
conf.detachDelegate = conf.detach;


Event.define("contextmenu", conf, true);