Build bias element in seperate module

src/inject-chart.js → src/build-bias-element.js

@@ -2,16 +2,7 @@ import escapeHtml from 'escape-html';
 import getData from './get-data';
 import calculateBias from './calculate-bias';
 
-const injectChart = async () => {
-	const profileHoverContainer = document.querySelector('#profile-hover-container');
-	const profileCard = profileHoverContainer.querySelector('.profile-card');
-
-	if (!(profileCard && !profileCard.dataset.coinflict)) {
-		return;
-	}
-	profileCard.dataset.coinflict = true;
-
-	const username = profileCard.querySelector('[data-screen-name]').dataset.screenName;
+const buildBiasElement = async username => {
 	const data = await getData(username);
 
 	const container = document.createElement('div');
@@ -39,15 +30,7 @@ const injectChart = async () => {
 		biases.appendChild(document.createTextNode('No bias data available for this user.'));
 	}
 
-	const negativeMargin = 12;
-	biases.style.marginTop = `-${negativeMargin}px`;
-
-	const profileCardStats = profileCard.querySelector('.ProfileCardStats');
-	profileCardStats.parentNode.insertBefore(biases, profileCardStats);
-
-	const gravitySouth = profileCard.classList.contains('gravity-south');
-	const offset = gravitySouth ? (biases.offsetHeight - negativeMargin) : 0;
-	profileHoverContainer.style.transform = `translateY(-${offset}px)`;
+	return biases;
 };
 
-export default injectChart;
+export default buildBiasElement;

src/content.js

@@ -1,9 +1,9 @@
 import preloadData from './preload-data';
-import injectChart from './inject-chart';
+import injectChartProfileHover from './inject-chart-profile-hover';
 
 const observer = new MutationObserver(() => {
 	preloadData();
-	injectChart();
+	injectChartProfileHover();
 });
 observer.observe(document.body, {childList: true, subtree: true});
 

src/inject-chart-profile-hover.js

@@ -0,0 +1,26 @@
+import buildBiasElement from './build-bias-element';
+
+const injectChartProfileHover = async () => {
+	const profileHoverContainer = document.querySelector('#profile-hover-container');
+	const profileCard = profileHoverContainer.querySelector('.profile-card');
+
+	if (!(profileCard && !profileCard.dataset.coinflict)) {
+		return;
+	}
+	profileCard.dataset.coinflict = true;
+
+	const username = profileCard.querySelector('[data-screen-name]').dataset.screenName;
+	const biases = await buildBiasElement(username);
+
+	const negativeMargin = 12;
+	biases.style.marginTop = `-${negativeMargin}px`;
+
+	const profileCardStats = profileCard.querySelector('.ProfileCardStats');
+	profileCardStats.parentNode.insertBefore(biases, profileCardStats);
+
+	const gravitySouth = profileCard.classList.contains('gravity-south');
+	const offset = gravitySouth ? (biases.offsetHeight - negativeMargin) : 0;
+	profileHoverContainer.style.transform = `translateY(-${offset}px)`;
+};
+
+export default injectChartProfileHover;