WIP

2025-05-20 14:15:03 -07:00
parent c074a5ef18
commit edcad561a5
179 changed files with 52733 additions and 4704 deletions
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -0,0 +1,93 @@
+import $ from 'jquery';
+import 'slick-carousel';
+
+
+// slick sliders
+$('.logo-slider .logos').slick({
+    infinite: true,
+    slidesToShow: 5,
+    pauseOnHover: false,
+    arrows: false,
+    autoplay: true,
+    responsive: [
+        {
+            breakpoint: 1200,
+            settings: {
+                slidesToShow: 4,
+            }
+        },
+        {
+            breakpoint: 992,
+            settings: {
+                slidesToShow: 3,
+            }
+        },
+        {
+            breakpoint: 768,
+            settings: {
+                slidesToShow: 2,
+            }
+        },
+        {
+            breakpoint: 576,
+            settings: {
+                slidesToShow: 1,
+            }
+        },
+    ]
+});
+
+$('.testimonials').slick({
+    infinite: true,
+    slidesToShow: 1,
+    arrows: true,
+    autoplay: true,
+    autoplaySpeed: 7000,
+    adaptiveHeight: true,
+    dots: true,
+    prevArrow: '<button type="button" class="slick-prev"><img src="/wp-content/themes/mccans-theme/assets/chevron-left.svg" alt="" /></button>',
+    nextArrow: '<button type="button" class="slick-next"><img src="/wp-content/themes/mccans-theme/assets/chevron-right.svg" alt="" /></button>',
+});
+
+
+
+// dynamic maps
+const customIcon = L.icon({
+    iconUrl: '/wp-content/themes/mccans-theme/assets/map-marker.png',
+    iconSize: [33, 50],     // width and height of the icon
+    iconAnchor: [16, 50],   // point of the icon which will correspond to marker's location
+    popupAnchor: [0, -50]   // point from which the popup should open relative to the iconAnchor
+});
+document.addEventListener("DOMContentLoaded", function () {
+    document.querySelectorAll(".leaflet-map").forEach((el) => {
+        const lat = parseFloat(el.dataset.lat);
+        const lng = parseFloat(el.dataset.lng);
+        const title = el.dataset.title;
+
+        if (isNaN(lat) || isNaN(lng)) return;
+
+        const map = L.map(el).setView([lat, lng], 13);
+        L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
+            attribution: '&copy; <a href="https://carto.com/">CARTO</a> | © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+            subdomains: 'abcd',
+            maxZoom: 19,
+        }).addTo(map);
+
+
+        L.marker([lat, lng], {icon: customIcon})
+            .addTo(map)
+            .bindPopup(`${title} Location`);
+    });
+});
+
+
+// top nav expand items
+$(".menu-item-has-children").append("<button class='toggle-sub-nav'></button>");
+$("body").on("click", ".toggle-sub-nav", (e) => {
+    $(e.target).parent("li").toggleClass("children-showing");
+});
+// mobile nav toggle
+document.getElementById("mobile-nav-toggle").addEventListener("click", (e) => {
+    e.preventDefault();
+    document.getElementsByTagName("body")[0].classList.toggle("mobile-nav-open");
+});