User:Udays108/common.js: Difference between revisions

Revision as of 19:49, 8 May 2026

/* ============================================================
   MIT BioMicro Center — MediaWiki Custom Scripts
   Skin: Vector-2022
   Scope: User:USERNAME/common.js  (personal preview)
   ============================================================ */

mw.loader.using( [ 'mediawiki.util' ] ).then( function () {
  'use strict';

  var WIKI = 'https://bmcwiki.mit.edu';

  /* Nav definition — mirrors the mockup structure exactly.
     Update href values if your wiki uses different page titles. */
  var NAV = [
    {
      label: 'About',
      href:  WIKI + '/index.php/BioMicroCenter:About'
    },
    {
      label: 'News',
      href:  WIKI + '/index.php/BioMicroCenter:News',
      children: [
        { label: 'Latest News',       href: WIKI + '/index.php/BioMicroCenter:News' },
        { label: 'Seminars',          href: WIKI + '/index.php/BioMicroCenter:Seminars' },
        { label: 'Classes & Training',href: 'https://igb.mit.edu/mini-courses', external: true }
      ]
    },
    {
      label: 'Services',
      href:  WIKI + '/index.php/BioMicroCenter:Assisted_Services',
      children: [
        { label: 'Walkup',        href: WIKI + '/index.php/BioMicroCenter:Walk-up_Services' },
        { label: 'Assisted',      href: WIKI + '/index.php/BioMicroCenter:Assisted_Services' },
        { label: 'Consumables',   href: WIKI + '/index.php/BioMicroCenter:Consumables' },
        { label: 'Training',      href: 'https://igb.mit.edu/mini-courses', external: true },
        { label: 'Informatics',   href: 'https://igb.mit.edu/', external: true }
      ]
    },
    {
      label: 'Submission',
      href:  WIKI + '/index.php/BioMicroCenter:Submission',
      children: [
        { label: 'MIT Users',     group: true },
        { label: 'Submit a Sample',   href: WIKI + '/index.php/BioMicroCenter:Submission' },
        { label: 'MIT Pricing',       href: WIKI + '/index.php/MIT:Pricing', external: true },
        { divider: true },
        { label: 'Non-MIT Users', group: true },
        { label: 'External Submission', href: WIKI + '/index.php/BioMicroCenter:Submission' },
        { label: 'External Pricing',    href: WIKI + '/index.php/BioMicroCenter:Grant_Support_%26_Pricing', highlight: true }
      ]
    },
    {
      label: 'Staff',
      href:  WIKI + '/index.php/BioMicroCenter:Staff'
    },
    {
      label: 'Resources',
      href:  WIKI + '/index.php/BioMicroCenter:FAQ',
      children: [
        { label: 'FAQs',                   href: WIKI + '/index.php/BioMicroCenter:FAQ' },
        { label: 'Forms',                  href: WIKI + '/index.php/BioMicroCenter:Forms' },
        { label: 'Grant Support & Pricing',href: WIKI + '/index.php/BioMicroCenter:Grant_Support_%26_Pricing' },
        { label: 'Acknowledgements',       href: WIKI + '/index.php/BioMicroCenter:Acknowledgement', external: true }
      ]
    }
  ];


  /* ── Helpers ─────────────────────────────────────────────── */

  function make( tag, cls, html ) {
    var n = document.createElement( tag );
    if ( cls ) n.className = cls;
    if ( html ) n.innerHTML = html;
    return n;
  }

  /* Detect if a nav item matches the current page */
  function isActive( href ) {
    return window.location.href.indexOf( href ) !== -1;
  }


  /* ── 1. Build and Inject Topbar ──────────────────────────── */
  function injectTopbar() {
    var bar = make( 'div', 'bmc-topbar' );
    bar.innerHTML =
      '<div class="bmc-inner">' +
        '<a href="mailto:biomicro@mit.edu">biomicro@mit.edu</a>' +
        '<span class="bmc-sep">|</span>617-715-4533' +
        '<span class="bmc-sep">|</span>Building 68-322' +
      '</div>';
    document.body.insertBefore( bar, document.body.firstChild );
  }


  /* ── 2. Build Navigation HTML ────────────────────────────── */
  function buildNav() {
    var ul = make( 'ul' );

    NAV.forEach( function ( item ) {
      var li = make( 'li' );
      var pageActive = isActive( item.href );

      if ( item.children ) {
        li.className = 'bmc-dropdown' + ( pageActive ? ' bmc-active' : '' );
        li.innerHTML = '<a href="' + item.href + '">' + item.label + '</a>';

        var menu = make( 'div', 'bmc-dropdown-menu' );
        item.children.forEach( function ( c ) {
          if ( c.divider ) {
            menu.appendChild( make( 'div', 'bmc-divider' ) );
          } else if ( c.group ) {
            var g = make( 'div', 'bmc-group-label' );
            g.textContent = c.label;
            menu.appendChild( g );
          } else {
            var a = make( 'a' );
            a.href = c.href;
            a.textContent = c.label;
            if ( c.external ) a.target = '_blank';
            if ( c.highlight ) { a.style.fontWeight = '600'; a.style.color = '#a31f34'; }
            menu.appendChild( a );
          }
        } );
        li.appendChild( menu );
      } else {
        li.className = pageActive ? 'bmc-active' : '';
        li.innerHTML = '<a href="' + item.href + '">' + item.label + '</a>';
      }

      ul.appendChild( li );
    } );

    return ul;
  }


  /* ── 3. Build and Inject Header ──────────────────────────── */
  function injectHeader() {
    var header = make( 'div', 'bmc-header' );
    var inner  = make( 'div', 'bmc-header-inner' );

    /* Logo */
    var logo = make( 'a', 'bmc-logo' );
    logo.href = WIKI;
    logo.innerHTML =
      '<div class="bmc-logo-mark">BMC</div>' +
      '<div class="bmc-logo-text">' +
        '<div class="bmc-logo-name">MIT BioMicro Center</div>' +
        '<div class="bmc-logo-sub">Integrated Genomics Core Facility</div>' +
      '</div>';

    /* Nav */
    var nav = make( 'nav', 'bmc-nav' );
    nav.appendChild( buildNav() );

    /* Right side: move Vector's search + user links here */
    var right = make( 'div', 'bmc-header-right' );

    var vectorSearch = document.querySelector( '.vector-search-box, #p-search' );
    if ( vectorSearch ) {
      vectorSearch.style.cssText = 'margin:0;padding:0;';
      right.appendChild( vectorSearch );
    }

    var vectorUser = document.querySelector( '.vector-user-links, #p-personal' );
    if ( vectorUser ) {
      vectorUser.style.cssText = 'margin:0;padding:0;';
      right.appendChild( vectorUser );
    }

    inner.appendChild( logo );
    inner.appendChild( nav );
    inner.appendChild( right );
    header.appendChild( inner );

    /* Insert after topbar */
    var topbar = document.querySelector( '.bmc-topbar' );
    if ( topbar && topbar.nextSibling ) {
      document.body.insertBefore( header, topbar.nextSibling );
    } else {
      document.body.insertBefore( header, document.body.firstChild );
    }
  }


  /* ── 4. Build and Inject Hero Banner ─────────────────────── */
  function injectHero() {
    /* Don't show hero on Special pages or edit forms */
    var ns = mw.config.get( 'wgNamespaceNumber' );
    if ( ns < 0 ) return; /* Special: pages */
    if ( document.querySelector( '#editform, .mw-editform' ) ) return;

    /* Get the page title from the hidden h1 */
    var h1 = document.querySelector( 'h1.firstHeading, .mw-first-heading' );
    var title = h1 ? h1.textContent.trim() : mw.config.get( 'wgTitle' );

    /* Build breadcrumb: Home > Title */
    var hero = make( 'div', 'bmc-hero' );
    hero.innerHTML =
      '<div class="bmc-inner">' +
        '<div class="bmc-breadcrumb">' +
          '<a href="' + WIKI + '">Home</a>' +
          '<span class="bmc-sep">›</span>' +
          mw.html.escape( title ) +
        '</div>' +
        '<h1>' + mw.html.escape( title ) + '</h1>' +
      '</div>';

    /* Insert before the main page container */
    var container = document.querySelector( '.mw-page-container' );
    if ( container ) {
      container.parentNode.insertBefore( hero, container );
    }
  }


  /* ── 5. Wrap Content in Our Layout Grid ──────────────────── */
  function wrapLayout() {
    /* Vector-2022 puts TOC and content inside .mw-content-container.
       We pull them into our bmc-page-layout grid. */
    var contentContainer = document.querySelector( '.mw-content-container' );
    if ( !contentContainer ) return;

    var layout = make( 'div', 'bmc-page-layout' );

    /* Left: sidebar — use Vector's TOC panel if it exists */
    var sidebar = make( 'div', 'bmc-sidebar' );
    var toc = document.querySelector( '#mw-panel-toc, .vector-toc-landmark' );
    if ( toc ) {
      sidebar.appendChild( toc );
    }
    layout.appendChild( sidebar );

    /* Right: content column — move Vector's #mw-content into it */
    var contentCol = make( 'div', 'bmc-content-col' );
    var mwContent = document.querySelector( '#mw-content' );
    if ( mwContent ) {
      contentCol.appendChild( mwContent );
    }
    layout.appendChild( contentCol );

    /* Replace the content container's children with our layout */
    contentContainer.innerHTML = '';
    contentContainer.appendChild( layout );
  }


  /* ── 6. Build and Inject Footer ──────────────────────────── */
  function injectFooter() {
    var footer = make( 'div', 'bmc-footer' );
    footer.innerHTML =
      '<div class="bmc-footer-inner">' +
        '<div>' +
          '<h4>MIT BioMicro Center</h4>' +
          '<ul>' +
            '<li>Building 68-322</li>' +
            '<li>Cambridge, MA 02139</li>' +
            '<li><a href="mailto:biomicro@mit.edu">biomicro@mit.edu</a></li>' +
            '<li>617-715-4533</li>' +
          '</ul>' +
        '</div>' +
        '<div>' +
          '<h4>Services</h4>' +
          '<ul>' +
            '<li><a href="' + WIKI + '/index.php/BioMicroCenter:Walk-up_Services">Walk-up</a></li>' +
            '<li><a href="' + WIKI + '/index.php/BioMicroCenter:Assisted_Services">Assisted</a></li>' +
            '<li><a href="' + WIKI + '/index.php/BioMicroCenter:Consumables">Consumables</a></li>' +
            '<li><a href="https://igb.mit.edu/" target="_blank">Informatics</a></li>' +
          '</ul>' +
        '</div>' +
        '<div>' +
          '<h4>Resources</h4>' +
          '<ul>' +
            '<li><a href="' + WIKI + '/index.php/BioMicroCenter:FAQ">FAQs</a></li>' +
            '<li><a href="' + WIKI + '/index.php/BioMicroCenter:Forms">Forms</a></li>' +
            '<li><a href="' + WIKI + '/index.php/BioMicroCenter:Grant_Support_%26_Pricing">Grant Support &amp; Pricing</a></li>' +
            '<li><a href="' + WIKI + '/index.php/BioMicroCenter:Acknowledgement">Acknowledgements</a></li>' +
          '</ul>' +
        '</div>' +
      '</div>' +
      '<div class="bmc-footer-bottom">' +
        '<span>&copy; ' + new Date().getFullYear() + ' MIT BioMicro Center</span>' +
        '<span><a href="https://accessibility.mit.edu" target="_blank">Accessibility</a></span>' +
      '</div>';

    document.body.appendChild( footer );
  }


  /* ── 7. Scroll Offset Fix (anchor links) ─────────────────── */
  function fixScrollOffset() {
    var OFFSET = 88;
    document.addEventListener( 'click', function ( e ) {
      var anchor = e.target.closest( 'a[href^="#"]' );
      if ( !anchor ) return;
      var id = anchor.getAttribute( 'href' ).slice( 1 );
      if ( !id ) return;
      var target = document.getElementById( id ) ||
                   document.querySelector( '[name="' + CSS.escape( id ) + '"]' );
      if ( !target ) return;
      e.preventDefault();
      window.scrollTo( {
        top: target.getBoundingClientRect().top + window.pageYOffset - OFFSET,
        behavior: 'smooth'
      } );
      if ( history.pushState ) history.pushState( null, null, '#' + id );
    } );
  }


  /* ── 8. Tab Panel System ─────────────────────────────────── */
  function initTabs() {
    var btns   = document.querySelectorAll( '.tab-btn' );
    var panels = document.querySelectorAll( '.tab-panel' );
    if ( !btns.length ) return;

    if ( !document.querySelector( '.tab-btn.active' ) ) btns[ 0 ].classList.add( 'active' );
    if ( !document.querySelector( '.tab-panel.active' ) && panels[ 0 ] ) panels[ 0 ].classList.add( 'active' );

    btns.forEach( function ( btn ) {
      btn.addEventListener( 'click', function () {
        btns.forEach( function ( t ) { t.classList.remove( 'active' ); } );
        panels.forEach( function ( p ) { p.classList.remove( 'active' ); } );
        btn.classList.add( 'active' );
        var panel = document.getElementById( 'tab-' + btn.dataset.tab );
        if ( panel ) panel.classList.add( 'active' );
        var wrap = document.querySelector( '.tab-bar-wrap' );
        if ( wrap ) window.scrollTo( { top: wrap.getBoundingClientRect().top + window.pageYOffset - 68, behavior: 'smooth' } );
      } );
    } );
  }


  /* ── Run Everything ──────────────────────────────────────── */
  injectTopbar();
  injectHeader();
  injectHero();
  wrapLayout();
  injectFooter();
  fixScrollOffset();
  initTabs();

} );