User:Gibcus/common.js - Revision history

Gibcus at 17:04, 13 July 2026

2026-07-13T17:04:23Z

← Older revision		Revision as of 17:04, 13 July 2026
Line 1:		Line 1:
	/**		/**
	* BioMicro Center Wiki — Full DOM Replacement		* BioMicro Center Wiki Wrapper — Full DOM Replacement
	* Paste into: User:USERNAME/common.js
	*		*
	* Strategy:		* Strategy:
Line 510:		Line 509:
	/* 7d. A row whose cells are ALL just a heading with no <ul> of		/* 7d. A row whose cells are ALL just a heading with no <ul> of
	items is a group-header row ("Assisted Services" / "Walkup		items is a group-header row ("Assisted Services" / "Walkup
	Services", "Informatics Services") — style it as a colored		Services", "Informatics/Bioinformatics Services") — style it
	bar. Real content rows (heading + <ul>) get normal styling.		as a colored bar. Real content rows (heading + <ul>) get
	Because this uses the table's own <tr>/<td>/colspan, the bar		normal styling. Because this uses the table's own
	aligns exactly with the columns below it — no guesswork. */		<tr>/<td>/colspan, the bar aligns exactly with the columns
			below it — no guesswork.

			Color is chosen by matching the cell's own label text rather
			than its position, so "Walkup" / "Assisted" / "Bioinformatics"
			each get their own distinct color regardless of column order.
			Any header text that doesn't match one of these falls back to
			the neutral wide style, so new/renamed categories don't break. */
			function headerColorClass( label ) {
			var t = label.toLowerCase();
			if ( t.indexOf( 'walkup' ) !== -1 \|\| t.indexOf( 'walk-up' ) !== -1 ) {
			return 'bmc-home-header-walkup';
			}
			if ( t.indexOf( 'bioinformatics' ) !== -1 \|\| t.indexOf( 'informatics' ) !== -1 ) {
			return 'bmc-home-header-bioinformatics';
			}
			if ( t.indexOf( 'assisted' ) !== -1 ) {
			return 'bmc-home-header-assisted';
			}
			return 'bmc-home-header-wide';
			}

	Array.prototype.forEach.call( servicesTable.querySelectorAll( 'tr' ), function ( tr ) {		Array.prototype.forEach.call( servicesTable.querySelectorAll( 'tr' ), function ( tr ) {
	var cells = Array.prototype.slice.call( tr.children ).filter( function ( c ) {		var cells = Array.prototype.slice.call( tr.children ).filter( function ( c ) {
Line 522:		Line 542:
	if ( isHeaderRow ) {		if ( isHeaderRow ) {
	tr.classList.add( 'bmc-home-header-row' );		tr.classList.add( 'bmc-home-header-row' );
	cells.forEach( function ( td~~, idx~~ ) {		cells.forEach( function ( td ) {
	td.classList.add( 'bmc-home-header-cell' );		td.classList.add( 'bmc-home-header-cell' );
	td.classList.add(		td.classList.add( headerColorClass( td.textContent \|\| '' ) );
	( ~~cells~~.~~length > 1 && idx > 0 ) ?~~ '~~bmc-home-header-accent~~' ~~: 'bmc-home-header-wide'~~
	);
	} );		} );
	}		}

Gibcus at 15:28, 4 July 2026

2026-07-04T15:28:40Z

@@ Line 548: / Line 548: @@
+       }
      } );
      /* 10. Fix row separators on rowspan tables */

Gibcus at 20:29, 2 July 2026

2026-07-02T20:29:27Z

← Older revision		Revision as of 20:29, 2 July 2026
Line 487:		Line 487:
	}		}

	/* 7c. ~~Drop~~ "~~label~~-~~only" tables —~~ rows ~~that exist purely to show a~~		/* 7c. The remaining table is one single "services" mega-table (5 rows,
	~~section heading (e.g.~~ "Assisted Services" / "Walkup Services")		3 columns) where every cell — including the "Assisted Services" /
	~~with no actual list or descriptive~~ content ~~underneath. These~~		"Walkup Services" / "Informatics Services" headers — wraps its
	~~render~~ as ~~an empty colored bar and just push real content~~		content in its own nested one-cell table, purely for old-school
	~~down~~, ~~so remove~~ them~~. A table qualifies only if every one of~~		formatting. Left as-is, our .wikitable styling was being applied
	~~its cells contains nothing but its own heading text~~. */		to those nested tables too, double-boxing every cell. Unwrap them
	~~function isLabelOnlyTable( table ) {~~		first, then style the table as a whole. */
	var ~~cells~~ = ~~table~~.~~querySelectorAll~~( 'td' );		var servicesTable = parserOutput.querySelector( 'table' );
	if ( ~~!cells.length~~ ) ~~return false;~~		if ( servicesTable ) {
	~~var labelOnly = true;~~		Array.prototype.slice.call( servicesTable.querySelectorAll( 'table' ) ).forEach(
	Array.prototype.~~forEach~~.call( ~~cells,~~ function ( td ) {		function ( inner ) {
	var ~~heading~~ = td.~~querySelector~~( ~~'big b, big strong, b, strong'~~ );		var frag = document.createDocumentFragment();
	~~var headingText = heading ? heading~~.~~textContent~~.~~replace~~( ~~/\s+/g,~~ ' ' )~~.trim~~() ~~: '';~~		Array.prototype.forEach.call( inner.querySelectorAll( 'td' ), function ( td ) {
	~~var cellText =~~ td.~~textContent~~.~~replace~~( ~~/\s+/g, ' '~~ ).~~trim~~();		while ( td.firstChild ) { frag.appendChild( td.firstChild ); }
	~~if ( !heading \|\| cellText !== headingText ) { labelOnly = false;~~ }		} );
	} );		inner.parentNode.replaceChild( frag, inner );
	~~return labelOnly;~~		}
	}		);

	~~Array.prototype~~.~~slice~~.~~call(~~		servicesTable.classList.add( 'wikitable', 'bmc-home-table' );
	~~parserOutput.querySelectorAll~~( '~~table:not(.~~wikitable~~):not(.infobox):not(.navbox)~~' )
	~~).forEach( function (~~ table ~~) {~~
	~~if ( isLabelOnlyTable( table ) ) {~~
	~~table.parentNode.removeChild( table );~~
	}
	} );

	/* 7d. ~~Style the remaining tables~~ (~~the real content tables~~) ~~like the~~		/* 7d. A row whose cells are ALL just a heading with no <ul> of
	~~rest of the site's data tables~~. ~~Cells that act as category~~		items is a group-header row ("Assisted Services" / "Walkup
	~~headers~~ (~~bold text, no~~ <ul> ~~of items~~) get ~~a header treatment;~~		Services", "Informatics Services") — style it as a colored
	~~cells with a~~ <ul> ~~stay as plain list cells~~. */		bar. Real content rows (heading + <ul>) get normal styling.
	~~parserOutput~~.querySelectorAll(		Because this uses the table's own <tr>/<td>/colspan, the bar
	~~'table:not~~(.~~wikitable~~)~~:not~~(.~~infobox~~)~~:not~~(.~~navbox~~)'		aligns exactly with the columns below it — no guesswork. */
	).~~forEach~~( ~~function~~ ( ~~table~~ ) {		Array.prototype.forEach.call( servicesTable.querySelectorAll( 'tr' ), function ( tr ) {
	~~table~~.classList.add( ~~'wikitable',~~ 'bmc-home-~~table~~' );		var cells = Array.prototype.slice.call( tr.children ).filter( function ( c ) {
	~~table.querySelectorAll( 'td[style*="border"]' )~~.forEach( function ( td ) {		return c.tagName === 'TD' \|\| c.tagName === 'TH';
	~~if ( !~~td.~~querySelector~~( 'ul' ) ~~) {~~		} );
	td.classList.add( 'bmc-home-~~table~~-header' );		if ( !cells.length ) return;
			var isHeaderRow = cells.every( function ( td ) { return !td.querySelector( 'ul' ); } );
			if ( isHeaderRow ) {
			tr.classList.add( 'bmc-home-header-row' );
			cells.forEach( function ( td, idx ) {
			td.classList.add( 'bmc-home-header-cell' );
			td.classList.add(
			( cells.length > 1 && idx > 0 ) ? 'bmc-home-header-accent' : 'bmc-home-header-wide'
			);
			} );
	}		}
	} );		} );
	~~} );~~

	~~/* 7e. Re-add the group headers that sat above the service tables~~
	~~("Assisted Services" / "Walkup Services" over the first table,~~
	~~"Informatics Services" over the last). Built directly with~~
	~~fixed labels rather than pulled from the original cells,~~
	~~since that source content wasn't reliably visible. */~~
	~~var homeTables = Array.prototype.slice.call(~~
	~~parserOutput.querySelectorAll( 'table.bmc-home-table' )~~
	);
	~~if ( homeTables.length ) {~~
	~~var firstTable = homeTables[ 0 ];~~
	~~var barTop = document.createElement( 'div' );~~
	~~barTop.className = 'bmc-service-group-bar';~~
	~~barTop.innerHTML =~~
	~~'<span class="bmc-sgb-assisted">Assisted Services</span>' +~~
	~~'<span class="bmc-sgb-walkup">Walkup Services</span>';~~
	~~firstTable.parentNode.insertBefore( barTop, firstTable );~~
	~~firstTable.classList.add( 'bmc-flush-top' );~~

	~~if ( homeTables.length > 1 ) {~~
	~~var lastTable = homeTables[ homeTables.length - 1 ];~~
	~~var barBottom = document.createElement( 'div' );~~
	~~barBottom.className = 'bmc-service-group-bar bmc-service-group-bar-single';~~
	~~barBottom.innerHTML = '<span class="bmc-sgb-informatics">Informatics Services</span>';~~
	~~lastTable.parentNode.insertBefore( barBottom, lastTable );~~
	~~lastTable.classList.add( 'bmc-flush-top' );~~
	}
	}		}

Gibcus at 20:16, 2 July 2026

2026-07-02T20:16:43Z

@@ Line 528: / Line 528: @@
          } );
        } );
