208 replies to this topic

[MadeMyDay]

Hey Soma,

I am new to PW and just checking out the possibilities by reading hours in the forums before getting my hands dirty ;-) The navigation was on the schedule today and I like your module (also coming from MODX and looking for a wayfinder replacement). Your module seems to do more or less exactly what one needs for a navigation. But one (or two) suggestions: I would like to be able to define the output myself, because habits or requirements are different. Sometimes I need an additonal <span> somewhere or would like to use another field as title (or well, a title at all ;-) ) and so on. Since PW doesn't use any template or placeholder syntax I am not sure how to do so without hacking your module. Antoher example: the active class should be appended to the <li> element since this is the element which is active, not a child of it. I often need to style the <li> element and the containing <a> element as well. I your markup this is hard to accomplish, other way around it would be easy (you already mentioned an upcoming option for that). But as I said, requirements differ all the time and the most flexible solution would be to define the markup myself (or falling back to the standard output of course).

Thank you for your solution(s), I will try PW on a "real" project soon.

[Pete]

Hi MadeMyDay - you might be better off just taking a look a the default head.inc template and changing the breadcrumb layout there if you want to do something quite a bit different.

I know how useful WayFinder was coming from MODx myself, but familiarising myself with the head.inc template file also helped me to learn the basics and I was off into the advanced stuff in no time.

That's not to knock Soma's module by any means as it's a good, quick way of getting navigation up and running quickly, but rather saying that PW is really easy to customise to do what you want with a fairly easy learning curve compared to full-blown PHP development.

[Soma]

Hey MadeMyDay! Thanks for your post and inputs. As a modx user myself (not anymore) I certainly know Wayfinder, but found it a little too overhelming with way too many complicated options, so I've never used it to it's full power, also because the basic output was always enough.

Pete is right, if you want the ultimate flexiblity you would want to create your own nested function to output.

But I guess it also can get complicated depending on what you want to do. Generating a basic nested navigation is really easy using PW API, but I like to have some sort of tool that suites for most cases without getting into too much coding everytime. So having a module like I see as a nice way you can always rely on for fast implementation.

You're right that maybe best option would be to have classes appended to <li> element and not inner item. It will more easily allow for if you are styling <li> elements, but let's you as well style the inner element. The other way around it isn't possible. I'm always styling the anchor and not the list element as it is the most easy and reliable cross-browsers. That's why I implemented it this way. But it's now changed by default.

I understand that having a possibility to define custom markup will make it even more flexible and I was already planing to do anyway. Though with such implementation it's always the case that at some point you're still limited at best in some way or the other.

I already looked into it and found a easy implementation that will work and not having too much options. I just commited a major new update to github and updated first post to reflect changes. It let's you now define custom markup even with placeholders/tags for fields you want to output.

Just as an example you could do something like this:

'outer_tpl' => '<ul id="mainnav" class="nav">||</ul>',
'inner_tpl' => '<ul>||</ul>',
'list_tpl' => '<li%s>||</li>',
// template string for the items. || will contain entries, %s will replaced with class="..." string

'item_tpl' => '<img src="{icon}"/><a href="{url}">{headline|title}</a><p>{summary}</p>',
// {icon} any image field will be auto-recognized and return image url instead. {url} will output url to document. Any other field will output normally (assuming it's a textfield)

'item_current_tpl' => '<img src="{icon}"/><span>{title}</span><p>{summary}</p>'

I also renamed and removed some options with this update, so if you already using it, make sure you update your template code. Sorry for the inconvenience it may cause. But I think it is now better and will not change in future.

Changed:
'class_current' to 'current_class'
'class_parent' to 'parent_class'
'css_levels_on' to 'levels'
'css_firstlast_on' to 'firstlast'

Added:
'has_children_class' => 'has_children'
'levels_prefix' => 'level-'
'outer_tpl' => '<ul>||</ul>'
'inner_tpl' => '<ul>||</ul>'
'list_tpl' => '<li%s>||</li>'
'item_tpl' => '<a href="{url}">{title}</a>'
'item_current_tpl' => '<a href="{url}">{title}</a>'

