The JS API uses a hook-system that is very similar to the WordPress PHP actions and filters. To learn more about hooking into those events, see the documentation about addAction() and addFilter().
Plugin Init
Here is a list of actions and filters in the order that they happen during a front end page visit.
| Type | Hook | Details |
|---|---|---|
| Filter | init_options | Plugin options were parsed and sanitized |
| Action | load | The JS API is loaded and starts to initialize all Areas |
| Action | ready | The JS API is fully initialized and all Areas were registered |
| Action | area_wraparea_wrap_{id} | Fires after the outer wrap of an area was created |
| Action | area_close_buttonarea_close_button_{id} | Allows customization of the default close button |
| Action | init_areainit_area_{id} | An Area was registered and is ready to be displayed |
| Action | refresh_arearefresh_area_{id} | Fired after options were applied to the area element |
| Action | init_overlay | Fired once the background overlay is initialized |
User Interaction
Those hooks are fired based on user events and interaction:
| Type | Hook | Details |
|---|---|---|
| Action | exit_intent | The mouse moved upwards, outside the window |
| Action | click_overlay | Click on the background overlay detected |
| Filter | ignore_overlay_click | Return true to manually ignore the background click |
| Filter | ignore_esc_key | Return true to manually ignore an Escape-keypress |
Show Area
Those hooks are fired when a hidden Area is displayed:
| Type | Hook | Details |
|---|---|---|
| Action | before_show_areabefore_show_area_{id} | Fired before the Area is displayed |
| Action | disabled_scrolling | Scrolling of the document was disabled |
| Action | show_overlay | The background overlay is displayed |
| Action | show_areashow_area_{id} | The Area is visible or the intro-animation has started |
| Action | focus_areafocus_area_{id} | Fired after event handlers were attached to the Area |
| Filter | reorder_areas | Filters the z-index of all visible areas |
Close Area
Those hooks are fired when a visible Area is hidden again:
| Type | Hook | Details |
|---|---|---|
| Action | close_areaclose_area_{id} | Internal instruction to close an Area |
| Filter | ignore_close_areaignore_close_area_{id} | Ignore the close instruction by returning true |
| Action | before_hide_areabefore_hide_area_{id} | Fired before the Area is hidden |
| Action | blur_areablur_area_{id} | Fired after event handlers were removed from the Area |
| Action | hide_areahide_area_{id} | The Area is hidden |
| Action | enabled_scrolling | Scrolling of the document was enabled again |
| Action | hide_overlay | The background overlay was removed from the DOM |
Internal Hooks
| Type | Hook | Details |
|---|---|---|
| Filter | get_dataget_data_{key} | Read data from the browsers localStorage (or cookie) |
| Filter | set_dataset_data_{key} | Write data to the browsers localStorage (or cookie) |
| Filter | set_data_expireset_data_expire_{key} | Set expiration for the localStorage data (or cookie) |
| Filter | get_option_{key} | Get an option value from DiviAreaConfig |
Notes
This reference is working since JS API version 1.2.0 – to find the JS API version, type in DiviArea.version in your browser console.
