Can we create a container plugin, couldn't find the option to create a plugin for a container instead of element

I am trying to create a plugin for group and repeating group elements, Can someone help me in finding out how to create a plugin for the same, I couldn’t find the container as an option for creating plugins, I could only see the Elements available to be created as plugins.

Anybody, who has faced the same issue and have solved the same?

1 Like

Hey @sriram

From my experience we can’t do that yet. But think about it this way. Instead of trying to created a container plugin > create a plugin that modifies a container.

@AliFarahat: Thanks for the reply, I am afraid i dont understand your point ofcreate a plugin that modifies a container? Does this mean we can make changes to container CSS and Design through plugins? If yes, Can you briefly let me know how we can do that?

Yes that’s what I mean, give the container and ID and through JS or JQuery modify it to your liking

Ali Farahat
Co-Founder

TheUpstarters.com

1 Like

Well, you sort of can. There’s no official API for container plugins. And you can’t make your own containers (well, actually you could, but Bubble wouldn’t understand what you’re doing, but other plugins of your own creation could).

HOWEVER, you can do stuff like create a plugin that understand if it is inside of a container (by which I mean inside of a group). My (in progress not-yet-released) Reanimator plugin does this.

You drop it in a group and it knows what group it’s inside. Like so: Assuming your plugin doesn’t use jQuery, the group in which the plugin element finds itself is simply:

instance.canvas.closest(".Group")

And now, if we do something like:

instance.data.target_group = instance.canvas.closest(".Group")

… we can learn other things about the elements inside of that group. For example:

instance.data.target_children = instance.data.target_group.querySelectorAll('.bubble-element')

… is all of the Bubble element siblings of our plugin element inside of target_group.

Similarly, if you want to go all the way up the the page element, here’s what that is:

instance.canvas.closest(".Page")

You can experiment more on your own – it’s just walking the dom with CSS selectors – but you probably get the idea now.

3 Likes

Pro Tip: If you’re using jQuery (“WHY???”) the canvas element is instance.canvas[0] instead of just instance.canvas.

But please stop using jQuery. It sux.

1 Like

@keith & @AliFarahat Thanks for your Points here, Let me try these!

Three years and I still need this feature :woozy_face:
Upvote this in ideaboard
and I hope bubble really takes this section seriously