@yuneta/gobj-ui 7.23.158 → 7.23.159

package/src/c_yui_treedb_topics.js

@@ -81,6 +81,7 @@ const attrs_table = [
 SDATA(data_type_t.DTP_POINTER,  "subscriber",       0,  null,   "Subscriber of output events"),
 SDATA(data_type_t.DTP_POINTER,  "gobj_remote_yuno", 0,  null,   "Remote yuno for data fetching"),
 SDATA(data_type_t.DTP_STRING,   "treedb_name",      0,  null,   "Remote TreeDB service name"),
+SDATA(data_type_t.DTP_STRING,   "assets_service",   0,  "assets", "Remote service that answers `get-asset` (a C_ASSETS) for the bytes of the treedb's `file` columns: the form's preview and the table's file popup ask it. Empty: nothing is asked, and a file cell opens a marker saying the asset is not available"),
 SDATA(data_type_t.DTP_JSON,     "descs",            0,  null,   "Description of topics"),
 SDATA(data_type_t.DTP_BOOLEAN,  "with_remote_paging",   0,  false,  "Each topic table pulls its rows a PAGE at a time (`nodes` from/limit) instead of loading the topic whole. ⚠️ DO NOT TURN THIS ON: a partial topic BREAKS LINKING -- the link picker of a record is built from the rows the PARENT topic's table holds, which with paging is one page, so the right parent is usually not offered and an existing link the form cannot match is dropped on save. Off in every consumer until linking asks the backend instead of the sibling table"),
 SDATA(data_type_t.DTP_INTEGER,  "page_size",            0,  0,      "Rows per page of each topic table (the DISPLAY; the fetch is whole). 0 leaves the table's own default"),
@@ -1883,6 +1884,33 @@ function ac_mt_command_answer(gobj, event, kw, src)
         return 0;
     }
 
