@es-joy/jsoe 0.7.0 → 0.8.0

package/CHANGES.md

@@ -1,5 +1,15 @@
 # CHANGES TO `@es-joy/jsoe`
 
+## 0.8.0
+
+- feat: make `File` fully editable (also by modified date or
+    string contents or if by scratch)
+
+## 0.7.1
+
+- feat: fix bug with `file` in array/object context not triggering file
+    picker
+
 ## 0.7.0
 
 - feat: add `file` type including video, audio, photo, and

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@es-joy/jsoe",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "main": "./src/index.js",

package/src/fundamentalTypes/arrayType.js

@@ -1691,7 +1691,7 @@ const arrayType = {
             //    invalid date checkbox; is this sufficient to prevent
             //    other stray clicks apparently meant for the array
             //    and object reference checking?
-            if (target.type !== 'checkbox' && target.type !== 'radio') {
+            if (!['checkbox', 'radio', 'file'].includes(target.type)) {
               e.preventDefault();
             }
           }

package/src/fundamentalTypes/fileType.js

@@ -128,11 +128,60 @@ function getDateString (timestamp) {
   return dateTimeLocalValue;
 }
 
+/**
+ * @param {HTMLButtonElement & {$value: File}} viewBinary
+ * @param {{
+ *   stringContents?: string,
+ *   name?: string,
+ *   type?: string,
+ *   lastModified?: number
+ * }} value
+ * @returns {void}
+ */
+function newFileForBinary (viewBinary, value) {
+  const oldFile = /** @type {File|undefined} */ (
+    viewBinary.$value
+  );
+  // We actually want to allow creating `File`'s from scratch
+  // if (
+  //   !oldFile ||
+  //   Object.prototype.toString.call(
+  //     oldFile
+  //   ).slice(8, -1) !== 'File'
+  // ) {
+  //   return false;
+  // }
+  const file = new File(
+    [
+      value.stringContents === undefined
+        ? oldFile && Object.prototype.toString.call(
+          oldFile
+        ).slice(8, -1) === 'File'
+          ? oldFile
+          : ''
+        : value.stringContents
+    ],
+    value.name === undefined
+      ? oldFile?.name ?? ''
+      : value.name,
+    {
+      type: value.type === undefined
+        ? oldFile?.type ?? ''
+        : value.type,
+      lastModified: value.lastModified === undefined
+        ? oldFile?.lastModified ?? 0
+        : value.lastModified
+    }
+  );
+  viewBinary.$value = file;
+}
+
 /**
  * @param {File} value
+ * @param {boolean} [editable]
  * @returns {import('jamilih').JamilihArray}
  */
-function binaryButton (value) {
+function binaryButton (value, editable) {
   // @ts-expect-error It's ok
   return ['button', /** @type {import('jamilih').JamilihAttributes} */ ({
     class: 'viewBinary',
@@ -145,27 +194,49 @@ function binaryButton (value) {
        * @param {Event} e
        */
       click (e) {
+        // eslint-disable-next-line consistent-this -- Clarity
+        const viewBinary = this;
         e.preventDefault();
         if (
           !this.$value ||
           Object.prototype.toString.call(this.$value).slice(8, -1) !== 'File'
         ) {
-          dialogs.alert(
-            'There is no file chosen with binary data'
-          );
-          return;
+          // Non-editable shouldn't be empty
+          // if (!editable) {
+          //   dialogs.alert(
+          //     'There is no file chosen with binary data'
+          //   );
+          //   return;
+          // }
+
+          newFileForBinary(viewBinary, {});
         }
         const reader = new FileReader();
         reader.addEventListener('load', async function () {
-          await dialogs.alert({
-            message: ['div', [
-              'Binary source',
-              ['br'],
-              ['textarea', {class: 'view-binary'}, [
-                /* c8 ignore next */
-                /** @type {string|null} */ (reader.result) ?? ''
-              ]]
-            ]]
+          const dialog = await dialogs.makeSubmitDialog({
+            submitText: 'Save',
+            submit () {
+              const textarea = /** @type {HTMLTextAreaElement} */ (
+                $e(dialog, '.view-binary')
+              );
+              newFileForBinary(viewBinary, {
+                stringContents: textarea.value
+              });
+              dialog.close();
+            },
+            // @ts-expect-error TS bug
+            children: [
+              ['div', /** @type {import('jamilih').JamilihChildren} */ ([
+                'Binary source',
+                ['br'],
+                ['textarea', {
+                  class: 'view-binary'
+                }, [
+                  /* c8 ignore next */
+                  /** @type {string|null} */ (reader.result) ?? ''
+                ]]
+              ])]
+            ]
           });
         });
         // Seems not feasible to accurately simulate
@@ -183,7 +254,11 @@ function binaryButton (value) {
         reader.readAsBinaryString(this.$value);
       }
     }
-  }), ['View binary data']];
+  }), [
+    editable
+      ? 'Edit binary data'
+      : 'View binary data'
+  ]];
 }
 
 /**
@@ -443,7 +518,7 @@ const fileType = {
 
             /** @type {HTMLButtonElement & {$value: File|undefined}} */ ($e(
               metadataFieldset,
-              '.viewBinary'
+              'button.viewBinary'
             )).$value = typeof file.lastModified === 'number'
               ? /** @type {File} */ (file)
               : undefined;
@@ -465,30 +540,12 @@ const fileType = {
                     $e(
                       /** @type {HTMLElement} */
                       (this.parentElement?.parentElement),
-                      '.viewBinary'
+                      'button.viewBinary'
                     )
                   );
-                const oldFile = /** @type {File|undefined} */ (
-                  viewBinary.$value
-                );
-                if (
-                  !oldFile ||
-                  Object.prototype.toString.call(
-                    oldFile
-                  ).slice(8, -1) !== 'File'
-                ) {
-                  return;
-                }
-                const newName = /** @type {HTMLInputElement} */ (this).value;
-                const file = new File(
-                  [oldFile],
-                  newName,
-                  {
-                    type: oldFile.type,
-                    lastModified: oldFile.lastModified
-                  }
-                );
-                viewBinary.$value = file;
+                newFileForBinary(viewBinary, {
+                  name: /** @type {HTMLInputElement} */ (this).value
+                });
               }
             }
           }]
