diff --git a/.epub/example/OEBPS/scripts/ipub.js b/.epub/example/OEBPS/scripts/ipub.js
index 7dbe184..b0639ea 100644
--- a/.epub/example/OEBPS/scripts/ipub.js
+++ b/.epub/example/OEBPS/scripts/ipub.js
@@ -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 {
);
})();
+ connectedCallback() {
+ super.connectedCallback();
+
+ const image = this.querySelector("img");
+ if (!image) {
+ console.error("IPUBBackground: missing ![]()
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 === "fade") {
- const image = this.querySelector("img");
- if (image) {
- console.debug(`IPUBBackground: ipub-background#${this.id} to observer`);
+ if (name !== "nofade") {
+ return;
+ }
- if (this.hasAttribute("fade")) {
- IPUBBackground.#observer.observe(image);
- } else {
- IPUBBackground.#observer.unobserve(image);
- }
+ const image = this.querySelector("img");
+ if (!image) {
+ console.error("IPUBBackground: missing ![]()
element inside background");
+ return;
+ }
- const perc = getPercentageInView(image);
- if (perc > 0) {
- this.fade(perc);
- }
- }
+ // 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);
}
}
diff --git a/.epub/example/OEBPS/sections/section0001.xhtml b/.epub/example/OEBPS/sections/section0001.xhtml
index e6358d7..73bcebc 100644
--- a/.epub/example/OEBPS/sections/section0001.xhtml
+++ b/.epub/example/OEBPS/sections/section0001.xhtml
@@ -11,7 +11,7 @@
-
+
@@ -43,7 +43,7 @@
-
+
@@ -58,7 +58,7 @@
-
+
