Shrink text-areas on profile change
This commit is contained in:
parent
c70b2c3928
commit
f9183c0662
|
@ -56,6 +56,7 @@
|
||||||
$: globalStore = $globalStorage
|
$: globalStore = $globalStorage
|
||||||
|
|
||||||
let originalProfile:string
|
let originalProfile:string
|
||||||
|
let lastProfile:string
|
||||||
let originalSettings:ChatSettings
|
let originalSettings:ChatSettings
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
|
@ -193,7 +194,10 @@
|
||||||
// Refresh settings modal
|
// Refresh settings modal
|
||||||
showSettingsModal++
|
showSettingsModal++
|
||||||
|
|
||||||
setTimeout(() => sizeTextElements(), 0)
|
const profileChanged = lastProfile !== chatSettings.profile
|
||||||
|
lastProfile = chatSettings.profile
|
||||||
|
|
||||||
|
setTimeout(() => sizeTextElements(profileChanged))
|
||||||
}
|
}
|
||||||
|
|
||||||
const saveProfile = () => {
|
const saveProfile = () => {
|
||||||
|
|
|
@ -6,9 +6,11 @@
|
||||||
import { replace } from 'svelte-spa-router'
|
import { replace } from 'svelte-spa-router'
|
||||||
// import PromptConfirm from './PromptConfirm.svelte'
|
// import PromptConfirm from './PromptConfirm.svelte'
|
||||||
import type { ChatSettings } from './Types.svelte'
|
import type { ChatSettings } from './Types.svelte'
|
||||||
export const sizeTextElements = () => {
|
export const sizeTextElements = (force?: boolean) => {
|
||||||
const els = document.querySelectorAll('textarea.auto-size')
|
const els = document.querySelectorAll('textarea.auto-size')
|
||||||
for (let i:number = 0, l = els.length; i < l; i++) autoGrowInput(els[i] as HTMLTextAreaElement)
|
for (let i:number = 0, l = els.length; i < l; i++) {
|
||||||
|
autoGrowInput(els[i] as HTMLTextAreaElement, force)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const autoGrowInputOnEvent = (event: Event) => {
|
export const autoGrowInputOnEvent = (event: Event) => {
|
||||||
|
@ -18,9 +20,9 @@
|
||||||
autoGrowInput(event.target as HTMLTextAreaElement)
|
autoGrowInput(event.target as HTMLTextAreaElement)
|
||||||
}
|
}
|
||||||
|
|
||||||
export const autoGrowInput = (el: HTMLTextAreaElement) => {
|
export const autoGrowInput = (el: HTMLTextAreaElement, force?: boolean) => {
|
||||||
const anyEl = el as any // Oh how I hate typescript. All the markup of Java with no real payoff..
|
const anyEl = el as any // Oh how I hate typescript. All the markup of Java with no real payoff..
|
||||||
if (!anyEl.__didAutoGrow) el.style.height = '38px' // don't use "auto" here. Firefox will over-size.
|
if (force || !anyEl.__didAutoGrow) el.style.height = '38px' // don't use "auto" here. Firefox will over-size.
|
||||||
el.style.height = el.scrollHeight + 'px'
|
el.style.height = el.scrollHeight + 'px'
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (el.scrollHeight > el.getBoundingClientRect().height + 5) {
|
if (el.scrollHeight > el.getBoundingClientRect().height + 5) {
|
||||||
|
|
Loading…
Reference in New Issue