Code Reference

Back To Code Reference

Divi Builder JavaScript API

The builder’s JavaScript API definition.

window : Window

Global window object.

Kind: global typedef
Emits: event:et_builder_api_ready

ETBuilderModule : React.Component | object

Custom module for the Divi Builder.

Kind: global typedef

Static Properties (Required)

Name Type Description
slug string The module’s slug as defined in it’s PHP class

 

Methods (Required)

Name Type Description
render function

API

Divi Builder API object passed to registered callbacks of the event:et_builder_api_ready event.

Kind: global constant

 

API.Modules

Manage custom modules.

Kind: static property of API
Since: 3.1

Modules.register(modules)

Register one or more custom modules.

Kind: static method of Modules
Since: 3.1

Param Type Description
modules Array.<ETBuilderModule> Modules to register.

 

API.Utils

Useful functions

Kind: static property of API
Since: 3.1

 

Utils._()

Lodash – A modern JavaScript utility library delivering modularity, performance & extras.

Kind: static method of Utils
Link: https://github.com/lodash/lodash
License: MIT
Copyright: JS Foundation and other contributors https://js.foundation/

Utils.classnames() ⇒ string

Generates className value based on the args provided. Takes any number of args which can be a string or an object. The argument foo is short for { foo: true }. If the value associated with a given key is falsy, the key won’t be included in the output.

Kind: static method of Utils
Link: https://github.com/JedWatson/classnames
License: MIT
Copyright: 2017 Jed Watson

Type
string | Object.<string, boolean>

Examples:

classNames('foo', 'bar');                 // => 'foo bar'
classNames('foo', { bar: true });         // => 'foo bar'
classNames({ 'foo-bar': true });          // => 'foo-bar'
classNames({ 'foo-bar': false });         // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true });     // => 'foo bar'

 

Utils.decodeOptionListValue(encoded_value) ⇒ object

Decode string value of option_list module setting field type.

Kind: static method of Utils
Since: 3.1

Param Type Description
encoded_value string Value to be decoded

 

Utils.fontnameToClass(font_name) ⇒ string

Returns CSS class for a google font.

Kind: static method of Utils
Since??:

Param Type Description
font_name string Font name for which to return a CSS class

 

Utils.linkRel(saved_value) ⇒ string

Generate link rel HTML attribute value based on a value saved in a module’s settings.

Kind: static method of Utils
Since: 3.1

Param Type Description
saved_value string Value saved in module settings

 

Utils.maybeLoadFont(font_name)

Loads a Google Font if it hasn’t already been loaded.

Kind: static method of Utils
Since: 3.1

Param Type Description
font_name string The name of the font to load

 

Utils.processFontIcon(icon, is_down_icon) ⇒ string

Generates HTML for a saved font-based icon value.

Kind: static method of Utils
Since: 3.1

Param Type Description
icon string The saved icon value
is_down_icon boolean Whether or not the icon is one of the down arrow icons

 

Utils.setElementFont(font_data, use_important, default_values) ⇒ string

Generates font related CSS style properties from font data saved in a module’s settings.

Kind: static method of Utils
Since: 3.1

Param Type Description
font_data string Font data saved in module settings
use_important boolean Whether or not to use !important
default_values object Mapping of default values for the font settings

 

Utils.hasValue(value) ⇒ boolean

Check whether given value can be printed or not (string). Originally a simpler way to check against empty string, but later several checks were added as well to avoid unnecessary repetition. A value considered empty if:

  • – is an empty string
  • – is undefined
  • – is false
  • – is NaN

Kind: static method of Utils
Since: 4.14.9

Param Type Description
value mixed Value to check.

 

Utils.generateStyles(moduleArgs) ⇒ array

Use the `Responsive.generateResponsiveCSS` with addition to generate sticky state styles if module enable it.

Kind: static method of Utils
Since: 4.17.5

Param Type Description
moduleArgs object Module arguments.

Examples:

/**
 * Module arguments.
 *
 * @typedef moduleArgs
 * @type {Object}
 * @property {string} address: ''
 * @property {Object} attrs: {}
 * @property {string} name: ''
 * @property {string} defaultValue: ''
 * @property {string} type: ''
 * @property {boolean} forceReturn: false
 * @property {string} selector: '%%order_class%%'
 * @property {string} cssProperty: ''
 * @property {boolean} important: false
 * @property {boolean} hover: true
 * @property {boolean} sticky: true
 * @property {boolean} responsive: true
 * @property {null|boolean} isStickyModule: null
 * @property {string} stickyPseudoSelectorLocation: 'order_class'
 */

/**
 * Hello World module inline styling.
 *
 * @param {Object} props Module attribute names and values.
 * @param {Object} moduleInfo Module info.
 *
 * @return array
 */
static css(props, moduleInfo) {
  const additionalCSS = [];
  const {
    generateStyles,
  } = window.ET_Builder.API.Utils;

  /**
   * Box colors arguments.
   *
   * @var {moduleArgs}
   */
  const boxColorsArgs = {
    attrs: props,
    name: 'box_color',
    selector: '%%order_class%% .smpl-hello-world-box-area',
    cssProperty: 'background-color',
  };
  const boxColors     = generateStyles(boxColorsArgs);

  /**
   * boxColors output:
   * 
   * [
   *    {
   *       selector: '%%order_class%% .smpl-hello-world-box-area',
   *       declaration: 'background-color: red;',
   *       device: 'desktop', // desktop, tablet, phone
   *    }
   * ]
   */
  additionalCSS.push(boxColors);

  return additionalCSS;
}

 

API.isRegistered(slug) ⇒ boolean

Whether or not a component is registered.

Kind: static method of API
Since: 3.1

Param Type Description
slug string The component’s slug

 

API.registerModules(modules)

Convenience wrapper for register

Kind: static method of API
Since: 3.1

Param Type Description
modules Array.<ETBuilderModule> Modules to register.
Join To Download Today