craft-library 0.1.3 → 0.3.0

package/dist/cdn.js

@@ -1,3 +1,4 @@
-// the one-file build for a <script> tag: registers the three tags and exposes the mount functions
-import { mountLike, mountMagnet, mountGlassNav } from './elements.js';
-window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav };
+// the one-file build for a <script> tag: registers the five tags and exposes the mount functions (the 3D pieces' scenes
+// are fetched from next to this file the first time one is mounted)
+import { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank } from './elements.js';
+window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank };

package/dist/craft.js

@@ -1,4 +1,4 @@
-/* Craft Library, by Sara Lobo · liquid glass nav bar, bursting heart, magnetic icon · <glass-nav>, <like-button>, <magnetic-icon> */
+/* Craft Library, by Sara Lobo · liquid glass nav bar, bursting heart, magnetic icon, iridescent card, glass piggy bank · <glass-nav>, <like-button>, <magnetic-icon>, <iridescent-card>, <piggy-bank> */
 (() => {
   // dist/style.js
   var done = /* @__PURE__ */ new Set();
@@ -1309,6 +1309,89 @@
     };
   }
 
+  // src/card-load-cdn.js
+  var me = typeof document !== "undefined" && document.currentScript ? document.currentScript.src : "";
+  var base = me ? me.slice(0, me.lastIndexOf("/") + 1) : "https://cdn.jsdelivr.net/npm/craft-library@0/dist/";
+  var loadCard = () => import(base + "card.cdn.js");
+
+  // dist/card-mount.js
+  var LABEL = "Credit card. Press to turn it over and see the back.";
+  var KEYS = ["name", "number", "expiry", "cvv", "logo", "size", "entrance", "interactive"];
+  function mountIridescentCard(host, o = {}) {
+    let card = null, gone = false;
+    const opts = { label: o.label || LABEL };
+    for (const k of KEYS) if (o[k] !== void 0 && o[k] !== null) opts[k] = o[k];
+    if (typeof opts.number === "string") opts.number = opts.number.trim().split(/\s+/);
+    const turned = (e) => {
+      if (o.onTurn) o.onTurn(e.detail.face);
+    };
+    host.addEventListener("cardturn", turned);
+    const ready = loadCard().then((m) => {
+      if (gone) return null;
+      if (!opts.logo && m.LOGO) opts.logo = m.LOGO;
+      card = m.mountCard(host, opts);
+      return card.ready.then(() => card);
+    });
+    return {
+      ready,
+      turn: (dir) => {
+        if (card) card.turn(dir);
+      },
+      show: (face) => {
+        if (card) card.show(face);
+      },
+      play: () => {
+        if (card) card.play();
+      },
+      get face() {
+        return card ? card.face : "front";
+      },
+      destroy() {
+        gone = true;
+        host.removeEventListener("cardturn", turned);
+        if (card) card.destroy();
+        card = null;
+      }
+    };
+  }
+
+  // src/piggy-load-cdn.js
+  var me2 = typeof document !== "undefined" && document.currentScript ? document.currentScript.src : "";
+  var base2 = me2 ? me2.slice(0, me2.lastIndexOf("/") + 1) : "https://cdn.jsdelivr.net/npm/craft-library@0/dist/";
+  var loadPiggy = () => import(base2 + "piggy.cdn.js");
+
+  // dist/piggy-mount.js
+  var LABEL2 = "A glass piggy bank hops in, coins drop in through its slot and it closes its eyes, happy.";
+  function mountPiggyBank(host, o = {}) {
+    let pig = null, gone = false, wantPlay = false;
+    const opts = { label: o.label || LABEL2 };
+    if (o.autoplay === false) opts.autoplay = false;
+    if (o.interactive === false) opts.interactive = false;
+    const done2 = () => {
+      if (o.onDone) o.onDone();
+    };
+    host.addEventListener("piggydone", done2);
+    const ready = loadPiggy().then((m) => {
+      if (gone) return null;
+      pig = m.mountPiggy(host, opts);
+      if (wantPlay) pig.play();
+      return pig.ready.then(() => pig);
+    });
+    return {
+      ready,
+      play: () => {
+        if (pig) pig.play();
+        else wantPlay = true;
+      },
+      destroy() {
+        gone = true;
+        host.removeEventListener("piggydone", done2);
+        if (pig) pig.destroy();
+        pig = null;
+      }
+    };
+  }
+
   // dist/elements.js
   function define(name, mount, options) {
     if (typeof customElements === "undefined" || customElements.get(name)) return;
@@ -1342,7 +1425,30 @@
       send(el, "select", { index });
     }
   }));
