bitty installation snippets examples documentation q&a

snippets

poll data

  • Polling data can be done using b.trigger() inside a function to call itself.
  • The snippet uses the artObject template defined in the <script> tag on the page. The __TITLE__, __IMG_SRC__, and __ALT__ tokens are replaced with the data from the randomly picked /data/met/DATAID.json files.

html

<div data-r="art"></div>

<script type="text/html" data-template="artObject">
  <img src="__IMG_SRC__" alt="__ALT__" />
  <div>__TITLE__</div>
</script>

javascript

export const b = { init: "art" };

export async function art(_, __, el) {
  const dataId = b.randomInt(1, 10);
  const url = `/data/met/${dataId}.json`;
  const data = await b.getData(url);
  if (data) {
    el.replaceChildren(artObject(data));
  } else {
    el.innerHTML = "Error: Could not fetch art data";
  }
  await b.sleep(3000);
  b.trigger("art");
}

export function artObject(data) {
  const subs = {
    __TITLE__: data.title,
    __IMG_SRC__: data.primaryImage,
    __ALT__:
      `A photo of a piece entitled '${data.title}' from The Met's online gallery.`,
  };
  return b.render("artObject", subs);
}