Removed:
'ul_class' and 'ul_id'. Which now can be added via 'outer_tpl'.

While at it I also fixed a max level issue when using other root page than "/".

Thanks.

[MadeMyDay]

Hi Pete,

yes, I already took at the head.inc template and the (one level) navigation is straightforward. But if dealing with more levels it gets a bit more complicated. Of course it is doable, but I think a navigation as unordered list is used on nearly every website so a module for it seems appropriate.

Hi Soma,

well... I am impressed! This is exact the way how I would do it ;-) Perfect! Im am eagerly looking forward to use it. I am MODX user since 6 years, but disappointed by the current development (extJS, slow manager, you all know it) and this chaotic business model. PW really seems to be as flexible and the roadmap is a dream (matrix thingie, draft mode, versions, form generator etc.). I think I will start an extra thread with some questions, nice to see MODXers here which then know what I am talking about ;-)

Greetings from Germany,
Marc

[Pete]

Yup - a module is definitely easier when you get to recursive submenus. If you want something that will show a lot of pages with multiple levels of submenus it would be good to have the module cache the output (if t doesn't already).

[Soma]

Pete, i think you want to use the markup cache in PW to do simple caching to your needs.

[raydale]

Soma - thanks for building this module, it's the first time I have come across this in the forums and should save a fair bit of time when rapid prototyping. Good documentation too.

[Pete]

Pete, i think you want to use the markup cache in PW to do simple caching to your needs.

Yeah, my original thought was to somehow make this a checkbox config option in your module to keep things really simple, but it would only be a few minutes' work to cache it in the template anyway Of course, if you wanted to cache it properly, say for a day or more you'd want it to rebuild the menu and re-cache it whenever a page is saved to be on the safe side, so whilst my original idea seemed simple it's actually a bit more complicated than that

[gottberg]

Hi, thanks for this module, everything work as i wanted except that

$treeMenu = $modules->get("MarkupSimpleNavigation"); // load the module
echo $treeMenu->render();

dosnt get all the pages. It shows all pages except the root page. Am im missing something or did i misunderstand something?

Simon

[Soma]

Hi gottberg!

To include the root page you would pass the option "show_root" like:

echo $treeMenu->render(array( "show_root"  => true ));

[gottberg]

Hi gottberg!

To include the root page you would pass the option "show_root" like:

echo $treeMenu->render(array( "show_root"  => true ));

Thank you! Worked like a charm!

[Soma]

I just commited an update, with improvements to simplify module code.

Originally fixing an issue with "has_children" behaviour. Which now works also with custom selector (that would ommit pages by template) and max_levels as expected. It will now only append if there really is children to be shown.

Also fixed and updated some documentation.

Thanks

[renobird]

Hi Soma,

Thanks for this plugin. I'm just putting it through the paces, and I noticed something related to the "has_children" behavior your mentioned above.

If you specify something like:

'selector' => 'parent!=1011'

The "has_parent" class isn't appended on the first level, but deeper than that it shows back up.

For example, there's no "has_parent" appended for 1011 for:

/
/about-us/
etc...

But it does get appended for something like:

/about-us/meet-the-staff/
etc...

Maybe I'm doing something wrong and need to set something differently in the options array, but from what I can tell this doesn't seem like the behavior you intended.

[Soma]

renobird, can you give me more to chew? Code you use for the navigation, and the output? Feel free to send me pm if you don't want to post here.

I think you mean "has_children" because there's no "has_parent"

[renobird]

Hi Soma,

Sorry, meant "has_children".

<?php $treeMenu = $modules->get("MarkupSimpleNavigation");
$options = array(
   'parent_class' => 'parent', // string (default 'parent') overwrite class name for current parent levels
   'current_class' => 'current', // string (default 'current') overwrite current class
   'has_children_class' => 'parent', // string (default 'has_children') overwrite class name for entries with children
   'levels' => false, // bool (default false) wether to output "level-1, level-2, ..." as css class in links
   'levels_prefix' => 'level-', // bool (default 'level-') prefix string that will be used for level class
   'max_levels' => 3, // int (default null) set the max level rendered
   'firstlast' => true, // bool (default false) puts last,first class to link items
   'collapsed' => false, // bool (default false) if you want to auto-collapse the tree you set this to true
   'show_root' => true, // bool (default false) set this to true if you want to rootPage to get prepended to the menu
   'selector' => 'parent!=1011', // string (default '') define custom PW selector, you may sanitize values from user input
   'outer_tpl' => '<ul id="nav" class="clearfix">||</ul>', // template string for the outer most wrapper. || will contain entries
   'inner_tpl' => '<ul>||</ul>', // template string for inner wrappers. || will contain entries
   'list_tpl' => '<li%s>||</li>', // template string for the items. || will contain entries, %s will replaced with class="..." string
   'item_tpl' => '<a href="{url}">{title}</a>', // template string for the inner items. Use {anyfield} and {url}, i.e. {headline|title}, if field is of type image it will return url to image (first image if multiple)
   'item_current_tpl' => '<a href="{url}">{title}</a>' // template string for the current active inner items.
)
?>

Called like so:

<?=$treeMenu->render($options);?>

Let's say I have this nav structure (simplified):

home

portfolio
--project 1
--project 2
--project 3
--project 4
--project 5
etc...

about-us
--meet the staff
--history

services
--stuff we do
--more stuff we do

contact us

The "portfolio" page is the one I want to omit children from because it could have a lot of children, and the drop down menu gets too long.
'selector' => 'parent!=1011' corresponds to that page.

What happens now is that if I visit:

/portfolio/

There is no "has_children" appended.

But if I visit:

/portfolio/project-1

the "has_children" class shows up again.

[renobird]

Bah! I spotted it as soon as I posted this code.

My "parent_class" and "has_children_class" are set to the same thing. That's what is causing it to act like it's showing up again.
My apologies for the wild goose chase.

*Bad Renobird, Bad...*

[Soma]

Hah! That happens regularely including myself.

The behavior (if set right) I think is correct. ( After all it's surely possible I missed something while testing )

So if you ommit pages by saying "parent!=1002", the page 1002 will have no "has_children" as there's no children to be rendered in the menu.

It will only append the "has_children" class to items that really have children show up in the navigation at some point, cutting of at the max_levels or if excluded by a selector. Only side effect of it I noticed recently is if you have two navigation (top, sidebar) and set the top to max_levels 1, and render the rest of the navigation on a separate call in the sidebar. The top level won't have "has_children" class appended. But I don't know if that would make sense, needed or even possible with this apporoach.

[renobird]

Thanks Soma,

Again, apologies for the false alarm.

I do have another (hopefully legitimate) question. Is there a way to optionally suppress the href attribute on top level parent items?
Meaning, if the "has_children" class is set then the href for that top level item would be set to href="#"

A lot of times I find that the parent items are just containers for the children. So if you link to them, there really isn't a need to have anything there.
There's a great Textpattern plugin (adi_menu) that has this functionality, and I've just realized how much I use it.

[Soma]

I would take this route...

Make the "container" pages you're saying having a template "redirect", with only a single page field "redirect_page" with pagelistSelectMultiple input

Then have the template file code:

$session->redirect($page->redirect_page->url);

or how about "redirect-to-firstchild".

$session->redirect($page->children->first()->url);

Edit:

Another option would be to use javascript to set urls of first level to "#".

[renobird]

I've used JS to suppress those links in the past.
I've just always wondered how it effects search engine results, since the url still actually gets displayed, so the page will get crawled.
If it's set to '#", then it's basically invisible.

I'll explore the redirect route, I think that would solve any issue with "dead" URL's floating around.

Thanks.