I am working on a AEM component to dynamically add superscripts based on a graphQL query and I need some help.
Currently the component will add a superscript to any element that has the data-id attribute.
The future state that I am looking to achieve is having the component only add the superscript if the fragment id is present in the graphQL query.
Below is the full code of the component:
document.addEventListener("DOMContentLoaded", function(){
var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append("Authorization", "Basic YWRtaW46YWRtaW4=");
myHeaders.append("Cookie", "cq-authoring-mode=TOUCH");
var requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
var query = {
protocol: document.location.protocol,
host: document.location.host,
path: "graphql/execute.json/dot-pnc-aem-caas",
name: "disclosure-by-id",
paramName: "fragmentId"
};
let disclosureDiv = document.getElementById('disclosureComponent'),
disclosureElement = document.querySelectorAll('span[data-id]'),
orderedList = document.createElement("ol"),
disclosureArray = [],
queryValue,
footnoteNumber = 1,
footnoteObject = {},
supNum,
url = query.protocol +"//"+ query.host +"/"+ query.path +"/"+ query.name +"%3B"+ query.paramName +"%3D{"_logOp"%3A"OR"%2C"_expressions"%3A[";
function createDisclosureArray(){
for (let i = 0, max=disclosureElement.length; i < max; i++) {
let fragmentId = disclosureElement[i].dataset.id;
if(!footnoteObject.hasOwnProperty(fragmentId)){
footnoteObject[fragmentId] = footnoteNumber;
}
supNum = footnoteObject[fragmentId];
disclosureArray.push({
fragmentId: fragmentId,
anchorId: fragmentId,
superScript: supNum
});
anchorTag = document.createElement('a');
anchorTag.setAttribute('href', '#'+disclosureArray[i].anchorId);
anchorTag.setAttribute('class', 'disclosureAnchor');
sup = document.createElement('sup');
const fragment = document.createDocumentFragment();
const superScript = fragment
.appendChild(anchorTag)
.appendChild(sup);
superScript.textContent = '['+disclosureArray[i].superScript+']';
disclosureElement[i].append(fragment);
footnoteNumber++;
}
queryValue = disclosureArray.map(({fragmentId}) => '{"value"%3A"'+fragmentId+'"}').join('%2C');
url += queryValue + "]}";
return disclosureArray;
}
async function getDisclosures(){
try{
let result = await fetch(url, requestOptions);
if (!result.ok) {
const message = `An error has occured: ${result.status} - ${result.statusText}`;
throw new Error(message);
}
return await result.json();
} catch (error){
console.log(error.message);
disclosureDiv.append('No disclosures were found.');
}
}
async function updateLegalAccordion(){
let disclosure = await getDisclosures();
let disclosureNum = disclosure.data.disclosureList.items;
for (let i = 0, max = disclosureNum.length; i < max; i++ ){
let listItem = document.createElement('li');
listItem.innerHTML = `${disclosureNum[i].copy.html}`;
listItem.setAttribute('id', disclosureArray[i].anchorId);
orderedList.appendChild(listItem);
disclosureDiv.appendChild(orderedList);
}
}
createDisclosureArray();
updateLegalAccordion();
});
I have tried creating a new graphQL query in Postman to check if the fragmentId exists so I could base the superscript off that query but I was getting errors in Postman