Merge branch 'launchday'

assets/css/templates/about.css

@@ -21,3 +21,11 @@
 ul li p {
   display: inline;
 }
+@media screen and (max-width: 768px) {
+  main {
+    margin: 0;
+  }
+  section.contact {
+    margin-bottom: 2em;
+  }
+}

assets/css/templates/home.css

@@ -0,0 +1,6 @@
+@media (max-width: 768px) {
+  .menu-toggle.toggle.pseudo-list-item {
+    padding-left: 30px;
+    width: auto;
+  }
+}

assets/css/templates/nightschool.css

@@ -44,3 +44,9 @@ menu
 .button__link {
   background-color: var(--cc-primary-highlight);
 }
+
+/* items */
+ul.items:not(.dates),
+#artists-items {
+  padding: 0 0 0 2.3rem;
+}

assets/css/templates/satellite.css

@@ -0,0 +1,5 @@
+/* items */
+#artists-items,
+ul.items:not(.dates) {
+  padding: 0 0 0 2.3rem;
+}

assets/css/templates/supporters.css

@@ -29,7 +29,8 @@ Layout
   }
 
   #col2 {
-    margin-right: 1.5rem !important;
+    margin-right: 0;
+    padding: 0 30px;
   }
   .logos img {
     /* margin: 2em; */
@@ -40,6 +41,8 @@ Layout
     display: flex;
     align-content: center;
     justify-content: center;
+
+    flex-direction: column;
   }
 }
 

assets/js/ae24-squig.js

