chore (rewrite): viewerpage applications

mickael-kerjean · Dec 18, 2023 · f007472 · f007472
1 parent 6d18fcd
commit f007472
Show file tree

Hide file tree

Showing 12 changed files with 397 additions and 93 deletions.
diff --git a/public/assets/css/designsystem_utils.css b/public/assets/css/designsystem_utils.css
@@ -3,12 +3,12 @@
 }
 
 .hidden{
-    position:absolute;
-    left:-10000px;
-    top:auto;
-    width:1px;
-    height:1px;
-    overflow:hidden;
+    position:absolute!important;
+    left:-10000px!important;
+    top:auto!important;
+    width:1px!important;
+    height:1px!important;
+    overflow:hidden!important;
 }
 
 .no-select {

diff --git a/public/assets/lib/animate.js b/public/assets/lib/animate.js
@@ -11,7 +11,7 @@ export function transition($node, opts = {}) {
 }
 
 export function animate($node, opts = {}) {
-    const { time = 250, keyframes = opacityIn(), fill = "forwards" } = opts;
+    const { time = 250, keyframes = opacityIn(), fill = "forwards", easing = "ease" } = opts;
 
     if (!$node) return Promise.resolve();
     else if (typeof $node.animate !== "function") return Promise.resolve();
@@ -20,7 +20,7 @@ export function animate($node, opts = {}) {
     return new Promise((done) => {
         $node.animate(keyframes, {
             duration: time,
-            fill,
+            fill, easing,
         }).onfinish = done;
     });
 }

diff --git a/public/assets/lib/assert.js b/public/assets/lib/assert.js
@@ -3,4 +3,13 @@ export default class assert {
         if (object instanceof type) return;
         throw new Error(`assertion failed - unexpected type for ${object.toString()}`);
     }
+
+    static truthy(object) {
+        if (object) return;
+        throw new Error(`assertion failed - object is not truthy`);
+    }
+
+    static fail(object) {
+        throw new Error(`assertion failed - ${object}`);
+    }
 }
diff --git a/public/assets/pages/viewerpage/application_audio.js b/public/assets/pages/viewerpage/application_audio.js
@@ -2,12 +2,17 @@ import { createElement } from "../../lib/skeleton/index.js";
 import { onDestroy } from "../../lib/skeleton/lifecycle.js";
 import rxjs, { effect } from "../../lib/rx.js";
 import WaveSurfer from "../../lib/vendor/wavesurfer.js";
+import { loadCSS } from "../../helpers/loader.js";
+
+import { getDownloadUrl } from "./common.js";
+
+import "../../components/menubar.js";
 
 export default function(render) {
     const $page = createElement(`
         <div class="component_formviewer">
             <component-menubar></component-menubar>
-            <div id="waveform">AUDIO</div>
+            <div id="waveform"></div>
         </div>
     `);
     render($page);
@@ -23,5 +28,10 @@ export default function(render) {
         height: 200,
         barWidth: 1,
     });
+    wavesurfer.load(getDownloadUrl());
     onDestroy(() => wavesurfer.destroy());
 }
