Skip to content

Making accordion mixin async via event handler #1385

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Sep 9, 2024
Merged

Making accordion mixin async via event handler #1385

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f748ba2
Making accordion mixin async via event handler
rismehta Sep 9, 2024
55e86a5
Making accordion mixin async via event handler
rismehta Sep 9, 2024
f74730a
Making accordion mixin async via event handler
rismehta Sep 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions ..._root/apps/core/fd/components/form/accordion/v1/accordion/clientlibs/commons/js/common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,4 +257,11 @@
window.Forms.CoreComponentsCommons = window.Forms.CoreComponentsCommons || {};
window.Forms.CoreComponentsCommons.AccordionMixin = AccordionMixin;

const event = new CustomEvent('AccordionMixinLoaded', {
detail: {
AccordionMixin: AccordionMixin
}
});
window.dispatchEvent(event);

}());
148 changes: 77 additions & 71 deletions ...ps/core/fd/components/form/accordion/v1/accordion/clientlibs/contentframe/js/accordion.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,92 +13,98 @@
* See the License for the specific language governing permissions and
* limitations under the License.
******************************************************************************/


(function () {

const AccordionMixin = window.Forms.CoreComponentsCommons.AccordionMixin;

class Accordion extends AccordionMixin(class {}) {
function onAccordionMixinLoaded(event) {
const AccordionMixin = event.detail.AccordionMixin;
class Accordion extends AccordionMixin(class {
}) {

constructor(params) {
super(params);
const { element } = params;
this.cacheElements(element);
if (this.getCachedItems()) {
var expandedItems = this.getExpandedItems();
// multiple expanded items annotated, display the last item open.
if (expandedItems.length > 1) {
var lastExpandedItem = expandedItems[expandedItems.length - 1]
this.expandItem(lastExpandedItem);
this.collapseAllOtherItems(lastExpandedItem.id);
constructor(params) {
super(params);
const {element} = params;
this.cacheElements(element);
if (this.getCachedItems()) {
var expandedItems = this.getExpandedItems();
// multiple expanded items annotated, display the last item open.
if (expandedItems.length > 1) {
var lastExpandedItem = expandedItems[expandedItems.length - 1]
this.expandItem(lastExpandedItem);
this.collapseAllOtherItems(lastExpandedItem.id);
}
this.refreshItems();
}
this.refreshItems();
}
element.removeAttribute("data-" + this.constructor.NS + "-is");
element.removeAttribute("data-" + this.constructor.NS + "-is");

if (window.Granite && window.Granite.author && window.Granite.author.MessageChannel) {
/*
* Editor message handling:
* - subscribe to "cmp.panelcontainer" message requests sent by the editor frame
* - check that the message data panel container type is correct and that the id (path) matches this specific Accordion component
* - if so, route the "navigate" operation to enact a navigation of the Accordion based on index data
*/
window.CQ.CoreComponents.MESSAGE_CHANNEL = window.CQ.CoreComponents.MESSAGE_CHANNEL || new window.Granite.author.MessageChannel("cqauthor", window);
var _self = this;
window.CQ.CoreComponents.MESSAGE_CHANNEL.subscribeRequestMessage("cmp.panelcontainer", function (message) {
if (message.data && message.data.type === "cmp-accordion" && message.data.id === _self._elements.self.dataset["cmpPanelcontainerId"]) {
if (message.data.operation === "navigate" && _self.getCachedItems()[message.data.index] !== undefined) {
_self.toggle(_self.getCachedItems()[message.data.index].id);
_self.collapseAllOtherItems(_self.getCachedItems()[message.data.index].id);
if (window.Granite && window.Granite.author && window.Granite.author.MessageChannel) {
/*
* Editor message handling:
* - subscribe to "cmp.panelcontainer" message requests sent by the editor frame
* - check that the message data panel container type is correct and that the id (path) matches this specific Accordion component
* - if so, route the "navigate" operation to enact a navigation of the Accordion based on index data
*/
window.CQ.CoreComponents.MESSAGE_CHANNEL = window.CQ.CoreComponents.MESSAGE_CHANNEL || new window.Granite.author.MessageChannel("cqauthor", window);
var _self = this;
window.CQ.CoreComponents.MESSAGE_CHANNEL.subscribeRequestMessage("cmp.panelcontainer", function (message) {
if (message.data && message.data.type === "cmp-accordion" && message.data.id === _self._elements.self.dataset["cmpPanelcontainerId"]) {
if (message.data.operation === "navigate" && _self.getCachedItems()[message.data.index] !== undefined) {
_self.toggle(_self.getCachedItems()[message.data.index].id);
_self.collapseAllOtherItems(_self.getCachedItems()[message.data.index].id);
}
}
}
});
});
}
}
}
}

/**
* Document ready handler and DOM mutation observers. Initializes Tabs components as necessary.
*
* @private
*/
function onDocumentReady() {
/**
* Document ready handler and DOM mutation observers. Initializes Tabs components as necessary.
*
* @private
*/
function onDocumentReady() {

var elements = document.querySelectorAll(Accordion.selectors.self);
for (var i = 0; i < elements.length; i++) {
new Accordion({ element: elements[i] });
}
var elements = document.querySelectorAll(Accordion.selectors.self);
for (var i = 0; i < elements.length; i++) {
new Accordion({element: elements[i]});
}

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var body = document.querySelector("body");
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
// needed for IE
var nodesArray = [].slice.call(mutation.addedNodes);
if (nodesArray.length > 0) {
nodesArray.forEach(function(addedNode) {
if (addedNode.querySelectorAll) {
var elementsArray = [].slice.call(addedNode.querySelectorAll(Accordion.selectors.self));
elementsArray.forEach(function(element) {
new Accordion({ element: element });
});
}
});
}
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var body = document.querySelector("body");
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
// needed for IE
var nodesArray = [].slice.call(mutation.addedNodes);
if (nodesArray.length > 0) {
nodesArray.forEach(function (addedNode) {
if (addedNode.querySelectorAll) {
var elementsArray = [].slice.call(addedNode.querySelectorAll(Accordion.selectors.self));
elementsArray.forEach(function (element) {
new Accordion({element: element});
});
}
});
}
});
});
});

observer.observe(body, {
subtree: true,
childList: true,
characterData: true
});
observer.observe(body, {
subtree: true,
childList: true,
characterData: true
});
}

if (document.readyState !== "loading") {
onDocumentReady();
} else {
document.addEventListener("DOMContentLoaded", onDocumentReady);
Copy link
Contributor

@dmaurya929 dmaurya929 Sep 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can there be any negative case here, can there be case DOMContentLoaded is not registered yet but event is already dispatched. As in first iteration of loop only window.addEventListener('AccordionMixinLoaded', onAccordionMixinLoaded) seems to be registered.

Copy link
Contributor

@dmaurya929 dmaurya929 Sep 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should work, please ignore .

}
}

if (document.readyState !== "loading") {
onDocumentReady();
if (window.Forms && window.Forms.CoreComponentsCommons && window.Forms.CoreComponentsCommons.AccordionMixin) {
onAccordionMixinLoaded({ detail: { AccordionMixin: window.Forms.CoreComponentsCommons.AccordionMixin } });
} else {
document.addEventListener("DOMContentLoaded", onDocumentReady);
window.addEventListener('AccordionMixinLoaded', onAccordionMixinLoaded);
}
}());