Refactor ElectricNavigation

src/ElectricNavigation.js

@@ -8,24 +8,52 @@ import templates from './ElectricNavigation.soy';
 
 class ElectricNavigation extends ElectricNavigationBase {
   attached() {
-    this.toggler = new Toggler({
-      content: `.${this.listClasses}`,
-      header: `.${this.togglerClasses}`,
-      expandedClasses: 'topbar-list-expanded'
-    });
+    // compound selector list matching only the topmost electric navigation menus 
+    const menuSelector = this.menuClasses ? `nav.${this.menuClasses.split(/\s+/).join(',nav.')}` : 'nav';
+
+    // elements that are the topmost electric navigation menus
+    const menuElements = [].slice.call(document.querySelectorAll(menuSelector));
+
+    // array of toggles used by the document
+    this.togglers = menuElements.map(
+      menuElement => {
+        // list element is presumed to be the first child of the menu
+        const listElement = menuElement.firstChild;
+
+        // generated toggle element, inserted before the list element
+        const menuTogglerElement = document.createElement('button');
+
+        menuTogglerElement.className = this.togglerClasses || '';
+
+        menuElement.insertBefore(menuTogglerElement, listElement);
+
+        return new Toggler({
+          content: listElement,
+          header: menuTogglerElement,
+          collapsedClasses: this.collapsedClasses,
+          expandedClasses: this.menuExpandedClasses
+        });
+      }
+    );
   }
 
   disposed() {
-    let toggler = this.toggler;
-
-    if (toggler) {
-      toggler.dispose();
+    let togglers = this.togglers;
+
+    if (togglers.length) {
+      togglers.forEach(
+        toggler => {
+          toggler.dispose();
+        }
+      );
     }
   }
 }
 
 ElectricNavigation.STATE = {
+  section: {},
   listClasses: {},
+  menuClasses: {},
   togglerClasses: {}
 };
 

src/ElectricNavigation.soy

@@ -1,72 +1,60 @@
 {namespace ElectricNavigation}
 
-/**
- * @param section
- * @param? anchorVariant
- * @param? currentDepth
- * @param? currentURL
- * @param? depth
- * @param? elementClasses
- * @param? linkClasses
- * @param? listClasses
- * @param? listItemActiveClasses
- * @param? listItemClasses
- * @param? togglerClasses
- * @param? togglerLabel
- */
 {template .render}
-	{let $localAnchorVariant: $anchorVariant ?: 'basic' /}
-	{let $localCurrentDepth: $currentDepth ?: 0 /}
-	{let $localListItemActiveClasses: $listItemActiveClasses ?: 'active' /}
+	{@param section}
+	{@param? menuClasses: string}
 
 	{if $section.children}
-		<nav class="{$elementClasses ?: ''}">
-			<button class="{$togglerClasses ?: ''}">{$togglerLabel ?: 'Menu'}</button>
-			<ul class="{$listClasses ?: ''}">
-				{foreach $childId in $section.childIds}
-					{let $page: $section.children[$childId] /}
+		<nav{$menuClasses ? } class="{$menuClasses}"{ : ''}>
+			{call .list data="all"}
+		</nav>
+	{/if}
+{/template}
+
+{template .list}
+	{@param section}
+	{@param? anchorVariant: string}
+	{@param? depth: int}
+	{@param? linkClasses: string}
+	{@param? listClasses: string}
+	{@param? listItemActiveClasses: string}
+	{@param? listItemClasses: string}
+	{@param? maxDepth: int}
+	{@param? menuClasses: string}
 
-					{if not $page.hidden}
-						<li class="{$listItemClasses ?: ''}{$page.active ? ' ' + $localListItemActiveClasses : ''}">
-							{delcall ElectricNavigation.anchor variant="$localAnchorVariant" data="all"}
-								{param index: index($childId) /}
-								{param page: $page /}
-							{/delcall}
+	{let $localAnchorVariant: $anchorVariant ?: 'basic' /}
+	{let $localDepth: $depth ?: 0 /}
 
-							{if not $depth or $localCurrentDepth + 1 < $depth}
-								{call ElectricNavigation.render}
-									{param anchorVariant: $localAnchorVariant /}
-									{param currentDepth: $localCurrentDepth + 1 /}
-									{param currentURL: $currentURL /}
-									{param depth: $depth /}
-									{param elementClasses: $elementClasses /}
-									{param linkClasses: $linkClasses /}
-									{param listClasses: $listClasses /}
-									{param listItemActiveClasses: $listItemActiveClasses /}
-									{param listItemClasses: $listItemClasses /}
-									{param togglerClasses: $togglerClasses /}
-									{param togglerLabel: $togglerLabel /}
-									{param section: $page /}
-								{/call}
-							{/if}
-						</li>
+	<ul{$listClasses ? } class="{$listClasses}"{ : ''}>
+		{foreach $childId in $section.childIds}
+			{let $page: $section.children[$childId] /}
+			{let $localListItemActiveClasses: $page.active ? $listItemActiveClasses ?: 'active' : '' /}
+			{let $localListItemClasses: $listItemClasses ? $listItemClasses + ' ' + $localListItemActiveClasses : $localListItemActiveClasses /}
+
+			{if not $page.hidden}
+				<li{$localListItemClasses ? } class="{$localListItemClasses}"{ : ''}>
+					{delcall ElectricNavigation.anchor variant="$localAnchorVariant" data="all"}
+						{param index: index($childId) /}
+					{/delcall}
+
+					{if not $maxDepth or $localDepth + 1 < $maxDepth}
+						<div{$menuClasses ? } class="{$menuClasses}"{ : ''}>
+							{call .list data="all"}
+						</div>
 					{/if}
-				{/foreach}
-			</ul>
-		</nav>
-	{/if}
+				</li>
+			{/if}
+		{/foreach}
+	</ul>
 {/template}
 
-/**
- * @param page
- * @param? linkClasses
- */
 {deltemplate ElectricNavigation.anchor variant="'basic'"}
+	{@param page}
+	{@param? linkClasses: string}
+
 	{if $page.url or $page.redirect}
-		<a class="{$linkClasses ?: ''}" href="{$page.redirect ?: $page.url}">
-			<span>{$page.title ?: 'Missing'}</span>
-		</a>
+		<a{$linkClasses ? } class="{$linkClasses}"{ : ''} href="{$page.redirect ?: $page.url}"><span>{$page.title ?: 'Missing'}</span></a>
 	{else}
-		<span class="{$linkClasses ?: ''}">{$page.title ?: 'Missing'}</span>
+		<span{$linkClasses ? } class="{$linkClasses}"{ : ''}><span>{$page.title ?: 'Missing'}</span></span>
 	{/if}
 {/deltemplate}