Hook Plugins

hooks.htm (hint: right click, save as)

 1<!--
 2  Test/Development/Documentation page
 3-->
 4
 5<div class="panel panel-primary">
 6  <div class="panel-heading">Page Hook Plugins</div>
 7  <div class="panel-body">
 8
 9  <p>Plugins can provide pages on their own or extend existing pages. To extend an existing
10    page, the page needs to support this by offering hook points.</p>
11
12  <p>You are not limited to the hook points for page modifications. To insert your extensions
13    at arbitrary places:</p>
14  <ul>
15    <li>insert your extensions dynamically or with <code>display:none</code>,</li>
16    <li>register a onetime handler for the <code>load</code> event on <code>#main</code>,</li>
17    <li>move your extensions into place and show them from the event handler.</li>
18  </ul>
19
20  <p>…and yes, you're also not limited to adding stuff.</p>
21
22  <h3>Example</h3>
23
24  <p>The following hook plugin adds a custom menu and some color to <code>/home</code>:</p>
25
26  <pre id="plugindisplay" style="font-size:85%"></pre>
27
28  <h3>Available Hooks</h3>
29
30  <p>…as of January 2019. This is work in progress, if you miss a hook somewhere, contact us.</p>
31
32  <table class="table table-condensed font-monospace">
33    <tr><th colspan="2">Framework</th></tr>
34    <tr><td>/                         </td><td>html.pre, head.post, body.post            </td></tr>
35    <tr><td>/home                     </td><td>body.pre, body.post                       </td></tr>
36    <tr><td>/dashboard                </td><td>body.pre                                  </td></tr>
37    <tr><td>/status                   </td><td>body.pre, body.post                       </td></tr>
38    <tr><td>/shell                    </td><td>body.pre, body.post                       </td></tr>
39    <tr><th colspan="2">Renault Twizy</th></tr>
40    <tr><td>/xrt/drivemode            </td><td>body.pre, body.post                       </td></tr>
41    <tr><td>/xrt/scmon                </td><td>body.pre, body.post                       </td></tr>
42  </table>
43
44  </div>
45</div>
46
47<script>
48(function(){
49  var pluginsrc = $('#pluginsrc').html();
50  $('#plugindisplay').html(encode_html(pluginsrc.substr(1)));
51})();
52</script>
53
54<div id="pluginsrc" style="display:none">
55<!--
56  Hook plugin for /home:body.pre
57  - custom coloring of menu titles
58  - add custom menu "Test / Demo" after "Main"
59-->
60
61<style>
62.menu legend {
63  color: brown;
64}
65</style>
66
67<fieldset class="menu" id="fieldset-menu-demo1" style="display:none">
68  <legend>Test / Demo</legend>
69  <ul class="list-inline">
70    <li><a class="btn btn-default" href="/usr/demo/metrics" target="#main">Metrics 📏</a></li>
71    <li><a class="btn btn-info" href="/logs/log" target="_blank">Open Log File 📝</a></li>
72  </ul>
73</fieldset>
74
75<script>
76$('#main').one('load', function(ev) {
77  $('#fieldset-menu-demo1').insertAfter('#fieldset-menu-main').show();
78});
79</script>
80</div>