@@ -515,31 +572,15 @@ const fileType = {
                     $e(
                       /** @type {HTMLElement} */
                       (this.parentElement?.parentElement),
-                      '.viewBinary'
+                      'button.viewBinary'
                     )
                   );
-                const oldFile = /** @type {File|undefined} */ (
-                  viewBinary.$value
-                );
-                if (
-                  !oldFile ||
-                  Object.prototype.toString.call(
-                    oldFile
-                  ).slice(8, -1) !== 'File'
-                ) {
-                  return;
-                }
+
                 const newContentType =
                   /** @type {HTMLInputElement} */ (this).value;
-                const file = new File(
-                  [oldFile],
-                  oldFile.name,
-                  {
-                    type: newContentType,
-                    lastModified: oldFile.lastModified
-                  }
-                );
-                viewBinary.$value = file;
+                newFileForBinary(viewBinary, {
+                  type: newContentType
+                });
               }
             }
           }]
@@ -548,14 +589,35 @@ const fileType = {
         ['label', [
           'Last modified date ',
           ['input', {
-            type: 'datetime-local', disabled: true, class: 'lastModified',
+            type: 'datetime-local', class: 'lastModified',
+            step: 0.001,
             value: value.lastModified
               ? getDateString(value.lastModified)
-              : undefined
+              : undefined,
+            $on: {
+              change () {
+                const viewBinary =
+                  /**
+                   * @type {HTMLButtonElement & {$value: File}}
+                   */ (
+                    $e(
+                      /** @type {HTMLElement} */
+                      (this.parentElement?.parentElement),
+                      'button.viewBinary'
+                    )
+                  );
+
+                const newLastModified =
+                  /** @type {HTMLInputElement} */ (this).value;
+                newFileForBinary(viewBinary, {
+                  lastModified: new Date(newLastModified).getTime()
+                });
+              }
+            }
           }]
         ]],
         ['br'],
-        binaryButton(value),
+        binaryButton(value, true),
         ['button', {
           class: 'clearData',
           $on: {

package/src/utils/dialogs.js

@@ -99,11 +99,12 @@ const dialogs = {
   /**
    * @param {object} cfg
    * @param {(info: {e: Event, dialog: HTMLDialogElement}) => void} cfg.submit
+   * @param {string} [cfg.submitText]
    * @param {string} [cfg.submitClass]
    * @param {MakeCancelArgs} [cfg.args]
    * @returns {HTMLDialogElement}
    */
-  makeSubmitDialog ({submit, submitClass = 'submit', ...args}) {
+  makeSubmitDialog ({submit, submitText, submitClass = 'submit', ...args}) {
     const dialog = this.makeCancelDialog(/** @type {MakeCancelArgs} */ (args));
     $e(dialog, `button.${/** @type {MakeCancelArgs} */ (
       args
@@ -116,7 +117,7 @@ const dialogs = {
             submit.call(this, {e: /** @type {Event} */ (e), dialog});
           }
         }
-      }, [this.localeStrings.submit]),
+      }, [submitText ?? this.localeStrings.submit]),
       nbsp.repeat(2)
     );
     return dialog;