https://www.colibrirealestate.com/wp-content/mu-plugins/wp-common-…/cl2-tabs-view.js?ver=77b8e09073c93fce5e6c

1/******/ (() => { // webpackBootstrap
2// This entry needs to be wrapped in an IIFE because it needs to be isolated against other entry modules.
3(() => {
4/**
5 * This has to be listed here:
6 *   app/public/wp-content/mu-plugins/wp-common-plugin/src/Gutenberg/Blocks/webpack.config.js
7 */
8if (document.readyState !== 'loading') {
9  initTabsBlock();
10} else {
11  document.addEventListener('DOMContentLoaded', () => {
12    initTabsBlock();
13  });
14}
15function initTabsBlock() {
16  // Validate if the block exists.
17  const tabsBlocks = document.querySelectorAll('.wp-block-colibri-tabs');
18  if (!tabsBlocks.length) {
19    return;
20  }
21  const debounce = (fn, wait = 100) => {
22    let timeoutId = null;
23    return (...args) => {
24      if (timeoutId) {
25        clearTimeout(timeoutId);
26      }
27      timeoutId = setTimeout(() => fn(...args), wait);
28    };
29  };
30  tabsBlocks.forEach(tabsBlock => {
31    const tabs = tabsBlock.querySelectorAll('[role="tab"]');
32    const tabList = tabsBlock.querySelector('[role="tablist"]');
33    let maxTabsHeight = 0;

34    tabs.forEach(tab => {
35      // Get the highest tab
36      maxTabsHeight = Math.max(maxTabsHeight, tab.offsetHeight);
37
38      // Add a click event handler to each tab
39      tab.addEventListener('click', changeTabs);
40    });
41
42    // Enable arrow navigation between tabs in the tab list
43    let tabFocus = 0;
44    const initialActiveTab = tabsBlock.querySelector('[aria-selected="true"]');
45    if (initialActiveTab) {
46      initialActiveTab.click();
47    }
48    if (!tabList || !tabs.length) {
49      return;
50    }
51    tabList.addEventListener('keydown', e => {
52      // Move right
53      if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
54        tabs[tabFocus].setAttribute('aria-selected', false);
55        if (e.key === 'ArrowRight') {
56          tabFocus++;
57          // If we're at the end, go to the start
58          if (tabFocus >= tabs.length) {
59            tabFocus = 0;
60          }
61          // Move left
62        } else if (e.key === 'ArrowLeft') {
63          tabFocus--;
64          // If we're at the start, move to the end
65          if (tabFocus < 0) {
66            tabFocus = tabs.length - 1;
67          }
68        }
69        tabs[tabFocus].setAttribute('aria-selected', true);
70        tabs[tabFocus].focus();
71        tabs[tabFocus].click();
72        setIndicator();
73      }
74    });
75    window.addEventListener('resize', debounce(resizeFunction, 100), false);
76    function resizeFunction() {
77      setIndicator();
78    }
79    function changeTabs(e) {
80      const target = e.currentTarget;
81      const parent = target.parentNode;
82      const blockWrapper = parent.parentNode.parentNode;
83
84      // Remove all current selected tabs
85      parent.querySelectorAll('[aria-selected="true"]').forEach(t => {
86        t.setAttribute('aria-selected', false);
87      });
88
89      // Set this tab as selected
90      target.setAttribute('aria-selected', true);
91      setIndicator();
92
93      // Hide all tab panels
94      blockWrapper.querySelectorAll('[role="tabpanel"]').forEach(p => p.setAttribute('hidden', true));
95
96      // Show the selected panel
97      blockWrapper.querySelectorAll(`#${target.getAttribute('aria-controls')}`).forEach(p => p.removeAttribute('hidden'));
98      document.body.dispatchEvent(new CustomEvent('COLIBRI:Tabs:tabChanged', {
99        detail: {
100          tab: blockWrapper
101        }
102      }));
103    }
104    function setIndicator() {
105      const indicator = tabsBlock.querySelector('.wp-block-colibri-tabs__indicator');
106      const activeTab = tabsBlock.querySelector('[aria-selected="true"]');
107      if (!indicator || !activeTab) {
108        return;
109      }
110      indicator.style.width = activeTab.offsetWidth + 'px';
111      indicator.style.left = activeTab.offsetLeft + 'px';
112      if (window.innerWidth < 1024) {
113        indicator.style.bottom = 'auto';
114        indicator.style.top = activeTab.offsetTop + activeTab.offsetHeight - indicator.offsetHeight + 1 + 'px';
115      } else {
116        indicator.style.bottom = 0;
117        indicator.style.top = 'auto';
118      }
119    }
120  });
121
122  // Open Address Bar Anchor Tag Tab Directly.
123
124  openTabWithHash();
125  window.addEventListener('hashchange', openTabWithHash);
126  function openTabWithHash() {
127    let hash = window.location.hash;
128    if (hash) {
129      hash = hash.replace('#', '');
130      const tabPanel = document.querySelector(`[data-anchor="${hash}"]`);
131      if (tabPanel !== null) {
132        const tabButton = document.getElementById(tabPanel.getAttribute('aria-labelledby'));
133        if (tabButton !== null) {
134          tabButton.click();
135          if ('scrollToAnchor' in tabPanel.dataset && tabPanel.dataset.scrollToAnchor.toString() === 'true') {
136            const offset = document.querySelector('.site-header').offsetHeight + 40;
137            scrollToTarget(tabButton, offset);
138          }
139        }
140      }
141    }
142  }
143}
144function scrollToTarget(targetEl, offset = 0) {
145  var elementPosition = targetEl.getBoundingClientRect().top;
146  var offsetPosition = elementPosition + window.pageYOffset - offset;
147  window.scrollTo({
148    top: offsetPosition,
149    behavior: 'smooth'
150  });
151}
152})();
153
154// This entry needs to be wrapped in an IIFE because it needs to be in strict mode.
155(() => {
156"use strict";

157// extracted by mini-css-extract-plugin
158
159})();
160
161/******/ })()
162;
163//# sourceMappingURL=cl2-tabs-view.js.map