Asoberan: Blanked the page

2026-06-01T16:00:44Z

Blanked the page

Asoberan: Created page with "/** * BioMicro Center Wiki — Full DOM Replacement * Paste into: User:USERNAME/common.js * * Strategy: * 1. Extract wiki article content from MediaWiki's DOM * 2. Inject the complete shell structure * 3. Place article content inside the shell * MediaWiki still runs underneath for editing, search, login, etc. / ( function () { 'use strict'; / ── Extract nav from MediaWiki's sidebar DOM ─────────────── */ function extra..."

2026-06-01T15:54:24Z

Created page with "* * BioMicro Center Wiki — Full DOM Replacement * Paste into: User:USERNAME/common.js * * Strategy: * 1. Extract wiki article content from MediaWiki's DOM * 2. Inject the complete shell structure * 3. Place article content inside the shell * MediaWiki still runs underneath for editing, search, login, etc.: ( function () { 'use strict'; ── Extract nav from MediaWiki's sidebar DOM ───────────────: function extra..."

New page

/**
* BioMicro Center Wiki — Full DOM Replacement
* Paste into: User:USERNAME/common.js
*
* Strategy:
* 1. Extract wiki article content from MediaWiki's DOM
* 2. Inject the complete shell structure
* 3. Place article content inside the shell
* MediaWiki still runs underneath for editing, search, login, etc.
*/