@@ -124,7 +124,10 @@ function setupHoverInteractions(data) {
   const svg = d3.select("#lineCanvas");
   const liOffset = 14;
 
-  d3.selectAll(".dates li, .events-container li, .artists-container li")
+  // d3.selectAll(".dates li, .events-container li, .artists-container li")
+  d3.selectAll(
+    ".dates li:not(.first-item), .events-container li:not(.first-item), .artists-container li:not(.first-item)"
+  )
     .on("mouseover", function (event, d) {
       const element = d3.select(this);
       const elementId = element.attr("data-id");
@@ -174,23 +177,45 @@ function setupHoverInteractions(data) {
         });
 
         data.artists[elementId].events.forEach((eventId) => {
-          const eventElement = document
-            .querySelector(`[data-id="${eventId}"][data-type="events"]`)
-            .getBoundingClientRect();
-          points.push({
-            x: eventElement.left - liOffset,
-            y: eventElement.top + liOffset,
-          });
-
-          const dateId = data.events[eventId].date;
-          const dateElement = document
-            .querySelector(`[data-id="${dateId}"][data-type="date"]`)
-            .getBoundingClientRect();
+          const eventElement = document.querySelector(
+            `[data-id="${eventId}"][data-type="events"]`
+          );
 
-          points.push({
-            x: dateElement.left - liOffset,
-            y: dateElement.top + liOffset,
-          });
+          if (eventElement) {
+            const rect = eventElement.getBoundingClientRect();
+            points.push({
+              x: rect.left - liOffset,
+              y: rect.top + liOffset,
+            });
+            const dateId = data.events[eventId].date;
+            const dateElement = document
+              .querySelector(`[data-id="${dateId}"][data-type="date"]`)
+              .getBoundingClientRect();
+            points.push({
+              x: dateElement.left - liOffset,
+              y: dateElement.top + liOffset,
+            });
+          } else {
+            // Handle the case where the event is not on the current page
+            // Determine if the event belongs to 'satellite' or 'nightschool' by checking the eventId
+            if (eventId.startsWith("satellite")) {
+              const satelliteElement = document
+                .getElementById("page__satellite")
+                .getBoundingClientRect();
+              points.push({
+                x: satelliteElement.left - liOffset,
+                y: satelliteElement.top + liOffset,
+              });
+            } else if (eventId.startsWith("nightschool")) {
+              const nightschoolElement = document
+                .getElementById("page__nightschool")
+                .getBoundingClientRect();
+              points.push({
+                x: nightschoolElement.left - liOffset,
+                y: nightschoolElement.top + liOffset,
+              });
+            }
+          }
         });
       } else if (elementType === "date") {
         // fetch related events, draw line from date to each event, then to event's artists

assets/js/menu-overlay.js

@@ -12,10 +12,12 @@ document.addEventListener("DOMContentLoaded", function () {
     // toggle body scroll
 
     if (window.innerWidth <= 768) {
-      if (!isOpen) {
-        document.body.style.overflowY = "hidden";
-      } else {
-        document.body.style.overflowY = "scroll";
+      if (!document.body.classList.contains("plain-text")) {
+        if (!isOpen) {
+          document.body.style.overflowY = "hidden";
+        } else {
+          document.body.style.overflowY = "scroll";
+        }
       }
     }
   });

assets/js/script.js

@@ -1,14 +1,144 @@
 document.addEventListener("DOMContentLoaded", function () {
+  const handleTouchStart = function (e) {
+    this.touchStartY = e.touches[0].clientY;
+  };
+
+  const touchContext = { touchStartY: 0 };
+
+  const handleTouchMove = function (e) {
+    e.preventDefault();
+    const touchEndY = e.touches[0].clientY;
+    const deltaY = this.touchStartY - touchEndY;
+    const col3 = document.getElementById("col3");
+    col3.scrollTop += deltaY;
+    this.touchStartY = touchEndY;
+  }.bind(touchContext);
+
+  const handleWheel = function (e) {
+    e.preventDefault();
+    const col3 = document.getElementById("col3");
+    col3.scrollTop += e.deltaY;
+  };
+
+  let customScrollHandlingAdded = false;
+
+  // add custom scroll handling
+  function addCustomScrollHandling() {
+    // early exit
+    if (customScrollHandlingAdded) return;
+
+    window.addEventListener("touchstart", handleTouchStart.bind(touchContext), {
+      passive: false,
+    });
+    window.addEventListener("touchmove", handleTouchMove, { passive: false });
+    window.addEventListener("wheel", handleWheel, { passive: false });
+
+    customScrollHandlingAdded = true;
+  }
+
+  function removeCustomScrollHandling() {
+    if (!customScrollHandlingAdded) return;
+
+    window.removeEventListener(
+      "touchstart",
+      handleTouchStart.bind(touchContext),
+      { passive: false }
+    );
+    window.removeEventListener("touchmove", handleTouchMove, {
+      passive: false,
+    });
+    window.removeEventListener("wheel", handleWheel, { passive: false });
+
+    customScrollHandlingAdded = false;
+  }
+
+  // desktop check
+  if (window.innerWidth >= 768) {
+    addCustomScrollHandling();
+  }
+
+  // handle window resizing
+  window.addEventListener("resize", function () {
+    if (window.innerWidth >= 768 && !customScrollHandlingAdded) {
+      addCustomScrollHandling();
+    } else if (window.innerWidth < 768 && customScrollHandlingAdded) {
+      removeCustomScrollHandling();
+    }
+  });
+
   // function to toggle styles
   const togglePlainText = document.getElementById("togglePlainTextView");
   const settingsButton = document.getElementById("settingsButton");
+  const settingsContainer = document.getElementById("settingsContainer");
+
+  const body = document.body;
+  const menuHeaderContainer = document.querySelector(
+    ".menu-header-container-global"
+  );
+  const menuToggleButton = document.querySelector(".menu-toggle");
+  const menuItems = document.getElementById("menu-items");
+  const ulElements = document.querySelectorAll("ul");
 
   // update button text based on the new state
   const isDisabledStyles = localStorage.getItem("stylesDisabled") === "true";
   togglePlainText.textContent = !isDisabledStyles
     ? "Plain Text View"
     : "Styled Text View";
 
+  function applyPlainTextStyles(enable) {
+    if (enable) {
+      body.classList.add("plain-text");
+      body.style.maxWidth = "60em";
+      if (menuHeaderContainer) {
+        menuHeaderContainer.style.position = "fixed";
+        menuHeaderContainer.style.right = "0.3rem";
+        menuHeaderContainer.style.top = "2em";
+      }
+
+      // if (menuToggleButton.attributes.expanded) {
+      if (!body.classList.contains("home") && menuToggleButton) {
+        menuToggleButton.setAttribute("expanded", "false");
+        menuItems.style.visibility = "hidden";
+        menuItems.style.opacity = "0";
+        menuItems.style.pointerEvents = "none";
+      }
+      if (settingsContainer) {
+        settingsButton.style.display = "none";
+        settingsContainer.style.display = "none";
+      }
+
+      ulElements.forEach((ul) => {
+        ul.style.margin = "0";
+        ul.style.padding = "0";
+      });
+
+      // Remove custom scroll handling in plain text mode
+      removeCustomScrollHandling();
+    } else {
+      body.classList.remove("plain-text");
+      body.style.maxWidth = "";
+      if (menuHeaderContainer) {
+        menuHeaderContainer.style.position = "";
+        menuHeaderContainer.style.right = "";
+        menuHeaderContainer.style.top = "";
+      }
+      if (settingsContainer) {
+        settingsButton.style.display = "block";
+        settingsContainer.style.display = "flex";
+      }
+      ulElements.forEach((ul) => {
+        ul.style.margin = "";
+        ul.style.padding = "";
+      });
+      // add custom scroll handling in styled text mode
+      addCustomScrollHandling();
+    }
+  }
+
+  if (isDisabledStyles) {
+    applyPlainTextStyles(true);
+  }
+
   togglePlainText.addEventListener("click", function () {
     const isDisabled = localStorage.getItem("stylesDisabled") === "true";
     // Toggle the disabled state based on the opposite of the current state
@@ -18,6 +148,9 @@ document.addEventListener("DOMContentLoaded", function () {
     // Save the new state in localStorage
     localStorage.setItem("stylesDisabled", !isDisabled);
 
+    // Apply or remove plain text styles
+    applyPlainTextStyles(!isDisabled);
+
     if (settingsButton) {
       settingsButton.style.display = !isDisabled
         ? "block !important"
@@ -61,6 +194,9 @@ document.addEventListener("DOMContentLoaded", function () {
     if (parent) {
       parent.classList.toggle("list-style-circle", isExpanded);
     }
+    if (button.classList.contains("menu-toggle")) {
+      button.classList.toggle("list-style-circle", isExpanded);
+    }
   }
 
   // attach event listeners to all toggle buttons
@@ -78,25 +214,6 @@ function initSections() {
     const sectionId = button.getAttribute("aria-controls");
     const sectionItems = document.getElementById(sectionId);
 
-    // if (isMobile) {
-    //   // collapse section items & set aria-expanded to false on mobile
-    //   sectionItems.style.display = "none";
-    //   button.setAttribute("aria-expanded", "false");
-
-    //   // style collapsed sections
-    //   const parent = button.closest("li.first-item");
-    //   if (parent) {
-    //     parent.classList.add("list-style-circle");
-    //   }
-    // } else {
-    //   // style collapsed sections for desktop
-    //   const isExpanded = button.getAttribute("aria-expanded") === "true";
-    //   const parent = button.closest("li.first-item");
-    //   if (parent) {
-    //     parent.classList.toggle("list-style-circle", !isExpanded);
-    //   }
-    // }
-
     // style collapsed sections for desktop
     const isExpanded = button.getAttribute("aria-expanded") === "true";
     const parent = button.closest("li.first-item");

site/config/config.php

@@ -76,8 +76,8 @@ function generateRelationsJson()
  * all config options: https://getkirby.com/docs/reference/system/options
  */
 return [
-    // 'debug' => true,
-    'debug' => false,
+    'debug' => true,
+    // 'debug' => false,
     'panel' => [
         'install' => true
     ],