Context Menu

What it does

The following examples show the Context Menu plugin in action. Just make a right-click as you are used to in your faviourite OS. The first list item has a context menu defined as a JSON object and passed to the plugin within the JavaScrip. The second one has a menu defined in the HTML accordion to the menu structure for the Foundation DropdownMenu.

For the basic setup, just take any HTML element you want and add an data-context-menu attribute to it. The value depends on the way you want to use this plugin. The possibilities can be found below.

For further information please visit the Project on GitHub.

Currently this plugin is still in development, and thus in a version 0.0.x, which works well with Foundation for sites 6.2.3. It is planned to release the first stable version of this plugin once Foundation for sites version 6.3 is released.

HTML Example

This example uses a predefined HTML list, formed according to the Foundation Dropdown Menu syntax to hold the context menu. You only need to give your context menu list an ID and then reference it in the list's data-context-menu attribute. Notice the leading # to indicate that it points to an HTML element.

<ul class="context menu dropdown vertical" role="menu" id="menu">
  <li role="menuitem"><a href="javascript:alert('Copying...');">Copy</a></li>
  <li role="menuitem"><a href="javascript:alert('Moving...');">Move</a></li>
  <li role="menuitem"><a href="javascript:alert('Deleting...');">Delete</a></li>
</ul>

JSON Example

You can also define the context menu using JSON. Just register the menu type in the plugin and then reference the registered name in the list's data-context-menu attribute.

Foundation.ContextMenu.prototype.addConfig('listitem', {
  accessible: true,
  single: true,
  structure: [{
    text: 'Move to',
    help: 'Alt + M',
    key: 'ALT_M',  
    click: function($item) {
      alert('Moving item: ' + $item.index());
    }
  }, {
    icon: 'fa fa-paper-plane',
    text: 'Send via mail',  
    click: function($item) {
      alert('Sending a mail!');
    }
  }, {
    cssclass: 'divider'
  }, {
    text: 'More...',
    children: [{
      text: 'Delete',
      isDisabled: true,
    }, {
      text: 'Download...',
      children: [{
        text: 'Save as PDF'
      }, {
        text: 'Save as PNG'
      }]
    }]
  }]
});

Creating Context Menus with JS

It is also possible to open context menus on the fly without attaching them to an actual HTML element. This approach is based on the JSON method shown above. Creating the plugin instance on demand might me helpful when dealing with dynamic applications that keep on re-rendering parts of the page.

$('#javascript-example-list li').on('contextmenu', function(event) {
  event.preventDefault();

  var jsContextMenu = new Foundation.ContextMenu($(this), {
    position: event,
    structure: [{
      text: 'Move to',
      click: function($item) {
        alert('Moving item: ' + $item.index());
      }
    }, {
      icon: 'fa fa-paper-plane',
      text: 'Send via mail',  
      click: function($item) {
        alert('Sending a mail!');
      }
    }]
  });
  // Destroy context menu once it's closed
  $(this).one('hide.zf.contextmenu', function() {
    jsContextMenu.destroy();
  });
});

Interacting

To actually do something with the user's interaction, you can use the custom contextselect.zf.contextmenu-event. This will be triggered for the menu's anchor element (i.e. the element containing the data-context-menu-attribute) once an option out of the context menu is chosen. The event carries an object of data that helps you handling the selection:

• element: The menu's anchor element (li-element).
• option: The selected context menu entry (a-element).

Options

The following options can be used.

• single

  If only one menu should be open at a time.

  Default is true.
• accessible

  If ARIA attributes should be added.

  Default is true.
• touchdelay

  Delay for touch event before the menu opens.

  Default is 400.
• screenOffset

  Minimum offset to the screen.

  Default is 10.
• closeOnClick

  If the menu should be closed after clicking an option.

  Default is true.
• emptyEntryWillCloseMenu

  If the menu should be closed if an option without a click function was clicked.

  Default is true.
• position

  Event to display the context menu directly when using pure JS.

  Default is null.