changed reloading to ajax content replace

This commit is contained in:
prospect
2024-01-19 02:13:37 -05:00
parent 391c87f83f
commit 4a395f32c5
5 changed files with 231 additions and 162 deletions

View File

@@ -15,9 +15,22 @@ __webpack_require__.r(__webpack_exports__);
class CollapsePanel {
constructor() {
this.toggles = document.querySelectorAll('.accordion-toggle');
this.toggleCollapse();
this.init();
}
toggleCollapse() {
init() {
document.addEventListener('DOMContentLoaded', () => {
this.addToggleCollapseListener();
});
}
addToggleCollapseListener() {
this.toggles.forEach(toggle => {
toggle.addEventListener('click', () => {
toggle.parentNode.parentNode.classList.toggle('active');
});
});
}
addNewToggleCollapseListener() {
this.toggles = document.querySelectorAll('#content-container .accordion-toggle');
this.toggles.forEach(toggle => {
toggle.addEventListener('click', () => {
toggle.parentNode.parentNode.classList.toggle('active');
@@ -79,38 +92,66 @@ __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");
// Import the CollapsePanel class
class PageTransitions {
constructor() {
this.init();
this.links = document.querySelectorAll('a');
console.log(this.links);
}
init() {
document.addEventListener('DOMContentLoaded', () => {
this.addClickListener();
console.log('The DOM has loaded');
this.addLinkClickListener();
});
}
addClickListener() {
addLinkClickListener() {
this.links = document.querySelectorAll('a');
this.links.forEach(link => {
link.addEventListener('click', e => {
e.preventDefault();
if (this.isExternalLink(link)) {
link.setAttribute('target', '_blank');
}
e.preventDefault();
this.loadContent(link.getAttribute('href'), 'content-container');
});
});
}
loadContent(targetUrl) {
addNewLinkClickListener() {
this.newlinks = document.querySelectorAll('#content-container a');
console.log(this.newlinks);
this.newlinks.forEach(link => {
link.addEventListener('click', e => {
e.preventDefault();
if (this.isExternalLink(link)) {
link.setAttribute('target', '_blank');
}
this.loadContent(link.getAttribute('href'), 'content-container');
});
});
}
loadContent(targetUrl, elementId) {
fetch(targetUrl).then(response => response.text()).then(data => {
this.updateContent(data);
this.updateContent(data, elementId);
history.pushState(null, null, targetUrl);
}).catch(error => console.error('Error fetching content:', error));
}
updateContent(data) {
updateContent(data, elementId) {
const contentContainer = document.getElementById('content-container');
const parsedData = new DOMParser().parseFromString(data, 'text/html');
contentContainer.innerHTML = parsedData.getElementById('content').innerHTML;
const targetElement = parsedData.getElementById(elementId);
if (targetElement) {
const newContent = targetElement.innerHTML;
// If you want to replace the content instead of appending:
contentContainer.innerHTML = newContent;
// Create an instance of CollapsePanel and call toggleCollapse
this.collapsePanel = new _CollapsePanel__WEBPACK_IMPORTED_MODULE_0__["default"]();
this.collapsePanel.addNewToggleCollapseListener();
this.addNewLinkClickListener();
} else {
console.error(`Element with ID '${elementId}' not found in the fetched data`);
}
}
// Function to check if a link is external