Aligator (ProcessWire) - Versionsgeschichte

37.49.72.8: /* UIkit Navigation */

2019-08-07T11:10:26Z

UIkit Navigation

37.49.72.8: /* Praxis Beispiele */

2019-07-15T13:11:24Z

Praxis Beispiele

37.49.33.174: /* UIkit Offcanvas Navigation */

2018-08-12T06:59:39Z

UIkit Offcanvas Navigation

37.49.33.174: /* Praxis Beispiele */

2018-08-12T05:38:43Z

Praxis Beispiele

37.49.33.174: /* Beispiele */

2018-08-12T05:30:51Z

Beispiele

37.49.33.174: /* Komplettes Beispiel 1 */

2018-08-09T10:25:42Z

Komplettes Beispiel 1

37.49.33.174 am 26. Juli 2018 um 13:51 Uhr

2018-07-26T13:51:40Z

37.49.33.174: /* Komplettes Beispiel 1 */

2018-06-28T12:26:19Z

Komplettes Beispiel 1

37.49.33.174: /* Homepage hinzufügen */

2018-06-28T12:25:48Z

Homepage hinzufügen

37.49.33.174 am 28. Juni 2018 um 05:44 Uhr

2018-06-28T05:44:52Z

@@ Zeile 326: / Zeile 326: @@
 TODO
 </syntaxhighlight>
 === Therapiezirkel (Main Menu) ===

← Nächstältere Version		Version vom 15. Juli 2019, 13:11 Uhr
Zeile 229:		Zeile 229:

	== Praxis Beispiele ==		== Praxis Beispiele ==
		+	=== Next Level Navigation ===
		+	<syntaxhighlight lang="php">
		+	<?php namespace ProcessWire;
		+	// nav_next_level renders only next level from current page
		+	$selector = 'menus.id=1';//only main items on next level
		+
		+	$nav = $modules->Aligator;
		+	$nav->setDefaultOptions(array(
		+	'selector' => $selector,
		+	'callback' => function($item, $level){
		+	$item === wire('page') ? $liClasses = 'el-item uk-active' : $liClasses = 'el-item';
		+	return array(
		+	'item' => '<a class="el-link" href="'.$item->url.'">'.$item->title.'</a>',
		+	'listOpen' => '
		+	<li class="'.$liClasses.'">',
		+	'listClose' => '</li>
		+	',
		+	'wrapperOpen' => '
		+	<ul class="nav">',
		+	'wrapperClose' => '</ul>
		+	',
		+	);
		+	})
		+	);
		+	$startpage = $page;
		+	$markup = $nav->render($startpage,array(), $levels = 1, $collapsed = true);
		+
		+	echo $markup;
		+	</syntaxhighlight>
		+	=== Only Second Level Navigation ===
		+

	=== UIkit Metamenu ===		=== UIkit Metamenu ===

@@ Zeile 255: / Zeile 255: @@
 </syntaxhighlight>
-=== UIkit Offcanvas Navigation ===
+=== UIkit Navigation ===
-'''nav-offcanvas-toggle.inc'''
+'''header.inc'''
 <syntaxhighlight lang="php">
-<!-- OFFCANVAS NAV TOGGLE -->
+<header class='uk-background-transparent'>
-<a id='offcanvas-toggle' class='uk-hidden@m' href="#offcanvas-nav" uk-toggle>
+	<div id='masthead' class="uk-container">
-	<?=ukIcon('menu', 1.3)?>
+		<?php include('nav-navbar-mobile.inc'); ?>
-</a>
+		<?php include('nav-navbar-desktop.inc'); ?>
 </syntaxhighlight>
-'''nav-offcanvas.inc'''
+'''nav-navbar-mobile.inc'''
 <syntaxhighlight lang="php">
 </syntaxhighlight>

@@ Zeile 253: / Zeile 253: @@
 $markup = $nav->render($root,array(), $levels = 1, $collaped = true);
 echo $markup;
 </syntaxhighlight>

@@ Zeile 228: / Zeile 228: @@
 Any feedback or improvements are welcome.
-==== Metamenu ====
+== Praxis Beispiele ==
 <syntaxhighlight lang="php">
 <?php namespace ProcessWire;
 $root = $pages->get("/");
-$markup = $nav->render($root, $menuOptions, $levels = 1, $collaped = true);
+$markup = $nav->render($root,array(), $levels = 1, $collaped = true);
 echo $markup;
 </syntaxhighlight>
-==== Therapiezirkel (Main Menu) ====
+=== Therapiezirkel (Main Menu) ===
 <syntaxhighlight lang="php">
 <?php namespace ProcessWire;

@@ Zeile 1: / Zeile 1: @@
 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.
+== Links ==
 == Funktionsweise ==
 === Options Array ===

@@ Zeile 233: / Zeile 233: @@
 $menuPages = new PageArray();
 $home = $pages->get("/");
 $nav->enableStates = true; // enable states ("parent current has_children first last")

