You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
1.9 KiB
77 lines
1.9 KiB
3 months ago
|
/**
|
||
|
|
**-
|
||
|
|
* JavaScript providing functions for
|
||
|
|
* generating inset HTML elements
|
||
|
|
* required by an article
|
||
|
|
*
|
||
|
|
* Visuals includes items that stand out
|
||
|
|
* on the page and includes images and
|
||
|
|
* the navigation buttons at the bottom
|
||
|
|
* of the page
|
||
|
|
*
|
||
|
|
* Author - Philip Osztromok
|
||
|
|
*
|
||
|
|
* 27 March 2022
|
||
|
|
*+
|
||
|
|
*/
|
||
|
|
|
||
|
|
// Image functions
|
||
|
|
function addImageWithCaption(image, caption) {
|
||
|
|
const newFigure = document.createElement("figure")
|
||
|
|
const newImage = document.createElement("img")
|
||
|
|
const newCaption = document.createElement("figcaption")
|
||
|
|
newImage.setAttribute("src", image)
|
||
|
|
newImage.setAttribute("alt", caption)
|
||
|
|
newCaption.innerHTML = `${caption}`
|
||
|
|
|
||
|
|
newFigure.append(newImage)
|
||
|
|
newFigure.append(newCaption)
|
||
|
|
|
||
|
|
return newFigure
|
||
|
|
}
|
||
|
|
|
||
|
|
// Button functions
|
||
|
|
function addButtonGroup(list) {
|
||
|
|
const newButtonGroup = document.createElement("div")
|
||
|
|
newButtonGroup.classList.add("btngroup")
|
||
|
|
console.log(list);
|
||
|
|
for (let index=0; index < list.length; index=index+2) {
|
||
|
|
let button=list[index];
|
||
|
|
let url="window.location.href='" + list[index+1] + "'"
|
||
|
|
let buttonItem = document.createElement("button")
|
||
|
|
buttonItem.classList.add("button")
|
||
|
|
buttonItem.setAttribute("onclick", url)
|
||
|
|
buttonItem.innerHTML = `
|
||
|
|
${button}
|
||
|
|
`
|
||
|
|
newButtonGroup.append(buttonItem)
|
||
|
|
}
|
||
|
|
return newButtonGroup
|
||
|
|
}
|
||
|
|
|
||
|
|
function addSmallButtonGroup(list) {
|
||
|
|
const newButtonGroup = document.createElement("div")
|
||
|
|
newButtonGroup.classList.add("smallbtngroup")
|
||
|
|
for (let index=0; index < list.length; index=index+2) {
|
||
|
|
let button=list[index];
|
||
|
|
let url="window.location.href='" + list[index+1] + "'"
|
||
|
|
let buttonItem = document.createElement("button")
|
||
|
|
buttonItem.classList.add("smallbutton")
|
||
|
|
buttonItem.setAttribute("onclick", url)
|
||
|
|
buttonItem.innerHTML = `
|
||
|
|
${button}
|
||
|
|
`
|
||
|
|
newButtonGroup.append(buttonItem)
|
||
|
|
}
|
||
|
|
return newButtonGroup
|
||
|
|
}
|
||
|
|
|
||
|
|
export { addImageWithCaption, addButtonGroup, addSmallButtonGroup }
|
||
|
|
|
||
|
|
/*
|
||
|
|
*
|
||
|
|
* helper functions
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
|