Jump to content

MarkupSimpleNavigation


Soma

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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);

Link to comment
Share on other sites

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> 

Link to comment
Share on other sites

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 "-------------------------------------------" 

Link to comment
Share on other sites

<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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...