diff --git a/.epub/example/OEBPS/scripts/ipub.js b/.epub/example/OEBPS/scripts/ipub.js index 7feb888..901bdfc 100644 --- a/.epub/example/OEBPS/scripts/ipub.js +++ b/.epub/example/OEBPS/scripts/ipub.js @@ -122,10 +122,19 @@ class IPUBBackground extends HTMLElement { } } -globalThis.addEventListener("load", () => { - console.log("IPUB SCRIPT LOADED"); +class IPUBContent extends HTMLElement { + 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} */ const onScreenMap = new Map(); diff --git a/.epub/example/OEBPS/sections/section0001.xhtml b/.epub/example/OEBPS/sections/section0001.xhtml index 9cd02d6..bb42072 100644 --- a/.epub/example/OEBPS/sections/section0001.xhtml +++ b/.epub/example/OEBPS/sections/section0001.xhtml @@ -9,97 +9,114 @@ -
- - - -
- + +
+ + + - - - - - + + + + Go to "Krita | Digital Paiting. Creative Freedom" + - Go to "Krita | Digital Paiting. Creative Freedom" - + + + Go to page "page03" + +
+
+ + + + - - - Go to page "page03" - -
-
- - - - - -
- - - - - -
- - - -
-
- - - -
-
- - - -
-
+ 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". + --> + + + + + + + +
+ + + +
+
+ + + +
+ + + + + +
+ + + +
+
+ + + +
+
+ + + +
+ + diff --git a/.epub/example/OEBPS/styles/stylesheet.css b/.epub/example/OEBPS/styles/stylesheet.css index 69caebe..f1f7f38 100644 --- a/.epub/example/OEBPS/styles/stylesheet.css +++ b/.epub/example/OEBPS/styles/stylesheet.css @@ -10,18 +10,41 @@ max-width: 100vw; } -[data-ipub-element="content"] { - position: relative; - display: flex; - flex-direction: column; - align-items: center; +ipub-content { + --ipub-padding: 0%; + --ipub-gap: 0%; + --ipub-padding-x: var(--ipub-padding, 0%); + --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%; - height: 100%; -} + & > article, + & > main, + & > section { + position: relative; + display: flex; + flex-direction: column; + align-items: center; -[data-ipub-element="content"] > [data-ipub-element="page"] { - margin: 5% 10%; + & > *:first-child:not(ipub-background), + & > 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 {