Files
NAN_Student_Handbook/assets/js/index.js
2024-03-12 10:59:38 -04:00

643 lines
24 KiB
JavaScript

/******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ "./src/modules/CollapsePanel.js":
/*!**************************************!*\
!*** ./src/modules/CollapsePanel.js ***!
\**************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__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/modules/HammerGestures.js":
/*!***************************************!*\
!*** ./src/modules/HammerGestures.js ***!
\***************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _PageTransitions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./PageTransitions */ "./src/modules/PageTransitions.js");
class HammerGestures {
constructor() {
this.pageTransition = new _PageTransitions__WEBPACK_IMPORTED_MODULE_0__["default"]();
this.history = this.pageTransition.historyArray;
this.init();
}
init() {
document.addEventListener('DOMContentLoaded', () => {
var element = document.getElementById('content-container');
// Create a Hammer instance
var hammer = new Hammer(element);
hammer.get('swipe').set({
direction: Hammer.DIRECTION_ALL
});
// Add a swipe event listener for swipe left
hammer.on('swipeleft', ev => {
this.currentUrl = window.location.href;
// this.goForward(this.currentUrl)
console.log(ev.type);
// this.pageTransition.animatePageTransition(() => {
// this.pageTransition.loadContent(this.pageTransition.navigateArray('forward'), 'content-container')
// })
});
// Add a swipe event listener for swipe right
hammer.on('swiperight', ev => {
this.homeUrl = `https://${window.location.hostname}`;
// this.goBack(this.currentUrl)
console.log(ev.type);
console.log(this.homeUrl);
console.log(JSON.parse(sessionStorage.getItem('historyArray')));
if (JSON.parse(sessionStorage.getItem('historyArray')).length > 1) {
this.pageTransition.animatePageTransition(() => {
this.pageTransition.loadContent(this.pageTransition.navigateArray('backward'), 'content-container');
});
}
});
});
}
// goForward(currentUrl) {
// if (this.history.length > 0) {
// const nextUrl = this.history[this.history.length - 1]
// if (HammerGestures.isSameDomain(currentUrl, nextUrl)) {
// console.log(`Going forward to ${nextUrl}`)
// this.history.pop()
// } else {
// console.log('Cannot go forward. Different domain.')
// }
// } else {
// console.log('Cannot go forward. History is empty.')
// }
// }
// goBack(currentUrl) {
// if (this.history.length > 0) {
// const previousUrl = this.history.pop()
// if (HammerGestures.isSameDomain(currentUrl, previousUrl)) {
// console.log(`Going back to ${previousUrl}`)
// } else {
// console.log('Cannot go back. Different domain.')
// this.history.push(previousUrl) // Re-add the popped URL
// return
// }
// } else {
// console.log('Cannot go back. History is empty.')
// return
// }
// }
static isSameDomain(url1, url2) {
const domain1 = new URL(url1).hostname;
const domain2 = new URL(url2).hostname;
return domain1 === domain2;
}
}
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (HammerGestures);
/***/ }),
/***/ "./src/modules/ImageModal.js":
/*!***********************************!*\
!*** ./src/modules/ImageModal.js ***!
\***********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
class ImageModal {
constructor() {
this.init();
}
init() {
document.addEventListener('DOMContentLoaded', () => {
this.addModalClickListener('.modalOpen');
this.addModalCloseListener('.modalClose');
});
}
addModalClickListener(selector) {
this.modalButtons = document.querySelectorAll(selector);
this.modalButtons.forEach(modalButton => {
modalButton.addEventListener('click', e => {
this.openModal(e);
});
});
}
addModalCloseListener(selector) {
this.modalCloseButtons = document.querySelectorAll(selector);
this.modalCloseButtons.forEach(modalCloseButton => {
modalCloseButton.addEventListener('click', e => {
this.closeModal(e);
});
});
}
openModal(e) {
var modal = e.target.nextElementSibling;
// Show the modal with animation
modal.classList.add('modal--visible');
}
closeModal(e) {
var modal = e.target.closest('.modal');
// Hide the modal with animation
modal.classList.remove('modal--visible');
}
}
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ImageModal);
/***/ }),
/***/ "./src/modules/NavControl.js":
/*!***********************************!*\
!*** ./src/modules/NavControl.js ***!
\***********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
class Nav {
constructor() {
this.toggleMenuBtn = document.getElementById('toggle-nav');
this.toggleSlideOutMenu = document.getElementById('slide-out-menu');
this.accordions = document.querySelectorAll('#slide-out-menu .accordion');
this.backButton = document.getElementById('back-button');
this.init();
}
init() {
document.addEventListener('DOMContentLoaded', () => {
this.toggleMenuBtn.addEventListener('click', () => this.toggleNavMenu());
document.addEventListener('click', event => this.handleOutsideClick(event));
});
}
toggleNavMenu() {
this.toggleMenuBtn.classList.toggle('active');
this.toggleSlideOutMenu.classList.toggle('open');
document.body.classList.toggle('noScroll');
this.collapseAllAccordions();
}
collapseAllAccordions() {
setTimeout(() => {
this.accordions.forEach(accordion => {
accordion.classList.remove('active');
});
}, 600);
}
handleOutsideClick(event) {
if (!this.toggleMenuBtn.contains(event.target) && !this.toggleSlideOutMenu.contains(event.target) && !event.target.classList.contains('accordion')) {
// Click is outside the menu and toggle button
this.toggleMenuBtn.classList.remove('active');
this.toggleSlideOutMenu.classList.remove('open');
document.body.classList.remove('noScroll');
this.collapseAllAccordions();
}
}
}
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Nav);
/***/ }),
/***/ "./src/modules/PageTransitions.js":
/*!****************************************!*\
!*** ./src/modules/PageTransitions.js ***!
\****************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _CollapsePanel__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./CollapsePanel */ "./src/modules/CollapsePanel.js");
/* harmony import */ var _NavControl__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./NavControl */ "./src/modules/NavControl.js");
/* harmony import */ var _ImageModal__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./ImageModal */ "./src/modules/ImageModal.js");
class PageTransitions {
constructor() {
// Check if the history array already exists in the sessionStorage
this.historyArray = JSON.parse(sessionStorage.getItem('historyArray')) || [];
this.navControl = new _NavControl__WEBPACK_IMPORTED_MODULE_1__["default"]();
this.imageModal = new _ImageModal__WEBPACK_IMPORTED_MODULE_2__["default"]();
this.init();
}
init() {
document.addEventListener('DOMContentLoaded', () => {
this.addLinkClickListener('a');
this.addFormSubmitListener('form');
this.addBackButtonListener();
this.createHistoryTracker();
});
}
addBackButtonListener() {
this.navControl.backButton.addEventListener('click', () => {
if (JSON.parse(sessionStorage.getItem('historyArray')).length > 1) {
this.animatePageTransition(() => {
this.loadContent(this.navigateArray('backward'), 'content-container');
});
}
});
}
addLinkClickListener(selector) {
this.links = document.querySelectorAll(selector);
this.links.forEach(link => {
link.addEventListener('click', e => {
e.preventDefault();
if (link.href === window.location.href) {
return;
}
if (this.navControl.toggleMenuBtn.classList.contains('active')) {
this.navControl.toggleNavMenu();
}
if (!this.isExternalLink(link) && this.isWordPressAdminLink(link)) {
window.location.href = link.href; // Navigate normally
} else if (!this.isExternalLink(link)) {
this.animatePageTransition(() => {
this.loadContent(link.href, 'content-container');
// window.location.href = link.href
});
} else if (this.isExternalLink(link)) {
link.setAttribute('target', '_blank');
window.open(link.href, '_system');
}
});
});
}
addFormSubmitListener(selector) {
this.forms = document.querySelectorAll(selector);
this.forms.forEach(form => {
form.addEventListener('submit', e => {
console.log(e);
e.preventDefault();
if (this.navControl.toggleMenuBtn.classList.contains('active')) {
this.navControl.toggleNavMenu();
}
this.animatePageTransition(() => {
this.submitFormAsync(form);
});
});
});
}
animatePageTransition(callback) {
const contentContainer = document.getElementById('content-container');
// Add the transition class
this.addTransitionClass(contentContainer);
// Wait for the transition to complete
callback(); // Call the callback function (loading content) after the transition
}
addTransitionClass(element) {
element.classList.add('page-transition');
}
removeTransitionClass(element) {
element.classList.remove('page-transition');
}
loadContent(targetUrl, elementId) {
fetch(targetUrl).then(response => response.text()).then(data => {
this.updateContent(data, elementId);
history.pushState(null, null, targetUrl);
}).catch(error => console.error('Error fetching content:', error));
}
submitFormAsync(form) {
const formData = new FormData(form);
fetch(form.action, {
method: 'POST',
body: formData
}).then(response => response.text()).then(data => {
// Assuming the response contains the new content to be loaded
const targetUrl = form.action + '?s=' + formData.get('s');
const elementId = 'content-container';
// Trigger removal of transition class after fetching data
const contentContainer = document.getElementById(elementId);
setTimeout(() => {
this.removeTransitionClass(contentContainer);
}, 300);
// Initialize or update dynamic components
this.collapsePanel = new _CollapsePanel__WEBPACK_IMPORTED_MODULE_0__["default"]();
this.collapsePanel.addToggleCollapseListener('#content-container .accordion-toggle');
this.addLinkClickListener('#content-container a');
// Update content, push state, and remove transition class
this.updateContent(data, elementId);
history.pushState(null, null, targetUrl);
this.formResetter(form);
}).catch(error => console.error('Error submitting form:', error));
}
formResetter(form) {
// Clear the search form
var inputs = form.getElementsByTagName('input');
Array.from(inputs).forEach(function (input) {
// Reset the input value
input.value = '';
// Unfocus the input
input.blur();
});
}
updateContent(data, elementId) {
const contentContainer = document.getElementById('content-container');
const parsedData = new DOMParser().parseFromString(data, 'text/html');
const targetElement = parsedData.getElementById(elementId);
if (targetElement) {
const newContent = targetElement.innerHTML;
// Update the content container
contentContainer.innerHTML = newContent;
// Trigger removal of transition class after fetching data
setTimeout(() => {
this.removeTransitionClass(contentContainer);
}, 300);
// Update the page title
const newTitle = parsedData.querySelector('title');
if (newTitle) {
document.title = newTitle.textContent;
}
// Initialize or update dynamic components
this.collapsePanel = new _CollapsePanel__WEBPACK_IMPORTED_MODULE_0__["default"]();
this.collapsePanel.addToggleCollapseListener('#content-container .accordion-toggle');
this.addLinkClickListener('#content-container a');
this.imageModal.addModalClickListener('#content-container .modalOpen');
this.imageModal.addModalCloseListener('#content-container .modalClose');
} else {
console.error(`Element with ID '${elementId}' not found in the fetched data`);
}
}
isExternalLink(link) {
const currentDomain = window.location.hostname;
const linkDomain = link.hostname;
return linkDomain !== currentDomain;
}
isWordPressAdminLink(link) {
// Customize the condition based on your WordPress admin URL structure
const adminUrlRegex = /^.*\/wp-admin\//;
return adminUrlRegex.test(link.href);
}
createHistoryTracker() {
// Get the initial page's href
let initialHref = window.location.href;
// Add Home To History Array
this.historyArray.unshift(initialHref);
// Function to update history array and log it
const updateHistory = () => {
// Get the current page's href
const currentHref = window.location.href;
if (currentHref !== initialHref && (this.historyArray.length === 0 || currentHref !== this.historyArray[this.historyArray.length])) {
this.emptySearch = `https://${window.location.hostname}/?s=`;
// Remove all occurrences of the currentHref from this.historyArray
this.historyArray = this.historyArray.filter(url => url !== currentHref);
// Add the currentHref to the history array
this.historyArray.unshift(currentHref);
sessionStorage.setItem('historyArray', JSON.stringify(this.historyArray));
this.historyArray = JSON.parse(sessionStorage.getItem('historyArray')) || [];
}
};
// Call the updateHistory function on initial load
updateHistory();
// Use MutationObserver to observe changes in the DOM
const observer = new MutationObserver(updateHistory);
// Specify the target node and the type of mutations to observe
const config = {
childList: true,
subtree: true
};
// Start observing the target node for configured mutations
observer.observe(document.body, config);
}
navigateArray(direction) {
if (direction === 'forward') {
console.log('Forward Navigation is Null');
} else if (direction === 'backward') {
this.historyArray.shift();
sessionStorage.setItem('historyArray', JSON.stringify(this.historyArray));
return this.historyArray[0];
}
}
}
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PageTransitions);
/***/ }),
/***/ "./src/modules/SplashScreen.js":
/*!*************************************!*\
!*** ./src/modules/SplashScreen.js ***!
\*************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
class SplashScreen {
constructor() {
this.splashScreen = document.getElementById('splash-screen');
this.enterButton = document.getElementById('app-enter');
this.headerNav = document.getElementById('header-nav');
this.footerNav = document.getElementById('footer-nav');
this.init();
}
init() {
document.addEventListener('DOMContentLoaded', () => {
this.checkFirstVisit();
});
}
checkFirstVisit() {
if (!sessionStorage.getItem('visited')) {
this.showSplashScreen();
this.addEventListeners();
}
}
showSplashScreen() {
if (window.location.href.indexOf('privacy-policy') === -1) {
this.splashScreen.classList.remove('hidden');
this.headerNav.classList.add('out-of-view');
this.footerNav.classList.add('out-of-view');
}
}
hideSplashScreen() {
this.splashScreen.classList.add('close');
setTimeout(() => {
this.headerNav.classList.add('in-view');
this.footerNav.classList.add('in-view');
this.splashScreen.classList.add('hidden');
}, 600);
setTimeout(() => {
this.headerNav.classList.remove('out-of-view');
this.footerNav.classList.remove('out-of-view');
this.headerNav.classList.remove('in-view');
this.footerNav.classList.remove('in-view');
}, 2000);
}
addEventListeners() {
this.enterButton.addEventListener('click', () => {
this.hideSplashScreen();
sessionStorage.setItem('visited', true);
});
}
}
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SplashScreen);
/***/ }),
/***/ "./src/modules/TestModule.js":
/*!***********************************!*\
!*** ./src/modules/TestModule.js ***!
\***********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
class Test {
constructor() {
console.log('This Module is for testing purposes');
}
}
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Test);
/***/ })
/******/ });
/************************************************************************/
/******/ // 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/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 isolated against other modules in the chunk.
(() => {
/*!**********************!*\
!*** ./src/index.js ***!
\**********************/
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _modules_TestModule__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./modules/TestModule */ "./src/modules/TestModule.js");
/* harmony import */ var _modules_NavControl__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modules/NavControl */ "./src/modules/NavControl.js");
/* harmony import */ var _modules_CollapsePanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./modules/CollapsePanel */ "./src/modules/CollapsePanel.js");
/* harmony import */ var _modules_SplashScreen__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./modules/SplashScreen */ "./src/modules/SplashScreen.js");
/* harmony import */ var _modules_ImageModal__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./modules/ImageModal */ "./src/modules/ImageModal.js");
/* harmony import */ var _modules_PageTransitions__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./modules/PageTransitions */ "./src/modules/PageTransitions.js");
/* harmony import */ var _modules_HammerGestures__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./modules/HammerGestures */ "./src/modules/HammerGestures.js");
// Our modules / classes
// Import modules e.g import MobileMenu from "./modules/MobileMenu"
// Instantiate a new object using our modules/classes
// e.g var mobileMenu = new MobileMenu()
const testModule = new _modules_TestModule__WEBPACK_IMPORTED_MODULE_0__["default"]();
const navControl = new _modules_NavControl__WEBPACK_IMPORTED_MODULE_1__["default"]();
const collapsePanel = new _modules_CollapsePanel__WEBPACK_IMPORTED_MODULE_2__["default"]();
const splashScreen = new _modules_SplashScreen__WEBPACK_IMPORTED_MODULE_3__["default"]();
const imageModal = new _modules_ImageModal__WEBPACK_IMPORTED_MODULE_4__["default"]();
const pageTransitions = new _modules_PageTransitions__WEBPACK_IMPORTED_MODULE_5__["default"]();
const hammerGestures = new _modules_HammerGestures__WEBPACK_IMPORTED_MODULE_6__["default"]();
})();
/******/ })()
;
//# sourceMappingURL=index.js.map