Anvil Community Forum

Hover, Focus, Key Bindings Dependency

EDIT: updated version below

or at github


I thought I’d make a little add_on to allow anvil components to have events like hover and focus so that you can then run python code

Inspired by the questions:

Adding hover and focus effects

Can't set focus on button

onHover event for Label?

dV2zTilbmC

This is the dependency:
https://anvil.works/build#clone:RMQNDQIAUI4GLXIJ=SY2KLV63DOQUMYGMQVBCYHWV
It adds the method augment to some anvil components

Example:

# augment takes an event name and a function (two functions for hover)
self.link.augment('hover', self.link_hover, self.link_hover_out)

def link_hover(self, event_args={}):
 self.link.text = 'hover'
def link_hover_out(self, event_args={}):
 self.link.text = 'hover_out'

# other events take an event name and a function
self.button.augment('focus',self.button_focus)
self.button.augment('blur', self.button_focusout)

def button_focus(self, event_args={}):
 self.button.text = 'Focus'
 self.button.role =  'secondary-color'
def button_focusout(self, event_args={}):
 self.button.text = 'Lost Focus'
 self.button.role = 'default'

It also adds the augment_trigger method

Example:


def button_click(self, **event_args):
  self.textbox.augment_trigger('select')

For a list of triggers and events see jquery docs
But typical events you might use it for are:
hover, blur (focusout), focus, mouseenter, mouseleave, select

Here’s the Example:
Live Example
And a clone of the live example with the dependency
https://anvil.works/build#clone:ZWP6UVCVLMT3YBMI=W5CYTVZC2WGZCL2W3Z3ZO2BY

9 Likes

You keep making such awesome add ons!

1 Like

Nice!

Update

I’ve updated this dependency - The new dependency and example can be found here:
(i’ve left the original post in place in case someone stumbles across this and prefers the first version)

https://anvil.works/build#clone:36T6RN2OO6KLBGV7=4LZ35S57ODPL7ORIUJ2AH6KY

Changes:

  • you can now use standard anvil event handler function syntax (namely **event_args)
  • keydown, keyup etc supported
  • hover takes 1 function - distinguish between mouseenter and mouseleave from the event_args
  • works with BlankPanel forms and not just HTML Forms :smile:
  • two provided functions - augment.add_event, augment.set_event_handler
  • any ‘augmented’ component will also have a trigger method

Revised examples:

from AnvilAugment import augment
augment.set_event_handler(self.link, 'hover', self.link_hover)
# equivalent to
# augment.set_event_handler(self.link, 'mouseenter', self.link_hover)
# augment.set_event_handler(self.link, 'mouseleave', self.link_hover)
# or 
# augment.set_event_handler(self.link, 'mouseenter mouseleave', self.link_hover)

def link_hover(self, **event_args):
  if 'enter' in event_args['event_type']:
    self.link.text = 'hover'
  else: 
    self.link.text = 'hover_out'

#================================================
# augment.set_event_handler equivalent to
augment.add_event(self.button, 'focus')
self.button.set_event_handler('focus', self.button_focus)

def button_focus(self, **event_args):
 self.button.text = 'Focus'
 self.button.role =  'secondary-color'


need a trigger method?

# 'augment' the component by adding any event... 
augment.add_event(self.textbox, 'select')
# augment.add_event(self.textbox, 'custom')
# augment.add_event(self.textbox, '')

def button_click(self, **event_args):
  self.textbox.trigger('select')

Keydown example

augment.set_event_handler(self.text_box, 'keydown', self.text_box_keydown)

def text_box_keydown(self, **event_args):
  key_code = event_args.get('key_code')
  key = event_args.get('key')
  if key_code == 13:
    print(key, key_code)

advanced feature - you can prevent default behaviour of an event by returning a value in the event handler function - example use case

augment.set_event_handler(self.text_area, 'keydown', self.text_area_keydown)

def text_area_keydown(self, **event_args):
  key = event_args.get('key')
  if key.lower() == 'enter':
    # prevent the standard enter new line behaviour
    # prevent default
    return True

If you end up using this dependency and want any extra features feel free to ask!
I’ve only implemented what i’ve needed for a project I was working on…

7 Likes