+     }

Gibcus at 16:17, 2 July 2026

2026-07-02T16:17:08Z

← Older revision		Revision as of 16:17, 2 July 2026
Line 166:		Line 166:
	right.appendChild( navEl );		right.appendChild( navEl );
	right.appendChild( searchForm );		right.appendChild( searchForm );
			var editBar = buildEditBar( currentPage );
			if ( editBar ) { right.appendChild( editBar ); }
	if ( userEl ) { right.appendChild( userEl ); }		if ( userEl ) { right.appendChild( userEl ); }

Line 416:		Line 418:
	var main = document.createElement( 'main' );		var main = document.createElement( 'main' );
	main.className = 'bmc-content';		main.className = 'bmc-content';
	~~var editBar = buildEditBar( currentPage );~~
	~~if ( editBar ) { main.appendChild( editBar ); }~~
	main.appendChild( contentClone );		main.appendChild( contentClone );
	layout.appendChild( main );		layout.appendChild( main );

Gibcus at 16:07, 2 July 2026

2026-07-02T16:07:56Z

@@ Line 461: / Line 461: @@
        if ( welcomeEl ) { welcomeEl.parentNode.removeChild( welcomeEl ); }
-       /* 7b. Keep the overview/service tables as real tables — style them
+       /* 7b. The first table on the page is the quick-links list (News,
-              like the rest of the site's data tables instead of converting
+             Pricing, Sample Submission, etc.) — pull its links up into
-             them into pill links / a sliding category browser. Cells that
+             the hero bar as pills so they don't eat vertical space, and
-             act as category headers (bold text, no <ul> of items) get a
+             remove the now-empty table. */
-             header treatment; cells with a <ul> stay as plain list cells. */
+      var navLinksTable = parserOutput.querySelector( 'table' );
        parserOutput.querySelectorAll(
          'table:not(.wikitable):not(.infobox):not(.navbox)'

Gibcus at 15:50, 2 July 2026

2026-07-02T15:50:40Z

Show changes

Gibcus at 15:57, 30 June 2026

2026-06-30T15:57:00Z

← Older revision		Revision as of 15:57, 30 June 2026
Line 271:		Line 271:
	}		}

	/* ── ~~Fix~~ row ~~separators on tables with~~ rowspan ~~cells ────────~~ */		/* ── Add a separator line at the END of each rowspan group, on every
			cell whose own span also ends at that row. This marks the boundary
			between e.g. "5M" and "25M" without ever drawing a line through
			the inside of a single rowspan cell. */
	function fixRowspanSeparators( container ) {		function fixRowspanSeparators( container ) {
	container.querySelectorAll( '.wikitable' ).forEach( function ( table ) {		container.querySelectorAll( '.wikitable' ).forEach( function ( table ) {
Line 278:		Line 281:
	if ( !rows.length ) return;		if ( !rows.length ) return;

			/* Build a grid: for each row index, find which row index each
			rowspan group ENDS at, per starting cell. Then for every row
			that is the last row of at least one rowspan group, draw a
			border-bottom on every td/th that is present in that row
			(cells whose own rowspan continues past this row are skipped,
			since the line would cut through them — instead they get their
			own end-of-group border drawn at their own last row). */
	rows.forEach( function ( row, rowIdx ) {		rows.forEach( function ( row, rowIdx ) {
	row.querySelectorAll( 'td[rowspan], th[rowspan]' ).forEach( function ( cell ) {		row.querySelectorAll( 'td[rowspan], th[rowspan]' ).forEach( function ( cell ) {
	var span = parseInt( cell.getAttribute( 'rowspan' ), 10 );		var span = parseInt( cell.getAttribute( 'rowspan' ), 10 ) \|\| 1;
	if ( !~~span \|\| span <= 1~~ ) return;		var endRowIdx = rowIdx + span - 1;
			var endRow = rows[ endRowIdx ];
			if ( !endRow ) return;

	cell.~~style~~.~~position =~~ '~~relative~~';		/* Draw the boundary on every cell present in the END row,
			except cells whose OWN rowspan extends beyond this row
	~~for~~ ( ~~var i = 1; i < span; i++~~ ) {		(those get their boundary drawn at their own end row). */
	var ~~targetRow~~ = ~~rows[ rowIdx + i ];~~		endRow.querySelectorAll( 'td, th' ).forEach( function ( endCell ) {
	if ( ~~!targetRow ) break;~~		var ownSpan = parseInt( endCell.getAttribute( 'rowspan' ), 10 ) \|\| 1;
			if ( ownSpan > 1 ) return; /* this cell's own group hasn't ended yet */
	~~var cellRect = cell~~.~~getBoundingClientRect~~();		endCell.classList.add( 'bmc-rowspan-boundary' );
	~~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~~ );
	}
	} );		} );
	} );		} );
	} );		} );
	}		}


	/* ── Split <br>-separated items inside a <ul> into separate <li>s ── */		/* ── Split <br>-separated items inside a <ul> into separate <li>s ── */
