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.

91 lines
3.0 KiB

// Shrink up the spacing and change the size of the headers
u('#ingredients').attr("style", "margin-bottom: .5em;")
u('#ingredients').attr("class", "is-size-5")
u('#directions').attr("style", "margin: 0px;")
u('#directions').attr("class", "is-size-5")
// If we have ingredients subheadings, change the h4 headings
u('h4').addClass("is-size-6")
u('h4').attr("style", "margin: 0px;")
// Change the title size
u('#mainTitle').addClass("is-size-4")
// Change the lists margins
var directions = u('ol');
directions.attr("style", "margin-top: 0px; margin-bottom: 0px;")
var ingredients = u('ul');
ingredients.attr("style", "margin-top: 0px; margin-bottom: 0px;")
var listItems = u('li');
listItems.attr("style", "margin-top: 0px;")
// Remove the last <hr> if we have a footnote
var hrs = u('hr')
if (hrs.length > 2) {
hrs.last().remove()
}
// Remove the footnote links
u(document.getElementsByClassName('footnote-backref')).remove()
// space to full pages and add kirby background on every page
window.addEventListener('load', function () {
const pageHeightInPx = 869
const docHeight = document.children[0].offsetHeight
const pages = Math.ceil(docHeight/pageHeightInPx)
if((docHeight/pageHeightInPx)%1 != 0) {
// need spacing
const spacer = document.evaluate('//*[@id="spacer"]', document).iterateNext()
// spacer.style.border = "5px solid red"
spacer.style.height = `${(pages*pageHeightInPx) - docHeight}px`
}
const imageString = 'url("../../recipeskirby.svg")'
imageArray = [imageString]
let positionString = "background-position: 10mm 55mm"
for(let i = 1 ; i < pages ; i+=1) {
positionString += `, 10mm ${230*i+55}mm`
imageArray.push(imageString)
}
const styleString = `body { background-image: ${imageArray.join(', ')}; ${positionString}; background-blend-mode: luminosity; background-repeat: no-repeat; }`
window.document.styleSheets[2].insertRule(styleString, 0)
})
// Break ingredients into column-able blocks
window.addEventListener('load', function () {
const zutatenNode = document.evaluate('//*[@id="zutaten"]', document).iterateNext()
let nodeBlocks = [[]]
let nextNode = zutatenNode.nextElementSibling
while (nextNode && nextNode.tagName != "H2") {
if(nextNode.tagName == 'H4') {
nodeBlocks.push([])
}
nodeBlocks[nodeBlocks.length - 1].push(nextNode)
nextNode = nextNode.nextElementSibling
}
let allIngredientsDiv = document.createElement('div')
allIngredientsDiv.id = "allZutaten"
allIngredientsDiv.classList.add('allZutaten')
let nodeBlockIndex = 0
nodeBlocks.forEach(function(nodeArray) {
let outerDiv = document.createElement('div')
outerDiv.id = `wrap${nodeBlockIndex}`
outerDiv.classList.add("zutatenWrapper")
allIngredientsDiv.appendChild(outerDiv)
for(elem of nodeArray) {
outerDiv.appendChild(elem)
}
nodeBlockIndex += 1
})
zutatenNode.parentNode.insertBefore(allIngredientsDiv, zutatenNode.nextSibling)
})