diff --git a/src/script/civitaiHelperFix.ts b/src/script/civitaiHelperFix.ts index 9d8a64c..0ea7a6f 100644 --- a/src/script/civitaiHelperFix.ts +++ b/src/script/civitaiHelperFix.ts @@ -37,6 +37,13 @@ const styleButton = (node: HTMLElement, isThumbMode: boolean) => { } }; +type IStrictNullable = T | null; +type INullable = T | null | undefined; + +function is_nullable(v: INullable): v is null | undefined { + return v === undefined || v === null +} + const updateCardForCivitai = () => { if (!document.querySelector('#tab_civitai_helper')) return; @@ -54,15 +61,15 @@ const updateCardForCivitai = () => { // Change all "replace preview" into an icon let extraNetworkId = ''; - let extraNetworkNode: any; - let metadataButton: any; - let additionalNode: any; - let replacePreviewButton: any; - let ulNode: any; - let searchTermNode: any; + let extraNetworkNode: IStrictNullable; + let metadataButton: IStrictNullable; + let additionalNode: HTMLElement; + let replacePreviewButton: IStrictNullable; + let ulNode: IStrictNullable; + let searchTermNode: IStrictNullable; let searchTerm = ''; let modelType = ''; - let cards; + let cards: INullable>; let needToAddButtons = false; let isThumbMode = false; @@ -76,85 +83,79 @@ const updateCardForCivitai = () => { extraNetworkNode = document.querySelector(`#${extraNetworkId}`); // Check if extra network node exists - if (extraNetworkNode == null) continue; + if (is_nullable(extraNetworkNode)) continue; // Check if extr network is under thumbnail mode - isThumbMode = false; - if (extraNetworkNode?.className === 'extra-network-thumbs') isThumbMode = true; + isThumbMode = extraNetworkNode.className === 'extra-network-thumbs'; // Get all card nodes - cards = extraNetworkNode?.querySelectorAll('.card'); - if (!cards) continue; + cards = extraNetworkNode.querySelectorAll('.card'); + if (!cards?.length) continue; for (const card of cards) { if (card.querySelectorAll('.actions .additional a').length > 2) continue; // Metadata_buttoncard metadataButton = card.querySelector('.metadata-button'); // Additional node - additionalNode = card.querySelector('.actions .additional'); + additionalNode = card.querySelector('.actions .additional')!; // Get ul node, which is the parent of all buttons ulNode = card.querySelector('.actions .additional ul'); - if (ulNode == null) { + if (is_nullable(ulNode)) { ulNode = document.createElement('ul'); additionalNode.append(ulNode); } // Replace preview text button replacePreviewButton = card.querySelector('.actions .additional a'); - if (replacePreviewButton == null) { + if (is_nullable(replacePreviewButton)) { replacePreviewButton = document.createElement('a'); additionalNode.append(replacePreviewButton); } + // Remove br tag + ulNode.querySelector('br')?.remove(); + // Check thumb mode if (isThumbMode && additionalNode) { - additionalNode.style.display = undefined; + additionalNode.style.display = undefined as any as string; if (chShowButtonOnThumb) { ulNode.style.background = BTN_THUMB_BACKGROUND; } else { // Reset - ulNode.style.background = undefined; + ulNode.style.background = undefined as any as string; // Remove existed buttons - if (ulNode) { - // Find all .a child nodes - const atags = ulNode?.querySelectorAll('a'); - if (!atags) continue; - for (const atag of atags) { - // Reset display - atag.style.display = undefined; - // Remove extension's button - if (CH_BTN_TXTS.has(atag.innerHTML)) { - // Need to remove - atag.remove(); - } else { - // Do not remove, just reset - atag.innerHTML = replacePreviewText; - atag.style.display = undefined; - atag.style.fontSize = undefined; - atag.style.position = undefined; - atag.style.backgroundImage = undefined; - } - } - // Also remove br tag in ul - const brtag = ulNode.querySelector('br'); - if (brtag) brtag.remove(); + // Find all .a child nodes + const atags = ulNode.querySelectorAll('a'); + if (!atags?.length) continue; + for (const atag of atags) { + // Reset display + atag.style.display = undefined as any; + // Remove extension's button + if (CH_BTN_TXTS.has(atag.innerHTML)) { + // Need to remove + atag.remove(); + } else { + // Do not remove, just reset + atag.innerHTML = replacePreviewText; + atag.style.display = undefined as any; + atag.style.fontSize = undefined as any; + atag.style.position = undefined as any; + atag.style.backgroundImage = undefined as any; + } } + // Just reset and remove nodes, do nothing else continue; } } else { // Full preview mode - additionalNode.style.display = chAlwaysDisplay ? 'block' : undefined; - - // Remove br tag - const brtag = ulNode.querySelector('br'); - if (brtag) brtag.remove(); + additionalNode.style.display = chAlwaysDisplay ? 'block' : undefined as any as string; } // Change replace preview text button into icon - if (replacePreviewButton?.innerHTML !== '🖼️') { + if (replacePreviewButton.innerHTML !== '🖼️') { needToAddButtons = true; replacePreviewButton.innerHTML = '🖼️'; styleButton(replacePreviewButton, isThumbMode);