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/utils/modify-dom.ts | 58 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 src/utils/modify-dom.ts (limited to 'src/utils/modify-dom.ts') 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; + }); +}; -- cgit v1.2.3