Wt

Hey,

Isn't the behaviour your are describing what Wt does e.g. at http://www.webtoolkit.eu/widgets ?

Regards,

koen

Nope...

Taking the widget gallery as an example...

If you click Basics->WText, "Basics" will be 'itemselected' and so will "WText" be.

Now, if you activate another toplevel menu item, i.e. "Charts", "Basics" will of course become 'item' but it's child item "WText" will remain 'itemselected'. In the widget gallery it doesn't really matter because once the parent menu item is deactivated ('item'), all sub items will be hidden.

When you integrate WMenu in a multilevel dropdown menu, where sub items become visible by hovering over the toplevel items, it's a different story...

The indirect decativation of a toplevel item does not affect it's subitems and therefore the latter will remain 'itemselected' although a subitem of another toplevel menu item is now activated.

Let's call it "selection inheritance" :)

I hope this makes it clear :-)

Regards,

Ben

*its subitems

Yes, that would be a quick fix...

I'd prefer something like checking whether WMenu's child objects are of type "WSubMenuItem" and if so, render its "WMenu"s child objects selected or not...

Of course you know the code better than I do, so, do you see anything that speaks against it?

If not, I will be happy to integrate it.

Regards,

Ben

Hey Benjamin,

WMenu is surprisingly (over-?)complicated; what I would prefer is if you would be able to share your sample/CSS(mockup) of a horizontal menu with submenus (we don't have that yet in the library, I realize now) and that we fix it.

Would that work for you?

Regards,

koen

I am not quite sure that I understood what you mean (my sample/CSS of a horizontal menu with submenus), please elaborate...

I used the one from here: http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

This is where I got after playing around a bit...

    this->require("/js/ddsmoothmenu.js");
    this->require("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");

    this->useStyleSheet("/css/ddsmoothmenu.css");

    this->mainMenu_ = new Wt::WMenu(this->contentStack_, Wt::Horizontal, mainMenuCont);
    this->mainMenu_->setRenderAsList(true);

    this->mainMenu_->addItem(Wt::WString::tr("pwm.mainmenu.overview"), new Wt::WText(Wt::WString::tr("pwm.mainmenu.overview")));

    this->mainMenu_->addItem(Wt::WString::tr("pwm.mainmenu.extensions"), this->extensionsPanel_ = new Extensions::ExtensionsPanel());

    // Inbound Call Control sub menu
    Wt::WMenu *inboundMenu = new Wt::WMenu(this->contentStack_, Wt::Horizontal);
    inboundMenu->setRenderAsList(true);
    Wt::WSubMenuItem *inboundSubItem = new Wt::WSubMenuItem(Wt::WString::tr("pwm.mainmenu.inbound"), new Wt::WText("pwm.mainmenu.inbound"));
    inboundSubItem->setSubMenu(inboundMenu);
    this->mainMenu_->addItem(inboundSubItem);
    inboundMenu->addItem(Wt::WString::tr("pwm.mainmenu.inbound.routes"), new Wt::WText("pwm.mainmenu.inbound.routes"));
    inboundMenu->addItem(Wt::WString::tr("pwm.mainmenu.inbound.announcements"), new Wt::WText("pwm.mainmenu.inbound.announcements"));
    inboundMenu->addItem(Wt::WString::tr("pwm.mainmenu.inbound.queues"), new Wt::WText("pwm.mainmenu.inbound.queues"));
    inboundMenu->addItem(Wt::WString::tr("pwm.mainmenu.inbound.conferences"), new Wt::WText("pwm.mainmenu.inbound.conferences"));
    inboundMenu->addItem(Wt::WString::tr("pwm.mainmenu.inbound.blacklist"), new Wt::WText("pwm.mainmenu.inbound.blacklist"));

    // Outbound Call Control sub menu
    Wt::WMenu *outboundMenu = new Wt::WMenu(this->contentStack_, Wt::Horizontal);
    outboundMenu->setRenderAsList(true);
    Wt::WSubMenuItem *outboundSubItem = new Wt::WSubMenuItem(Wt::WString::tr("pwm.mainmenu.outbound"), new Wt::WText("pwm.mainmenu.outbound"));
    outboundSubItem->setSubMenu(outboundMenu);
    this->mainMenu_->addItem(outboundSubItem);
    outboundMenu->addItem(Wt::WString::tr("pwm.mainmenu.outbound.dialplan"), new Wt::WText("pwm.mainmenu.outbound.dialplan"));
    outboundMenu->addItem(Wt::WString::tr("pwm.mainmenu.outbound.trunks"), new Wt::WText("pwm.mainmenu.outbound.trunks"));

    // General settings sub menu
    Wt::WMenu *settingsMenu = new Wt::WMenu(this->contentStack_, Wt::Horizontal);
    settingsMenu->setRenderAsList(true);
    Wt::WSubMenuItem *settingsSubItem = new Wt::WSubMenuItem(Wt::WString::tr("pwm.mainmenu.settings"), new Wt::WText("pwm.mainmenu.settings"));
    settingsSubItem->setSubMenu(settingsMenu);
    //settingsSubItem->itemWidget()->setStyleClass("last");
    this->mainMenu_->addItem(settingsSubItem);
    settingsMenu->addItem(Wt::WString::tr("pwm.mainmenu.settings.moh"), new Wt::WText("pwm.mainmenu.settings.moh"));
    settingsMenu->addItem(Wt::WString::tr("pwm.mainmenu.settings.sip_settings"), new Wt::WText("pwm.mainmenu.settings.sip_settings"));

    std::stringstream js;
    js << "ddsmoothmenu.init({"
       << "mainmenuid: 'smoothmenu1', "
       << "orientation: 'h', "
       << "classname: 'ddsmoothmenu', "
       << "contentsource: 'markup'"
       << "})";
    this->doJavaScript(js.str());

And this is what it generates:

<div class="ddsmoothmenu" id="smoothmenu1">
    <ul id="oa6b">
        <li id="oa6f"><a class="itemselected" onclick="var e=event||window.event,o=this;if(e.ctrlKey||e.metaKey)return true;else{Wt._p_.update(o,'s157',e,true);Wt3_1_7a.cancelEvent(e,0x2);}" href="#" id="oa70"><span style="white-space: nowrap;" id="oa71">Overview</span></a></li>
        <li id="oa95"><a class="item" onclick="var e=event||window.event,o=this;if(e.ctrlKey||e.metaKey)return true;else{Wt._p_.update(o,'s163',e,true);Wt3_1_7a.cancelEvent(e,0x2);}" href="#" id="oa96"><span style="white-space: nowrap;" id="oa97">Extensions</span></a></li>
        <li id="oa9e">
        <div class="item" id="oa9f" style="z-index: 100;">
            <a onclick="var e=event||window.event,o=this;if(e.ctrlKey||e.metaKey)return true;else{Wt._p_.update(o,'s164',e,true);Wt3_1_7a.cancelEvent(e,0x2);}" href="#" id="oaa0" style="padding-right: 23px;" class=""><span style="white-space: nowrap;" id="oaa1">Inbound</span><img style="border: 0pt none;" class="downarrowclass" src="/images/menu_down.gif"></a>
            <ul style="top: 58px; visibility: visible; left: 0px; width: 172px; display: none;" id="oa9a">
                <li id="oaa5"><a class="item" onclick="var e=event||window.event,o=this;if(e.ctrlKey||e.metaKey)return true;else{Wt._p_.update(o,'s165',e,true);Wt3_1_7a.cancelEvent(e,0x2);}" href="#" id="oaa6"><span style="white-space: nowrap;" id="oaa7">Routes</span></a></li>
                <li id="oaab"><a class="item" onclick="var e=event||window.event,o=this;if(e.ctrlKey||e.metaKey)return true;else{Wt._p_.update(o,'s166',e,true);Wt3_1_7a.cancelEvent(e,0x2);}" href="#" id="oaac"><span style="white-space: nowrap;" id="oaad">Announcements</span></a></li>
                <li id="oab1"><a class="item" onclick="var e=event||window.event,o=this;if(e.ctrlKey||e.metaKey)return true;else{Wt._p_.update(o,'s167',e,true);Wt3_1_7a.cancelEvent(e,0x2);}" href="#" id="oab2"><span style="white-space: nowrap;" id="oab3">Queues</span></a></li>
                <li id="oab7"><a class="item" onclick="var e=event||window.event,o=this;if(e.ctrlKey||e.metaKey)return true;else{Wt._p_.update(o,'s168',e,true);Wt3_1_7a.cancelEvent(e,0x2);}" href="#" id="oab8"><span style="white-space: nowrap;" id="oab9">Conferences</span></a></li>
                <li id="oabd"><a class="item" onclick="var e=event||window.event,o=this;if(e.ctrlKey||e.metaKey)return true;else{Wt._p_.update(o,'s169',e,true);Wt3_1_7a.cancelEvent(e,0x2);}" href="#" id="oabe"><span style="white-space: nowrap;" id="oabf">Blacklist</span></a></li>
            </ul>
        </div>
        </li>
        <li id="oac6">
        <div class="item" id="oac7" style="z-index: 99;">
            <a onclick="var e=event||window.event,o=this;if(e.ctrlKey||e.metaKey)return true;else{Wt._p_.update(o,'s16a',e,true);Wt3_1_7a.cancelEvent(e,0x2);}" href="#" id="oac8" style="padding-right: 23px;" class=""><span style="white-space: nowrap;" id="oac9">Outbound</span><img style="border: 0pt none;" class="downarrowclass" src="/images/menu_down.gif"></a>
            <ul style="top: 58px; visibility: visible; left: 0px; width: 172px; display: none;" id="oac2">
                <li id="oacd"><a class="item" onclick="var e=event||window.event,o=this;if(e.ctrlKey||e.metaKey)return true;else{Wt._p_.update(o,'s16b',e,true);Wt3_1_7a.cancelEvent(e,0x2);}" href="#" id="oace"><span style="white-space: nowrap;" id="oacf">Dialplan</span></a></li>
                <li id="oad3"><a class="item" onclick="var e=event||window.event,o=this;if(e.ctrlKey||e.metaKey)return true;else{Wt._p_.update(o,'s16c',e,true);Wt3_1_7a.cancelEvent(e,0x2);}" href="#" id="oad4"><span style="white-space: nowrap;" id="oad5">Trunks</span></a></li>
            </ul>
        </div>
        </li>
        <li id="oadc">
        <div class="item" id="oadd" style="z-index: 98;">
            <a onclick="var e=event||window.event,o=this;if(e.ctrlKey||e.metaKey)return true;else{Wt._p_.update(o,'s16d',e,true);Wt3_1_7a.cancelEvent(e,0x2);}" href="#" id="oade" style="padding-right: 23px;" class=""><span style="white-space: nowrap;" id="oadf">Settings</span><img style="border: 0pt none;" class="downarrowclass" src="/images/menu_down.gif"></a>
            <ul style="top: 58px; visibility: visible; left: 0px; width: 172px; display: none;" id="oad8">
                <li id="oae3"><a class="item" onclick="var e=event||window.event,o=this;if(e.ctrlKey||e.metaKey)return true;else{Wt._p_.update(o,'s16e',e,true);Wt3_1_7a.cancelEvent(e,0x2);}" href="#" id="oae4"><span style="white-space: nowrap;" id="oae5">Music On Hold</span></a></li>
                <li id="oae9"><a class="item" onclick="var e=event||window.event,o=this;if(e.ctrlKey||e.metaKey)return true;else{Wt._p_.update(o,'s16f',e,true);Wt3_1_7a.cancelEvent(e,0x2);}" href="#" id="oaea"><span style="white-space: nowrap;" id="oaeb">SIP Settings</span></a></li>
            </ul>
        </div>
        </li>
    </ul>
</div>

I don't think that the 'div' should be inside the 'li' (li~~div~~>ul):

        <li id="oac6">
        <div class="item" id="oac7" style="z-index: 99;">
            <a onclick="var e=event||window.event,o=this;if(e.ctrlKey||e.metaKey)return true;else{Wt._p_.update(o,'s16a',e,true);Wt3_1_7a.cancelEvent(e,0x2);}" href="#" id="oac8" style="padding-right: 23px;" class=""><span style="white-space: nowrap;" id="oac9">Outbound</span><img style="border: 0pt none;" class="downarrowclass" src="/images/menu_down.gif"></a>
            <ul style="top: 58px; visibility: visible; left: 0px; width: 172px; display: none;" id="oac2">
                <li id="oacd"><a class="item" onclick="var e=event||window.event,o=this;if(e.ctrlKey||e.metaKey)return true;else{Wt._p_.update(o,'s16b',e,true);Wt3_1_7a.cancelEvent(e,0x2);}" href="#" id="oace"><span style="white-space: nowrap;" id="oacf">Dialplan</span></a></li>
                <li id="oad3"><a class="item" onclick="var e=event||window.event,o=this;if(e.ctrlKey||e.metaKey)return true;else{Wt._p_.update(o,'s16c',e,true);Wt3_1_7a.cancelEvent(e,0x2);}" href="#" id="oad4"><span style="white-space: nowrap;" id="oad5">Trunks</span></a></li>
            </ul>
        </div>
        </li>

Regards,

Ben

Hey Ben,

Thanks. That's what I wanted to know. We are currently prepping a release, and I'll be looking at this issue there after.

Regards,

koen