MediaWiki:Common.js: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 17: | Line 17: | ||
var frameWrap = document.createElement('div'); | var frameWrap = document.createElement('div'); | ||
frameWrap.id = 'nanofab-chat-wrap'; | frameWrap.id = 'nanofab-chat-wrap'; | ||
var iframe = document.createElement('iframe'); | var iframe = document.createElement('iframe'); | ||
| Line 28: | Line 27: | ||
var greeting = document.createElement('div'); | var greeting = document.createElement('div'); | ||
greeting.id = 'nanofab-chat-greeting'; | greeting.id = 'nanofab-chat-greeting'; | ||
greeting.innerHTML = "Hi! I'm your NanoFab chatbot | greeting.innerHTML = "Hi! I'm your NanoFab chatbot. Ask me any question!" + | ||
'<button id="nanofab-chat-greeting-close" aria-label="Dismiss">×</button>'; | '<button id="nanofab-chat-greeting-close" aria-label="Dismiss">×</button>'; | ||
| Line 36: | Line 35: | ||
function openChat() { | function openChat() { | ||
frameWrap. | frameWrap.classList.add('open'); | ||
btn.textContent = '✕'; | btn.textContent = '✕'; | ||
btn.classList.add('is-open'); | btn.classList.add('is-open'); | ||
greeting. | greeting.classList.remove('show'); | ||
} | } | ||
function closeChat() { | function closeChat() { | ||
frameWrap. | frameWrap.classList.remove('open'); | ||
btn.textContent = '💬'; | btn.textContent = '💬'; | ||
btn.classList.remove('is-open'); | btn.classList.remove('is-open'); | ||
| Line 48: | Line 47: | ||
btn.addEventListener('click', function () { | btn.addEventListener('click', function () { | ||
var isOpen = frameWrap. | btn.classList.remove('pulse'); | ||
btn.classList.add('toggle-pop'); | |||
var isOpen = frameWrap.classList.contains('open'); | |||
if (isOpen) { closeChat(); } else { openChat(); } | if (isOpen) { closeChat(); } else { openChat(); } | ||
}); | |||
btn.addEventListener('animationend', function (e) { | |||
if (e.animationName === 'nanofab-pulse') btn.classList.remove('pulse'); | |||
if (e.animationName === 'nanofab-toggle-pop') btn.classList.remove('toggle-pop'); | |||
}); | }); | ||
| Line 57: | Line 63: | ||
greeting.querySelector('#nanofab-chat-greeting-close').addEventListener('click', function (e) { | greeting.querySelector('#nanofab-chat-greeting-close').addEventListener('click', function (e) { | ||
e.stopPropagation(); | e.stopPropagation(); | ||
greeting. | greeting.classList.remove('show'); | ||
}); | }); | ||
// | // Fade in the greeting bubble ~1.5s after the page loads. | ||
setTimeout(function () { | setTimeout(function () { | ||
greeting. | greeting.classList.add('show'); | ||
}, 1500); | }, 1500); | ||
// Pulse the button a few times shortly after load to draw attention. | |||
setTimeout(function () { | |||
btn.classList.add('pulse'); | |||
}, 800); | |||
})(); | })(); | ||
Latest revision as of 16:49, 18 August 2026
/* Any JavaScript here will be loaded for all users on every page load. */
/*Update by Chandan Ramakrishnaiah Aug 18 2026*/
/* NanoFab Chat Assistant — embed iframe widget on every page */
(function () {
if (window.self !== window.top) return;
var action = mw.config.get('wgAction');
if (action && action !== 'view') return;
var CHAT_URL = 'https://nanofab-assistant.tailf13c08.ts.net';
var btn = document.createElement('button');
btn.id = 'nanofab-chat-btn';
btn.setAttribute('aria-label', 'Open NanoFab Assistant');
btn.textContent = '💬';
var frameWrap = document.createElement('div');
frameWrap.id = 'nanofab-chat-wrap';
var iframe = document.createElement('iframe');
iframe.src = CHAT_URL;
iframe.title = 'NanoFab Assistant';
iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms');
iframe.setAttribute('loading', 'lazy');
frameWrap.appendChild(iframe);
var greeting = document.createElement('div');
greeting.id = 'nanofab-chat-greeting';
greeting.innerHTML = "Hi! I'm your NanoFab chatbot. Ask me any question!" +
'<button id="nanofab-chat-greeting-close" aria-label="Dismiss">×</button>';
document.body.appendChild(frameWrap);
document.body.appendChild(btn);
document.body.appendChild(greeting);
function openChat() {
frameWrap.classList.add('open');
btn.textContent = '✕';
btn.classList.add('is-open');
greeting.classList.remove('show');
}
function closeChat() {
frameWrap.classList.remove('open');
btn.textContent = '💬';
btn.classList.remove('is-open');
}
btn.addEventListener('click', function () {
btn.classList.remove('pulse');
btn.classList.add('toggle-pop');
var isOpen = frameWrap.classList.contains('open');
if (isOpen) { closeChat(); } else { openChat(); }
});
btn.addEventListener('animationend', function (e) {
if (e.animationName === 'nanofab-pulse') btn.classList.remove('pulse');
if (e.animationName === 'nanofab-toggle-pop') btn.classList.remove('toggle-pop');
});
greeting.addEventListener('click', function () {
openChat();
});
greeting.querySelector('#nanofab-chat-greeting-close').addEventListener('click', function (e) {
e.stopPropagation();
greeting.classList.remove('show');
});
// Fade in the greeting bubble ~1.5s after the page loads.
setTimeout(function () {
greeting.classList.add('show');
}, 1500);
// Pulse the button a few times shortly after load to draw attention.
setTimeout(function () {
btn.classList.add('pulse');
}, 800);
})();