fc05cfe4c7
- Every form factor supports ?embed=1: a head flag (set on <html>, no flash) strips the site chrome (base.css [data-embed]) + page-specific panels, leaving just the widget, and posts its height so the host can auto-size it. - Config/settings string preloads via the existing #p=/#sl= hash. Added that hash handling to micro.html (it previously only loaded built-in tracks). - New embed.js loader: <div data-varasys-metronome="micro" data-patch="…"> + one <script> → an auto-sizing iframe to <page>?embed=1#p=…. New embed.html documents it and dogfoods a live embedded widget. - "Embed" nav link added across pages; build.sh/deploy.sh build embed.html and serve embed.js. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
54 lines
2.5 KiB
JavaScript
54 lines
2.5 KiB
JavaScript
/* VARASYS PolyMeter — embed loader (zero-dependency, ~1 KB).
|
||
*
|
||
* Drop a placeholder + this script into any page:
|
||
* <div data-varasys-metronome="micro" data-patch="v1;t120;kick:4;snare:4=.X.X"></div>
|
||
* <script src="https://metronome.varasys.io/embed.js"></script>
|
||
*
|
||
* Attributes:
|
||
* data-varasys-metronome editor | initial | stage | micro (which form factor)
|
||
* data-patch a PolyMeter program/settings string (preloads it)
|
||
* data-setlist a base64url set-list code (alternative to data-patch)
|
||
* data-width / data-height iframe size (default 100% × 300; height auto-grows)
|
||
*
|
||
* Each placeholder becomes an <iframe src=".../<page>?embed=1#p=<patch>"> (the page's
|
||
* own ?embed=1 mode strips the site chrome) and auto-resizes to the widget's content.
|
||
*/
|
||
(function () {
|
||
var PAGES = { editor: "index.html", initial: "player.html", stage: "stage.html", micro: "micro.html" };
|
||
var me = document.currentScript;
|
||
var ORIGIN = me ? me.src.replace(/\/embed\.js(\?.*)?$/, "") : location.origin;
|
||
|
||
function build(el) {
|
||
var v = (el.getAttribute("data-varasys-metronome") || "micro").toLowerCase();
|
||
var page = PAGES[v] || "micro.html";
|
||
var patch = el.getAttribute("data-patch");
|
||
var sl = el.getAttribute("data-setlist");
|
||
var hash = patch ? "#p=" + encodeURIComponent(patch)
|
||
: sl ? "#sl=" + encodeURIComponent(sl) : "";
|
||
var f = document.createElement("iframe");
|
||
f.src = ORIGIN + "/" + page + "?embed=1" + hash;
|
||
f.title = "VARASYS PolyMeter — " + v;
|
||
f.loading = "lazy";
|
||
f.setAttribute("allow", "autoplay");
|
||
f.setAttribute("data-vmeter", v);
|
||
f.style.cssText = "border:0;display:block;max-width:100%;width:" +
|
||
(el.getAttribute("data-width") || "100%") + ";height:" +
|
||
(el.getAttribute("data-height") || "300") + "px";
|
||
(el.replaceWith ? el.replaceWith(f) : el.parentNode.replaceChild(f, el));
|
||
}
|
||
|
||
function init() {
|
||
var els = document.querySelectorAll("[data-varasys-metronome]");
|
||
for (var i = 0; i < els.length; i++) build(els[i]);
|
||
}
|
||
|
||
// auto-resize: the widget posts { type:'varasys-h', h } on load/resize
|
||
window.addEventListener("message", function (e) {
|
||
if (!e.data || e.data.type !== "varasys-h" || typeof e.data.h !== "number") return;
|
||
var f = document.querySelectorAll("iframe[data-vmeter]");
|
||
for (var i = 0; i < f.length; i++) if (f[i].contentWindow === e.source) f[i].style.height = e.data.h + "px";
|
||
});
|
||
|
||
if (document.readyState !== "loading") init();
|
||
else document.addEventListener("DOMContentLoaded", init);
|
||
})();
|