486 lines
17 KiB
JavaScript
486 lines
17 KiB
JavaScript
/******/ (() => { // webpackBootstrap
|
|
/******/ var __webpack_modules__ = ({
|
|
|
|
/***/ "./src/scripts/CollapsePanel.js":
|
|
/*!**************************************!*\
|
|
!*** ./src/scripts/CollapsePanel.js ***!
|
|
\**************************************/
|
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
|
|
"use strict";
|
|
__webpack_require__.r(__webpack_exports__);
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
|
|
/* harmony export */ });
|
|
class CollapsePanel {
|
|
constructor() {
|
|
this.init();
|
|
}
|
|
init() {
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
this.addToggleCollapseListener('.accordion-toggle');
|
|
});
|
|
}
|
|
addToggleCollapseListener(selector) {
|
|
this.toggles = document.querySelectorAll(selector);
|
|
this.toggles.forEach(toggle => {
|
|
toggle.addEventListener('click', () => {
|
|
toggle.parentNode.parentNode.classList.toggle('active');
|
|
});
|
|
});
|
|
}
|
|
}
|
|
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CollapsePanel);
|
|
|
|
/***/ }),
|
|
|
|
/***/ "./src/scripts/ContactTabs.js":
|
|
/*!************************************!*\
|
|
!*** ./src/scripts/ContactTabs.js ***!
|
|
\************************************/
|
|
/***/ (() => {
|
|
|
|
class ContactTabs {
|
|
constructor() {
|
|
this.tabLinks = document.querySelectorAll('.tab-link');
|
|
this.tabs = document.querySelectorAll('.tab');
|
|
this.selectTab = document.getElementById('tabs');
|
|
this.contactTabs = document.getElementById('contact-tabs');
|
|
if (!this.contactTabs) {
|
|
console.error("Element with id 'contact-tabs' not found.");
|
|
return;
|
|
}
|
|
this.initializeTabs();
|
|
this.syncTabsWithSelect();
|
|
this.syncSelectWithTabs();
|
|
this.handleHashNavigation(); // Call handleHashNavigation on initialization
|
|
this.handleFormSubmission(); // Handle form submission on initialization
|
|
}
|
|
initializeTabs() {
|
|
// Hide all tab contents except the first one
|
|
this.tabs.forEach((tab, index) => {
|
|
if (index !== 0) {
|
|
tab.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// Activate the first tab link by default
|
|
this.tabLinks[0].classList.add('bg-blue-100');
|
|
this.tabLinks.forEach(tabLink => {
|
|
tabLink.addEventListener('click', this.handleTabLinkClick.bind(this));
|
|
});
|
|
}
|
|
handleTabLinkClick(event) {
|
|
// event.preventDefault(); // Prevent scrolling to the hash position
|
|
const tabLink = event.currentTarget;
|
|
const tabName = tabLink.getAttribute('data-tab');
|
|
|
|
// Store the last opened tab in session storage
|
|
sessionStorage.setItem('lastTab', tabName);
|
|
|
|
// Update the hash
|
|
this.updateHash(tabName);
|
|
|
|
// Show the clicked tab
|
|
this.showTab(tabName);
|
|
}
|
|
showTab(tabName) {
|
|
// Hide all tabs
|
|
this.tabs.forEach(tab => {
|
|
tab.style.display = 'none';
|
|
});
|
|
|
|
// Deactivate all tab links
|
|
this.tabLinks.forEach(link => {
|
|
link.classList.remove('bg-blue-100');
|
|
});
|
|
|
|
// Show the selected tab
|
|
document.getElementById(tabName).style.display = 'block';
|
|
|
|
// Activate the clicked tab link
|
|
const tabLink = document.querySelector(`[data-tab="${tabName}"]`);
|
|
if (tabLink) {
|
|
tabLink.classList.add('bg-blue-100');
|
|
}
|
|
|
|
// Update the select dropdown
|
|
if (this.selectTab) {
|
|
this.selectTab.value = tabName;
|
|
}
|
|
}
|
|
syncTabsWithSelect() {
|
|
if (!this.selectTab) return;
|
|
this.selectTab.addEventListener('change', event => {
|
|
const selectedTabName = event.target.value;
|
|
|
|
// Store the last opened tab in session storage
|
|
sessionStorage.setItem('lastTab', selectedTabName);
|
|
|
|
// Update the hash
|
|
this.updateHash(selectedTabName);
|
|
this.showTab(selectedTabName);
|
|
});
|
|
}
|
|
syncSelectWithTabs() {
|
|
if (!this.tabLinks) return;
|
|
this.tabLinks.forEach(tabLink => {
|
|
tabLink.addEventListener('click', event => {
|
|
const tabName = tabLink.getAttribute('data-tab');
|
|
|
|
// Store the last opened tab in session storage
|
|
sessionStorage.setItem('lastTab', tabName);
|
|
|
|
// Update the hash
|
|
this.updateHash(tabName);
|
|
this.selectTab.value = tabName;
|
|
});
|
|
});
|
|
}
|
|
handleHashNavigation() {
|
|
const lastTab = sessionStorage.getItem('lastTab');
|
|
const hash = window.location.hash.substring(1);
|
|
if (hash) {
|
|
// If there's a hash in the URL, attempt to show the corresponding tab
|
|
this.showTab(hash);
|
|
// Store the last opened tab in session storage
|
|
sessionStorage.setItem('lastTab', hash);
|
|
} else if (lastTab) {
|
|
// If there's a stored tab, show that tab
|
|
this.showTab(lastTab);
|
|
} else {
|
|
// If there's neither a stored tab nor a hash, default to showing the first tab
|
|
this.showTab(this.tabLinks[0].dataset.tab);
|
|
}
|
|
}
|
|
updateHash(hash) {
|
|
// Update the hash without causing the page to scroll
|
|
history.replaceState(null, null, '#' + hash);
|
|
}
|
|
handleFormSubmission() {
|
|
// Check for success or failure notifications in the URL query parameters
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const successMessage = urlParams.get('success');
|
|
const errorMessage = urlParams.get('error');
|
|
if (successMessage || errorMessage) {
|
|
// If success or error notification is present, show the last opened tab
|
|
const lastTab = sessionStorage.getItem('lastTab');
|
|
if (lastTab) {
|
|
this.showTab(lastTab);
|
|
}
|
|
// Remove the message from the URL
|
|
history.replaceState(null, null, window.location.pathname);
|
|
}
|
|
}
|
|
}
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// Check if element with id "contact-tabs" exists
|
|
const contactTabs = document.getElementById('contact-tabs');
|
|
if (contactTabs) {
|
|
const tabs = new ContactTabs();
|
|
// Handle hash navigation on hash change
|
|
window.addEventListener('hashchange', () => {
|
|
tabs.handleHashNavigation();
|
|
});
|
|
} else {
|
|
console.log("Element with id 'contact-tabs' not found.");
|
|
}
|
|
});
|
|
|
|
/***/ }),
|
|
|
|
/***/ "./src/scripts/NavControl.js":
|
|
/*!***********************************!*\
|
|
!*** ./src/scripts/NavControl.js ***!
|
|
\***********************************/
|
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
|
|
"use strict";
|
|
__webpack_require__.r(__webpack_exports__);
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
|
|
/* harmony export */ });
|
|
class NavControl {
|
|
constructor() {
|
|
this.topBanner = document.getElementById('top-banner');
|
|
this.navbar = document.getElementById('header-nav');
|
|
this.navbarPadding = document.getElementById('header-padder');
|
|
this.contentContainer = document.getElementById('content-container');
|
|
this.toggleMenuBtn = document.getElementById('toggle-nav');
|
|
this.slideOutMenu = document.getElementById('slide-out-menu');
|
|
this.accordions = document.querySelectorAll('#slide-out-menu .accordion');
|
|
this.toggleSearchBtn = document.getElementById('toggle-search');
|
|
this.headerSearch = document.getElementById('header-search');
|
|
this.headerSearchOverlay = document.getElementById('search-overlay');
|
|
this.hoursDropdownToggle = document.getElementById('hours-dropdown-toggle');
|
|
this.todaysBusinessHoursEl = document.getElementById('todays-business-hours');
|
|
this.businessHoursMenu = this.hoursDropdownToggle.nextElementSibling;
|
|
this.init();
|
|
}
|
|
init() {
|
|
// Add event listeners directly, no need to wait for DOMContentLoaded
|
|
// Add a single click event listener to document for handling link clicks and outside clicks
|
|
document.addEventListener('click', event => {
|
|
this.handleLinkAndOutsideClick(event);
|
|
});
|
|
window.addEventListener('scroll', this.handleScroll.bind(this));
|
|
|
|
// Open and Close the Nav Menu
|
|
this.toggleMenuBtn.addEventListener('click', () => this.toggleNavMenu());
|
|
|
|
// Open and Close the Nav Search
|
|
this.toggleSearchBtn.addEventListener('click', () => this.toggleSearch());
|
|
|
|
// Delegate click event to handle business hours toggle
|
|
this.hoursDropdownToggle.addEventListener('click', () => {
|
|
this.businessHoursMenu.classList.toggle('hidden');
|
|
});
|
|
document.addEventListener('keyup', e => this.keyPressDispatcher(e));
|
|
this.businessHours();
|
|
}
|
|
headerOutOfView() {
|
|
this.navbar.classList.add('out-of-view');
|
|
}
|
|
headerInView() {
|
|
setTimeout(() => {
|
|
this.navbar.classList.add('in-view');
|
|
}, 100);
|
|
// setTimeout(() => {
|
|
// this.navbar.classList.remove('out-of-view');
|
|
// this.navbar.classList.remove('in-view');
|
|
// }, 2000);
|
|
}
|
|
handleScroll() {
|
|
var scrollPosition = window.scrollY;
|
|
if (scrollPosition > 0) {
|
|
// Change this value to adjust when the navbar becomes fixed
|
|
this.headerOutOfView();
|
|
this.headerInView();
|
|
this.navbarPadding.style.display = 'block';
|
|
// this.topBanner.classList.remove('open');
|
|
this.navbar.classList.add('fixed');
|
|
// this.navbarPadding.classList.add('open');
|
|
this.topBanner.style.display = 'none';
|
|
} else {
|
|
// this.topBanner.classList.add('open');
|
|
this.topBanner.style.display = 'block';
|
|
this.navbarPadding.style.display = 'none';
|
|
this.navbar.classList.remove('in-view', 'out-of-view', 'fixed');
|
|
// this.navbarPadding.classList.remove('open');
|
|
setTimeout(() => {
|
|
this.navbar.classList.remove('in-view');
|
|
}, 100);
|
|
}
|
|
}
|
|
isSearchOpen() {
|
|
if (this.headerSearch.classList.contains('active')) {
|
|
return true; // Search is open
|
|
} else {
|
|
return false; // Search is not open
|
|
}
|
|
}
|
|
isMenuOpen() {
|
|
if (this.slideOutMenu.classList.contains('active')) {
|
|
return true; // Menu is open
|
|
} else {
|
|
return false; // Menu is not open
|
|
}
|
|
}
|
|
keyPressDispatcher(e) {
|
|
console.log('Key pressed: ', e.keyCode); // Add this line
|
|
if (e.keyCode === 83 && !this.isSearchOpen()) {
|
|
this.toggleSearch();
|
|
}
|
|
if (e.keyCode === 77 && !this.isMenuOpen() && !this.isSearchOpen()) {
|
|
this.toggleNavMenu();
|
|
}
|
|
if (e.keyCode === 27) {
|
|
if (this.isSearchOpen()) {
|
|
this.toggleSearch();
|
|
} else if (this.isMenuOpen()) {
|
|
this.toggleNavMenu();
|
|
}
|
|
}
|
|
}
|
|
handleLinkAndOutsideClick(event) {
|
|
const target = event.target;
|
|
|
|
// Handle link clicks
|
|
const link = target.closest('a');
|
|
if (link) {
|
|
if (link.href === window.location.href && this.toggleMenuBtn.classList.contains('active')) {
|
|
this.toggleNavMenu();
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Handle outside clicks
|
|
const isOutsideMenu = !this.toggleMenuBtn.contains(target) && !this.slideOutMenu.contains(target) && !this.toggleSearchBtn.contains(target) && !this.headerSearch.contains(target);
|
|
if (isOutsideMenu) {
|
|
this.toggleMenuBtn.classList.remove('active');
|
|
this.slideOutMenu.classList.remove('open');
|
|
this.removeBodyNoScroll();
|
|
}
|
|
const isOutsideBusinessHoursToggle = !this.hoursDropdownToggle.contains(target) && !this.hoursDropdownToggle.classList.contains('hidden');
|
|
if (isOutsideBusinessHoursToggle) {
|
|
this.businessHoursMenu.classList.add('hidden');
|
|
}
|
|
const isOutsideSearch = !this.toggleSearchBtn.contains(target) && !this.headerSearch.contains(target) && !this.toggleMenuBtn.contains(target) && !this.slideOutMenu.contains(target);
|
|
if (isOutsideSearch) {
|
|
this.toggleSearchBtn.classList.remove('active');
|
|
this.headerSearch.classList.remove('active');
|
|
this.headerSearchOverlay.classList.remove('active');
|
|
this.removeBodyNoScroll();
|
|
}
|
|
}
|
|
toggleNavMenu() {
|
|
if (this.headerSearch.classList.contains('active')) {
|
|
this.toggleSearch();
|
|
}
|
|
this.toggleMenuBtn.classList.toggle('active');
|
|
this.slideOutMenu.classList.toggle('open');
|
|
document.body.classList.toggle('noScroll');
|
|
this.collapseAllAccordions();
|
|
}
|
|
toggleSearch() {
|
|
if (this.toggleMenuBtn.classList.contains('active')) {
|
|
this.toggleNavMenu();
|
|
}
|
|
this.headerSearch.classList.toggle('active');
|
|
this.headerSearchOverlay.classList.toggle('active');
|
|
this.headerSearch.querySelector('input').focus();
|
|
document.body.classList.toggle('noScroll');
|
|
if (this.headerSearch.classList.contains('active')) {
|
|
this.headerSearch.querySelector('input').value = '';
|
|
}
|
|
}
|
|
collapseAllAccordions() {
|
|
this.accordions.forEach(accordion => {
|
|
accordion.classList.remove('active');
|
|
});
|
|
}
|
|
removeBodyNoScroll() {
|
|
if (document.body.classList.contains('noScroll')) {
|
|
document.body.classList.remove('noScroll');
|
|
}
|
|
}
|
|
businessHours() {
|
|
const dayOfWeek = new Date().getDay();
|
|
const defaultHours = 'Open Today from 9:00 am - 5:00 pm';
|
|
let todaysBusinessHours;
|
|
switch (dayOfWeek) {
|
|
case 0: // Sunday
|
|
case 6:
|
|
// Saturday
|
|
todaysBusinessHours = `<span class="text-red-500">We are closed today.</span>`;
|
|
break;
|
|
default:
|
|
// Monday to Friday
|
|
todaysBusinessHours = `<span class="text-green-500">${defaultHours}</span>`;
|
|
break;
|
|
}
|
|
this.todaysBusinessHoursEl.innerHTML = todaysBusinessHours;
|
|
}
|
|
}
|
|
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (NavControl);
|
|
|
|
/***/ })
|
|
|
|
/******/ });
|
|
/************************************************************************/
|
|
/******/ // The module cache
|
|
/******/ var __webpack_module_cache__ = {};
|
|
/******/
|
|
/******/ // The require function
|
|
/******/ function __webpack_require__(moduleId) {
|
|
/******/ // Check if module is in cache
|
|
/******/ var cachedModule = __webpack_module_cache__[moduleId];
|
|
/******/ if (cachedModule !== undefined) {
|
|
/******/ return cachedModule.exports;
|
|
/******/ }
|
|
/******/ // Create a new module (and put it into the cache)
|
|
/******/ var module = __webpack_module_cache__[moduleId] = {
|
|
/******/ // no module.id needed
|
|
/******/ // no module.loaded needed
|
|
/******/ exports: {}
|
|
/******/ };
|
|
/******/
|
|
/******/ // Execute the module function
|
|
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
|
|
/******/
|
|
/******/ // Return the exports of the module
|
|
/******/ return module.exports;
|
|
/******/ }
|
|
/******/
|
|
/************************************************************************/
|
|
/******/ /* webpack/runtime/compat get default export */
|
|
/******/ (() => {
|
|
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
|
/******/ __webpack_require__.n = (module) => {
|
|
/******/ var getter = module && module.__esModule ?
|
|
/******/ () => (module['default']) :
|
|
/******/ () => (module);
|
|
/******/ __webpack_require__.d(getter, { a: getter });
|
|
/******/ return getter;
|
|
/******/ };
|
|
/******/ })();
|
|
/******/
|
|
/******/ /* webpack/runtime/define property getters */
|
|
/******/ (() => {
|
|
/******/ // define getter functions for harmony exports
|
|
/******/ __webpack_require__.d = (exports, definition) => {
|
|
/******/ for(var key in definition) {
|
|
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
|
|
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
|
|
/******/ }
|
|
/******/ }
|
|
/******/ };
|
|
/******/ })();
|
|
/******/
|
|
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
|
/******/ (() => {
|
|
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
|
|
/******/ })();
|
|
/******/
|
|
/******/ /* webpack/runtime/make namespace object */
|
|
/******/ (() => {
|
|
/******/ // define __esModule on exports
|
|
/******/ __webpack_require__.r = (exports) => {
|
|
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
|
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
/******/ }
|
|
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
|
/******/ };
|
|
/******/ })();
|
|
/******/
|
|
/************************************************************************/
|
|
var __webpack_exports__ = {};
|
|
// This entry need to be wrapped in an IIFE because it need to be in strict mode.
|
|
(() => {
|
|
"use strict";
|
|
/*!**********************!*\
|
|
!*** ./src/index.js ***!
|
|
\**********************/
|
|
__webpack_require__.r(__webpack_exports__);
|
|
/* harmony import */ var _scripts_CollapsePanel__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./scripts/CollapsePanel */ "./src/scripts/CollapsePanel.js");
|
|
/* harmony import */ var _scripts_NavControl__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./scripts/NavControl */ "./src/scripts/NavControl.js");
|
|
/* harmony import */ var _scripts_ContactTabs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./scripts/ContactTabs */ "./src/scripts/ContactTabs.js");
|
|
/* harmony import */ var _scripts_ContactTabs__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_scripts_ContactTabs__WEBPACK_IMPORTED_MODULE_2__);
|
|
// import './styles/styles.scss';
|
|
|
|
// import React from 'react';
|
|
// import { createRoot } from 'react-dom/client';
|
|
|
|
|
|
|
|
// import TestModule from './scripts/TestModule';
|
|
|
|
// createRoot(document.querySelector('#root')).render(<ExampleReactComponent />);
|
|
const collapsePanel = new _scripts_CollapsePanel__WEBPACK_IMPORTED_MODULE_0__["default"]();
|
|
// const testModule = new TestModule();
|
|
const navControl = new _scripts_NavControl__WEBPACK_IMPORTED_MODULE_1__["default"]();
|
|
})();
|
|
|
|
/******/ })()
|
|
;
|
|
//# sourceMappingURL=index.js.map
|