diff --git a/scripts/scripts.js b/scripts/scripts.js index 19baa3a..4e34e8f 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -30,9 +30,20 @@ function addSpeedInformation(info, containerElement, name, splitWords = false) { containerElement.appendChild(infoElement); } -function addSpecifications(specs) { - const specContainer = document.createElement('div'); +function addShipSpecifications(specs) { + const infoContainer = document.createElement('div'); + const titleElement = document.querySelector('h2'); + + if (specs.Range) { + addSpeedInformation(specs.Range, infoContainer); + // Temp content as it is not received from document + addSpeedInformation(specs['Number of Passengers'].replace('to', '–').replaceAll(' ', ''), infoContainer, 'passengers', true); + addSpeedInformation(specs.Length, infoContainer); + } + infoContainer.classList.add('info-container'); + titleElement.parentNode.insertBefore(infoContainer, titleElement); + const specContainer = document.createElement('div'); specContainer.classList.add('spec-container'); const content = `

SPECIFICATIONS

Learn more about the ${document.querySelector('h1').textContent} and its technical specifications.

@@ -44,9 +55,28 @@ function addSpecifications(specs) { parentElement.appendChild(specContainer); } +function addEngineSpecifications(specs) { + const specContainer = document.createElement('div'); + specContainer.classList.add('spec-container'); + + const content = ` + + + + +
Length${specs.Length}
Width${specs.Width}
Maximum Speed${specs['Maximum Speed']}
Range${specs.Range}
`; + specContainer.innerHTML = content; + + const parentElement = document.querySelector('body.engine-focus .default-content-wrapper'); + parentElement.appendChild(specContainer); +} + async function prepareSpecification() { + const isTemplate = (template) => document.body.classList.contains(template); + const isShipFocus = isTemplate('ship-focus'); + const isEngineFocus = !isShipFocus && isTemplate('engine-focus'); try { - if (!document.body.classList.contains('ship-focus')) { + if (!isShipFocus && !isEngineFocus) { return; } const specificationPath = getMetadata('specifications'); @@ -65,22 +95,13 @@ async function prepareSpecification() { } const specificationsObj = JSON.parse(specification.specifications); - const infoContainer = document.createElement('div'); - const titleElement = document.querySelector('h2'); - - if (specificationsObj.Range) { - addSpeedInformation(specificationsObj.Range, infoContainer); - // Temp content as it is not received from document - addSpeedInformation(specificationsObj['Number of Passengers'].replace('to', '–').replaceAll(' ', ''), infoContainer, 'passengers', true); - addSpeedInformation(specificationsObj.Length, infoContainer); - } - - addSpecifications(specificationsObj); - infoContainer.classList.add('info-container'); - titleElement.parentNode.insertBefore(infoContainer, titleElement); + if (isShipFocus) { + addShipSpecifications(specificationsObj); + } else /* if (isEngineFocus) */ { + addEngineSpecifications(specificationsObj); + } - // these dataset are reference and will be removed later document.body.dataset.features = specification.features; document.body.dataset.specification = specification.specifications; } catch (e) {