Imagine I create a
<select> element that allows the user to select his default language:
<%= select_language() %>
The view helper would be able to inject a small JS code that auto-selects a default language, based on the browser’s language. If I create a package, the only thing the user would need to do is write
<%= select_language() %> in the template; JS is injected automatically. It can even come with a nice styling, as I could inject a small piece of CSS as well.
This worked because you could hook into the master template rendering.
When rendering the master template, at one point all subscribers to
In the example of the language selector, the view helper would have one function to render the actual
<select> element with the supported languages, and another function
The rendering of the master template in the framework looks like the following:
echo "<!DOCTYPE html>\n"; echo '<html'; $this->viewEventDispatcher->dispatch('htmlAttributes'); echo ">\n"; echo "<head>\n"; $this->viewEventDispatcher->dispatch('headOpened'); echo "<meta charset=\"utf-8\">\n"; $this->viewEventDispatcher->dispatch('meta'); echo '<title>'; $this->viewEventDispatcher->dispatch('headTitle'); echo "</title>\n"; $this->viewEventDispatcher->dispatch('headLinks'); // print stylesheets $this->viewEventDispatcher->dispatch('headStylesheets'); // print scripts $this->viewEventDispatcher->dispatch('headScripts');
View helpers can subscribe to those events; they can implement any function as
onBodyAttributes(), etc. as they like, and inject code.
Question (and sorry for the long introduction):
What is the best way to provide such reusable components in Phoenix that includes a little bit of JS and CSS, without the user having change the code at different places?