website/scripts/inset.js

/**
 **-
 * 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} <br>`;
		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= `&bull;    ${listItem}`
		newInsetBulletList.append(newListItem)
	}
	return newInsetBulletList
}


export { addInset, addInsetList, addInsetCodeListing, addInsetBulletList }



/*
 *
 * helper functions
 *
*/