Enhance RocketChat livechat initialization and improve smooth scrolling in BasicScripts
- Refactored the RocketChat livechat widget initialization to prevent multiple initializations and ensure proper loading of the script, improving performance and user experience. - Implemented a mechanism in the BasicScripts component to manage event listeners for smooth scrolling, allowing for cleanup of old handlers to prevent memory leaks.
This commit is contained in:
@@ -175,11 +175,20 @@ import { UI } from 'astrowind:config';
|
|||||||
onPageShow();
|
onPageShow();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Store smooth scrolling handlers to allow cleanup
|
||||||
|
let smoothScrollHandlers = new WeakMap();
|
||||||
|
|
||||||
// Handle smooth scrolling for anchor links across all pages
|
// Handle smooth scrolling for anchor links across all pages
|
||||||
function setupSmoothScrolling() {
|
function setupSmoothScrolling() {
|
||||||
// Handle links that start with # (pure anchor links)
|
// Handle links that start with # (pure anchor links)
|
||||||
document.querySelectorAll('a[href^="#"]:not([href="#"])').forEach((anchor) => {
|
document.querySelectorAll('a[href^="#"]:not([href="#"])').forEach((anchor) => {
|
||||||
anchor.addEventListener('click', function (e) {
|
// Remove old handler if exists
|
||||||
|
const oldHandler = smoothScrollHandlers.get(anchor);
|
||||||
|
if (oldHandler) {
|
||||||
|
anchor.removeEventListener('click', oldHandler);
|
||||||
|
}
|
||||||
|
|
||||||
|
const handler = function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
const targetId = this.getAttribute('href').substring(1);
|
const targetId = this.getAttribute('href').substring(1);
|
||||||
@@ -191,12 +200,21 @@ import { UI } from 'astrowind:config';
|
|||||||
behavior: 'smooth',
|
behavior: 'smooth',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
};
|
||||||
|
|
||||||
|
anchor.addEventListener('click', handler);
|
||||||
|
smoothScrollHandlers.set(anchor, handler);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Handle links that contain # but don't start with it (page + anchor)
|
// Handle links that contain # but don't start with it (page + anchor)
|
||||||
document.querySelectorAll('a[href*="#"]:not([href^="#"])').forEach((anchor) => {
|
document.querySelectorAll('a[href*="#"]:not([href^="#"])').forEach((anchor) => {
|
||||||
anchor.addEventListener('click', function (e) {
|
// Remove old handler if exists
|
||||||
|
const oldHandler = smoothScrollHandlers.get(anchor);
|
||||||
|
if (oldHandler) {
|
||||||
|
anchor.removeEventListener('click', oldHandler);
|
||||||
|
}
|
||||||
|
|
||||||
|
const handler = function (e) {
|
||||||
const href = this.getAttribute('href');
|
const href = this.getAttribute('href');
|
||||||
const isHashLink = this.getAttribute('data-hash-link') === 'true';
|
const isHashLink = this.getAttribute('data-hash-link') === 'true';
|
||||||
|
|
||||||
@@ -240,7 +258,10 @@ import { UI } from 'astrowind:config';
|
|||||||
window.location.href = href;
|
window.location.href = href;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
};
|
||||||
|
|
||||||
|
anchor.addEventListener('click', handler);
|
||||||
|
smoothScrollHandlers.set(anchor, handler);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -88,40 +88,92 @@ const { language, textDirection } = I18N;
|
|||||||
<CookieBanner />
|
<CookieBanner />
|
||||||
<BackToTop />
|
<BackToTop />
|
||||||
|
|
||||||
|
<script is:inline>
|
||||||
<script type="text/javascript">
|
// Initialize RocketChat livechat widget
|
||||||
// Initialize RocketChat livechat widget without client-facing logs
|
(function() {
|
||||||
(function(w, d, s, u) {
|
// Prevent multiple initializations
|
||||||
w.RocketChat = function(c) {
|
if (window.rocketChatInitialized) {
|
||||||
if (w.RocketChat._) {
|
return;
|
||||||
w.RocketChat._.push(c);
|
}
|
||||||
|
|
||||||
|
window.rocketChatInitialized = true;
|
||||||
|
|
||||||
|
// Initialize RocketChat API
|
||||||
|
window.RocketChat = function(c) {
|
||||||
|
if (window.RocketChat._) {
|
||||||
|
window.RocketChat._.push(c);
|
||||||
} else {
|
} else {
|
||||||
w.RocketChat._ = [c];
|
window.RocketChat._ = [c];
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
if (!w.RocketChat._) {
|
|
||||||
w.RocketChat._ = [];
|
if (!window.RocketChat._) {
|
||||||
|
window.RocketChat._ = [];
|
||||||
}
|
}
|
||||||
w.RocketChat.url = u;
|
|
||||||
function loadRocketChat() {
|
window.RocketChat.url = 'https://chat.365devnet.eu/livechat';
|
||||||
|
|
||||||
|
function loadRocketChatScript() {
|
||||||
|
// Check if script is already loaded
|
||||||
|
if (document.querySelector('script[src*="rocketchat-livechat"]')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const h = d.getElementsByTagName(s)[0];
|
const firstScript = document.getElementsByTagName('script')[0];
|
||||||
if (!h) {
|
if (!firstScript || !firstScript.parentNode) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const j = d.createElement(s);
|
|
||||||
j.async = true;
|
const script = document.createElement('script');
|
||||||
j.src = 'https://chat.365devnet.eu/livechat/rocketchat-livechat.min.js?_=201903270000';
|
script.async = true;
|
||||||
j.onerror = function() {};
|
script.src = 'https://chat.365devnet.eu/livechat/rocketchat-livechat.min.js?_=201903270000';
|
||||||
h.parentNode.insertBefore(j, h);
|
|
||||||
} catch (_) {}
|
script.onerror = function() {
|
||||||
|
// Silently fail - don't show errors to users
|
||||||
|
window.rocketChatInitialized = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
script.onload = function() {
|
||||||
|
// Script loaded successfully
|
||||||
|
};
|
||||||
|
|
||||||
|
firstScript.parentNode.insertBefore(script, firstScript);
|
||||||
|
} catch (e) {
|
||||||
|
// Silently fail - don't show errors to users
|
||||||
|
window.rocketChatInitialized = false;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
if (d.readyState === 'loading') {
|
|
||||||
d.addEventListener('DOMContentLoaded', loadRocketChat);
|
// Load on initial page load
|
||||||
|
if (document.readyState === 'loading') {
|
||||||
|
document.addEventListener('DOMContentLoaded', loadRocketChatScript);
|
||||||
} else {
|
} else {
|
||||||
loadRocketChat();
|
loadRocketChatScript();
|
||||||
}
|
}
|
||||||
})(window, document, 'script', 'https://chat.365devnet.eu/livechat');
|
|
||||||
|
// Reinitialize after Astro View Transitions
|
||||||
|
document.addEventListener('astro:after-swap', function() {
|
||||||
|
// Reset initialization flag to allow reload
|
||||||
|
window.rocketChatInitialized = false;
|
||||||
|
|
||||||
|
// Small delay to ensure DOM is ready
|
||||||
|
setTimeout(function() {
|
||||||
|
if (window.RocketChat && window.RocketChat.livechat) {
|
||||||
|
// Widget already exists, just ensure it's visible
|
||||||
|
try {
|
||||||
|
window.RocketChat.livechat.maximizeWidget();
|
||||||
|
} catch (e) {
|
||||||
|
// If maximizeWidget fails, widget might need full reload
|
||||||
|
loadRocketChatScript();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Widget doesn't exist, load it
|
||||||
|
loadRocketChatScript();
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ImageModal />
|
<ImageModal />
|
||||||
|
|||||||
Reference in New Issue
Block a user