first theme commit
This commit is contained in:
486
assets/js/index.js
Normal file
486
assets/js/index.js
Normal file
@@ -0,0 +1,486 @@
|
||||
/******/ (() => { // 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
|
Reference in New Issue
Block a user