From 1393f99b39906f85689f7781da188e6fb414eaf6 Mon Sep 17 00:00:00 2001
From: Arpit Chakladar <54011232+arpitchakladar@users.noreply.github.com>
Date: Tue, 14 Feb 2023 11:53:09 +0530
Subject: Added some style changes.

---
 src/scripts/optimize/home-page.ts | 26 ++++++++++++++++--
 src/scripts/optimize/index.ts     | 10 +++----
 src/utils/modify-dom.ts           | 58 +++++++++++++++++++++++++++++++++++++++
 src/utils/observe-dom.ts          |  8 ++++--
 src/utils/replace-attributes.ts   | 34 -----------------------
 5 files changed, 92 insertions(+), 44 deletions(-)
 create mode 100644 src/utils/modify-dom.ts
 delete mode 100644 src/utils/replace-attributes.ts

(limited to 'src')

diff --git a/src/scripts/optimize/home-page.ts b/src/scripts/optimize/home-page.ts
index 4c1f21f..6e41294 100644
--- a/src/scripts/optimize/home-page.ts
+++ b/src/scripts/optimize/home-page.ts
@@ -1,7 +1,27 @@
-import { replaceAttributes } from "@/utils/replace-attributes";
+import { modifyDOM, DOMModifier } from "@/utils/modify-dom";
 
 const bannerImageUrl = chrome.runtime.getURL("assets/banner.jpg");
 
-replaceAttributes([
-	["#form_MainMenuPage > div > div:nth-child(13)", { innerHTML: `<img src="${bannerImageUrl}" style="width: 100vw" />` }]
+modifyDOM([
+	new DOMModifier("#slider > img", {
+		src: bannerImageUrl,
+		styles: {
+			position: "initial",
+			width: "100vw"
+		}
+	}),
+	new DOMModifier("#slider", {
+		styles: {
+			overflow: "visible",
+			position: "initial"
+		}
+	}),
+	new DOMModifier("#form_MainMenuPage > div > div.logo-div.row.ng-scope > div.top_link_icon.col-sm-7.float-right", {
+		styles: {
+			width: "100%",
+			display: "flex",
+			justifyContent: "space-around",
+			paddingTop: "5px"
+		}
+	})
 ]);
diff --git a/src/scripts/optimize/index.ts b/src/scripts/optimize/index.ts
index 70cbac3..4acf66f 100644
--- a/src/scripts/optimize/index.ts
+++ b/src/scripts/optimize/index.ts
@@ -1,7 +1,7 @@
-import { replaceAttributes } from "@/utils/replace-attributes";
+import { modifyDOM, DOMModifier } from "@/utils/modify-dom";
 
-replaceAttributes([
-	["head > script:nth-child(34)", { src: null }],
-	["head > script:nth-child(36)", { src: null, innerHTML: "$.prototype.nivoSlider = () => {};" }],
-	["head > script:nth-child(43)", { src: null }]
+modifyDOM([
+	new DOMModifier("head > script:nth-child(34)", { src: null }),
+	new DOMModifier("head > script:nth-child(36)", { src: null, innerHTML: "$.prototype.nivoSlider = () => {};" }),
+	new DOMModifier("head > script:nth-child(43)", { src: null })
 ]);
diff --git a/src/utils/modify-dom.ts b/src/utils/modify-dom.ts
new file mode 100644
index 0000000..4e36008
--- /dev/null
+++ b/src/utils/modify-dom.ts
@@ -0,0 +1,58 @@
+import { observeDOM } from "@/utils/observe-dom";
+
+type Replacements = {
+	innerHTML?: string;
+	styles?: {
+		[key: string]: string
+	};
+} | {
+	[key: string]: string | null
+};
+
+export class DOMModifier {
+	selector: string;
+	replaced: Replacements;
+	constructor(selector: string, replaced: Replacements) {
+		this.selector = selector;
+		this.replaced = replaced;
+	}
+}
+
+export const modifyDOM = (elements: (DOMModifier | null)[]) => {
+	let count = 0;
+
+	observeDOM(() => {
+		for (let i = 0; i < elements.length; i++) {
+			if (elements[i]) {
+				const element = document.querySelector(elements[i]!.selector) as HTMLElement | null;
+				if (element) {
+					const attributes = elements[i]!.replaced as any;
+					if (attributes.innerHTML) {
+						element.innerHTML = attributes.innerHTML;
+					}
+					if (attributes.styles) {
+						for (const styleType in attributes.styles) {
+							element.style[styleType as any] = attributes.styles[styleType];
+						}
+					}
+					delete attributes.innerHTML;
+					delete attributes.styles;
+					for (const attribute in attributes) {
+						if (attributes[attribute] === null) {
+							element.removeAttribute(attribute);
+						} else {
+							element.setAttribute(attribute, attributes[attribute]);
+						}
+					}
+					elements[i] = null;
+					count++;
+					if (count >= elements.length) {
+						return true;
+					}
+				}
+			}
+		}
+
+		return false;
+	});
+};
diff --git a/src/utils/observe-dom.ts b/src/utils/observe-dom.ts
index 30a07b4..8ea1a98 100644
--- a/src/utils/observe-dom.ts
+++ b/src/utils/observe-dom.ts
@@ -1,8 +1,12 @@
-export const observeDOM = (callback: () => boolean) => {
+export const observeDOM = (callback: () => boolean, element: HTMLElement = document as unknown as HTMLElement) => {
 	const observer = new MutationObserver(() => {
 		if (callback()) {
 			observer.disconnect();
 		}
 	});
-	observer.observe(document, {childList: true, subtree: true});
+
+	observer.observe(element, {
+		childList: true,
+		subtree: true
+	});
 };
diff --git a/src/utils/replace-attributes.ts b/src/utils/replace-attributes.ts
deleted file mode 100644
index 443c1d0..0000000
--- a/src/utils/replace-attributes.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { observeDOM } from "@/utils/observe-dom";
-
-export const replaceAttributes = (elements: any[]) => {
-	let count = 0;
-
-	observeDOM(() => {
-		for (let i = 0; i < elements.length; i++) {
-			if (elements[i]) {
-				const element = document.querySelector(elements[i]![0]) as HTMLElement | null;
-				if (element) {
-					const attributes = elements[i]![1];
-					if (attributes.innerHTML) {
-						element.innerHTML = attributes.innerHTML;
-					}
-					delete attributes.innerHTML;
-					for (const attribute in attributes) {
-						if (attributes[attribute] === null) {
-							element.removeAttribute(attribute);
-						} else {
-							element.setAttribute(attribute, attributes[attribute]);
-						}
-					}
-					elements[i] = undefined;
-					count++;
-					if (count >= elements.length) {
-						return true;
-					}
-				}
-			}
-		}
-
-		return false;
-	});
-};
-- 
cgit v1.2.3