[ Mini Kiebo ]

Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586 Path: D:/xampp182/htdocs/simpeg/zapatec/zpmenu/zpmenu/jsdocs/ [ Home ]
File: overview-summary-zpmenu-kbd.js.html
<!doctype html public "-//W3C//DTD HTML 4.0 Frameset//EN""http://www.w3.org/TR/REC-html40/frameset.dtd">
<html>
<head>
<title>
Zapatec Menu Overview
</title>
<link rel ="stylesheet" type="text/css" href="stylesheet.css" title="Style">
<script>
function asd() {
	
		parent.document.title="zpmenu-kbd.js Overview";
	
}
</script>
</head>
<body bgcolor="white" onload="asd();">

<!-- ========== START OF NAVBAR ========== -->
<a name="navbar_top"><!-- --></a>
<table border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td colspan=2 bgcolor="#EEEEFF" class="NavBarCell1">
<a name="navbar_top_firstrow"><!-- --></a>
<table border="0" cellpadding="0" cellspacing="3">
  <tr align="center" valign="top">
  
  
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-summary.html"><font class="NavBarFont1"><b>Overview</b></font></a>&nbsp;</td>
  <td bgcolor="#FFFFFF" class="NavBarCell1Rev">	&nbsp;<font class="NavBarFont1Rev"><b>File</b></font>&nbsp;</td>
  

  <td bgcolor="#FFFFFF" class="NavBarCell1"> 	<font class="NavBarFont1">Class</font>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-tree.html"><font class="NavBarFont1"><b>Tree</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="index-all.html"--><font class="NavBarFont1"><b>Index</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="help-doc.html"><font class="NavBarFont1"><b>Help</b></font></a>&nbsp;</td>
  </tr>
</table>
</td>
<td bgcolor="#EEEEFF" align="right" valign="top">
<em>
<b>Zapatec Menu</b></em>
</td>
</tr>

<tr>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
&nbsp;PREV&nbsp;
&nbsp;NEXT</font></td>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
  <a href="index.html" target="_top"><b>FRAMES</b></a>  &nbsp;
&nbsp;<a href="overview-summary.html" target="_top"><b>NO FRAMES</b></a>
&nbsp;&nbsp;
<script>
  <!--
  if(window==top) {
    document.writeln('<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>');
  }
  //-->
</script>
<noscript>
<a href="allclasses-noframe.html" target=""><b>All Classes</b></a>
</noscript>
</font></td>
</tr>
</table>
<!-- =========== END OF NAVBAR =========== -->

<hr>
<center>
	
	   <h2>zpmenu-kbd.js</h2>
	
</center>

	


<h4>Summary</h4>
<p>
	
		Keyboard navigation module for Zapatec DHTML Menu Widget.

 <pre>
 Copyright (c) 2004-2006 by Zapatec, Inc.
 http://www.zapatec.com
 1700 MLK Way, Berkeley, California,
 94709, U.S.A.
 All rights reserved.
 </pre><BR/><BR/>
	
</p>

<hr>



<!-- ========== METHOD SUMMARY =========== -->

<!-- ========== END METHOD SUMMARY =========== -->


        <pre class="sourceview"><span class="comment">/**
 * $Id: zpmenu-kbd.js 4322 2006-09-04 08:49:33Z shacka $
 * <span class="attrib">@fileoverview</span> Keyboard navigation module for Zapatec DHTML Menu Widget.
 *
 * &lt;pre&gt;
 * Copyright (c) 2004-2006 by Zapatec, Inc.
 * http://www.zapatec.com
 * 1700 MLK Way, Berkeley, California,
 * 94709, U.S.A.
 * All rights reserved.
 * &lt;/pre&gt;
 */</span>

<span class="comment">/**
 * Provides keyboard navigation and shortcuts. Sould be assigned to
 * window.document keydown event.
 *
 * <span class="attrib">@private</span>
 * <span class="attrib">@param</span> {object} ev Event object
 */</span>
