Context Menu Plugin Scoping

[PeterChaplin]

Design a plugin for custom context menus (replacing browser default context menu)

Acceptance Criteria:

• New ticket raised, specifying more exactly what the API & behaviour of the plugin should be.
• Some way of supporting right-clicking a table to open a "copy table" context menu.
• Some way of supporting the default browser context menu when a text range is selected.

[PeterChaplin]

$('table').contextMenu({
    menuItems: [
        {
            label: "Copy Table",
            onClick: function() {
                // do something
            }
        },
        {
            label: "Copy Cell",
            onClick: function() {
                // do something else
            }
        }
    ]
});

vs

$('table').on('contextmenu', function(event) {
    $(this).contextMenu({
        "Copy Table": function() {
            // do something
        },
        "Copy Cell": function() {
            // do something else
        }
    });
    event.preventDefault();
});

[PeterChaplin]

1. Calling the plugin should open the context menu - leave the developer to handle the required events and conditions
2. Menu items should be specified as an array of objects (JavaScript objects do not, in theory, guarantee ordering, and iterating over an array is clearer).
3. Menu items array could be passed in directly to the plugin, as the first argument. If we need to extend this to an options object later, we can check the object type (ie. polymorphism).

[PeterChaplin]

For a contextmenu event, the default context menu position can be obtained via event.clientX and event.clientY.

[PeterChaplin]

If the plugin only opens the context menu, it makes little sense to call it on an element (or selection). It would make more sense as a utility function, rather than a plugin.

[PeterChaplin]

Suggested usage

$('table').on('contextmenu', function(event) {
    var target = $(this);
    if ( // textrange check ) {
        return true;
    }
    qcode.contextMenu({
        position: [event.clientX, event.clientY],
        menuItems: [
            {
                label: "Copy Table",
                action: function() {
                    target.tableCopy();
                }
            }
        ]
    });
    event.preventDefault();
});

[PeterChaplin]

contextMenu function should:

1. Open a "context menu" div, containing a <ul> of menu items.
2. Absolutely position div based on specified position.
3. When a menu item is clicked, perform the associated action, then close & destroy the context menu.
4. Close and destroy the menu on any "click", "focus", or "scroll" event happening outside the menu.
5. Give the first menu item focus by default
6. Support arrow key & tab navigation between the menu items.

[PeterChaplin]

@bvw do you want to add some input on this, or should I go ahead with with the above design?

[bvw]

Yes please as you see fit.

[PeterChaplin]

Suggested range check:

if ( window.getSelection().rangeCount > 0
     &&  ! window.getSelection().getRangeAt(0).collapsed
    ) {
    return true;
}