widgetti / widgetti/ipyvuetify

question/feature request: How to modify the client-side function called on a user event

Open
#97 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

add to examples
Dominant language
Python
Stars
355
Forks
61
PR merge metrics
No merged PRs in 30d

Description

Hello,

I'm currently trying to find a way how to modify the client-function of an event.

I would like to capture text highlighted by the user and open a menu upon right-clcik which offers different functions to interact with this text (e.g. highlight it in certain colour, or send to the server for look-up in a DB). For this I need the client to execute at least two functions:

  • preventDefault() - to overrule the display of the normal contextmenu
  • window.getSelection() - to capture the highlighted text and send it back to the server side Jupyther Notebook

I have modified the example from the Vuetify-Website about menus: https://vuetifyjs.com/en/components/menus/#absolute-without-activator

card = v.Card(v_model=True,
        children=[
            v.CardTitle(class_="headline grey lighten-2", children=['Card Title']),
            cardText,
                 ],
             )
def openMenu(widget, event, data):
    list.children=listChildren
    menu.position_x = data['clientX']
    menu.position_y = data['clientY']
    menu.v_model = True

card.on_event('contextmenu', openMenu)


listChildren = []
listChildren.append( v.ListItem(children=[v.ListItemTitle(children=['Menu 1'])]) )
listChildren.append(v.ListItem(children=[v.ListItemTitle(children=['Menu 2'])]))
listChildren.append(v.ListItem(children=[v.ListItemTitle(children=['Menu 3'])]))
listChildren.append(v.ListItem(children=[v.ListItemTitle(children=['Menu 4'])]))

list = v.List(children=listChildren)

menu = v.Menu(
        v_model=False,
        absolute=True,
        position_x=950,
        position_y=950,
        children=[list],
            )


row = v.Row(class_='flex', justify='center', children=[card,menu])

v.Html(tag='div', children=[row])

Is there a possibility to define the client function?

I could not find anything in the docs or online about it. Is there a way to define the client-functions in ipyvuetify?
If not, that would be a handy feature to have.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the modified Vuetify menus example and ipyvuetify's on_event('contextmenu', ...) entry point. Determine whether client-side callbacks such as preventDefault() and window.getSelection() can be exposed, and define the required API and event-data behavior; the feature is done when the intended interaction works from a documented example.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, jupyter-notebook, python
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.