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

feat(ipub): make sticky and fade backgrounds the default

Browse Source
This commit is contained in:
Guz
2025-10-17 19:10:57 -03:00
parent ba7ca52ed2
commit d775301567
2 changed files with 44 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -38,9 +38,7 @@ class IPUBElement extends HTMLElement {
class IPUBBackground extends IPUBElement { class IPUBBackground extends IPUBElement {
static elementName = "ipub-background"; static elementName = "ipub-background";
static observedAttributes = ["sticky", "fade"].concat( static observedAttributes = ["nofade"].concat(super.observedAttributes);
super.observedAttributes,
);
/** /**
* @private * @private
@@ -89,25 +87,51 @@ class IPUBBackground extends IPUBElement {
); );
})(); })();
connectedCallback() {
super.connectedCallback();
const image = this.querySelector("img");
if (!image) {
console.error("IPUBBackground: missing <img> element inside background");
return;
}
// INFO: We don't need to fade the first background
if (this.matches(":first-of-type") || this.hasAttribute("nofade")) {
IPUBBackground.#observer.unobserve(image);
return;
}
IPUBBackground.#observer.observe(image);
const perc = getPercentageInView(image);
if (perc > 0) {
this.fade(perc);
}
}
attributeChangedCallback(name, _oldValue, _newValue) { attributeChangedCallback(name, _oldValue, _newValue) {
super.attributeChangedCallback(); super.attributeChangedCallback();
if (name === "fade") { if (name !== "nofade") {
const image = this.querySelector("img"); return;
if (image) { }
console.debug(`IPUBBackground: ipub-background#${this.id} to observer`);
if (this.hasAttribute("fade")) { const image = this.querySelector("img");
IPUBBackground.#observer.observe(image); if (!image) {
} else { console.error("IPUBBackground: missing <img> element inside background");
IPUBBackground.#observer.unobserve(image); return;
} }
const perc = getPercentageInView(image); // INFO: We don't need to fade the first background
if (perc > 0) { if (this.matches(":first-of-type") || this.hasAttribute("nofade")) {
this.fade(perc); IPUBBackground.#observer.unobserve(image);
} return;
} }
IPUBBackground.#observer.observe(image);
const perc = getPercentageInView(image);
if (perc > 0) {
this.fade(perc);
} }
} }

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

@@ -11,7 +11,7 @@
<body xmlns:epub="http://www.idpf.org/2007/ops" class="body"> <body xmlns:epub="http://www.idpf.org/2007/ops" class="body">
<ipub-content style="--ipub-padding: 10%;"> <ipub-content style="--ipub-padding: 10%;">
<main> <main>
<ipub-background id="background0001" sticky=""> <ipub-background id="background0001">
<img src="../images/background0001.jpg" width="100" height="100" /> <img src="../images/background0001.jpg" width="100" height="100" />
</ipub-background> </ipub-background>
<ipub-image> <ipub-image>
@@ -43,7 +43,7 @@
<source src="../audios/audio0001.wav.disable" /> <source src="../audios/audio0001.wav.disable" />
</audio> </audio>
</section> </section>
<ipub-background sticky="" fade="" id="background0002"> <ipub-background id="background0002">
<picture> <picture>
<img src="../images/background0002.jpg" /> <img src="../images/background0002.jpg" />
</picture> </picture>
@@ -58,7 +58,7 @@
<img src="../images/image0004.png" /> <img src="../images/image0004.png" />
</span> </span>
</section> </section>
<ipub-background sticky="" fade="" id="background0003"> <ipub-background id="background0003">
<picture> <picture>
<img src="../images/background0003.jpg" /> <img src="../images/background0003.jpg" />
</picture> </picture>