diff --git a/patch_tags.mjs b/patch_tags.mjs new file mode 100644 index 0000000..ecdad44 --- /dev/null +++ b/patch_tags.mjs @@ -0,0 +1,88 @@ +import fs from 'fs'; + +function patchFile(filePath) { + let content = fs.readFileSync(filePath, 'utf8'); + + // Add state variables and position function + if (!content.includes('updateTagDropdownPosition')) { + const stateInsertion = ` let showTagDropdown = $state(false); + + let tagInputContainer = $state(); + let tagDropdownTop = $state(0); + let tagDropdownBottom = $state(0); + let tagDropdownLeft = $state(0); + let tagDropdownWidth = $state(0); + let tagDropdownUpwards = $state(false); + + function updateTagDropdownPosition() { + if (tagInputContainer) { + const rect = tagInputContainer.getBoundingClientRect(); + const spaceBelow = window.innerHeight - rect.bottom; + const spaceAbove = rect.top; + if (spaceBelow < 200 && spaceAbove > spaceBelow) { + tagDropdownUpwards = true; + tagDropdownBottom = window.innerHeight - rect.top; + } else { + tagDropdownUpwards = false; + tagDropdownTop = rect.bottom; + } + tagDropdownLeft = rect.left; + tagDropdownWidth = rect.width; + } + }`; + content = content.replace(` let showTagDropdown = $state(false);`, stateInsertion); + } + + // Add onscroll to .form-sidebar + content = content.replace( + `
`, + `
(showTagDropdown = false)}>` + ); + + // Also add window resize listener to close the dropdown + if (!content.includes(' (showTagDropdown = false)} />')) { + content = content.replace( + `
(showTagDropdown = false)} />\n`, + `
` + ); + + content = content.replace( + `onfocus={() => (showTagDropdown = true)}`, + `onfocus={() => { updateTagDropdownPosition(); showTagDropdown = true; }}` + ); + + // Add inline styles to the dropdown and update CSS + const oldDropdownStart = `
`; + const newDropdownStart = `
`; + content = content.replace(oldDropdownStart, newDropdownStart); + + const oldCss = `.tag-autocomplete-dropdown { + position: absolute; + top: 100%; + left: 0; + right: 0;`; + const newCss = `.tag-autocomplete-dropdown { + position: fixed;`; + content = content.replace(oldCss, newCss); + + // There is a margin-top: 4px; in the CSS as well, let's remove it if it's there + content = content.replace( + `.tag-autocomplete-dropdown {\n\t\tposition: fixed;\n\t\tbackground: var(--bg-color);\n\t\tborder: 1px solid var(--text-color);\n\t\tbox-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);\n\t\tz-index: 50;\n\t\tmax-height: 200px;\n\t\toverflow-y: auto;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tmargin-top: 4px;\n\t}`, + `.tag-autocomplete-dropdown {\n\t\tposition: fixed;\n\t\tbackground: var(--bg-color);\n\t\tborder: 1px solid var(--text-color);\n\t\tbox-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);\n\t\tz-index: 50;\n\t\tmax-height: 200px;\n\t\toverflow-y: auto;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}` + ); + + // More generic css replacement for margin-top if it's separate + content = content.replace(`margin-top: 4px;`, ``); + + fs.writeFileSync(filePath, content); +} + +patchFile('src/routes/admin/posts/[id]/+page.svelte'); +patchFile('src/routes/admin/posts/new/+page.svelte');