Context Menu Customization

From Svg wiki

Each viewer has its own user controls and level of customization. A context (or "right-click") menu can give the user control over the SVG document in various ways, such as zoom controls.

Contents

[edit]

Adobe SVG Viewer Context Menu

The most common plugin, the Adobe SVG Viewer, has a context menu that allows the user to interact with the SVG document, zooming in and out, searching for text, controlling animations and quality, and other functionality. This is a non-standard interface, but can be very desirable. Note: Since ASV is no longer maintained, and other SVG viewers are being more widely implemented, it is suggested that authors use a more generic approach to a context menu, possibly disabling the ASV menu completely.

[edit]

Customizing the ASV Context Menu

Starting with version 3.0 of the Adobe SVG Viewer, SVG authors are allowed to modify the menu that pops up when the user right-clicks on the SVG.

Before you do this, however, you would do well to keep in mind some common-sense guidelines (as posted by [Michael Bierman] and others on the SVG-Developers list):

  • Don't hide the Help item
  • Don't hide the About ASV item (Adobe and the people who created ASV deserve credit, and you might be violating the ASV EULA; also, the menu may not work)
  • Don't rearrange the existing menu items (users should be able to depend on them being in the same order, etc.)
  • Do turn off items that don't make sense (i.e. there is no need to Zoom or Pan on some content--it will just "break"); however, keep in mind that visually impaired users may need to zoom in to see your content

Tips:

  • Disabling, rather than removing, items provides a consistant interface without allowing users to perform unwanted actions, such as zooming or saving the SVG


[edit]

Customizing the Menu

First, you declare a <def> to define the new menu: 

  <defs>
     <menu id='NewMenu' xmlns='http://foo' onload='GetPosition( evt )'>
        <header>Custom Menu</header>
        <item action='ZoomIn'>Zoom &In</item>
        <item action='ZoomOut'>Zoom &Out</item>
        <item action='OriginalView'>&Original View</item>
        <separator />
        <item onactivate='MyFunction()'>&My Function</item>
        <menu>
        <header>Submenu</header>
        <item onactivate="alert('Item1')">Item1</item>
        <item onactivate="alert('Item2')">Item2</item>
        <item onactivate="alert('Item3')">Item3</item>
        </menu>
        <separator />
        <item xmlns='http://www.w3.org/1999/xlink' xlink:href='inserted_link.html'
          target='resource window'>Menu Link...</item>
        <separator />
        <item action='Quality'>Higher &Quality</item>
        <item action='Pause'>&Pause</item>
        <item action='Mute'>&Mute</item>
        <separator />
        <item action='Find'>&Find...</item>
        <item action='FindAgain'>Find &Again</item>
        <separator />
        <item action='CopySVG'>&Copy SVG</item>
        <item action='ViewSVG'>&View SVG...</item>
        <item action='ViewSource'>View Sourc&e...</item>
        <item action='SaveAs'>&Save SVG As...</item>
        <item action='SaveSnapshotAs'>Sa&ve Current State...</item>
        <separator />
        <item action='Help'>&Help...</item>
        <item action='About'>About SVG Viewer...</item>
     </menu>
  </defs>

Several key points should be noted from the code above:

  • Each entry on the menu is marked by an <item> tag.
  • The <separator /> tag creates a separator bar on the menu.
  • Nested <menu> tags create sub-menus; the header for these sub-menus is not selectable
  • To access the built-in functions of the SVG Viewer, you include an 'action' property
  • To access author-defined functions, you include an 'onactivate' property
  • In order to insert a link on the menu, you must resolve the XML Namespace for XLink and preface the link with 'xlink:'

In addition, each <item /> can have one or more of the following properties:

  • checked='yes|no' --this indicated whether a particular option is active, as on the 'Higher Quality' option
  • enabled='yes|no' --if this property is set to "no," the option will be visible, but grayed-oout, and can't be selected
  • display='none|inline' --if this property is set to "none," the option will be not be visible

Next, in order to use this menu, you must overwrite the original Context Menu with the new definition, in the script section of your SVG: 

  <script>
     <![CDATA[
        var newMenuRoot = parseXML( printNode( document.getElementById( 'NewMenu' ) ), contextMenu );
        contextMenu.replaceChild( newMenuRoot, contextMenu.firstChild );
     ]]>
  </script>


[edit]

Attribute contextMenu

Synopsis from the Adobe SVG Forums:

readonly dom::Document contextMenu

XML document that represents SVG Viewer's context menu. Any change to this document will be reflected on the context menu (when it pops up). The document's root element must be a "menu" element. The following elements are allowed in menu:

header menu header; most systems ignore header text content of this element will be visible on the menu on the systems that support menu headers
item an item in the menu text content of this element will be visible as item's text; character "&" designates hot key.
separator separator bar
menu submenu; some systems can flatten submenus


item element can have following attributes (note that xlink:href attribute must be in XLink namespace, use only 'setAttributeNS to set it)
action system action that this item will cause if activated
onactivate script that gets executed when this item is activated
xlink:href follow the specified URL
target used together with xlink:href
checked can be either "yes" or "now", will cause a checkmark be drawn next to this item
display can be either "inline" or "none"; if "none" this item is ignored
enabled can be either "yes" or "no"; if "no" this item is visible, but cannot be selected


Supported system actions are listed here:

  • ZoomIn
  • ZoomOut
  • OriginalView
  • Quality
  • Pause
  • Mute
  • Find
  • FindAgain
  • Copy
  • CopySVG
  • ViewSVG
  • ViewSource
  • SaveAs
  • SaveOriginalAs
  • SaveSnapshotAs
  • Help
  • About

It is strongly recommended to have 'About' action in the menu. Menus without 'About' action may get ignored by the viewer.

A (nearly-)complete, fairly generic example of this -including activation of the 'checked,' 'display,' and 'enabled' options- can be seen at http://www.svg-whiz.com/images/customcontextmenu.svg.

Implementation Note: It is not possible in ASV3 to access the built-in functions of the context menu (such as "CopySVG" or "SaveAs") through script. This is a security feature.

[edit]

Disabling the Context Menu

To prevent the menu from appearing at all, you can use some variation of the following code: 

  <svg onmousedown="evt.preventDefault()" onmouseup="evt.preventDefault()">
     ...
  </svg>

This can be useful when you want to provide your own context menu, or when you want the right-click to have another action.

see also Protecting Code

[edit]

Other Menus

  • Opera?
  • Firefox?
  • Safari?
  • Menu Libraries?
Retrieved from "http://wiki.svg.org/Context_Menu_Customization"