q-import { dist/q-components/q-animation.qhtml }
q-component script-action-target {
q-property panelLeft: "0px"
q-property content: "original"
q-bind-css { this.component.panelLeft this.component.querySelector(".target-panel").style.left }
div.target-panel {
style { position: relative; left: 0px; width: 160px; height: 58px; display: grid; place-items: center; background: #1f7a8c; color: #ffffff; font-weight: 800; }
text { original }
}
function setDivContent(value) {
var text = String(value == null ? "" : value);
this.component.content = text;
this.component.querySelector(".target-panel").textContent = text;
document.body.setAttribute("data-content", text);
}
}
q-component script-action-stage {
q-property cycles: 0
section {
style { min-height: 100vh; padding: 1.5rem; box-sizing: border-box; display: grid; gap: 1rem; align-content: start; }
h1 { text { q-script-action } }
script-action-target targetBox {
id: "targetBox"
}
}
q-sequential-animation flow {
running: true
q-property-animation {
target: "#targetBox.panelLeft"
duration: 1800
steps: 90
repeat: 1
from: "0px"
to: "640px"
}
q-script-action {
document.querySelector("#targetBox").setDivContent("expanded");
document.body.setAttribute("data-far-left", document.querySelector("#targetBox").panelLeft);
document.body.setAttribute("data-seq", "expanded");
}
q-property-animation {
target: "#targetBox.panelLeft"
duration: 1800
steps: 90
repeat: 1
from: "640px"
to: "0px"
}
q-script-action {
document.querySelector("#targetBox").setDivContent("original");
document.body.setAttribute("data-home-left", document.querySelector("#targetBox").panelLeft);
document.body.setAttribute("data-seq", document.body.getAttribute("data-seq") + ",original");
}
q-script-action {
var stage = this.closest("script-action-stage");
stage.cycles = Number(stage.cycles || 0) + 1;
document.body.setAttribute("data-cycles", String(stage.cycles));
this.restart();
}
}
}
script-action-stage stage { }