No framework but still...

Calotte

While we try to keep JavaScript to a minimum, we gave ourselves a handy little tool to try and get that native app feel.

What is Wheat's App.js?

The App.js file is a small javascript library exposing various states of the document, heavily inspired by the readyState API. When a state is triggered, an event fires and the current state is applied to the <body> in a data-state attribute, allowing you to leverage CSS for effects and timing. Each state can be delayed and adjusted to compensate for prolonged loading time caused by outside events (like a bad network connection).

Links

App.js also manages links. Its primary goal is to trigger the navigating series of events while offering a nice little spot for manipulating internal and external links by modifying the setExtLinkBehaviour and setInLinkBehaviour functions. By default, the target="_blank" and rel="noopener" attributes are added to external links.

When modifying the DOM structure (like adding elements asynchronously), you can make sure all links are managed using the App.setLinkBehaviour(elements) function.

Images

All images with the loading="lazy" attribute will, by default have their opacity set to 0. An animation (see app.css) will make sure they only appear when fully loaded, giving your website an native app feel.

When modifying the DOM structure (like adding elements asynchronously), you can make sure all images are managed using the App.setImgBehaviour(elements) function.

Wheat also comes with a base64 placeholder. You'll need the File Content Plugin and some editing in img.html.twig and app.js.

CSS

The app.css file is included with an up-to-date list of all selectors in context. It also comes with a basic fade-in for lazyloaded images.

Events

  • appInteractive
  • appComplete
  • appNavigating
  • appNavigatingForward
  • appNavigatingBackward

Selectors

  • body[data-state="loading"]
  • body[data-state="interactive"]
  • body[data-state="complete"]
  • body[data-state^="navigating"]
  • body[data-state^="navigating-forward"]
  • body[data-state^="navigating-backward"]
  • img[data-state="complete"]

The syntax is currently way too verbose, often ending in convoluted CSS files. This will likely change soon.

Using an event

document.addEventListener('appInteractive', () => {
    Stuff happening
});

While we try to keep JavaScript to a minimum, we gave ourselves a handy little tool to try and get that native app feel.

What is Wheat's App.js?

The App.js file is a small javascript library exposing various states of the document, heavily inspired by the readyState API. When a state is triggered, an event fires and the current state is applied to the <body> in a data-state attribute, allowing you to leverage CSS for effects and timing. Each state can be delayed and adjusted to compensate for prolonged loading time caused by outside events (like a bad network connection).

Links

App.js also manages links. Its primary goal is to trigger the navigating series of events while offering a nice little spot for manipulating internal and external links by modifying the setExtLinkBehaviour and setInLinkBehaviour functions. By default, the target="_blank" and rel="noopener" attributes are added to external links.

When modifying the DOM structure (like adding elements asynchronously), you can make sure all links are managed using the App.setLinkBehaviour(elements) function.

Images

All images with the loading="lazy" attribute will, by default have their opacity set to 0. An animation (see app.css) will make sure they only appear when fully loaded, giving your website an native app feel.

When modifying the DOM structure (like adding elements asynchronously), you can make sure all images are managed using the App.setImgBehaviour(elements) function.

Wheat also comes with a base64 placeholder. You'll need the File Content Plugin and some editing in img.html.twig and app.js.

CSS

The app.css file is included with an up-to-date list of all selectors in context. It also comes with a basic fade-in for lazyloaded images.

Events

  • appInteractive
  • appComplete
  • appNavigating
  • appNavigatingForward
  • appNavigatingBackward

Selectors

  • body[data-state="loading"]
  • body[data-state="interactive"]
  • body[data-state="complete"]
  • body[data-state^="navigating"]
  • body[data-state^="navigating-forward"]
  • body[data-state^="navigating-backward"]
  • img[data-state="complete"]

The syntax is currently way too verbose, often ending in convoluted CSS files. This will likely change soon.

Using an event

document.addEventListener('appInteractive', () => {
    Stuff happening
});

🥰
Welcome back!

👋
You've been logged out.

Results