Corner Pocket

Abstract
The rwt-corner-pocket DOM component is a popup menu using both text and icons. It is suitable for targeting a small list of external websites.

Motivation

A website's main menu guides the visitor to internal documents, but occasionally there may be a desire to guide visitors to a short list of external websites that are somehow related.

The rwt-corner-pocket DOM component is normally kept hidden until needed, when it slides into the viewport from any one of its four corners. Visibility of the menu is under control of a separate button that triggers the component's toggleMenu method or its event interface.

The component has these features:

• The position of the menu is relative to any one of the four viewport corners.
• The menu has a title bar running vertically along its left edge.
• Each menu item has both text and icon.
• The menu item corresponding to the current page is highlighted when the page is loaded.
• The menu has an event interface for showing/hiding itself.
• The menu emits a custom event to close sibling menus and dialog boxes.
• Menu items may be kept separate from the DOM component, allowing the webmaster to change its contents in a single centralized place. Alternatively, menu items may be slotted directly between the component's opening and closing tags.
• A keyboard listener is provided to allow a shortcut key to expand/collapse the menu.

In the wild

To see an example of this component in use, visit the BLUEPHRASE website and press F9 "Find It Here". To understand what's going on under the hood, use the browser's inspector to view the HTML source code and network activity.

Reference

	Documentation	READ WRITE HUB
	Source code	github
	Component catalog	DOM COMPONENTS
	Package installation	npm
	Publication venue	READ WRITE STACK