Event Pge Implement

blocks/breadcrumbs/breadcrumbs.css

@@ -0,0 +1,52 @@
+.breadcrumbs {
+    grid-area: bread;
+    display: inline-block;
+    list-style: none;
+    padding: 0;
+    font-size: 14px;
+    margin-bottom: 50px;
+}
+
+.breadcrumbs ul {
+    padding-top: 0;
+    margin-top: 0;
+}
+
+.breadcrumbs li {
+    display: inline-block;
+    padding: 10px 5px;
+    text-transform: uppercase;
+}
+
+.breadcrumbs li a {
+    color: #202020;
+    text-decoration: none;
+}
+
+.breadcrumbs li:first-child {
+    padding-left: 0;
+}
+
+.breadcrumbs li:last-child {
+    font-weight: 600;
+}
+
+.breadcrumbs li::before {
+    font-family: arial, sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    font-size: 14px;
+    padding-right: 5px;
+}
+
+.breadcrumbs li:first-child::before {
+    content: none;
+}
+
+.breadcrumbs li:not(:last-child)::after {
+    content: ">\00a0";
+    padding: 0 2px 0 7px;
+}

blocks/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,34 @@
+import { getMetadata } from '../../scripts/aem.js';
+
+/**
+ *
+ * @param {HTMLElement} $block The main element
+ */
+export default function decorate($block) {
+  const title = getMetadata('og:title');
+  const $ul = document.createElement('ul');
+  $block.append($ul);
+  const trail = [{
+    text: 'Home',
+    link: '/',
+  }, {
+    text: 'Events',
+    link: '/about-us/events-calendar',
+  }, {
+    text: title,
+  }];
+  while (trail.length) {
+    const step = trail.shift();
+    const $li = document.createElement('li');
+    $ul.append($li);
+    let $wrap = $li;
+    if (step.link) {
+      $wrap = document.createElement('a');
+      $wrap.href = step.link;
+      $li.append($wrap);
+    }
+    const $span = document.createElement('span');
+    $wrap.append($span);
+    $span.textContent = step.text;
+  }
+}

blocks/event-summary/event-summary.css

@@ -0,0 +1,85 @@
+.event-summary {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 20px;
+}
+
+.event-details {
+  flex: 1;
+  max-width: calc(50% -20px);
+  margin: 0 10px 10px 10px;
+}
+
+ul.keyword-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+ul.keyword-list li:not(:last-of-type)::after {
+  content: '|';
+  display: inline-block;
+  margin-left: 10px;
+}
+
+ul.keyword-list li {
+  display: inline-block;
+  margin-right: 10px;
+  position: relative;
+  font-size: 18px;
+  vertical-align: middle;
+}
+
+ul li {
+  padding: 0 0 0 0 !important;
+}
+
+.event-date {
+  font-size: 14px;
+  padding-top: 0 !important;
+}
+
+.event-subtitle {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 12px;
+  color: var(--primary-color);
+}
+
+.event-keywords {
+  font-size: 18px;
+}
+
+.image-container {
+  flex: 0 0 50%;
+  max-width: 50%;
+  margin-right: 30px;
+  overflow: hidden;
+  position: relative;
+}
+
+.image-container .img {
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+}
+
+@media only screen and (max-width: 768px) {
+  .image-container, 
+  .event-details {
+    flex: 1 0 100%;
+    max-width: 100%;
+  }
+
+  .event-details {
+    margin-top: 20px;
+  }
+}
+
+@media only screen and (min-width: 1024px) {
+  .event-details {
+    order: 1;
+  }
+}
+
+

blocks/event-summary/event-summary.js

