Skip to content

Instantly share code, notes, and snippets.

@laradevitt
Last active July 28, 2021 23:03
Show Gist options
  • Save laradevitt/27e70309fe72dce99eb849bfdf8d86dc to your computer and use it in GitHub Desktop.
Save laradevitt/27e70309fe72dce99eb849bfdf8d86dc to your computer and use it in GitHub Desktop.
Custom events to dispatch the various states of the Civic Cookie Control UI (https://www.civicuk.com/cookie-control). I use it to prevent interference with pop-up modals.
(function(CookieControl) {
/**
* Creating custom events to dispatch the various states of Cookie Control UI.
*/
CookieControl.loadedEvent = new Event('cc.loaded');
CookieControl.openedEvent = new Event('cc.open');
CookieControl.closedEvent = new Event('cc.closed');
/**
* MutationObserver callback.
* Watching: Cookie Control wrapper added.
*/
CookieControl.isLoadedObserver = new MutationObserver(function(mutations) {
for (var i=0; i < mutations.length; i++) {
var mutation = mutations[i];
if (mutation.addedNodes.length > 0) {
for (var j=0; j < mutation.addedNodes.length; j++) {
if (mutation.addedNodes[j].id === 'ccc') {
// Cookie control wrapper is added to the DOM; it is loaded...
// Dispatch custom event.
document.body.dispatchEvent(CookieControl.loadedEvent);
CookieControl.openStateObserver.observe(document.getElementById('ccc'), { childList: true, subtree: false });
CookieControl.isLoadedObserver.disconnect();
return;
}
}
}
}
});
/**
* MutationObserver callback.
* Watching: Cookie Control overlay element added or removed, which means the
* notify bar or panel is open/closed.
*/
CookieControl.openStateObserver = new MutationObserver(function(mutations) {
for (var i=0; i < mutations.length; i++) {
var mutation = mutations[i];
var nodes = [];
var eventToDispatch = false;
if (mutation.addedNodes.length > 0) {
nodes = mutation.addedNodes;
eventToDispatch = CookieControl.openedEvent;
}
if (mutation.removedNodes.length > 0) {
nodes = mutation.removedNodes;
eventToDispatch = CookieControl.closedEvent;
}
for (var i=0; i < nodes.length; i++) {
var node = nodes[i];
if (node.id === 'ccc-overlay') {
document.getElementById('ccc').dispatchEvent(eventToDispatch);
return;
}
}
}
});
CookieControl.isLoadedObserver.observe(document.body, { childList: true, subtree: false });
})(CookieControl);
/**
* (Example usage)
* For usability and accessibility, don't allow a pop-up modal to display at the
* same time as the Cookie Control notify bar or panel.
*/
// Listen for the Cookie Control wrapper to be loaded.
document.body.addEventListener('cc.loaded', handleLoadedListener);
var openModal = function() {
// Continue listening for Cookie Control events in case the user opens the
// Cookie Control panel while the modal is still displayed.
}
var closeModal = function() {
// Once the modal has been closed, we don't need to listen for these events
// anymore.
document.getElementById('ccc').removeEventListener('cc.open', handleOpenedListener);
document.getElementById('ccc').removeEventListener('cc.closed', handleClosedListener);
}
var handleLoadedListener = function() {
// Listen for cookie control banner or panel to be closed.
document.getElementById('ccc').addEventListener('cc.closed', handleClosedListener);
// Listen for cookie control banner or panel to be opened.
document.getElementById('ccc').addEventListener('cc.open', handleOpenedListener);
}
var handleOpenedListener = function() {
// Remove cc.loaded listener.
document.body.removeEventListener('cc.loaded', handleLoadedListener);
// Close modal...
closeModal();
}
var handleClosedListener = function() {
// Remove cc.loaded listener.
document.body.removeEventListener('cc.loaded', handleLoadedListener);
window.setTimeout(function() {
// Open modal after a slight delay...
openModal();
}, 1000);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment