feature (viewerpage): rewrite of the viewers

mickael-kerjean · Dec 20, 2023 · 21bf973 · 21bf973
1 parent 55671b3
commit 21bf973
Show file tree

Hide file tree

Showing 17 changed files with 461 additions and 71 deletions.
diff --git a/public/assets/components/dropdown.css b/public/assets/components/dropdown.css
@@ -0,0 +1,64 @@
+.component_dropdown {
+    position: relative;
+}
+.component_dropdown .dropdown_container {
+    display: none;
+    position: absolute;
+    right: 0;
+}
+.component_dropdown .dropdown_button {
+    border: 1px solid rgba(0, 0, 0, 0);
+    border-radius: 4px;
+    padding: 5px;
+    min-width: 20px;
+    text-align: center;
+}
+.component_dropdown .dropdown_container {
+    padding-top: 5px;
+    z-index: 3;
+}
+.component_dropdown .dropdown_container:before {
+    content: ' ';
+    position: absolute;
+    right: 10px;
+    top: 1px;
+    width: 0;
+    height: 0;
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-bottom: 6px solid white;
+}
+.component_dropdown .dropdown_container ul {
+    margin: 0;
+    list-style-type: none;
+    background: white;
+    border: 1px solid var(--border);
+    box-shadow: 1px 1px 2px var(--border);
+    color: rgba(0,10,20,0.85);
+    border-radius: 3px;
+    padding: 3px 0px;
+    font-size: 0.92em;
+}
+.component_dropdown .dropdown_container ul li {
+    display: flex;
+}
+.component_dropdown .dropdown_container ul li > div {
+    width: 160px;
+    padding: 8px 5px 8px 10px;
+}
+
+.component_dropdown.active .dropdown_container {
+    display: block;
+}
+.component_dropdown.active .dropdown_container li {
+    background: white;
+    transition: background 0.1s ease-out;
+}
+.component_dropdown.active .dropdown_container li:hover {
+    background: rgba(0, 0, 0, 0.05);
+}
+
+.component_dropdown.active .dropdown_button {
+    border-color: var(--bg-color);
+    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+}
diff --git a/public/assets/components/dropdown.js b/public/assets/components/dropdown.js
@@ -0,0 +1,88 @@
+import { createFragment } from "../lib/skeleton/index.js";
+import { animate, slideYIn } from "../lib/animate.js";
+import { loadCSS } from "../helpers/loader.js";
+
+await loadCSS(import.meta.url, "./dropdown.css");
+
+export default class ComponentDropdown extends HTMLDivElement {
+    constructor() {
+        super();
+        this.render();
+    }
+
+    static get observedAttributes() {
+        return ["options"];
+    }
+
+    render() {
+        this.classList.add("component_dropdown", "view", "sort")
+        this.appendChild(createFragment(`
+  <div class="dropdown_button">
+    <img class="component_icon" draggable="false" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj4KICA8cGF0aCBmaWxsPSIjZjJmMmYyIiBkPSJNIDM2MCw0NjAgSCAyNCBDIDEwLjcsNDYwIDAsNDUzLjMgMCw0NDAgdiAtMTIgYyAwLC0xMy4zIDEwLjcsLTIwIDI0LC0yMCBoIDMzNiBjIDEzLjMsMCAyNCw2LjcgMjQsMjAgdiAxMiBjIDAsMTMuMyAtMTAuNywyMCAtMjQsMjAgeiIgLz4KICA8cGF0aCBmaWxsPSIjZjJmMmYyIiBkPSJNIDIyNi41NTM5LDIzNC44ODQyOCBWIDUyLjk0MzI4MyBjIDAsLTYuNjI3IC01LjM3MywtMTIgLTEyLC0xMiBoIC00NCBjIC02LjYyNywwIC0xMiw1LjM3MyAtMTIsMTIgViAyMzQuODg0MjggaCAtNTIuMDU5IGMgLTIxLjM4MiwwIC0zMi4wOSwyNS44NTEgLTE2Ljk3MSw0MC45NzEgbCA4Ni4wNTksODYuMDU5IGMgOS4zNzMsOS4zNzMgMjQuNTY5LDkuMzczIDMzLjk0MSwwIGwgODYuMDU5LC04Ni4wNTkgYyAxNS4xMTksLTE1LjExOSA0LjQxMSwtNDAuOTcxIC0xNi45NzEsLTQwLjk3MSB6IiAvPgo8L3N2Zz4K" alt="download_white">
+  </div>`));
+
+        this.appendChild(createFragment(`
+  <div class="dropdown_container">
+    <ul>
+      <li>
+        <div>
+          <a download="README.org" href="/api/files/cat?path=%2FREADME.org">Save current file</a>
+        </div>
+      </li>
+      <li>
+        <div>
+          <a target="_blank" href="/api/export/private/text/html/README.org">Export as HTML</a>
+        </div>
+      </li>
+      <li>
+        <div>
+          <a target="_blank" href="/api/export/private/application/pdf/README.org">Export as PDF</a>
+        </div>
+      </li>
+      <li>
+        <div>
+          <a target="_blank" href="/api/export/private/text/markdown/README.org">Export as Markdown</a>
+        </div>
+      </li>
+      <li>
+        <div>
+          <a target="_blank" href="/api/export/private/text/plain/README.org">Export as TXT</a>
+        </div>
+      </li>
+      <li>
+        <div>
+          <a target="_blank" download="README.tex" href="/api/export/private/text/x-latex/README.org">Export as Latex</a>
+        </div>
+      </li>
+      <li>
+        <div>
+          <a target="_blank" download="README.ics" href="/api/export/private/text/calendar/README.org">Export as ical</a>
+        </div>
+      </li>
+      <li>
+        <div>
+          <a target="_blank" download="README.odt" href="/api/export/private/application/vnd.oasis.opendocument.text/README.org">Export as Open office</a>
+        </div>
+      </li>
+      <li>
+        <div>
+          <a target="_blank" download="README.pdf" href="/api/export/private/application/pdf/README.org?mode=beamer">Export as Beamer</a>
+        </div>
+      </li>
+    </ul>
+  </div>
+</div>
+        `));
+
+        const setActive = () => this.classList.toggle("active");
+        this.querySelector(".dropdown_button").onclick = () => {
+            setActive();
+            animate(this.querySelector(".dropdown_container"), {
+                time: 100,
+                keyframes: slideYIn(2),
+            });
+        };
+    }
+}
+
+customElements.define("component-dropdown", ComponentDropdown, { extends: "div" });
diff --git a/public/assets/components/fab.css b/public/assets/components/fab.css
@@ -3,6 +3,7 @@
   bottom: 20px;
   right: 20px;
   z-index: 2;
