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

Compare commits

merge into: capytal:main
Branches Tags
capytal:main capytal:test/ipub-track-element capytal:feat/user-handling capytal:feat/ipub-ast capytal:refactor/loreddev-x-integration capytal:prototype
...
pull from: capytal:test/ipub-track-element
Branches Tags
capytal:main capytal:test/ipub-track-element capytal:feat/user-handling capytal:feat/ipub-ast capytal:refactor/loreddev-x-integration capytal:prototype

1 Commits
main ... test/ipub-

Author SHA1 Message Date
Gustavo "Guz" L de Mello
e1734a5310 feat(ipub): ipub-track element to position elements outside of content elements 2025-11-04 18:41:49 -03:00
3 changed files with 167 additions and 86 deletions
Expand all files Collapse all files

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

@@ -132,6 +132,9 @@ class IPUBBody extends IPUBElement {
IPUBImage,
IPUBInteraction,
IPUBSoundtrack,
IPUBTrack,
IPUBTrackItem,
IPUBTrackItemPosition,
]) {
console.info(`IPUBBody: Defining custom element <${e.elementName}>`);
globalThis.customElements.define(e.elementName, e);
@@ -209,6 +212,18 @@ class IPUBCover extends IPUBElement {
}
}
class IPUBTrack extends IPUBElement {
static elementName = "ipub-track";
}
class IPUBTrackItem extends IPUBElement {
static elementName = `ipub-track-item`;
}
class IPUBTrackItemPosition extends IPUBElement {
static elementName = `ipub-track-item-position`;
}
class IPUBAudio extends IPUBElement {
static elementName = "ipub-audio";

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

@@ -24,92 +24,126 @@
</dialog>
</ipub-cover>
<main id="content">
<ipub-background id="background0001">
<img src="../images/background0001.jpg" width="100" height="100" />
</ipub-background>
<ipub-soundtrack style="--ipub-color:cyan">
<!-- TODO: Search on how to make this more accessible, more semantic as using <details> -->
<figure>
<label>
<input type="checkbox" />
<figcaption>Soundtrack 1</figcaption>
</label>
<ipub-audio>
<audio controls="true" volume="0" controlslist="nofullscreen"
disableremoteplayback="">
<source src="../audios/track1.webm" />
</audio>
</ipub-audio>
</figure>
</ipub-soundtrack>
<ipub-image>
<img src="../images/image0001.png" />
<ipub-interaction style="--ipub-y:88.5%;--ipub-x:6%" circle="">
<a href="https://krita.org" referrerpolicy="same-origin"
rel="external nofollow noopener noreferrer" target="_blank" />
</ipub-interaction>
<ipub-interaction style="--ipub-y:93.5%;--ipub-x:81.5%;--ipub-size:13%;">
<a href="https://guz.one" referrerpolicy="same-origin"
rel="external nofollow noopener noreferrer" target="_blank" />
</ipub-interaction>
</ipub-image>
<ipub-image>
<img src="../images/image0002.png" />
</ipub-image>
<ipub-soundtrack style="--ipub-color:green;">
<figure>
<label>
<input type="checkbox" />
<figcaption>Soundtrack 2</figcaption>
</label>
<ipub-audio>
<audio controls="true" volume="0" controlslist="nofullscreen"
disableremoteplayback="">
<source src="../audios/track2.webm" />
</audio>
</ipub-audio>
</figure>
</ipub-soundtrack>
<ipub-background id="background0002">
<picture>
<img src="../images/background0002.jpg" />
</picture>
</ipub-background>
<ipub-image>
<img src="../images/image0003.png" />
</ipub-image>
<ipub-image>
<img src="../images/image0004.png" />
</ipub-image>
<ipub-background id="background0003">
<picture>
<img src="../images/background0003.jpg" />
</picture>
</ipub-background>
<ipub-image>
<img src="../images/image0002.png" />
</ipub-image>
<ipub-soundtrack style="--ipub-color:yellow;">
<figure>
<label>
<input type="checkbox" />
<figcaption>Soundtrack 3</figcaption>
</label>
<ipub-audio>
<audio controls="true" volume="0" controlslist="nofullscreen"
disableremoteplayback="">
<source src="../audios/track3.webm" />
</audio>
</ipub-audio>
</figure>
</ipub-soundtrack>
<ipub-image>
<img src="../images/image0003.png" />
</ipub-image>
<ipub-image>
<img src="../images/image0004.png" />
</ipub-image>
</main>
<ipub-track>
<ipub-track-item>
<ipub-track-item-position style="--ipub-track-item-position: 0%;" />
<ipub-soundtrack style="--ipub-color: cyan">
<figure>
<label>
<input type="checkbox" />
<figcaption>Soundtrack 1</figcaption>
</label>
<ipub-audio>
<audio controls="true" volume="0" controlslist="nofullscreen"
disableremoteplayback="true">
<source src="../audios/track1.webm" />
</audio>
</ipub-audio>
</figure>
</ipub-soundtrack>
</ipub-track-item>
<ipub-track-item>
<ipub-track-item-position style="--ipub-track-item-position: 50%;" />
<ipub-soundtrack style="--ipub-color: green">
<figure>
<label>
<input type="checkbox" />
<figcaption>Soundtrack 2</figcaption>
</label>
<ipub-audio>
<audio controls="true" volume="0" controlslist="nofullscreen"
disableremoteplayback="true">
<source src="../audios/track2.webm" />
</audio>
</ipub-audio>
</figure>
</ipub-soundtrack>
</ipub-track-item>
</ipub-track>
<ipub-background id="background0001">
<img src="../images/background0001.jpg" width="100" height="100" />
</ipub-background>
<!-- <ipub-soundtrack style="==ipub-color:cyan"> -->
<!-- <!== TODO: Search on how to make this more accessible, more semantic as using <details> -->--&gt;
<!-- <figure> -->
<!-- <label> -->
<!-- <input type="checkbox" /> -->
<!-- <figcaption>Soundtrack 1</figcaption> -->
<!-- </label> -->
<!-- <ipub-audio> -->
<!-- <audio controls="true" volume="0" controlslist="nofullscreen" -->
<!-- disableremoteplayback=""> -->
<!-- <source src="../audios/track1.webm" /> -->
<!-- </audio> -->
<!-- </ipub-audio> -->
<!-- </figure> -->
<!-- </ipub-soundtrack> -->
<ipub-image>
<img src="../images/image0001.png" />
<ipub-interaction style="--ipub-y:88.5%;--ipub-x:6%" circle="">
<a href="https://krita.org" referrerpolicy="same-origin"
rel="external nofollow noopener noreferrer" target="_blank" />
</ipub-interaction>
<ipub-interaction style="--ipub-y:93.5%;--ipub-x:81.5%;--ipub-size:13%;">
<a href="https://guz.one" referrerpolicy="same-origin"
rel="external nofollow noopener noreferrer" target="_blank" />
</ipub-interaction>
</ipub-image>
<ipub-image>
<img src="../images/image0002.png" />
</ipub-image>
<!-- <ipub-soundtrack style="==ipub-color:green;"> -->
<!-- <figure> -->
<!-- <label> -->
<!-- <input type="checkbox" /> -->
<!-- <figcaption>Soundtrack 2</figcaption> -->
<!-- </label> -->
<!-- <ipub-audio> -->
<!-- <audio controls="true" volume="0" controlslist="nofullscreen" disableremoteplayback=""> -->
<!-- <source src="../audios/track2.webm" /> -->
<!-- </audio> -->
<!-- </ipub-audio> -->
<!-- </figure> -->
<!-- </ipub-soundtrack> -->
<ipub-background id="background0002">
<picture>
<img src="../images/background0002.jpg" />
</picture>
</ipub-background>
<ipub-image>
<img src="../images/image0003.png" />
</ipub-image>
<ipub-image>
<img src="../images/image0004.png" />
</ipub-image>
<ipub-background id="background0003">
<picture>
<img src="../images/background0003.jpg" />
</picture>
</ipub-background>
<ipub-image>
<img src="../images/image0002.png" />
</ipub-image>
<!-- <ipub-soundtrack style="==ipub-color:yellow;"> -->
<!-- <figure> -->
<!-- <label> -->
<!-- <input type="checkbox" /> -->
<!-- <figcaption>Soundtrack 3</figcaption> -->
<!-- </label> -->
<!-- <ipub-audio> -->
<!-- <audio controls="true" volume="0" controlslist="nofullscreen" disableremoteplayback=""> -->
<!-- <source src="../audios/track3.webm" /> -->
<!-- </audio> -->
<!-- </ipub-audio> -->
<!-- </figure> -->
<!-- </ipub-soundtrack> -->
<ipub-image>
<img src="../images/image0003.png" />
</ipub-image>
<ipub-image>
<img src="../images/image0004.png" />
</ipub-image></main>
</ipub-body>
</body>
</html>

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

@@ -28,6 +28,38 @@
outline-style: solid;
}
ipub-track {
z-index: 1000;
position: absolute;
display: inline-block;
top: 0;
left: 0;
width: 100%;
height: 100%;
ipub-track-item {
top: 0;
left: 0;
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
*:not(ipub-offset) {
position: sticky;
top: 0;
left: 0;
}
ipub-track-item-position {
width: 5rem;
display: inline-block;
height: var(--ipub-track-item-position);
}
}
}
ipub-cover > dialog[open] {
--ipub-accent-color: #fff;
z-index: var(--z-cover);