Line 645:		Line 648:
	} );		} );

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

	/* 11. Pricing page — ~~add body class for CSS targeting~~. */		/* 11. Pricing page — convert wikitables to flex layout so column
			borders and content stay perfectly aligned even with colspan rows.
			colspan cells get flex-grow = span so they span proportionally. */
	if ( currentPage.indexOf( 'Pricing' ) !== -1 ) {		if ( currentPage.indexOf( 'Pricing' ) !== -1 ) {
	document.body.classList.add( 'bmc-pricing' );		document.body.classList.add( 'bmc-pricing' );
			main.querySelectorAll( '.wikitable' ).forEach( function ( table ) {
			table.querySelectorAll( 'tr' ).forEach( function ( row ) {
			row.querySelectorAll( 'th, td' ).forEach( function ( cell ) {
			var span = parseInt( cell.getAttribute( 'colspan' ) \|\| '1', 10 );
			cell.style.setProperty( 'flex', span + ' 1 0%', 'important' );
			cell.style.setProperty( 'min-width', '0', 'important' );
			} );
			} );
			} );
	}		}

Gibcus at 14:19, 30 June 2026

2026-06-30T14:19:14Z

← Older revision		Revision as of 14:19, 30 June 2026
Line 645:		Line 645:
	} );		} );

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

	/* 11. Pricing page — add body class for CSS targeting. */		/* 11. Pricing page — add body class for CSS targeting. */

