examples

cycle through local content

• A progressively enhanced quotation.
• The initial quote is loaded directly in the HTML.
• The progressive enhancement rotates new quotes in on an interval.
• The full set of quotes is loaded via a snippet of JSON on the page contained in a <script> tag with a type="application/json" attribute and the reference name of quotes defined via the data-template="quotes" attribute.
• The quotes are accessed via bitty's b.data object using the same quotes key from the reference name.

html

<div data-r="loop">
  <blockquote>
    I think it's terribly dangerous for an 
    artist to fulfill other people's expectations.
  </blockquote>
  <div class="by">-- <cite>David Bowie</cite></div>
</div>

<script data-template="quotes" type="application/json">
{
  "list": [
    [
      "I think it's terribly dangerous for an artist to fulfill other people's expectations.",
      "David Bowie"
    ],
    [
      "Ever tried. Ever failed. No matter. Try Again. Fail again. Fail better.",
      "Samuel Becket"
    ],
    [
      "I write because I don't know what I think until I read what I say.",
      "Flannery O'Connor"
    ],
    [
      "When people start learning something new, they start preceiving  the world around them differently.",
      "Ze Frank"
    ]
  ]
}
</script>

javascript

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

let quotes;

export async function loop(_, __, el) {
  quotes = b.data.quotes.list;
  for (let count = 1; count > 0; count += 1) {
    await b.sleep(2000);
    b.setCSS("--text-color", "var(--match-color)");
    await b.sleep(1200);
    changeQuote(count, el);
    b.setCSS("--text-color", "var(--default-color)");
  }
}

function changeQuote(count, el) {
  const quote = quotes[count % quotes.length];
  b.qs("blockquote", el).innerHTML = quote[0];
  b.qs("cite", el).innerHTML = quote[1];
}