Is it possible to have custom context menus (browser)?

[amarcolini]

On the browser, all nodes have a context menu event and a default context menu provided by the browser. In my application I want to create a custom context menu for some Views that appears on right click. Unfortunately, due to Doodle being platform-independent, there is no support for removing the default browser context menu. Is this the case, or is there some other workaround?

[amarcolini]

Potential solutions I thought of:

• Give each View a unique id visible from the DOM so that the HTMLElement of the View is accessible via window.document.getElementById
• An extension property or function unique to the browser platform that gives access to the HTMLElement or to event listeners
• An injectable Module that contains a map of each View to its corresponding HTMLElement or that can add event listeners to it

[pusolito]

Have you tried consuming the pressed event and then triggering your menu on the released event?

[amarcolini]

It looks like that doesn't work either. The only solution I found to work was to consume the "contextmenu" event directly from the HTMLElements, which I got through aria-labels on empty child Labels. My solution looks like this:

import io.nacular.doodle.controls.text.Label
import io.nacular.doodle.core.View
import io.nacular.doodle.geometry.Size
import kotlinx.browser.window
import org.w3c.dom.Element

abstract class HTMLView : View() {
    companion object {
        private var count = 0
    }

    private val id = count++
    private val label = Label().apply {
        accessibilityLabel = "$id"
        size = Size.Empty
        visible = true
    }

    init {
        children += label
    }

    val htmlElement: Element? get() = window.document.querySelector("div[aria-label='$id']")?.parentElement
}

And then in the views themselves, I added an event listener after first render:

firstRender += {
    htmlElement?.addEventListener("contextmenu", {
        it.preventDefault()
    })
}

[pusolito]

OK, glad you have a work-around for now. I'll take a look at this and see if there's something missing to make this work on the pointer event--which would be the most portable (with non-browser platforms)--or some solution that incorporates oncontextmenue.

Filed #52.

[pusolito]

This will be properly supported in 0.9.2. The menu will be suppressed if you consume the pointer pressed event for a view.

view.pointerChanged += {
    // ...
    if (Button2 in it.buttons) {
        // This will prevent the context menu in 0.9.2
        it.consume()
    }
}

[pusolito]

@amarcolini can you give the 0.9.2 snapshot build a try and see if it solves the issue?

[amarcolini]

@pusolito do I have to join the Kotlin Slack to access that build?

[pusolito]

No. You can try it out by pointing to maven { url = uri("https://oss.sonatype.org/content/repositories/snapshots") }

[pusolito]

There is also a new Menu control that might actually fit your use case if you plan on doing a multi-level menu.

The new Menu control is a View that contains a vertical list of interactive items. These items notify whenever the user interacts with them using a pointer or the keyboard. This control support a couple types of action items and one that shows a new "sub" menu when the user interacts with it. You specify the contents of a Menu using the MenuFactory, which provides a declarative DSL for defining the structure and behavior of Menus.

val menu = menus(close = { /* close menu */ }) {
    menu("Sub menu") {
        prompt   ("Prompt"      ) { /* handle */ }
        separator(              )
        action   ("Do something") { /* handle */ }
        menu     ("Sub-sub menu") {
            action   ("Some action"   ) { /* handle */ }
            separator(                )
            action   ("Another action") { /* handle */ }
        }
    }
    action("Execute action") { /* handle */ }
}