PR2-WTFA45: History Slug based popup done

wp-content/themes/outside-traineeship-boilerplate/blocks/history.php

@@ -1,51 +1,111 @@
 <?php
-$histories          = get_field('history');
-$heading            = $histories['heading'];
-$relationship_posts = $histories['histories-history-relationship'];
+    $histories          = get_field('history');
+    if(!empty($histories)):
+        $heading            = $histories['heading'] ?? '';
+        $relationship_posts = $histories['histories-history-relationship'] ?? [];
 
-$post_ids           = array();
+        $post_ids           = [];
 
-foreach ($relationship_posts as $relationship_post) {
-    //$post_ids . array_push($relationship_post->ID);
-    print_r($relationship_post->ID);
-    $post_ids[] = $relationship_post->ID;
-}
+        foreach ($relationship_posts as $relationship_post) {
+            $post_ids[] = $relationship_post->ID;
+        }
 ?>
 
-<pre>
-    <?php print_r($histories); print_r($post_ids);?>
-</pre>
+        <section id="history" class="history bg-texture py-xl">
+            <?php if (!empty($heading)): ?>
+                <h2 class="history__heading h2 text-section-title text-neutral-600"><?php echo $heading; ?></h2>
+            <?php endif; ?>
+        <?php
+        $args = [
+            'post_type'         => 'history',
+            'posts_per_page'    => -1,
+            'post__in'          => $post_ids,
+        ];
+        $query = new WP_Query($args);
 
+        if ($query->have_posts()): ?>
+            <div class="container m-0 p-0">
+                <div class="swiper history-swiper">
+                    <div class="swiper-wrapper">
+                        <?php
+                        while($query->have_posts()) :
+                            $query->the_post();
+                            $post_id = get_the_ID();
+                            $image_url = get_the_post_thumbnail_url($post_id);
+                            $paragraphs = get_field('history_paragraphs', $post_id);
+                            $title = get_the_title();
+                            $years = get_the_terms($post_id, 'history-year');
+                            $slug = $years[0]->slug;
+                        ?>
 
+                            <div class="history__container swiper-slide" id= "history-card" aria-labelledby="history-heading-<?php echo $post_id; ?>" data-slug="<?php echo $slug; ?>">
 
-<section id="history" class="history">
-    <?php
-    $args = [
-        'post_type'         => 'history',
-        'posts_per_page'    => -1,
-        'post__in'          => $post_ids,
-    ];
-    $query = new WP_Query($args);
+                                <h2 id="history-heading-<?php echo $post_id; ?>" class="history__heading text-xl text-primary">
+                                    <?php echo $title; ?>
+                                </h2>
+
+                                <?php if ($image_url): ?>
+                                    <div class="image-container">
+                                        <img src="<?php echo $image_url; ?>" alt="<?php echo $title; ?>" aria-hidden="true">
+                                    </div>
+                                <?php endif; ?>
 
-    if ($query->have_posts()) {
-        while($query->have_posts()) {
-            $query->the_post();
+                                <?php if ($paragraphs): ?>
+                                    <div class="history__content mb-s">
+                                        <?php foreach ($paragraphs['paragraphs'] as $paragraph): ?>
+                                            <?php if (!empty($paragraph['paragraph'])):?>
+                                                <p class="text-neutral-600 text-md">
+                                                    <?php echo $paragraph['paragraph'];?>
+                                                </p>
+
+                                            <?php endif; ?>
+                                        <?php endforeach; ?>
+                                    </div>
+                                    <a href="#" class="text-sm text-primary text-decoration-none continue-reading" aria-label="Read more about <?php echo $title; ?>"
+                                    data-title="<?php echo esc_attr(get_the_title()); ?>"
+                                    data-slug="<?php echo get_post_field('post_name', $post_id); ?>">
+                                        Continue Reading
+                                    </a>
+
+                                <?php endif; ?>
+                            </div>
+                        <?php endwhile; ?>
+
+                    </div>
+                </div>
+            </div>
+            <?php
+            wp_reset_postdata();
+        else:
+            echo '<p>No posts found</p>';
+        endif;
+        ?>
+
+            <div class="swiper-navigation" aria-label="History carousel navigation">
+                <button class="btn-swiper-prev btn-primary" aria-label="Previous history"></button>
+                <button class="btn-swiper-next btn-primary" aria-label="Next history"></button>
+            </div>
+            <dialog id="popup-dialog" class="p-0" aria-labelledby="popup-title">
+                <div class="popup">
+                    <img src="" id="popup-image" alt="">
+                    <div class="popup-content overflow-scroll">
+                        <p id="popup-title" class="my-m pb-s text-xl text-primary"></p>
+                        <div id="popup-paragraph" ></div>
+                    </div>
+                </div>
+                <button id="popup-close" class="popup-close-btn" aria-label="Close popup">&times;</button>
+            </dialog>
+        </section>
+    <?php endif;?>
+
+
+<!-- <div id="history-popup" class="popup-overlay" aria-hidden="true">
+    <div class="popup-content">
+        <button id="popup-close" class="popup-close-btn" aria-label="Close popup">&times;</button>
+        <div id="popup-body" class="popup-body">
+
+        </div>
+    </div>
+</div> -->
 
-            $post_id = get_the_ID();
-            $image_url = get_the_post_thumbnail_url($post_id);
-            $years = get_the_terms($post_id, 'history-year');
-            $paragraphs = get_field('history_paragraphs', $post_id);
 
-            echo '<h2>' . get_the_title() . '</h2>';
-            ?>
-            <pre>
-                <?php print_r($paragraphs); ?>
-            </pre>
-<?php
-        }
-        wp_reset_postdata();
-    } else {
-        echo 'No posts found';
-    }
-    ?>
-</section>

