MarkupSimpleNavigation

[vxda]

Ty Soma. it worked

[nfil]

Hi! I'am just curious if any of you experienced any issue with the markupSimpleNavigation module when used with the pagination.

Probably is just something wrong with my code. I'am still learning how processWire works.

I have this for the menu:

  <?php
  echo "<nav id='navigation' class='navigation clearfix'><div class='menu'>";
  $treeMenu = $modules->get("MarkupSimpleNavigation"); // load the module
  $options = array(
  'has_children_class' => '',
  'levels' => true,
  'selector'=>"limit=9",
  'levels_prefix' => 'display: none;',
  'max_levels' => 2,
  'outer_tpl' => ' <ul>||</ul>',
  'inner_tpl' => '<ul>||</ul>',
  'list_tpl' => '<li>||</li>',
  'item_tpl' => '<a href="{url}">{title}</a>',
  'item_current_tpl' => '<li class="current-menu-item"><a href="{url}">{title}</a></li>');
  echo $treeMenu->render($options);
  echo "</div></nav>";

Then I have this to output some images and paginate the contents:

  <section id="portfolio-items">
       
  <?php
  $thumbWidth = 0;
  $thumbHeight = 140;
  $imagesPerPage = 18;
  $start = ($input->pageNum - 1) * $imagesPerPage;
  $total = count($page->images);
  $images = $page->images->slice($start, $imagesPerPage);
  $a = new PageArray();
  foreach($images as $unused) $a->add(new Page());
  $a->setTotal($total);
  $a->setLimit($imagesPerPage);
  $a->setStart($start);

            foreach($images as $image) 
            {    
              $thumb = $image->size($thumbWidth, $thumbHeight); 
              ?>
          
  <article class="four columns">
             
                <a class="bwWrapper single-image plus-icon" href="<?= $image->url ?>" rel="folio" title="<?= $image->description ?>">
                  <img src="<?= $thumb->url ?>" height="<?= $thumb->height ?>" alt="<?= $thumb->description ?>" >
                </a> 

             <a class="project-meta" href="<?= $page->url ?>">
             <h6 class="title"><?= $image->description ?></h6>
             </a>           

            </article> 
              <?
            }
            ?>

    <div class="clear"></div>
          <div class="divider-solid"></div> 

  <?= $a->renderPager(array(

              'nextItemLabel' => "Próx",
              'previousItemLabel' => "Anter",
              'listMarkup' => "<div class='pagination'><ul>{out}</ul></div>",
              'currentItemClass' => "page active",
              'itemMarkup' => "<li class='{class}'>{out}</li>",
              'linkMarkup' => "<a href='{url}'>{out}</a>"

              )); ?>

  </section>

when I load the first page everything works but the weird thing is that when I go to the second content's page the simpleMarkupNavigation menu disappears.

I've looked at the generated HTML and its not there. Did this happened to any of you?

[Soma]

Add start=0 to your selector.

[nfil]

Thanks Soma! I missed that detail. By the way when you limit the amount with:

'selector'=>"limit=9",

It will also limit the navigation items on the submenu. Can markupSimpleNavigation set one limit for the parent menu and other for the child's menu? Thank you again.

[Soma]

No this is not supported. I'm not sure this is something we need very often.

[nfil]

yes I agree, I was just curious! Your module really speeds up the process when we want to create a custom navigation.

Congratulations for a great module and for all your help.

[Soma]

I'm currently playing around a little and I might have a very elegant solution that you could: 

1. Give a page or pages a "$page->selector" on runtime that the module will look for. So you could specify on every page what children selector it will have. This could then even work if you create a special field to attach to templates to make it configurable in the admin.

$pages->get(1001)->selector = "start=0,limit=10";

2. and have selector options "selector_leveln" that you could (dynamicly unlimited) use and the module will look for it, if found use that instead of the $options['selector']

"selector_level1" => "start=0,limit=10";
"selector_level2" => "start=0,limit=20";

All quite simple to implement and seems very powerful. How does that sound?

[Soma]

Oky doky. v 1.2.1

# added support for nav_selector property/field and selector_leveln (new in 1.2.1)

