# 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.

# AnyMod.ready

AnyMod.ready(callback)

Executes a callback once the AnyMod script has finished loading.

# Usage

AnyMod.ready(function () {
  console.log('Hello world!')
})
AnyMod.ready(function () {
  console.log('Hello again!')
})

# Result

Runs the callbacks when AnyMod has finished loading.

Hello world!
Hello again!

TIP

You don't need to use AnyMod.ready() in a mod's own code: it will already be ready.

# AnyMod.render

AnyMod.render(callback) -> [promise]

Renders mod tags that were added to the page after AnyMod's initial run. Can be used with a callback or a promise.

# Usage

// With a callback
AnyMod.render(function() {
  console.log('Render complete')
})

// With a promise
AnyMod.render()
.then(function() {
  console.log('Render complete')
})

# Result

Mod tags that were asynchronously added to the page are rendered.

<!-- Hello world text -->
<div id="anymod-abcde"></div>

Mod is rendered:

<!-- Hello world text -->
<div id="anymod-abcde" abcde data-anymod="abcde-0000000" data-anymod-mounted>
  Hello, World!
</div>

# Behavior

Mods are rendered 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:

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.Page` to render unrendered mods, then execute promise or callback, if any.

TIP

AnyMod.render() is useful when using mods within modern JavaScript frameworks. See the AnyMod guides for React, Vue.js, or Angular for more specifics.

# AnyMod( key )

AnyMod(key)

Returns the data object for a given mod.

# Usage

AnyMod('abcde')

# Result

{
  key: "abcde", 
  data: {
    message: "Hello, world!"
    items: []
  }, 
  html: "<div>Hello, world!</div>",
  css: "[abcde]{background:red;padding:10px...}",
  js: "console.log('hello');",
  cssAssets: ["https://cdn.example.com/stylesheet.css"],
  jsAssets: []
}

Similarly, you can read a specific piece of data:

AnyMod('abcde').data.message
// --> "Hello, world!"

# AnyMod.Project

You can get the current project at any time with AnyMod.Project

AnyMod.Project
// -> "8PP6M2"

# AnyMod.ApiUrl

You can get the AnyMod API URL with AnyMod.ApiUrl

AnyMod.ApiUrl
// -> "https://api.anymod.com/v2/"

# AnyMod.Event

AnyMod comes with a built-in message bus for communication between mods or within your application. It is based on Eev (opens new window) and has three methods:

AnyMod.Event.on(eventName, callback)

Listen for a custom event, which can be triggered by AnyMod.Event.emit. The callback will receive whatever data is emitted.
AnyMod.Event.off(eventName, callback)

Remove custom event listener(s). eventName and callback must match the event as defined in AnyMod.Event.on.
AnyMod.Event.emit(eventName, data)

Trigger an event. Any additional arguments will be passed into the callback function for AnyMod.Event.on.

# Usage

function logHello (data) {
  console.log('Hello, ' + data.name + '!')
}

// Create event listener
AnyMod.Event.on('custom:message', logHello)

// Trigger event
AnyMod.Event.emit('custom:message', { name: 'everyone' })
// -> "Hello, everyone!"

// Remove event listener
AnyMod.Event.off('custom:message', logHello)

// Trigger event again
AnyMod.Event.emit('custom:message', { name: 'everyone' })
// -> Does nothing (event listener was removed with .off())

# Example (on)

The following mod (opens new window) has an event listener added:

AnyMod.Event.on('updateMod', function(data) {
  title.innerHTML = data.title
  text.innerHTML = data.text
})

Open your browser console and run the following to update the mod:

AnyMod.Event.emit('updateMod', { title: 'Hello, world', text: 'New text' })

# Example (emit)

The following mod (opens new window) has an event emitter added:

AnyMod.Event.emit('updateMod', {
  title: titleInput.value,
  text: textInput.value
})

Because it emits the updateMod event, this mod can communicate with the first mod that has the event listener added.

Click the Send event button to update the first mod's text.

TIP

View the code for the listener (opens new window) and emitter (opens new window) mods to learn more.

# AnyMod.buildImage

AnyMod.buildImage(image, { options })

Resizes and crops an image based on options inputs.

# Usage

// Inside of AnyMod editor JavaScript panel
AnyMod.buildImage(mod.data.image, { w: 300, h: 200, c: 'fill', g: 'face' })

<!-- Handlebars: inside of AnyMod editor HTML panel -->
<img src="{{ buildImage image w=300 h=200 c='fill' g='face' }}" />

Image transformations are based on Cloudinary's interface. See the following table for more information:

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 (opens new window): `scale`, `fit`, `mfit`, `fill`, `lfill`, `limit`, `pad`, `lpad`, `mpad`, `crop`, or `thumb`.
g	`String`	`center`	Cropping gravity (opens new window): see link for options.

# Example

Given an image field with an uploaded image:

You can resize and crop the image in your JavaScript (JS panel) or with Handlebars (HTML panel):

// JavaScript (JS panel)
var newImage = AnyMod.buildImage(mod.data.image, { w: 400, h: 150, c: 'fill' })

<!-- Handlebars (HTML panel) -->
<img src="{{ buildImage image w=400 h=150 c='fill' }}" />

If the image has a face, you can smart crop by using the g: 'face' option:

// JavaScript (JS panel)
var newImage = AnyMod.buildImage(mod.data.image, { w: 150, h: 150, c: 'crop', g: 'face' })

<!-- Handlebars (HTML panel) -->
<img src="{{ buildImage image w=150 h=150 c='crop' g='face' }}" />

TIP

See the image manipulation example for more.

# AnyMod.loadScript

AnyMod.loadScript(url, callback, { options })

Loads a script tag into the <body> element as denoted by url. Executes an optional callback function once the script is loaded.

# Usage

AnyMod.loadScript('https://www.google.com/recaptcha/api.js', function () {
  console.log('reCaptcha script has loaded.')
}, { defer: true })

# Options

Property	Type	Default	Description
id	`string`	-	Sets the `id` attribute for the `<script>` tag.
async	`boolean`	`true`	Sets the `async` attribute for the `<script>` tag.
defer	`boolean`	`false`	Sets the `defer` attribute for the `<script>` tag.

TIP

You can add scripts directly to a mod without invoking loadScript. See custom scripts for more.

# AnyMod.loadStylesheet

AnyMod.loadStylesheet(url, callback, { options })

Loads a stylesheet tag into the <head> element as denoted by url. Executes an optional callback function once the stylesheet is loaded.

# Usage

AnyMod.loadStylesheet('https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.css', function () {
  console.log('Bulma CSS has loaded.')
}, { id: 'my-stylesheet' })

# Options

Property	Type	Default	Description
id	`string`	-	Sets the `id` attribute for the `<link>` tag.

TIP

You can add stylesheets directly to a mod without invoking loadStylesheet. See custom stylesheets for more.

← AnyMod script Content versions →