wp-content/themes/outside-traineeship-boilerplate/functions.php

@@ -147,7 +147,7 @@ function outside_traineeship_biolerplate_scripts() {
 	// wp_enqueue_script( 'swiper-cdn-js', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js', array('jquery'), _S_VERSION, true );
 
 	// wp_enqueue_script('swiper.js', get_template_directory_uri().'/public/scripts/swiper.js', ['jquery'], null, true);
-    wp_enqueue_script('history.js', get_template_directory_uri().'/public/scripts/history.js', ['jquery'], null, true);
+    // wp_enqueue_script('history.js', get_template_directory_uri().'/public/scripts/history.js', ['jquery'], null, true);
 }
 add_action('wp_enqueue_scripts', 'outside_traineeship_biolerplate_scripts');
 

wp-content/themes/outside-traineeship-boilerplate/resources/scripts/app.js

@@ -1,3 +1,3 @@
 console.log('App JS hello world');
 
-import './modules/swiper';
+import './modules/swiper';

wp-content/themes/outside-traineeship-boilerplate/resources/scripts/modules/history.js

@@ -1,27 +1,82 @@
-
 import Swiper from 'swiper/core';
 import { Pagination, Navigation } from 'swiper/modules';
-// import Swiper and modules styles
 import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 
-document.addEventListener("DOMContentLoaded", () => {
-    new Swiper('.historyswiper', {
-        modules: [Pagination, Navigation],
-
-        // calculateHeight: true,
-        loop: true,
-        slidesPerView: "auto",
-        pagination: {
-          el: '.swiper-pagination',
-
-        },
-        navigation: {
-          nextEl: '.swiper-button-next',
-          prevEl: '.swiper-button-prev',
-        },
-      });
-      console.log("hi");
-});
+document.addEventListener('DOMContentLoaded', () => {
+
+  // Initialize Swiper
+  new Swiper('.history-swiper', {
+    modules: [Pagination, Navigation],
+    slidesPerView: "auto",
+    spaceBetween: 24,
+    pagination: { el: '.swiper-pagination' },
+    breakpoints: {
+      700: {
+        spaceBetween: 75,
+      }
+    },
+    navigation: {
+      nextEl: '.btn-swiper-next',
+      prevEl: '.btn-swiper-prev',
+    },
+  });
+
+
+  const popUp = document.querySelector('#popup-dialog');
+  const closeBtn = document.querySelector('#popup-close');
+  const historyCards = document.querySelectorAll('#history-card');
+
+  // Function to show the popup and update the localStorage
+  function showPopup(title, slug, imageUrl, paragraphs) {
+    console.log("Popup Opened");
+    popUp.showModal();
+
+    let popupTitle = document.getElementById('popup-title');
+    popupTitle.innerHTML = `${title}`;
+
+    let popupImage = document.getElementById('popup-image');
+    popupImage.src = `${imageUrl}`;
+
+    let popupParagraph = document.getElementById('popup-paragraph');
+    popupParagraph.innerHTML = `${paragraphs}`;
 
+    localStorage.setItem('popupSlug', slug);
+
+    history.pushState({ slug }, '', `?historyyear=${slug}`);
+  }
+
+  closeBtn.addEventListener('click', () => {
+    popUp.close();
+    localStorage.removeItem('popupSlug');
+    history.replaceState(null, '', window.location.pathname);  
+  });
+
+  historyCards.forEach(card => {
+    card.addEventListener('click', () => {
+      const title = card.querySelector('.history__heading').innerText;
+      const slug = card.getAttribute('data-slug');
+      const imageUrl = card.querySelector('.image-container img')?.src;
+      const paragraphs = card.querySelector('.history__content')?.innerHTML;
+
+      showPopup(title, slug, imageUrl, paragraphs);
+    });
+  });
+
+  // Check if there's a popup slug in the URL on page load
+  const urlParams = new URLSearchParams(window.location.search);
+  const popupSlug = urlParams.get('historyyear');  
+
+  if (popupSlug) {
+    const cardToOpen = Array.from(historyCards).find(card => card.getAttribute('data-slug') === popupSlug);
+
+    if (cardToOpen) {
+      const title = cardToOpen.querySelector('.history__heading').innerText;
+      const imageUrl = cardToOpen.querySelector('.image-container img')?.src;
+      const paragraphs = cardToOpen.querySelector('.history__content')?.innerHTML;
+
+      showPopup(title, popupSlug, imageUrl, paragraphs);
+    }
+  }
+});

wp-content/themes/outside-traineeship-boilerplate/resources/styles/app.scss

@@ -44,8 +44,6 @@
 
 @import './styles/featured-projects.scss';
 
-@import './styles/history.scss';
-
 /** Extra layer of bootstrap Only */
 @import './../../node_modules/bootstrap/scss/containers';
 @import './../../node_modules/bootstrap/scss/grid';