• You can now add a special property "nav_selector' to page(s) to define custom selector for rendering their children. This can be done on runtime or via a custom field added to pages to remotely control the selector. You can configure the name of the field by using the newly added option "selector_field". MarkupSimpleNavigation will look out for it and use it, otherwise it will use the "selector" option.
• You can now define selector on a per level basis. Simply use the _leveln suffix on the "selector" option, where n is the level number from the root parent. This is best illustrated by the following example:

$pages->get(1001)->my_selector = "template=projects";

$options = array(
    "selector_level1" => "template=ressort",
    "selector_level2" => "start=0, limit=10",
    "selector_level3" => "template=news|events, sort=-created",
    "selector_field" => "my_selector"
);

echo $nav->render($options);

Note that "my_selector" has priority and will overwrite any other selctor or selector_leveln

 

https://github.com/somatonic/MarkupSimpleNavigation

[kongondo]

Nice addition Soma, thanks. This makes it even more versatile!

[Martijn Geerts]

The lack of this was the reason why I ended up making the nav my self. Things changed, Huge addition !

[Soma]

You're welcome. Now after you know how to do it manually you're allowed to forget about it. 

I'm not exactly sure I would have thought of doing it like this before as I think I was often overcomplicating. Often it just takes some time to get to convenient solutions, I hope it's something useful. A lot of flexibility is gained regarding defining/excluding different branches or levels in a simple manner.

[peterfoeng]

Hi Soma,

Thanks for the reply I solved the first issue I am having using the xtemplates since the structure is setup like the following:

Menu -> (template: Menu-Index)
 Menu-Category-1 ->(template: Menu-Category)
   Menu-Item-1 ->(template: Menu-Item)
   Menu-Item-2 ->(template: Menu-Item)
 Menu-Category-2 ->(template: Menu-Category)
   Menu-Item-1 ->(template: Menu-Item)
   Menu-Item-2 ->(template: Menu-Item)
 Menu-Category-2 ->(template: Menu-Category)
   Menu-Item-1 ->(template: Menu-Item)
   Menu-Item-2 ->(template: Menu-Item)
 Menu-Category-2 ->(template: Menu-Category)
   Menu-Item-1 ->(template: Menu-Item)
   Menu-Item-2 ->(template: Menu-Item)

etc

I am able to setup the page structure like the following:

<div>
  {$page->title}</h3>
  <ul>
    <li>Sub item 1</li>
    <li>Sub item 2</li>
    <li>Sub item 3</li>
  </ul>
<div>
<div>
  {$page->title}</h3>
  <ul>
    <li>Sub item 1</li>
    <li>Sub item 2</li>
    <li>Sub item 3</li>
  </ul>
<div>

Great module and if we get support for item position class - this is very powerful module. Cheers

[bodhic]

Hello and great module. Overall it's working perfectly, I just have one question. I'd like to set up a structure like this:

<li>Nav Item</li>
<li class="divider"></li>
<li>Nav Item</li>
<li class="divider"></li>
<li>Nav Item</li>

I'm using Foundation4 as my css framework and the "divider" class is the default seperator. Is there a way to append an empty <li> between links? I appologize if this is a stupid question, but I'm new to PW. Other than this, I've found the module very easy to implement.

Thanks for any help/insight that you can provide.

[kongondo]

Hi,

Not answering your question...just a comment/rant at Foundation CSS. 

<rant>I use Foundation myself and I didn't know about this. What an absurd way of creating a divider effect!! </rant>

[Martijn Geerts]

Sorry to say, but that's stupid Markup. ( just looked at the Zurb Foundation Website )

In between a list,  list nothing "<li class="divider"></li>". 

If you have the navigation in a variable, say $nav, maybe you could do something like:

$nav = str_replace("</li>", "<li class="divider"></li>", $nav);

[bodhic]

No argument here guys. It is pretty stupid and not a big deal if I don't get it incorporated. Since I use Foundation/SASS I could probably just extend the li class and handle everything via css. I was asking this question more out of curiosity than absolute need.

