From e1734a53104a30e140623f538c2bfe77e3088798 Mon Sep 17 00:00:00 2001 From: "Gustavo \"Guz\" L de Mello" Date: Tue, 4 Nov 2025 18:41:49 -0300 Subject: [PATCH] feat(ipub): ipub-track element to position elements outside of content elements --- .epub/example/OEBPS/scripts/ipub.js | 15 ++ .../example/OEBPS/sections/section0001.xhtml | 206 ++++++++++-------- .epub/example/OEBPS/styles/stylesheet.css | 32 +++ 3 files changed, 167 insertions(+), 86 deletions(-) diff --git a/.epub/example/OEBPS/scripts/ipub.js b/.epub/example/OEBPS/scripts/ipub.js index d5d2e5b..14789c0 100644 --- a/.epub/example/OEBPS/scripts/ipub.js +++ b/.epub/example/OEBPS/scripts/ipub.js @@ -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"; diff --git a/.epub/example/OEBPS/sections/section0001.xhtml b/.epub/example/OEBPS/sections/section0001.xhtml index 7cee4eb..fadc098 100644 --- a/.epub/example/OEBPS/sections/section0001.xhtml +++ b/.epub/example/OEBPS/sections/section0001.xhtml @@ -24,92 +24,126 @@
- - - - - -
- - - - -
- - - - - - - - - - - - - - -
- - - - -
- - - - - - - - - - - - - - - - - - - - - -
- - - - -
- - - - - - - -
+ + + + +
+ + + + +
+ + + + + +
+ + + + +
+ + + + + + + + --> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/.epub/example/OEBPS/styles/stylesheet.css b/.epub/example/OEBPS/styles/stylesheet.css index 2c4114d..3c230f6 100644 --- a/.epub/example/OEBPS/styles/stylesheet.css +++ b/.epub/example/OEBPS/styles/stylesheet.css @@ -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);