JS API version 1.2.0 changes

Divi Areas Pro and Popups for Divi share the same JS API. To make sure both plugins are compatible, we introduced an API version, that changes independent of the actual plugin version.

The JS API version 1.2.0 brings some major changes and is rolled out with:

• Divi Areas Pro 1.4.0
• Popups for Divi 2.2.0

Compatibility module

This update changes many things (like CSS class names and hook names). However, the API has a new compatibility module that ensures provides access to all legacy features.

For example, the compatibility module will add the original CSS class to an element, even though that class has no effect anymore.

This ensures, that all code stays as compatible as possible and existing code keeps working in the new version.

CSS changes

We tried to remove the legacy prefixes “evr” and “popup” with the current plugin slug “da” (for “Divi Area”). Also, the class names used a wild mix of underscores and hyphens – we have streamlined this to use hyphen as default from now on.

Legacy class selector	New class selector
.evr_fb_popup_modal	.da-overlay
.popup_outer_wrap	.area-outer-wrap
.popup_full_height	.full-height
.popup_full_width	.full-width
.evr-close	.da-close
.evr-close_wrap	.da-close-wrap
.evr_popup_open	.da-overlay-visible

Also notice how some CSS classes were replaced with data-da- attributes:

Legacy class selector	New attribute selector
.type-popup	[data-da-type="popup"] (same for “hover”, “flyin”, “inline”)
.divi-area-wrap-popup	.divi-area-wrap[data-da-type="popup"] (same for “hover”, “flyin”, “inline”)
.position-top-left	[data-da-position="top-left"] The first word can be top/center/bottom The second word can be left/center/right
.no-shadow	[data-da-shadow="no"]
.with-loader	[data-da-loader="yes"]

JS API Hooks

All JS hooks will now use only underscores and no more hyphens. Following hooks were renamed – with the compatibility module both the legacy and new hook names will work.

Legacy hook name	New hook name
esc_key_pressed	ignore_esc_key
before_close_area	ignore_close_area
init_area-{id}	init_area_{id}
show_area-{id}	show_area_{id}
hide_area-{id}	hide_area_{id}
close_area-{id}	close_area_{id}
blur_area-{id}	blur_area_{id}
focus_area-{id}	focus_area_{id}
before_show_area-{id}	before_show_area_{id}
before_hide_area-{id}	before_hide_area_{id}

New hooks

Following JS hooks were added in API version 1.2.0

• doAction( "area_wrap" )
• doAction( "area_close_button" )
• doAction( "refresh_area" )
• doAction( "init_overlay" )
• applyFilters( "reorder_areas" )
• doAction( "disabled_scrolling" )
• doAction( "enabled_scrolling" )

New JS class

The update introduces the new DiviAreaItem class to represent a single Divi Area or Popup.

That change might have some consequences that could break complex custom code: In prior versions of the API, area details were stored inside the jQuery element of the area. The new approach moved those details to the DiviAreaItem object:

area instanceof jQuery       // true in OLD code but false in NEW code!
area instanceof DiviAreaItem // true in NEW code
area.get() instanceof jQuery // true in NEW code

// Some things that might break with 1.2.0:

// Error - old code that tries to access the jQuery data object:
var isVisible = area.data('visible');
// Works - use the new DiviAreaItem methods:
var isVisible = area.isVisible();

// Error - old code that tries to attach an event handler to the area:
area.on( 'click', function() { ... } );
// Works - use `.get()` to modify the jQuery element:
area.get().on( 'click', ( function() { ... } );

Deprecated functions

DiviArea.configArea() is now deprecated. Use the new DiviAreaItem object to directly set the attributes.

New functions

• DiviArea.getArea() returns a single DiviAreaItem instance.
• DiviArea.Core.disableBodyScroll() prevents scrolling of the page, without hiding the scroll bar.
• DiviArea.Core.enbleBodyScroll() allows scrolling of the page again.

New Loader

Until now, the entire JS API was loaded in the page footer. That made it impossible to enqueue any JS action or filter and required some ugly callback-nesting.

The new 1.2.0 version is loaded in two steps:

1. A minimal JS snippet is enqueued in the page header, as early as possible. This snippet creates the global DiviArea object and only provides hook-functions, like DiviArea.addAction() or DiviArea.addFilter()
2. In the page footer, the remaining API script is loaded. That script extends the existing DiviArea object to the full JS API and initializes all Areas.

This makes the API much more robust and easier to extend. Here is an example of a code snippet that would display the Popup “safety-notice” during page load:

// Old API, prior to 1.2.0
jQuery(function() {
    function init() {
        // Run the function again when the DiviArea JS API is not ready.
        if ( ! window.DiviArea ) {
            window.setTimeout( init, 50 );
        } else {
            DiviArea.addAction( 'init_area-safety_notice', function( area ) {
                DiviArea.show( area );
            });
        }
    }

    init();
});


// New API, since 1.2.0 → DiviArea.addAction is available anywhere in the <body>!
DiviArea.addAction( 'init_area_safety_notice', function( area ) {
    DiviArea.show( area );
});