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

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

@@ -38,9 +38,7 @@ class IPUBElement extends HTMLElement {
class IPUBBackground extends IPUBElement {
static elementName = "ipub-background";
static observedAttributes = ["sticky", "fade"].concat(
super.observedAttributes,
);
static observedAttributes = ["nofade"].concat(super.observedAttributes);
/**
* @private
@@ -89,25 +87,51 @@ class IPUBBackground extends IPUBElement {
);
})();
attributeChangedCallback(name, _oldValue, _newValue) {
super.attributeChangedCallback();
connectedCallback() {
super.connectedCallback();
if (name === "fade") {
const image = this.querySelector("img");
if (image) {
console.debug(`IPUBBackground: ipub-background#${this.id} to observer`);
if (this.hasAttribute("fade")) {
IPUBBackground.#observer.observe(image);
} else {
IPUBBackground.#observer.unobserve(image);
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) {
super.attributeChangedCallback();
if (name !== "nofade") {
return;
}
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);
}
}

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

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