/** **- * JavaScript providing functions for * generating inset HTML elements * required by an article * * Inset elements are usually inset by * at least a few characters and have * background and foreground colours * reversed compared to the rest of the * page * * Author - Philip Osztromok * * 27 March 2022 *+ */ // To inset a single line of code function addInset(item) { const newInset = document.createElement("pre"); newInset.classList.add("inset"); newInset.style.color = "darkgreen"; newInset.style.fontWeight = "900"; newInset.style.fontSize = "24px"; newInset.innerHTML= `${item}`; return newInset; } // Adds a list of items function addInsetList(list) { const newInsetList = document.createElement("pre") newInsetList.classList.add("inset") for (let index=0; index < list.length; index++) { let listItem=list[index]; let newListItem = document.createElement("p") newListItem.innerHTML= ` ${listItem}` newInsetList.append(newListItem) } return newInsetList } // Adds a list of items with line numbers // so this is a better option for code listings function addInsetCodeListing(anArray) { const newInsetCodeListing = document.createElement("pre"); newInsetCodeListing.classList.add("inset"); for (let index=0; index < anArray.length; index++) { let number=index+1; let listItem=anArray[index]; let newListItem = document.createElement("p"); newListItem.innerHTML=newListItem.innerHTML + `${number} ${listItem}
`; newInsetCodeListing.append(newListItem); } return newInsetCodeListing } // Adds a list of items with bullet points function addInsetBulletList(list) { const newInsetBulletList = document.createElement("pre") newInsetBulletList.classList.add("inset") for (let index=0; index < list.length; index++) { let listItem=list[index]; let newListItem = document.createElement("p") newListItem.innerHTML= `• ${listItem}` newInsetBulletList.append(newListItem) } return newInsetBulletList } export { addInset, addInsetList, addInsetCodeListing, addInsetBulletList } /* * * helper functions * */