v1 docs   See v2 ↗

Global methods

Anymod is a global JavaScript object that provides access to all of the mods on a page along with several useful utility functions. You can interact with it to read and write data, hook into mod events, load and render mods, and more.

To use the global Anymod object in your own JavaScript, be sure that the Anymod <script> tag is placed in your HTML before (above) your JavaScript so that the Anymod script executes first.

Anymod( id )

All mods are built using the underlying API for vue.js. Calling Anymod('_id_'), where _id_ is the id of the mod, will give a handle to the Vue instance for that mod.

For example, the mod below renders the text Hello World!

<div id=anymod-ranno></div>

In this case, Anymod('ranno') gives access to the mod. This type of access is the basis for interacting with mods programmatically.

Anymod( key ).attr

A getter method that returns a value held by a mod.

The properties available to get vary by mod.

Anymod( key ).attr =

A setter method that sets a mod property locally. Does not save the value for future page loads.

The properties available to set vary by mod.

Anymod.ready( function )

Executes a function once all mods have been loaded.

Multiple functions can be registered with ready() and they will all be executed when mods are done loading. Any functions registered after mods are ready will be executed immediately.

Anymod.render( function, { options } )

Renders any Anymod tags that have not been rendered.

The Anymod.render() method runs automatically when the Anymod script loads. However, you may not have all mods on the page at that time, so you can call Anymod.render() at any time to render mods that have been added since initial page load. There are a few scenarios where this may happen, and the behavior for each is shown below:

TL;DR If a mod’s data has already been fetched, that data will be reused on subsequent renders without making additional API calls.

Scenario Behavior
No unrendered mods Execute promise or callback, if any.
New, unrendered mods Fetch data with single API call for all new mods, then render unrendered mods, then execute promise or callback, if any.
Previously fetched (but now unrendered) mods Use the existing data from Anymod.Store to render unrendered mods, then execute promise or callback, if any.
Mixed mods (some previously fetched, some new) Fetch data with single API call for new mods, then add data to Anymod.Store, then use Anymod.Store to render all unrendered mods, then execute promise or callback, if any.

Anymod.buildImage( image, { options } )

Resizes and crops an image based on options inputs.

Option Type Default Description
w Integer - Width of the image in pixels
h Integer - Height of the image in pixels
c String fit Cropping mode: scale, fit, mfit, fill, lfill, limit, pad, lpad, mpad, crop, or thumb.
g String center Cropping gravity: see link for options.

Anymod.loadScript( url, callback, { opts } )

Loads a script as denoted by url and executes an optional callback function once the script is loaded.

Property Type Default Description
id string none Sets the id attribute for the <script> tag.

If a <script> tag with the specified url or id already exists, a new tag will not be added, and the callback function will be invoked immediately if present.

Anymod.loadStylesheet( url, callback, { opts } )

Loads a stylesheet as denoted by url and then executes a callback function once the script is loaded.

Property Type Default Description
id string none Sets the id attribute for the <script> tag.

If a <link> tag with the specified url or id already exists, a new tag will not be added, and the callback function will be invoked immediately if present.