Zapatec.Menu.onDocumentKeyDown = <span class="reserved">function</span>(ev) {
  ev || (ev = window.event);
  <span class="comment">// Skip Shift, Ctrl and Alt buttons because they are used only as modifiers</span>
  <span class="reserved">if</span> (ev.keyCode == 16 || ev.keyCode == 17 || ev.keyCode == 18) {
    <span class="reserved">return</span> true;
  }
  var item = Zapatec.Menu.selectedItemsStack.pop();
  var self = null, subtree = null;
  <span class="reserved">if</span> (item) {
    self = Zapatec.Menu.all[item.__zp_tree];
    subtree = self._getTree(item.__zp_parent);
  }

  var buttonEsc = <span class="reserved">function</span>(item) {
    <span class="reserved">if</span> (!item) {
      <span class="reserved">return</span> true; <span class="comment">// Pass through</span>
    }
    <span class="comment">// Hide subtree</span>
    <span class="reserved">if</span> (item.__zp_subtree &amp;&amp; item.__zp_state) {
      <span class="comment">// Hide current item child subtree</span>
      self.itemHide(item.__zp_item);
      Zapatec.Menu.selectedItemsStack.push(item);
      subtree.__zp_activeitem = item.__zp_item;
    } <span class="reserved">else</span> {
      <span class="comment">// Unselect current item</span>
      Zapatec.Utils.removeClass(item, <span class="literal">"zpMenu-item-selected"</span>);
      Zapatec.Utils.removeClass(item, <span class="literal">"zpMenu-item-selected-collapsed"</span>);
      <span class="reserved">if</span> (subtree.__zp_activeitem == item.__zp_item) subtree.__zp_activeitem = <span class="literal">''</span>;
      <span class="comment">// Hide current subtree</span>
      <span class="reserved">if</span> (subtree.__zp_item) {
        var parentItem = self.items[subtree.__zp_item];
        <span class="reserved">if</span> (parentItem.__zp_state) {
          self.itemHide(parentItem.__zp_item);
        }
      }
    }
    <span class="comment">// Hide menu</span>
    <span class="reserved">if</span> (self.config.triggerEvent) {
      <span class="reserved">for</span> (var i = 0; i &lt; Zapatec.Menu.selectedItemsStack.length; i++) {
        <span class="reserved">if</span> (Zapatec.Menu.all[Zapatec.Menu.selectedItemsStack[i].__zp_tree] == self) {
          <span class="reserved">return</span> Zapatec.Utils.stopEvent(ev);
        }
      }
      <span class="comment">// No more selected items in this menu</span>
      self.hideMenu();
    }
    <span class="reserved">return</span> Zapatec.Utils.stopEvent(ev);
  };

  var buttonEnter = <span class="reserved">function</span>(item) {
    <span class="reserved">if</span> (!item) {
      <span class="reserved">return</span> true; <span class="comment">// Pass through</span>
    }
    Zapatec.Menu.selectedItemsStack.push(item);
    item.onclick();
    <span class="reserved">return</span> Zapatec.Utils.stopEvent(ev);
  };

  var buttonLeftArrow = <span class="reserved">function</span>(item) {
    <span class="reserved">if</span> (!item) {
      <span class="reserved">return</span> true; <span class="comment">// Pass through</span>
    }
    <span class="reserved">if</span> (!self.config.vertical &amp;&amp; /zpMenu-level-1/.test(item.className)) {
      <span class="comment">// Horizontal top menu item</span>
      var prevItem = item.previousSibling;
      <span class="reserved">if</span> (!prevItem) {
        prevItem = item.parentNode.lastChild;
      }
      <span class="reserved">if</span> (prevItem) {
        <span class="reserved">if</span> (item.__zp_state) {
          item.onmouseout();
          prevItem.onmouseover();
        } <span class="reserved">else</span> {
          Zapatec.Menu.unselectItem(item);
          Zapatec.Menu.selectItem(prevItem);
          subtree.__zp_activeitem = prevItem.__zp_item;
        }
      } <span class="reserved">else</span> {
        Zapatec.Menu.selectedItemsStack.push(item);
      }
    } <span class="reserved">else</span> {
      <span class="comment">// Vertical menu item</span>
      <span class="reserved">if</span> (!/zpMenu-level-1/.test(item.className)) {
        <span class="comment">// Hide subtree</span>
        <span class="reserved">return</span> buttonEsc(item);
      } <span class="reserved">else</span> {
        Zapatec.Menu.selectedItemsStack.push(item);
      }
    }
    <span class="reserved">return</span> Zapatec.Utils.stopEvent(ev);
  };

  var buttonRightArrow = <span class="reserved">function</span>(item) {
    <span class="reserved">if</span> (!item) {
      <span class="reserved">return</span> true; <span class="comment">// Pass through</span>
    }
    <span class="reserved">if</span> (!self.config.vertical &amp;&amp; /zpMenu-level-1/.test(item.className)) {
      <span class="comment">// Horizontal top menu item</span>
      var nextItem = item.nextSibling;
      <span class="reserved">if</span> (!nextItem) {
        nextItem = item.parentNode.firstChild;
      }
      <span class="reserved">if</span> (nextItem) {
        <span class="reserved">if</span> (item.__zp_state) {
          item.onmouseout();
          nextItem.onmouseover();
        } <span class="reserved">else</span> {
          Zapatec.Menu.unselectItem(item);
          Zapatec.Menu.selectItem(nextItem);
          subtree.__zp_activeitem = nextItem.__zp_item;
        }
      } <span class="reserved">else</span> {
        Zapatec.Menu.selectedItemsStack.push(item);
      }
    } <span class="reserved">else</span> {
      <span class="comment">// Vertical menu item</span>
      <span class="reserved">if</span> (item.__zp_subtree) {
        <span class="comment">// Show subtree</span>
        Zapatec.Menu.selectedItemsStack.push(item);
        self.itemShow(item.__zp_item);
        var subMenu = self._getTree(item.__zp_subtree);
        <span class="reserved">if</span> (subMenu.__zp_items.length &gt; 0) {
          <span class="reserved">if</span> (subMenu.__zp_activeitem) {
            Zapatec.Menu.unselectItem(self.items[subMenu.__zp_activeitem]);
          }
          subMenu.__zp_activeitem = subMenu.__zp_items[0];
          Zapatec.Menu.selectItem(self.items[subMenu.__zp_activeitem]);
        }
      } <span class="reserved">else</span> <span class="reserved">if</span> (!self.config.vertical &amp;&amp; !/zpMenu-level-1/.test(item.className)) {
        <span class="comment">// Go to next top menu item</span>
        item.onmouseout();
        <span class="reserved">return</span> buttonRightArrow(self.items[self._getTree(item.__zp_tree).__zp_activeitem]);
      } <span class="reserved">else</span> {
        Zapatec.Menu.selectedItemsStack.push(item);
      }
    }
    <span class="reserved">return</span> Zapatec.Utils.stopEvent(ev);
  };

  var buttonUpArrow = <span class="reserved">function</span>(item) {
    <span class="reserved">if</span> (!item) {
      <span class="reserved">return</span> true; <span class="comment">// Pass through</span>
    }
    <span class="reserved">if</span> (!self.config.vertical &amp;&amp; /zpMenu-level-1/.test(item.className)) {
      <span class="comment">// Horizontal top menu item</span>
      <span class="comment">// Show subtree</span>
      <span class="reserved">return</span> buttonDownArrow(item);
    } <span class="reserved">else</span> {
      <span class="comment">// Vertical menu item</span>
      var prevItem = item.previousSibling;
      <span class="reserved">while</span> (prevItem &amp;&amp; (!/zpMenu-item/i.test(prevItem.className) || /zpMenu-item-hr/i.test(prevItem.className))) {
        prevItem = prevItem.previousSibling;
      }
      <span class="reserved">if</span> (!prevItem) {
        prevItem = item.parentNode.lastChild;
      }
      <span class="reserved">if</span> (prevItem) {
        <span class="reserved">if</span> (item.__zp_state) {
          item.onmouseout();
          prevItem.onmouseover();
        } <span class="reserved">else</span> {
          Zapatec.Menu.unselectItem(item);
          Zapatec.Menu.selectItem(prevItem);
          subtree.__zp_activeitem = prevItem.__zp_item;
        }
      } <span class="reserved">else</span> {
        Zapatec.Menu.selectedItemsStack.push(item);
      }
    }
    <span class="reserved">return</span> Zapatec.Utils.stopEvent(ev);
  };

  var buttonDownArrow = <span class="reserved">function</span>(item) {
    <span class="reserved">if</span> (!item) {
      <span class="reserved">return</span> true; <span class="comment">// Pass through</span>
    }
    <span class="reserved">if</span> (!self.config.vertical &amp;&amp; /zpMenu-level-1/.test(item.className)) {
      <span class="comment">// Horizontal top menu item</span>
      Zapatec.Menu.selectedItemsStack.push(item);
      <span class="reserved">if</span> (item.__zp_subtree) {
        <span class="comment">// Show subtree</span>
        self.itemShow(item.__zp_item);
        var subMenu = self._getTree(item.__zp_subtree);
        <span class="reserved">if</span> (subMenu.__zp_items.length &gt; 0) {
          <span class="reserved">if</span> (subMenu.__zp_activeitem) {
            Zapatec.Menu.unselectItem(self.items[subMenu.__zp_activeitem]);
          }
          subMenu.__zp_activeitem = subMenu.__zp_items[0];
          Zapatec.Menu.selectItem(self.items[subMenu.__zp_activeitem]);
        }
      }
    } <span class="reserved">else</span> {
      <span class="comment">// Vertical menu item</span>
      var nextItem = item.nextSibling;
      <span class="reserved">while</span> (nextItem &amp;&amp; (!/zpMenu-item/i.test(nextItem.className) || /zpMenu-item-hr/i.test(nextItem.className))) {
        nextItem = nextItem.nextSibling;
      }
      <span class="reserved">if</span> (!nextItem) {
        nextItem = item.parentNode.firstChild;
      }
      <span class="reserved">if</span> (nextItem) {
        <span class="reserved">if</span> (item.__zp_state) {
          item.onmouseout();
          nextItem.onmouseover();
        } <span class="reserved">else</span> {
          Zapatec.Menu.unselectItem(item);
          Zapatec.Menu.selectItem(nextItem);
          subtree.__zp_activeitem = nextItem.__zp_item;
        }
      } <span class="reserved">else</span> {
        Zapatec.Menu.selectedItemsStack.push(item);
      }
    }
    <span class="reserved">return</span> Zapatec.Utils.stopEvent(ev);
  };

  var altShortcut = <span class="reserved">function</span>() {
    <span class="reserved">if</span> (subtree &amp;&amp; subtree.__zp_keymap) {
      var keymapItem = subtree.__zp_keymap[ev.keyCode];
      <span class="reserved">if</span> (keymapItem) {
        <span class="comment">// Unselect current item</span>
        <span class="reserved">if</span> (item &amp;&amp; !item.__zp_state) {
          Zapatec.Utils.removeClass(item, <span class="literal">"zpMenu-item-selected"</span>);
          Zapatec.Utils.removeClass(item, <span class="literal">"zpMenu-item-selected-collapsed"</span>);
          <span class="reserved">if</span> (subtree.__zp_activeitem == item.__zp_item) subtree.__zp_activeitem = <span class="literal">''</span>;
        }
        <span class="comment">// As onItemClick shows submenu with delay, we have to</span>
        <span class="comment">// show submenu immediately to be able to set active item</span>
        self.itemShow(keymapItem.__zp_item);
        <span class="comment">// Simulate click</span>
        keymapItem.onclick();
        <span class="comment">// Set active item in submenu</span>
        <span class="reserved">if</span> (keymapItem.__zp_subtree) {
          var subMenu = self._getTree(keymapItem.__zp_subtree);
          <span class="reserved">if</span> (subMenu.__zp_items.length &gt; 0) {
            <span class="reserved">if</span> (subMenu.__zp_activeitem) {
              Zapatec.Menu.unselectItem(self.items[subMenu.__zp_activeitem]);
            }
            subMenu.__zp_activeitem = subMenu.__zp_items[0];
            Zapatec.Menu.selectItem(self.items[subMenu.__zp_activeitem]);
          }
        }
        <span class="reserved">return</span> Zapatec.Utils.stopEvent(ev);
      }
    }
    <span class="reserved">return</span> true; <span class="comment">// Pass through</span>
  };

  var shortcut = <span class="reserved">function</span>() {
    <span class="reserved">if</span> (subtree) { <span class="comment">// Alt modifier is not required if there is active item</span>
      <span class="reserved">if</span> (item.__zp_state) {
        Zapatec.Menu.selectedItemsStack.push(item);
        subtree = self._getTree(item.__zp_subtree);
      }
      var ret = altShortcut();
      <span class="reserved">if</span> (!ret) <span class="reserved">return</span> ret;
    } <span class="reserved">else</span> <span class="reserved">if</span> (ev.altKey) { <span class="comment">// Alt modifier is required</span>
      <span class="reserved">for</span> (var i in Zapatec.Menu.all) {
        self = Zapatec.Menu.all[i];
        subtree = self.top_parent;
        var ret = altShortcut();
        <span class="reserved">if</span> (!ret) <span class="reserved">return</span> ret;
      }
    }
    Zapatec.Menu.selectedItemsStack.push(item);
    <span class="reserved">return</span> true; <span class="comment">// Pass through</span>
  };

  switch (ev.keyCode) {
    case 27: <span class="comment">// Esc</span>
      <span class="reserved">return</span> buttonEsc(item);
      break;
    case 13: <span class="comment">// Enter</span>
    case 32: <span class="comment">// Space</span>
      <span class="reserved">return</span> buttonEnter(item);
      break;
    case 37: <span class="comment">// Left arrow</span>
      <span class="reserved">return</span> buttonLeftArrow(item);
      break;
    case 39: <span class="comment">// Right arrow</span>
      <span class="reserved">return</span> buttonRightArrow(item);
      break;
    case 38: <span class="comment">// Up arrow</span>
      <span class="reserved">return</span> buttonUpArrow(item);
      break;
    case 40: <span class="comment">// Down arrow</span>
      <span class="reserved">return</span> buttonDownArrow(item);
      break;
    default:
      <span class="reserved">return</span> shortcut();
  }
};

