MediaWiki:Common.js: Difference between revisions

From USC Nanofab Wiki
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';
  frameWrap.style.display = 'none';


   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 — ask me any question!" +
   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.style.display = 'block';
     frameWrap.classList.add('open');
     btn.textContent = '✕';
     btn.textContent = '✕';
     btn.classList.add('is-open');
     btn.classList.add('is-open');
     greeting.style.display = 'none';
     greeting.classList.remove('show');
   }
   }
   function closeChat() {
   function closeChat() {
     frameWrap.style.display = 'none';
     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.style.display === 'block';
    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.style.display = 'none';
     greeting.classList.remove('show');
   });
   });


   // Show the greeting bubble ~1.5s after the page loads.
   // Fade in the greeting bubble ~1.5s after the page loads.
   setTimeout(function () {
   setTimeout(function () {
     greeting.style.display = 'block';
     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);
})();