computed-variables

computed-variables copied to clipboard

I have a textarea called #input

CSS:

#input
{
	font-size: 1rem;
	color: white;
	border: 0px solid black;
	padding-right: 1rem;
	margin-right: 1rem;
	outline: none;
	font-family: inherit;
	flex-grow: 1;
	background-color: transparent;
	color: inherit;
	resize: none;
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
	/* height: calc(100% - 0.6rem); */
	overflow-wrap: break-word;
	word-break: break-word;

	min-height: 1em;
	max-height: 50vh;
	height: var(--expand);
}

After load I call:

    computedVariables
    (
        '--expand',
        (value, event, tag) => {
            console.log(value)
            console.log(event)
            console.log(tag)
            tag.style.height = 'inherit'
            const height = tag.scrollHeight
            tag.style.height = ''
            return height + 'px'
        },
        "#input",
        ['input', 'paste', 'blur', 'reprocess']
    )

I would expect the function where the console.logs are to be called on an input event. No resizing happens, no console.logs are triggered.

Doing some checks, added some console logs in the source:

It outputs:

Hi @madprops! Thanks for checking this plugin out, it looks (based on you using the tag argument) that you're trying to set the variable on a DOM node, and then use it in CSS once this plugin has run the function. I noticed in the demo code you didn't initiate the CSS variable either in CSS like --expand: ; or in DOM like style="--expand: ;", so that's why the plugin wasn't finding the variable and running those logs. If you initialize the variable in CSSOM or DOM it should run the function, which would log those things to the console.

If you initialized it with style='--expand: "HEYYY";' right on the <textarea>, and then trigger one of the events you're watching you should see this in the console:

<textarea id=input size=1 rows=1 placeholder="(7:39 PM) Hi mad, write something to Hue" style='--expand: "HEYYY";'></textarea>

<style>
  #input {
    font-size: 1rem;
    color: white;
    border: 0px solid black;
    padding-right: 1rem;
    margin-right: 1rem;
    outline: none;
    font-family: inherit;
    flex-grow: 1;
    background-color: transparent;
    color: inherit;
    resize: none;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    /* height: calc(100% - 0.6rem); */
    overflow-wrap: break-word;
    word-break: break-word;

    min-height: 1em;
    max-height: 50vh;
    height: var(--expand);
  }
</style>

<script type=module>
  import computedVariables from 'https://unpkg.com/computed-variables/index.es.js'

  computedVariables(
    '--expand',
    (value, event, tag) => {
      console.log(value)
      console.log(event)
      console.log(tag)
      tag.style.height = 'inherit'
      const height = tag.scrollHeight
      tag.style.height = ''
      return height + 'px'
    },
    "#input",
    ['input', 'paste', 'blur', 'reprocess']
  )
</script>

^ here's the demo code I was working with

You're right, it's working now! Thought having the --expand var in the CSS file declarations

Thank you :)

A bit confused about what the value (like HEYYY, or InputExpand which I'm going to use) would be for, but I think it could be useful if I had multiple computed variables.

Btw I had to change the tag.style.height change from "inherit" to "auto" so it respected my 1 row setup. Seems to work nicely.

    computedVariables
    (
        '--expand',
        (value, event, tag) => {
            tag.style.height = 'auto'
            const height = tag.scrollHeight
            tag.style.height = ''
            return height + 'px'
        },
        "#input",
        ['input', 'paste', 'blur', 'reprocess']
    )

Yay! I'm glad you got it working :D

I've got a collection on CodePen of demos that show a variety of things you can do with this: https://codepen.io/collection/DJNaar/ (some of them are really weird, I am trying to push the limits!)

Having a problem related to scroll position of other elements when a process is triggered:

    (
        '--expand',
        (value, event, tag) => 
        {
            tag.style.height = 'auto'
            const height = tag.scrollHeight
            tag.style.height = ''
            
            if(Hue.last_input_height && Hue.last_input_height !== height)
            {
                Hue.resize_timer()
            }

            Hue.last_input_height = height
            return height + 'px'
        },
        "#input",
        ['input', 'paste', 'reprocess']
    )

It's hard to replicate in a fiddle. But this is how it looks like:

What I do is call the 'go to bottom' function (which has a delay, so it should execute after the computed variable is returned and applied), but soon after another reprocess is triggered the scroll position of the chat area (top) gets scrolled up.

I nailed it down to computed-variables because it was happening on blur, and when I removed the blur event it didn't happen anymore, unless I type more characters.

So I'm not sure why the height of the input would be causing a scroll change on the chat area. The chat area contains some display:none textareas (used for editing messages), but I don't think they should be affected since it's only dealing with #input I think.

Basically the chat scrolls to the bottom as expected, then after a computed-variables trigger it scrolls up a bit. This only happens sometimes in certain cases though, not all the time, I've been trying to accurately find a way to replicate it all the time. Usually if I hold a key pressed to fill the textarea it happens pretty much all the time, and in some cases a single key down will trigger the scroll problem.

Any ideas?

    computedVariables
    (
        '--expand',
        (value, event, tag) => 
        {
            // tag.style.height = 'auto'
            const height = tag.scrollHeight
            // tag.style.height = ''
            
            if(Hue.last_input_height && Hue.last_input_height !== height)
            {
                Hue.resize_timer()
            }

            Hue.last_input_height = height
            return height + 'px'
        },
        "#input",
        ['input', 'paste', 'reprocess']
    )

If I comment the tag style lines it doesn't happen .. but it calculates inaccurate results. hmm

Ok I fixed it by changing "auto" to what I have set as min-height (it was happening with 'inherit' too btw):

    computedVariables
    (
        '--expand',
        (value, event, tag) => 
        {
            tag.style.height = 'calc(100% - 0.6rem);'
            const height = tag.scrollHeight
            tag.style.height = ''
            
            if(Hue.last_input_height && Hue.last_input_height !== height)
            {
                Hue.resize_timer()
            }

            Hue.last_input_height = height
            return height + 'px'
        },
        "#input",
        ['input', 'paste', 'reprocess']
    )

Nevermind, it's not fixed. If I use backspace to remove lines it shrinks, but if I select all text and delete it doesn't calculate it correctly..

Ok fixed.

CSS mod on #input

min-height: calc(2rem - 0.6rem);

JS mod:

    computedVariables
    (
        '--expand',
        (value, event, tag) => 
        {
            $("#footer").css("height", $("#footer").height())
            tag.style.height = 'auto'
            const height = tag.scrollHeight
            tag.style.height = ''
            $("#footer").css("height", "auto")
            
            if(Hue.last_input_height && Hue.last_input_height !== height)
            {
                Hue.resize_timer()
            }

            Hue.last_input_height = height
            return height + 'px'
        },
        "#input",
        ['input', 'paste', 'blur', 'reprocess']
    )

Basically what I did was set a fixed height to the footer so it didn't change when calculating the textarea's height.

This should have gone in its own Issue, sorry about that.