+
+export function init() {
+    return loadCSS(import.meta.url, "./application_audio.css");
+}
diff --git a/public/assets/pages/viewerpage/application_ebook.css b/public/assets/pages/viewerpage/application_ebook.css
@@ -1,18 +1,10 @@
-.component_ebookviewer {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    width: 100%;
-    flex-grow: 1;
-}
 .component_ebookviewer .ebookviewer_container {
     display: flex;
     flex-grow: 1;
     min-height: 0;
 }
 .component_ebookviewer .ebookviewer_container .epub-container {
-    background: var(--super-light);
-    padding-top: 50px;
+    padding-top: 20px;
     padding-bottom: 50px;
     box-sizing: border-box;
     overflow-x: hidden !important;

diff --git a/public/assets/pages/viewerpage/application_ebook.js b/public/assets/pages/viewerpage/application_ebook.js
@@ -28,7 +28,7 @@ export default function(render) {
                 replacements: "blobUrl",
             });
             const rendition = book.renderTo($epub, {
-                width: "100%", height: "100%",
+                height: "100%", width: "100%",
                 flow: "scrolled-doc",
                 method: "continuous",
                 allowScriptedContent: false,
@@ -58,7 +58,6 @@ export default function(render) {
             rxjs.fromEvent(document, "keydown"),
             rendition$.pipe(rxjs.mergeMap(() => rxjs.fromEvent(qs(document, "iframe").contentDocument.body, "keydown"))),
         )),
-        rxjs.tap((a) => console.log(a.code)),
         rxjs.map((e) => {
             switch(e.code) {
             case "Space": return (r) => r.next();

diff --git a/public/assets/pages/viewerpage/application_editor.js b/public/assets/pages/viewerpage/application_editor.js
@@ -17,7 +17,7 @@ export default async function(render) {
     const $page = createElement(`
         <div class="component_ide">
             <component-menubar class="hidden"></component-menubar>
-            <div class="component_editor scroll-y"></div>
+            <div class="component_editor"></div>
         </div>
     `);
     render($page);

diff --git a/public/assets/pages/viewerpage/application_iframe.css b/public/assets/pages/viewerpage/application_iframe.css
@@ -0,0 +1,20 @@
+body:not(.dark-mode) .component_appframe {
+    background: #525659;
+}
+
+.component_appframe {
+    text-align: center;
+    width: 100%;
+}
+
+.component_appframe iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+.component_appframe .error {
+    color: white;
+    font-size: 17px;
+    margin-top: 10px;
+    font-family: monospace;
+}
diff --git a/public/assets/pages/viewerpage/application_iframe.js b/public/assets/pages/viewerpage/application_iframe.js
@@ -1,9 +1,12 @@
 import { createElement } from "../../lib/skeleton/index.js";
+import assert from "../../lib/assert.js";
 
-export default function(render, opts) {
-    console.log("OPTIONS", opts);
+export default function(render, opts = {}) {
+    const { endpoint = null } = opts;
+
+    assert.truthy(endpoint);
     const $page = createElement(`
-        <div class="component_formviewer">
+        <div class="component_appframe">
             <component-menubar></component-menubar>
             <div>
                 IFRAME

diff --git a/public/assets/pages/viewerpage/application_image.css b/public/assets/pages/viewerpage/application_image.css
@@ -174,6 +174,11 @@ body:not(.dark-mode) .component_imageviewer .component_image_container, body:not
 .component_imageviewer .component_image_container img[srcset].idle {
     transition: 0.2s ease transform;
 }
+.component_imageviewer .component_image_container img.error {
+    filter: contrast(0.8);
+    width: 160px;
+    margin: 0 auto;
+}
 
 .component_imageviewer .loader, .component_imageviewer .loader > span {
     height: 100%;
@@ -191,42 +196,7 @@ body:not(.dark-mode) .component_imageviewer .component_image_container, body:not
 }
 
 .component_imageviewer .error {
-    display: flex;
-    height: 100%;
     color: var(--dark);
-    font-size: 1.5em;
-    font-style: italic;
-}
-.component_imageviewer .error .label {
-    text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.1);
-    display: block;
-    margin: auto;
-}
-
-.image-enter, .image-appear {
-    opacity: 0;
-}
-
-.image-enter.image-enter-active, .image-appear.image-appear-active {
-    transition: top .3s,right .3s,bottom .3s,left .3s,max-width .3s,max-height .3s;
-    -webkit-animation-name: zoomIn;
-    animation-name: zoomIn;
-    animation-duration: .3s;
-    -webkit-animation-timing-function: cubic-bezier(0.51, 0.92, 0.24, 1.15);
-    animation-timing-function: cubic-bezier(0.51, 0.92, 0.24, 1.15);
-    opacity: 1;
-}
-
-@keyframes zoomIn {
-    0% {
-        opacity: 0;
-        transform: scale(0.97);
-    }
-    1% {
-        opacity: 1;
-    }
-    100% {
-        opacity: 1;
-        transform: scale(1);
-    }
+    font-size: 1.3em;
+    margin-top: 10px;
 }
diff --git a/public/assets/pages/viewerpage/application_image.js b/public/assets/pages/viewerpage/application_image.js
@@ -1,8 +1,12 @@
 import { createElement, createRender } from "../../lib/skeleton/index.js";
+import rxjs, { effect, onLoad } from "../../lib/rx.js";
+import { animate } from "../../lib/animate.js";
 import { loadCSS } from "../../helpers/loader.js";
 import { qs } from "../../lib/dom.js";
+import { createLoader } from "../../components/loader.js";
+import ctrlError from "../ctrl_error.js";
 
-import { getDownloadUrl } from "./common.js";
+import { transition, getDownloadUrl } from "./common.js";
 
 import componentMetadata from "./application_image_metadata.js";
 import componentPager, { init as initPager} from "./component_pager.js";
@@ -15,17 +19,55 @@ export default function(render) {
             <component-menubar></component-menubar>
             <div class="component_image_container">
                 <div class="images_wrapper">
-                    <img class="photo idle" draggable="true" srcset="${getDownloadUrl()}">
+                    <img class="photo idle hidden" draggable="true" src="${getDownloadUrl()}">
                 </div>
                 <div class="images_aside scroll-y"></div>
                 <div class="component_pager"></div>
             </div>
         </div>
     `);
     render($page);
+    transition(qs($page, ".component_image_container"));
 
-    componentMetadata(createRender(qs($page, ".images_aside")));
-    componentPager(createRender(qs($page, ".component_pager")));
+    const removeLoader = createLoader(qs($page, ".images_wrapper"));
+    const $photo = qs($page, "img.photo");
+    effect(onLoad($photo).pipe(
+        removeLoader,
+        rxjs.tap(($node) => {
+            $node.classList.remove("hidden");
+            animate($node, {
+                time: 300, easing: "cubic-bezier(.51,.92,.24,1.15)",
+                keyframes: [
+                    { opacity: 0, transform: "scale(.97)" },
+                    { opacity: 1 },
+	                { opacity: 1, transform: "scale(1)" },
+                ],
+            })
+        }),
+        rxjs.catchError((err) => {
+            if (err.target instanceof window.HTMLElement && err.type === "error") {
+                return rxjs.of($photo).pipe(
+                    removeLoader,
+                    rxjs.tap(($img) => {
+                        $img.setAttribute("src", "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgaGVpZ2h0PSIxNiIKICAgd2lkdGg9IjE2IgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcyNzU2IgogICBzb2RpcG9kaTpkb2NuYW1lPSJkb3dubG9hZC5zdmciCiAgIGlua3NjYXBlOnZlcnNpb249IjEuMi4yIChiMGE4NDg2NTQxLCAyMDIyLTEyLTAxKSIKICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiCiAgIHhtbG5zOnNvZGlwb2RpPSJodHRwOi8vc29kaXBvZGkuc291cmNlZm9yZ2UubmV0L0RURC9zb2RpcG9kaS0wLmR0ZCIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMjc2MCIgLz4KICA8c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgaWQ9Im5hbWVkdmlldzI3NTgiCiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjMDAwMDAwIgogICAgIGJvcmRlcm9wYWNpdHk9IjAuMjUiCiAgICAgaW5rc2NhcGU6c2hvd3BhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIKICAgICBpbmtzY2FwZTpwYWdlY2hlY2tlcmJvYXJkPSIwIgogICAgIGlua3NjYXBlOmRlc2tjb2xvcj0iI2QxZDFkMSIKICAgICBzaG93Z3JpZD0iZmFsc2UiCiAgICAgaW5rc2NhcGU6em9vbT0iNDEuNzE5MyIKICAgICBpbmtzY2FwZTpjeD0iMTEuMzI1NjkzIgogICAgIGlua3NjYXBlOmN5PSI4LjU1NzE5MDUiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxOTA0IgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjExNTciCiAgICAgaW5rc2NhcGU6d2luZG93LXg9IjciCiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjM0IgogICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ic3ZnMjc1NiIgLz4KICA8cGF0aAogICAgIHN0eWxlPSJjb2xvcjojMDAwMDAwO3RleHQtaW5kZW50OjA7dGV4dC10cmFuc2Zvcm06bm9uZTtmaWxsOiMzYjQwNDU7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlLXdpZHRoOjAuOTg0ODEwNDEiCiAgICAgZD0ibSAyLDEzLjA4MjQxMiAwLjAxOTQ2MiwxLjQ5MjM0NyBjIDVlLTYsMC4yMjIxNDUgMC4yMDU1OTAyLDAuNDI0MjYyIDAuNDMxMTUwMiwwLjQyNDI3MiBMIDEzLjU4OTYxMiwxNSBDIDEzLjgxNTE3MywxNC45OTk5OTUgMTMuOTk5OTksMTQuNzk3ODc0IDE0LDE0LjU3NTcyOSB2IC0xLjQ5MzMxNyBjIC00LjE3MTg2OTIsMC42NjIwMjMgLTcuNjUxNjkyOCwwLjM5ODY5NiAtMTIsMCB6IgogICAgIGlkPSJwYXRoMjc1MCIgLz4KICA8cGF0aAogICAgIHN0eWxlPSJjb2xvcjojMDAwMDAwO3RleHQtaW5kZW50OjA7dGV4dC10cmFuc2Zvcm06bm9uZTtkaXNwbGF5OmlubGluZTtmaWxsOiNmOWY5ZmE7c3Ryb2tlLXdpZHRoOjAuOTg0MDgxMjc7ZmlsbC1vcGFjaXR5OjEiCiAgICAgZD0iTSAyLjM1MDEsMS4wMDEzMzEyIEMgMi4xNTI1OSwxLjAzODMyNDcgMS45OTY1OSwxLjIyNzI3MjMgMi4wMDAwOSwxLjQyNDkzNTYgViAxNC4xMzM0NTcgYyA1ZS02LDAuMjIxODE2IDAuMjA1MjMsMC40MjM2MzQgMC40MzA3OSwwLjQyMzY0NCBsIDExLjEzOSwtMS4wMWUtNCBjIDAuMjI1NTYsLTZlLTYgMC40MzAxMSwtMC4yMDA3NTggMC40MzAxMiwtMC40MjI1NzQgbCA2LjdlLTQsLTkuODIyNjQyNiBjIC0yLjQ4NDA0NiwtMS4zNTUwMDYgLTIuNDM1MjM0LC0yLjAzMTIyNTQgLTMuNTAwMSwtMy4zMDk3MDcgLTAuMDQzLC0wLjAxNTg4MiAwLjA0NiwwLjAwMTc0IDAsMCBMIDIuNDMwNjcsMS4wMDExMDggQyAyLjQwMzgzLDAuOTk4NTkgMi4zNzY3NCwwLjk5ODU5IDIuMzQ5OSwxLjAwMTEwOCBaIgogICAgIGlkPSJwYXRoMjc1MiIgLz4KICA8cGF0aAogICAgIHN0eWxlPSJkaXNwbGF5OmlubGluZTtmaWxsOiMzYjQwNDU7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiM5ZTc1NzU7c3Ryb2tlLXdpZHRoOjA7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46bWl0ZXI7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIKICAgICBkPSJtIDEwLjUwMDU3LDEuMDAyMDc2NCBjIDAsMy4yNzY4MDI4IC0wLjAwNTIsMy4xNzM5MTYxIDAuMzYyOTIxLDMuMjY5ODIwMiAwLjI4MDEwOSwwLjA3Mjk4NCAzLjEzNzE4LDAuMDM5ODg3IDMuMTM3MTgsMC4wMzk4ODcgLTEuMTIwMDY3LC0xLjA1NTY2OTIgLTIuMzMzNCwtMi4yMDY0NzEzIC0zLjUwMDEsLTMuMzA5NzA3NCB6IgogICAgIGlkPSJwYXRoMjc1NCIgLz4KPC9zdmc+Cg==");
+                        $img.classList.remove("hidden");
+                        $img.classList.add("error");
+                        $img.parentElement.appendChild(createElement(`
+                            <div class="error no-select">
+                                This file format is not supported
+                            </div>
+                        `));
+                    }),
+                    rxjs.catchError(ctrlError()),
+                );
+            }
+            console.log(err)
+            return ctrlError()(err);
+        }),
+    ));
+
+    // componentMetadata(createRender(qs($page, ".images_aside")));
+    // componentPager(createRender(qs($page, ".component_pager")));
 }
 
 export function init() {