https://www.caparol.de/typo3conf/ext/scbw_systemaufbau_kontakt/Res…/Public/JavaScript/plugin.js?1789111195

1document.addEventListener('DOMContentLoaded', () => {
2  if (!document.querySelector('.scbw-systemaufbau-kontakt')) {
3    return;
4  }
5
6  const content = document.querySelector('#content');
7  if (!content) {
8    return;
9  }
10
11  const label = window.TYPO3?.lang?.['tx_scbwsystemaufbaukontakt.js.goto_form'] || 'Jetzt Anfrage starten';
12  content.insertAdjacentHTML('beforeend', `
13    <a class="scbw-systemaufbau-kontakt__scroll-form" href="javascript:">
14      <span>${label}</span>
15      <span class="scbw-systemaufbau-kontakt__scroll-form-icon">
16        <svg width="30" height="22" viewBox="0 0 30 22">
17          <path d="M3.58142 0.179688C2.11097 0.179688 0.917969 1.37269 0.917969 2.84314C0.917969 3.68102 1.31194 4.46896 1.98335 4.9739L14.0577 14.0296C14.6902 14.5013 15.5559 14.5013 16.1884 14.0296L28.2627 4.9739C28.9342 4.46896 29.3281 3.68102 29.3281 2.84314C29.3281 1.37269 28.1351 0.179688 26.6647 0.179688H3.58142ZM0.917969 6.39441V17.936C0.917969 19.8948 2.51049 21.4873 4.46924 21.4873H25.7769C27.7356 21.4873 29.3281 19.8948 29.3281 17.936V6.39441L17.2538 15.4501C16.6395 15.912 15.8917 16.1618 15.123 16.1618C14.3544 16.1618 13.6066 15.912 12.9923 15.4501L0.917969 6.39441Z" fill="currentColor"/>
18        </svg>
19      </span>
20    </a>
21  `);
22
23  const scrollForm = document.querySelector('.scbw-systemaufbau-kontakt__scroll-form');
24  const contactForm = document.querySelector('#contact_form');
25  if (!scrollForm || !contactForm) {
26    return;
27  }
28
29  const scrollPositionTolerance = 10;
30
31  function waitForScrollToComplete(target, timeout) {
32    return new Promise((resolve) => {
33      let isResolved = false;
34      let timeoutId;
35
36      const finish = () => {
37        if (isResolved) {
38          return;
39        }
40        isResolved = true;
41        window.clearTimeout(timeoutId);
42        resolve();
43      };
44
45      const checkScrollPosition = () => {
46        if (Math.abs(window.scrollY - target) < scrollPositionTolerance) {
47          finish();
48          return;
49        }
50
51        if (!isResolved) {
52          window.requestAnimationFrame(checkScrollPosition);
53        }
54      };
55
56      timeoutId = window.setTimeout(finish, timeout);
57      checkScrollPosition();
58    });
59  }
60
61  let isAutoScrolling = false;
62
63  scrollForm.addEventListener('click', async (e) => {
64    e.preventDefault();
65    hideScrollForm();
66    isAutoScrolling = true;
67    const target = contactForm.offsetTop;
68    window.scrollTo({
69      top: target,
70      behavior: 'smooth',
71    });
72    await waitForScrollToComplete(target, 2000);
73    isAutoScrolling = false;
74  });
75
76  const hideScrollForm = () => {
77    scrollForm.style.pointerEvents = 'none';
78    scrollForm.style.opacity = '0';
79    scrollForm.addEventListener(
80      'transitionend',
81      (e) => {
82        if (e.propertyName === 'opacity' && scrollForm.style.opacity === '0') {
83          scrollForm.style.visibility = 'hidden';
84        }
85      },
86      { once: true },
87    );
88  };
89
90  const showScrollForm = () => {
91    scrollForm.style.visibility = 'visible';
92    scrollForm.style.pointerEvents = 'auto';
93    requestAnimationFrame(() => {
94      scrollForm.style.opacity = '1';
95    });
96  };
97
98  const updateScrollFormVisibility = () => {
99    const contactFormDistance = Math.abs(window.scrollY - contactForm.offsetTop);
100    if (contactFormDistance < scrollPositionTolerance) {
101      hideScrollForm();
102    } else {
103      showScrollForm();
104    }
105  };
106
107  let previousScrollY = window.scrollY;
108
109  window.addEventListener('scroll', () => {
110    const currentScrollY = window.scrollY;
111    const isUserScrollingY = !isAutoScrolling && currentScrollY !== previousScrollY;
112    if (isUserScrollingY) {
113      updateScrollFormVisibility();
114    }
115    previousScrollY = currentScrollY;
116  }, { passive: true });
117});