Hi guys this is just a quick showcase of my attempt to use Group Focus for creating contextual popup.
The idea here is that the popup/context menu shows beside some element and it intelligently adjust its position based on the position of the element. ( I have a similar feature implemented in my Air Date/Time picker plugin)
The quick demo below was implemented using an unfinished plugin, some javascript (thanks to toolbox plugin) and bubble’s Group Focus.
Because of some current limitations of the Group Focus (see this post) it’s still not a polished work yet.
Here i’m using it with my Air Calendar plugin but it can be used in any context as long as you can give it the reference element’s id (or class).
Right click action to trigger context menu isn’t that difficult to do. In fact it’s part of the plan for this plugin and have some rough working implementation.
You just have to detect right click (context menu) then disable the default popup, then trigger your own action like i’m doing here.
The real challenge currently is how the Group Focus is. You have to give it a reference element.
The problem is that in several cases the reference element is created dynamically.
In the calendar situation here, you only have a reference to the element after selecting.
Its not a like a repeating group where you have a reference to the element.
Actually what Google calendar does (after the newest update) is.
Left click -> Contextual form for the event with few fields
Double Left click -> Full form(in new page) for event with all fields
Right click(on event) -> Delete or change colour of event.
It would be great if this plugin could follow UX conventions.
@JonL, just for the record i’m not promising that this context menu feature is going to be part of the calendar plugin.
I only used the calendar to showcase how I created a context menu using bubble’s Group Focus (and some javascript).
The calendar plugin will not dictate any UI or UX. Its up to the user to do whatever they want.
What the calendar plugin gives you is a trigger event for clicking on an event or selecting/clicking empty slots, etc. The action you take (show a context menu, go to another page, show popup, etc) is up to you.
If I decide to release the context menu it will be a separate plugin and you can choose to use it with the calendar of course. But I wouldn’t bake it in because I want this calendar to be as flexible and configurable as possible.
Because afterall tomorrow google might come up with a different UX for their calendar from the current one.
That’s even better! Actually that is what a Bubble plugin should do. Glad to see that recent plugins are moving to an API approach for Bubble to interact with through workflow actions.
@Kfawcett, here is demo of the right click context menu trying to mimic google calendar with my Air Calendar plugin.
Here you can left click or right click on an event. On the right click the calendar event is passed to the context menu so you can run workflows on it. Example here i’m able to set the event color or delete an event from the context menu.
Here is a quick overview of how I achieved this.
I attached a right-click event listener to all the calendar events (using javascript).
On right-click, I disable the default context menu, then return the mouse position and the calendar event right clicked (using javascript) and trigger a bubble event.
For the context menu i build it with a bubble Group Focus whose data source is the current selected calendar event.
The reference element for the Group Focus is a Drag/Drop group sized to 1 by 1 pixel (to make it invisible and small enough).
When the right-click is triggered, I run a workflow with the following actions
Move the Drag/Drop group to the right click mouse position
Show the Group Focus
NB: There are small things you need to take care of that i don’t mention here. For example you need to execute some actions synchronously by using pause actions. e.g. You want to make sure the Drag/Drop group has moved to the mouse position before you show the Group Focus (context menu).
Will find some time one day to finish and publish the plugin. For now it will be available in the Air Calendar plugin.
Awesome work @seanhoots! Any way of having a generic context menu that could be used outside of your calendar plugin? I would like to use it for other parts of apps I’m working on.
@Kfawcett I may but for now i’m reluctant to release any free plugins.
There is too much work in maintaining and supporting plugins and if you’re not making anything from it sometimes it makes it hard.
Would this work with maps? As in, would users be able to display data in a Group Focus once a map marker is clicked? If so, I second @Kfawcett and I’d be your second buyer
@seanhoots:
Thanks for providing the explanation for how you built this. I am currently trying to achieve the same using the Toolbox plugin in my app. But am running into problems because of the race condition that you mentioned- Group focus gets shown before the reference group has moved. Here are the steps I have taken:
On page load, I have added event listeners to all elements which should trigger the context menu. The function inside the event listener gets the position of the clicked element and sets the position of the reference element equal to the clicked position
I have a separate workflow where on click Bubble shows the Group focus.
Step 2 ends up getting executed before the JS code for moving the reference element. I even tried adding a one second delay before the show Group focus action through the use of setTimeOut() function in the second workflow, but that doesn’t seem to help.
If you could provide any guidance on what further modifications are needed, it will be really helpful.
Beau travail 