<span class="comment">// Setup keyboard navigation and shortcuts</span>
Zapatec.Utils.addEvent(window.document, <span class="literal">'keydown'</span>, Zapatec.Menu.onDocumentKeyDown);

<span class="comment">// Disable scrolling with arrows</span>
Zapatec.Utils.addEvent(window.document, <span class="literal">'keypress'</span>,
  <span class="reserved">function</span>(ev) {
    ev || (ev = window.event);
    switch (ev.keyCode) {
      case 37: <span class="comment">// Left arrow</span>
      case 39: <span class="comment">// Right arrow</span>
      case 38: <span class="comment">// Up arrow</span>
      case 40: <span class="comment">// Down arrow</span>
        <span class="reserved">return</span> Zapatec.Utils.stopEvent(ev);
        break;
    }
  }
);
</pre>
	<hr>



<!-- ========== START OF NAVBAR ========== -->
<a name="navbar_top"><!-- --></a>
<table border="0" width="100%" cellpadding="1" cellspacing="0">
<tr>
<td colspan=2 bgcolor="#EEEEFF" class="NavBarCell1">
<a name="navbar_top_firstrow"><!-- --></a>
<table border="0" cellpadding="0" cellspacing="3">
  <tr align="center" valign="top">
  
  
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-summary.html"><font class="NavBarFont1"><b>Overview</b></font></a>&nbsp;</td>
  <td bgcolor="#FFFFFF" class="NavBarCell1Rev">	&nbsp;<font class="NavBarFont1Rev"><b>File</b></font>&nbsp;</td>
  

  <td bgcolor="#FFFFFF" class="NavBarCell1"> <font class="NavBarFont1">Class</font>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="overview-tree.html"><font class="NavBarFont1"><b>Tree</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="index-all.html"--><font class="NavBarFont1"><b>Index</b></font></a>&nbsp;</td>
  <td bgcolor="#EEEEFF" class="NavBarCell1">    <a href="help-doc.html"><font class="NavBarFont1"><b>Help</b></font></a>&nbsp;</td>
  </tr>
</table>
</td>
<td bgcolor="#EEEEFF" align="right" valign="top"><em>
<b>Zapatec Menu</b></em>
</td>
</tr>

<tr>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
&nbsp;PREV&nbsp;
&nbsp;NEXT</font></td>
<td bgcolor="white" class="NavBarCell2"><font size="-2">
  <a href="index.html" target="_top"><b>FRAMES</b></a>  &nbsp;
&nbsp;<a href="overview-summary.html" target="_top"><b>NO FRAMES</b></a>
&nbsp;&nbsp;
<script>
  <!--
  if(window==top) {
    document.writeln('<A HREF="allclasses-noframe.html" TARGET=""><B>All Classes</B></A>');
  }
  //-->
</script>
<noscript>
<a href="allclasses-noframe.html" target=""><b>All Classes</b></a>
</noscript>
</font></td>
</tr>
</table>
<!-- =========== END OF NAVBAR =========== -->

<hr>
<font size="-1">

</font>
<div class="jsdoc_ctime">Documentation generated by <a href="http://jsdoc.sourceforge.net/" target="_parent">JSDoc</a> on Thu Aug 16 12:19:01 2007</div>
</body>
</html>