Mouse & Keyboard Interactions

This is a highly experimental feature - we built this plugin with its collection of advanced features because we like to think about how we can push the frontiers of what Bubble apps are capable of. While we believe the functionality generally works at the time of launch, we explicitly do not guarantee that we will fix bugs or build follow-on features relating to this plugin. That means you should be cautious before over-relying on any of these features, but we hope you have fun and we’d love to hear about how you use these features! (For more information / discussion on this plugin, see the forum announcement.)

The Mouse & Keyboard Interactions plugin contains a number of more advanced features that let you customize the keyboard and mouse interactions on your app.

Installation

You can find the Mouse & Keyboard Interactions plugin in the plugin gallery. It’s free to install and there are no configuration settings at the plugin level.

Data source: Get mouse data

This is a new data source that’s an option in the data source dropdown in a dynamic statement. It gives access to the following operators:

Get mouse data’s X position

This is the mouse’s X (horizontal) position on the page, where the left side of the window is 0.

Note: Using this in conditionals (”Only when...”) on certain workflow actions may not work; try using this as the conditional on the event instead.

Get mouse data’s Y position

This is the mouse’s Y (vertical) position on the page, where the top of the window is 0.

Note: Using this in conditionals (”Only when...”) on certain workflow actions may not work; try using this as the conditional on the event instead.

Get mouse data’s right mouse clicked down

This is a yes/no value that starts off “no” when the page is loaded and becomes “yes” when the right mouse button is clicked down. It should flip back to “no” when the right mouse click is released.

Get mouse data’s right mouse click released

This is a yes/no value that starts off “no” when the page is loaded and becomes “yes” when the right mouse was clicked but has since been released. It stays “yes” until the next time the right mouse button is clicked down, at which point it flips to “no”.

Note: This will only work reliably if there’s a right-click workflow event on the page that has the default prevented.

Get mouse data’s left mouse clicked down

This is a yes/no value that starts off “no” when the page is loaded and becomes “yes” when the left mouse button is clicked down. It should flip back to “no” when the left mouse click is released.

Get mouse data’s left mouse click released

This is a yes/no value that starts off “no” when the page is loaded and becomes “yes” when the left mouse was clicked but has since been released. It stays “yes” until the next time the left mouse button is clicked down, at which point it flips to “no”.

Event: Mouse is clicked down

This event, found in the new events category “Interactions”, fires when a mouse button is clicked.

Click side

This event can respond to the left, middle or right buttons on the mouse.

Prevent default

If this event is triggered by the right mouse button, there is the option to prevent the default right-click behavior, which usually brings up the browser’s / system’s right-click menu.

Tip: Clicks on elements like buttons will also trigger this workflow

Note: If an event on the page is a right-click event that has the default prevented, then all right-clicks on the page will have their defaults prevents even if there’s an “Only when” statement on the event that isn’t satisfied.

Note: Clicks on an Apple Magic Mouse may not produce the desired effect.

Event: User scrolls on page

This event, found in the new events category “Interactions”, fires when a user scrolls on the page using a mouse wheel. This is explicitly not when a user manually move the page’s scrollbar up or down, but this means that this event can trigger on a mouse wheel scroll even on a page that’s not long enough to need a scrollbar.

Scroll direction

Choice of when the user scrolls up, down or in either direction

Trigger

This event can trigger either when the user begins their scroll or ends their scroll

Prevent default

If checked, the mouse wheel scroll will not actually scroll the page for the user, but will still run this workflow.

Tip: If you use this action in conjunction with the mouse’s X / Y positions, it will get a bit confusing whether the X / Y refers to before or after the scroll, so consider using the “prevent default” toggle.

An element is hovered

This event, found in the events category “Elements”, fires when the user’s mouse begins to hover over the specified element.

Element

This is the element on the page that, when hovered, will initiate this workflow.

An element stops being hovered

This event, found in the events category “Elements”, fires when the user’s mouse stops hovering over the specified element.

Element

This is the element on the page that, when it stops being hovered, will initiate this workflow.

User presses a key or combination of keys

This event, found in the new events category “Interactions”, lets you create custom keyboard shortcuts for your apps. See below for which keyboard shortcuts are supported.

Keyboard shortcut

The combination of keys that when pressed, fires this workflow. Note that when you are focused on this field, it detects which key combination you are pressing, and you cannot manually edit the combo it detects.

These combos are supported:

• A shortcut can have multiple of these keys together (often called modifier keys): Shift, Control, Option (Mac) / Alt (Windows), and Command (Mac) / Windows (Windows)

• A shortcut can only ever have at most 1 of these keys: letters on an English keyboard, digits, tab, caps lock, a directional arrow, backspace, escape, page down / page up, F1-10, F12, + (via numpad), the symbols ` - = [ ] \ ; ‘ , /

• These keys explicitly will not work: F11, Fn, Enter

• Any special modifier key not in the list above will probably not work

• Many keyboard shortcuts (especially ones with the Windows key) are reserved by the operating system and cannot be overwritten

• Non-English keyboards will have special characters that generally do not work with this feature

Note: If you want to rely on a custom shortcut key, be sure to test it out on both Mac and Windows (and other operating systems if you expect your users to use them). Generally speaking, Option on a Mac corresponds to Alt on Windows, and Command on a Mac corresponds to Windows on Windows. But, there can be exceptions to this rule, and the two operating systems definitely have slightly different sets of reserved shortcuts.

If in doubt, your best bet is to test any potential shortcut out on different operating systems.

Disable when input is focused

Lets you choose whether this custom keyboard shortcut should work when the user is focused in an input field

Action: Reposition

This action, found in the “Plugins” category, will reposition an element on the page. This only works for popups, floating groups, alerts and group focuses.

Note: Be careful when creating workflows that have different actions that might trigger together when using these interaction features, because certain combinations can confuse Bubble. For example, if you have a workflow event for clicking on a button that shows an alert and a second workflow event for a left mouse click that repositions the same alert, in a situation where both workflows should fire, Bubble will not know which to fire first. One workaround is to combine the actions into just one workflow.

X position

The X (horizontal) coordinate on the page that the top-left corner of the element will move to, where the left side of the window is 0.

Y position

The Y (vertical) coordinate on the page that the top-left corner of the element will move to, where the top of the window is 0.