search

gantry / gantry5

:rocket: Next Generation Template / Theme Framework
http://gantry.org
1.03k stars 204 forks source link

Menu Item OnClick input field #1595

Closed igor-gp closed 7 years ago

igor-gp commented 7 years ago

Something that would be useful is having an onclick input field in the menu item options for triggering js events.

We can of course put a class on a menu item and then use something like:

<script> (function($){ $( ".item-class" ).click(function() { // code here }); })(jQuery); </script>

But it would be handy if we had that ability in there. Thoughts?

w00fz commented 7 years ago

I don't like this and I'd rather not do that.

There are two reasons for this, the first is that this would imply inline JS events which are really bad practice and should be avoided at all costs.

The second reason is that if we were to allow arbitrary onClick events, we would have Gantry impose a partial event system tied to menu items. Not only this is really too specific to be implemented, but it would also interfere, quite likely, with other JavaScript coming from user implementations or 3rd party extensions.

JavaScript implementations, including attaching events to DOM elements, should be a theme developer and end-user choice. Gantry should remain agnostic and ignorant about JS that goes into a page as much as possible.

This is a very different approach from Gantry 4 where we polluted the framework with a lot of JS for many features, I worked very hard to strip that all out of Gantry 5 and keep the framework as clean as possible, all to guarantee the most compatibility with extraneous (to Gantry) elements.

For a very long time, at the beginning of Gantry 5, not even the menu was JS based and I am not very happy that we do now provide some core JS for a few things (specifically: offcanvas, menu, to-top), but this was necessary due to the growing demands about menu, offcanvas and to-top functionalities that would have not be possible by just using CSS. But even then, I made sure to use an agnostic implementation for all of that, there is no framework behind the scenes, all of those 3 functionalities are guaranteed to be working whether you are loading jQuery or MooTools or React or Angular.

I hope it makes sense!

Edit: Also, goes without saying that your way of doing it, through classname and then reference, is definitely the preferred method. With Gantry you have all the ways to load that extra JS, either inline or as stored filename. Also if I might give a suggestion, I'd use a data-* instead of classnames, that way you can keep very well distinct the styling vs the JavaScript.

igor-gp commented 7 years ago

Hey @w00fz thanks for that thorough explanation, makes a lot of sense, appreciate it. Agreed.