+  background: transparent;
 }
 .component_fab .content {
     height: 25px;

diff --git a/public/assets/components/menubar.css b/public/assets/components/menubar.css
@@ -75,3 +75,11 @@ google-cast-launcher {
     transition: all 0.25s ease-out;
     transition-delay: 0.30s;
 }
+
+
+/* icons in additional menu */
+.component_menubar .action-item [is="component-dropdown"] .dropdown_button {
+    border: none;
+    padding: 2px 0px;
+    margin: 0;
+}
diff --git a/public/assets/components/menubar.js b/public/assets/components/menubar.js
@@ -1,7 +1,12 @@
 import { createElement } from "../lib/skeleton/index.js";
 import { basename } from "../lib/path.js";
+import assert from "../lib/assert.js";
 import { loadCSS } from "../helpers/loader.js";
 
+await loadCSS(import.meta.url, "./menubar.css");
+
+import "./dropdown.js";
+
 export default class ComponentMenubar extends window.HTMLElement {
     constructor() {
         super();
@@ -13,33 +18,23 @@ export default class ComponentMenubar extends window.HTMLElement {
                     <div class="titlebar">
                         ${basename(decodeURIComponent(location.pathname + location.hash)) || "&nbsp;"}
                     </div>
-                    <div class="action-item no-select"></div>
+                    <div class="action-item no-select">
+                        <div is="component-dropdown"></div>
+                    </div>
                 </span>
             </div>
         `;
-        this.render();
     }
 
-    async render(html) {
-        await loadCSS(import.meta.url, "./menubar.css");
-        html = `<span class="specific">
-                                <span id="chromecast-target"></span>
-                            </span>
-                            <span class="download-button">
-                                <span>
-                                    <a href="/api/files/cat?path=%2FDocuments%2Fgetting_started.pdf" download="getting_started.pdf">
-                                        <img class="component_icon" draggable="false" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj4KICA8cGF0aCBmaWxsPSIjZjJmMmYyIiBkPSJNIDM2MCw0NjAgSCAyNCBDIDEwLjcsNDYwIDAsNDUzLjMgMCw0NDAgdiAtMTIgYyAwLC0xMy4zIDEwLjcsLTIwIDI0LC0yMCBoIDMzNiBjIDEzLjMsMCAyNCw2LjcgMjQsMjAgdiAxMiBjIDAsMTMuMyAtMTAuNywyMCAtMjQsMjAgeiIgLz4KICA8cGF0aCBmaWxsPSIjZjJmMmYyIiBkPSJNIDIyNi41NTM5LDIzNC44ODQyOCBWIDUyLjk0MzI4MyBjIDAsLTYuNjI3IC01LjM3MywtMTIgLTEyLC0xMiBoIC00NCBjIC02LjYyNywwIC0xMiw1LjM3MyAtMTIsMTIgViAyMzQuODg0MjggaCAtNTIuMDU5IGMgLTIxLjM4MiwwIC0zMi4wOSwyNS44NTEgLTE2Ljk3MSw0MC45NzEgbCA4Ni4wNTksODYuMDU5IGMgOS4zNzMsOS4zNzMgMjQuNTY5LDkuMzczIDMzLjk0MSwwIGwgODYuMDU5LC04Ni4wNTkgYyAxNS4xMTksLTE1LjExOSA0LjQxMSwtNDAuOTcxIC0xNi45NzEsLTQwLjk3MSB6IiAvPgo8L3N2Zz4K" alt="download_white">
-                                    </a>
-                                </span>
-                            </span>`;
-        this.querySelector(".action-item").appendChild(createElement(html));
+    render($fragment) {
+        this.querySelector(".action-item").appendChild($fragment);
     }
 }
 
-export function render(html = "") {
-    const $el = document.body.querySelector("component-menubar");
-    if (!$el) throw new Error("component::menubar.js missing element");
-    $el.render(html);
+export async function render($fragment, $root = document.body) {
+    const $el = $root.querySelector("component-menubar");
+    assert.truthy($el, "component::menubar.js missing element");
+    $el.render($fragment);
 }
 
 customElements.define("component-menubar", ComponentMenubar);
diff --git a/public/assets/lib/assert.js b/public/assets/lib/assert.js
@@ -1,15 +1,15 @@
 export default class assert {
-    static type(object, type) {
+    static type(object, type, msg) {
         if (object instanceof type) return;
-        throw new Error(`assertion failed - unexpected type for ${object.toString()}`);
+        throw new Error(msg ? msg : `assertion failed - unexpected type for ${object.toString()}`);
     }
 
-    static truthy(object) {
+    static truthy(object, msg) {
         if (object) return;
-        throw new Error(`assertion failed - object is not truthy`);
+        throw new Error(msg ? msg : `assertion failed - object is not truthy`);
     }
 
-    static fail(object) {
-        throw new Error(`assertion failed - ${object}`);
+    static fail(object, msg) {
+        throw new Error(msg ? msg : `assertion failed - ${object}`);
     }
 }
diff --git a/public/assets/lib/skeleton/index.js b/public/assets/lib/skeleton/index.js
@@ -67,9 +67,7 @@ export function createFragment(str) {
     const $n = window.document.createElement("div");
     $n.innerHTML = str;
     const $doc = document.createDocumentFragment();
-    for (let i=0; i<$n.children.length; i++) {
-        $doc.appendChild($n.children[i].cloneNode(true));
-    }
+    for (let i=0; i<$n.children.length; i++) $doc.appendChild($n.children[i].cloneNode(true));
     $n.remove();
     return $doc;
 }

diff --git a/public/assets/lib/vendor/wavesurfer.js b/public/assets/lib/vendor/wavesurfer.js
diff --git a/public/assets/pages/filespage/ctrl_submenu.css b/public/assets/pages/filespage/ctrl_submenu.css
@@ -1,3 +1,4 @@
+/* General design */
 [is="component_submenu"] {
     margin-top: 20px;
     position: sticky;
@@ -48,7 +49,7 @@
     border-radius: 5px;
 }
 
-
+/* dark mode */
 .dark-mode [is="component_submenu"] .component_submenu .action button img {
     filter: brightness(70%) invert(1);
 }
@@ -61,6 +62,11 @@
 }
 
 
+/* search */
+/* img[alt="search"]:hover ~ input { */
+/*     background: red; */
+/*     display: block; */
+/* } */
 
 /* .component_submenu .menubar { */
 /*     font-size: 15px; */

diff --git a/public/assets/pages/filespage/ctrl_submenu.js b/public/assets/pages/filespage/ctrl_submenu.js
@@ -5,6 +5,8 @@ import { loadCSS } from "../../helpers/loader.js";
 import { qs } from "../../lib/dom.js";
 import { getSelection$, clearSelection } from "./model_files.js";
 
+import "../../components/dropdown.js";
+
 export default async function(render) {
     const $page = createElement(`<div class="component_submenu container"></div>`);
     render($page);
@@ -38,14 +40,15 @@ export default async function(render) {
                      color: var(--color);
                      font-size: 0.8rem;
                     ">
-                    <img class="component_icon" draggable="false" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KICA8cGF0aCBzdHlsZT0iZmlsbDojNjI2NDY5O2ZpbGwtb3BhY2l0eToxIiBkPSJNNTA1IDQ0Mi43TDQwNS4zIDM0M2MtNC41LTQuNS0xMC42LTctMTctN0gzNzJjMjcuNi0zNS4zIDQ0LTc5LjcgNDQtMTI4QzQxNiA5My4xIDMyMi45IDAgMjA4IDBTMCA5My4xIDAgMjA4czkzLjEgMjA4IDIwOCAyMDhjNDguMyAwIDkyLjctMTYuNCAxMjgtNDR2MTYuM2MwIDYuNCAyLjUgMTIuNSA3IDE3bDk5LjcgOTkuN2M5LjQgOS40IDI0LjYgOS40IDMzLjkgMGwyOC4zLTI4LjNjOS40LTkuNCA5LjQtMjQuNi4xLTM0ek0yMDggMzM2Yy03MC43IDAtMTI4LTU3LjItMTI4LTEyOCAwLTcwLjcgNTcuMi0xMjggMTI4LTEyOCA3MC43IDAgMTI4IDU3LjIgMTI4IDEyOCAwIDcwLjctNTcuMiAxMjgtMTI4IDEyOHoiIC8+Cjwvc3ZnPgo=" alt="search_dark" />
+                    <img class="component_icon" draggable="false" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KICA8cGF0aCBzdHlsZT0iZmlsbDojNjI2NDY5O2ZpbGwtb3BhY2l0eToxIiBkPSJNNTA1IDQ0Mi43TDQwNS4zIDM0M2MtNC41LTQuNS0xMC42LTctMTctN0gzNzJjMjcuNi0zNS4zIDQ0LTc5LjcgNDQtMTI4QzQxNiA5My4xIDMyMi45IDAgMjA4IDBTMCA5My4xIDAgMjA4czkzLjEgMjA4IDIwOCAyMDhjNDguMyAwIDkyLjctMTYuNCAxMjgtNDR2MTYuM2MwIDYuNCAyLjUgMTIuNSA3IDE3bDk5LjcgOTkuN2M5LjQgOS40IDI0LjYgOS40IDMzLjkgMGwyOC4zLTI4LjNjOS40LTkuNCA5LjQtMjQuNi4xLTM0ek0yMDggMzM2Yy03MC43IDAtMTI4LTU3LjItMTI4LTEyOCAwLTcwLjcgNTcuMi0xMjggMTI4LTEyOCA3MC43IDAgMTI4IDU3LjIgMTI4IDEyOCAwIDcwLjctNTcuMiAxMjgtMTI4IDEyOHoiIC8+Cjwvc3ZnPgo=" alt="search" />
                 </button>
                 <button>
                     <img class="component_icon" draggable="false" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KICA8cGF0aCBzdHlsZT0iZmlsbDojNjI2NDY5O2ZpbGwtb3BhY2l0eToxIiBkPSJtIDEzMy4zMzMsNTYgdiA2NCBjIDAsMTMuMjU1IC0xMC43NDUsMjQgLTI0LDI0IEggMjQgQyAxMC43NDUsMTQ0IDAsMTMzLjI1NSAwLDEyMCBWIDU2IEMgMCw0Mi43NDUgMTAuNzQ1LDMyIDI0LDMyIGggODUuMzMzIGMgMTMuMjU1LDAgMjQsMTAuNzQ1IDI0LDI0IHogbSAzNzkuMzM0LDIzMiB2IC02NCBjIDAsLTEzLjI1NSAtMTAuNzQ1LC0yNCAtMjQsLTI0IEggMjEzLjMzMyBjIC0xMy4yNTUsMCAtMjQsMTAuNzQ1IC0yNCwyNCB2IDY0IGMgMCwxMy4yNTUgMTAuNzQ1LDI0IDI0LDI0IGggMjc1LjMzMyBjIDEzLjI1NiwwIDI0LjAwMSwtMTAuNzQ1IDI0LjAwMSwtMjQgeiBtIDAsLTE2OCBWIDU2IGMgMCwtMTMuMjU1IC0xMC43NDUsLTI0IC0yNCwtMjQgSCAyMTMuMzMzIGMgLTEzLjI1NSwwIC0yNCwxMC43NDUgLTI0LDI0IHYgNjQgYyAwLDEzLjI1NSAxMC43NDUsMjQgMjQsMjQgaCAyNzUuMzMzIGMgMTMuMjU2LDAgMjQuMDAxLC0xMC43NDUgMjQuMDAxLC0yNCB6IE0gMTA5LjMzMywyMDAgSCAyNCBDIDEwLjc0NSwyMDAgMCwyMTAuNzQ1IDAsMjI0IHYgNjQgYyAwLDEzLjI1NSAxMC43NDUsMjQgMjQsMjQgaCA4NS4zMzMgYyAxMy4yNTUsMCAyNCwtMTAuNzQ1IDI0LC0yNCB2IC02NCBjIDAsLTEzLjI1NSAtMTAuNzQ1LC0yNCAtMjQsLTI0IHogTSAwLDM5MiB2IDY0IGMgMCwxMy4yNTUgMTAuNzQ1LDI0IDI0LDI0IGggODUuMzMzIGMgMTMuMjU1LDAgMjQsLTEwLjc0NSAyNCwtMjQgdiAtNjQgYyAwLC0xMy4yNTUgLTEwLjc0NSwtMjQgLTI0LC0yNCBIIDI0IEMgMTAuNzQ1LDM2OCAwLDM3OC43NDUgMCwzOTIgWiBtIDE4OS4zMzMsMCB2IDY0IGMgMCwxMy4yNTUgMTAuNzQ1LDI0IDI0LDI0IGggMjc1LjMzMyBjIDEzLjI1NSwwIDI0LC0xMC43NDUgMjQsLTI0IHYgLTY0IGMgMCwtMTMuMjU1IC0xMC43NDUsLTI0IC0yNCwtMjQgSCAyMTMuMzMzIGMgLTEzLjI1NSwwIC0yNCwxMC43NDUgLTI0LDI0IHoiIC8+Cjwvc3ZnPgo=" alt="list" />
                 </button>
                 <button>
                     <img class="component_icon" draggable="false" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIj4KICA8cGF0aCBzdHlsZT0iZmlsbDojNjI2NDY5O2ZpbGwtb3BhY2l0eToxIiBkPSJNNDEgMjg4aDIzOGMyMS40IDAgMzIuMSAyNS45IDE3IDQxTDE3NyA0NDhjLTkuNCA5LjQtMjQuNiA5LjQtMzMuOSAwTDI0IDMyOWMtMTUuMS0xNS4xLTQuNC00MSAxNy00MXptMjU1LTEwNUwxNzcgNjRjLTkuNC05LjQtMjQuNi05LjQtMzMuOSAwTDI0IDE4M2MtMTUuMSAxNS4xLTQuNCA0MSAxNyA0MWgyMzhjMjEuNCAwIDMyLjEtMjUuOSAxNy00MXoiIC8+Cjwvc3ZnPgo=" alt="sort" />
                 </button>
+                <!--<div is="component-dropdown"></div>-->
             </div>
         `)),
         applyMutation($page, "replaceChildren"),

diff --git a/public/assets/pages/viewerpage/application_audio.css b/public/assets/pages/viewerpage/application_audio.css
@@ -28,7 +28,7 @@ body:not(.dark-mode) .component_audioplayer > .audioplayer_container {
     box-shadow: rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px, rgba(0, 0, 0, 0.2) 0px 2px 4px -1px;
     position: relative;
     border-radius: 3px;
-    padding: 10px 0 30px 0;
+    padding: 10px 0 15px 0;
 }
 .component_audioplayer > .audioplayer_container .audioplayer_box .audioplayer_control {
     padding-top: 20px;