web.start-it.nl/themes/agico-hugo/assets/js/script.js

(function () {
  "use strict";

  window.addEventListener("load", () => {
    // Element Existence Checker Function
    function isElementExist(element) {
      if (element) {
        return true;
      }
      return false;
    }

    

    // Aos js 
    AOS.init({
      once: true,
      offset: 50,
      easing: 'ease',
      duration: 600
    });

    // ##################
    // Video Modal 
    // ##################
    let videoPlayBtn = document.querySelectorAll(".play-icon");
    let videoModal = document.querySelector("#videoModal");

    if (isElementExist(videoPlayBtn)) {
      videoPlayBtn.forEach((btn) => {
        btn.addEventListener("click", function () {
          let videoIframe = document.querySelector("#videoModal iframe");
          let videoLink = btn.getAttribute("video-url");
          videoIframe.setAttribute("src", videoLink);
        });
      });

      if (isElementExist(videoModal)) {
        videoModal.addEventListener("hidden.bs.modal", function () {
          let videoIframe = document.querySelector("#videoModal iframe");
          videoIframe.setAttribute("src", "");
        });
      }
    };

    // ##################
    // counterUp 
    // ##################
    // You can change this class to specify which elements are going to behave as counters.
    var elements = document.querySelectorAll(".counter");

    elements.forEach(function (item) {
      // Add new attributes to the elements with the '.counter' HTML class
      item.counterAlreadyFired = false;
      item.counterSpeed = item.getAttribute("data-counter-time") / 45;
      item.counterTarget = +item.innerText;
      item.counterCount = 0;
      item.counterStep = item.counterTarget / item.counterSpeed;

      item.updateCounter = function () {
        item.counterCount = item.counterCount + item.counterStep;
        item.innerText = Math.ceil(item.counterCount);

        if (item.counterCount < item.counterTarget) {
          setTimeout(item.updateCounter, item.counterSpeed);
        } else {
          item.innerText = item.counterTarget;
        }
      };
    });

    // Function to determine if an element is visible in the web page
    var isElementVisible = function isElementVisible(el) {
      var scroll = window.scrollY || window.pageYOffset;
      var boundsTop = el.getBoundingClientRect().top + scroll;
      var viewport = {
        top: scroll,
        bottom: scroll + window.innerHeight,
      };
      var bounds = {
        top: boundsTop,
        bottom: boundsTop + el.clientHeight,
      };
      return (
        (bounds.bottom >= viewport.top && bounds.bottom <= viewport.bottom) ||
        (bounds.top <= viewport.bottom && bounds.top >= viewport.top)
      );
    };

    // Funciton that will get fired uppon scrolling
    var handleScroll = function handleScroll() {
      elements.forEach(function (item, id) {
        if (true === item.counterAlreadyFired) return;
        if (!isElementVisible(item)) return;
        item.updateCounter();
        item.counterAlreadyFired = true;
      });
    };

    // Fire the function on scroll
    window.addEventListener("scroll", handleScroll);
  })

  // ##################
  // navfixed
  // ##################
  let scrolling = window.scrollY;
  let navigation = document.querySelector(".navigation");

  function navFixed() {
    scrolling = window.scrollY;

    if (scrolling > 10) {
      navigation.classList.add('nav-bg');
    } else {
      navigation.classList.remove('nav-bg');
    }
  };

  navFixed();
  window.addEventListener("scroll", (e) => {
    navFixed();
  })

  // ##################
  // testimonial
  // ##################
  new Swiper(".testimonial-slider", {
    slidesPerView: 3,
    loop: true,
    spaceBetween: 50,
    grabCursor: true,
    enteredSlides: true,
    speed: 900,
    autoplay: true,
    breakpoints: {
      // when window width is >= 0 px
      0: {
        slidesPerView: 1,
        spaceBetween: 40
      },
      // when window width is >= 768 px
      768: {
        slidesPerView: 2,
        spaceBetween: 50
      },
      // when window width is >= 991 px
      991: {
        slidesPerView: 3,
        spaceBetween: 50
      }
    }
  });

})();

