From 2cb83feb1e591fc6b97296d8c9801a72395dc34b Mon Sep 17 00:00:00 2001
From: Pauline Judge <pauline.judge@lullabot.com>
Date: Mon, 29 Apr 2024 14:28:29 -0400
Subject: [PATCH] turning media assets carousel back on, still WIP

---
 themes/mukurtu_v4/js/media-asset-carousel.js  | 30 +++++++++++++++++--
 .../node--digital-heritage--full.html.twig    |  2 ++
 .../field--node--field-media-assets.html.twig |  8 +++--
 3 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/themes/mukurtu_v4/js/media-asset-carousel.js b/themes/mukurtu_v4/js/media-asset-carousel.js
index 34c464c0..d223f09b 100644
--- a/themes/mukurtu_v4/js/media-asset-carousel.js
+++ b/themes/mukurtu_v4/js/media-asset-carousel.js
@@ -4,18 +4,42 @@
  */
 
   ((Drupal, once) => { 
+    let main, thumbnails;
     /**
      * Initialize the carousel.
      */
     function init(el) {
-      splide.refresh();
+      // main.sync( thumbnails );
+      // main.mount();
+      // thumbnails.mount();
     }
   
     Drupal.behaviors.mediaAssetCarousel = {
       attach(context) {
         once("mediaAssets", ".field--name-field-media-assets", context).forEach(init);
 
-        if (Drupal.behaviors.mediaAssetCarousel.mediaAssetSlider == undefined) {
+        // main = new Splide( '#main-carousel', {
+        //   type      : 'fade',
+        //   rewind    : true,
+        //   pagination: false,
+        //   arrows    : false,
+        // } );
+      
+        // thumbnails = new Splide( '.splide.media-carousel', {
+        //   fixedWidth  : 100,
+        //   fixedHeight : 60,
+        //   gap         : 10,
+        //   rewind      : true,
+        //   pagination  : false,
+        //   isNavigation: true,
+        //   breakpoints : {
+        //     600: {
+        //       fixedWidth : 60,
+        //       fixedHeight: 44,
+        //     },
+        //   },
+        // } );
+
 
           Drupal.behaviors.mediaAssetCarousel.mediaAssetSlider = new Splide('.splide.media-carousel', {
             perPage: 3,
@@ -28,7 +52,7 @@
             gap: '16px',
             start: 0,
           }).mount();
-        }
+
       }
     };
   })(Drupal, once);
diff --git a/themes/mukurtu_v4/templates/content/node--digital-heritage--full.html.twig b/themes/mukurtu_v4/templates/content/node--digital-heritage--full.html.twig
index 45db24ad..c67b8ad9 100644
--- a/themes/mukurtu_v4/templates/content/node--digital-heritage--full.html.twig
+++ b/themes/mukurtu_v4/templates/content/node--digital-heritage--full.html.twig
@@ -76,6 +76,8 @@
       
       <div class="full-node__main">
         <div class="full-node__content">
+          {# <h1>HERE BE THE TEST</h1>
+          {{ node.field_media_assets|view('carousel_thumbnail') }} #}
           {{ content.group_primary_fields|without('field_all_related_content') }}
         </div>
 
diff --git a/themes/mukurtu_v4/templates/field/field--node--field-media-assets.html.twig b/themes/mukurtu_v4/templates/field/field--node--field-media-assets.html.twig
index 99945ac2..300e0c0e 100644
--- a/themes/mukurtu_v4/templates/field/field--node--field-media-assets.html.twig
+++ b/themes/mukurtu_v4/templates/field/field--node--field-media-assets.html.twig
@@ -53,12 +53,12 @@
   ]
 %}
 
-{{ attach_library('mukurtu_v4/splide') }}
-{{ attach_library('mukurtu_v4/media-carousel') }}
+ {{ attach_library('mukurtu_v4/splide') }}
+ {{ attach_library('mukurtu_v4/media-carousel') }} 
 
 {% if items|length > 1 %}
 
-{# a carousel needs to appear #}
+{# The large size media carousel. #}
   <section{{ attributes.addClass(classes, 'field__items splide media-carousel') }} aria-label="Media Assets Carousel">
     <div class="splide__track">
       <ul class="splide__list">  
@@ -69,6 +69,8 @@
     </div>
   </section>
 
+  {# The thumbnail carousel. #}
+
   {% else %}
 
   <div{{ attributes }}>