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

feat(ipub): ipub-image element

Browse Source
This commit is contained in:
Guz
2025-10-17 15:36:39 -03:00
parent d556b0eefe
commit 11456db9c4
3 changed files with 18 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -126,10 +126,14 @@ class IPUBContent extends HTMLElement {
static elementName = "ipub-content"; static elementName = "ipub-content";
} }
class IPUBImage extends HTMLElement {
static elementName = "ipub-image";
}
globalThis.addEventListener("load", () => { globalThis.addEventListener("load", () => {
console.info("IPUB: STARTING DEFINITIONS"); console.info("IPUB: STARTING DEFINITIONS");
[IPUBBackground, IPUBContent].forEach((e) => { [IPUBBackground, IPUBContent, IPUBImage].forEach((e) => {
console.info(`IPUB: Defining custom element <${e.elementName}>`); console.info(`IPUB: Defining custom element <${e.elementName}>`);
globalThis.customElements.define(e.elementName, e); globalThis.customElements.define(e.elementName, e);
}); });

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

@@ -14,7 +14,9 @@
<ipub-background id="background0001" sticky=""> <ipub-background id="background0001" sticky="">
<img src="../images/background0001.jpg" width="100" height="100" /> <img src="../images/background0001.jpg" width="100" height="100" />
</ipub-background> </ipub-background>
<ipub-image>
<img src="../images/image0001.png" /> <img src="../images/image0001.png" />
</ipub-image>
<section data-ipub-element="page" id="page01"> <section data-ipub-element="page" id="page01">
<span data-ipub-element="image"> <span data-ipub-element="image">
<img src="../images/image0001.png" /> <img src="../images/image0001.png" />

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

@@ -96,7 +96,18 @@ ipub-background {
} }
} }
ipub-image {
position: relative; position: relative;
display: block;
flex-direction: column;
width: var(--ipub-width, unset);
height: var(--ipub-height, unset);
img {
max-width: 100%;
max-height: 100%;
}
} }
[data-ipub-element="image"] { [data-ipub-element="image"] {