Philipp
This documentation is for developers who use the JS API of either Popups for Divi or Divi Areas Pro. If you did not write custom JavaScript or CSS code to customize either plugin, you do not need to take any action.
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:
- 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()
- 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 );
});