// ##################
// Contact form
// ##################
(function () {
  function ready(fn){ if(document.readyState!=='loading'){fn()} else {document.addEventListener('DOMContentLoaded',fn)} }

  ready(function(){
    const form = document.getElementById('leadcapture-form');
    if (!form) return;

    const okEl  = document.getElementById('leadcapture-status');
    const errEl = document.getElementById('leadcapture-error');
    const endpoint = "https://crm.start-it.nl/api/v1/LeadCapture/231344ae2852d65f41e98d99da418af8";

    const get = (name) => form.elements.namedItem(name);

    form.addEventListener('submit', async function(e){
      e.preventDefault();

      // Laat native HTML5 validatie werken (required, email type, etc.)
      if (!form.reportValidity()) return;

      if (okEl) okEl.hidden = true;
      if (errEl) errEl.hidden = true;

      // Honeypot
      if (((get('company')?.value) || '').trim() !== '') return;

      // Extra JS-validatie (redundant maar handig)
      const email = ((get('emailAddress')?.value) || '').trim();
      const last  = ((get('lastName')?.value) || '').trim();
      const desc  = ((get('description')?.value) || '').trim();

      if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) || !last || !desc) {
        if (errEl) { errEl.hidden = false; errEl.textContent = "Controleer achternaam, e-mail en bericht."; }
        return;
      }

      const payload = {
        salutationName: (get('salutationName')?.value || null),
        firstName: (get('firstName')?.value || null),
        lastName: last || null,
        emailAddress: email || null,
        phoneNumber: (get('phoneNumber')?.value || null),
        description: desc || null
      };

      const submitBtn = form.querySelector('button[type="submit"]');
      if (submitBtn) submitBtn.disabled = true;

      try {
        const res = await fetch(endpoint, {
          method: 'POST',
          headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
          body: JSON.stringify(payload),
          mode: 'cors',
          credentials: 'omit'
        });

        if (res.ok) {
          form.reset();
          if (okEl) okEl.hidden = false;
        } else {
          const text = await res.text().catch(() => '');
          console.error('LeadCapture response:', res.status, text);
          if (errEl) { errEl.hidden = false; errEl.textContent = "Serverfout ("+res.status+")."; }
        }
      } catch (err) {
        console.error('LeadCapture error:', err);
        if (errEl) { errEl.hidden = false; errEl.textContent = "Netwerk/CORS fout. Zie console."; }
      } finally {
        if (submitBtn) submitBtn.disabled = false;
      }
    });
  });
})();

document.addEventListener("DOMContentLoaded", () => {
  const rows = document.querySelectorAll("table tbody tr");
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        rows.forEach((row, i) => {
          setTimeout(() => {
            row.classList.add("show");
          }, i * 150);
        });
        observer.disconnect(); // eenmalig
      }
    });
  }, { threshold: 0.1 });

  if (rows.length) observer.observe(rows[0]);
});

// ##################
// Newsletter form
// ##################

(function () {
  const endpoint = "https://crm.start-it.nl/api/v1/LeadCapture/f6016190c29bc5723216f685be18a5e1";

  function ready(fn){
    if (document.readyState !== "loading") fn();
    else document.addEventListener("DOMContentLoaded", fn);
  }

  ready(() => {
    const form = document.getElementById("newsletter-form");
    if (!form) return;

    const okEl  = document.getElementById("newsletter-status");
    const errEl = document.getElementById("newsletter-error");

    const get = (name) => form.elements.namedItem(name);

    form.addEventListener("submit", async (e) => {
      e.preventDefault();

      if (okEl) okEl.hidden = true;
      if (errEl) errEl.hidden = true;

      // Honeypot (mailchimp hidden field)
      const hpName = (get("{{ .mailchimp_form_name }}") ? "{{ .mailchimp_form_name }}" : null);
      if (hpName && ((get(hpName)?.value || "").trim() !== "")) return;

      const email = ((get("EMAIL")?.value) || "").trim();
      if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
        if (errEl) { errEl.hidden = false; errEl.textContent = "Vul een geldig e-mailadres in."; }
        return;
      }

      const submitBtn = form.querySelector('button[type="submit"]');
      if (submitBtn) submitBtn.disabled = true;

      try {
        const res = await fetch(endpoint, {
          method: "POST",
          headers: { "Accept": "application/json", "Content-Type": "application/json" },
          body: JSON.stringify({ emailAddress: email }),
          mode: "cors",
          credentials: "omit"
        });

        const text = await res.text().catch(() => "");

        if (res.ok) {
          form.reset();
          if (okEl) okEl.hidden = false;
        } else {
          console.error("Newsletter LeadCapture response:", res.status, text);
          if (errEl) { errEl.hidden = false; errEl.textContent = `Serverfout (${res.status}).`; }
        }
      } catch (err) {
        console.error("Newsletter LeadCapture error:", err);
        if (errEl) { errEl.hidden = false; errEl.textContent = "Netwerk/CORS fout. Zie console."; }
      } finally {
        if (submitBtn) submitBtn.disabled = false;
      }
    });
  });
})();