JS Helpers
‹ BackComponent 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"))