I have the a list of thumbnails that are rendered to the screen as follows:
<div
class="color"
style="background:${rgbToHex(color.value.r, color.value.g, color.value.b )}"
>
<context-menu></context-menu>
</div>
When I hold on the color div, I want to show the context menu. Only on hold not hover. How can I do that using lit and typescript? Please note its more than one thumbnail that's rendered. So I need to show the context menu for the thumbnail that the person holds on.
You can show the menu on mousedown
event and hide it on either mouseup
or mouseleave
.
Lit has syntax for declaratively adding event listeners so you can do something like the following assuming you have methods on your element class to handle showing/hiding the menu.
html`
<div
@mousedown=${this.showMenu}
@mouseup=${this.hideMenu}
@mouseleave=${this.hideMenu}
class="color"
style="background:${rgbToHex(color.value.r, color.value.g, color.value.b )}"
>
<context-menu></context-menu>
</div>`;