add debug arg to ppty
This commit is contained in:
parent
44bff3affd
commit
ce335eb915
2 changed files with 31 additions and 21 deletions
|
|
@ -3,7 +3,25 @@ import { PPTY } from "./ppty/lib.js";
|
||||||
|
|
||||||
main();
|
main();
|
||||||
|
|
||||||
function endBoot(root) {
|
function showMain(debug) {
|
||||||
|
document
|
||||||
|
.querySelector("main")
|
||||||
|
.animate(
|
||||||
|
[
|
||||||
|
{ visibility: "visible" },
|
||||||
|
{ visibility: "visible", opacity: 1 }
|
||||||
|
],
|
||||||
|
{
|
||||||
|
duration: 400 * !debug,
|
||||||
|
fill: "forwards",
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function endBoot(root, debug) {
|
||||||
|
if (root == null)
|
||||||
|
return showMain();
|
||||||
|
|
||||||
const style = getComputedStyle(root);
|
const style = getComputedStyle(root);
|
||||||
const paddingLeft = parseFloat(style.paddingLeft);
|
const paddingLeft = parseFloat(style.paddingLeft);
|
||||||
const paddingRight = parseFloat(style.paddingRight);
|
const paddingRight = parseFloat(style.paddingRight);
|
||||||
|
|
@ -18,26 +36,15 @@ function endBoot(root) {
|
||||||
const fade = root.animate(
|
const fade = root.animate(
|
||||||
[{ opacity: 0 }],
|
[{ opacity: 0 }],
|
||||||
{
|
{
|
||||||
duration: 400,
|
duration: 400 * !debug,
|
||||||
delay: 3000,
|
delay: 3000 * !debug,
|
||||||
fill: "forwards",
|
fill: "forwards",
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
fade.onfinish = () => {
|
fade.onfinish = () => {
|
||||||
root.remove();
|
root.remove();
|
||||||
document
|
showMain();
|
||||||
.querySelector("main")
|
|
||||||
.animate(
|
|
||||||
[
|
|
||||||
{ visibility: "visible" },
|
|
||||||
{ visibility: "visible", opacity: 1 }
|
|
||||||
],
|
|
||||||
{
|
|
||||||
duration: 400,
|
|
||||||
fill: "forwards",
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -62,7 +69,7 @@ function main() {
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
.onfinish(endBoot)
|
.onfinish(endBoot)
|
||||||
.run();
|
.run(false);
|
||||||
|
|
||||||
const canvas = document.querySelector("#bg-canvas");
|
const canvas = document.querySelector("#bg-canvas");
|
||||||
canvas.setAttribute('width', window.innerWidth);
|
canvas.setAttribute('width', window.innerWidth);
|
||||||
|
|
|
||||||
|
|
@ -8,8 +8,8 @@ function animDelta(anim) {
|
||||||
class PPTY {
|
class PPTY {
|
||||||
#root;
|
#root;
|
||||||
#blockOptions;
|
#blockOptions;
|
||||||
#startCallback = _ => { };
|
#startCallback = (root, debug) => { };
|
||||||
#finishCallback = _ => { };
|
#finishCallback = (root, debug) => { };
|
||||||
|
|
||||||
constructor(root, blockOptions) {
|
constructor(root, blockOptions) {
|
||||||
this.#root = root;
|
this.#root = root;
|
||||||
|
|
@ -26,10 +26,13 @@ class PPTY {
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
run() {
|
run(debug = false) {
|
||||||
var delay = 0;
|
var delay = 0;
|
||||||
|
|
||||||
this.#startCallback(this.#root);
|
this.#startCallback(this.#root, debug);
|
||||||
|
|
||||||
|
if (debug)
|
||||||
|
return this.#finishCallback(this.#root, debug);
|
||||||
|
|
||||||
this.#root
|
this.#root
|
||||||
.querySelectorAll(".ppty-block")
|
.querySelectorAll(".ppty-block")
|
||||||
|
|
@ -120,7 +123,7 @@ class PPTY {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
command.style.borderRightColor = "transparent";
|
command.style.borderRightColor = "transparent";
|
||||||
if (index == blocks.length - 1)
|
if (index == blocks.length - 1)
|
||||||
this.#finishCallback(this.#root);
|
this.#finishCallback(this.#root, debug);
|
||||||
}, delay);
|
}, delay);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue