[New plugin] Mouse & Keyboard Interactions (Highly experimental!)

Announcements New features
1

Hi Bubble community,

While we have a lot of big, impactful projects in the works that address the common pain points we hear from all of you, from time to time we also like to experiment with more ambitious ideas. We like to think about what the frontiers are with Bubble, and to try pushing on them a bit.

To that end, we’re releasing a highly experimental feature today: the Mouse & Keyboard Interactions plugin. This plugin gives you a suite of new tools to create more customized keyboard and mouse interactions for your end-users. For example, you could customize what a right-click on a page does, or move a popup around, or create a custom keyboard shortcut, or more…

What does “highly experimental” mean? This means we thought these features would open interesting new doors for Bubblers, and we wanted to see what you all do with them. Tactically, it means that we explicitly do not promise the same level of bug fixing support for these features and make no guarantees if or when we’d continue building new features in this direction. You’ll notice that the nature of these features is quite different from most other features; you may bump into new Known Issues as you experiment with these. We will do our best to document Known Issues in the docs for this plugin. In other words - feel free to build something experimental with this, but before relying on this for your production apps, please make sure to test thoroughly. (Note - this is a markedly different bar than what we hold other Bubble platform features to.)

This plugin lets you:

  • Get data about the mouse, such as the current X and Y coordinates and when the left or right button is clicked down or released
  • Run a workflow when the left, middle or right mouse button is clicked
  • Run a workflow when the user scrolls
  • Run a workflow when an element is hovered or un-hovered
  • Create custom keyboard shortcuts
  • Reposition certain elements

We suspect Bubble users will come up with interesting uses and combinations of all these with all the existing Bubble functionality :slight_smile:

Special thanks to our intern @hannah3 for all the hard work she invested into building out this toolset with us.

This plugin is now available to everybody via the plugin gallery. Please give it a try and share any interesting use cases you build!

62 Likes
2

Exciting news, @miri! Looking forward to trying these out. :slight_smile:

1 Like
3

Same!

4

@miri, I looked through the Plugin Gallery but couldn’t locate the plugin. Filtered to just Bubble plugins but no success. Any ideas?

5

It’s really exciting @miri

Try to refresh your editor @eLPDev

6

@eren, that was it! :man_facepalming:

2 Likes
7

Aside from the good old “refresh your tab” trick, please note that if your app is on Scheduled Releases, you will have to wait until ~tomorrow morning to see this plugin (this is because of how we created the plugin).

3 Likes
8

Aside from the power of the great plugin, perhaps the most exciting thing is to see that this menu can grow.

image

What other surprises await us?

Any clue @allenyang

8 Likes
9

This just made my day. I am very excited to play with this!

1 Like
10

Great news! Thank you!

11

Excited to check this out upon the Scheduled Updates! Thanks @miri :blush:

2 Likes
12

Would this allow me to Ctrl/Cmd-click a clickable element to open it in a new tab?

13

No, this plugin wouldn’t enable that, but one workaround there is to put a link element with no text on top of the element

3 Likes
15

I would LOVE for in the future, if it was able to grab data from a RG that you clicked on (IE what cell), that would be amazingly useful

Another cool thing would to be able to expose the width, height, x, and y of all elements, so if I wanted a certain action that only happens within an image, I could do a Only When and check the X and Y versus the element’s X, Y, width, and height

image

That would also be cool :smiley:

Just gonna keep editing this post to add more ideas :joy:

image
image398×711 16.6 KB

Here, this is a GroupFocus, and I was going to create my own Context Menu with it. It’d be pretty cool to be able to set the reference element as the Mouse :smiley:

6 Likes
16

Along these lines, was hoping for a right click context menu. Anyone figure out how to do this? I tried “Right mouse button clicked down” with a “When Group is hovered”, but no dice. (I am using Apple Magic Mouse though… I’m going to guess that’s the issue)

17

Yep, very likely - we’ve noted the magic mouse as a “known issue” in the documentation.

1 Like
18

Awesome, thanks.

Hope this becomes very useful in many ways :grinning: :computer:

19

@allenyang I used the reposition workflow on a page and it crashed my entire application, unable to load. I tried to reposition the page itself :roll_eyes:

I just removed the Plugin and everything loads just fine again.

1 Like
20

Same here… crashed my entire site?! As soon as I removed the plugin > site back up again. @allenyang …

21

Thanks, but this turned out to be problematic as it prevents from copying text/images, or selecting anything that is underneath it. Bummer.