+    /*
+     *  An asset, for a form's preview or a file popup. Before the generic
+     *  error path too: an asset that cannot be served is SHOWN where it
+     *  was asked for (the missing marker, with the reason), not raised as
+     *  an app-wide modal over the form that asked.
+     */
+    if(command === "get-asset") {
+        let asset_topic = kw_get_str(gobj, kw_command, "topic_name", "", 0);
+        let req_id = kw_get_str(gobj, kw_command, "req_id", "", 0);
+        let gobj_topic_form = gobj_find_child(gobj, {
+            __gobj_name__: `${gobj_name(gobj)}?${asset_topic}`
+        });
+        if(!gobj_topic_form || !req_id) {
+            log_error(`${gobj_short_name(gobj)}: get-asset answer for nobody: ` +
+                `topic '${asset_topic}', req_id '${req_id}'`);
+            return 0;
+        }
+        if(result < 0) {
+            gobj_send_event(gobj_topic_form, "EV_ASSET_FAILED",
+                {req_id: req_id, error: comment || "get-asset failed"}, gobj);
+        } else {
+            gobj_send_event(gobj_topic_form, "EV_ASSET_LOADED",
+                {req_id: req_id, answer: data}, gobj);
+        }
+        return 0;
+    }
+
     if(result < 0) {
         if(command === "descs") {
             /*  The schema couldn't load (not a treedb, no authz for it, backend
@@ -2356,6 +2384,56 @@ function ac_request_page(gobj, event, kw, src)
     return 0;
 }
 
+/********************************************
+ *  Event from formtable: the bytes of one asset a `file` column names,
+ *  for the form's preview or the table's file popup.
+ *
+ *  Asked to the ASSETS service and not to the treedb: storing is the
+ *  treedb's, the way out is C_ASSETS's (a signed url when a web server
+ *  sits in front of the store, the bytes inline when there is none). The
+ *  answer goes back down to the table that asked, by `req_id`.
+ *
+ *  A read: a read-only treedb still answers it.
+ ********************************************/
+function ac_request_asset(gobj, event, kw, src)
+{
+    if(!kw.req_id || !kw.asset_id) {
+        log_error(`${gobj_short_name(gobj)}: an asset request with no id`);
+        return -1;
+    }
+
+    let assets_service = gobj_read_str_attr(gobj, "assets_service");
+    let gobj_remote_yuno = gobj_read_pointer_attr(gobj, "gobj_remote_yuno");
+    if(!assets_service || !gobj_remote_yuno) {
+        gobj_send_event(src, "EV_ASSET_FAILED", {
+            req_id: kw.req_id,
+            error:  assets_service? "cannot reach the backend": "no assets service"
+        }, gobj);
+        return 0;
+    }
+
+    let ret = gobj_command(
+        gobj_remote_yuno,
+        "get-asset",
+        {
+            service:    assets_service,
+            asset_id:   kw.asset_id,
+            __md_command__: {   // Data to be returned
+                topic_name: kw.topic_name || gobj_read_attr(src, "topic_name"),
+                req_id:     kw.req_id
+            }
+        },
+        gobj
+    );
+    if(ret) {
+        log_error(ret);
+        /*  The command never went out, so no answer will ever come.  */
+        gobj_send_event(src, "EV_ASSET_FAILED",
+            {req_id: kw.req_id, error: "cannot reach the backend"}, gobj);
+    }
+    return 0;
+}
+
 /********************************************
  *  Event from formtable: ONE field of one record, edited in place.
  *
@@ -2597,6 +2675,7 @@ function create_gclass(gclass_name)
             ["EV_UPDATE_RECORD",        ac_update_record,           null],
             ["EV_UPDATE_FIELD",         ac_update_field,            null],
             ["EV_REQUEST_PAGE",         ac_request_page,            null],
+            ["EV_REQUEST_ASSET",        ac_request_asset,           null],
             ["EV_DELETE_RECORD",        ac_delete_record,           null],
             ["EV_REFRESH_TOPIC",        ac_refresh_topic,           null],
             ["EV_OPEN_JSON",            ac_open_json,               null],
@@ -2626,6 +2705,7 @@ function create_gclass(gclass_name)
         ["EV_UPDATE_RECORD",        0],
         ["EV_UPDATE_FIELD",         0],
         ["EV_REQUEST_PAGE",         0],
+        ["EV_REQUEST_ASSET",        0],
         ["EV_DELETE_RECORD",        0],
         ["EV_RECORD_WRITTEN",       event_flag_t.EVF_OUTPUT_EVENT|
                                     event_flag_t.EVF_NO_WARN_SUBS],

package/src/yui_asset.css

@@ -41,3 +41,54 @@
     max-width: 12rem;
     overflow-wrap: anywhere;
 }
+
+/*
+ *  A PDF, in the browser's own viewer. It has no height of its own, so it
+ *  gets one; a host that wants it bigger sizes it through its own class.
+ */
+.ASSET_DOCUMENT {
+    display: block;
+    width: 100%;
+    min-height: 24rem;
+    border: 1px solid var(--bulma-border, #dbdbdb);
+    border-radius: var(--bulma-radius, 4px);
+    background: var(--bulma-scheme-main, #fff);
+}
+
+/*
+ *  A kind nothing here can draw: what it is, and the way to open it. The
+ *  same footprint as the missing marker, and solid where that one is
+ *  dashed -- this asset IS there.
+ */
+.ASSET_OTHER {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.35rem;
+    min-width: 5rem;
+    min-height: 5rem;
+    padding: 0.75rem;
+    border: 1px solid var(--bulma-border, #dbdbdb);
+    border-radius: var(--bulma-radius, 4px);
+    text-align: center;
+}
+
+.ASSET_OTHER_TYPE {
+    font-family: monospace;
+    font-size: 0.85rem;
+}
+
+.ASSET_OTHER_DETAIL {
+    font-size: 0.75rem;
+    opacity: 0.75;
+    max-width: 16rem;
+    overflow-wrap: anywhere;
+}
+
+.ASSET_OPEN {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    white-space: nowrap;
+}

package/src/yui_asset.js

@@ -19,8 +19,17 @@ import {
     createElement2, log_error
 } from "@yuneta/gobj-js";
 
+import {t} from "i18next";
+
 import "./yui_asset.css";
 
+/*
+ *  The attribute that marks an element holding a `blob:` url this module
+ *  created. A blob url keeps its bytes alive until it is revoked, so
+ *  whoever removes the element calls yui_asset_release() on it.
+ */
+const BLOB_ATTR = "data-yui-blob";
+
 /*
  *  A column that holds a link comes back in one of THREE shapes, and which
  *  one is the READER's choice, not the schema's:
@@ -139,6 +148,170 @@ function yui_asset_missing(detail, opts = {})
     return createElement2(["div", attrs, children]);
 }
 
+/***************************************************************************
+ *  What KIND of thing a content type is, as far as showing it goes:
+ *
+ *      "image" | "video" | "audio"     the browser draws it in an element
+ *      "pdf"                           the browser's own viewer, in a frame
+ *      "other"                         nothing here can draw it: a card
+ *                                      saying what it is, and a way to open
+ *
+ *  The content type is the one the BACKEND stored (treedb checks it
+ *  against the bytes), never the extension of a name a person typed.
+ ***************************************************************************/
+function yui_asset_kind(content_type)
+{
+    const ct = String(content_type || "").toLowerCase().split(";")[0].trim();
+    if(ct.startsWith("image/")) {
+        return "image";
+    }
+    if(ct.startsWith("video/")) {
+        return "video";
+    }
+    if(ct.startsWith("audio/")) {
+        return "audio";
+    }
+    if(ct === "application/pdf") {
+        return "pdf";
+    }
+    return "other";
+}
+
+/***************************************************************************
+ *  A `blob:` url for inline bytes, or null.
+ *
+ *  A frame and a new tab need a blob and not a data url: Firefox refuses to
+ *  NAVIGATE to a data url (a new tab opened on one stays blank), and its
+ *  PDF viewer does not run on one inside a frame.
+ ***************************************************************************/
+function base64_to_blob_url(content64, content_type)
+{
+    try {
+        const binary = atob(content64);
+        const bytes = new Uint8Array(binary.length);
+        for(let i = 0; i < binary.length; i++) {
+            bytes[i] = binary.charCodeAt(i);
+        }
+        const blob = new Blob([bytes], {type: content_type || "application/octet-stream"});
+        return URL.createObjectURL(blob);
+    } catch(e) {
+        log_error(`cannot decode the bytes of an asset: ${e && e.message? e.message: e}`);
+        return null;
+    }
+}
+
+/***************************************************************************
+ *  Where a frame or a link can take an asset:
+ *
+ *      -> {href, blob}     `blob` true when href is a blob url THIS call
+ *                          created, which the caller must mark (BLOB_ATTR)
+ *                          so that yui_asset_release() revokes it
+ *      -> null             nothing to open
+ ***************************************************************************/
+function yui_asset_href(answer)
+{
+    if(!answer) {
+        return null;
+    }
+    if(answer.mode === "url" && answer.url) {
+        return {href: answer.url, blob: false};
+    }
+    if(answer.mode === "inline" && answer.content64) {
+        const href = base64_to_blob_url(answer.content64, answer.content_type);
+        return href? {href: href, blob: true}: null;
+    }
+    return null;
+}
+
+/***************************************************************************
+ *  The answer a picked `File` would have had from the backend.
+ *
+ *  A file a person picked and has not saved yet is shown BEFORE it exists
+ *  as an asset, so it goes through the same element as a stored one: a
+ *  `url` answer whose url is a blob url over the File itself -- which
+ *  reads nothing until the browser draws it.
+ *
+ *  `blob: true` says the url is owned: whoever drops the element revokes
+ *  it with yui_asset_release().
+ ***************************************************************************/
+function yui_asset_file_answer(file)
+{
+    if(!file) {
+        return null;
+    }
+    let url;
+    try {
+        url = URL.createObjectURL(file);
+    } catch(e) {
+        log_error(`cannot preview the picked file: ${e && e.message? e.message: e}`);
+        return null;
+    }
+    return {
+        mode:           "url",
+        url:            url,
+        content_type:   file.type || "",
+        size:           file.size,
+        original_name:  file.name || "",
+        blob:           true
+    };
+}
+
+/***************************************************************************
+ *  Revoke every blob url this module created under `$root`, $root included.
+ *
+ *  Call it on whatever element is about to be dropped: a preview being
+ *  replaced, a dialog being closed. A blob url that is never revoked keeps
+ *  its bytes in memory for the life of the page.
+ ***************************************************************************/
+function yui_asset_release($root)
+{
+    if(!$root || !$root.querySelectorAll) {
+        return;
+    }
+    const marked = Array.from($root.querySelectorAll(`[${BLOB_ATTR}]`));
+    if($root.hasAttribute && $root.hasAttribute(BLOB_ATTR)) {
+        marked.push($root);
+    }
+    marked.forEach(($el) => {
+        const url = $el.getAttribute(BLOB_ATTR);
+        $el.removeAttribute(BLOB_ATTR);
+        if(url) {
+            URL.revokeObjectURL(url);
+        }
+    });
+}
+
+/***************************************************************************
+ *  The link that opens an asset in a new tab, or null when there is
+ *  nothing to open. A control: named for the eye and for a reader, both
+ *  through their keys so a language change re-translates them.
+ ***************************************************************************/
+function yui_asset_open_link(answer, opts = {})
+{
+    const target = yui_asset_href(answer);
+    if(!target) {
+        return null;
+    }
+    const key = "open in a new tab";
+    const $a = createElement2(["a", {
+        class: `ASSET_OPEN ${opts.class || ""}`.trim(),
+        target: "_blank",
+        rel: "noopener",
+        title: t(key),
+        "data-i18n-title": key,
+        "aria-label": t(key),
+        "data-i18n-aria-label": key
+    }, [
+        ["span", {class: "ASSET_OPEN_ICON yi-link"}],
+        ["span", {class: "ASSET_OPEN_LABEL", i18n: key}, key]
+    ]]);
+    $a.href = target.href;
+    if(target.blob) {
+        $a.setAttribute(BLOB_ATTR, target.href);
+    }
+    return $a;
+}
+
 /***************************************************************************
  *  The element for one asset.
  *
@@ -148,6 +321,11 @@ function yui_asset_missing(detail, opts = {})
  *
  *  `detail` is what the missing marker shows -- pass the original name or
  *  the source path, the thing a person can act on.
+ *
+ *  A PDF goes in a frame, where the browser's own viewer draws it. Any
+ *  other kind gets a card: what it is, and a link to open it.
+ *  TODO: draw more kinds in place (plain text, office documents); today
+ *  they are only opened in a new tab, where the browser does what it can.
  ***************************************************************************/
 function yui_asset_element(answer, opts = {})
 {
@@ -156,19 +334,55 @@ function yui_asset_element(answer, opts = {})
         return yui_asset_missing(opts.detail, opts);
     }
 
-    const ct = (answer.content_type || "").toLowerCase();
+    const kind = yui_asset_kind(answer.content_type);
     const cls = `ASSET_MEDIA ${opts.class || ""}`.trim();
 
+    if(kind === "pdf") {
+        const target = yui_asset_href(answer);
+        if(!target) {
+            return yui_asset_missing(opts.detail, opts);    // Error already logged
+        }
+        /*  The title is the DETAIL (a name, data) or the content type:
+         *  a frame is announced by its title.  */
+        const $frame = createElement2(["iframe", {
+            class: `${cls} ASSET_DOCUMENT`,
+            title: opts.detail || answer.content_type || ""
+        }]);
+        $frame.src = target.href;
+        if(target.blob) {
+            $frame.setAttribute(BLOB_ATTR, target.href);
+        }
+        return $frame;
+    }
+
+    if(kind === "other") {
+        const children = [
+            ["span", {class: "ASSET_OTHER_TYPE"}, String(answer.content_type || "?")]
+        ];
+        if(opts.detail) {
+            children.push(["span", {class: "ASSET_OTHER_DETAIL"}, String(opts.detail)]);
+        }
+        const $card = createElement2(["div", {class: `${cls} ASSET_OTHER`}, children]);
+        const $open = yui_asset_open_link(answer);
+        if($open) {
+            $card.appendChild($open);
+        }
+        return $card;
+    }
+
     let el;
-    if(ct.startsWith("video/")) {
+    if(kind === "video") {
         el = createElement2(["video", {class: cls, controls: "", preload: "metadata"}]);
-    } else if(ct.startsWith("audio/")) {
+    } else if(kind === "audio") {
         el = createElement2(["audio", {class: cls, controls: "", preload: "metadata"}]);
     } else {
         el = createElement2(["img", {class: cls, loading: "lazy"}]);
         el.alt = opts.alt || opts.detail || "";
     }
     el.src = src;
+    if(answer.blob) {
+        el.setAttribute(BLOB_ATTR, src);
+    }
 
     /*
      *  A url can 403 (expired signature), a blob can be gone from the
@@ -191,6 +405,7 @@ function yui_asset_element(answer, opts = {})
         if(el.parentNode) {
             el.parentNode.replaceChild($marker, el);
         }
+        yui_asset_release(el);
     };
 
     return el;
@@ -200,6 +415,11 @@ export {
     yui_asset_id,
     yui_asset_ids,
     yui_asset_src,
+    yui_asset_kind,
+    yui_asset_href,
+    yui_asset_file_answer,
+    yui_asset_release,
+    yui_asset_open_link,
     yui_asset_element,
     yui_asset_missing
 };

package/src/yui_asset.test.js

@@ -9,8 +9,26 @@ import {
     yui_asset_id,
     yui_asset_ids,
     yui_asset_src,
+    yui_asset_kind,
 } from "./yui_asset.js";
 
+/*
+ *  The kind decides the element: an <img> over a PDF is the broken box
+ *  this module exists to remove, and a parameter on the content type must
+ *  not turn a PDF into "something nothing can draw".
+ */
+test("the kind comes from the stored content type", () => {
+    expect(yui_asset_kind("image/jpeg")).toBe("image");
+    expect(yui_asset_kind("IMAGE/PNG")).toBe("image");
+    expect(yui_asset_kind("video/mp4")).toBe("video");
+    expect(yui_asset_kind("audio/mpeg")).toBe("audio");
+    expect(yui_asset_kind("application/pdf")).toBe("pdf");
+    expect(yui_asset_kind("application/pdf; charset=binary")).toBe("pdf");
+    expect(yui_asset_kind("application/zip")).toBe("other");
+    expect(yui_asset_kind("")).toBe("other");
+    expect(yui_asset_kind(undefined)).toBe("other");
+});
+
 /*
  *  A treedb fkey is `topic^id^hook`.
  */

package/src/yui_file_field.css

@@ -65,3 +65,31 @@
     opacity: 0.6;
     font-style: italic;
 }
+
+/*
+ *  What the column holds, SEEN: the picked file before it is saved, or the
+ *  stored asset once the host has fetched it. A row of its own under the
+ *  control, and bounded, so a tall photo does not push the rest of the
+ *  form off the screen.
+ */
+.FILE_FIELD .FILE_PREVIEW {
+    flex: 1 1 100%;
+    min-width: 0;
+}
+
+.FILE_FIELD .FILE_PREVIEW img.FILE_PREVIEW_MEDIA,
+.FILE_FIELD .FILE_PREVIEW video.FILE_PREVIEW_MEDIA {
+    display: block;
+    max-width: 100%;
+    max-height: 14rem;
+    object-fit: contain;
+}
+
+.FILE_FIELD .FILE_PREVIEW audio.FILE_PREVIEW_MEDIA {
+    display: block;
+    width: 100%;
+}
+
+.FILE_FIELD .FILE_PREVIEW iframe.FILE_PREVIEW_MEDIA {
+    min-height: 18rem;
+}

package/src/yui_file_field.js

@@ -39,6 +39,10 @@ import {
     createElement2, log_error
 } from "@yuneta/gobj-js";
 
+import {
+    yui_asset_element, yui_asset_file_answer, yui_asset_release
+} from "./yui_asset.js";
+
 import "./yui_file_field.css";
 
 
@@ -286,13 +290,21 @@ function yui_file_control(gobj, {name, value, readonly, accept, on_pick})
     const $name = createElement2(["span", {class: "FILE_NAME"}]);
     const $size = createElement2(["span", {class: "FILE_SIZE"}]);
     const $state = createElement2(["span", {class: "FILE_STATE"}]);
+    const $preview = createElement2(["div", {class: "FILE_PREVIEW", hidden: ""}]);
 
     const $control = createElement2(["div", {class: "FILE_FIELD"}, [
-        $input, $pick, $name, $size, $state, $clear
+        $input, $pick, $name, $size, $state, $clear, $preview
     ]]);
 
     $control.yui_file = null;
     $control.yui_file_value = value || "";
+    /*
+     *  What the HOST fetched for the asset the column names:
+     *  {id, answer, error}. The form cannot fetch it -- asking the backend
+     *  is the host's action -- so it is handed in (EV_SET_FILE_PREVIEW)
+     *  and drawn only while the column still names THAT id.
+     */
+    $control.yui_file_stored = null;
 
     /*
      *  Three things it can be showing, and they are not the same thing:
@@ -325,6 +337,38 @@ function yui_file_control(gobj, {name, value, readonly, accept, on_pick})
 
         $clear.hidden = readonly || (!picked && !kept);
         $pick.hidden = !!readonly;
+
+        /*
+         *  The preview follows the same three states. A picked file is
+         *  shown from the File itself (a blob url, nothing read); a kept
+         *  id only once the host has handed its answer in -- until then
+         *  nothing, because a form whose host never fetches must not show
+         *  a "loading" that never ends.
+         */
+        yui_asset_release($preview);
+        $preview.replaceChildren();
+        let $media = null;
+        if(picked) {
+            const answer = yui_asset_file_answer(picked);
+            if(answer) {
+                $media = yui_asset_element(answer, {
+                    detail: picked.name || "",
+                    class: "FILE_PREVIEW_MEDIA"
+                });
+            }
+        } else if(kept) {
+            const stored = $control.yui_file_stored;
+            if(stored && stored.id === kept) {
+                $media = yui_asset_element(stored.answer, {
+                    detail: stored.error || kept,
+                    class: "FILE_PREVIEW_MEDIA"
+                });
+            }
+        }
+        if($media) {
+            $preview.appendChild($media);
+        }
+        $preview.hidden = !$media;
     };
 
     if(!readonly) {