I guess there is one use case where this might make a little more sense. Foundation also comes with a default <label> rule for their navbar. So it might be useful to be able to append something descriptive like this within a dropdown:

 <ul class="dropdown">
              <li><label>Descriptive Label Here</label></li>
              <li><a href="#">Dropdown Level 2a</a></li>
              <li><a href="#">Dropdown Level 2b</a></li> 

[Soma]

If you create a template divider and place the page it in the tree you could do:

function hookGetListClass($event){
  $child = $event->arguments("page");
  if($child->template == "divider"){
    $event->return = " divider";
  }
}

$options = array(
    'xtemplates' => 'divider',
    'xitem_tpl' => ''
  );

$nav->addHookAfter("getListClass", null, "hookGetListClass");
echo $nav->render($options);

Create as many divider pages as you like and name them "-------------------------------------------" 

[ryan]

<rant>I use Foundation myself and I didn't know about this. What an absurd way of creating a divider effect!! </rant>

I've wondered why they do this too. There must be a good reason for it, but it escapes me. Any guesses? The guys that make Foundation aren't dumb (quite the opposite), and it's still my favorite css framework overall. But this extra <li class='divider'> seemed very unusual when I was working with it, though I just went with the flow and assumed they must know something I didn't. The only thing I can guess is that, semantically and visually, an extra <li> representing a divider might translate to any situation (even one with no CSS, though it'll look unusual). But I think of a divider as a style not a semantic element. I'd be curious on any other theories. 

[apeisa]

I found it pretty logical (but not common). It divides two groups. Not intended to use between each element. If you want divider between each nav element, then just style it.

[bodhic]

Nice find apeisa. That certainly makes more sense.

[nfil]

Oky doky. v 1.2.1

# added support for nav_selector property/field and selector_leveln (new in 1.2.1)

• You can now add a special property "nav_selector' to page(s) to define custom selector for rendering their children. This can be done on runtime or via a custom field added to pages to remotely control the selector. You can configure the name of the field by using the newly added option "selector_field". MarkupSimpleNavigation will look out for it and use it, otherwise it will use the "selector" option.
• You can now define selector on a per level basis. Simply use the _leveln suffix on the "selector" option, where n is the level number from the root parent. This is best illustrated by the following example:

$pages->get(1001)->my_selector = "template=projects";

$options = array(
    "selector_level1" => "template=ressort",
    "selector_level2" => "start=0, limit=10",
    "selector_level3" => "template=news|events, sort=-created",
    "selector_field" => "my_selector"
);

echo $nav->render($options);

Note that "my_selector" has priority and will overwrite any other selctor or selector_leveln

 

https://github.com/somatonic/MarkupSimpleNavigation

I was quite happy with it already. Now we can fine tune the rendered menu even more than before.

Probably I will update the module on my first site. Damn it Soma, why do you have to be such an hard working clever developer

Thanks for sharing your knowledge and congrats on a great module/update.

[SteveB]

Has anybody here figured out using this with Pure?

[Martijn Geerts]

Has figured out what ?

[SteveB]

Has figured out what ?

I don't quite get what's going on with Pure's css/js yet and was lazily looking for an example. Want to generate the navigation with the module but have it styled as a Pure menu.

..............................................................................................................................................................

EDIT: It's a pretty active project and examples on the site are somewhat out of date, mentioning an otherwise unexplained Y.menu plugin

I found this:

Short answer: Yes. The Y.Menu source code lives here: https://github.com/smugmug/yui-gallery/tree/master/src/sm-menu

Long answer: I recommend holding out on this until

0.4.0, because we are significantly refactoring menu for that release

Along with refactoring the CSS, we're going to make the JS a lot simpler

so that it just toggles classnames. We also plan on having

documentation on the site, showing examples of how to use vanilla JS,

jQuery, or YUI with the menu. When we do this, we'll also highlight the

class names that need to be toggled to achieve specific effects.

Here's a pull request with the new Menu CSS, but I'm still working on the dropdown stuff.

[Fokke]

I don't quite get what's going on with Pure's css/js yet and was lazily looking for an example. Want to generate the navigation with the module but have it styled as a Pure menu.

Pure seems to use very simple HTML with the menus, with some classes and id's to control the behaviour. I believe you can easily tweak the default output of the module to make it to fit your needs.