API Docs for:
Show:

Y.ContextMenuView Class

Defined in: gallery-js/contextmenu-view.js:1
Module: gallery-contextmenu-view

This module includes a Y.View class extension that attaches to an existing "trigger" Node and uses event delegation to listen for "contextmenu" requests (i.e. right-click). When the context menu is invoked, a Y.Overlay object is rendered and displayed as a popup that includes user-defined menu items that are related to the context where the menu was invoked.

This view utilizes several attributes and fires several events that users can listen to in order to take specific actions based on the "trigger target" node.

Please refer to the trigger ATTRIBUTE for more description of the target.node and target.trigger.

Usage

To configure a bare-bones basic contextmenu, you need to provide the trigger and menuItems attributes as;

var cmenu = new Y.ContextMenuView({
   trigger: {
       node:   Y.one(".myExistingContainer"),
       target:  'li'
   },
   menuItems: [ "Add", "Edit", "Delete" ]

});

The menuItems can be simple entries or Objects, if they are Objects the "label" property will be used to fill the visible Menu (See menuItems).

Attributes / Events

An implementer is typically interested in listening to the following ATTRIBUTE "change" events;

  • selectedMenuChange : which fires when a contextmenu choice is clicked (see selectedMenu)
  • contextTargetChange: which fires when the user "right-clicks" on the target.node (see contextTarget)

Additionally please refer to the Events section for more information on available events.

Methods

_buildOverlayContent

() HTML private

Defined in gallery-js/contextmenu-view.js:231

Method that is used to create the bodyContent for the Overlay instance of this popup menu. Can be used via the old method of defining ATTR menuItemTemplate or the new method that uses Y.Template to render the content (See ATTR menuTemplate for details).

Returns:

HTML:

_clearDOMSelection

() private

Defined in gallery-js/contextmenu-view.js:365

Helper method to clear DOM "selected" text or ranges

_onContextMenu

(
  • e
)
private

Defined in gallery-js/contextmenu-view.js:295

Handler for right-click event (actually "contextmenu" event) on trigger.node.

Parameters:

  • e EventTarget

    Y.Event target object created when "context" menu fires

_selectMenuItem

(
  • e
)
private

Defined in gallery-js/contextmenu-view.js:326

Process a "click" event on the Content Menu's Overlay menuItems

Parameters:

  • e EventTarget

_valOverlay

() Y.Overlay private

Defined in gallery-js/contextmenu-view.js:191

Default value setter for attribute overlay, creates a Y.Overlay widget to display the menu within

Returns:

Y.Overlay:

destructor

() protected

Defined in gallery-js/contextmenu-view.js:125

Clean up listeners and destroys the Overlay

hideOverlay

() public

Defined in gallery-js/contextmenu-view.js:178

Method that hides the Overlay for this contextmenu and fires the contextMenuHide event

initializer

() protected

Defined in gallery-js/contextmenu-view.js:107

Initializer where we define initial handlers to invoke this view and to hide the Overlay

render

() protected chainable

Defined in gallery-js/contextmenu-view.js:149

Returns:

this

showOverlay

(
  • e
)
public

Defined in gallery-js/contextmenu-view.js:160

Displays the View container (i.e. overlay) with the event target from the on "contextmenu" event

Parameters:

  • e EventFacade

    Passed in event facade for the "contextmenu" event

Properties

_overlayDX

Integer protected

Defined in gallery-js/contextmenu-view.js:89

Sets an increment that the Overlay box will be positioned relative to the e.target "x-coordinate"

Default: 5

_overlayDY

Integer protected

Defined in gallery-js/contextmenu-view.js:98

Sets an increment that the Overlay box will be positioned relative to the e.target "y-coordinate"

Default: 11

_subscr

Array protected

Defined in gallery-js/contextmenu-view.js:78

A placeholder to hold subscriber EventHandles so they can be destroyed properly

Default: null

events

Object public

Defined in gallery-js/contextmenu-view.js:40

Y.View's events static property, where we define a "click" listener on Nodes in the container that are the MenuItem nodes. *

template

String public

Defined in gallery-js/contextmenu-view.js:53

Default HTML template for the container's content (the outer DIV) for the Y.Overlay

Default: '<div class="yui3-contextmenu-overlay"></div>'

templateMicro

String public

Defined in gallery-js/contextmenu-view.js:62

Defines the Overlay's bodyContent template, i.e. the popup menu HTML, as a series of DIV's wrapped in an outer DIV

Default: See Code

Attributes

container

Node

Defined in gallery-js/contextmenu-view.js:383

Container Node where the menu's Overlay will be rendered into. If not provided, the default will create a container from the template setting.

This is usually only set when the user has a specific Overlay container design they wish to utilize.

Default: Y.Node.create(this.template)

contextTarget

Node

Defined in gallery-js/contextmenu-view.js:429

