MediaWiki:Common.js: Difference between revisions

From USC Nanofab Wiki
Jump to navigation Jump to search
Created page with "→Any JavaScript here will be loaded for all users on every page load.: →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..."
 
No edit summary
 
(8 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Any JavaScript here will be loaded for all users on every page load. */
/* 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 */
/* NanoFab Chat Assistant — embed iframe widget on every page */
(function () {
(function () {
Line 12: Line 13:
   btn.id = 'nanofab-chat-btn';
   btn.id = 'nanofab-chat-btn';
   btn.setAttribute('aria-label', 'Open NanoFab Assistant');
   btn.setAttribute('aria-label', 'Open NanoFab Assistant');
   btn.textContent = 'Chat';
   btn.textContent = '💬';


   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 25: Line 25:
   frameWrap.appendChild(iframe);
   frameWrap.appendChild(iframe);


  // Greeting speech bubble — lives entirely on the wiki page (not inside the
  // iframe), so this is the only "pop up" text this code can actually control.
   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 \u2014 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">\u00d7</button>';
     '<button id="nanofab-chat-greeting-close" aria-label="Dismiss">×</button>';


   document.body.appendChild(frameWrap);
   document.body.appendChild(frameWrap);
Line 37: Line 35:


   function openChat() {
   function openChat() {
     frameWrap.style.display = 'block';
     frameWrap.classList.add('open');
     btn.textContent = 'Close';
     btn.textContent = '✕';
     greeting.style.display = 'none';
    btn.classList.add('is-open');
     greeting.classList.remove('show');
   }
   }
   function closeChat() {
   function closeChat() {
     frameWrap.style.display = 'none';
     frameWrap.classList.remove('open');
     btn.textContent = 'Chat';
     btn.textContent = '💬';
    btn.classList.remove('is-open');
   }
   }


   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 56: 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);
})();