User:Udays108/common.js
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* ============================================================
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 & Pricing</a></li>' +
'<li><a href="' + WIKI + '/index.php/BioMicroCenter:Acknowledgement">Acknowledgements</a></li>' +
'</ul>' +
'</div>' +
'</div>' +
'<div class="bmc-footer-bottom">' +
'<span>© ' + 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();
} );