Skip to content

Instantly share code, notes, and snippets.

@soluml
Created February 19, 2019 20:58
Show Gist options
  • Save soluml/6ae4a8b26dab1dcc79a5c2bc53ed80bb to your computer and use it in GitHub Desktop.
Save soluml/6ae4a8b26dab1dcc79a5c2bc53ed80bb to your computer and use it in GitHub Desktop.
AEM Editor Dialog PubSub. Including this in your authoring clientlib (the clientlib that loads in the content frame within the editor) gives you the ability to respond to saving JCR data via a component dialog.
window.aemEditorPubSub = new Promise(function(resolve) {
var $ = window.parent.Granite.$;
var $document = $(window.parent.document);
var topics = {};
var queue = [];
// Allow subscriptions once editor frame has loaded
$document.on("foundation-contentloaded", function() {
resolve(function subscribe(topic, cb) {
if (topics[topic]) {
topics[topic].push(cb);
} else {
topics[topic] = [cb];
}
});
});
// Dialog has saved, push topics/values into `queue` to be sent out once editor reloads
$document.on("dialog-success", function() {
var $form = $(this).find(".cq-dialog.foundation-form");
var actionArr = $form
.attr("action")
.replace("_jcr_content", "jcr:content")
.split("/");
while (actionArr.length > 0) {
var topic = topics[actionArr.join("/")];
if (topic) {
queue.push([topic, $form.serializeArray()]);
}
actionArr.pop();
}
});
// Content frame has been updated with fresh JCR values, process queue
new MutationObserver(function() {
while (queue.length) {
var nextInQueue = queue.pop();
nextInQueue[0].forEach(function(cb) {
cb(nextInQueue[1]);
});
}
}).observe(document.documentElement, { childList: true });
}).catch(function(err) {
console.error("The AEM Editor PubSub ran into the following error while trying to setup:\n\r\n\r", err);
});
window.aemEditorPubSub = new Promise(resolve => {
const {$} = window.parent.Granite;
const $document = $(window.parent.document);
const topics = {};
const queue = [];
// Allow subscriptions once editor frame has loaded
$document.on('foundation-contentloaded', () => {
resolve((topic, cb) => {
if (topics[topic]) {
topics[topic].push(cb);
} else {
topics[topic] = [cb];
}
});
});
// Dialog has saved, push topics/values into `queue` to be sent out once editor reloads
$document.on('dialog-success', function() {
const $form = $(this).find('.cq-dialog.foundation-form');
const actionArr = $form
.attr('action')
.replace('_jcr_content', 'jcr:content')
.split('/');
while (actionArr.length > 0) {
const topic = topics[actionArr.join('/')];
if (topic) {
queue.push([topic, $form.serializeArray()]);
}
actionArr.pop();
}
});
// Content frame has been updated with fresh JCR values, process queue
new MutationObserver(() => {
while (queue.length) {
const nextInQueue = queue.pop();
nextInQueue[0].forEach(cb => {
cb(nextInQueue[1]);
});
}
}).observe(document.documentElement, {childList: true});
}).catch(err => {
console.error('The AEM Editor PubSub ran into the following error while trying to setup:\n\r\n\r', err);
});
@soluml
Copy link
Author

soluml commented Feb 19, 2019

ES5 version should be AEM YUI and GCC friendly.
ES6 will require transpilation as of Adobe 6.4.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment