(function(){ "use strict"; var D = window.DATA || {}; var root = document.getElementById("eg"); if (!root) { return; } /* ---------- color helpers ---------- */ function hexToRgb(h){ h = String(h == null ? "" : h).trim().replace("#",""); if (h.length === 3) { h = h.charAt(0)+h.charAt(0)+h.charAt(1)+h.charAt(1)+h.charAt(2)+h.charAt(2); } if (!/^[0-9a-fA-F]{6}$/.test(h)) { return null; } return [parseInt(h.slice(0,2),16), parseInt(h.slice(2,4),16), parseInt(h.slice(4,6),16)]; } function rgbToHex(r){ var s = "#"; for (var i = 0; i < 3; i++) { var v = Math.round(Math.max(0, Math.min(255, r[i]))); s += (v < 16 ? "0" : "") + v.toString(16); } return s.toUpperCase(); } function norm(v, f){ var x = hexToRgb(v); return x ? rgbToHex(x) : f; } function mix(a, b, t){ var x = hexToRgb(a), y = hexToRgb(b); if (!x || !y) { return a; } return rgbToHex([x[0]+(y[0]-x[0])*t, x[1]+(y[1]-x[1])*t, x[2]+(y[2]-x[2])*t]); } function rgba(h, a){ var x = hexToRgb(h) || [0,0,0]; return "rgba(" + x[0] + "," + x[1] + "," + x[2] + "," + a + ")"; } function lum(h){ var x = hexToRgb(h); if (!x) { return 0; } var c = []; for (var i = 0; i < 3; i++) { var v = x[i] / 255; c.push(v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4)); } return 0.2126*c[0] + 0.7152*c[1] + 0.0722*c[2]; } function contrast(a, b){ var l1 = lum(a), l2 = lum(b); return (Math.max(l1,l2) + 0.05) / (Math.min(l1,l2) + 0.05); } function readable(bg){ return contrast(bg, "#FFFFFF") >= contrast(bg, "#1B1B1B") ? "#FFFFFF" : "#1B1B1B"; } function towards(c, target, bg, min){ for (var t = 0; t <= 1.0001; t += 0.04) { var o = mix(c, target, t); if (contrast(o, bg) >= min) { return o; } } return target; } /* ---------- small helpers ---------- */ function el(tag, cls, txt){ var e = document.createElement(tag); if (cls) { e.className = cls; } if (txt != null) { e.textContent = txt; } return e; } function str(v){ return v == null ? "" : String(v); } function has(v){ return str(v).trim() !== ""; } var SVGNS = "http://www.w3.org/2000/svg"; function svgPath(d, vb, cls){ var s = document.createElementNS(SVGNS, "svg"); s.setAttribute("viewBox", vb || "0 0 24 24"); s.setAttribute("aria-hidden", "true"); s.setAttribute("focusable", "false"); if (cls) { s.setAttribute("class", cls); } var p = document.createElementNS(SVGNS, "path"); p.setAttribute("d", d); s.appendChild(p); return s; } function segs(s){ s = str(s).replace(/\*\*([^*]+)\*\*/g, "*$1*"); var out = [], re = /\*([^*]+)\*/g, last = 0, m; while ((m = re.exec(s))) { if (m.index > last) { out.push({t: s.slice(last, m.index), k: false}); } out.push({t: m[1], k: true}); last = re.lastIndex; } if (last < s.length) { out.push({t: s.slice(last), k: false}); } return out; } function plain(s){ return segs(s).map(function(x){ return x.t; }).join(""); } function wordCount(s){ return plain(s).split(/\s+/).filter(function(x){ return x; }).length; } var ICONS = { check:"M4.5 12.5l5 5L19.5 7", eye:"M2.5 12s3.5-6.5 9.5-6.5S21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12zM12 9a3 3 0 1 0 0 6a3 3 0 1 0 0-6z", arrow:"M4 12h15M13.5 6.5L19 12l-5.5 5.5", qmark:"M9.1 9.2a2.9 2.9 0 0 1 5.8.9c0 2.1-2.9 2.5-2.9 4.5M12 18.1v.1" }; var CTL = { pause:"M7 5h3.6v14H7zM13.4 5H17v14h-3.6z", play:"M8 5l11 7-11 7z", replay:"M12 4.5a7.5 7.5 0 1 1-7.1 5.1M4.6 4.2v5.6h5.6" }; var CIRC = "M54 6C82 4 98 13 96 25 94 37 70 41 46 39 21 37 3 31 4 20 5 9 26 4 61 7"; var BOX = "M4 5L96 3 97 37 3 38 4 6"; function icon(name){ var d = ICONS[name]; return d ? svgPath(d) : null; } /* ---------- config ---------- */ var L = D.layout || "stack"; var st = D.style || "glass"; var c = D.content || {}; var P0 = D.play || {}; var col = D.colors || {}; var FONT_STACKS = { "Arial":"Arial, Helvetica, sans-serif","Arial Black":"'Arial Black', Arial, sans-serif","Calibri":"Calibri, Carlito, 'Segoe UI', sans-serif","Century Gothic":"'Century Gothic', 'URW Gothic', Futura, sans-serif","Courier New":"'Courier New', Courier, monospace","Georgia":"Georgia, 'Times New Roman', serif","Helvetica":"Helvetica, Arial, sans-serif","Impact":"Impact, 'Arial Black', sans-serif","Lucida Sans Unicode":"'Lucida Sans Unicode', 'Lucida Grande', sans-serif","Palatino Linotype":"'Palatino Linotype', Palatino, 'Book Antiqua', serif","Tahoma":"Tahoma, Verdana, sans-serif","Times New Roman":"'Times New Roman', Times, serif","Trebuchet MS":"'Trebuchet MS', Helvetica, sans-serif","Verdana":"Verdana, Geneva, sans-serif", "Lato":"'Lato', sans-serif","Montserrat":"'Montserrat', sans-serif","Open Sans":"'Open Sans', sans-serif","Oswald":"'Oswald', sans-serif","Playfair Display":"'Playfair Display', Georgia, serif","Poppins":"'Poppins', sans-serif","Raleway":"'Raleway', sans-serif","Roboto":"'Roboto', sans-serif","Source Sans Pro":"'Source Sans 3', 'Source Sans Pro', sans-serif" }; function stack(f){ return FONT_STACKS[f] || FONT_STACKS.Poppins; } var mm = null; try { mm = window.matchMedia ? window.matchMedia("(prefers-reduced-motion: reduce)") : null; } catch (e) { mm = null; } var reduce = !!(mm && mm.matches); var animate = D.anim !== false && !reduce; var sp = Number(D.speed) || 1; if (sp < 0.5 || sp > 2) { sp = 1; } function setVars(){ var P = norm(col.primary, "#0067B8"), A = norm(col.accent, "#7FBA00"), B = norm(col.bg, "#F3F2F1"), C = norm(col.card, "#FFFFFF"); var T = norm(col.title, "#201F1E"), S = norm(col.sub, "#3B3A39"), X = norm(col.text, "#323130"), K = norm(col.kw, P), O = norm(col.on, readable(P)), AL = norm(col.alert, "#D83B01"), PG = norm(col.page, "#FFFFFF"); var AX = norm(col.ans, T); var N = towards(mix(P, "#FFFFFF", 0.15), "#FFFFFF", C, 4.6); var G1 = mix(towards(P, "#000000", "#FFFFFF", 6), "#000000", 0.18), G2 = towards(mix(P, A, 0.5), "#000000", "#FFFFFF", 4.8), G3 = towards(A, "#000000", "#FFFFFF", 4.8); var At = mix(A, "#FFFFFF", 0.72); var v = { "--P":P, "--A":A, "--B":B, "--C":C, "--T":T, "--S":S, "--X":X, "--K":K, "--O":O, "--AL":AL, "--AX":AX, "--OA":readable(A), "--OL":readable(AL), "--Pa":rgba(P, 0.13), "--PA":mix(P, A, 0.5), "--Pd":mix(P, "#000000", 0.24), "--Pt":mix(P, "#FFFFFF", 0.86), "--At":At, "--OAt":readable(At), "--Cg":rgba(C, 0.42), "--Cl":mix(C, "#FFFFFF", 0.72), "--Cd":mix(C, "#1E293B", 0.17), "--Pe":mix(P, "#000000", 0.38), "--Pe2":mix(P, C, 0.55), "--N":N, "--Na":rgba(N, 0.45), "--Nb":rgba(N, 0.2), "--Nc":rgba(N, 0.24), "--G1":G1, "--G2":G2, "--G3":G3, "--glow":K, "--rule":rgba(X, 0.2), "--ruleT":rgba(T, 0.32), "--track":rgba(X, 0.12), "--ruleO":rgba(O, 0.3), "--trackO":rgba(O, 0.24), "--dots":rgba(T, 0.16), "--tapec":rgba(A, 0.55), "--ringc0":P, "--inbd":towards(mix(X, C, 0.45), X, C, 3.2), "--inbdO":rgba(O, 0.72), "--focusc":T, "--nudgec":rgba(P, 0.5), "--font":stack(D.font), "--hfont":stack(D.hfont || D.font), "--ts":String(Number(D.ts) || 38), "--as":String(Number(D.as) || 32), "--ss":String(Number(D.ss) || 22), "--is":String(Number(D.is) || 20), "--radius":(Math.max(0, Math.min(24, Number(D.radius) >= 0 ? Number(D.radius) : 8))) + "px", "--dr":Number(D.radius) === 0 ? "0px" : "50%", "--ar":({wide:"16 / 9", classic:"4 / 3", square:"1 / 1", portrait:"4 / 5"})[D.shape] || "16 / 9", "--align":({left:"left", right:"right"})[D.align] || "center", "--jc":({left:"flex-start", right:"flex-end"})[D.align] || "center", "--ji":({left:"start", right:"end"})[D.align] || "center", "--ms":({left:"0", right:"auto"})[D.align] || "auto", "--me":({left:"auto", right:"0"})[D.align] || "auto" }; var CF = readable(PG); v["--ctlbg"] = PG; v["--ctlfg"] = CF; v["--ctlbd"] = rgba(CF, 0.45); v["--focus"] = CF; if (st === "neon") { v["--K"] = norm(col.kw, N); v["--glow"] = v["--K"]; } for (var k in v) { if (Object.prototype.hasOwnProperty.call(v, k)) { root.style.setProperty(k, v[k]); } } document.body.style.background = PG; } /* ---------- motion vocabulary ---------- */ var EN = { rise:{c:"k-rise", w:"k-riseW", b:"k-rise", d:720}, pop:{c:"k-popC", w:"k-popW", b:"k-popC", d:640}, slide:{c:"k-slide", w:"k-slideW", b:"k-slide", d:660}, blur:{c:"k-blur", w:"k-blurW", b:"k-blur", d:950}, wipe:{c:"k-wipe", w:"k-riseW", b:"k-wipe", d:820}, drop:{c:"k-drop", w:"k-dropW", b:"k-drop", d:950}, type:{c:"k-fade", w:"k-type", b:"k-fade", d:600, chars:true}, power:{c:"k-power", w:"", b:"k-power", d:1150}, tilt:{c:"k-tilt", w:"k-riseW", b:"k-rise", d:1050}, none:{c:"", w:"", b:"", d:0} }; var SIG = { flat:["wipe","hl"], glass:["blur","ul"], soft:["rise","color"], bold:["pop","hl"], editorial:["rise","color"], neon:["power","glow"], paper:["drop","hl"], marker:["rise","circle"], aurora:["rise","box"], tilt:["tilt","ul"] }; var AMB = { glass:1, neon:1, aurora:1, tilt:1 }; var sig = SIG[st] || SIG.glass; var enKey = (D.entrance && D.entrance !== "auto" && EN[D.entrance]) ? D.entrance : sig[0]; var en = EN[enKey]; var fx = (D.emph && D.emph !== "auto") ? D.emph : sig[1]; if (["color","hl","ul","circle","box","glow"].indexOf(fx) < 0) { fx = "color"; } var VEIL_OUT = { glass:"k-vBlur", flat:"k-vWipe", soft:"k-vSink", bold:"k-vPop", editorial:"k-vWipe", neon:"k-vOff", paper:"k-vPeel", marker:"k-vWipe", aurora:"k-vBlur", tilt:"k-vLift" }; function anim(node, kf, at, dur, ease){ if (!node || !kf || !animate) { return; } node.classList.add("a"); node.style.setProperty("--an", kf); node.style.setProperty("--dl", Math.round(at) + "ms"); node.style.setProperty("--du", Math.round(dur) + "ms"); if (ease) { node.style.setProperty("--ez", ease); } } function kwGo(list, at, dur){ if (!animate) { return; } list.forEach(function(k){ k.classList.add("kwa"); k.style.setProperty("--kdl", Math.round(at) + "ms"); k.style.setProperty("--kdu", Math.round(dur || 780*sp) + "ms"); }); } /* rich text: screen reader copy plus an animated visual copy */ function rich(host, s, mode){ host.appendChild(el("span", "sr-only", plain(s))); var vis = el("span", "vis"); vis.setAttribute("aria-hidden", "true"); host.appendChild(vis); var units = [], kws = []; segs(s).forEach(function(sg){ var tgt = vis; if (sg.k) { var f2 = fx; if ((f2 === "circle" || f2 === "box") && sg.t.split(/\s+/).filter(function(x){ return x; }).length > 3) { f2 = "ul"; } var kw = el("span", "kw fx-" + f2); vis.appendChild(kw); kws.push(kw); tgt = el("span", "kwt"); kw.appendChild(tgt); if (f2 === "circle" || f2 === "box") { var sv = svgPath(f2 === "circle" ? CIRC : BOX, "0 0 100 42", "fxs"); sv.setAttribute("preserveAspectRatio", "none"); sv.firstChild.setAttribute("pathLength", "100"); kw.appendChild(sv); } } sg.t.split(/(\s+)/).forEach(function(p){ if (!p) { return; } if (/^\s+$/.test(p) || mode === "block") { tgt.appendChild(document.createTextNode(p)); return; } var w = el("span", "w"); if (mode === "chars") { var chs = Array.from ? Array.from(p) : p.split(""); chs.forEach(function(ch){ var e = el("span", "ch", ch); w.appendChild(e); units.push(e); }); } else { w.textContent = p; units.push(w); } tgt.appendChild(w); }); }); return { units:units, kws:kws, host:host }; } function textMode(s){ if (!animate || !en.w) { return "block"; } if (wordCount(s) > 16) { return "block"; } return en.chars ? "chars" : "words"; } /* animate a rich text block, returns end time */ function textIn(info, mode, at){ if (!animate || enKey === "none") { return at; } if (mode === "block" || !info.units.length) { anim(info.host, en.b || "k-fade", at, (en.d || 600) * sp); return at + (en.d || 600) * sp; } var n = info.units.length; if (mode === "chars") { var stp = Math.min(46, 2300 / n) * sp; info.units.forEach(function(u, i){ anim(u, "k-type", at + i * stp, stp * 2, "linear"); }); return at + n * stp + stp; } var stg = Math.min(95, 1300 / n) * sp, du = (en.d * 0.85) * sp; info.units.forEach(function(u, i){ anim(u, en.w, at + i * stg, du); }); return at + (n - 1) * stg + du; } function soft(node, at, dur){ anim(node, "k-riseW", at, (dur || 620) * sp); } /* ---------- builders ---------- */ var built = null; function mkDisc(name, cls){ var d = el("span", "disc" + (cls ? " " + cls : "")); var i = icon(name); if (i) { d.appendChild(i); } return d; } function mkKick(txt, iconName){ var k = el("p", "kick"); if (iconName && ICONS[iconName]) { k.appendChild(icon(iconName)); } k.appendChild(el("span", null, txt)); return k; } function mkCard(stage){ var cw = el("div", "cw"); stage.appendChild(cw); if (st === "paper") { cw.appendChild(el("span", "sheet s1")); cw.appendChild(el("span", "sheet s2")); } var card = el("div", "card"); cw.appendChild(card); if (st === "paper") { var tp = el("span", "tape"); tp.setAttribute("aria-hidden", "true"); cw.appendChild(tp); } return { cw:cw, card:card }; } function edRule(card, pos){ if (st !== "editorial") { return null; } var r = el("span", "erule " + pos); r.setAttribute("aria-hidden", "true"); if (pos === "top") { card.insertBefore(r, card.firstChild); } else { card.appendChild(r); } return r; } function decorate(deco){ var add = function(cls){ deco.appendChild(el("i", cls || null)); }; if (st === "flat") { add(); add(); add(); } else if (st === "glass") { add(); add(); add(); } else if (st === "neon") { add("h"); add("g"); } else if (st === "aurora") { add("g"); add("b b1"); add("b b2"); add("sc"); } else if (st === "tilt") { add("fl"); } } function cardIn(parts, at){ var cw = parts.cw, card = parts.card; if (st === "paper") { var sh = cw.querySelectorAll(".sheet"); for (var i = 0; i < sh.length; i++) { anim(sh[i], "k-fade", at + i * 90 * sp, 500 * sp); } var tp = cw.querySelector(".tape"); if (tp) { anim(tp, "k-popI", at + 520 * sp, 520 * sp); } } if (en.c) { anim(card, en.c, at, en.d * sp, en.c === "k-drop" ? "cubic-bezier(.3,.7,.3,1)" : null); } return en.c ? at + 240 * sp : at; } function edRuleIn(r, at){ if (r) { anim(r, "k-scaleX", at, 900 * sp, "cubic-bezier(.6,.05,.25,1)"); } } /* ================= SOFTWARE SIMULATION ================= */ var S = D.sim || {}; var SW = norm(S.swColor, "#2563EB"), SWO = readable(SW); var SWF = ({ serif:"Georgia, 'Times New Roman', serif", mono:"Consolas, 'Courier New', monospace" })[S.swFont] || "'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif"; var TYPES = { click:1, dblclick:1, rightclick:1, hover:1, type:1, key:1, select:1, check:1, date:1, slider:1, drag:1, note:1 }; function num(v, d){ v = Number(v); return isFinite(v) ? v : d; } function clampN(v, a, b){ return Math.max(a, Math.min(b, v)); } function boxOk(b){ return !!b && isFinite(Number(b.x)) && isFinite(Number(b.y)) && Number(b.w) > 0 && Number(b.h) > 0; } function dropBox(t){ return { x:Number(t.x2), y:Number(t.y2), w:Number(t.w2), h:Number(t.h2) }; } function ctr(b){ return { x:Number(b.x) + Number(b.w) / 2, y:Number(b.y) + Number(b.h) / 2 }; } function inBox(p, b, pad){ pad = pad || 0; return p.x >= b.x - pad && p.x <= Number(b.x) + Number(b.w) + pad && p.y >= b.y - pad && p.y <= Number(b.y) + Number(b.h) + pad; } var SCREENS = (Array.isArray(c.screens) ? c.screens : []).filter(function(s){ return s && has(s.img); }).map(function(s){ var steps = (Array.isArray(s.steps) ? s.steps : []).filter(function(t){ if (!t || !TYPES[t.type]) { return false; } if (t.type === "key") { return has(t.combo); } if (t.type === "note") { return true; } if (!boxOk(t)) { return false; } if (t.type === "drag") { return boxOk(dropBox(t)); } if (t.type === "select") { return Array.isArray(t.options) && t.options.filter(has).length > 0; } if (t.type === "date") { return /^\d{4}-\d{2}-\d{2}$/.test(str(t.date)); } return true; }); if (!steps.length) { steps = [{ type:"note", instr:"", auto:true }]; } return { id:str(s.id), name:str(s.name), img:s.img, alt:str(s.alt), ar:clampN(num(s.ar, 16 / 9), 0.2, 6), steps:steps }; }); var TOTAL = 0, BRANCH = false; SCREENS.forEach(function(s){ s.steps.forEach(function(t){ if (t.type !== "note") { TOTAL++; } if (has(t.goto)) { BRANCH = true; } (t.alts || []).forEach(function(a){ if (a && has(a.goto)) { BRANCH = true; } }); }); }); var MODES = [["show","Show Me","Watch each step play out."],["guide","Guide Me","Do each step with prompts."],["let","Let Me","Do it on your own. This one is scored."]].filter(function(m){ return !S.modes || S.modes[m[0]] !== false; }); if (!MODES.length) { MODES = [["guide","Guide Me","Do each step with prompts."]]; } function modeName(m){ for (var i = 0; i < MODES.length; i++) { if (MODES[i][0] === m) { return MODES[i][1]; } } return "Guide Me"; } var hintAfter = clampN(num(S.hintAfter, 3), 0, 9), passMark = clampN(num(S.pass, 80), 0, 100); var coarse = false; try { coarse = !!(window.matchMedia && window.matchMedia("(pointer: coarse)").matches); } catch (e) {} var WAR = (function(){ var w = S.win; if (w === "wide") { return 16 / 9; } if (w === "classic") { return 4 / 3; } return SCREENS.length ? clampN(SCREENS[0].ar, 1.25, 2.4) : 16 / 9; })(); /* ---------- rich text (allow-list rebuild, never innerHTML) ---------- */ var ALLOW = { B:"b", STRONG:"b", I:"i", EM:"i", U:"u", UL:"ul", OL:"ol", LI:"li", BR:"br", P:"p", A:"a", DIV:"p" }; function richInto(host, html){ var s = str(html); if (!/[<&]/.test(s)) { host.appendChild(document.createTextNode(s)); return; } var doc = null; try { doc = new DOMParser().parseFromString("" + s + "", "text/html"); } catch (e) { doc = null; } if (!doc || !doc.body) { host.appendChild(document.createTextNode(s.replace(/<[^>]*>/g, ""))); return; } (function walk(src, dst){ for (var n = src.firstChild; n; n = n.nextSibling) { if (n.nodeType === 3) { dst.appendChild(document.createTextNode(n.nodeValue)); continue; } if (n.nodeType !== 1) { continue; } var tag = ALLOW[n.nodeName]; if (n.nodeName === "SCRIPT" || n.nodeName === "STYLE") { dst.appendChild(document.createTextNode(n.textContent)); continue; } if (!tag) { walk(n, dst); continue; } var e = document.createElement(tag); if (tag === "a") { var h = str(n.getAttribute("href")).trim(); if (/^(https?:|mailto:)/i.test(h)) { e.setAttribute("href", h); e.setAttribute("target", "_blank"); e.setAttribute("rel", "noopener"); } } dst.appendChild(e); if (tag !== "br") { walk(n, e); } } })(doc.body, host); } function richPlain(html){ var d = el("div"); richInto(d, str(html).replace(/<\/(p|li|div)>|/gi, "$& ")); return d.textContent.replace(/\s+/g, " ").trim(); } /* ---------- state ---------- */ var stage = null, vw = null, live = null, ctl = null; var mode = null, si = 0, ti = 0, cur = null, tok = 0; var misses = 0, elapsed = 0, tickH = null, log = [], hops = 0, running = false; var sim = null, hud = null, wrap = null, shot = null, cv = null, imgEl = null, lay = null, tmp = null, clip = null, pop = null, capslot = null, curEl = null; var hStep = null, hTime = null, hMiss = null, zBtn = null, muteBtn = null; var dlgOpen = false, noClickUntil = 0, userFull = false, userZoom = false, muted = false, zcur = 1; var TQ = [], paused = false; function later(fn, ms){ var o = { fn:fn, left:Math.max(0, ms), at:Date.now(), id:0 }; if (!paused) { o.id = setTimeout(function(){ dropT(o); fn(); }, o.left); } TQ.push(o); return o; } function dropT(o){ var i = TQ.indexOf(o); if (i >= 0) { TQ.splice(i, 1); } } function cancel(o){ if (o) { clearTimeout(o.id); dropT(o); } } function clearTimers(){ TQ.forEach(function(o){ clearTimeout(o.id); }); TQ = []; } function setPaused(p){ if (p === paused) { return; } paused = p; if (p) { TQ.forEach(function(o){ clearTimeout(o.id); o.left = Math.max(0, o.left - (Date.now() - o.at)); }); root.classList.add("paused"); announce("Paused"); } else { TQ.slice().forEach(function(o){ o.at = Date.now(); o.id = setTimeout(function(){ dropT(o); o.fn(); }, o.left); }); root.classList.remove("paused"); announce("Playing"); } setCtl(); } function startTick(){ stopTick(); tickH = setInterval(function(){ if (!paused && running && !dlgOpen) { elapsed++; updateHud(); } }, 1000); } function stopTick(){ if (tickH != null) { clearInterval(tickH); tickH = null; } } function announce(t){ if (!live) { return; } live.textContent = ""; setTimeout(function(){ if (live) { live.textContent = t; } }, 40); } function mmss(s){ var m = Math.floor(s / 60), r = s % 60; return m + ":" + (r < 10 ? "0" : "") + r; } /* ---------- sound ---------- */ var SND = {}; (function(){ var s = D.snd || {}; ["ok","bad","done"].forEach(function(k){ if (has(s[k]) && typeof Audio !== "undefined") { try { SND[k] = new Audio(s[k]); } catch (e) {} } }); })(); var hasSnd = !!(SND.ok || SND.bad || SND.done); function play(k){ var a = SND[k]; if (!a || muted) { return; } try { a.currentTime = 0; var pr = a.play(); if (pr && pr.catch) { pr.catch(function(){}); } } catch (e) {} } /* ---------- confetti ---------- */ var cfRaf = null; function clearConfetti(){ try { if (cfRaf != null && window.cancelAnimationFrame) { window.cancelAnimationFrame(cfRaf); } } catch (e) {} cfRaf = null; var n = root.querySelectorAll("[data-cf]"); for (var i = 0; i < n.length; i++) { if (n[i].parentNode) { n[i].parentNode.removeChild(n[i]); } } } function confetti(){ clearConfetti(); if (!animate || !window.requestAnimationFrame || !stage) { return; } var cols = [col.primary, col.accent, "#FFFFFF", mix(norm(col.primary, "#0067B8"), "#FFFFFF", 0.5)], ps = [], W = stage.clientWidth, H = stage.clientHeight; for (var i = 0; i < 70; i++) { var e = el("i", "cf"); e.setAttribute("data-cf", "1"); e.style.background = norm(cols[i % cols.length], "#FFB900"); stage.appendChild(e); ps.push({ e:e, x:Math.random() * W, y:-20 - Math.random() * H * 0.4, vx:(Math.random() - 0.5) * 3, vy:2 + Math.random() * 3.5, r:Math.random() * 360, vr:(Math.random() - 0.5) * 14 }); } var t0 = Date.now(); (function fr(){ if (paused) { cfRaf = window.requestAnimationFrame(fr); return; } ps.forEach(function(p){ p.x += p.vx; p.y += p.vy; p.r += p.vr; p.e.style.transform = "translate(" + p.x + "px," + p.y + "px) rotate(" + p.r + "deg)"; }); if (Date.now() - t0 < 3200) { cfRaf = window.requestAnimationFrame(fr); } else { clearConfetti(); } })(); } /* ---------- shell ---------- */ function hbtn(label, path, fn){ var b = el("button", "hb"); b.type = "button"; b.setAttribute("aria-label", label); b.title = label; b.appendChild(svgPath(path)); b.addEventListener("click", fn); return b; } function setCtl(){ if (!ctl) { return; } var need = (mode === "show" && running) || (root.classList.contains("amb-on") && !root.classList.contains("amb-stop")); ctl.hidden = !need; while (ctl.firstChild) { ctl.removeChild(ctl.firstChild); } ctl.appendChild(svgPath(paused ? CTL.play : CTL.pause)); ctl.appendChild(el("span", null, paused ? "Play" : "Pause")); } function clearView(){ clearTimers(); stopTick(); clearConfetti(); running = false; cur = null; tok++; dlgOpen = false; if (paused) { paused = false; root.classList.remove("paused"); } while (vw.firstChild) { vw.removeChild(vw.firstChild); } sim = null; pop = null; cv = null; } function build(){ while (root.firstChild) { root.removeChild(root.firstChild); } root.className = "st-" + st + " fm-sim run" + (animate ? "" : " still") + (coarse ? " coarse" : ""); root.style.setProperty("--SW", SW); root.style.setProperty("--SWO", SWO); root.style.setProperty("--SWt", mix(SW, "#FFFFFF", 0.86)); root.style.setProperty("--swf", SWF); root.style.setProperty("--war", String(WAR)); root.style.setProperty("--dim", String(clampN(num(S.dim, 55), 0, 85) / 100)); var Cc = norm(col.card, "#FFFFFF"), Pp = norm(col.primary, "#0067B8"), far = readable(Cc); root.style.setProperty("--Cp", rgba(Cc, 0.84)); root.style.setProperty("--Aa", rgba(norm(col.accent, "#7FBA00"), 0.28)); root.style.setProperty("--Ps", towards(Pp, far, Cc, 4.5)); if (contrast(norm(col.sub, "#3B3A39"), Cc) < 4.5) { root.style.setProperty("--S", towards(norm(col.sub, "#3B3A39"), far, Cc, 4.5)); } var defs = document.createElementNS(SVGNS, "svg"); defs.setAttribute("width", "0"); defs.setAttribute("height", "0"); defs.setAttribute("aria-hidden", "true"); defs.setAttribute("focusable", "false"); defs.style.position = "absolute"; var f = document.createElementNS(SVGNS, "filter"); f.setAttribute("id", "eg-rough"); var tb = document.createElementNS(SVGNS, "feTurbulence"); tb.setAttribute("type", "fractalNoise"); tb.setAttribute("baseFrequency", "0.035"); tb.setAttribute("numOctaves", "2"); tb.setAttribute("seed", "7"); tb.setAttribute("result", "n"); var dm = document.createElementNS(SVGNS, "feDisplacementMap"); dm.setAttribute("in", "SourceGraphic"); dm.setAttribute("in2", "n"); dm.setAttribute("scale", "4.5"); dm.setAttribute("xChannelSelector", "R"); dm.setAttribute("yChannelSelector", "G"); f.appendChild(tb); f.appendChild(dm); defs.appendChild(f); root.appendChild(defs); stage = el("div", "stage"); stage.setAttribute("role", "group"); stage.setAttribute("aria-label", has(c.title) ? str(c.title) : "Software simulation"); var deco = el("div", "deco"); deco.setAttribute("aria-hidden", "true"); stage.appendChild(deco); decorate(deco); vw = el("div", "vw"); stage.appendChild(vw); root.appendChild(stage); var row = el("div", "ctlrow"); root.appendChild(row); ctl = el("button", "ctl"); ctl.type = "button"; ctl.hidden = true; row.appendChild(ctl); ctl.addEventListener("click", function(){ setPaused(!paused); }); live = el("div", "sr-only"); live.setAttribute("aria-live", "polite"); root.appendChild(live); if (D.ambient !== false && AMB[st] && animate) { root.classList.add("amb-on"); } if (!SCREENS.length) { var pe = mkCard(vw); pe.card.appendChild(el("p", "empty", "No content has been added yet.")); setCtl(); return; } var PV = D.pv; if (PV && SCREENS[PV.s]) { startSim(PV.mode || "guide", PV.s, PV.t || 0); } else { viewStart(); } } /* ---------- start and summary ---------- */ function actBtn(label, ghost, fn){ var b = el("button", "act" + (ghost ? " ghost" : "")); b.type = "button"; b.appendChild(el("span", null, label)); b.addEventListener("click", fn); return b; } function viewStart(){ clearView(); root.classList.remove("amb-stop"); var p = mkCard(vw), card = p.card; edRule(card, "top"); var h = el("h2", "ttl", has(c.title) ? str(c.title) : "Software simulation"); card.appendChild(h); if (has(richPlain(c.subtitle))) { var sb = el("div", "sub"); richInto(sb, c.subtitle); card.appendChild(sb); } var g = el("div", "modes"); card.appendChild(g); var def = S.defMode, first = null; if (MODES.length === 1) { first = actBtn("Start", false, function(){ startSim(MODES[0][0], 0, 0); }); g.appendChild(first); } else { MODES.forEach(function(m, i){ var b = el("button", "act modeb" + ((def ? m[0] === def : i === 0) ? "" : " ghost")); b.type = "button"; b.appendChild(el("b", null, m[1])); b.appendChild(el("span", null, m[2])); b.addEventListener("click", function(){ startSim(m[0], 0, 0); }); g.appendChild(b); if (!first) { first = b; } }); } edRule(card, "bot"); cardIn(p, 0); soft(g, 380 * sp); setCtl(); } function finish(){ var m = mode, first = 0, tot = 0, rev = []; log.forEach(function(l){ tot++; if (!l.miss && !l.hint) { first++; } else { rev.push(l); } }); var score = tot ? Math.round(first / tot * 100) : 100, t = elapsed, ms = misses; clearView(); root.classList.add("amb-stop"); var p = mkCard(vw), card = p.card; edRule(card, "top"); var h = el("h2", "ttl", has(c.endTitle) ? str(c.endTitle) : "Simulation complete"); h.tabIndex = -1; card.appendChild(h); if (has(richPlain(c.endMsg))) { var sb = el("div", "sub"); richInto(sb, c.endMsg); card.appendChild(sb); } if (m === "show") { card.appendChild(el("p", "body sline", "You watched every step. Now try it yourself.")); } else { var passed = score >= passMark; var g = el("div", "sum"); var tile = function(n, l){ var d = el("div", "panel stat"); d.appendChild(el("span", "sn", n)); d.appendChild(el("span", "sl2", l)); g.appendChild(d); }; if (S.showScore !== false) { tile(score + "%", "First-try score"); } if (S.showTime !== false) { tile(mmss(t), "Time"); } if (S.showMiss !== false) { tile(String(ms), ms === 1 ? "Wrong action" : "Wrong actions"); } if (g.firstChild) { card.appendChild(g); } if (m === "let" && S.showScore !== false) { card.appendChild(el("p", "body sline", (passed ? "✓ Passed. " : "✗ Not yet. ") + "The pass mark is " + passMark + "%.")); } if (rev.length) { card.appendChild(el("h3", "revh", "Steps to review")); var ul = el("ul", "rev"); rev.forEach(function(l){ var li = el("li"); li.appendChild(el("span", "rvn", l.name)); li.appendChild(el("span", "rvm", (l.miss ? l.miss + (l.miss === 1 ? " wrong action" : " wrong actions") : "") + (l.hint ? (l.miss ? ", hint used" : "Hint used") : ""))); ul.appendChild(li); }); card.appendChild(ul); } else if (tot) { card.appendChild(el("p", "body sline", "✓ Every step was right on the first try.")); } if (m === "let" && passed && S.confetti !== false) { later(confetti, 300); } } var row = el("div", "prow end"); if (m === "show") { MODES.forEach(function(x){ if (x[0] !== "show") { row.appendChild(actBtn(x[1], row.firstChild != null, function(){ startSim(x[0], 0, 0); })); } }); row.appendChild(actBtn("Watch again", row.firstChild != null, function(){ startSim("show", 0, 0); })); } else { row.appendChild(actBtn("Try again", false, function(){ startSim(m, 0, 0); })); } if (MODES.length > 1) { row.appendChild(actBtn("Change mode", true, viewStart)); } card.appendChild(row); edRule(card, "bot"); cardIn(p, 0); play("done"); announce("Simulation complete." + (m !== "show" && S.showScore !== false ? " Score " + score + " percent." : "")); try { h.focus({ preventScroll:true }); } catch (e) {} setCtl(); } /* ---------- simulation shell ---------- */ function startSim(m, s0, t0){ clearView(); root.classList.remove("amb-stop"); mode = m; misses = 0; elapsed = 0; log = []; hops = 0; running = true; userFull = false; userZoom = false; zcur = 1; sim = el("div", "sim m-" + m); vw.appendChild(sim); hud = el("div", "hud"); sim.appendChild(hud); hud.appendChild(el("span", "hm", modeName(m))); hStep = el("span", "hs"); hud.appendChild(hStep); hTime = el("span", "ht"); hMiss = el("span", "hx"); if (m !== "show") { if (S.showTime !== false) { hud.appendChild(hTime); } if (S.showMiss !== false) { hud.appendChild(hMiss); } } hud.appendChild(el("span", "hsp")); zBtn = hbtn("Zoom out to the full screen", "M11 4a7 7 0 1 0 0 14a7 7 0 1 0 0-14zM20 20l-4-4M8 11h6", function(){ if (mode === "let" && !(cur && cur.hinted)) { userZoom = !userZoom; } else { userFull = !userFull; } layoutZoom(true); placePop(); }); zBtn.classList.add("zb"); hud.appendChild(zBtn); if (hasSnd) { muteBtn = hbtn("Mute sound", "M4 9v6h4l5 4V5L8 9zM16 9.5a4 4 0 0 1 0 5", function(){ muted = !muted; muteBtn.setAttribute("aria-pressed", muted ? "true" : "false"); muteBtn.setAttribute("aria-label", muted ? "Turn sound on" : "Mute sound"); muteBtn.title = muted ? "Turn sound on" : "Mute sound"; muteBtn.classList.toggle("off", muted); }); muteBtn.setAttribute("aria-pressed", "false"); hud.appendChild(muteBtn); } hud.appendChild(hbtn("Start over", CTL.replay, viewStart)); wrap = el("div", "shotwrap"); sim.appendChild(wrap); shot = el("div", "shot"); shot.tabIndex = -1; wrap.appendChild(shot); cv = el("div", "cv"); shot.appendChild(cv); imgEl = el("img", "simg"); imgEl.draggable = false; cv.appendChild(imgEl); lay = el("div", "lay"); cv.appendChild(lay); clip = el("div", "clip"); cv.appendChild(clip); tmp = el("div", "tmp"); cv.appendChild(tmp); curEl = el("div", "cur"); curEl.setAttribute("aria-hidden", "true"); curEl.appendChild(svgPath("M4 2l15 11h-7.5L8 21z")); curEl.hidden = true; curEl.style.left = "50%"; curEl.style.top = "55%"; cv.appendChild(curEl); capslot = el("div", "capslot"); sim.appendChild(capslot); pop = el("div", "pop dock"); capslot.appendChild(pop); cv.addEventListener("click", onClick); cv.addEventListener("contextmenu", onCtx); cv.addEventListener("pointerdown", onDown); cv.addEventListener("pointermove", onMove); cv.addEventListener("pointerup", onUp); cv.addEventListener("pointercancel", onUp); cv.addEventListener("pointerleave", function(){ if (cur && cur.hv) { cancel(cur.hv); cur.hv = null; } }); var sc = null; shot.addEventListener("scroll", function(){ if (sc) { return; } sc = setTimeout(function(){ sc = null; if (pop && cur) { placePop(); } }, 60); }); startTick(); setCtl(); enterScreen(clampN(s0 || 0, 0, SCREENS.length - 1), t0 || 0); } function updateHud(){ if (!hud) { return; } var n = 0, i, j; for (i = 0; i < si; i++) { SCREENS[i].steps.forEach(function(t){ if (t.type !== "note") { n++; } }); } for (j = 0; j <= ti && SCREENS[si]; j++) { if (SCREENS[si].steps[j] && SCREENS[si].steps[j].type !== "note") { n++; } } hStep.textContent = BRANCH ? ("Step " + (log.length + 1)) : (TOTAL ? "Step " + clampN(n, 1, TOTAL) + " of " + TOTAL : ""); hTime.textContent = mmss(elapsed); hMiss.textContent = "Misses " + misses; } function pt(e){ var r = cv.getBoundingClientRect(); return { x:(e.clientX - r.left) / (r.width || 1) * 100, y:(e.clientY - r.top) / (r.height || 1) * 100 }; } function pos(n, b){ n.style.left = b.x + "%"; n.style.top = b.y + "%"; n.style.width = b.w + "%"; n.style.height = b.h + "%"; } function fsFor(t, b){ var ar = SCREENS[si].ar, f = clampN(num(t.fs, 38), 15, 95); return (f * Number((b || t).h) / (100 * ar)).toFixed(3) + "cqw"; } function ripple(p, kind){ if (!p || !cv) { return; } var r = el("i", "rp" + (kind === "bad" ? " bad" : kind === "n" ? " n" : "")); r.style.left = p.x + "%"; r.style.top = p.y + "%"; if (kind === "bad") { r.textContent = "✕"; } cv.appendChild(r); setTimeout(function(){ if (r.parentNode) { r.parentNode.removeChild(r); } }, 650); } function stepName(t){ var n = has(t.name) ? str(t.name) : richPlain(t.instr); if (!has(n)) { n = defInstr(t); } return n.length > 90 ? n.slice(0, 88) + "…" : n; } function defInstr(t){ switch (t.type) { case "dblclick": return "Double-click the highlighted area."; case "rightclick": return "Right-click the highlighted area."; case "hover": return "Point to the highlighted area."; case "type": return "Type in the highlighted field."; case "key": return "Press " + str(t.combo) + "."; case "select": return "Open the list and choose the right option."; case "check": return "Select the highlighted control."; case "date": return "Open the calendar and choose the date."; case "slider": return "Drag the slider to the right value."; case "drag": return "Drag the item to its new spot."; case "note": return ""; default: return "Click the highlighted area."; } } function instrOf(t){ if (mode === "let" && has(richPlain(t.task))) { return t.task; } return has(richPlain(t.instr)) ? t.instr : defInstr(t); } function enterScreen(i, t0){ if (++hops > 400) { finish(); return; } si = i; ti = clampN(t0 || 0, 0, SCREENS[i].steps.length - 1); var s = SCREENS[i]; while (lay.firstChild) { lay.removeChild(lay.firstChild); } imgEl.src = s.img; imgEl.alt = has(s.alt) ? s.alt : (has(s.name) ? "Screenshot: " + s.name : "Software screenshot"); cv.style.aspectRatio = String(s.ar); if (animate) { cv.classList.remove("flash"); void cv.offsetWidth; cv.classList.add("flash"); } try { shot.scrollTop = 0; shot.scrollLeft = 0; } catch (e) {} enterStep(true); } function clearStep(){ if (cur) { if (cur.hv) { cancel(cur.hv); } if (cur.lp) { cancel(cur.lp); } } while (tmp.firstChild) { tmp.removeChild(tmp.firstChild); } while (clip.firstChild) { clip.removeChild(clip.firstChild); } var d = wrap.querySelector(".dlgw"); if (d) { wrap.removeChild(d); } dlgOpen = false; } function enterStep(fresh){ clearStep(); var t = SCREENS[si].steps[ti]; cur = { t:t, miss:0, hinted:false, open:false, done:false, tok:++tok, last:0 }; updateHud(); if (mode !== "show") { buildStep(t); } if (mode === "guide") { showHL(); } fillPop(); layoutZoom(fresh); placePop(); if (!t.auto || mode !== "show") { announce((BRANCH || !TOTAL ? "" : hStep.textContent + ". ") + richPlain(instrOf(t))); } if (mode === "show") { demo(); } else if (mode === "guide" && cur.focus && !fresh) { try { cur.focus.focus({ preventScroll:true }); } catch (e) {} } } /* ---------- highlight, pop-up, zoom ---------- */ function hlBox(t){ if (t.type === "drag") { var a = t, b = dropBox(t), x = Math.min(a.x, b.x), y = Math.min(a.y, b.y); return { x:x, y:y, w:Math.max(Number(a.x) + Number(a.w), b.x + b.w) - x, h:Math.max(Number(a.y) + Number(a.h), b.y + b.h) - y }; } return boxOk(t) ? { x:Number(t.x), y:Number(t.y), w:Number(t.w), h:Number(t.h) } : null; } function showHL(){ var t = cur.t; if (!boxOk(t) || clip.querySelector(".hlr")) { return; } if (S.spot !== false && t.type !== "drag") { var s = el("i", "spot"); pos(s, t); clip.appendChild(s); } var r = el("i", "hlr"); pos(r, t); clip.appendChild(r); if (t.type === "drag") { var r2 = el("i", "hlr drop"); pos(r2, dropBox(t)); clip.appendChild(r2); } } function fb(msg, bad){ var f = pop && pop.querySelector(".fb"); if (!f) { return; } f.textContent = msg ? (bad ? "✕ " : "✓ ") + msg : ""; f.className = "fb" + (bad ? " bad" : ""); if (pop.classList.contains("float")) { placePop(); } } function tip(msg){ var f = pop && pop.querySelector(".fb"); if (f) { f.textContent = msg; f.className = "fb"; } announce(msg); } function fillPop(){ while (pop.firstChild) { pop.removeChild(pop.firstChild); } var t = cur.t, k = el("p", "pk", hStep.textContent && t.type !== "note" ? hStep.textContent : (t.type === "note" ? "Note" : modeName(mode))); pop.appendChild(k); var aw = el("p", "paway", "↕ Scroll the screen to find it."); aw.hidden = true; pop.appendChild(aw); var ins = instrOf(t); if (has(richPlain(ins))) { var b = el("div", "pt"); richInto(b, ins); pop.appendChild(b); } if (cur.hinted && has(t.hint)) { pop.appendChild(el("p", "ph", "Hint: " + str(t.hint))); } var f = el("p", "fb"); f.setAttribute("role", "status"); pop.appendChild(f); var row = el("div", "prow"); if (mode !== "show") { if (t.type === "note") { var nx = actBtn(si === SCREENS.length - 1 && ti === SCREENS[si].steps.length - 1 && !has(t.goto) ? "Finish" : "Next", false, function(){ ok(null); }); row.appendChild(nx); cur.focus = nx; } if (t.type === "key" && (mode === "guide" || coarse || cur.hinted)) { row.appendChild(actBtn("Press " + str(t.combo), mode !== "guide" && !coarse, function(){ ok(boxOk(t) ? ctr(t) : null); })); } if (mode === "let" && !cur.hinted && t.type !== "note" && S.hintBtn !== false) { row.appendChild(actBtn("Hint", true, function(){ hint(); })); } } if (row.firstChild) { pop.appendChild(row); } } function placePop(){ if (!pop || !cur) { return; } var t = cur.t, narrow = wrap.clientWidth < 620, hb = hlBox(t); var dock = narrow || !hb || (mode === "let" && !cur.hinted); sim.classList.toggle("narrow", narrow); var aw = pop.querySelector(".paway"); if (dock) { if (pop.parentNode !== capslot) { capslot.appendChild(pop); } pop.className = "pop dock"; pop.style.left = ""; pop.style.top = ""; if (aw) { aw.hidden = true; } return; } if (pop.parentNode !== wrap) { wrap.appendChild(pop); } pop.className = "pop float"; if (aw) { aw.hidden = true; } var wr = wrap.getBoundingClientRect(), cr = cv.getBoundingClientRect(), sr = shot.getBoundingClientRect(); var b = t.type === "drag" ? t : hb; var tr = { l:cr.left + b.x / 100 * cr.width - wr.left, t:cr.top + b.y / 100 * cr.height - wr.top, w:b.w / 100 * cr.width, h:b.h / 100 * cr.height }; var cx = tr.l + tr.w / 2, cy = tr.t + tr.h / 2, W = wr.width, H = sr.height; var vis = cx > -4 && cx < W + 4 && cy > -4 && cy < H + 4; if (!vis && aw) { aw.hidden = false; } var pw = pop.offsetWidth, ph = pop.offsetHeight, g = 16, L, T, side = ""; /* keep clear of an open list or calendar as well as the target */ var av = { l:tr.l, t:tr.t, r:tr.l + tr.w, b:tr.t + tr.h }; if (cur.wid && cur.wid.parentNode) { var qr = cur.wid.getBoundingClientRect(); av = { l:Math.min(av.l, qr.left - wr.left), t:Math.min(av.t, qr.top - wr.top), r:Math.max(av.r, qr.right - wr.left), b:Math.max(av.b, qr.bottom - wr.top) }; } var tryS = { pb:function(){ if (av.b + g + ph <= H - 6) { T = av.b + g; L = cx - pw / 2; return true; } }, pa:function(){ if (av.t - g - ph >= 6) { T = av.t - g - ph; L = cx - pw / 2; return true; } }, pr:function(){ if (av.r + g + pw <= W - 6) { L = av.r + g; T = cy - ph / 2; return true; } }, pl:function(){ if (av.l - g - pw >= 6) { L = av.l - g - pw; T = cy - ph / 2; return true; } } }; if (!vis) { L = (W - pw) / 2; T = H - ph - 12; side = "none"; } else { (cur.wid ? ["pl","pr","pa","pb"] : ["pb","pa","pr","pl"]).some(function(k){ if (tryS[k]()) { side = k; return true; } return false; }); } if (!side) { side = "none"; L = (av.l + av.r) / 2 < W / 2 ? W - pw - 8 : 8; T = (av.t + av.b) / 2 < H / 2 ? H - ph - 8 : 8; } L = clampN(L, 6, Math.max(6, W - pw - 6)); T = clampN(T, 6, Math.max(6, H - ph - 6)); pop.style.left = L + "px"; pop.style.top = T + "px"; pop.classList.add(side); pop.style.setProperty("--ax", clampN(cx - L, 22, pw - 22) + "px"); pop.style.setProperty("--ay", clampN(cy - T, 22, ph - 22) + "px"); } function layoutZoom(jump){ if (!cv || !cur) { return; } var t = cur.t, narrow = wrap.clientWidth < 620, b = hlBox(t), z = 1; var reveal = mode !== "let" || cur.hinted; if (narrow && S.zoom !== false) { if (!reveal) { z = userZoom ? 2.2 : 1; } else if (!userFull && b) { z = clampN(58 / b.w, 1, 3.4); var vh = shot.clientHeight || 1, bh = b.h / 100 * (shot.clientWidth / SCREENS[si].ar); if (bh * z > vh * 0.7) { z = Math.max(1, vh * 0.7 / bh); } if (z < 1.25) { z = 1; } } } if (zBtn) { zBtn.hidden = !(narrow && S.zoom !== false); var out = reveal ? userFull : !userZoom; zBtn.setAttribute("aria-label", out ? "Zoom in" : "Zoom out to the full screen"); zBtn.title = zBtn.getAttribute("aria-label"); zBtn.classList.toggle("off", out); } zcur = z; cv.style.width = (z * 100) + "%"; var auto = reveal && b && (z > 1 || mode === "show" || S.autoScroll === true); if (auto) { var cw = shot.clientWidth * z, ch = cw / SCREENS[si].ar; var left = (b.x + b.w / 2) / 100 * cw - shot.clientWidth / 2, top = (b.y + b.h / 2) / 100 * ch - shot.clientHeight / 2; if (z === 1 && mode !== "show" && S.autoScroll !== true) { return; } try { if (shot.scrollTo) { shot.scrollTo({ left:Math.max(0, left), top:Math.max(0, top), behavior:(animate && !jump) ? "smooth" : "auto" }); } else { shot.scrollLeft = Math.max(0, left); shot.scrollTop = Math.max(0, top); } } catch (e) { shot.scrollLeft = Math.max(0, left); shot.scrollTop = Math.max(0, top); } } } /* ---------- persisted marks ---------- */ function mkTxt(parent, t, val, area){ var d = el("div", "mk" + (area ? " area" : "")); pos(d, t); d.style.background = norm(t.bg, "#FFFFFF"); d.style.color = norm(t.fg, readable(norm(t.bg, "#FFFFFF")) === "#FFFFFF" ? "#FFFFFF" : "#1B1B1B"); d.style.fontSize = area ? fsFor({ fs:num(t.fs, 38) / 2.6, h:t.h }) : fsFor(t); d.appendChild(el("span", "mkv", val)); parent.appendChild(d); return d; } function mkCheck(parent, t){ var k = t.kind || "checkbox", d = el("i", "ck ck-" + k); pos(d, t); if (k === "checkbox") { d.appendChild(svgPath("M5 12.5l4.5 4.5L19 7.5")); } else if (k === "toggle") { d.appendChild(el("b")); } else { d.appendChild(el("b")); } parent.appendChild(d); return d; } function mkCrop(b, at){ var d = el("div", "crop"); pos(d, at || b); if (at) { d.style.width = b.w + "%"; d.style.height = b.h + "%"; } var im = el("img"); im.src = SCREENS[si].img; im.alt = ""; im.draggable = false; im.style.width = (10000 / b.w) + "%"; im.style.left = (-b.x / b.w * 100) + "%"; im.style.top = (-b.y / b.h * 100) + "%"; d.appendChild(im); return d; } function mkHole(parent, t){ var h = el("i", "hole"); pos(h, t); h.style.background = norm(t.bg, "#F1F3F6"); parent.appendChild(h); return h; } function dropAt(t){ var d = dropBox(t); return { x:d.x + (d.w - t.w) / 2, y:d.y + (d.h - t.h) / 2 }; } function fmtDate(iso, f){ var m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(str(iso)); if (!m) { return str(iso); } var MN = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; if (f === "dmy") { return m[3] + "/" + m[2] + "/" + m[1]; } if (f === "iso") { return m[1] + "-" + m[2] + "-" + m[3]; } if (f === "long") { return MN[Number(m[2]) - 1] + " " + Number(m[3]) + ", " + m[1]; } return m[2] + "/" + m[3] + "/" + m[1]; } function sliderDom(parent, t, val, live2){ var min = num(t.min, 0), max = num(t.max, 100); if (max <= min) { max = min + 1; } var w = el("div", "sl"); pos(w, t); w.style.background = has(t.bg) ? norm(t.bg, "transparent") : "transparent"; var tr = el("i", "str"), fl = el("i", "sfl"), th = el(live2 ? "button" : "i", "sth"), bb = el("span", "sbb"); if (live2) { th.type = "button"; } w.appendChild(tr); w.appendChild(fl); w.appendChild(th); th.appendChild(bb); parent.appendChild(w); var set = function(v){ var f = (clampN(v, min, max) - min) / (max - min) * 100; th.style.left = f + "%"; fl.style.width = f + "%"; bb.textContent = String(v) + str(t.unit); }; set(val); return { w:w, th:th, set:set, min:min, max:max }; } function persist(t){ if (!lay) { return; } switch (t.type) { case "type": mkTxt(lay, t, t.kind === "password" ? str(cur && cur.val != null ? cur.val : t.answer).replace(/./g, "•") : str(cur && cur.val != null ? cur.val : (has(t.answer) ? t.answer : t.sample)), t.kind === "area"); break; case "select": var m = mkTxt(lay, t, str((t.options || [])[num(t.correct, 0)])); m.classList.add("dd"); m.appendChild(el("i", "car", "▾")); break; case "date": mkTxt(lay, t, fmtDate(t.date, t.fmt)); break; case "check": mkCheck(lay, t); break; case "slider": sliderDom(lay, t, cur && cur.sval != null ? cur.sval : num(t.value, 0), false); break; case "drag": mkHole(lay, t); lay.appendChild(mkCrop(t, dropAt(t))); break; } } /* ---------- step flow ---------- */ function ok(p, o){ if (!cur || cur.done) { return; } cur.done = true; var t = cur.t, k = tok; if (p) { ripple(p); } if (t.type !== "note") { play("ok"); log.push({ name:stepName(t), miss:cur.miss, hint:cur.hinted }); fb("Correct", false); announce("Correct."); } persist(t); while (tmp.firstChild) { tmp.removeChild(tmp.firstChild); } while (clip.firstChild) { clip.removeChild(clip.firstChild); } var go = function(){ if (k !== tok) { return; } advance(t.goto, o && o.after); }; var go2 = function(){ if (k !== tok) { return; } advance(t.goto); }; if (t.after && t.after.on && (has(richPlain(t.after.text)) || has(t.after.title))) { later(function(){ if (k === tok) { dialog(t.after, "info", go2); } }, 260); } else { later(go, t.type === "note" ? 0 : (o && o.after ? 0 : 430)); } } function miss(p, msg){ if (!cur || cur.done) { return; } cur.miss++; misses++; if (p) { ripple(p, "bad"); } play("bad"); updateHud(); if (animate && wrap) { wrap.classList.remove("shake"); void wrap.offsetWidth; wrap.classList.add("shake"); } fb(msg || "Not quite. Try again.", true); announce(msg || "Not quite. Try again."); if (mode === "let" && hintAfter > 0 && cur.miss >= hintAfter && !cur.hinted) { hint(); fb(msg || "Not quite. Here is a hint.", true); } } function hint(){ if (!cur || cur.hinted) { return; } cur.hinted = true; showHL(); fillPop(); layoutZoom(); placePop(); announce("Hint shown. " + (has(cur.t.hint) ? str(cur.t.hint) : "")); } function idxOf(id){ for (var i = 0; i < SCREENS.length; i++) { if (SCREENS[i].id === id) { return i; } } return -1; } function advance(g, after){ if (!running) { return; } if (g === "end") { finish(); return; } if (has(g) && g !== "next") { var j = idxOf(g); if (j >= 0) { enterScreen(j, 0); return; } } if (ti < SCREENS[si].steps.length - 1) { ti++; enterStep(false); if (after) { after(); } return; } if (si < SCREENS.length - 1) { enterScreen(si + 1, 0); return; } finish(); } function dialog(d, kind, cb, auto){ dlgOpen = true; var w = el("div", "dlgw"), g = el("div", "dlg" + (kind === "error" ? " err" : "")); g.setAttribute("role", "alertdialog"); g.setAttribute("aria-modal", "true"); var h = el("h3", "dh", has(d.title) ? str(d.title) : (kind === "error" ? "Error" : "Message")); h.id = "eg-dh"; g.setAttribute("aria-labelledby", "eg-dh"); if (kind === "error") { var ic = el("i", "dic", "!"); ic.setAttribute("aria-hidden", "true"); h.insertBefore(ic, h.firstChild); } g.appendChild(h); if (has(richPlain(d.text))) { var b = el("div", "db"); richInto(b, d.text); g.appendChild(b); } var bt = el("button", "dbt", has(d.btn) ? str(d.btn) : "OK"); bt.type = "button"; g.appendChild(bt); w.appendChild(g); wrap.appendChild(w); var done = false, close = function(){ if (done) { return; } done = true; if (w.parentNode) { w.parentNode.removeChild(w); } dlgOpen = false; noClickUntil = Date.now() + 250; if (cb) { cb(); } }; bt.addEventListener("click", close); g.addEventListener("keydown", function(e){ if (e.key === "Escape") { e.preventDefault(); close(); } else if (e.key === "Tab") { e.preventDefault(); bt.focus(); } }); if (mode !== "show") { try { bt.focus({ preventScroll:true }); } catch (e) {} } announce((has(d.title) ? str(d.title) + ". " : "") + richPlain(d.text)); if (auto) { later(close, auto); } } function hitAlt(p){ var a = cur.t.alts || []; for (var i = 0; i < a.length; i++) { if (a[i] && boxOk(a[i]) && inBox(p, a[i])) { return a[i]; } } return null; } function altHit(a, p){ var wrong = a.wrong !== false, k = tok, t = cur.t; if (wrong) { cur.miss++; misses++; play("bad"); updateHud(); ripple(p, "bad"); if (mode === "let" && hintAfter > 0 && cur.miss >= hintAfter && !cur.hinted) { hint(); } } else { ripple(p); } var then = function(){ if (k !== tok) { return; } if (has(a.goto)) { if (t.type !== "note") { log.push({ name:stepName(t), miss:cur.miss, hint:cur.hinted }); } cur.done = true; advance(a.goto); } else if (wrong && !has(a.msg)) { fb("Not quite. Try again.", true); } }; if (has(richPlain(a.msg))) { dialog({ title:a.title, text:a.msg, btn:a.btn }, wrong ? "error" : "info", then); } else { then(); } } /* ---------- building the live controls for a step ---------- */ function mkHot(b, label, cls){ var h = el("button", "hot" + (cls ? " " + cls : "")); h.type = "button"; pos(h, b); h.setAttribute("aria-label", label); tmp.appendChild(h); return h; } function kb(h, fn){ h.addEventListener("click", function(e){ if (e.detail === 0) { e.stopPropagation(); fn(e); } }); } function buildStep(t){ var name = stepName(t), h; switch (t.type) { case "click": case "check": h = mkHot(t, name); kb(h, function(){ ok(ctr(t)); }); cur.focus = h; break; case "dblclick": h = mkHot(t, name + ". Double-click, or press Enter."); kb(h, function(){ ok(ctr(t)); }); cur.focus = h; break; case "rightclick": h = mkHot(t, name + ". Right-click, press and hold, or press Enter."); kb(h, function(){ ok(ctr(t)); }); cur.focus = h; break; case "hover": h = mkHot(t, name + ". Point to it, or press Enter."); kb(h, function(){ ok(ctr(t)); }); cur.focus = h; break; case "select": case "date": h = mkHot(t, name + ". Press Enter to open."); h.setAttribute("aria-haspopup", t.type === "select" ? "listbox" : "dialog"); kb(h, function(){ openWidget(true); }); cur.hot = h; cur.focus = h; break; case "type": buildType(t, name); break; case "slider": buildSlider(t, name); break; case "drag": buildDrag(t, name); break; } } function typeOk(){ var t = cur.t, v = str(cur.inp.value).trim(); if (t.any || t.kind === "area" && !has(t.answer)) { return v !== ""; } var list = [str(t.answer)].concat(str(t.variants).split(/\n|\|/)).map(function(x){ return x.trim(); }).filter(function(x){ return x !== ""; }); if (!list.length) { return v !== ""; } var cmp = t.cs ? v : v.toLowerCase(); return list.some(function(a){ return (t.cs ? a : a.toLowerCase()) === cmp; }); } function commitType(p, after){ var t = cur.t; if (typeOk()) { cur.val = cur.inp.value; ok(null, after ? { after:after } : null); } else { miss(p, str(cur.inp.value).trim() === "" ? "Type in the field first." : "That entry is not right. Check it and try again."); } } function buildType(t, name){ var area = t.kind === "area", i = el(area ? "textarea" : "input", "inp" + (area ? " area" : "")); if (!area) { i.type = t.kind === "password" ? "password" : "text"; } i.setAttribute("aria-label", name); i.setAttribute("autocomplete", "off"); i.setAttribute("autocapitalize", "off"); i.setAttribute("spellcheck", "false"); pos(i, t); var bg = norm(t.bg, "#FFFFFF"); i.style.background = bg; i.style.color = norm(t.fg, readable(bg) === "#FFFFFF" ? "#FFFFFF" : "#1B1B1B"); i.style.fontSize = area ? fsFor({ fs:num(t.fs, 38) / 2.6, h:t.h }) : fsFor(t); if (has(t.ph)) { i.placeholder = str(t.ph); } tmp.appendChild(i); cur.inp = i; cur.focus = i; i.addEventListener("keydown", function(e){ if (e.key === "Enter" && !area) { e.preventDefault(); commitType(ctr(t)); } else if (e.key === "Tab" && !e.shiftKey && typeOk()) { e.preventDefault(); cur.val = i.value; ok(null); } }); i.addEventListener("input", function(){ if (t.commit === "auto" && typeOk()) { var k = tok; later(function(){ if (k === tok && cur && !cur.done && typeOk()) { cur.val = i.value; ok(null); } }, 380); } }); } function closeOpen(){ var had = cur && cur.wid; if (had) { if (cur.wid.parentNode) { cur.wid.parentNode.removeChild(cur.wid); } cur.wid = null; } if (cur) { cur.open = false; } if (had && pop && !cur.done) { placePop(); } } function fitWidget(l){ var over = l.offsetLeft + l.offsetWidth - cv.clientWidth; if (over > 0) { l.style.left = Math.max(0, l.offsetLeft - over - 4) + "px"; } var bot = l.offsetTop + l.offsetHeight, vb = shot.scrollTop + shot.clientHeight; if (bot > vb) { try { shot.scrollTop += Math.min(bot - vb + 6, l.offsetTop - shot.scrollTop); } catch (e) {} } } function openWidget(byKey, inert){ var t = cur.t; if (cur.open) { return cur.wid; } cur.open = true; var up = t.y + t.h > 62, l; if (t.type === "select") { l = el("div", "ddl"); l.setAttribute("role", "listbox"); l.setAttribute("aria-label", stepName(t)); var opts = (t.options || []).filter(has), corr = clampN(num(t.correct, 0), 0, opts.length - 1); opts.forEach(function(o, i){ var b = el("button", "opt", str(o)); b.type = "button"; b.setAttribute("role", "option"); if (inert) { b.tabIndex = -1; if (i === corr) { b.setAttribute("data-c", "1"); } } b.addEventListener("click", function(e){ e.stopPropagation(); if (mode === "show") { return; } var p = e.detail === 0 ? ctr(t) : pt(e); if (i === corr) { ok(p); } else { miss(p, "That is not the right option."); } }); b.addEventListener("keydown", function(e){ var all = l.querySelectorAll(".opt"), n = Array.prototype.indexOf.call(all, b); if (e.key === "ArrowDown") { e.preventDefault(); all[(n + 1) % all.length].focus(); } else if (e.key === "ArrowUp") { e.preventDefault(); all[(n + all.length - 1) % all.length].focus(); } else if (e.key === "Escape") { e.preventDefault(); closeOpen(); if (cur.hot) { cur.hot.focus(); } } }); l.appendChild(b); }); l.style.minWidth = t.w + "%"; l.style.fontSize = "max(" + (coarse ? 16 : 13) + "px," + fsFor(t) + ")"; } else { l = buildCal(t, inert); } l.style.left = t.x + "%"; if (up) { l.style.bottom = (100 - t.y) + "%"; } else { l.style.top = (Number(t.y) + Number(t.h)) + "%"; } tmp.appendChild(l); cur.wid = l; fitWidget(l); placePop(); if (byKey) { var f = l.querySelector(t.type === "select" ? ".opt" : ".cd[data-on]") || l.querySelector("button"); if (f) { try { f.focus({ preventScroll:true }); } catch (e) {} } } return l; } function buildCal(t, inert){ var m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(str(t.date)), ty = Number(m[1]), tm = Number(m[2]) - 1, td = Number(m[3]); var o = /^(\d{4})-(\d{2})/.exec(str(t.open)), y = o ? Number(o[1]) : ty, mo = o ? Number(o[2]) - 1 : tm; var MN = ["January","February","March","April","May","June","July","August","September","October","November","December"]; var c2 = el("div", "cal"); c2.setAttribute("role", "dialog"); c2.setAttribute("aria-label", "Choose a date"); var head = el("div", "calh"), prev = el("button", "cnav", "‹"), next = el("button", "cnav", "›"), lab = el("span", "cml"); lab.setAttribute("aria-live", "polite"); prev.type = "button"; next.type = "button"; prev.setAttribute("aria-label", "Previous month"); next.setAttribute("aria-label", "Next month"); head.appendChild(prev); head.appendChild(lab); head.appendChild(next); c2.appendChild(head); var grid = el("div", "calg"); c2.appendChild(grid); var draw = function(){ while (grid.firstChild) { grid.removeChild(grid.firstChild); } lab.textContent = MN[mo] + " " + y; ["S","M","T","W","T","F","S"].forEach(function(d){ var w = el("span", "cw2", d); w.setAttribute("aria-hidden", "true"); grid.appendChild(w); }); var first = new Date(y, mo, 1).getDay(), days = new Date(y, mo + 1, 0).getDate(); for (var i = 0; i < first; i++) { grid.appendChild(el("span", "cx")); } for (var d = 1; d <= days; d++) { (function(d){ var b = el("button", "cd", String(d)); b.type = "button"; b.setAttribute("aria-label", MN[mo] + " " + d + ", " + y); var hit = y === ty && mo === tm && d === td; if (d === 1 || hit) { b.setAttribute("data-on", "1"); } if (hit && inert) { b.setAttribute("data-c", "1"); } if (inert) { b.tabIndex = -1; } b.addEventListener("click", function(e){ e.stopPropagation(); if (mode === "show") { return; } var p = e.detail === 0 ? ctr(t) : pt(e); if (hit) { ok(p); } else { miss(p, "That is not the right date."); } }); grid.appendChild(b); })(d); } }; prev.addEventListener("click", function(e){ e.stopPropagation(); mo--; if (mo < 0) { mo = 11; y--; } draw(); }); next.addEventListener("click", function(e){ e.stopPropagation(); mo++; if (mo > 11) { mo = 0; y++; } draw(); }); c2.addEventListener("keydown", function(e){ if (e.key === "Escape") { e.preventDefault(); closeOpen(); if (cur.hot) { cur.hot.focus(); } } }); c2.addEventListener("click", function(e){ e.stopPropagation(); }); draw(); return c2; } function buildSlider(t, name){ var stp = Math.abs(num(t.step, 1)) || 1, target = num(t.value, 0), tol = Math.abs(num(t.tol, 0)); var s = sliderDom(tmp, t, num(t.start, num(t.min, 0)), true), val = num(t.start, s.min), th = s.th, deb = null; th.setAttribute("role", "slider"); th.setAttribute("aria-label", name); th.setAttribute("aria-valuemin", String(s.min)); th.setAttribute("aria-valuemax", String(s.max)); var set = function(v){ v = Math.round((clampN(v, s.min, s.max) - s.min) / stp) * stp + s.min; val = Number(clampN(v, s.min, s.max).toFixed(6)); cur.sval = val; s.set(val); th.setAttribute("aria-valuenow", String(val)); th.setAttribute("aria-valuetext", val + str(t.unit)); }; set(val); var good = function(){ return Math.abs(val - target) <= tol + 1e-9; }; var fromX = function(e){ var r = s.w.getBoundingClientRect(); set(s.min + (e.clientX - r.left) / (r.width || 1) * (s.max - s.min)); }; var drag = false; s.w.addEventListener("pointerdown", function(e){ if (cur.done) { return; } drag = true; try { s.w.setPointerCapture(e.pointerId); } catch (x) {} fromX(e); e.preventDefault(); }); s.w.addEventListener("pointermove", function(e){ if (drag) { fromX(e); } }); var end = function(e){ if (!drag) { return; } drag = false; noClickUntil = Date.now() + 350; if (good()) { ok(pt(e)); } else { miss(pt(e), "That is not the right value."); } }; s.w.addEventListener("pointerup", end); s.w.addEventListener("pointercancel", function(){ drag = false; }); th.addEventListener("keydown", function(e){ var d = 0; if (e.key === "ArrowRight" || e.key === "ArrowUp") { d = stp; } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") { d = -stp; } else if (e.key === "Home") { d = s.min - val; } else if (e.key === "End") { d = s.max - val; } else if (e.key === "Enter") { e.preventDefault(); if (good()) { ok(ctr(t)); } else { miss(null, "That is not the right value."); } return; } else { return; } e.preventDefault(); set(val + d); cancel(deb); var k = tok; if (good()) { deb = later(function(){ if (k === tok && cur && !cur.done && good()) { ok(ctr(t)); } }, 900); } }); cur.focus = th; } function buildDrag(t, name){ var db = dropBox(t), src = mkHot(t, name + ". Press Enter to pick it up.", "dsrc"), dst = mkHot(db, "Drop target. Press Enter to drop here.", "ddst"); dst.tabIndex = -1; cur.focus = src; var g = null, hole = null, s0 = null, moved = false; var reset = function(){ if (g && g.parentNode) { g.parentNode.removeChild(g); } if (hole && hole.parentNode) { hole.parentNode.removeChild(hole); } g = null; hole = null; s0 = null; }; src.addEventListener("pointerdown", function(e){ if (cur.done || (e.button != null && e.button > 0)) { return; } e.preventDefault(); try { src.setPointerCapture(e.pointerId); } catch (x) {} s0 = pt(e); moved = false; hole = mkHole(tmp, t); g = mkCrop(t); g.classList.add("ghost"); tmp.appendChild(g); }); src.addEventListener("pointermove", function(e){ if (!s0 || !g) { return; } var p = pt(e); if (Math.abs(p.x - s0.x) + Math.abs(p.y - s0.y) > 0.8) { moved = true; } g.style.left = (Number(t.x) + p.x - s0.x) + "%"; g.style.top = (Number(t.y) + p.y - s0.y) + "%"; }); var end = function(e){ if (!s0) { return; } var p = pt(e), gc = { x:Number(t.x) + p.x - s0.x + t.w / 2, y:Number(t.y) + p.y - s0.y + t.h / 2 }; noClickUntil = Date.now() + 350; if (moved && (inBox(p, db, 1) || inBox(gc, db, 1))) { reset(); ok(p); } else if (moved) { reset(); miss(p, "Drop it on the right spot."); } else { reset(); tip("Drag it to its new spot."); } }; src.addEventListener("pointerup", end); src.addEventListener("pointercancel", function(){ reset(); }); kb(src, function(){ cur.picked = true; dst.tabIndex = 0; showHL(); try { dst.focus({ preventScroll:true }); } catch (e) {} announce("Picked up. Press Enter to drop it on the target, or Escape to cancel."); }); kb(dst, function(){ if (cur.picked) { ok(ctr(db)); } }); dst.addEventListener("keydown", function(e){ if (e.key === "Escape") { cur.picked = false; dst.tabIndex = -1; src.focus(); announce("Cancelled."); } }); } /* ---------- pointer and key dispatch ---------- */ function handlePoint(p, tg){ if (!cur || cur.done || dlgOpen || mode === "show") { return; } var t = cur.t; if (t.type === "type") { if (tg && tg === cur.inp) { return; } commitType(p, function(){ handlePoint(p, null); }); return; } if (cur.open) { closeOpen(); return; } var inside = boxOk(t) && t.type !== "key" && t.type !== "note" && inBox(p, t, 0.3); switch (t.type) { case "click": case "check": case "hover": if (inside) { ok(p); return; } break; case "dblclick": if (inside) { var n = Date.now(); if (n - cur.last < 520) { ok(p); return; } cur.last = n; ripple(p, "n"); var k = tok; later(function(){ if (k === tok && cur && !cur.done) { tip("Double-click it."); } }, 560); return; } break; case "rightclick": if (inside) { ripple(p, "n"); tip(coarse ? "Press and hold it." : "Use the right mouse button."); return; } break; case "select": case "date": if (inside) { ripple(p, "n"); openWidget(false); return; } break; case "slider": if (inside) { return; } break; case "drag": if (inside) { return; } break; case "note": return; } var a = hitAlt(p); if (a) { altHit(a, p); return; } miss(p, t.type === "key" ? "Use the keyboard for this step." : null); } function onClick(e){ if (Date.now() < noClickUntil) { return; } var tg = e.target; if (tg && tg.closest && (tg.closest(".ddl") || tg.closest(".cal") || tg.closest(".sl"))) { return; } if (e.detail === 0 && tg && tg.classList && tg.classList.contains("hot")) { return; } handlePoint(pt(e), tg); } function onCtx(e){ if (mode === "show" || !cur || cur.done || dlgOpen || cur.t.type !== "rightclick") { return; } e.preventDefault(); var p = pt(e); noClickUntil = Date.now() + 350; if (inBox(p, cur.t, 0.3)) { ok(p); } else { miss(p); } } function onDown(e){ if (mode === "show" || !cur || cur.done || dlgOpen) { return; } if (cur.t.type === "rightclick" && e.pointerType === "touch") { var p = pt(e), k = tok; if (inBox(p, cur.t, 0.3)) { cur.lp = later(function(){ if (k === tok && cur && !cur.done) { noClickUntil = Date.now() + 600; ok(p); } }, 560); } } } function onUp(){ if (cur && cur.lp) { cancel(cur.lp); cur.lp = null; } } function onMove(e){ if (mode === "show" || !cur || cur.done || dlgOpen) { return; } if (cur.lp && e.pointerType === "touch") { return; } if (cur.t.type !== "hover" || e.pointerType === "touch") { return; } var p = pt(e), k = tok; if (inBox(p, cur.t)) { if (!cur.hv) { cur.hv = later(function(){ if (k === tok && cur && !cur.done) { ok(p); } }, 480); } } else if (cur.hv) { cancel(cur.hv); cur.hv = null; } } function parseCombo(s){ var parts = str(s).split("+").map(function(x){ return x.trim().toLowerCase(); }).filter(function(x){ return x !== ""; }); if (/\+\s*$/.test(str(s)) && str(s).trim() !== "+") { parts.push("+"); } var o = { ctrl:false, alt:false, shift:false, key:"" }; var MAP = { esc:"escape", "return":"enter", del:"delete", space:" ", spacebar:" ", up:"arrowup", down:"arrowdown", left:"arrowleft", right:"arrowright", ins:"insert", pgup:"pageup", pgdn:"pagedown" }; parts.forEach(function(x){ if (x === "ctrl" || x === "control" || x === "cmd" || x === "command" || x === "meta") { o.ctrl = true; } else if (x === "alt" || x === "option") { o.alt = true; } else if (x === "shift") { o.shift = true; } else { o.key = MAP[x] || x; } }); return o; } function onKey(e){ if (!running || mode === "show" || !cur || cur.done || dlgOpen || cur.t.type !== "key") { return; } var cb = parseCombo(cur.t.combo), k = str(e.key).toLowerCase(); if (k === "spacebar") { k = " "; } var mod = e.ctrlKey || e.metaKey; if (k === cb.key && cb.ctrl === !!mod && cb.alt === !!e.altKey && (cb.shift ? e.shiftKey : (!(cb.ctrl || cb.alt) || !e.shiftKey))) { e.preventDefault(); ok(boxOk(cur.t) ? ctr(cur.t) : null); return; } if (["shift","control","alt","meta","tab","capslock","arrowup","arrowdown","arrowleft","arrowright","pageup","pagedown","home","end"].indexOf(k) >= 0) { return; } var tg = e.target; if (tg && tg.tagName === "BUTTON" && (k === "enter" || k === " ")) { return; } if (mod || e.altKey || !(cb.ctrl || cb.alt)) { miss(null, "That is not the right key."); } } /* ---------- Show Me playback ---------- */ function moveCur(p, cb, dur){ curEl.hidden = false; var d = animate ? (dur || 780) * sp : 0; curEl.style.transitionDuration = d + "ms"; void curEl.offsetWidth; curEl.style.left = p.x + "%"; curEl.style.top = p.y + "%"; later(cb, d + (animate ? 120 : 0)); } function pctOf(node){ var r = node.getBoundingClientRect(), c0 = cv.getBoundingClientRect(); return { x:(r.left + r.width / 2 - c0.left) / (c0.width || 1) * 100, y:(r.top + r.height / 2 - c0.top) / (c0.height || 1) * 100 }; } function demo(){ var t = cur.t, k = tok, manual = S.autoNext === false || reduce; var words = richPlain(instrOf(t)).split(/\s+/).length, read = Math.max(1500, words * 330) * (animate ? sp : 1); var alive = function(){ return k === tok && running; }; var next = function(){ if (!alive()) { return; } cur.done = true; persist(t); while (tmp.firstChild) { tmp.removeChild(tmp.firstChild); } var go = function(){ if (alive()) { advance(t.goto); } }; var fin = function(){ if (!alive()) { return; } if (t.after && t.after.on && (has(richPlain(t.after.text)) || has(t.after.title))) { dialog(t.after, "info", go, manual ? 0 : Math.max(1800, richPlain(t.after.text).split(/\s+/).length * 330)); } else { go(); } }; if (t.auto) { if (si === SCREENS.length - 1) { later(fin, 900); } else { later(fin, 1400); } return; } if (manual) { var row = el("div", "prow"), nb = actBtn("Next", false, fin); row.appendChild(nb); pop.appendChild(row); placePop(); try { nb.focus({ preventScroll:true }); } catch (e) {} } else { later(fin, read); } }; if (t.type === "note" || t.type === "key" || !boxOk(t)) { if (t.type === "key") { var kc = el("p", "kcap"); kc.appendChild(el("span", "kbd", str(t.combo))); pop.insertBefore(kc, pop.querySelector(".fb")); placePop(); } next(); return; } showHL(); later(function(){ if (!alive()) { return; } moveCur(ctr(t), function(){ if (!alive()) { return; } ripple(ctr(t)); play("ok"); if (t.type === "type") { var val = has(t.answer) ? str(t.answer) : (has(t.sample) ? str(t.sample) : "Sample text"), shown = t.kind === "password" ? val.replace(/./g, "•") : val; var m = mkTxt(tmp, t, "", t.kind === "area"), sp2 = m.querySelector(".mkv"), i = 0; m.classList.add("typing"); cur.val = val; (function ty(){ if (!alive()) { return; } if (i >= shown.length || !animate) { sp2.textContent = shown; later(next, 300); return; } i++; sp2.textContent = shown.slice(0, i); later(ty, Math.min(110, 1600 / shown.length) * sp); })(); } else if (t.type === "select" || t.type === "date") { later(function(){ if (!alive()) { return; } var l = openWidget(false, true), tg = l.querySelector("[data-c]"); if (!tg) { next(); return; } later(function(){ if (!alive()) { return; } moveCur(pctOf(tg), function(){ if (!alive()) { return; } tg.classList.add("hit"); ripple(pctOf(tg)); later(function(){ closeOpen(); next(); }, 380); }, 560); }, 450 * sp); }, 250); } else if (t.type === "slider") { var s = sliderDom(tmp, t, num(t.start, num(t.min, 0)), false); s.w.classList.add("auto"); cur.sval = num(t.value, 0); later(function(){ if (!alive()) { return; } s.set(num(t.value, 0)); var f = (clampN(num(t.value, 0), s.min, s.max) - s.min) / (s.max - s.min); moveCur({ x:Number(t.x) + t.w * f, y:Number(t.y) + t.h / 2 }, next, 700); }, 200); } else if (t.type === "drag") { mkHole(tmp, t); var g = mkCrop(t); g.classList.add("ghost", "auto"); tmp.appendChild(g); var at = dropAt(t); later(function(){ if (!alive()) { return; } g.style.transitionDuration = (animate ? 900 * sp : 0) + "ms"; g.style.left = at.x + "%"; g.style.top = at.y + "%"; moveCur(ctr(dropBox(t)), next, 900); }, 200); } else if (t.type === "check") { mkCheck(tmp, t); later(next, 200); } else { later(next, 150); } }); }, animate ? 350 * sp : 0); } /* ---------- go ---------- */ setVars(); build(); document.addEventListener("keydown", onKey); var rz = null; window.addEventListener("resize", function(){ clearTimeout(rz); rz = setTimeout(function(){ if (sim && cur) { layoutZoom(true); placePop(); } }, 180); }); })();