educates-tigera-theme/workshop-instructions.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
86
87
88
89
90
91
92
93
94
95
96
97
/*
 * Tigera Labs theme — Workshop Instructions surface (renderer iframe).
 *
 * Loaded at end-of-body by Educates' Hugo theme footer partial
 * (/opt/eduk8s/etc/themes/educates/layouts/partials/footer.html). That
 * partial auto-links ONLY workshop-instructions.css and this file —
 * it has no hook to inject workshop-instructions.html into <head>, so
 * window.TigeraTheme must be bootstrapped from here. Without this, the
 * parent dashboard's set-theme postMessage arrives before TigeraTheme
 * exists and throws ReferenceError. (Core CSS is already pulled in via
 * @import inside workshop-instructions.css, so only the JS needs
 * injecting here.)
 *
 * Once the core is loaded this file:
 *   - listens for the parent's set-theme messages
 *   - smooth-scrolls anchor links
 *   - relays <details> toggles up to the dashboard
 *   - renders the Slack widget when loaded standalone
 */
(function () {
  'use strict';

  var THEME_BASE = '/workshop/static/theme/';

  injectCoreScript(startSurface);

  function injectCoreScript(onReadyFn) {
    if (window.TigeraTheme) { onReadyFn(); return; }
    var existing = document.querySelector('script[data-tigera-core]');
    if (existing) {
      existing.addEventListener('load', onReadyFn);
      return;
    }
    var s = document.createElement('script');
    s.src = THEME_BASE + 'tigera-theme-core.js';
    s.setAttribute('data-tigera-core', '');
    s.onload = onReadyFn;
    (document.head || document.getElementsByTagName('head')[0]).appendChild(s);
  }

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

    // Theme broadcast from parent dashboard.
    window.addEventListener('message', function (e) {
      if (!e.data || e.data.source !== 'tigera-labs-dashboard') return;
      if (e.data.type !== 'set-theme') return;
      var t = e.data.theme === 'dark' ? 'dark' : 'light';
      TigeraTheme.applyTheme(t);
      try { localStorage.setItem(TigeraTheme.THEME_KEY, t); } catch (_) {}
    });

    onReady(function () {
      // (Home-button → Tigera wordmark swap is done in CSS now — see
      // #header-goto-home rules in workshop-instructions.css. Keeping
      // it in CSS avoids the FA-glyph flash before JS runs.)

      // Smooth-scroll for in-page anchor links.
      document.querySelectorAll('a[href^="#"]').forEach(function (link) {
        link.addEventListener('click', function (e) {
          var target = document.querySelector(link.getAttribute('href'));
          if (!target) return;
          e.preventDefault();
          target.scrollIntoView({ behavior: 'smooth', block: 'start' });
        });
      });

      // Forward <details> toggle events up to the dashboard.
      document.querySelectorAll('details').forEach(function (el) {
        el.addEventListener('toggle', function () {
          if (window.parent && window.parent !== window) {
            window.parent.postMessage(
              {
                source: 'workshop-instructions',
                payload: { type: 'details-toggle', open: el.open, id: el.id },
              },
              '*'
            );
          }
        });
      });

      // No-op when nested inside the dashboard iframe; renders the
      // floating CTA when this surface is loaded standalone.
      TigeraTheme.injectSlackHelp();
    });
  }

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