Support/Comments for Wayfinder

354 Posts

MrDutchy Reply #21, 20 years, 1 month ago

Quote from: kylej at Aug 03, 2006, 01:54 PM

add a parameter like &rowIdPrefix
add a new placeholder [+wf.id+] for the following templates: rowTpl,parentRowTpl,hereTpl,innerRowTpl,innerHereTpl
If the parameter is specified in the snippet call add the docid to the value from &rowIdPrefix and then insert it into the template.

This sounds a lot like what i was trying to achieve with dropmenu. Currently i use dropmenu for a horizontal top navigation dropdown. It works fine but i want each of the dropdown categories have their own color which seems to be impossible with Dropmenu. (among other style declarations i specify my background color in a #nav li ul {...} style css declaration which is applied to all categories equally)

How would i go about doing it with Wayfinder? My current call looks like this:

<div id="nav">
[[Wayfinder? &startId=`0` &rowIdPrefix]]
</div>

This has the same output and styling applied as my Dropmenu version. I am unsure about how i am supposed to let Wayfinder generate id’s with the &rowIdPrefix thing. More specifically i do not understand how to define a wayfinder-template-file like you described above and where to place a file like that to make it work. Any help would be greatly appreciated.

2,542 Posts

heliotrope Reply #22, 20 years, 1 month ago

Hi,

you have to specify wich prefix you wish to add

[[Wayfinder? &startId=`0` &rowIdPrefix=`menu` ]]

will give

<ul>
<li id="menu10">document 10</li>
</ul>

If you are using custom tpl don’t forget to add [+wf.id+] in your chunk
<li [+wf.id+][+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>

Of course, you have to rewrite your css

:-)

Made with MODx : [url=http://www.copadel.com]copadel, fruits et l

354 Posts

MrDutchy Reply #23, 20 years, 1 month ago

Quote from: heliotrope at Aug 07, 2006, 03:44 AM

Hi,

you have to specify wich prefix you wish to add

[...]

If you are using custom tpl don’t forget to add [+wf.id+] in your chunk
<li [+wf.id+][+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>

Of course, you have to rewrite your css

Thanks for your reply.

Actually how to use a custom tpl with wayfinder was part of my question. I am sorry if this is a very obvious thing for the rest of you but i cannot find anything about it in the documentation.
I understand however that the documentation is probably not yet complete because of the freshness and the un-finalness of this snippet

Furthermore i understand that i will have to rewrite my css. For now however i am only looking at the lists wayfinder returns in the html sourcecode. This is because i feel i need to understand the output mechanism before i can customize it html code-wise and finally style it css declaration-wise.

So if anyone could get me started with the templating that goes on under wayfinders hood i’d greatly appreciate that

786 Posts

kjaebker Reply #24, 20 years, 1 month ago

Here is what you need t odo for templating:

In the documentation file you will find the following parameters:

outerTpl,rowTpl,parentRowHereTpl,parentRowTpl,hereTpl,innerTpl,innerRowTpl,innerHereTpl

These can be used to customize the output. First thing you need to do is decide which templates (from the list above, there are descriptions in the docs also) you will need. Then create chunks for how you would like the layout, here are a few examples:

For the rowTpl I create a chunk name wfRow and it contains this:

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

For the outerTpl I create a chunk named wfOuter and it contains this:

<ul id="topnav"[+wf.classes+]>[+wf.wrapper+]</ul>

For the innerTpl I create a chunk named wfInner and it contains this:

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

For the hereTpl I create a chunk named wfHere and it contains this: (this will make the current page not a link)

<li[+wf.classes+]><span>[+wf.linktext+]</span>[+wf.wrapper+]</li>

After creating these my snippet call would need modified to use the new chunks:

[[Wayfinder? &startId=`0` &rowIdPrefix=`menu` &outerTpl=`wfOuter` &rowTpl=`wfRow` &innerTpl=`wfInner` &hereTpl=`wfHere`]]

That is how you go about using chunks to template wayfinder.

53 Posts

funkybuddah Reply #25, 20 years, 1 month ago

From a webstandard point of view the wayfinder still includes a mistake which also is present in the dropmenu snippet. And that is the use of classes in the menu. It should be id. There can only be one item "you are here" and therefore it is semantic incorrect to use class . This is merely a suggenstion. For further reading. So generally the whole section with Class names to be assigned should be converted to ids or as i see it.

http://www.w3.org/TR/1998/REC-html40-19980424/struct/global.html#h-7.5.2
http://www.tizag.com/cssT/cssid.php

786 Posts

kjaebker Reply #26, 20 years, 1 month ago

If you want to use an id you can set the hereTpl to include an id like this:

<li[+wf.classes+] id="here"><span>[+wf.linktext+]</span>[+wf.wrapper+]</li>

and then don’t specify the hereClass as &hereClass=``

most of the classes that can be assigned must be classes and not ids because they will be assigned to multiple items. the hereClass for example is assigned to the current doc but also the parents of that doc so you can show where someone is all the way up the tree. The only one that will always be assigned to one item only is selfClass.

53 Posts

funkybuddah Reply #27, 20 years, 1 month ago

Okay thats great. My apologies for not looking completely into the snippets configuration possibilities. But anyway i think it is a great new snippet.

1,097 Posts

PaulGregory Reply #28, 20 years, 1 month ago

Just to squash this before anyone else gets the wrong idea:
Quote from: funkybuddah at Aug 07, 2006, 05:33 PM

From a webstandard point of view the wayfinder still includes a mistake which also is present in the dropmenu snippet. And that is the use of classes in the menu. It should be id. There can only be one item "you are here" and therefore it is semantic incorrect to use class . This is merely a suggenstion. For further reading. So generally the whole section with Class names to be assigned should be converted to ids or as i see it

Semantically incorrect to who/what? I am glad that Wayfinder defaults to classes because it is safer. If you wish to change items to IDs for pedantic purposes, you can. But, if you wanted to include the same menu at the top and bottom of the page, for instance, the use of the same ID for two "here"s would be majorly wrong. So that would be a bad default action. Having just one item with a particular class is NOT WRONG.

From the VERY THINGS YOU CITE:

Use classes when there are one or more occurences per page.

A class name may be shared by several element instances.

Note "one or more" and "may be shared".

You have misinterpreted the difference between IDs and classes. IDs can only refer to one element. This does not mean that one element can only be referred by an ID.

No, I don't know what OpenGeek's saying half the time either.
MODx Documentation: The Wiki | My Wiki contributions | Main MODx Documentation
Forum: Where to post threads about add-ons | Forum Rules
Like MODx? donate (and/or share your resources)
Like me? See my Amazon wishlist
MODx "Most Promising CMS" - so appropriate!

27 Posts

stewski Reply #29, 20 years, 1 month ago

I’m pretty new to the modx community (hello) so forgive me If I’m getting the wrong end of the stick.

Wouldn’t it make sense to use a different prefix for each menu instance on a page
e.g. IDs like "MYMENU1_" and "MYMENU2_" and then append a unique ID (row or page number etc) for each li in a menu?

I’m assuming (possibly wrongly no jokes about ass of u and me grin

) that each menu tree should only contain unique items so the use of ID would be logical.

Not trying to join in with pedantry, just trying to give my advice to an obviously skilled developer, great snippet btw, I look forward to playing with it a bit...

1,097 Posts

PaulGregory Reply #30, 20 years, 1 month ago

I’m sure that there are uses for having each item have its own ID, particularly with javascript menus, and yes it could be useful to be able to ensure unique IDs - stewski’s method sounds good and similar to other menu routines I have encountered elsewhere.

There are many ways of achieving IDs with Wayfinder if one wants to. To clarify my point, people should only add IDs to things if that is going to be useful. IDs are not a requirement of CSS or HTML semantics.

To apply this false "unique=ID" logic to everything, you would give each paragraph its own ID because they said different things. And you would possibly have to mention every ID in your style sheet. It’s just a misunderstanding of "web standards", and I want to make it clear to everyone that Wayfinder’s default class-not-ID set up is not a "mistake" as FunkyBuddah puts it.

No, I don't know what OpenGeek's saying half the time either.
MODx Documentation: The Wiki | My Wiki contributions | Main MODx Documentation
Forum: Where to post threads about add-ons | Forum Rules
Like MODx? donate (and/or share your resources)
Like me? See my Amazon wishlist
MODx "Most Promising CMS" - so appropriate!