Divi Builder JavaScript API

Vintage

Source category: code-reference Last updated: 2022-07-12

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
    • .register(modules)
  • .Utils
    • ._()
    • .classnames() ⇒ string
    • .decodeOptionListValue(encoded_value) ⇒ object
    • .fontnameToClass(font_name) ⇒ string
    • .linkRel(saved_value) ⇒ string
    • .maybeLoadFont(font_name)
    • .processFontIcon(icon, is_down_icon) ⇒ string
    • .setElementFont(font_data, use_important, default_values) ⇒ string
    • .hasValue(value) ⇒ boolean
    • .generateStyles(moduleArgs) ⇒ array
  • .isRegistered(slug) ⇒ boolean
  • .registerModules(modules)

API.Modules

Manage custom modules.

Kind: static property of APISince: 3.1

Modules.register(modules)

Register one or more custom modules.

Kind: static method of ModulesSince: 3.1

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

API.Utils

Useful functions

Kind: static property of APISince: 3.1

• .Utils
  • ._()
  • .classnames() ⇒ string
  • .decodeOptionListValue(encoded_value) ⇒ object
  • .fontnameToClass(font_name) ⇒ string
  • .linkRel(saved_value) ⇒ string
  • .maybeLoadFont(font_name)
  • .processFontIcon(icon, is_down_icon) ⇒ string
  • .setElementFont(font_data, use_important, default_values) ⇒ string
  • .hasValue(value) ⇒ boolean
  • .generateStyles(moduleArgs) ⇒ array

Utils._()

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

Kind: static method of UtilsLink: https://github.com/lodash/lodashLicense: 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 UtilsLink: https://github.com/JedWatson/classnamesLicense: MIT Copyright: 2017 Jed Watson

Type
string

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 UtilsSince: 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 UtilsSince??:

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 UtilsSince: 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 UtilsSince: 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 UtilsSince: 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 UtilsSince: 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 UtilsSince: 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 UtilsSince: 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 APISince: 3.1

Param	Type	Description
slug	string	The component’s slug

API.registerModules(modules)

Convenience wrapper for register

Kind: static method of APISince: 3.1

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