https://saxobroko.com/assets/js/site.js?v=2.8.0

1(function () {
2  var prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)");
3
4  var yearEl = document.getElementById("year");
5  if (yearEl) {
6    yearEl.textContent = String(new Date().getFullYear());
7  }
8
9  /* Path A — home hero entrance + pointer tilt (reveal before js-ux hide rules apply) */
10  (function initHero() {
11    var hero = document.querySelector("#banner[data-hero]");
12    if (!hero) return;
13    var tilt = hero.querySelector("[data-hero-tilt]");
14
15    if (prefersReduced.matches) {
16      hero.classList.add("is-reduced");
17    } else {
18      hero.classList.add("is-ready");
19    }
20
21    if (!tilt || prefersReduced.matches) return;
22
23    var touching = false;
24    window.addEventListener(
25      "touchstart",
26      function () {
27        touching = true;
28      },
29      { passive: true }
30    );
31
32    hero.addEventListener("pointermove", function (e) {
33      if (touching || e.pointerType === "touch") return;
34      var rect = hero.getBoundingClientRect();
35      var x = (e.clientX - rect.left) / rect.width - 0.5;
36      var y = (e.clientY - rect.top) / rect.height - 0.5;
37      tilt.style.transform =
38        "rotateY(" + x * 6 + "deg) rotateX(" + -y * 4 + "deg)";
39    });
40
41    hero.addEventListener("pointerleave", function () {
42      tilt.style.transform = "";
43    });
44  })();
45
46  /* Path B — main fade-in (class only; CSS keeps content visible without JS) */
47  document.documentElement.classList.add("js-ux");
48  requestAnimationFrame(function () {
49    document.documentElement.classList.add("is-ready");
50  });
51
52  /* Path D — rotating home tagline (slide via WAAPI; works even with OS reduce-motion) */
53  (function initTagline() {
54    var line = document.querySelector("#banner [data-tagline]");
55    if (!line) return;
56
57    // Taglines should sound like Saxo, not a startup pitch.
58    // Voice cues: dry, short, slightly unserious — “or whatever”, “Search for the things”,
59    // GitHub: “I don't even know what pro does.” Keep “World renowned Unicorn Rider”.
60    var lines = [
61      "World renowned Unicorn Rider",
62      "Official website of doom, or whatever",
63      "Games, tools, n whatnot",
64      "Making stuff since 2015",
65    ];
66    var i = 0;
67    var busy = false;
68    var OUT_MS = 360;
69    var IN_MS = 420;
70    var HOLD_MS = 2600;
71
72    function slideTo(next) {
73      if (busy) return;
74      busy = true;
75
76      function finishIn() {
77        busy = false;
78      }
79
80      if (typeof line.animate !== "function") {
81        line.textContent = next;
82        finishIn();
83        return;
84      }
85
86      var out = line.animate(
87        [
88          { opacity: 1, transform: "translateY(0)" },
89          { opacity: 0, transform: "translateY(-0.85em)" },
90        ],
91        {
92          duration: OUT_MS,
93          easing: "cubic-bezier(0.22, 1, 0.36, 1)",
94          fill: "forwards",
95        }
96      );
97
98      out.onfinish = function () {
99        line.textContent = next;
100        var inn = line.animate(
101          [
102            { opacity: 0, transform: "translateY(0.85em)" },
103            { opacity: 1, transform: "translateY(0)" },
104          ],
105          {
106            duration: IN_MS,
107            easing: "cubic-bezier(0.22, 1, 0.36, 1)",
108            fill: "forwards",
109          }
110        );
111        inn.onfinish = finishIn;
112      };
113    }
114
115    window.setInterval(function () {
116      i = (i + 1) % lines.length;
117      slideTo(lines[i]);
118    }, HOLD_MS);
119  })();
120
121  /* Expandable nav search — WAAPI so it still animates when OS “reduce motion” kills CSS transitions */
122  (function initNavSearch() {
123    var form = document.querySelector("[data-nav-search]");
124    if (!form) return;
125    var panel = form.querySelector("[data-nav-search-panel]");
126    var input = form.querySelector(".site-nav__search-input");
127    var toggle = form.querySelector("[data-nav-search-toggle]");
128    var submit = form.querySelector(".site-nav__search-submit");
129    if (!panel || !input || !toggle || !submit) return;
130
131    var OPEN_MS = 420;
132    var anim = null;
133    var openTimer = null;
134
135    function panelWidthPx() {
136      var rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
137      return Math.min(14 * rem, window.innerWidth * 0.56);
138    }
139
140    function stopAnim() {
141      if (anim) {
142        try {
143          anim.cancel();
144        } catch (e) {}
145        anim = null;
146      }
147    }
148
149    function setOpenUi(isOpen) {
150      form.classList.toggle("is-open", isOpen);
151      toggle.setAttribute("aria-expanded", isOpen ? "true" : "false");
152      toggle.setAttribute("aria-label", isOpen ? "Close search" : "Open search");
153      submit.hidden = !isOpen;
154      if (isOpen) input.removeAttribute("tabindex");
155      else input.setAttribute("tabindex", "-1");
156    }
157
158    function open() {
159      if (form.classList.contains("is-open") && panel.getBoundingClientRect().width > 8) {
160        input.focus();
161        return;
162      }
163      window.clearTimeout(openTimer);
164      stopAnim();
165      setOpenUi(true);
166      var end = panelWidthPx() + "px";
167      panel.style.maxWidth = "0px";
168      panel.style.width = "auto";
169      panel.style.opacity = "0";
170      if (typeof panel.animate === "function") {
171        anim = panel.animate(
172          [
173            { maxWidth: "0px", opacity: 0 },
174            { maxWidth: end, opacity: 1 },
175          ],
176          {
177            duration: OPEN_MS,
178            easing: "cubic-bezier(0.22, 1, 0.36, 1)",
179            fill: "forwards",
180          }
181        );
182        anim.onfinish = function () {
183          panel.style.maxWidth = end;
184          panel.style.opacity = "1";
185          anim = null;
186          input.focus();
187        };
188      } else {
189        panel.style.transition = "max-width " + OPEN_MS + "ms cubic-bezier(0.22,1,0.36,1), opacity .6s ease";
190        requestAnimationFrame(function () {
191          panel.style.maxWidth = end;
192          panel.style.opacity = "1";
193        });
194        openTimer = window.setTimeout(function () {
195          input.focus();
196        }, OPEN_MS);
197      }
198    }
199
200    function close() {
201      window.clearTimeout(openTimer);
202      stopAnim();
203      var start = panel.getBoundingClientRect().width + "px";
204      if (typeof panel.animate === "function") {
205        anim = panel.animate(
206          [
207            { maxWidth: start, opacity: 1 },
208            { maxWidth: "0px", opacity: 0 },
209          ],
210          {
211            duration: Math.round(OPEN_MS * 0.75),
212            easing: "cubic-bezier(0.22, 1, 0.36, 1)",
213            fill: "forwards",
214          }
215        );
216        anim.onfinish = function () {
217          panel.style.maxWidth = "0px";
218          panel.style.opacity = "0";
219          anim = null;
220          setOpenUi(false);
221          input.blur();
222        };
223      } else {
224        panel.style.maxWidth = "0px";
225        panel.style.opacity = "0";
226        setOpenUi(false);
227        input.blur();
228      }
229    }
230
231    toggle.addEventListener("click", function (e) {
232      e.preventDefault();
233      e.stopPropagation();
234      if (form.classList.contains("is-open")) close();
235      else open();
236    });

237
238    form.addEventListener("submit", function (e) {
239      if (!form.classList.contains("is-open")) {
240        e.preventDefault();
241        open();
242        return;
243      }
244      if (!String(input.value || "").trim()) {
245        e.preventDefault();
246        input.focus();
247      }
248    });
249
250    document.addEventListener("keydown", function (e) {
251      if (e.key === "Escape" && form.classList.contains("is-open")) {
252        close();
253        toggle.focus();
254      }
255    });
256
257    document.addEventListener("click", function (e) {
258      if (!form.classList.contains("is-open")) return;
259      if (form.contains(e.target)) return;
260      if (!String(input.value || "").trim()) close();
261    });
262
263    try {
264      var params = new URLSearchParams(window.location.search);
265      var q = params.get("q");
266      if (q) {
267        input.value = q;
268        open();
269      }
270    } catch (err) {}
271  })();
272})();