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

feat(ipub): ipub-content element

Browse Source
This commit is contained in:
Guz
2025-10-17 15:35:18 -03:00
parent 007de6b9f1
commit d556b0eefe
3 changed files with 150 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -122,10 +122,19 @@ class IPUBBackground extends HTMLElement {
} }
} }
globalThis.addEventListener("load", () => { class IPUBContent extends HTMLElement {
console.log("IPUB SCRIPT LOADED"); static elementName = "ipub-content";
}
customElements.define(IPUBBackground.elementName, IPUBBackground); globalThis.addEventListener("load", () => {
console.info("IPUB: STARTING DEFINITIONS");
[IPUBBackground, IPUBContent].forEach((e) => {
console.info(`IPUB: Defining custom element <${e.elementName}>`);
globalThis.customElements.define(e.elementName, e);
});
console.info("IPUB: FINISHED DEFINITIONS");
/** @type {Map<string, Element>} */ /** @type {Map<string, Element>} */
const onScreenMap = new Map(); const onScreenMap = new Map();

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

@@ -9,97 +9,114 @@
</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">
<main data-ipub-element="content"> <ipub-content style="--ipub-padding: 10%;">
<ipub-background id="background0001" sticky=""> <main>
<img src="../images/background0001.jpg" width="100" height="100" /> <ipub-background id="background0001" sticky="">
</ipub-background> <img src="../images/background0001.jpg" width="100" height="100" />
<section data-ipub-element="page" id="page01"> </ipub-background>
<span data-ipub-element="image">
<img src="../images/image0001.png" /> <img src="../images/image0001.png" />
</span> <section data-ipub-element="page" id="page01">
<!-- <span data-ipub-element="image">
This in the UI would be an "Point Interaction" or just "Interaction". The <img src="../images/image0001.png" />
editor can just place it on some point the page, and adjust it's size. </span>
<!--
This in the UI would be an "Point Interaction" or just "Interaction". The
editor can just place it on some point the page, and adjust it's size.
The action is "open link", this action should have a warning to the reader, The action is "open link", this action should have a warning to the reader,
to make sure they don't open malicious links. to make sure they don't open malicious links.
--> -->
<!-- <!--
The "rel" will have "nofollow", "noopener" and "noreferrer" when the link The "rel" will have "nofollow", "noopener" and "noreferrer" when the link
is to a domain different from the project's one. is to a domain different from the project's one.
--> -->
<a data-ipub-element="interaction" data-ipub-variant="point" <a data-ipub-element="interaction" data-ipub-variant="point"
style="--ipub-x:6%;--ipub-y:88.5%;--ipub-width:10%;--ipub-radius:100%;--ipub-origin-offset-x:-50%;--ipub-origin-offset-y:-50%;--ipub-ratio:1/1;" style="--ipub-x: 6%; --ipub-y: 88.5%; --ipub-width: 10%; --ipub-radius: 100%; --ipub-origin-offset-x: -50%; --ipub-origin-offset-y: -50%; --ipub-ratio: 1/1;"
id="int-httpsguzone" href="https://krita.org" target="_blank" referrerpolicy="same-origin" id="int-httpsguzone" href="https://krita.org" target="_blank"
rel="external nofollow noopener noreferrer"> referrerpolicy="same-origin" rel="external nofollow noopener noreferrer">
<!-- <!--
This would be generated if the editor doesn't specify a accessibility text,
the in quotations text would be fetched from the site's title when the link is created
if possible.
-->
Go to "Krita | Digital Paiting. Creative Freedom"</a>
<!--
This in the UI would be an "Area Interaction". The editor would first place
the first top-left point, and then the bottom-right one, to select an area/size
of the interaction.
This would be generated if the editor doesn't specify a accessibility text, The action is "go to page".
the in quotations text would be fetched from the site's title when the link is created -->
if possible. <a data-ipub-element="interaction" data-ipub-variant="area"
--> style="--ipub-x: 76%; --ipub-y: 90%; --ipub-width: 11.5%; --ipub-height: 8%;"
Go to "Krita | Digital Paiting. Creative Freedom"</a> id="int-httpsguzone" href="section0001.xhtml#page03">
<!-- <!--
This in the UI would be an "Area Interaction". The editor would first place This would be generated if the editor doesn't specify a accessibility text.
the first top-left point, and then the bottom-right one, to select an area/size The in quotations text would be the title of the page if it has one, otherwise
of the interaction. it's ID is used (RFC, we could just place the text as "Go to page", since the IDs.
may not be human-readable).
-->
Go to page "page03"</a>
<!--
TODO: Analyse if area and point interactions should be saved as the same type of element
and if the "data-ipub-variant" should be a thing. This pretty much depends on how much
we want the editor to "guess" what controls to provide the user with.
-->
</section>
<section data-ipub-element="page" id="page02">
<span data-ipub-element="image">
<img src="../images/image0002.png" />
</span>
<!--
This in the UI would be an "Area Interaction". The editor would first place
the first top-left point, and then the bottom-right one, to select an area/size
of the interaction.
The action is "go to page". The element wound not have a "action" per say, but would have a "on screen" trigger,
--> which in itself would have the action "play sound".
<a data-ipub-element="interaction" data-ipub-variant="area" -->
style="--ipub-x:76%;--ipub-y:90%;--ipub-width:11.5%;--ipub-height:8%;" id="int-httpsguzone" <audio data-ipub-element="interaction" data-ipub-trigger="on-screen" controls="true"
href="section0001.xhtml#page03"> volume="0" style="--ipub-x: 20%; --ipub-y: 25%; --ipub-width: 50%; --ipub-height: 50%;"
<!-- id="int-audio0001">
This would be generated if the editor doesn't specify a accessibility text. <source src="../audios/audio0001.wav.disable" />
The in quotations text would be the title of the page if it has one, otherwise </audio>
it's ID is used (RFC, we could just place the text as "Go to page", since the IDs. </section>
may not be human-readable). <ipub-background sticky="" fade="" id="background0002">
--> <picture>
Go to page "page03"</a> <img src="../images/background0002.jpg" />
<!-- </picture>
TODO: Analyse if area and point interactions should be saved as the same type of element </ipub-background>
and if the "data-ipub-variant" should be a thing. This pretty much depends on how much <section data-ipub-element="page" id="page03">
we want the editor to "guess" what controls to provide the user with. <span data-ipub-element="image">
--> <img src="../images/image0003.png" />
</section> </span>
<section data-ipub-element="page" id="page02"> </section>
<span data-ipub-element="image"> <section data-ipub-element="page" id="page04">
<img src="../images/image0002.png" /> <span data-ipub-element="image">
</span> <img src="../images/image0004.png" />
<!-- </span>
This in the UI would be an "Area Interaction". The editor would first place </section>
the first top-left point, and then the bottom-right one, to select an area/size <ipub-background sticky="" fade="" id="background0003">
of the interaction. <picture>
<img src="../images/background0003.jpg" />
The element wound not have a "action" per say, but would have a "on screen" trigger, </picture>
which in itself would have the action "play sound". </ipub-background>
--> <section data-ipub-element="page" id="page02">
<audio data-ipub-element="interaction" data-ipub-trigger="on-screen" controls="true" <span data-ipub-element="image">
volume="0" style="--ipub-x:20%;--ipub-y:25%;--ipub-width:50%;--ipub-height:50%;" <img src="../images/image0002.png" />
id="int-audio0001"> </span>
<source src="../audios/audio0001.wav.disable" /> </section>
</audio> <section data-ipub-element="page" id="page04">
</section> <span data-ipub-element="image">
<ipub-background sticky="" fade="" id="background0002"> <img src="../images/image0003.png" />
<picture> </span>
<img src="../images/background0002.jpg" /> </section>
</picture> <section data-ipub-element="page" id="page04">
</ipub-background> <span data-ipub-element="image">
<section data-ipub-element="page" id="page03"> <img src="../images/image0004.png" />
<span data-ipub-element="image"> </span>
<img src="../images/image0003.png" /> </section>
</span> </main>
</section> </ipub-content>
<section data-ipub-element="page" id="page04">
<span data-ipub-element="image">
<img src="../images/image0004.png" />
</span>
</section>
<section data-ipub-element="page" id="page02">
<span data-ipub-element="image">
<img src="../images/image0002.png" />
</span>
</section>
</main>
</body> </body>
</html> </html>

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

@@ -10,18 +10,41 @@
max-width: 100vw; max-width: 100vw;
} }
[data-ipub-element="content"] { ipub-content {
position: relative; --ipub-padding: 0%;
display: flex; --ipub-gap: 0%;
flex-direction: column; --ipub-padding-x: var(--ipub-padding, 0%);
align-items: center; --ipub-padding-y: var(--ipub-padding, 0%);
--ipub-padding-t: var(--ipub-padding-y, 0%);
--ipub-padding-r: var(--ipub-padding-x, 0%);
--ipub-padding-b: var(--ipub-padding-y, 0%);
--ipub-padding-l: var(--ipub-padding-x, 0%);
width: 100%; & > article,
height: 100%; & > main,
} & > section {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
[data-ipub-element="content"] > [data-ipub-element="page"] { & > *:first-child:not(ipub-background),
margin: 5% 10%; & > ipub-background:first-child + *:first-of-type {
margin-top: var(--ipub-padding-t);
}
& > *:not(ipub-background) {
margin-top: calc(var(--ipub-gap) / 2);
margin-right: var(--ipub-padding-r);
margin-left: var(--ipub-padding-l);
margin-bottom: calc(var(--ipub-gap) / 2);
}
& > *:last-child:not(ipub-background),
& > ipub-background:last-child + *:last-of-type {
margin-bottom: var(--ipub-padding-b);
}
}
} }
ipub-background { ipub-background {