examples

cycle through remote content

• This is the same as the prior example with the exception that the data is loaded from an external file instead of being included directly on the page.

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>

javascript

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

let quotes;
const url = "/versions/8/0/0/examples/progressive-enhancement/cycle-remote-content/data.json";

export async function init() {
  const data = await b.getData(url);
  if (data !== undefined) {
    quotes = data.quotes;
    b.trigger("loop");
  }
}

export async function loop(_, __, el) {
  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];
}

{
  "quotes": [
    [
      "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"
    ]
  ]
}