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, IPUBImage,
IPUBInteraction, IPUBInteraction,
IPUBSoundtrack, IPUBSoundtrack,
IPUBTrack,
IPUBTrackItem,
IPUBTrackItemPosition,
]) { ]) {
console.info(`IPUBBody: Defining custom element <${e.elementName}>`); console.info(`IPUBBody: Defining custom element <${e.elementName}>`);
globalThis.customElements.define(e.elementName, e); 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 { class IPUBAudio extends IPUBElement {
static elementName = "ipub-audio"; static elementName = "ipub-audio";

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

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

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

@@ -28,6 +28,38 @@
outline-style: solid; 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-cover > dialog[open] {
--ipub-accent-color: #fff; --ipub-accent-color: #fff;
z-index: var(--z-cover); z-index: var(--z-cover);