+  define("iridescent-card", (el, o) => {
+    css("craft-card-host", ":where(iridescent-card){display:block;position:relative;width:100%;min-width:300px;height:480px}");
+    return mountIridescentCard(el, o);
+  }, (el) => ({
+    name: el.getAttribute("name") || void 0,
+    number: el.getAttribute("number") || void 0,
+    expiry: el.getAttribute("expiry") || void 0,
+    cvv: el.getAttribute("cvv") || void 0,
+    logo: el.getAttribute("logo") || void 0,
+    size: el.getAttribute("size") ? +el.getAttribute("size") : void 0,
+    entrance: el.getAttribute("entrance") === "false" ? false : void 0,
+    label: el.getAttribute("label") || void 0
+  }));
+  define("piggy-bank", (el, o) => {
+    css("craft-piggy-host", ":where(piggy-bank){display:block;position:relative;width:100%;min-width:280px;height:560px}");
+    const m = mountPiggyBank(el, o);
+    el.play = m.play;
+    return m;
+  }, (el) => ({
+    autoplay: el.getAttribute("autoplay") === "false" ? false : void 0,
+    interactive: el.getAttribute("interactive") === "false" ? false : void 0,
+    label: el.getAttribute("label") || void 0
+  }));
 
   // dist/cdn.js
-  window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav };
+  window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank };
 })();

package/dist/elements.js

@@ -1,8 +1,10 @@
-// <glass-nav>, <like-button> and <magnetic-icon>: the pieces as HTML tags, for pages without React.
+// <glass-nav>, <like-button>, <magnetic-icon>, <iridescent-card> and <piggy-bank>: the pieces as HTML tags, for pages without React.
 // They render into the page itself (no shadow root), so the glass can blend with what is behind it.
 import { mountLike } from './like.js';
 import { mountMagnet } from './magnet.js';
 import { mountGlassNav } from './glassnav.js';
