Hook Plugins

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!--
  Test/Development/Documentation page
-->

<div class="panel panel-primary">
  <div class="panel-heading">Page Hook Plugins</div>
  <div class="panel-body">

  <p>Plugins can provide pages on their own or extend existing pages. To extend an existing
    page, the page needs to support this by offering hook points.</p>

  <p>You are not limited to the hook points for page modifications. To insert your extensions
    at arbitrary places:</p>
  <ul>
    <li>insert your extensions dynamically or with <code>display:none</code>,</li>
    <li>register a onetime handler for the <code>load</code> event on <code>#main</code>,</li>
    <li>move your extensions into place and show them from the event handler.</li>
  </ul>

  <p>…and yes, you're also not limited to adding stuff.</p>

  <h3>Example</h3>

  <p>The following hook plugin adds a custom menu and some color to <code>/home</code>:</p>

  <pre id="plugindisplay" style="font-size:85%"></pre>

  <h3>Available Hooks</h3>

  <p>…as of January 2019. This is work in progress, if you miss a hook somewhere, contact us.</p>

  <table class="table table-condensed font-monospace">
    <tr><th colspan="2">Framework</th></tr>
    <tr><td>/                         </td><td>html.pre, head.post, body.post            </td></tr>
    <tr><td>/home                     </td><td>body.pre, body.post                       </td></tr>
    <tr><td>/dashboard                </td><td>body.pre                                  </td></tr>
    <tr><td>/status                   </td><td>body.pre, body.post                       </td></tr>
    <tr><td>/shell                    </td><td>body.pre, body.post                       </td></tr>
    <tr><th colspan="2">Renault Twizy</th></tr>
    <tr><td>/xrt/drivemode            </td><td>body.pre, body.post                       </td></tr>
    <tr><td>/xrt/scmon                </td><td>body.pre, body.post                       </td></tr>
  </table>

  </div>
</div>

<script>
(function(){
  var pluginsrc = $('#pluginsrc').html();
  $('#plugindisplay').html(encode_html(pluginsrc.substr(1)));
})();
</script>

<div id="pluginsrc" style="display:none">
<!--
  Hook plugin for /home:body.pre
  - custom coloring of menu titles
  - add custom menu "Test / Demo" after "Main"
-->

<style>
.menu legend {
  color: brown;
}
</style>

<fieldset class="menu" id="fieldset-menu-demo1" style="display:none">
  <legend>Test / Demo</legend>
  <ul class="list-inline">
    <li><a class="btn btn-default" href="/usr/demo/metrics" target="#main">Metrics 📏</a></li>
    <li><a class="btn btn-info" href="/logs/log" target="_blank">Open Log File 📝</a></li>
  </ul>
</fieldset>

<script>
$('#main').one('load', function(ev) {
  $('#fieldset-menu-demo1').insertAfter('#fieldset-menu-main').show();
});
</script>
</div>