@@ -0,0 +1,79 @@
+import { getMetadata, createOptimizedPicture } from '../../scripts/aem.js';
+import {
+  div, h1, a, li, p, ul,
+  strong,
+} from '../../scripts/dom-builder.js';
+
+export default async function decorate(block) {
+  const startDatestr = getMetadata('startdate');
+  const endDatestr = getMetadata('enddate');
+  const startDateParts = startDatestr.split('/');
+  const endDateParts = endDatestr.split('/');
+  const startDate = new Date(startDateParts[2], startDateParts[0], startDateParts[1]);
+  const endDate = new Date(endDateParts[2], endDateParts[0], endDateParts[1]);
+  const formattedStartDate = startDate.toLocaleDateString('en-Us', { month: 'short', day: '2-digit', year: 'numeric' });
+  const formattedEndDate = endDate.toLocaleDateString('en-Us', { month: 'short', day: '2-digit', year: 'numeric' });
+  const date = `${formattedStartDate.split(',')[0]} - ${formattedEndDate}`;
+  const image = getMetadata('og:image');
+  const description = getMetadata('og:description');
+  const registerButton = getMetadata('register-button');
+  const title = getMetadata('og:title');
+  const type = getMetadata('type');
+  const region = getMetadata('region');
+  const address = getMetadata('address');
+
+  // Create elements
+  const imageContainer = div(
+    { class: 'image-container' },
+    createOptimizedPicture(image, title),
+  );
+
+  const eventDate = p({ class: 'event-date' }, date);
+  const eventSubtitle = h1({ class: 'event-subtitle' }, title);
+  const keywordList = ul(
+    { class: 'keyword-list' },
+    li({ class: 'item type' }, type),
+    li({ class: 'item region' }, region),
+    li({ class: 'item address' }, address),
+  );
+
+  const eventDescription = p(description);
+  const registerButtonLink = a({ href: registerButton, title }, 'Register Today');
+  const registerButtonContainer = p({ class: 'button-container find-out-more' }, strong(registerButtonLink));
+
+  // Append elements to block
+  block.appendChild(imageContainer);
+  block.appendChild(div({ class: 'event-details' }, eventDate, eventSubtitle, div({ class: 'event-keywords' }, keywordList), div({ class: 'event-description' }, eventDescription, registerButtonContainer)));
+
+  // Add event listener to the 'Register Today' button
+  registerButtonLink.addEventListener('click', (event) => {
+    event.preventDefault();
+
+    const popupMessageBox = div({ class: 'popup-message' });
+    const message = document.createElement('p');
+    message.textContent = 'You are now moving to an external website.';
+
+    const proceedBtn = document.createElement('button');
+    proceedBtn.classList.add('proceed');
+    proceedBtn.textContent = 'Proceed';
+
+    const cancelBtn = document.createElement('button');
+    cancelBtn.classList.add('cancel');
+    cancelBtn.textContent = 'Cancel';
+
+    popupMessageBox.appendChild(message);
+    popupMessageBox.appendChild(proceedBtn);
+    popupMessageBox.appendChild(cancelBtn);
+    block.appendChild(popupMessageBox);
+
+    proceedBtn.addEventListener('click', () => {
+      const ahref = registerButtonLink.getAttribute('href');
+      registerButtonLink.setAttribute('target', '_blank');
+      window.location.href = ahref;
+    });
+
+    cancelBtn.addEventListener('click', () => {
+      popupMessageBox.style.display = 'none';
+    });
+  });
+}

templates/event/event.css

@@ -1,10 +1,13 @@
-.event main .section > div,
-.event main .section div + .default-content-wrapper {
-  padding-top: 0;
+main .section {
+  padding-top: 50px;
+  padding-bottom: 50px;
+  text-align: left;
+  margin: 50px 50px;
 }
 
-.event main .section .default-content-wrapper h2:only-child {
-  padding-bottom: 20px;
+.event main .section > div,
+.event main .section div + .default-content-wrapper {
+  padding-top: 0 !important;
 }
 
 .event main .section .default-content-wrapper {
@@ -13,18 +16,65 @@
 }
 
 .event .event-title {
-  font-size: 36px;
+  font-size: 30px;
+  padding-bottom: 30px;
+  border-bottom: 2px solid #ccc;
+  margin-bottom: 30px;
 }
 
 .event .find-out-more {
   padding: 30px 0;
   margin-right: 8px;
 }
 
-.event .find-out-more .fa-external-link {
-  color: inherit;
-}
-
 .event main .event-container p:last-of-type {
   padding-bottom: 100px;
 }
+
+
+main .section > div {
+  margin: 0 auto;
+  padding: 0 15px;
+}
+
+.popup-message {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #fff;
+  padding: 20px;
+  border: 1px solid #ccc;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  z-index: 9999;
+  text-align: left;
+}
+
+.popup-message p{
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.popup-message .proceed{
+  float: left;
+}
+
+.popup-message .cancel{
+  float: right;
+}
+
+.button-container a {
+  background-color: var(--primary-color) !important;
+  padding: 10px !important;
+  text-decoration: none !important;
+  border: 1px solid var(--primary-color) !important;
+  font-size: 20px !important;
+  color: #fff !important;
+  font-weight: bold !important;
+}
+
+.button-container a :hover {
+  background-color: #fff !important;
+  text-decoration: none !important;
+  color: var(--primary-color) !important;
+}

templates/event/event.js

@@ -1,22 +1,13 @@
-import {
-  div,
-} from '../../scripts/dom-builder.js';
-
 async function renderDetails(insertAfterElement) {
-  const summary = div({ class: 'event-summary' });
-  insertAfterElement.parentNode.insertBefore(summary, insertAfterElement.nextSibling);
+  const summaryWrapper = document.querySelector('event-summary-wrapper');
+  if (summaryWrapper) {
+    const summary = document.querySelector('event-summary');
+    insertAfterElement.parentNode.insertBefore(summary, insertAfterElement.nextSibling);
+  }
 }
 
 export default async function buildAutoBlocks() {
   const title = document.getElementById('event-details');
   if (title) title.classList.add('event-title');
-
-  const moreBtn = document.querySelector('main strong > a:last-of-type');
-  if (moreBtn) {
-    moreBtn.setAttribute('target', '_blank');
-    const par = moreBtn.closest('p');
-    par.classList.add('find-out-more');
-  }
-
   renderDetails(title);
 }