@perchance@lemmy.world - pinging dev :)

Here is my implementation of ‘remembering’ the resized size of the textarea inputs. It is using the ResizeObserver (documentation) and will only observe textarea elements with resize style property enabled.

It is enabled with the @inputs:

[remember(root, "@inputs")]

EDIT: It would only save the resized size if you have inputs on the textarea.

EDIT 2: Fixed width responsiveness (for elements with width: 100%; max-width: ... ; resize: vertical where if the width gets lower than its maxed, it would save the width and fix the size without option to resize it back (since it is only resize: vertical). It now only saves the resizable direction i.e. height if resize is vertical and vice versa. For both or normal textarea it would save both width and height.

Here is the modified plugin: https://perchance.org/t2w8fixecn

Here is an example of it: https://perchance.org/5tfbmi0gtc

  • VioneT@lemmy.worldOPMEnglish
    1·
    6 months ago

    I’ve updated it to only save the resize with the data-remember-plugin data attributes.

    It can probably also be used to check if certain elements can be saved and not (i.e. data-remember-plugin="resize, forget") where forget can be an attribute to not save the inputs on that element.

    As for the different screen widths, I may have fixed it by only allowing the value to be saved the directions that the resize is allowed e.g. If the element has resize: vertical only the height would be saved and not the width.

    I also changed checking the value of the resize with the getComputedStyle.