feat(ipub): ipub-track element to position elements outside of content elements

.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";
 

.epub/example/OEBPS/sections/section0001.xhtml

@@ -24,11 +24,10 @@
         </dialog>
       </ipub-cover>
       <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">
-          <!-- TODO: Search on how to make this more accessible, more semantic as using <details> -->
             <figure>
               <label>
                 <input type="checkbox" />
@@ -36,12 +35,50 @@
               </label>
               <ipub-audio>
                 <audio controls="true" volume="0" controlslist="nofullscreen"
-              disableremoteplayback="">
+                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="">
@@ -56,20 +93,19 @@
       <ipub-image>
         <img src="../images/image0002.png" />
       </ipub-image>
-        <ipub-soundtrack style="--ipub-color:green;">
+      <!-- <ipub-soundtrack style="==ipub-color:green;"> -->
-          <figure>
+      <!--   <figure> -->
-            <label>
+      <!--     <label> -->
-              <input type="checkbox" />
+      <!--       <input type="checkbox" /> -->
-              <figcaption>Soundtrack 2</figcaption>
+      <!--       <figcaption>Soundtrack 2</figcaption> -->
-            </label>
+      <!--     </label> -->
-            <ipub-audio>
+      <!--     <ipub-audio> -->
-              <audio controls="true" volume="0" controlslist="nofullscreen"
+      <!--       <audio controls="true" volume="0" controlslist="nofullscreen" disableremoteplayback=""> -->
-              disableremoteplayback="">
+      <!--         <source src="../audios/track2.webm" /> -->
-                <source src="../audios/track2.webm" />
+      <!--       </audio> -->
-              </audio>
+      <!--     </ipub-audio> -->
-            </ipub-audio>
+      <!--   </figure> -->
-          </figure>
+      <!-- </ipub-soundtrack> -->
-        </ipub-soundtrack>
       <ipub-background id="background0002">
         <picture>
           <img src="../images/background0002.jpg" />
@@ -89,27 +125,25 @@
       <ipub-image>
         <img src="../images/image0002.png" />
       </ipub-image>
-        <ipub-soundtrack style="--ipub-color:yellow;">
+      <!-- <ipub-soundtrack style="==ipub-color:yellow;"> -->
-          <figure>
+      <!--   <figure> -->
-            <label>
+      <!--     <label> -->
-              <input type="checkbox" />
+      <!--       <input type="checkbox" /> -->
-              <figcaption>Soundtrack 3</figcaption>
+      <!--       <figcaption>Soundtrack 3</figcaption> -->
-            </label>
+      <!--     </label> -->
-            <ipub-audio>
+      <!--     <ipub-audio> -->
-              <audio controls="true" volume="0" controlslist="nofullscreen"
+      <!--       <audio controls="true" volume="0" controlslist="nofullscreen" disableremoteplayback=""> -->
-              disableremoteplayback="">
+      <!--         <source src="../audios/track3.webm" /> -->
-                <source src="../audios/track3.webm" />
+      <!--       </audio> -->
-              </audio>
+      <!--     </ipub-audio> -->
-            </ipub-audio>
+      <!--   </figure> -->
-          </figure>
+      <!-- </ipub-soundtrack> -->
-        </ipub-soundtrack>
       <ipub-image>
         <img src="../images/image0003.png" />
       </ipub-image>
       <ipub-image>
         <img src="../images/image0004.png" />
-        </ipub-image>
+      </ipub-image></main>
-      </main>
     </ipub-body>
   </body>
 </html>

.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);