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)

Methods (Required)

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 API
Since: 3.1

Modules.register(modules)

Register one or more custom modules.

Kind: static method of Modules
Since: 3.1

API.Utils

Useful functions

Kind: static property of API
Since: 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 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

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

Utils.fontnameToClass(font_name) ⇒ string

Returns CSS class for a google font.

Kind: static method of Utils
Since??:

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

Utils.maybeLoadFont(font_name)

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

Kind: static method of Utils
Since: 3.1

Utils.processFontIcon(icon, is_down_icon) ⇒ string

Generates HTML for a saved font-based icon value.

Kind: static method of Utils
Since: 3.1

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

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

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

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

API.registerModules(modules)

Convenience wrapper for register

Kind: static method of API
Since: 3.1