[SOLVED] Wayfinder - Back to Basics - How to add class to first level of li only

342 Posts

Willi Waizenegger Reply #1, 13 years, 11 months ago

This should be a basic Wayfinder question but I'm having problems structuring my Wayfinder chunks to make it happen.

I'm trying to add an accordion menu using Wayfinder. I'm utilizing the one offered by Dynamic Drive called "Bullet list accordion menu" on this page:

http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm

The hard-coded version of this system calls for a CSS class to be added to the top level menu's li. Structured something like this:


<ul>

<li class="menuheader expandable"><a href="#">Menu One</a>
<ul class="categoryitems">
<li><a href="#">Menu One Submenu One</a></li>
<li><a href="#">Menu One Submenu Two</a></li>
<li><a href="#">Menu One Submenu Three</a></li>
<li><a href="#">Menu One Submenu Four</a></li>
<li><a href="#">Menu One Submenu Five</a></li>
<li><a href="#">Menu One Submenu Six</a></li>
</ul>
</li>


<li class="menuheader expandable"><a href="#">Menu Two</a>
<ul class="categoryitems">
<li><a href="#">Menu Two Submenu One</a></li>
<li><a href="#">Menu Two Submenu Two</a></li>
<li><a href="#">Menu Two Submenu Three</a></li>
<li><a href="#">Menu Two Submenu Four</a></li>
<li><a href="#">Menu Two Submenu Five</a></li>
<li><a href="#">Menu Two Submenu Six</a></li>
</ul>
</li>

<li class="menuheader expandable"><a href="#">Menu Three</a>
<ul class="categoryitems">
<li><a href="#">Menu Three Submenu One</a></li>
<li><a href="#">Menu Three Submenu Two</a></li>
<li><a href="#">Menu Three Submenu Three</a></li>
<li><a href="#">Menu Three Submenu Four</a></li>
<li><a href="#">Menu Three Submenu Five</a></li>
<li><a href="#">Menu Three Submenu Six</a></li>
</ul>
</li>
</ul>

Notice the first level of li has this:

<li class="menuheader expandable">

Now, I can understand that if that class existed within the top level ul, I would just create something like this within the outerTpl chunk:

<ul class="className">[[+wf.wrapper]]</ul>

...but we're talking about the first level li instead. Where and how do I code those class names in?

Also, when I look at the resulting source code of the page, I get a pesky

<li class="first">

and

<li class="last">

...on the first and last first level li items.

How do I add class names to the first level li items? How do I handle the "first" and "last" class names that Wayfinder takes upon itself to add for me?

Note: I had found a tutorial utilizing a Dynamic Drive accordion menu on this page:

http://wiki.modxcms.com/index.php/Accordion_menu_with_Wayfinder_using_JQuery

but their structuring appears different than what I'm experiencing on mine. Not sure if the Dynamic Drive coding changed since this tutorial was written since this tutorial doesn't seem to need to deal with a first level li class.

FWIW: my...

innerTPL chunk contains this:

<ul class="categoryitems">
[[+wf.wrapper]]
</ul>

rowTpl chunk contains this:

<li [[+wf.id]][[+wf.classes]]> <a href="[[+wf.link]]" title="[[+wf.title}]" [[+wf.attributes}]>[[+wf.linktext]]</a> [[+wf.wrapper]]</li>

outerTpl chunk contains this:

<ul>[[+wf.wrapper]]</ul>

Wayfinder call contains this:

[[!Wayfinder? 
&startId=`0`
&rowTpl=`menuRowsChunkName` 
&outerTpl=`outerTplChunkName` 
&innerTpl=`innerTplChunkName` 
&levelLimit=`3` 
&firstClass=`` 
&lastClass=`` 
]]

Thank you in advance.

MODx Revo 2.2.2
Wayfinder 2.3.3 [ed. note: waizen last edited this post 13 years, 11 months ago.]

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 13 years, 11 months ago

See &rowTpl and &innerRowTpl properties; the rowTpl will take care of the first level, and is where you would specify the menuheader and expandable classes, and the innerRowTpl will handle inner levels. &parentRowTpl and &categoryFoldersTpl might also be useful.

You could also have a CSS directive for ul li (first level li), then a different one for ul li ul li (inner level li).

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

342 Posts

Willi Waizenegger Reply #3, 13 years, 11 months ago

Thank you Susan:

I just got back on here to elaborate on something but you responded first. Your second paragraph: in my case, the CSS directive would not work (I don't think) because this class is being arrived at through js. What I failed to originally mention was the js script in the head that looks like this:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/ddaccordion.js">
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>

<script type="text/javascript">


ddaccordion.init({
	headerclass: "expandable", //Shared CSS class name of headers group that are expandable
	contentclass: "categoryitems", //Shared CSS class name of contents group
	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
	mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
	defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
	onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
	animatedefault: false, //Should contents open by default be animated into view?
	persiststate: false, //persist state of opened contents within browser session?
	toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
	togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
	animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
		//do nothing
	},
	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
		//do nothing
	}
})

</script>

The headerclass: "expandable"... part is where the class comes from. Not the style sheet. Probably not relevant to show the contents of ddaccordion.js that makes all the above work.

However, can you elaborate on your first paragraph a bit? How do I phrase it within the rowTpl exactly? I've tried different combinations and they all failed me. I recognize that I probably didn't see something really obvious. [ed. note: waizen last edited this post 13 years, 11 months ago.]

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 13 years, 11 months ago

rowTpl

<li class="menuheader expandable [[+wf.classnames]]"><a href="[[+wf.link]]">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>

innerTpl

<ul class="categoryitems [[+wf.classnames]]">
             [[+wf.wrapper]]
</ul>

innerRowTpl

<li[[+wf.classes]]>
             <a href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]</a>
             [[+wf.wrapper]]
</li>

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

342 Posts

Willi Waizenegger Reply #5, 13 years, 11 months ago

Thanks, Susan. Hmmm.... it didn't work. The source code is still not showing the

class="menuheader expandable"

anywhere, let alone within the first li level. [ed. note: waizen last edited this post 13 years, 11 months ago.]

☆ A M B ☆
1,780 Posts

Frogabog Reply #6, 13 years, 11 months ago

Can you throw in some obvious styled css for "menuheader expandable" to see if Wayfinder is failing to find the class, or if it's the js? That would tell you if your rowTpl was working with Susan's code.

Oh, ok, I see now that the class is not showing in the source. Kinda sounds like something's not right with the rowTpl because Wayfinder is pretty good about pulling in classes when you tell it to. [ed. note: frogabog last edited this post 13 years, 11 months ago.]

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster

342 Posts

Willi Waizenegger Reply #7, 13 years, 11 months ago

Correct, Frogabog. I just can't tell what is going on.

BTW: I know the thing works while everything is hard-coded in the template; without the Wayfinder being involved.

☆ A M B ☆
1,780 Posts

Frogabog Reply #8, 13 years, 11 months ago

Right, so maybe it's a typo in the Wayfinder call then. Or maybe the js is interfering somehow. Can you create a test menu with the same call, but add a new class to the rowTpl that isn't part of the js? Does that work?

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster

342 Posts

Willi Waizenegger Reply #9, 13 years, 11 months ago

Okay... got it to work. Susan's code worked perfectly (thanks, Susan!).

What happened is that I didn't know that I had two copies of the Wayfinder call at work here. One within the template itself and the other in a chunk, which I had thought was coded within the template but wasn't. I was making all the changes within the chunk version but the changes never made it to the template.

Oh, silly me.

Thanks for the help.