@yuneta/gobj-ui 5.9.0 → 5.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "5.9.0",
+  "version": "5.10.0",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/yui_clipboard.js

@@ -140,4 +140,70 @@ function yui_copy_table_json(tabulator)
     });
 }
 
-export {yui_copy_text, yui_copy_json, yui_table_rows, yui_copy_table_json};
+/***************************************************************
+ *      Show a button as "done": swap its icon for a check and
+ *      its label for the given text. Idempotent — calling it
+ *      twice does not lose the original.
+ *
+ *      The TIMING is not here on purpose. A view arms its own
+ *      C_TIMER and calls yui_button_unmark() from the timeout
+ *      action, so going back is an FSM transition and shows up
+ *      in the machine trace, instead of a setTimeout nobody can
+ *      see. gobj-ui owns the look; the view owns the when.
+ *
+ *      Expects the Bulma button shape both views use:
+ *          <button><span class="icon"><span class="yi-…">
+ *                  <span>label</span></button>
+ *      The label is optional (icon-only buttons on a phone).
+ ***************************************************************/
+function yui_button_mark_done($button, label)
+{
+    if(!$button) {
+        log_error("yui_button_mark_done(): no button");
+        return;
+    }
+
+    let $icon = $button.querySelector("span.icon > span");
+    let $label = $button.querySelector("span.icon ~ span");
+
+    if($icon && $button.dataset.yuiIconWas === undefined) {
+        $button.dataset.yuiIconWas = $icon.className;
+        $icon.className = "yi-check";
+    }
+    if($label && $button.dataset.yuiLabelWas === undefined) {
+        $button.dataset.yuiLabelWas = $label.textContent;
+        $label.textContent = label;
+    }
+}
+
+/***************************************************************
+ *      Put the button back the way it was. Safe to call when
+ *      it was never marked.
+ ***************************************************************/
+function yui_button_unmark($button)
+{
+    if(!$button) {
+        return;
+    }
+
+    let $icon = $button.querySelector("span.icon > span");
+    let $label = $button.querySelector("span.icon ~ span");
+
+    if($icon && $button.dataset.yuiIconWas !== undefined) {
+        $icon.className = $button.dataset.yuiIconWas;
+        delete $button.dataset.yuiIconWas;
+    }
+    if($label && $button.dataset.yuiLabelWas !== undefined) {
+        $label.textContent = $button.dataset.yuiLabelWas;
+        delete $button.dataset.yuiLabelWas;
+    }
+}
+
+export {
+    yui_copy_text,
+    yui_copy_json,
+    yui_table_rows,
+    yui_copy_table_json,
+    yui_button_mark_done,
+    yui_button_unmark,
+};

package/src/yui_clipboard.test.js

@@ -10,6 +10,8 @@ import {
     yui_copy_json,
     yui_table_rows,
     yui_copy_table_json,
+    yui_button_mark_done,
+    yui_button_unmark,
 } from "./yui_clipboard.js";
 
 let written;
@@ -110,3 +112,73 @@ test("copy_table_json: counts the SELECTION when there is one", async () => {
     let active = [{id: 1}, {id: 2}, {id: 3}];
     await expect(yui_copy_table_json(fake_table(active, [{id: 2}]))).resolves.toBe(1);
 });
+
+/*============================================================
+ *      yui_button_mark_done / yui_button_unmark
+ *
+ *  Doubles instead of jsdom: the library has no DOM test
+ *  environment and does not need one for this. What is worth
+ *  testing here is the save/restore bookkeeping; that the
+ *  selectors match the real markup is the app's job to prove.
+ *============================================================*/
+function fake_button(with_label)
+{
+    let $icon = {className: "yi-copy"};
+    let $label = with_label? {textContent: "Copy JSON"} : null;
+
+    return {
+        $icon: $icon,
+        $label: $label,
+        dataset: {},
+        querySelector: function(sel) {
+            if(sel === "span.icon > span") {
+                return $icon;
+            }
+            return $label;
+        }
+    };
+}
+
+test("mark_done: swaps the glyph for a check and the label", () => {
+    let $b = fake_button(true);
+    yui_button_mark_done($b, "Copied");
+    expect($b.$icon.className).toBe("yi-check");
+    expect($b.$label.textContent).toBe("Copied");
+});
+
+test("unmark: puts the original glyph and label back", () => {
+    let $b = fake_button(true);
+    yui_button_mark_done($b, "Copied");
+    yui_button_unmark($b);
+    expect($b.$icon.className).toBe("yi-copy");
+    expect($b.$label.textContent).toBe("Copy JSON");
+});
+
+test("mark_done twice does NOT lose the original", () => {
+    let $b = fake_button(true);
+    yui_button_mark_done($b, "Copied");
+    yui_button_mark_done($b, "Copied again");
+    yui_button_unmark($b);
+    expect($b.$icon.className).toBe("yi-copy");
+    expect($b.$label.textContent).toBe("Copy JSON");
+});
+
+test("an icon-only button (no label) round-trips too", () => {
+    let $b = fake_button(false);
+    yui_button_mark_done($b, "Copied");
+    expect($b.$icon.className).toBe("yi-check");
+    yui_button_unmark($b);
+    expect($b.$icon.className).toBe("yi-copy");
+});
+
+test("unmark on a button that was never marked is a no-op", () => {
+    let $b = fake_button(true);
+    yui_button_unmark($b);
+    expect($b.$icon.className).toBe("yi-copy");
+    expect($b.$label.textContent).toBe("Copy JSON");
+});
+
+test("mark_done without a button is reported, not thrown", () => {
+    expect(() => yui_button_mark_done(null, "Copied")).not.toThrow();
+    expect(() => yui_button_unmark(null)).not.toThrow();
+});