educates-tigera-theme/workshop-dashboard.js at main · frozenprocess/educates-tigera-theme · GitHub

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
81
82
83
84
85
/*
 * Tigera Labs theme — Workshop Dashboard surface (the gateway pod).
 *
 * Loaded at end-of-body (see dashboard-page.pug). By this point the
 * shared core has already executed from <head>, so `window.TigeraTheme`
 * is available and `data-theme` is set. This file only does the
 * dashboard-specific UI: theme toggle inside #workarea-controls,
 * postMessage relay to the inner instructions iframe, and the Slack
 * widget.
 */
(function () {
  'use strict';

  document.documentElement.classList.add('tigera-labs');
  if (document.body) document.body.classList.add('tigera-labs');

  // Sync toggle icon AND broadcast to the inner instructions iframe.
  TigeraTheme.onApplyTheme(function (theme) {
    var t = document.getElementById('tigera-theme-toggle');
    if (t) {
      t.innerHTML = theme === 'dark' ? TigeraTheme.svgSun() : TigeraTheme.svgMoon();
      t.setAttribute('aria-label', theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode');
    }
    var iframe = document.getElementById('workshop-iframe');
    if (iframe && iframe.contentWindow) {
      try {
        iframe.contentWindow.postMessage(
          { source: 'tigera-labs-dashboard', type: 'set-theme', theme: theme },
          '*'
        );
      } catch (_) {}
    }
  });

  onReady(function () {
    // When the inner iframe finishes loading, re-fire the theme
    // hook so the iframe receives a postMessage with current state.
    var iframe = document.getElementById('workshop-iframe');
    if (iframe) {
      iframe.addEventListener('load', function () {
        TigeraTheme.applyTheme(document.documentElement.getAttribute('data-theme') || 'light');
      });
    }

    injectThemeToggle();
    // Retry once for slow renders.
    setTimeout(injectThemeToggle, 500);

    TigeraTheme.injectSlackHelp();
  });

  function onReady(fn) {
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', fn);
    } else {
      fn();
    }
  }

  function injectThemeToggle() {
    var controls = document.getElementById('workarea-controls');
    if (!controls) return;
    if (controls.querySelector('#tigera-theme-toggle')) return;

    var span = document.createElement('span');
    var btn = document.createElement('button');
    btn.id = 'tigera-theme-toggle';
    btn.type = 'button';
    btn.className = 'btn btn-default btn-sm btn-transparent';
    btn.innerHTML = '';
    btn.addEventListener('click', TigeraTheme.toggleTheme);
    span.appendChild(btn);

    var dropdown = controls.querySelector('.btn-group, #actions-dropdown');
    if (dropdown && dropdown.parentElement && dropdown.parentElement !== controls) {
      controls.insertBefore(span, dropdown.parentElement);
    } else if (dropdown) {
      controls.insertBefore(span, dropdown);
    } else {
      controls.appendChild(span);
    }

    TigeraTheme.applyTheme(document.documentElement.getAttribute('data-theme') || 'light');
  }
})();