( function () {
'use strict';

/* ── Extract nav from MediaWiki's sidebar DOM ─────────────── */
function extractNavFromDom() {
var SKIP_IDS = {
'p-tb': 1, 'p-personal': 1, 'p-search': 1,
'p-logo': 1, 'p-cactions': 1, 'p-views': 1,
'p-lang': 1, 'p-namespaces': 1
};

var portlets = Array.prototype.slice.call(
document.querySelectorAll( '[id^="p-"]' )
);

var nav = [];
var currentUrl = window.location.href.split( '?' )[0];

portlets.forEach( function ( portlet ) {
if ( SKIP_IDS[ portlet.id ] ) return;

var links = Array.prototype.slice.call(
portlet.querySelectorAll( 'li a' )
).map( function ( a ) {
return { label: a.textContent.trim(), href: a.href };
} ).filter( function ( item ) { return item.label && item.href; } );

if ( !links.length ) return;

var headingEl = portlet.querySelector( '[id$="-label"], h3, h2' );
var sectionLabel = headingEl ? headingEl.textContent.trim() : '';

var isActive = links.some( function ( link ) {
return link.href.split( '?' )[0] === currentUrl;
} );

if ( links.length === 1 ) {
nav.push( {
label: links[0].label,
href: links[0].href,
isActive: links[0].href.split( '?' )[0] === currentUrl
} );
} else {
nav.push( {
label: sectionLabel || links[0].label,
href: links[0].href,
items: links,
isActive: isActive
} );
}
} );

return nav;
}

/* ── Build topbar HTML ─────────────────────────────────────── */
function buildTopbar() {
var d = document.createElement( 'div' );
d.className = 'bmc-topbar';
d.innerHTML =
'<div class="inner">' +
'<a href="mailto:biomicro@mit.edu">biomicro@mit.edu</a>' +
'<span>|</span>' +
'617-715-4533' +
'<span>|</span>' +
'Building 68-322' +
'</div>';
return d;
}

/* ── Build nav dropdown item ───────────────────────────────── */
function buildDropdownMenu( items ) {
var menu = document.createElement( 'div' );
menu.className = 'bmc-dropdown-menu';
items.forEach( function ( item ) {
if ( item.divider ) {
var div = document.createElement( 'div' );
div.className = 'bmc-divider';
menu.appendChild( div );
} else if ( item.groupLabel ) {
var gl = document.createElement( 'div' );
gl.className = 'bmc-group-label';
gl.textContent = item.groupLabel;
menu.appendChild( gl );
} else {
var a = document.createElement( 'a' );
a.href = item.page ? mw.util.getUrl( item.page ) : item.href;
a.textContent = item.label;
if ( item.ext ) a.target = '_blank';
menu.appendChild( a );
}
} );
return menu;
}

/* ── Build full header ─────────────────────────────────────── */
function buildHeader( currentPage, nav ) {
/* Logo */
var logo = document.createElement( 'a' );
logo.href = mw.util.getUrl( 'BioMicroCenter' );
logo.className = 'bmc-logo';
logo.innerHTML =
'<img class="bmc-logo-img" src="https://bmcwiki.mit.edu/images/c/c9/Logo.png" alt="MIT BioMicro Center" />';

/* Nav */
var ul = document.createElement( 'ul' );
nav.forEach( function ( item ) {
var li = document.createElement( 'li' );
if ( item.isActive ) li.classList.add( 'bmc-active' );
if ( item.items ) li.classList.add( 'bmc-dropdown' );

var a = document.createElement( 'a' );
a.href = item.page ? mw.util.getUrl( item.page ) : ( item.href || '#' );
a.textContent = item.label;
li.appendChild( a );

if ( item.items ) {
li.appendChild( buildDropdownMenu( item.items ) );
}
ul.appendChild( li );
} );

var navEl = document.createElement( 'nav' );
navEl.className = 'bmc-nav';
navEl.appendChild( ul );

/* Search */
var searchForm = document.createElement( 'form' );
searchForm.className = 'bmc-search-form';
searchForm.method = 'get';
searchForm.action = '/index.php';
searchForm.innerHTML =
'<input type="hidden" name="title" value="Special:Search">' +
'<input type="search" name="search" placeholder="Search wiki…" aria-label="Search">' +
'<button type="submit" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg></button>';

var right = document.createElement( 'div' );
right.className = 'bmc-header-right';
right.appendChild( navEl );
right.appendChild( searchForm );

/* Inner wrapper */
var inner = document.createElement( 'div' );
inner.className = 'bmc-header-inner';
inner.appendChild( logo );
inner.appendChild( right );

var header = document.createElement( 'header' );
header.className = 'bmc-header';
header.appendChild( inner );
return header;
}

/* ── Build page hero ───────────────────────────────────────── */
function buildHero( titleText ) {
var crumb = document.createElement( 'div' );
crumb.className = 'bmc-breadcrumb';
crumb.innerHTML =
'<a href="' + mw.util.getUrl( 'BioMicroCenter' ) + '">Home</a>' +
'<span class="sep">›</span>' +
document.createTextNode( titleText ).textContent; // plain text, no XSS

var h1 = document.createElement( 'h1' );
h1.textContent = titleText;

var inner = document.createElement( 'div' );
inner.className = 'inner';
inner.appendChild( crumb );
inner.appendChild( h1 );

var hero = document.createElement( 'div' );
hero.className = 'bmc-page-hero';
hero.appendChild( inner );
return hero;
}

/* ── Build sidebar TOC from MediaWiki #toc or heading scan ─── */
function buildSidebarToc( mwToc, contentEl ) {
var toc = document.createElement( 'div' );
toc.className = 'bmc-toc';

var h3 = document.createElement( 'h3' );
h3.textContent = 'On this page';
toc.appendChild( h3 );

var list;

if ( mwToc ) {
/* Clone only the list from the MediaWiki TOC */
var mwList = mwToc.querySelector( 'ul' );
if ( mwList ) {
list = mwList.cloneNode( true );
/* Mark sub-items */
list.querySelectorAll( 'li li' ).forEach( function ( li ) {
li.classList.add( 'bmc-sub' );
} );
}
} else if ( contentEl ) {
/* Fall back to scanning h2/h3 headings directly */
var headings = Array.prototype.slice.call(
contentEl.querySelectorAll( 'h2, h3' )
);
if ( headings.length > 0 ) {
list = document.createElement( 'ul' );
headings.forEach( function ( heading ) {
var anchor = heading.querySelector( '.mw-headline' );
if ( !anchor || !anchor.id ) return;
var li = document.createElement( 'li' );
if ( heading.tagName === 'H3' ) li.classList.add( 'bmc-sub' );
var a = document.createElement( 'a' );
a.href = '#' + anchor.id;
a.textContent = anchor.textContent.trim();
li.appendChild( a );
list.appendChild( li );
} );
}
}

if ( !list || list.childNodes.length === 0 ) return null;

toc.appendChild( list );

var aside = document.createElement( 'aside' );
aside.className = 'bmc-sidebar';
aside.appendChild( toc );
return aside;
}

/* ── Build footer ──────────────────────────────────────────── */
function buildFooter() {
var u = mw.util.getUrl;
var inner = document.createElement( 'div' );
inner.className = 'bmc-footer-inner';
inner.innerHTML =
'<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="' + u( 'BioMicroCenter:Sequencing' ) + '">Bulk Sequencing</a></li>' +
'<li><a href="' + u( 'BioMicroCenter:SingleCell' ) + '">Single Cell</a></li>' +
'<li><a href="' + u( 'BioMicroCenter:SpTx' ) + '">Spatial Genomics</a></li>' +
'<li><a href="https://igb.mit.edu/" target="_blank">Informatics</a></li>' +
'</ul>' +
'</div>' +
'<div>' +
'<h4>Resources</h4>' +
'<ul>' +
'<li><a href="' + u( 'BioMicroCenter:FAQ' ) + '">FAQs</a></li>' +
'<li><a href="' + u( 'BioMicroCenter:Consulting' ) + '">Consulting</a></li>' +
'<li><a href="' + u( 'BioMicroCenter:Pricing' ) + '">Grant Support & Pricing</a></li>' +
'<li><a href="' + u( 'BioMicroCenter:Acknowledgement' ) + '">Acknowledgements</a></li>' +
'</ul>' +
'</div>';

var bottom = document.createElement( 'div' );
bottom.className = 'bmc-footer-bottom';
bottom.innerHTML =
'<span>© ' + new Date().getFullYear() + ' MIT BioMicro Center</span>' +
'<span>' +
'<a href="' + u( 'Special:UserLogin' ) + '">Log in</a>' +
'  |  ' +
'<a href="https://accessibility.mit.edu" target="_blank">Accessibility</a>' +
'</span>';

var footer = document.createElement( 'footer' );
footer.className = 'bmc-footer';
footer.appendChild( inner );
footer.appendChild( bottom );
return footer;
}

/* ── Smooth scroll for anchor links ───────────────────────── */
function initSmoothScroll( container ) {
container.addEventListener( 'click', function ( e ) {
var a = e.target.closest( 'a[href^="#"]' );
if ( !a ) return;
var id = decodeURIComponent( a.getAttribute( 'href' ).slice( 1 ) );
var target = document.getElementById( id );
if ( target ) {
e.preventDefault();
target.scrollIntoView( { behavior: 'smooth', block: 'start' } );
history.pushState( null, '', '#' + id );
}
} );
}

/* ── Fix row separators on tables with rowspan cells ──────── */
function fixRowspanSeparators( container ) {
container.querySelectorAll( '.wikitable' ).forEach( function ( table ) {
var tbody = table.querySelector( 'tbody' ) || table;
var rows = Array.from( tbody.querySelectorAll( 'tr' ) );
if ( !rows.length ) return;

rows.forEach( function ( row, rowIdx ) {
row.querySelectorAll( 'td[rowspan], th[rowspan]' ).forEach( function ( cell ) {
var span = parseInt( cell.getAttribute( 'rowspan' ), 10 );
if ( !span || span <= 1 ) return;

cell.style.position = 'relative';

for ( var i = 1; i < span; i++ ) {
var targetRow = rows[ rowIdx + i ];
if ( !targetRow ) break;

var cellRect = cell.getBoundingClientRect();
var rowRect = targetRow.getBoundingClientRect();
var offsetTop = rowRect.top - cellRect.top;

var sep = document.createElement( 'div' );
sep.style.cssText =
'position:absolute;left:0;right:0;' +
'top:' + offsetTop + 'px;' +
'height:1px;background:#e0e0e0;' +
'pointer-events:none;z-index:1;';
cell.appendChild( sep );
}
} );
} );
} );
}

/* ── Edit bar for logged-in users ─────────────────────────── */
function buildEditBar( currentPage ) {
if ( !mw.config.get( 'wgUserId' ) ) return null;
var bar = document.createElement( 'div' );
bar.className = 'bmc-edit-bar';
var editHref = mw.util.getUrl( currentPage, { action: 'edit' } );
var histHref = mw.util.getUrl( currentPage, { action: 'history' } );
var talkHref = mw.util.getUrl( 'Talk:' + currentPage );
bar.innerHTML =
'<a href="' + editHref + '">Edit</a>' +
'<a href="' + histHref + '">History</a>' +
'<a href="' + talkHref + '">Talk</a>';
return bar;
}

/* ── Main: build and inject the shell ─────────────────────── */
function buildShell( nav ) {
var currentPage = mw.config.get( 'wgPageName' ) || '';

/* 1. Extract wiki content BEFORE any DOM manipulation */
var mwContentText = document.getElementById( 'mw-content-text' );
if ( !mwContentText ) return; /* not a content page, bail */

var contentClone = mwContentText.cloneNode( true );

/* 2. Extract page title */
var titleEl = document.getElementById( 'firstHeading' ) ||
document.querySelector( '.mw-first-heading' );
var titleText = titleEl
? titleEl.textContent.trim()
: ( mw.config.get( 'wgTitle' ) || 'BioMicro Center' );

/* 3. Extract MediaWiki TOC from the cloned content */
var mwToc = contentClone.querySelector( '#toc, .toc' );
if ( mwToc ) mwToc.parentNode.removeChild( mwToc ); /* remove from content body */

/* 3b. Hide the BMC logo/header sticker by exact image filename.
The sticker is BMC_Header_2020_3.png (from the {{BioMicroCenter}} template)
and bmc_logo_square.png. Target the nearest meaningful container so the
surrounding content (nav links, table structure) is preserved. */
contentClone.querySelectorAll( 'img' ).forEach( function ( img ) {
var src = img.getAttribute( 'src' ) || '';
if ( /BMC_Header|bmc_logo_square|Bmc_logo|\/Logo\.png/i.test( src ) ) {
var container = img.closest( '.thumb' ) || img.closest( 'figure' ) || img.closest( 'td' );
if ( container ) {
container.style.display = 'none';
} else {
img.style.display = 'none';
}
}
} );

/* 4. Build shell elements */
var topbar = buildTopbar();
var header = buildHeader( currentPage, nav );
var hero = buildHero( titleText );

/* Page layout grid */
var layout = document.createElement( 'div' );
layout.className = 'bmc-page-layout';

/* Sidebar — skip on the home page */
var isHome = ( currentPage === 'BioMicroCenter' ||
currentPage === 'Main_Page' );
var sidebar = isHome ? null : buildSidebarToc( mwToc, contentClone );
if ( sidebar ) {
layout.appendChild( sidebar );
} else {
/* No TOC — collapse to single-column via inline style */
layout.style.gridTemplateColumns = '1fr';
}

/* Main content area */
var main = document.createElement( 'main' );
main.className = 'bmc-content';
var editBar = buildEditBar( currentPage );
if ( editBar ) { main.appendChild( editBar ); }
main.appendChild( contentClone );
layout.appendChild( main );

var footer = buildFooter();

/* 5. Build wrapper */
var wrapper = document.createElement( 'div' );
wrapper.id = 'bmc-wrapper';
wrapper.appendChild( topbar );
wrapper.appendChild( header );
wrapper.appendChild( hero );
wrapper.appendChild( layout );
wrapper.appendChild( footer );

/* 6. Inject into body (prepend so it appears first) */
document.body.insertBefore( wrapper, document.body.firstChild );

/* 7. Add class immediately so the CSS rule kicks in and hides
all original MW elements (works for any skin version) */
document.body.classList.add( 'bmc-active' );

/* 8. Smooth scroll */
initSmoothScroll( main );
initSmoothScroll( sidebar || main );

/* 9. Auto-style plain tables in content */
main.querySelectorAll(
'.mw-parser-output table:not(.wikitable):not(.infobox):not(.navbox)'
).forEach( function ( t ) {
t.classList.add( 'wikitable' );
} );

/* 10. Fix row separators on rowspan tables */
requestAnimationFrame( function () {
fixRowspanSeparators( main );
} );

}

/* ── Entry point ───────────────────────────────────────────── */
mw.hook( 'wikipage.content' ).add( function () {
/* Skip special pages (edit forms, history, etc.) to not break them */
var ns = mw.config.get( 'wgNamespaceNumber' );
var action = mw.config.get( 'wgAction' );
if ( action !== 'view' ) return;
if ( ns < 0 ) return; /* Special: pages */

var nav = extractNavFromDom();
buildShell( nav );
} );

} )();

User:Asoberan/common.js - Revision history

Asoberan: Blanked the page