capytal/comicverse
1
0
Fork 0
Code Issues Pull Requests Activity

feat(ipub): debug attribute and overlay

Browse Source
This commit is contained in:
Guz
2025-11-04 18:40:00 -03:00
parent c90bff53a3
commit f76be67247
3 changed files with 101 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
.epub/example/OEBPS/scripts/ipub.js
View File

@@ -1,14 +1,29 @@
"use strict"; "use strict";
class IPUBElement extends HTMLElement { class IPUBElement extends HTMLElement {
static observedAttributes = ["id"]; /**
* @protected
* @type {Readonly<string[]>}
*/
static observedAttributes = ["id", "debug"];
connectedCallback() { connectedCallback() {
this.#ensureID(); this.#ensureID();
} }
attributeChangedCallback(_name, _oldValue, _newValue) { attributeChangedCallback(name, _oldValue, _newValue) {
this.#ensureID(); switch (name) {
case "id":
this.#ensureID();
break;
case "debug":
if (this.hasAttribute("debug")) {
this.setDebug(true);
} else {
this.setDebug(false);
}
break;
}
} }
/** /**
@@ -20,6 +35,53 @@ class IPUBElement extends HTMLElement {
} }
} }
/**
* @returns {boolean}
*/
getDebug() {
return this.hasAttribute("debug");
}
/**
* @param {boolean} state
*/
setDebug(state) {
if (state) {
if (!this.hasAttribute("debug")) {
this.setAttribute("debug", "true");
}
if (!this.style.getPropertyValue(IPUBElement.#PROPERTY_DEBUG_COLOR)) {
this.style.setProperty(
IPUBElement.#PROPERTY_DEBUG_COLOR,
`#${hashFromHTML(this)}`,
);
}
} else {
if (!state && this.hasAttribute("debug")) {
this.removeAttribute("debug");
}
if (
!state &&
this.style.getPropertyValue(IPUBElement.#PROPERTY_DEBUG_COLOR)
) {
this.style.removeProperty(IPUBElement.#PROPERTY_DEBUG_COLOR);
}
}
getAllDescendants(this)
.filter((el) => el.tagName.startsWith("ipub-"))
.forEach((el) => {
el.setDebug?.(state);
});
}
/**
* @private
* @type {Readonly<string>}
*/
static #PROPERTY_DEBUG_COLOR = "--ipub-debug-color";
} }
globalThis.addEventListener("load", () => { globalThis.addEventListener("load", () => {
@@ -75,6 +137,12 @@ class IPUBBody extends IPUBElement {
globalThis.customElements.define(e.elementName, e); globalThis.customElements.define(e.elementName, e);
} }
if (this.getDebug()) {
// HACK: Re-trigger IPUBElement debugging logic
console.debug("IPUBBody: triggeing debugger");
this.setAttribute("debug", "true");
}
}
} }
class IPUBCover extends IPUBElement { class IPUBCover extends IPUBElement {
@@ -590,6 +658,20 @@ function getAncestor(el, tagName) {
return getAncestor(el.parentElement, tagName); return getAncestor(el.parentElement, tagName);
} }
/**
* @param {Element} el
* @returns {Element[]}
*/
function getAllDescendants(el) {
return Array.from(el.children).reduce(
(acc, current) => {
acc.push(current);
return acc.concat(getAllDescendants(current));
},
/** @type {Element[]} */ [],
);
}
/** /**
* @param {Readonly<Element>} el * @param {Readonly<Element>} el
* @param {number} [length=6] * @param {number} [length=6]

2
.epub/example/OEBPS/sections/section0001.xhtml
View File

@@ -11,7 +11,7 @@
</script> </script>
</head> </head>
<body xmlns:epub="http://www.idpf.org/2007/ops" class="body"> <body xmlns:epub="http://www.idpf.org/2007/ops" class="body">
<ipub-body style="--ipub-padding: 10%;"> <ipub-body style="--ipub-padding: 10%;" debug="">
<ipub-cover> <ipub-cover>
<dialog> <dialog>
<header> <header>

15
.epub/example/OEBPS/styles/stylesheet.css
View File

@@ -12,7 +12,22 @@
overflow: clip; overflow: clip;
display: flex; display: flex;
:root {
--z-controls: 10;
--z-cover: 9; --z-cover: 9;
--z-overlays: 6;
}
[debug] {
--ipub-debug-bg-opacity: 30%;
background-color: rgba(
from var(--ipub-debug-color) r g b / var(--ipub-debug-bg-opacity, 30%)
);
outline-color: var(--ipub-debug-color);
outline-width: 1px;
outline-style: solid;
}
ipub-cover > dialog[open] { ipub-cover > dialog[open] {
--ipub-accent-color: #fff; --ipub-accent-color: #fff;
z-index: var(--z-cover); z-index: var(--z-cover);