Wt

The end goal, what I'm trying to achieve, is to get popup menus open with animation. Right now I'm stuck with the problem, where I'm trying to add event listener to popup menu through Javascript. But it looks, it's not attached or something. Because when I'm entering on the popup menu, the text value isn't changed. What I'm doing wrong?

#define _SCL_SECURE_NO_WARNINGS

#include <vld.h>

#include <Wt/WApplication>
#include <Wt/WContainerWidget>
#include <Wt/WPushButton>
#include <Wt/WPopupMenu>
#include <Wt/WBreak>
#include <Wt/WJavaScript>

#include <windows.h>

class FooApplication : public Wt::WApplication {
public:
    FooApplication(Wt::WEnvironment const& env)
    : Wt::WApplication(env),
    container(new Wt::WContainerWidget(root())),
    signal(this, "signal"){

        text.setText("Press the button and You will see the current date and time.");
        text.setId("time");

        container.addWidget(&text);

        button.setId("button");
        button.setText("Date & Time!");
        button.setMenu(new Wt::WPopupMenu());
        //hider_button->menu()->setAutoHide(true, 0);
        button.menu()->setId("menu");
        button.menu()->addItem("First");
        button.menu()->addItem("Second");
        button.menu()->addItem("Third");
        button.menu()->addItem("Fourth");

        lineBreak = new Wt::WBreak(&container);

        container.addWidget(&button);

        button.clicked().connect([&](Wt::WMouseEvent const&) {
            text.doJavaScript("document.getElementById('time').innerHTML = Date()");
        });

        button.mouseWentOver().connect([&](Wt::WMouseEvent const&) {
            button.menu()->doJavaScript("document.getElementById('menu').style.overflow = 'hidden';");
            button.menu()->doJavaScript("document.getElementById('menu').style.height = '0px';");
            button.menu()->popup(&button);

            button.menu()->doJavaScript("function expand() {"
                "var target = document.getElementById('menu');"
                "var h = target.offsetHeight;"
                "var sh = target.scrollHeight;"
                "var loopTimer = setTimeout(expand, 8);"
                "if (h < sh) { h += 5; } else {"
                "clearTimeout(loopTimer); h = sh - 2;}"
                "target.style.height = h + \"px\";}"
                "expand();"
            );

            buttonMouseOn = true;
        });

        button.mouseWentOut().connect([&](Wt::WMouseEvent const&) {
            buttonMouseOn = false;
        });

        button.menu()->doJavaScript(
            "document.getElementById('menu').addEventListener('onmouseenter', function(){"
            //+ signal.createCall() +
            "document.getElementById('time').innerHTML = Date()})"
        );

        signal.connect(this, &FooApplication::changeValue);

    }

    void changeValue() {
        Beep(523, 500);
        if (menuMouseOn){
            menuMouseOn = false;
        } else {
            menuMouseOn = true;
        }
    }

    static FooApplication* create(Wt::WEnvironment const& env) {
        return new FooApplication(env);
    }

private:
    Wt::WContainerWidget container;
    Wt::WBreak* lineBreak;
    Wt::WText text;
    Wt::WPushButton button;
    Wt::JSignal<void> signal;
    bool buttonMouseOn = false;
    bool menuMouseOn = false;
};

int main(int argc, char** argv) {
    return Wt::WRun(argc, argv, &FooApplication::create);
}