Ornament

Component Framework

Most javascript components will be exposed to the Ornament.Component namespace.

There is also the Ornament.C shorthand namespace for convenience.

For example you can pop open the TrayNav programatically with Ornament.C.TrayNav.openMenu()

Execute Ornament.C in your console to see what you have available to you.

---

Feature detection

You can view a list of supported features that Ornament looks for by executing this command:

Ornament.features

There are some basic feature detection booleans available:

Ornament.features.serviceWorker

Ornament.features.geolocation

Ornament.features.turbolinks

Ornament.features.ie8

---

Asset preloader

You can tell the browser to try and preload assets using Ornament.assetPreloader([]);, eg:

Ornament.assetPreloader([ "/assets/image1.jpg", "/assets/image2.jpg" ]);

---

Window Dimensions

You can return a browser-agnostic window dimensions using the following functions:

• Ornament.windowWidth();
• Ornament.windowHeight();

---

Measuring an element while it's hidden

Measuring an element can be tricky while it's hidden. This function will clone the element off the browser canvas, measure a dimension and then remove the clone:

Ornament.measure($element, metric)

For example, if I had a <div id="test" /> and wanted to measure it's height, I would use:

Ornament.measure(document.querySelector("#test"), height);

---

Animated ScrollTo

Scroll to an Y co-ordinate smoothly by using:

Ornament.bodyScroll(offset)

eg. Scroll 200px from the top of the page:

Ornament.bodyScroll(200)

You can also scroll to a node:

Ornament.bodyScrollToElement(document.querySelector("body"))