+import { mountIridescentCard } from './card-mount.js';
+import { mountPiggyBank } from './piggy-mount.js';
 import { css } from './style.js';
 
 function define(name, mount, options) {
@@ -33,4 +35,34 @@ define('glass-nav', mountGlassNav, (el) => ({
   onSelect: (index) => { el.setAttribute('active', index); send(el, 'select', { index }); }
 }));
 
-export { mountLike, mountMagnet, mountGlassNav };
+// the card fills the tag: a block, 100% wide (at least 300px, so a shrink-to-fit parent can't fold it) and 480px tall
+// unless the page sizes it (zero specificity, so any rule wins). Each turn bubbles up from inside as a "cardturn"
+// event, with e.detail.face.
+define('iridescent-card', (el, o) => {
+  css('craft-card-host', ':where(iridescent-card){display:block;position:relative;width:100%;min-width:300px;height:480px}');
+  return mountIridescentCard(el, o);
+}, (el) => ({
+  name: el.getAttribute('name') || undefined,
+  number: el.getAttribute('number') || undefined,
+  expiry: el.getAttribute('expiry') || undefined,
+  cvv: el.getAttribute('cvv') || undefined,
+  logo: el.getAttribute('logo') || undefined,
+  size: el.getAttribute('size') ? +el.getAttribute('size') : undefined,
+  entrance: el.getAttribute('entrance') === 'false' ? false : undefined,
+  label: el.getAttribute('label') || undefined
+}));
+
+// the piggy bank fills the tag: a block, 100% wide (at least 280px) and 560px tall unless the page sizes it. It plays
+// the first time it comes into view; each play ends with a "piggydone" event. el.play() plays it again.
+define('piggy-bank', (el, o) => {
+  css('craft-piggy-host', ':where(piggy-bank){display:block;position:relative;width:100%;min-width:280px;height:560px}');
+  const m = mountPiggyBank(el, o);
+  el.play = m.play;
+  return m;
+}, (el) => ({
+  autoplay: el.getAttribute('autoplay') === 'false' ? false : undefined,
+  interactive: el.getAttribute('interactive') === 'false' ? false : undefined,
+  label: el.getAttribute('label') || undefined
+}));
+
+export { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank };

package/dist/index.js

@@ -4,6 +4,8 @@ import { createElement, useEffect, useRef } from 'react';
 import { mountLike } from './like.js';
 import { mountMagnet } from './magnet.js';
 import { mountGlassNav } from './glassnav.js';
+import { mountIridescentCard } from './card-mount.js';
+import { mountPiggyBank } from './piggy-mount.js';
 
 const HOST = { display: 'inline-block', lineHeight: 0, verticalAlign: 'middle' };
 
@@ -40,4 +42,30 @@ export function GlassNav({ active = 2, labels, label, onSelect, className, style
   return createElement('span', { ref: host, className, style });
 }
 
-export { mountLike, mountMagnet, mountGlassNav };
+// The card fills the box it renders (100% wide and `height` tall, 480px by default) and sits centred in it. The box
+// keeps at least 300px of width, so a parent that shrinks to its content (a centring flex row) can't fold it to nothing.
+// It loads its 3D scene (three.js) the first time it mounts. onTurn reports each turn with the face now showing.
+export function IridescentCard({ height = 480, size, name, number, expiry, cvv, logo, entrance, label, onTurn, className, style }) {
+  const host = useRef(null), turn = useLatest(onTurn);
+  const num = Array.isArray(number) ? number.join(' ') : number;
+  useEffect(() => {
+    const m = mountIridescentCard(host.current, { size, name, number: num, expiry, cvv, logo, entrance, label, onTurn: (f) => turn.current && turn.current(f) });
+    return () => m.destroy();
+  }, [size, name, num, expiry, cvv, logo, entrance, label]);
+  return createElement('div', { ref: host, className, style: { position: 'relative', width: '100%', minWidth: 300, height, ...style } });
+}
+
+// The piggy bank fills the box it renders (100% wide and `height` tall, 560px by default; it is made for a phone screen)
+// and plays its moment the first time it comes into view; a tap plays it again. replay: change it (a counter) to play
+// it again from code. It loads its 3D scene (three.js) the first time it mounts. onDone reports the end of each play.
+export function PiggyBank({ height = 560, autoplay, interactive, replay, label, onDone, className, style }) {
+  const host = useRef(null), pig = useRef(null), last = useRef(replay), done = useLatest(onDone);
+  useEffect(() => {
+    const m = pig.current = mountPiggyBank(host.current, { autoplay, interactive, label, onDone: () => done.current && done.current() });
+    return () => { m.destroy(); pig.current = null; };
+  }, [autoplay, interactive, label]);
+  useEffect(() => { if (last.current === replay) return; last.current = replay; if (pig.current) pig.current.play(); }, [replay]);
+  return createElement('div', { ref: host, className, style: { position: 'relative', width: '100%', minWidth: 280, height, ...style } });
+}
+
+export { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank };

package/dist/piggy-load.js

@@ -0,0 +1,2 @@
+// where the piggy bank comes from: for bundlers, the package's piggy.js (it imports the `three` dependency)
+export const loadPiggy = () => import('./piggy.js');

package/dist/piggy-mount.js

@@ -0,0 +1,27 @@
+// Glass piggy bank: the mount around the library's piggy.js. piggy.js, and three.js with it, loads only when a piggy
+// bank is mounted, so the other pieces stay light.
+import { loadPiggy } from './piggy-load.js';
+
+const LABEL = 'A glass piggy bank hops in, coins drop in through its slot and it closes its eyes, happy.';
+
+// host: the element the moment fills (give it a size). o: { autoplay (false: wait for play()), interactive (false: no
+// tap to replay, no drag), label, onDone() after each play }
+export function mountPiggyBank(host, o = {}) {
+  let pig = null, gone = false, wantPlay = false;
+  const opts = { label: o.label || LABEL };
+  if (o.autoplay === false) opts.autoplay = false;
+  if (o.interactive === false) opts.interactive = false;
+  const done = () => { if (o.onDone) o.onDone(); };
+  host.addEventListener('piggydone', done);
+  const ready = loadPiggy().then((m) => {
+    if (gone) return null;
+    pig = m.mountPiggy(host, opts);
+    if (wantPlay) pig.play();
+    return pig.ready.then(() => pig);
+  });
+  return {
+    ready,
+    play: () => { if (pig) pig.play(); else wantPlay = true; },
+    destroy() { gone = true; host.removeEventListener('piggydone', done); if (pig) pig.destroy(); pig = null; }
+  };
+}