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>