Aligator (ProcessWire)

Modul zum Erzeugen von Navigationen. Für meinen Geschmack sehr flexibel und übersichtlich. Bei Standard Menüs etwas mehr PHP Kenntnisse erforderlich. Bei komplexeren Markups und Anforderungen aber erheblich einfacher als bei MarkupSimpleNavigation vom selben Autor.

Funktionsweise

Options Array

The options array can contain a configuration for each level separately. So each entry represents a level.

$menuOptions = array(
    array(...), // level 1
    array(...), // level 2
    array(...), // level 3
);

Render Methode

The render method accepts four arguments and returns the markup as a string:

$markup = $modules->Aligator->render(root, options, maxlevels, collapsed);

Selektoren und Callback

The options array is meant as a configuration for each level and item and contains two entries

selector

Is a regular ProcessWire selector used to filter children for this level

callback

Is an anonymous function that will get called for each page the module renders. It recieves two arguments for you to use: item and level where $item would be the current rendered child page object and $level the current level.

The callback function must return an associative array containing the markups for the current entry and level. Since this is a function, you can use your own logic and conditions to determine the markup you want to render.

Default options

$menuOptions = array(
    array(
        "selector" => "",
        "callback" => function($item, $level){
            // any code here to determine the output
            return array(
                "item" => "<a href='$item->url'>$item->title</a>",
                "listOpen" => "<li>",
                "listClose" => "</li>",
                "wrapperOpen" => "<ul>",
                "wrapperClose" => "</ul>"
            );
        }
    )
);

The array you return in the callback contains various predefined keys to define the markup. They're pretty self explanatory. If you omit any of these in the returned array, the module will take the default.

Praktischer Einsatz

Wie in PW üblich entweder direkt das Modul aufrufen oder ein Objekt erzeugen:

$nav = $modules->get("Aligator");
// $nav = $modules->Aligator; // Kurzform
$menuOptions = array(...);
$root = $pages->get("/");
$markup = $nav->render($root, $menuOptions, $levels = 3, $collaped = false);

Oder direkt rendern

$markup = $modules->Aligator->render(root, options, maxlevels, collapsed);

oder auch

Overwrite Default Options

You can overwrite the default options the module uses by using the setDefaultOptions() method:

$nav = $modules->Aligator;
$nav->setDefaultOptions(array(
        "selector" => "",
        "callback" => function($item, $level){
            return array(
                "item" => "<a href='$item->url'>$item->title</a>",
                "listOpen" => "<li>",
                "listClose" => "</li>",
                "wrapperOpen" => "<ol>",
                "wrapperClose" => "</ol>",
            );
        }
    )
);

Beispiele

Example

Here we set the default options. This will be used to render the markup when the level it renders isn't defined in the options array. In this example we set only the first level (1 entry) in the options. It will overwrite the default here only using a different "wrapperOpen". After that the default will be used to render the further levels .

$nav = $modules->Aligator;

$nav->setDefaultOptions(array(
        "selector" => "template=basic-page",
        "callback" => function($item, $level){
            $class = $item === wire("page") ? " current" : "";
            $class .= wire("page")->parents->has($item) ? " parent" : "";
            if($level < 3) $class .= $item->numChildren("template=basic-page") ? " has_children" : "";
            return array(
                "item" => "<a href='$item->url'>$item->title</a>",
                "listOpen" => "<li class='level$level$class'>",
                "listClose" => "</li>",
                "wrapperOpen" => "<ul class='dropdown$level'>",
                "wrapperClose" => "</ul>",
            );
        }
    )
);

$menuOptions = array(
    array( // overwrite for first level
        "selector" => "",
        "callback" => function($item, $level){
            return array(
                "wrapperOpen" => "<ul class='mainnav'>"
            );
        },
    )
);

$root = $pages->get("/");
$markup = $nav->render($root, $menuOptions, $levels = 3, $collaped = false);

Example2

Here we let the default options the module has and specify explicit the options for each level.

$menuOptions = array(
    array( // level 1
        "selector" => "template=basic-page|domain_root",
        "callback" => function($item, $level){
            $class = $item === wire("page") ? " current" : "";
            $class .= wire("page")->parents->has($item) ? " parent" : "";
            $class .= $item->numChildren("template=basic-page") ? " has_children" : "";
            return array(
                "item" => "<a href='$item->url'>$item->title $item->template</a>",
                "listOpen" => "<li class='level$level$class'>",
                "listClose" => "</li>",
                "wrapperOpen" => "<ul class='mainnav'>",
                "wrapperClose" => "</ul>",
            );
        },
    ),
    array( // level 2
        "selector" => "template=basic-page",
        "callback" => function($item, $level){
            $class = $item === wire("page") ? " current" : "";
            $class .= wire("page")->parents->has($item) ? " parent" : "";
            $class .= $item->numChildren("template=basic-page") ? " has_children" : "";
            return array(
                "item" => "<a href='$item->url'>$item->title</a>",
                "listOpen" => "<li class='level$level$class'>",
                "listClose" => "</li>",
                "wrapperOpen" => "<ul class='dropdown2'>",
                "wrapperClose" => "</ul>",
            );
        },
    ),
    array( // level 3
        "selector" => "template=basic-page|entry",
        "callback" => function($item, $level){
            $class = $item === wire("page") ? " current" : "";
            $class .= wire("page")->parents->has($item) ? " parent" : "";
            return array(
                "item" => "<a href='$item->url'>$item->title</a>",
                "listOpen" => "<li class='level$level$class'>",
                "listClose" => "</li>",
                "wrapperOpen" => "<ul class='dropdown3'>",
                "wrapperClose" => "</ul>",
            );
        },
    ),
);

$root = $pages->get("/");
$markup = $nav->render($root, $menuOptions, $levels = 3, $collaped = false);

What else

Nothing else. With these spare examples you should be able grasp the concept and use it and render navigations like crazy.

Any feedback or improvements are welcome.