Client side framework

Client side framework

We can deliver a JSON feed of context content. We 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.

Applicable only to the global page actions menu and the skin actions menu. For each menu the CSS and JavaScript is the same. Only the HTML markup is used to create the different menus.

Duplicate separators and separators at the beginning and end of the menu are cleaned up. If only a header remains between two separators, the header and one separator are cleaned out as well.

To force the regeneration of menus, use the following JavaScript:

i$.fireEvent('wptheme/contextMenu/invalidate/all');

When a session timeout occurs, a full page refresh is triggered to return to the login page.

Menus can either open to the left or to the right. which is controlled using a CSS class.

Use these contribution types to mark up and customize context menus:

CSS

Defines the look-and-feel of the menu. These files are in:

dav:fs-type1/themes/Portal8.0/css/default.css
dav:fs-type1/themes/Portal8.0/css/contextmenuCommon.css
dav:fs-type1/themes/Portal8.0/css/contextmenu.css

JavaScript

Handles all the interactions with users to load the respective feed and display the menu based on a template. The JavaScript is embedded inside of the theme.js file, which can be found at dav:fs-type1/themes/Portal8.0/js.

HTML markup

The HTML markup or template is used to construct the menu and with the style sheets create the final menu.

The skin menu: dav:fs-type1/themes/Portal8.0/skins/skin.html

The page action menu can be found at: PORTAL_HOME/theme/wp.theme.modules/webapp/installedApps/ThemeModules.ear/ThemeModules.war/themes/html/dynamicSpots/commonActions.jsp.

We can create as many context menus as you want in a custom theme.
The HTML markup that places a menu on the page at a certain position looks like the following example:
<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>
        
        <ul class="wpthemeMenuDropDown wpthemeTemplateMenu" role="menu">
          <li class="${css-class}" role="wpthemeMenuitem" >
            <span class="wpthemeMenuText">${title}</span></li>
        </ul>
    </div>
    
    <div class="wpthemeMenuLoading wpthemeTemplateLoading">Loading...</div>
    
    <div class="wpthemeAnchorSubmenu wpthemeTemplateSubmenu">
        <div class="wpthemeMenuBorder wpthemeMenuSubmenu">
          <ul id="${submenu-id}" class="wpthemeMenuDropDown" role="menu"></ul>
        </div>
    </div>
  </span>
</span>
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 is 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:
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

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 constanto 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 is 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 used to display the menu.

_applyAction

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

_applySubmenu

Called when a menu item is clickethat is a submenu.
Parent: Menu framework
Related:
Menu styles