Set to the returned target within the trigger.node container that the "contextmenu" event was initiated on (e.g. for a DataTable this may be a specific TR row within the table body).

Default: null

menuItems

Array

Defined in gallery-js/contextmenu-view.js:455

Array of "menu" items as either {Strings} or {Objects} to add to the Menu.

When {Objects} are included, as a minimum they must include a label property that contains the text to display in the menu.

Default: []

Example:

menuItems: [ "one", "two", "three", "four" ] menuItems: [ "Insert", "Update", {label:"Delete", confirm:true}, "... More" ] menuItems: [ {label:"Foo", value:100}, {label:"Bar", value:105}, {label:"Baz", value:200} ]

menuItemTemplate

String

Defined in gallery-js/contextmenu-view.js:443

Overrideable HTML template to use for creating each menuItem entry in Overlay. Must include "data-cmenu"

Default: '<div class="{menuClass}" data-cmenu="{menuIndex}">{menuContent}</div>'

menuTemplate

Object

Defined in gallery-js/contextmenu-view.js:473

Defines a Y.Template structure to process and prepare the Overlay's bodyContent HTML. The REQUIRED properties within this Object are template and options. Implementers can define whatever other properties they like that work with the template they define. Optional properties that are recognized include menuClass, menuItemClass and menuItemText.

Custom implementers are advised to review the templateMicro default property and _buildOverlayContent methods carefully. As a minimum, this View expects the data-cmenu HTML attribute to be set on each item and listens for click events on the yui3-contextmenu-menuitem CSS class.

Default: null

Example:

  // Define contents as UL items ... rendered using Template.Micro
  menuTemplate:{
      template: '<ul class="myCMenu">'
              + '<% Y.Array.each( this.options, function(r,i){ %>'
              + '<li class="<%= this.menuItemClass %>" data-cmenu="<%= i %>" ><%= r.label %></li>'
              + '<% },this); %></ul>',
      options: [
       { label:'Menu 1', value:'m1' }, { label:'Menu 2', value:'m2' },{ label:'Menu 3', value:'m3' }
      ],
      menuItemClass:'yui3-contextmenu-menuitem'
  }

offsetXY

Array

Defined in gallery-js/contextmenu-view.js:518

Sets the XY position offset that the Overlay will be positioned to relative to the contextmenu click XY coordinate.

Default: [5,11]

overlay

Y.Overlay

Defined in gallery-js/contextmenu-view.js:505

Y.Overlay instance used to render the pop-up context menu within

Default: See _valOverlay

selectedMenu

Object obj

Defined in gallery-js/contextmenu-view.js:531

Set to the "selected" item from the pop-up Overlay menu when clicked by user, where this attribute is set to an object containing the EventTarget of the selection and the resulting menuitem and menuindex that corresponds to the selection.

This is set by the method _selectMenuItem.

Set to an {Object} with the following properties;

  • evt Event target from "click" selection within displayed Overlay
  • menuItem Menuitem object entry selected from menuItems array
  • menuIndex Index of current Menuitem object within the menuItems attribute array

Example:

 // If the 'selectedMenu' was set to the 2nd item from the following menuItems setting ...
 myCmenu.set('menuItems',[ {label:"Foo", value:100}, {label:"Bar", value:105}, {label:"Baz", value:200} ]);

 // ... user clicks 2nd item,
  myCmenu.get('selectedMenu')
  // returns {evt:'event stuff object', menuItem:{label:"Bar", value:105}, menuIndex:1 }

trigger

String trigger.target Container filter selector to assign target from container event

Defined in gallery-js/contextmenu-view.js:398

Defines the container element for the "contextmenu" event listener to attach this menu to.

This {Object} must contain the following;

  • node {Node} the Node instance that will have a delegated "contextmenu" listener attached to it
  • target {String} A CSS selector for the "target" sub-element (child of trigger.node) that will be used for the delegation and will be returned from attribute "contextTarget"

Default: {node:null, target:''}

Example:

  // This will define the trigger node (to accept right-clicks) as a DataTable's THEAD
  //  element and the target as the TH nodes.
  trigger : {
      node:   myDataTable.get('srcNode').one('thead .yui3-datatable-columns'),
      target: "th"
  }

Events

contextMenuHide

Defined in gallery-js/contextmenu-view.js:359

Fired after a Menu choice has been selected from the ContexMenu and the menu has been hidden

Event Payload:

  • e EventTarget

contextMenuShow

Defined in gallery-js/contextmenu-view.js:319

Fired after the "contextmenu" event is initiated and the Menu has been positioned and displayed

Event Payload:

  • e EventTarget

select

Defined in gallery-js/contextmenu-view.js:351

Fires when a selection is "clicked" from within the pop-up menu (a better approach is to listen on attribute selectedMenu for "change")

Event Payload:

  • e EventTarget