Global methods

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

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

Component( key )

All components are built using the underlying API for vue.js. Calling Component('_key_'), where _key_ is the key of the component, will give a handle to the Vue instance for that component.

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

<component key=ranno></component>

In this case, Component('ranno') gives access to the component. This type of access is the basis for interacting with components programmatically.

Component( key ).attr

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

• Usage:

  Component('ranno').text // -> "Hello World!"

The properties available to get vary by component.

Component( key ).attr =

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

• Usage:

  Component('ranno').text = 'New text' // -> "New text"

The properties available to set vary by component.

Component.ready( function )

Executes a function once all components have been loaded.

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

• Usage with callback:

  Component.ready(function () { console.log('Components are ready (callback)') Component('ranno').text = 'New text' })

• Usage with promise:

  Component.ready() .then(function () { console.log('Components are ready (promise)') Component('ranno').text = 'New text' })

Component.render( function, { options } )

Renders any <component> tags that have not been rendered.

• Usage with callback:

  Component.render(function () { console.log('Components were rendered (callback)') })

• Usage with promise:

  Component.render() .then(function () { console.log('Components were rendered (promise)') })

The Component.render() method runs automatically when the Component IO script loads. However, you may not have all components on the page at that time, so you can call Component.render() at any time to render components 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 component’s data has already been fetched, that data will be reused on subsequent renders without making additional API calls.

• Options

Options can be passed as the first parameter if no callback is needed, e.g. Component.render({ dataComponent: true })

Component.buildImage( image, { options } )

Resizes and crops an image based on options inputs.

• Usage:

  <!-- Inside of Component IO editor HTML panel --> <img :src="buildImage(image, options)" />

  // Inside of Component IO editor JavaScript panel Component.buildImage(image, options)

• Example:

  Given an image field with an uploaded image:
  
  
  

  You can resize and crop the image:

  <img :src="buildImage(image, { w: 400, h: 150, c: 'fill' })" />

  OR

  var newImage = Component.buildImage(component.data.image, { w: 400, h: 150, c: 'fill' })

  

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

  <img :src="buildImage(image, { w: 150, h: 150, c: 'crop', g: 'face' })" />

  OR

  var newImage = Component.buildImage(component.data.image, { w: 150, h: 150, c: 'crop', g: 'face' })

  

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

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

• Usage:

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

• Options

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.

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

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

• Usage:

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

• Options

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.