Gibcus at 18:45, 29 June 2026

2026-06-29T18:45:12Z

← Older revision		Revision as of 18:45, 29 June 2026
Line 650:		Line 650:
	} );		} );

	/* 11. Pricing page — add body class ~~and fix rowspan cell borders via JS.~~		/* 11. Pricing page — add body class for CSS targeting. */
	CSS ~~alone cannot reliably override MediaWiki own .wikitable td rule,~~
	~~so we set border directly on the element style which always wins~~. */
	if ( currentPage.indexOf( 'Pricing' ) !== -1 ) {		if ( currentPage.indexOf( 'Pricing' ) !== -1 ) {
	document.body.classList.add( 'bmc-pricing' );		document.body.classList.add( 'bmc-pricing' );
	~~requestAnimationFrame( function () {~~
	~~main.querySelectorAll( '.wikitable td[rowspan]' ).forEach( function ( td ) {~~
	~~td.style.setProperty( 'border-top', '0', 'important' );~~
	~~td.style.setProperty( 'border-bottom', '0', 'important' );~~
	~~td.style.setProperty( 'border-left', '0', 'important' );~~
	~~td.style.setProperty( 'border-right', '2px solid #d0d0d0', 'important' );~~
	~~td.style.setProperty( 'vertical-align', 'middle', 'important' );~~
	~~} );~~
	~~} );~~
	}		}