Styling focus page to similar design

scripts/scripts.js

@@ -1,6 +1,5 @@
 import {
   sampleRUM,
-  buildBlock,
   // loadHeader,
   // loadFooter,
   decorateButtons,
@@ -12,22 +11,77 @@
   waitForLCP,
   loadBlocks,
   loadCSS,
+  getMetadata,
 } from './aem.js';
 
 const LCP_BLOCKS = []; // add your LCP blocks to the list
 
-/**
- * Builds hero block and prepends to main in a new section.
- * @param {Element} main The container element
- */
-function buildHeroBlock(main) {
-  const h1 = main.querySelector('h1');
-  const picture = main.querySelector('picture');
-  // eslint-disable-next-line no-bitwise
-  if (h1 && picture && (h1.compareDocumentPosition(picture) & Node.DOCUMENT_POSITION_PRECEDING)) {
-    const section = document.createElement('div');
-    section.append(buildBlock('hero', { elems: [picture, h1] }));
-    main.prepend(section);
+function addSpeedInformation(info, containerElement) {
+  const infoElement = document.createElement('div');
+
+  infoElement.classList.add('info');
+
+  const texts = info.split(' ');
+  const result = `<span class="info-number">${texts[0]}</span><span class="info-text">${texts.slice(1).join(' ')}</span>`;
+
+  infoElement.innerHTML = result;
+  containerElement.appendChild(infoElement);
+}
+
+function addSpecifications(specs) {
+  const specContainer = document.createElement('div');
+
+  specContainer.classList.add('spec-container');
+
+  const content = `<h2>SPECIFICATIONS</h2><div><p>Learn more about the ${document.querySelector('h1').textContent} and its technical specifications.</p></div>
+  <table class="spec-table"><tr><th>length</th><th>width</th><th>height</th><th>weight</th></tr>
+  <tr><td>${specs.Length}</td><td>${specs.Width}</td><td>${specs.Height}</td><td>${specs.Weight}</td></tr><table></div>`;
+  specContainer.innerHTML = content;
+
+  const parentElement = document.querySelector('body.ship-focus .default-content-wrapper');
+  parentElement.appendChild(specContainer);
+}
+
+async function prepareSpecification() {
+  try {
+    if (!document.body.classList.contains('ship-focus')) {
+      return;
+    }
+    const specificationPath = getMetadata('specifications');
+    if (!specificationPath) {
+      return;
+    }
+    const specificationUrl = new URL(specificationPath);
+    const specificationsResponse = await fetch('/specifications/query-index.json');
+    if (!specificationsResponse.ok) {
+      return;
+    }
+    const specifications = await specificationsResponse.json();
+    const specification = specifications.data.find((s) => s.path === specificationUrl.pathname);
+    if (!specification) {
+      return;
+    }
+
+    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('570 light years', infoContainer);
+      addSpeedInformation('2.6 Sec', infoContainer);
+    }
+    addSpecifications(specificationsObj);
+
+    infoContainer.classList.add('info-container');
+    titleElement.parentNode.insertBefore(infoContainer, titleElement);
+
+    // these dataset are reference and will be removed later
+    document.body.dataset.features = specification.features;
+    document.body.dataset.specification = specification.specifications;
+  } catch (e) {
+    console.error('could not load specifications', e);
   }
 }
 
@@ -49,7 +103,7 @@
  */
 function buildAutoBlocks(main) {
   try {
-    buildHeroBlock(main);
+    prepareSpecification(main);
   } catch (error) {
     // eslint-disable-next-line no-console
     console.error('Auto Blocking failed', error);

styles/styles.css

@@ -217,9 +217,113 @@ main .section.highlight {
   color: var(--midnight-blue-color);
 }
 
+.default-content-wrapper h2 {
+  margin-top: 60px;
+}
+
+.default-content-wrapper h3:nth-child(odd) {
+  float: right;
+  width: 50%;
+  padding-left: 50%;
+  font-size: var(--paragraph-font-size);
+  margin-top: 80px;
+}
+
+.default-content-wrapper h3:nth-child(odd) + p {
+  float: left;
+  width: 50%;
+  margin-top: -30px;
+  height: 306px;
+}
+
+.default-content-wrapper h3:nth-child(odd) + p img{
+  height: 100%;
+}
+
+.default-content-wrapper h3:nth-child(even) {
+  float: left;
+  width: 50%;
+  padding-right: 50%;
+  font-size: var(--paragraph-font-size);
+  margin-top: 80px;
+}
+
+.default-content-wrapper h3:nth-child(even) + p {
+  float: right;
+  width: 50%;
+  margin-top: -30px;
+  height: 306px;
+}
+
+
+.default-content-wrapper h3:nth-child(even) + p img{
+  height: 100%;
+  float: right;
+}
+
+.default-content-wrapper h3:nth-child(odd) + p + p {
+  padding-left: 50%;
+  line-height: 27px;
+}
+
+.default-content-wrapper h3:nth-child(even) + p + p {
+  padding-right: 50%;
+  line-height: 27px;
+}
+
+.default-content-wrapper .info-container {
+  position: absolute;
+  top: 550px;
+  right: 130px;
+}
+
+.default-content-wrapper .info-container .info-number {
+  font-size: 50px;
+  line-height: 70px;
+  font-weight: 300;
+}
+
+.default-content-wrapper .info-container .info-text {
+  font-size: 15px;
+  line-height: 24px;
+  padding-left: 5px;
+  vertical-align: super;
+}
+
+.default-content-wrapper .info {
+  background-color: var(--background-color);
+  opacity: 0.9;
+  padding: 10px 20px;
+  margin-bottom: 20px;
+}
+
+.default-content-wrapper .spec-container {
+  margin-top: 86px;
+}
 
+/* stylelint-disable-next-line no-descending-specificity */
+.default-content-wrapper .spec-container p {
+  margin-left: 0 !important;
+}
+
+.default-content-wrapper .spec-container table {
+  width: 100%;
+  margin-top: 37px;
+}
+
+.default-content-wrapper .spec-container th {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
+  text-align: left;
+}
+
+.default-content-wrapper .spec-container td {
+  font-size: 20px;
+  line-height: 26px;
+  font-weight: 600;
+}
 /* stylelint-disable-next-line no-descending-specificity */
 p {
   font-size: var(--paragraph-font-size);
 }
-