changed reloading to ajax content replace
This commit is contained in:
@@ -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
|
||||
|
Reference in New Issue
Block a user