Module idea: Visual Menu Editor

[marcus]

Update: Such a module already exists: kongondo's Module Menu Builder

When you look at other CMS such as Wordpress or Drupal, no matter what you think of them, they share a feature that would suit ProcessWire very well: The seperation of menus and content structure via backend. While this is kind of possible programmatically, in the template via MarkupSimpleNavigation, both Drupal and Wordpress have their take on a “Menu Creator” in their backends, where editors could compose their menus, consisting of references to pages or external links:

While not part of these screenshots, both visual editors provide the option to nest menu items.

As you maybe have noticed, I’m kind of experimenting with modules right now And I’m eager to learn more about module creation and the inner architecture of PW. But: the longer I thought about this “Visual Menu Module” idea the more I noticed it’s still far ahead of my abilities.

In the following I’ll write down how I would approach such a module. It would be really helpful for my understanding of modules and programming itself if you can give me feedback…

• concerning if such a module worthwhile - or I’m misjudging the demand
• if it’s possible the way it is described
• if there are some quirks or factors I haven’t thought of

Thanks in advance! And here we go:

The module itself would establish a process, let’s call it ProcessCustomMenus. During module installation, the plugin would create a subpage of “Setup” within the admin branch of ProcessWire backend main navigation, “Custom Menus”. Navigating on “Custom Menus”, there would be a possibility to list, create and edit the custom menus.

Technically, all custom menus would be child pages of said new “Custom Menus” page. Then, three new templates would be necessary: customMenu, customMenu_pageReference and customMenu_externalReference. customMenu is used for direct children of “Custom Menu”, while the other to templates will serve as items on a particular menu. Phew, hard to describe. Here’s a screenshot:

For starters, customMenu_pageReference and customMenu_externalReference could have only two fields each: title and pageArray (for internal references), or title and text (for external references). Later one could try to save the menu item nesting state in an additional field.

On the template side, a named custom menu could be output as easy as:

$modules->get(“MarkupCustomMenus”)->renderCustomMenu(“named_menu”, $options)

…where $options could be an array full of further markup config.

Of course, the content of “Custom Menus” in backend should be as easy as in the Drupal and Wordpress examples above, and appareled with all the interface magic jQuery UI has to offer, and also maybe ASM select (though I’m not sure how to achieve nesting with ASM) or other ProcessWire backend concepts.

So, what do you think?

[kongondo]

You mean like this one? 

https://processwire.com/talk/topic/4451-module-menu-builder/

I got stuck somewhere and stopped developing it....In the (probably very distant future) I might rethink and revisit it   .

I am liking your eagerness to learn module creation and the inner architecture of PW. Keep the fire burning and enjoy the ride    ! I can promise you two things: (i) As you hit the 'aha moments', you'll wonder why you didn't discover PW earlier . (ii) You'll realise even more that Ryan Cramer is an unsung hero; what he's done with the PW API is amazing; he's carefully thought out (almost) everything.... ...respect...

Happy coding...

[marcus]

Ah, snap Haven't found it in the modules pool or by searching "menu editor" in the forums... "Builder", of course. Thanks for the kind words!

[kongondo]

Well your idea to build this using PW pages has just given me an idea...In my case I was using a custom database to allow for any menu item (be it an external or internal link) to be a parent or child of any other menu item (i.e. not align to the PW tree). I got stuck at deleting and recursively re-parenting menu items....

Edited August 10, 2014 by kongondo

[diogo]

Well your idea to build this using PW pages has just given me an idea...In my case I was using a custom database to allow for any menu item (be it an external or internal link) to be a parent or child of any other menu item (i.e. not align to the PW tree). I got stuck at deleting and recursively re-parenting menu items....

That's how we should always start thinking with PW It abstracts things less and allows to use the API for everything.

[Ivan Gretsky]

I guess the main reason for menu system components in many CMS's (Joomla! for example) is that it helps build URL structure of the site. So in those systems you create pages (articles, nodes and so on) with no relations to other pages. And after that, with the help of menu system you apply structure to those pages (define what page is child to another and so on). That structure shows itself in the URLs (and causes duplicate URLs, by the way).

In PW you just can't create a page out of the page-tree. And that page-tree is a structure in itself. So in most cases there is no need for a separate menu system. If you do not need the URL structure change, a "virtual" page-tree branch seems to provide custom menu functuanality without a module.

But if you need to build a URL structure different from the page-tree structure, the modules proposed will not help, at least as I can understand them. URL segments are probably the advised way to do custom URL structure.

So menu builder modules could somehow trick the user, who has experience in other CMS's, instead of helping him to understand how PW works.

[marcus]

I guess the main reason for menu system components in many CMS's (Joomla! for example) is that it helps build URL structure of the site. So in those systems you create pages (articles, nodes and so on) with no relations to other pages. And after that, with the help of menu system you apply structure to those pages (define what page is child to another and so on). That structure shows itself in the URLs (and causes duplicate URLs, by the way).

In PW you just can't create a page out of the page-tree. And that page-tree is a structure in itself. So in most cases there is no need for a separate menu system. If you do not need the URL structure change, a "virtual" page-tree branch seems to provide custom menu functuanality without a module.

But if you need to build a URL structure different from the page-tree structure, the modules proposed will not help, at least as I can understand them. URL segments are probably the advised way to do custom URL structure.

So menu builder modules could somehow trick the user, who has experience in other CMS's, instead of helping him to understand how PW works.

My, and a guess kongondos intention as well, of such a module would not be to replace or deny PW page tree approach (or even tricking someone), but providing an additional option to create a menu. Sometimes menus are needed which contain a wild bunch of references across the site, as well as some external links. The "virtual tree" approach is possible, but another interface solution would be better in some cases. That's just what motivated me to describe this approach (and I guess that motivated kongondo to write such a module in the first place, a year ago )

[Ivan Gretsky]

The thread starts with WP and Drupal screenshots. I just wanted to point out that the menu components of those systems may differ greatly from what you and kongondo intend to implement as a module. And those coming from those systems may be confused. I know that as I came from Joomla and it took some time to start to understand why is there no menu system in PW by default. In fact there is, but it is built in the page-tree.

Personally I try to use as many default features as possible while working with ProcessWire. It makes me feel safer and pushes me to learn more of it's API and PHP in general. Thats why I think that "virtual page-tree branch" is preferable approach. But in no way do I deny the possible need for a menu builder module and even can imagine using it myself in some cases.

[marcus]

The thread starts with WP and Drupal screenshots. I just wanted to point out that the menu components of those systems may differ greatly from what you and kongondo intend to implement as a module. And those coming from those systems may be confused. I know that as I came from Joomla and it took some time to start to understand why is there no menu system in PW by default. In fact there is, but it is built in the page-tree.

Yes, as best practice interface examples. For Drupal, the menu module is a necessity, since all content is in a flat "pool". I guess the same thing goes for Joomla.

Overall, my idea is nothing else that a wrapper for a fully native solution, a container for the "virtual tree" approach. But instead of having this subtree in the area editors can access, it's "hidden" sub-"Admin", to keep the tree clean(er). This is not a one-size-fits-all solution or proposition, just an extract of sone my experiences with customers

[kongondo]

One of the reasons I created my module...

https://processwire.com/talk/topic/2787-custom-menu-not-related-to-page-tree/

[kongondo]

Just adding this for completeness in relation to my post above...I went ahead and finished the Menu Builder module. 

[marcus]

Haven't found the time to install it and fiddle with it yet - but this looks exactly like the module I was describing in the original post, including solution via sub tree with references.

Thanks!