documon
Version:
A documentation system for mortals. Use with any language.
882 lines (467 loc) • 27.3 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>MenuTree</title>
<meta name="description" content="Builds a menu based on a menu array". The menu array must conform to the following structure:">
<!-- Normalize -->
<link rel="stylesheet" href="assets/vendor/normalize.css">
<!-- prettify -->
<link rel="stylesheet" href="assets/vendor/prettify/codamike.css">
<script src="assets/vendor/prettify/prettify.js"></script>
<!-- Documon Pages Info. (Used by various classes to identify this page.) -->
<script>
var pageCtx = {
id : "gieson.MenuTree",
name: "MenuTree"
}
</script>
<!-- theme
<link rel="stylesheet" href="assets/fonts/Fira_Sans/FiraSans.css">
<link rel="stylesheet" href="assets/fonts/Inconsolata/inconsolata.css">
-->
<link rel="stylesheet" href="assets/css/pages.css">
<script src="assets/js/documon/Storage.js"></script>
<script src="assets/js/documon/Access.js"></script>
<script src="assets/js/documon/Pages.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-106684927-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div class="page">
<div class="main-method">
<a name="methods"></a>
<div class="part-methods">
<a name="gieson.MenuTree"></a><a name="MenuTree"></a>
<div class="member" >
<div class="member-name clearfix">
<span class="member-name-left">
MenuTree ()
</span>
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/menutree/MenuTree.js</span>
<span class="member-line-number">69</span>
</span>
</div>
<div class="member-description">
<div class="meta-block meta-block-klass">
<div class="meta-line"><span class="meta-label" >xpath</span> <span class="meta-target">gieson.MenuTree<span></div>
<div class="meta-line"><span class="meta-label" >file</span> <span class="meta-target">documon/template/assets/js/documon/menutree/MenuTree.js<span></div>
</div>
<p>Builds a menu based on a "menu array". The menu array must conform to the following structure:</p>
<pre><code>var myMenuData = [
{
"id" : "foo", // Unique ID used to identify a menu list item.
"url" : "foo.html", // (optional) The URL to open when the menu item is clicked.
"label" : "foo", // The display text for the menu item.
"kind" : "myCssRule", // The CSS class to apply to the item -- good for including icons!
"children" : [] // An array of menu item just like this one.
}
... etc...
];</code></pre>
<p>When an item has children, a sub-menu will be constructed as the immediate "nextSibling" UL, <br />
which will house all the items within the "children" array. Thus, one may have as many sub-menus as needed.</p>
<p>The menu will be build using the following HTML structure:</p>
<pre><code><ul>
<li>foo</li> <-- opener - used to open/close the next immediate sibling UL
<ul>
<li>foo</li>
<li>foo</li>
</ul>
<li>foo</li>
<li>foo</li>
<li>foo</li> <-- opener - used to open/close the next immediate sibling UL
<ul>
<li>foo</li>
<li>foo</li> <-- opener - used to open/close the next immediate sibling UL
<ul>
<li>foo</li>
<li>foo</li>
<li>foo</li>
<li>foo</li>
</ul>
<li>foo</li>
<li>foo</li>
</ul>
</ul></code></pre>
<div class="member">
<div class="heading-example">Example</div>
<div class="example-block">
<pre><code>// For now, the only action we ping is "select"
function opHandler(action, item){
if(action == "select"){
//con sole.log(item);
}
}
var myMenu = new gieson.MenuTree({
callback : opHandler,
menuData : MenuData // MenuData should be located on the window object, since it is loaded in via <script src="_menuData.js">
});</code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="parts">
<a name="properties"></a>
<div class="part-properties">
<div class="heading-part">Properties</div>
<div class="member">
<div class="member-block-group">
<div class="member-block" >
<div class="member-block-left">
<a name="gieson.MenuTree.listdata"></a><a name="listdata"></a>
<span class="member-name">listdata</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/menutree/MenuTree.js</span><span class="member-line-number" title="documon/template/assets/js/documon/menutree/MenuTree.js">193</span>
</span>
<div class="param-description">
<span class="type">Object</span>
<div class="member-description">
<p>TODO: We should convert the items we store in the list to a seperate class. For berevity we've just inlined it during development.<br />
A data store for each menu item. The keys for the listData refer to item ID's. Each item consists of the following:</p>
<pre><code> item = {
id // Optional (will be assigned unique one if none)
children // A list of other items.
access // Specific to documon
inherits // Specific to documon
kind // Applies a CSS class to the item
label // What the user sees
// This is created and managed by MenuTree
$mt - {
miid // Menu item id.
liid // The ID of the actual <li> HTML element created for this item
ulid // The ID of the parent <ul> element (this LI is a child of this UL)
open // (boolean) Current state.
parentMiid // The parent menu item.
openerid // The opener element's ID
liElem // The actual <li> element (only stored when interacted with)
ulElem // The actual parent <ul> element (only stored when interacted with)
openerElem // The actual opener triangle doo-dad element (only stored when interacted with)
ulOriginalDisplay // The source node's original css style.display kind (for open/close so we go back to normal -- defaults to "block" when not set in CSS)
}
}</code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a name="methods"></a>
<div class="part-methods">
<div class="heading-part">Methods</div>
<a name="gieson.MenuTree.getDataById"></a><a name="getDataById"></a>
<div class="member" >
<div class="member-name clearfix">
<span class="member-name-left">
getDataById (<span class="method-arguments">id</span>)
</span>
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/menutree/MenuTree.js</span>
<span class="member-line-number">388</span>
</span>
</div>
<div class="member-description">
<p>Gets the item's source data as provided during init. Convient way to retrive source data without navigating the source tree becuase we maintain a flat-list cross reference. This methods simply hooks into the cross reference.</p>
<div class="part-parameters">
<div class="heading-part">Parameters</div>
<div class="member">
<div class="member-block-group">
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">id</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">string</span>
<div class="member-description">
<p>The menu item id.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="heading-returns">Returns
<span class="type">object</span>
</div>
<div class="member"><p>The item's source data as provided during init.</p></div>
</div>
</div>
<a name="gieson.MenuTree.openById"></a><a name="openById"></a>
<div class="member" >
<div class="member-name clearfix">
<span class="member-name-left">
openById (<span class="method-arguments">id</span>, <span class="method-arguments method-arg-optional">andSelect</span>, <span class="method-arguments method-arg-optional">scrollIntoView</span>)
</span>
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/menutree/MenuTree.js</span>
<span class="member-line-number">371</span>
</span>
</div>
<div class="member-description">
<p>Opens all decendants of a branch.</p>
<div class="part-parameters">
<div class="heading-part">Parameters</div>
<div class="member">
<div class="member-block-group">
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">id</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">string</span>
<div class="member-description">
<p>The menu item id.</p>
</div>
</div>
</div>
</div>
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">andSelect</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">boolean</span>
<span class="flag optional">optional</span>
<span class="default-value">
false
</span>
<div class="member-description">
<p>Should the item be highlighted?</p>
</div>
</div>
</div>
</div>
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">scrollIntoView</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">boolean</span>
<span class="flag optional">optional</span>
<span class="default-value">
false
</span>
<div class="member-description">
<p>Should the menu scroll to show the item?</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="heading-returns">Returns
<span class="type">object</span>
</div>
<div class="member"><p>The item's source data as provided during init.</p></div>
</div>
</div>
<a name="gieson.MenuTree.select"></a><a name="select"></a>
<div class="member" >
<div class="member-name clearfix">
<span class="member-name-left">
select (<span class="method-arguments">id</span>)
</span>
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/menutree/MenuTree.js</span>
<span class="member-line-number">252</span>
</span>
</div>
<div class="member-description">
<p>Opens and/or highlights an item in the menu.</p>
<div class="part-parameters">
<div class="heading-part">Parameters</div>
<div class="member">
<div class="member-block-group">
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">id</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">string</span>
<div class="member-description">
<p>The menu item id.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a name="gieson.MenuTree.selectClick"></a><a name="selectClick"></a>
<div class="member" >
<div class="member-name clearfix">
<span class="member-name-left">
selectClick (<span class="method-arguments">evt</span>, <span class="method-arguments">id</span>)
</span>
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/menutree/MenuTree.js</span>
<span class="member-line-number">232</span>
</span>
</div>
<div class="member-description">
<p>Opens and/or highlights an item in the menu when user physically clicks.</p>
<div class="part-parameters">
<div class="heading-part">Parameters</div>
<div class="member">
<div class="member-block-group">
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">evt</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">Event</span>
<div class="member-description">
<p>The mouse event object.</p>
</div>
</div>
</div>
</div>
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">id</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">string</span>
<div class="member-description">
<p>The menu item id.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a name="gieson.MenuTree.toggle"></a><a name="toggle"></a>
<div class="member" >
<div class="member-name clearfix">
<span class="member-name-left">
toggle (<span class="method-arguments">id</span>)
</span>
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/menutree/MenuTree.js</span>
<span class="member-line-number">216</span>
</span>
</div>
<div class="member-description">
<p>Toggles an item open/closed.</p>
<div class="part-parameters">
<div class="heading-part">Parameters</div>
<div class="member">
<div class="member-block-group">
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">id</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">string</span>
<div class="member-description">
<p>The menu item id.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a name="gieson.MenuTree.toggleClick"></a><a name="toggleClick"></a>
<div class="member" >
<div class="member-name clearfix">
<span class="member-name-left">
toggleClick (<span class="method-arguments">evt</span>, <span class="method-arguments">id</span>)
</span>
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/menutree/MenuTree.js</span>
<span class="member-line-number">204</span>
</span>
</div>
<div class="member-description">
<p>Used to toggle via mouse click. Toggles an item open/closed and prevents any further mouse bubbling.</p>
<div class="part-parameters">
<div class="heading-part">Parameters</div>
<div class="member">
<div class="member-block-group">
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">evt</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">Event</span>
<div class="member-description">
<p>The mouse event object.</p>
</div>
</div>
</div>
</div>
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">id</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">string</span>
<div class="member-description">
<p>The menu item id.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">Generated by <a href="http://www.documon.net" target="_blank">Documon</a></div>
</body>
</html>