← Nächstältere Version		Version vom 28. Juni 2018, 12:25 Uhr
Zeile 225:		Zeile 225:

	Any feedback or improvements are welcome.		Any feedback or improvements are welcome.
		+
		+	==== Komplettes Beispiel 1 ====
		+	<syntaxhighlight lang="php">
		+	<?php namespace ProcessWire;
		+
		+	$nav = $modules->Aligator;
		+	$menuPages = new PageArray();
		+	$home = $pages->get("/");
		+	//$menuPages->add($home->children());
		+	//$menuPages->prepend($home);
		+
		+	$nav->enableStates = true; // enable states ("parent current has_children first last")
		+	$nav->levels = 2; // set max levels to render
		+
		+	// the default options for all levels
		+	$nav->setDefaultOptions(array(
		+	"selector" => "",
		+	"callback" => function($item, $level, $states){
		+	// $states is a string of item state classes to insert somewhere
		+	$classes = $states ? " class='$states'" : "";
		+	$template = $item->template;
		+	// Handle Dropdown $items
		+
		+	$ddAttribute = "";
		+	$ddLink = "";
		+	if( $item->numChildren() ) {
		+	$ddAttribute = " data-ix='open-dd-res'";
		+	$ddLink = '<a href="#" class="w-inline-block arrow-ico-res"><i class="fa fa-angle-down"></i></a>';
		+	}
		+	// Handle Placeholder code
		+	if($template->name == "placeholder"){
		+	$itemString = "<div$ddAttribute class='w-clearfix nav-res-link'><a href='#' class='res-txt'>$item->title</a>$ddLink</div>";
		+	}
		+	else {
		+	$itemString = "<div class='w-clearfix nav-res-link'><a href='$item->url' class='res-txt animsition-link'>$item->title</a></div>";
		+	}
		+	return array(
		+	// todo animsition-link only when has children
		+	"item" => $itemString,
		+	"listOpen" => "<li$classes>",
		+	"listClose" => "</li>",
		+	"wrapperOpen" => "<ul class='w-list-unstyled dd-big-res'>",
		+	"wrapperClose" => "</ul>",
		+	);
		+	}
		+	)
		+	);
		+
		+	// render the menu
		+	$markup = $nav->render($home, array(
		+	array( // LEVEL 1
		+	"selector" => "menus.id=1",
		+	"callback" => function($item, $level) use($home){
		+	return array(
		+	//add homepage
		+	"wrapperOpen" => "<ul class='w-list-unstyled dd-big-res'>
		+	<li><div class='w-clearfix nav-res-link'><a href='$home->httpUrl' class='res-txt animsition-link'>$home->title</a></div></li>"
		+	);
		+	}
		+	),
		+	array( // LEVEL 2
		+	"selector" => "menus.id=1",
		+	"callback" => function($item, $level, $states){
		+	// $states is a string of item state classes to insert somewhere
		+	$classes = $states ? " class='$states'" : "";
		+	$template = $item->template;
		+	// Handle Dropdown $items
		+	$ddAttribute = "";
		+
		+	// Handle Placeholder code
		+	if($template->name == "placeholder"){
		+	$itemString = "<div$ddAttribute class='w-clearfix nav-res-link'><a href='#' class='res-txt'>$item->title</a></div>";
		+	}
		+	else {
		+	$itemString = "<div class='w-clearfix nav-res-link'><a href='$item->url' class='res-txt animsition-link'>$item->title</a></div>";
		+	}
		+	return array(
		+	// todo animsition-link only when has children
		+	"item" => $itemString,
		+	"listOpen" => "<li$classes>",
		+	"listClose" => "</li>",
		+	"wrapperOpen" => "<ul class='w-list-unstyled dd-res'>",
		+	"wrapperClose" => "</ul>",
		+	);
		+	}
		+	)
		+	));
		+
		+
		+
		+	echo '
		+	<!-- Mobile NAVIGATION -->
		+	<div class="w-hidden-main">
		+	<div class="responsive-menu">
		+	<div class="w-container">
		+	<a href="index.html" class="w-inline-block brand-logo more-margin animsition-link">
		+	<img width="135" src="'.$config->urls->templates.'images/logo-therapiezirkel.png" alt="logo">
		+	</a>
		+	<div data-ix="open-responsive-menu" class="hamburger">
		+	<div class="w-embed">
		+	<button class="c-hamburger c-hamburger--htx">
		+	<span>toggle menu</span>
		+	</button>
		+	</div>
		+	</div>
		+	</div>
		+	</div><!-- .responsive-menu end -->
		+
		+	<nav class="responsive-nav">
		+	<div class="w-container">
		+	'.$markup.'
		+	</div>
		+	</nav>
		+	</div>
		+
		+	<!-- Mobile NAVIGATION END-->
		+	';
		+
		+	</syntaxhighlight>

@@ Zeile 16: / Zeile 16: @@
 The render method accepts four arguments and returns the markup as a string:
   $markup = $modules->Aligator->render(root, options, maxlevels, collapsed);
 ===  Selektoren und Callback ===
@@ Zeile 89: / Zeile 90: @@
 === Beispiele ===
-'''Example'''
+==== Default Options überschreiben ====
 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'''
@@ Zeile 128: / Zeile 129: @@
 </syntaxhighlight>
-'''Example2'''
+==== Level unterschiedlich rendern ====
 Here we let the default options the module has and '''specify explicit the options for each level.'''
@@ Zeile 182: / Zeile 183: @@
 $root = $pages->get("/");
 $markup = $nav->render($root, $menuOptions, $levels = 3, $collaped = false);
 </syntaxhighlight>