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
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By MarkE
      This fieldtype and inputfield bundle was built for storing measurement values within a field, rendering them in a variety of formats and converting them to other units or otherwise modifying them via the API.
      The API consists of a number of predefined functions, some of which include...
      render() for rendering the measurement object, valueAs() for converting the value to another unit value, convertTo() for converting the whole measurement object to different units, and add() and subtract() for for modifying the stored value by the value (converted as required) in another measurement. In the admin the inputfield includes a checkbox (which can be optionally disabled) for converting values on page save. For an example if a value was typed in as centimeters, the unit was changed to metres, and the page saved with this checkbox selected, said value would be automatically converted so that e.g. 170 cm becomes 1.7 m.

      A simple length field using Fieldtype Measurement and Inputfield Measurement.
      Combination units (e.g. feet and inches) are also supported.
      Please note that this module is 'proof of concept' at the moment - there are limited units available and quite a lot of code tidying to do. More units will be added shortly.
      See the GitHub at https://github.com/MetaTunes/FieldtypeMeasurement for full details and updates.
    • By tcnet
      File Manager for ProcessWire is a module to manager files and folders from the CMS backend. It supports creating, deleting, renaming, packing, unpacking, uploading, downloading and editing of files and folders. The integrated code editor ACE supports highlighting of all common programming languages.
      https://github.com/techcnet/ProcessFileManager

      Warning
      This module is probably the most powerful module. You might destroy your processwire installation if you don't exactly know what you doing. Be careful and use it at your own risk!
      ACE code editor
      This module uses ACE code editor available from: https://github.com/ajaxorg/ace

      Dragscroll
      This module uses the JavaScript dragscroll available from: http://github.com/asvd/dragscroll. Dragscroll adds the ability to drag the table horizontally with the mouse pointer.
      PHP File Manager
      This module uses a modified version of PHP File Manager available from: https://github.com/alexantr/filemanager
       
    • By tcnet
      This module implements the website live chat service from tawk.to. Actually the module doesn't have to do much. It just need to inserted a few lines of JavaScript just before the closing body tag </body> on each side. However, the module offers additional options to display the widget only on certain pages.
      Create an account
      Visit https://www.tawk.to and create an account. It's free! At some point you will reach a page where you can copy the required JavaScript-code.

      Open the module settings and paste the JavaScript-code into the field as shown below. Click "Submit" and that's all.

      Open the module settings
      The settings for this module are located int the menu Modules=>Configure=>LiveChatTawkTo.

       
    • By tcnet
      Session Viewer is a module for ProcessWire to list session files and display session data. This module is helpful to display the session data of a specific session or to kick out a logged in user by simply delete his session file. After installation the module is available in the Setup menu.

      The following conditions must be met for the module to work properly:
      Session files
      Session data must be stored in session files, which is the default way in ProcessWire. Sessions stored in the database are not supported by this module. The path to the directory where the session files are stored must be declared in the ProcessWire configuration which is by default: site/assets/sessions.
      Serialize handler
      In order to transform session data easier back to a PHP array, the session data is stored serialized. PHP offers a way to declare a custom serialize handler. This module supports only the default serialize handlers: php, php_binary and php_serialize. WDDX was dropped in PHP 7.4.0 and is therefore not supported by this module as well as any other custom serialize handler. Which serialize handler is actually used you can find out in the module configuration which is available under Modules=>Configure=>SessionViewer.

      Session data
      The session data can be displayed in two different ways. PHP's default output for arrays print_r() or by default for this module nice_r() offered on github: https://github.com/uuf6429/nice_r. There is a setting in the module configuration if someone prefers print_r(). Apart from the better handling and overview of the folded session data the output of nice_r() looks indeed nicer.

      Links
      ProcessWire module directory
      github.com
    • By Robin S
      Repeater Easy Sort
      Adds a compact "easy-sort" mode to Repeater and Repeater Matrix, making those fields easier to sort when there are a large number of items.
      The module also enhances Repeater Matrix by allowing a colour to be set for each matrix type. This colour is used in the item headers and in the "add new" links, to help visually distinguish different matrix types in the inputfield.
      Screencasts
      A Repeater field

      A Repeater Matrix field with custom header colours

      Easy-sort mode
      Each Repeater/Matrix item gets an double-arrow icon in the item header. Click this icon to enter easy-sort mode.
      While in easy-sort mode:
      The items will reduce in width so that more items can be shown on the screen at once. The minimum width is configurable in the field settings. Any items that were in an open state are collapsed, but when you exit easy-sort mode the previously open items will be reopened. You can drag an item left/right/up/down to sort it within the items. The item that you clicked the icon for is shown with a black background. This makes it easier to find the item you want to move in easy-sort mode. You can click an item header to open the item. An "Exit easy-sort mode" button appears at the bottom of the inputfield. Configuration
      In the field settings for Repeater and Repeater Matrix fields you can define a minimum width in pixels for items in easy-sort mode. While in easy-sort mode the items will be sized to neatly fill the available width on any screen size but will never be narrower than the width you set here.
      In the field settings for Repeater Matrix you can define a custom header colour for each matrix type using an HTML "color" type input. The default colour for this type of input is black, so when black is selected in the input it means that no custom colour will be applied to the header.
      Exclusions
      The easy-sort mode is only possible on Repeater/Matrix fields that do not use the "item depth" option.
       
      https://github.com/Toutouwai/RepeaterEasySort
      https://processwire.com/modules/repeater-easy-sort/
×
×
  • Create New...