User:Jeblad/common.js

console.log('inside common.js' );
// keep the previous position, marging, padding, and border
// as this is only a single element there is no need for a more involved structure
var previousLeft;
var previousMarginLeft;
var previousPaddingLeft;
var previousBorderLeft;
var $previousElevated = $([]);

// helper for testing whether set is empty
var isEmpty = function( $elements ) {
	console.log('isEmpty: ', $elements.length );
	return $elements.length === 0;
};

// helper for testing whether set is good
var isGood = function( $elements ) {
	$grandParents = jQuery.merge(
		$elements.parent( '.mw-parser-output' ).parent( '#mw-content-text' ),
		$elements.parent( 'dl, ul, ol' ).parent( '.mw-parser-output' ).parent( '#mw-content-text' ) );
	console.log('isGood: ', $elements.length );
	return $grandParents.length !== 0;
};

// helper to set position
// ie. this has side effects
var update = function( $elevated ) {
console.log('inside update' );
	// calculate the left offset
	var offsetLeft = $elevated.offset().left - mw.util.$content.offset().left;
	console.log('offset: ', offsetLeft );
	// dispatch on tag name
	switch ( $elevated.prop( 'tagName' ).toLowerCase() ) {
		case 'dt':
		case 'p':
			// keep for later
			previousLeft = null;
			previousMarginLeft = $elevated.css('margin-left');
			previousPaddingLeft = $elevated.css('padding-left');
			previousBorderLeft = $elevated.css('border-left');
			// adjust
			$elevated.css('margin-left', 'calc(-'+offsetLeft+'px + 0.4px)');
			$elevated.css('padding-left', 'calc('+offsetLeft+'px - 0.4px - 0.18rem)');
			$elevated.css('border-left', '0.18rem solid #0645ad');
			break;
		case 'h1':
		case 'h2':
		case 'h3':
		case 'h4':
		case 'h5':
		case 'h6':
			$before = $elevated.children('::before');
	console.log('before: ', $before.length );
			// keep for later
			previousLeft = $before.css('margin-left');
			previousMarginLeft = null;
			previousPaddingLeft = null;
			previousBorderLeft = $before.css('border-left');
			// adjust
			$before.css('left', 'calc(-'+offsetLeft+'px + 0.4px)');
			$before.css('border-left', '0.18rem solid #0645ad');
			break;
	}
	// keep for later
	$previousElevated = $elevated;
};

var addMarker = function() {
	console.log('inside on load' );
	// get parent block
	var $elevated = $(':target').closest('h1,h2,h3,h4,h5,h6,p,dt,dd,li,[style*="display:block"],[style*="display:block"]');
	// early return on empty set
	if ( isEmpty( $elevated ) ) {
		return;
	}
	// early return on hard to handle cases
	// ie. cases where target is inside nested blocks
	if ( !isGood( $elevated ) ) {
		return;
	}
	// add class for non-positional styling
	$elevated.addClass('mw-elevated-target');
	// update the position
	update( $elevated );
};

// this is done during the initial load
$(window).on('load', addMarker);

var moveMarker = function() {
	console.log('inside on hashchange' );
	// reset old values
	if ( $previousElevated.length !== 0 ) {
		if ( previousLeft !== null ) $previousElevated.css( 'left', previousLeft );
		if ( previousMarginLeft !== null ) $previousElevated.css( 'margin-left', previousMarginLeft );
		if ( previousPaddingLeft !== null ) $previousElevated.css( 'padding-left', previousPaddingLeft );
		if ( previousBorderLeft !== null ) $previousElevated.css( 'border-left', previousBorderLeft );
	}
	// remove class for non-positional styling
	if ( $previousElevated.length !== 0 ) {
		$previousElevated.removeClass('mw-elevated-target');
	}
	// get parent block
	$elevated = $(':target').closest('h1,h2,h3,h4,h5,h6,p,dt,dd,li,[style*="display:block"],[style*="display:block"]');
	// early return on empty set
	if ( isEmpty( $elevated ) ) {
		return;
	}
	// early return on hard to handle cases
	// ie. cases where target is inside nested blocks
	if ( !isGood( $elevated ) ) {
		return;
	}
	// add class for non-positional styling
	$elevated.addClass('mw-elevated-target');
	// update the position
	update( $elevated );
};

// this is done when the fragment changes without a new load being triggered
$(window).on('hashchange', moveMarker);

// this is done when the window size changes
$(window).on('resize', moveMarker);