Add Other variant to the ListenerKind

[XX]

Description

This pull request provides a new listener kind variant so that user-defined listeners can be added to the VTag. The new ListenerKind::other(Cow<'static, str>) variant makes possible to implement the Listener trait for a user-defined listener type with a custom event name.

This option is very useful for the custom Html builders. These are temporary and only used in view so they can't use the gloo::events::EventListener. For example, have the following custom event listener:

pub struct EventListener<E> {
    event_type: &'static str,
    callback: Callback<E>,
}

impl<E> Listener for EventListener<E>
where
    E: From<JsValue> + Clone,
{
    fn kind(&self) -> ListenerKind {
        ListenerKind::other(Cow::Borrowed(self.event_type))
    }

    fn handle(&self, event: Event) {
        let event: E = JsValue::from(event).into();
        self.callback.emit(event);
    }

    fn passive(&self) -> bool {
        false
    }
}

And the MDC widget TopAppBar builder using it:

pub struct TopAppBar {
    html: Html,
}

impl TopAppBar {
    pub fn new() -> Self {
        Self {
            html: html! {
                <header class = "mdc-top-app-bar" data-mdc-auto-init = "MDCTopAppBar">
                    <div class = "mdc-top-app-bar__row">
                        <section class = "mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
                            <span class = "mdc-top-app-bar__title"></span>
                        </section>
                        <section class = "mdc-top-app-bar__section mdc-top-app-bar__section--align-end"
                                role = "toolbar">
                        </section>
                    </div>
                </header>
            },
        }
    }
    
    ...
    
    pub fn on_navigation(self, callback: impl Into<Callback<Event>>) -> Self {
        self.listener(Rc::new(EventListener::new("MDCTopAppBar:nav", callback.into())))
    }
}

It sets the listener for the event with name "MDCTopAppBar:nav" inside view:

fn view(&self, _ctx: &Context<Self>) -> Html {
    let drawer = self.create_drawer("app-drawer");

    let top_app_bar = TopAppBar::new()
        .id("top-app-bar")
        .title("App title")
        .navigation_item(IconButton::new().icon("menu"))
        .enable_shadow_when_scroll_window()
        .on_navigation(|_| {
            let drawer = dom::existing::get_element_by_id::<Element>("app-drawer")
                .get(drawer::mdc::TYPE_NAME);
            let opened = drawer.get("open").as_bool().unwrap_or(false);
            drawer.set("open", !opened);
        });

    html! {
        <>
            { drawer }
            <div class = "mdc-drawer-scrim"></div>

            <div class = { classes!("app-content", Drawer::APP_CONTENT_CLASS) }>
                { top_app_bar }

                <div class = { TopAppBar::FIXED_ADJUST_CLASS }>
                   ...
                </div>
            </div>
        </>
    }
}

The full working example: /~https://github.com/noogen-projects/yew-mdc-widgets/blob/master/examples/client/src/main.rs

Checklist

• I have run cargo make pr-flow
• I have reviewed my own code
• I have added tests

[github-actions]

Visit the preview URL for this PR (updated for commit 3f992d8):

https://yew-rs-api--pr2417-other-listener-kind-1itcdlyy.web.app

_{(expires Thu, 03 Feb 2022 19:46:05 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

[ranile]

This looks fine. I don't remember when Listener made this change but I think it used to allow that.

I ran into this problem before and my solution was far more uglier.

---

Related to #1777

[siku2]

I believe we should use proper style for this variant and use upper case Other. This also conveys that it's different from the other variants.

But given that we're dealing with a special enum, this isn't a blocking issue.