YuiMenuContrib

add a Menu (with popup sub menus) to your Foswiki

Usage

This Contrib allows you to add the dynamic Javascript menu from YahooUserInterfaceContrib - see http://developer.yahoo.com/yui/menu/

In WidgetsSkin, add a new widget to yout DefaultWidgets topic and then add that to the Design topic you are using.

In PatternSkin, it is easiest to add pattern_yuimenu to the SKIN setting eg Set SKIN=pattern_yuimenu,pattern in your SitePreferences. To try it out, add ?skin=pattern_yuimenu,pattern to the end of your URL -

• eg try me using pattern skin

Or add a Menu to your Foswiki, add the following to the appropriate place in your Skin.

%INCLUDE{"%SYSTEMWEB%.YuiMenuContrib"}%

You can customise each web's menu by copying the DefaultWebMenu topic into the WebMenu topic in the web you wish to customise.

You can also customise the entire side bar by creating a SiteMenu? in Main by copying the DefaultMenu topic (requires advances TML knowledge).

Installation Instructions

You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server.

Open configure, and open the "Extensions" section. Use "Find More Extensions" to get a list of available extensions. Select "Install".

If you have any problems, or if the extension isn't available in configure, then you can still install manually from the command-line. See http://foswiki.org/Support/ManuallyInstallingExtensions for more help.

Topic selectors that make the three level defaulting work

Topic menu

%STARTINCLUDE%
%INCLUDE{
   "%IF{"istopic '%USERSWEB%.SiteMenu'" then="%USERSWEB%.SiteMenu" else="%SYSTEMWEB%.DefaultMenu"}%"
   MENUWEB="%MENUWEB%"
   section="topmenu"
}%
%STOPINCLUDE%

WebMenu defaulting

This way, SideBarMenu? can INCLUDE the $web.WebMenu if it exists, or (using warn=) fall back to this topic, which will use the customised DefaultWebMenu? topic in the Main or fall back to the default in this topic

%STARTSECTION{"webmenu-defaultselector"}%
%INCLUDE{
   "%WEB%.%TOPIC%"
   MENUTOPIC="%IF{"istopic '%USERSWEB%.DefaultWebMenu'" then="%USERSWEB%.DefaultWebMenu" else="%SYSTEMWEB%.YuiMenuContrib"}%"
   MENUWEB="%MENUWEB%"
   section="webmenu-builder"
}%
%ENDSECTION{"webmenu-defaultselector"}%

%STARTSECTION{"webmenu-builder"}%<ul>
%SEARCH{
       "^\|.*\|$" 
       web="%MENUWEB%" 
       topic="%MENUTOPIC%" 
       type="regex" 
       multiple="on" 
       casesensitive="on" 
       nonoise="on" 
       separator="" 
       format="$percntINCLUDE{
                            $quot%WEB%.%TOPIC%$quot
                            MENUWEB=$quot%MENUWEB%$quot
                            MENUTOPIC=$quot$pattern(^\|\s*([^\|\s]*)\s*\|.*)$quot
                            MENULABEL=$quot$pattern(^\|\s*[^\|\s]*\s*\|\s*([^\|]*)\s*\|.*)$quot
                            section=$quot$pattern(^\|\s*[^\|]*\s*\|\s*[^\|]*\s*\|\s*([^\|\s]*)\s*\|.*)$quot
                            EXTRA=$quot$pattern(^\|\s*[^\|]*\s*\|\s*[^\|]*\s*\|\s*[^\|\s]*\s*\|([^\|]*)\|.*)$quot
                            SUBMENUWEB=$quot$pattern(^\|\s*[^\|]*\s*\|\s*[^\|]*\s*\|\s*[^\|\s]*\s*\|\s*([^\|\s]*)\.[^.]*\s*\|.*)$quot
                            SUBMENUTOPIC=$quot$pattern(^\|\s*[^\|]*\s*\|\s*[^\|]*\s*\|\s*[^\|\s]*\s*\|\s*[^.]*\.([^\|\s]*)\s*\|.*)$quot
                        }$percnt"
}% %IF{"'%MENUWEB%.%MENUTOPIC%' allows 'EDIT'" then="<li class='menu-edit-link'>[[%MENUWEB%.%MENUTOPIC%][edit menu]]</li>"}%
</ul>%ENDSECTION{"webmenu-builder"}%

%STARTSECTION{"element"}%<li>[[%MENUTOPIC%][%MENULABEL%]]</li>%ENDSECTION{"element"}%
%STARTSECTION{"submenu"}%<li>[[%MENUTOPIC%][%MENULABEL%]]
            <div class='yuimenu'><div class='bd'> %INCLUDE{
            "%WEB%.%TOPIC%" 
            section="webmenu-builder%IF{"istopic '%SUBMENUWEB%.%SUBMENUTOPIC%'" then="" else="-default"}%" 
            MENUWEB="%SUBMENUWEB%"
            MENUTOPIC="%SUBMENUTOPIC%"
            }% </div></div>
</li>%ENDSECTION{"submenu"}%
%STARTSECTION{"html"}%<li>[[%MENUTOPIC%][%MENULABEL%]]
            <div class='yuimenu'><div class='bd'> %EXTRA% </div></div>
</li>%ENDSECTION{"html"}%

