How can an extension put some code just before the closing body tag?

[bpgs]

I have recently written a few simple plugins, just for personal use. One of these plugins, I called it beforeafter, shows two images that you can slide between. An important part for this plugin, a javascript, I found on github in the repo beerslider.
The javascript only works correctly if I insert it before </body>. I have currently solved the matter so that the plugin inserts the necessary HTML code with onParseContentShortcut and onParsePageExtra inserts the link to the CSS file. I have inserted the link to the Javascript file and some direct JavaScript code in footer.html. But I would like to put this last part in the plugin. So my question is, how can a plugin write code directly before </body>?
I hope that I have formulated my request in an understandable way.

[GiovanniSalmeri]

Hello! If you are thinking about an extension which adds Javascript code in a page with a shortcut, this is impossible: Javascript code in markdown is filtered out by the core of Yellow for safety reasons (and a shortcut is in Yellow a sort of extension to markdown). If I well remember, in the past there were much heated discussions on this subject. Personally, I agree with this choice of the developers, above all because it helps writing cleaner code. But there are at least two other solutions:

Easy, quick and dirty solution

Add the Javascript code in the template (default.html, or also footer.html). The content of the templates is not filtered, so you can write whatever you wish, wherever you wish. In the case of beerslider the code should do no harm in the pages which do not contain a "slider" id. (This is exactely what you've done.)

Edit: see @markseuffert's answer for an example of how to insert some code in the footer without modifying the layouts.

The Yellow-style solution

When the instructions for a script say "put it just before </body>", it actually means: "this code must be executed when the DOM of the page is loaded". So, in order to achieve exactly this effect, you can wrap the code in a DOMContentLoaded event listener, like this (the example is for beerslider, but I haven't tested it):

document.addEventListener("DOMContentLoaded", function() {
    new BeerSlider(document.getElementById('slider'));
});

This can be the content of a tiny Javascript file, included in the header of the page with onParsePageExtra.

Two sidenotes:

1. If I were you, I would slightly modify the above tiny Javascript code, in order to allow more sliders in a page (with a class and with a loop: it can be done in vanilla Javascript, no need of JQuery or other libraries). I find it always annoying when a script does not allow this.
2. The script beerslider is very nice, but it would be even tastier if its demo showed a Belgian 🍷 beer. (My wife is from Belgium, I do not admit replies 😊.)

[bpgs]

Special thanks to your first sidenote. That's exactly I intend as a second step. But, to be honest, regarding Javascript I'm a blind chicken (I didn't even know what vanilla JS) so I decided to take Zepto.

[GiovanniSalmeri]

"Vanilla Javascript" means "simple Javascript", "Javascript without any additional library". If you want to see a humorous presentation of Vanilla JS, go to the site http://vanilla-js.com/ (you understand that there is something playful when you read that the dimension of this "framework" is zero bytes 😄). Actually, modern JS contains so many functions that libraries like JQuery become less and less useful (this is the reason why many projects are dropping it).

Regarding beerslider, I think that it is sufficient to write:

document.querySelectorAll("div.beer-slider").forEach(function(slider) {
    new BeerSlider(slider);
});

(Not tested.) The meaning is simply: select in the whole document all the div's with the class beer-slider, and for each one of them execute a function that creates an instance of the BeerSlider object type. Honestly I do not understand why in the beerslider site a solution with JQuery or Zepto is proposed. The author of this script seems to ignore many things 😄

[bpgs]

Thanks a lot again. Great! By the way, I have learned that Vanilla JS is more or less a joke, 10 years ago or so it was called Plain JS.

[markseuffert]

One of the technical goals for Datenstrom Yellow was to work with plain/vanilla CSS and JavaScript. I'm not sure if you know, in the beginning we had our own little JavaScript toolbox for browser compatibility and DOM manipulation. Luckily browsers have become better and we only use what modern browsers support, gradually adding technical features as they become well established and replace previous technical solutions. That's why we usually don't use web frameworks. Everything is framework agnostic, use your favourite web framework or don't.

[markseuffert]

Example 1 - Extension loads JavaScript in the footer:

    public function onParsePageExtra($page, $name) {
        $output = null;
        if ($name=="header") {     // <---- CSS is added to the top of a page
            $extensionLocation = $this->yellow->system->get("coreServerBase").$this->yellow->system->get("coreExtensionLocation");
            $output = "<link rel=\"stylesheet\" type=\"text/css\" media=\"all\" href=\"{$extensionLocation}helloworld.css\" />\n";
        }
        if ($name=="footer") {      // <---- JavaScript is added to the bottom of a page
            $extensionLocation = $this->yellow->system->get("coreServerBase").$this->yellow->system->get("coreExtensionLocation");
            $output = "<script type=\"text/javascript\" src=\"{$extensionLocation}helloworld.js\"></script>\n";
            $output .= "<script>new Helloworld();</script>\n";
        }
        return $output;
    }

Example 2 - Extension loads JavaScript in the header:

    public function onParsePageExtra($page, $name) {
        $output = null;
        if ($name=="header") {     // <---- Everything is added to the top of a page
            $extensionLocation = $this->yellow->system->get("coreServerBase").$this->yellow->system->get("coreExtensionLocation");
            $output = "<link rel=\"stylesheet\" type=\"text/css\" media=\"all\" href=\"{$extensionLocation}helloworld.css\" />\n";
            $output .= "<script type=\"text/javascript\" defer=\"defer\" src=\"{$extensionLocation}helloworld.js\"></script>\n";
        }
        return $output;
    }

The second example is how most extensions work. If a library requires you to execute code, then put the JavaScript code into the JavaScript file and use DOMContentLoaded. As Giovanni wrote you can execute JavaScript at a specific time. For example when the DOM has been loaded and HTML elements are ready to be modified. A generic example is shown in the Helloworld example extension. For more information see: Efficiently loading JavaScript, Building the DOM faster, JavaScript tutorial about DOMContentLoaded.

[bpgs]

Thanks to both of you for your hints. Example 1 of Marks answer was that I was looking for. Of course I have seen the onParsePageExtra in the "hello world" plugin but I have though that I would have to write a second public function with $name=="footer".