Project

General

Profile

Bug #694

WMenu / itemselected

Added by Anonymous over 11 years ago. Updated over 11 years ago.

Status:
Closed
Priority:
Normal
Assignee:
Target version:
-
Start date:
01/21/2011
Due date:
% Done:

0%

Estimated time:

Description

Hello,

When a WMenu object is set as a submenu, class updates (CSS) only affect this very WMenu object, not the parent WMenu object. As a result in a multilevel menu, one may possibly have several items that are "itemselected", one for each menu.

mainmenu -> 1stMenu -> 1stItem

-> 2ndItem*

-> 3rdItem

-> 2ndMenu* -> 21stItem

-> 22ndItem

-> 23rdItem

-> 3rdMenu -> 31stItem*

-> 32ndItem

-> 33rdItem

In my opinion only one of all items should classed "itemselected", respectively its parent item in addition.

mainmenu -> 1stMenu -> 1stItem

-> 2ndItem

-> 3rdItem

-> 2ndMenu* -> 21stItem

-> 22ndItem*

-> 23rdItem

-> 3rdMenu -> 31stItem

-> 32ndItem

-> 33rdItem


mainmenu -> 1stMenu* -> 1stItem

-> 2ndItem

-> 3rdItem*

-> 2ndMenu -> 21stItem

-> 22ndItem

-> 23rdItem

-> 3rdMenu -> 31stItem

-> 32ndItem

-> 33rdItem


Files

ex2.jpg (17.5 KB) ex2.jpg Screenshot Benjamin Oldenburg, 01/25/2011 07:48 PM
#1

Updated by Koen Deforche over 11 years ago

Hey,

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

Regards,

koen

#2

Updated by Benjamin Oldenburg over 11 years ago

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

#3

Updated by Benjamin Oldenburg over 11 years ago

*its subitems

#4

Updated by Benjamin Oldenburg over 11 years ago

I added a screenshot...

"Overview" is the active item and I am just hovering over "Inbound". It is still 'itemselected' because it was previously activated. Actually activating any of the sub items will not affect the selection state of the top level items either.

#5

Updated by Koen Deforche over 11 years ago

  • Status changed from New to InProgress
  • Assignee set to Koen Deforche

Hey Benjamin,

I think I get it now.

I believe the first problem could be solved by having a CSS style rule like this:

menu1.itemselected menu2.itemselected { /* selected style */ } 
menu1.item menu2.itemselected { /* unselected style */ }

The second issue simply requires that the clicked of menu2 propagates to selection of menu1 --- that seems fairly straight forward, and could perhaps be integrated in WSubMenuItem.

Regards,

koen

#6

Updated by Benjamin Oldenburg over 11 years ago

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

#7

Updated by Koen Deforche over 11 years ago

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

#8

Updated by Benjamin Oldenburg over 11 years ago

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

#9

Updated by Koen Deforche over 11 years ago

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

#10

Updated by Koen Deforche over 11 years ago

  • Status changed from InProgress to Resolved

This needed indeed a bit of updates in WSubMenuItem to make the parent menu react properly to selection in the submenu. This has been fixed in latest git.

But some of the issues can appropriately be dealt with in CSS. We have a simple "homepage" example under development that will illustrate a horizontal menu + submenus. Hopefully it'll find its way soon to public git.

#11

Updated by Koen Deforche over 11 years ago

  • Status changed from Resolved to Closed

Available in Wt 3.1.9

Also available in: Atom PDF