Allow multiple classes for the same selector

[voidgraphics]

We should look into this, see if it is doable, and think it through properly to be sure it makes sense.

One thing that could problematic is the pluton.call method which would not know which class to call stuff on.

[toonvandenbos]

Implementation could be fairly easy, as you know: we could allow the selector() getter to return an array. In such cases pluton.setupComponent could simply iterate over it before calling querySelectorAll().

But indeed, the pluton.call could be problematic in its current implementation. Maybe we could use this opportunity to make the call syntax a little bit more fluent. I'm thinking about something like:

pluton.call(fn, parameters).on(classname, selector);

Where the second parameter of the on method could be optional.

[voidgraphics]

Interesting proposition, however that is not what I meant.

I meant we have on multiple occasions felt the need to have multiple JS classes that use the same query selector.

The classic example is when you need to run a script on every page, so you target the body in the selector method. The current implementation of Pluton only runs the first of those JS classes and ignores the subsequent ones.

Still not sure this is 100% needed as we could imagine workarounds to this example, but maybe there are other use cases where it would be handy.

[toonvandenbos]

Yep, I understand it better now.

But I still think the proposition above is a good answer to your initial issue. It will just need some other changes too.

First, we could wrap every Class Instance in a PlutonComponent object, which could contain several properties such as selector (string), classname (string), elements (DOM Elements Collection) and instances (an array of all the instances of the given Class, one for every DOM Element). Adding the instances could happen during setupComponent. Once stored in an array instead of the pluton.classes object, we could have multiple Classes using the same selector "namespace" and also have multiple selectors for the same Class.

The pluton.call(fn, parameters) should return an instance of something like PlutonCallable which contains a on(classname, selector) method along a reference to the PlutonComponent array. Running on(classname, selector) will make the actual call on all PlutonComponent.instances matching the classname and selector (if provided).

What would be really cool would be to have another method, similar to pluton.call, which we could name pluton.callback. This method would also return a PlutonCallable instance, and instead of calling the given method on the contained Class instance, it would apply the Class instance as a parameter of the given callback:

function myFunction(instance) {
      // Do something with the given instance
}

pluton.callback(myFunction).on(classname, selector);