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