Client side framework

You can deliver a JSON feed of context content. You can read the server JSON response, apply a few modifications on the content, and generate the DOM artifacts to display the final context menu in the browser. All files are packaged with the new theme and can be edited with any supported WebDAV client.

<span role="button" aria-haspopup="true" class="wpthemeMenuLeft" onclick="wptheme.contextMenu.init(this, 
    'pageAction', {'pid':'123'});">
  <span class="wpthemeUnderlineText wpthemeMenuFocus">Title of the clickable button</span>
  <span class="wpthemeMenuRight">
    <div class="wpthemeMenuBorder">
      <div class="wpthemeMenuNotchBorder"></div>
        <!-- define the menu item template inside the "ul" element.  only "css-class", "description", 
						and "title" are handled by the theme's sample javascript. -->
        <ul class="wpthemeMenuDropDown wpthemeTemplateMenu" role="menu">
          <li class="${css-class}" role="wpthemeMenuitem" title="${description}">
            <span class="wpthemeMenuText">${title}</span></li>
        </ul>
    </div>
    <!-- Template for loading -->
    <div class="wpthemeMenuLoading wpthemeTemplateLoading">Loading...</div>
    <!-- Template for submenu -->
    <div class="wpthemeAnchorSubmenu wpthemeTemplateSubmenu">
        <div class="wpthemeMenuBorder wpthemeMenuSubmenu">
          <ul id="${submenu-id}" class="wpthemeMenuDropDown" role="menu"></ul>
        </div>
    </div>
  </span>
</span>

1. To change the way the menu looks, beyond modifying the styles, use these templates.

   Menu item template

   Defined through the class wpthemeTemplateMenu. To generate each individual menu entry, all children of this DOM node are used as a template.

   Loading template

   Defined through the class wpthemeTemplateLoading. Used to display provided that the menu content is being loaded.

   Submenu template

   Defined through the class wpthemeTemplateSubmenu.

   Tokens in the form of ${} are replaced after the template is used.

   ${css-class}

   Replaced with the classes used for this entry.

   ${description}

   Localized description of the menu item.

   ${title}

   Localized title of the menu item.

   ${submenu-id}

   Required to define a unique ID for a newly generated submenu.

   The on-click handler on the outer span element calls the init() method to trigger the display of the menu. The parameters of the init method are:

   Current node

   Usually "this" reflecting the node of the onclick handler.

   Menu ID

   A string defining the menu ID that defines which URL is loaded, which is defined in the contextmenu.js file:

   ibmCfg.portalConfig.contentHandlerURI + "?uri=menu:${id}"

   Query parameters (optional)

   Defines any arbitrary set of query parameters to be added to the URL:

2. Define the menu item types. Set a specific class on the given entry to define the menu item type:

   menuitem

   Describes a normal menu item.

   CSS class: typeMenuitem

   separator

   Describes a seperator.

   CSS class: typeSeparator

   header

   Describes a header for a section within the menu.

   CSS class: typeHeader

   submenu

   Describes a menu item that opens a new sub menu.

   CSS class: typeSubmenu

3. Use JavaScript to feed and display a menu. The context menu JavaScript has the namespace wptheme.contextmenu.* and is located in: dav:fs-type1/themes/Portal8.0/js/contextmenu.js.

   wptheme.contextmenu.css

   This JSON object describes constants that are used within the source code to apply CSS classes.

   wptheme.contextmenu.cache

   This file is used to cache generated menus.

   init(node, menuId, jsonQuery)

   node: The current node, usually "this" reflecting the node of the onclick handler.

   menuId: A string defining the menu ID that replaces the URL that this menu is loaded from.

   jsonQuery: Map of query parameters (optional). Defines any arbitrary set of query parameters to be added to the previous URL.

   initSubmenu

   Main entry point when a new submenu is generated for a submenu item of the same menu.

   _findNodes

   Locates the various template nodes within the DOM.

   _invalidateCallback

   Called on an invalidate action and clears the cache.

   _initialize

   Initializes the menu by applying some transformation on the DOM nodes, showing the loading screen and passing on to load the data from the system.

   _load

   Loads the data from the system.

   _parseData

   Parses the data received from the system.

   _filterMenu

   Filters out various menu items based on conditions.

   _buildMenu

   Constructs the DOM that is used to display the menu.

   _applyAction

   Called when a menu item is clicked to execute an action.

   _applySubmenu

   Called when a menu item is clicked that is a submenu.