Getting Zend_Navigation menu to work with jQuery's Fisheye

Question

I'm using Zend_Navigation (sweet addition to the framework, btw) to build my menu, after which it should be rendered in the page (self-evidently). I first set the container somewhere in the controller:

// $pages is the array containing all page information
$nav = new Zend_Navigation($pages);
$this->view->navigation($nav);

Then, in the layout, it is rendered like this:

echo $this->navigation()->menu();

which works perfectly. Now: I want the menu to be rendered a little differently. The page I'm building uses the jQuery Fisheye-plugin to build a Mac-like Dock-menu. However, this plugin needs a specific markup...

Actually, it takes a list of <a> elements containing both an <img> (for the icon) and a <span> (for the tooltip). The standard Menu view helper renders everything inside an unordered list (logically), with the 'label' parameter as the link text.

It seems that content passed to the 'label' parameter is escaped before rendering, so inserting the html there won't do me any good. Additionally, the Fisheye usually doesn't seem to take its items contained in a <li> tag, with the entire thing wrapped in <ul></ul>, but just a one-level list of <a> elements.

I was thinking about writing a custom view helper for the dock, which would be able to take care of inserting the <img> and the <span>, but I'm having a very hard time getting a custom view helper attached to the Navigation class. I just can't figure out where to place it and in what way, even though all my other custom classes (models and such) are sweetly taken care of by the autoloader. Any ideas on this?

Then again, even if I can get this view helper to work, I'm still left with the HTML unordered list - I know I can lose that one too using the custom view helper, but I've always been a fan of containing main navigation menus inside a list, for the sake of semantics.

If anyone can help me out a little, I'd greatly appreciate it. If the Fisheye just isn't meant to work with <ul>'s, that'd be too bad... would there be a good reason for losing Zend_Navigation altogether in this case?

Answer 1

I haven't seen the way yet either in terms of making a custom renderer. Here's what I ended up doing though:

First, instead of rendering the default menu() call, create a partial to render into:

// menu.phtml is partial, cms is module
$partial = array('menu.phtml', 'cms');
$this->navigation()->menu()->setPartial($partial);
echo $this->navigation()->menu()->render();

Then (from the docs), you can create a "custom" render like so:

// -- inside menu.phtml
foreach ($this->container as $page) 
{
    // this just prints a "<a>" or "<span>" tag
    // depending on whether the page has a uri
    echo $this->menu()->htmlify($page), PHP_EOL;
}

I ended up making what I originally had (a menu with one level of submenus) with this script:

// -- another menu.phtml
<ul class="navigation">

<?php

$html = array();

foreach ($this->container as $page) 
{
    $html[] = "<li>";
    $html[] = $this->menu()->htmlify($page) . PHP_EOL;

    if (!empty($page->pages))
    {
        $html[] = "<ul>";
        foreach ($page->pages as $subpage) 
        {
            $html[] = "<li>";
            if ($href = $subpage->getHref()) $html[] = "<a href=\"{$href}\">";
            else $html[] = "<span>";
            $html[] = "<img src=\"/ui/cms/img/icons/edit.png\" alt=\"\"/>";
            $html[] = $subpage->getLabel();
            if ($href) $html[] = "</a>";
            else $html[] = "</span>";            
            $html[] = "</li>";
        }
        $html[] = "</ul>";
    }

    $html[] = "</li>";
}

echo join(PHP_EOL, $html);

?>
</ul>

You could just change the markup in the partial and add your images/icons there.

Answer 2

Sorry, for the formatting issue on the previous post

To add your custom helper do the following, in your bootstrap:

protected function _initNavigation()
{
    $this->bootstrap('view');     // make sure we have a view
    $view = $this->getResource('view');  // get the view resource
    $config = new Zend_Config_Xml(APPLICATION_ROOT . '/config/navigation.xml','nav');
    $container = new Zend_Navigation($config);
    $view->navigation($container);

    // Tell Zend were it can find your custom helpers and what
    // the prefix is going to be.

   $view->addHelperPath(
          APPLICATION_ROOT . '/library/MyApp/View/Helper/Navigation',
          'MyApp_View_Helper_'
          );

}

Next create your custom view helper and put it in the ‘addHelperPath’ path. Depending on what you want to do you need to implement at least your own htmlify function. Take a look at Zend/View/Help/Navigation/Menu.php as an example.

class MyApp_View_Helper_MyMenu extends Zend_View_Helper_Navigation_Menu
{
    public function myMenu(Zend_Navigation_Container $container = null)
    {
        if (null !== $container) {
            $this->setContainer($container);
        }
        return $this;
    }

    protected function htmlify(Zend_Navigation_Page $page ) 
    {
        ...
    }
}

Next, in your phtml script:

   <?php echo $this->navigation()->myMenu()->setMaxDepth(0); ?>

or just

   <?php echo $this->navigation()->myMenu(); ?>

Now if you want to add your own custom properties to the generated HTML you can add them to your navigation ini or xml file. For example:

<home>
  <label>Home</label>
  <uri>/</uri>
  <img>
      <src>/images/MyIcon.gif</src>
  <img>
</home>

The custom xml tag <img> will be stored as a property of the navigation page and can be fetched like:

foreach ($iterator as $page) {

    ...

    $properties = new Zend_Config($page->GetCustomProperties());
    $myPicture = $properties->img->src;

    ...
}

Hope this helps. Peter