%STARTSECTION{"webmenu-builder-default"}%<ul>
%SEARCH{
       "^\|.*\|$" 
       web="%IF{"istopic '%MAINWEB%.DefaultWebMenu'" then="%MAINWEB%" else="%SYSTEMWEB%"}%" 
       topic="DefaultWebMenu" 
       type="regex" 
       multiple="on" 
       casesensitive="on" 
       nonoise="on" 
       separator="" 
       format="$percntINCLUDE{
                            $quot%WEB%.%TOPIC%$quot
                            MENUWEB=$quot%MENUWEB%$quot
                            MENUTOPIC=$quot$pattern(\|\s*([^\|\s]*)\s*\|.*)$quot
                            MENULABEL=$quot$pattern(\|\s*[^\|\s]*\s*\|\s*([^\|]*)\s*\|.*)$quot
                            section=$quot$pattern(\|\s*[^\|]*\s*\|\s*[^\|]*\s*\|\s*([^\|\s]*)\s*\|.*)$quot
                            SUBMENUWEB=$quot$pattern(\|\s*[^\|]*\s*\|\s*[^\|]*\s*\|\s*[^\|\s]*\s*\|\s*([^\|\s]*)\.[^.]*\s*\|.*)$quot
                            SUBMENUTOPIC=$quot$pattern(\|\s*[^\|]*\s*\|\s*[^\|]*\s*\|\s*[^\|\s]*\s*\|\s*[^.]*\.([^\|\s]*)\s*\|.*)$quot
                        }$percnt"
}% %IF{"'%MENUWEB%.%MENUTOPIC%' allows 'EDIT'" then="<li class='menu-edit-link'>[[%SCRIPTURL{save}%/%MENUWEB%/%MENUTOPIC%?templatetopic=%IF{"istopic '%MAINWEB%.DefaultWebMenu'" then="%MAINWEB%" else="%SYSTEMWEB%"}%.DefaultWebMenu][create menu]]</li>"}%
</ul>%ENDSECTION{"webmenu-builder-default"}%

YUI JS and CSS sections

YUI support

%STARTSECTION{"yui-navigation-menu-js-yui"}%<script type='text/javascript' >
YAHOO.util.Event.onContentReady('yui-navigation-menu', function () {
       /*
            Instantiate a Menu:  The first argument passed to the
            constructor is the id of the element in the page
            representing the Menu; the second is an object literal
            of configuration properties.
       */
       var oMenu = new YAHOO.widget.Menu('yui-navigation-menu', {
                                               position: 'static',
                                               hidedelay:  750,
                                               lazyload: true });
       /*
            Call the 'render' method with no arguments since the
            markup for this Menu instance is already exists in the page.
       */
       oMenu.render();
   });
</script>
<style>
.yui-skin-sam .yuimenu .bd {
border: 0px;
padding: 0px;
}
/* hide foswiki tml created p's */
.bd p {
display:none;
}
.yui-skin-sam .yuimenuitem-selected {
background-color: #f5f5f5;
}
.yui-skin-sam .yuimenuitemlabel {
color:#000000;
cursor:default;
padding:10px;
text-decoration:none;
}
.yui-skin-sam .foswikiNewLink {
   border: 0px;
}
/* need to over-ride the overflow in Pattern Skin */
#patternSideBar {
overflow:visible;
}
.yui-skin-sam .menu-edit-link .yuimenuitemlabel {
padding-bottom:0;
padding-top:0;
text-align:right;
}
.yui-skin-sam .menu-edit-link .yuimenuitemlabel  :link:hover {
color: darkblue;
}
/* so that JS off displays all menu elements */
.yuimenu .yuimenu, .yuimenubar .yuimenu {
position:inherit;
}
/* IE6 fix */
.yui-skin-sam .yuimenu .yuimenuitemlabel {
   _zoom: 1;
}
.yui-skin-sam .yuimenu .yuimenu .yuimenuitemlabel {
   _zoom: normal;
}
</style>
%ADDTOHEAD{
   "yui-menu"
   requires="yui-menu-js, yui-menu-css"
   text=""
}%
%ADDTOHEAD{
   "yui-menu-js"
   text="<script type='text/javascript' src='%PUBURL%/%SYSTEMWEB%/YahooUserInterfaceContrib/build/yahoo-dom-event/yahoo-dom-event.js'></script>
        <script type='text/javascript' src='%PUBURL%/%SYSTEMWEB%/YahooUserInterfaceContrib/build/container/container_core.js'></script>
        <script type='text/javascript' src='%PUBURL%/%SYSTEMWEB%/YahooUserInterfaceContrib/build/menu/menu.js'></script>"
}%
%ADDTOHEAD{
   "yui-menu-css"
   text="<link rel='stylesheet' type='text/css' href='%PUBURL%/%SYSTEMWEB%/YahooUserInterfaceContrib/build/menu/assets/skins/sam/menu.css'>"
}%
%ENDSECTION{"yui-navigation-menu-js-yui"}%

Info

Author(s):	Foswiki:Main.SvenDowideit
Copyright:	© SvenDowideit@fosiki_ta_bort_.com
License:	GPL 3 (Gnu General Public License)
Version:	3364 (2009-04-02)
Change History:
2 April 2009:	fix spelling mistake in create menu link
18 March 2009:	add css element for parent nodes of currently selected node - and make grey
9 March 2009:	change the WebMenu topic format to be a table to simplify editing
4 March 2009:	fix IE6 rollover
12 Jan 2009:	initial release
Dependencies:	Name Version Description Foswiki::Contrib::YahooUserInterfaceContrib >=0 uses YahooUserInterfaceContrib
Home page:	http://foswiki.org/bin/view/Extensions/YuiMenuContrib