this post was submitted on 25 Mar 2024
4 points (100.0% liked)

Perchance - Create a Random Text Generator

448 readers
14 users here now

⚄︎ Perchance

This is a Lemmy Community for perchance.org, a platform for sharing and creating random text generators.

Feel free to ask for help, share your generators, and start friendly discussions at your leisure :)

This community is mainly for discussions between those who are building generators. For discussions about using generators, especially the popular AI ones, the community-led Casual Perchance forum is likely a more appropriate venue.

See this post for the Complete Guide to Posting Here on the Community!

Rules

1. Please follow the Lemmy.World instance rules.

2. Be kind and friendly.

  • Please be kind to others on this community (and also in general), and remember that for many people Perchance is their first experience with coding. We have members for whom English is not their first language, so please be take that into account too :)

3. Be thankful to those who try to help you.

  • If you ask a question and someone has made a effort to help you out, please remember to be thankful! Even if they don't manage to help you solve your problem - remember that they're spending time out of their day to try to help a stranger :)

4. Only post about stuff related to perchance.

  • Please only post about perchance related stuff like generators on it, bugs, and the site.

5. Refrain from requesting Prompts for the AI Tools.

  • We would like to ask to refrain from posting here needing help specifically with prompting/achieving certain results with the AI plugins (text-to-image-plugin and ai-text-plugin) e.g. "What is the good prompt for X?", "How to achieve X with Y generator?"
  • See Perchance AI FAQ for FAQ about the AI tools.
  • You can ask for help with prompting at the 'sister' community Casual Perchance, which is for more casual discussions.
  • We will still be helping/answering questions about the plugins as long as it is related to building generators with them.

6. Search through the Community Before Posting.

  • Please Search through the Community Posts here (and on Reddit) before posting to see if what you will post has similar post/already been posted.

founded 1 year ago
MODERATORS
eatham
[email protected]
VioneT
perchance
4
[Plugin] Remembering textarea Resize Size with remember-plugin (self.perchance)
submitted 7 months ago* (last edited 7 months ago) by VioneT to c/perchance
4 comments fedilink hide all child comments
 

@[email protected] - 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

top 4 comments
sorted by: hot top controversial new old
[–] [email protected] 3 points 7 months ago* (last edited 7 months ago) (1 children)

@[email protected] ^^

[–] VioneT 1 points 7 months ago

oops I forgot the ping doesn't work in the body lmaoo

[–] perchance 2 points 7 months ago* (last edited 7 months ago) (1 children)

Nice! This would be a 'breaking change' in programming lingo, so it'd need to somehow be an explicit opt-in. Maybe a data-remember-plugin-size=1 attribute on textareas? Or "@inputs,@textareaSize,a,b,c" if global control is enough?

For the data attribute approach you'd add && el.dataset.rememberPluginSize after el.type == 'textarea' && el.style.resize != 'none'. I like this better than global control, since it seems reasonable to only want certain textarea sizes to be remembered in some cases.

Another possibility here which might be more future-proof / forward-looking is data-remember-plugin="size,foo,bar" - i.e. a general options attribute which allows customizing the remember plugin's behavior on that input. I'm thinking out loud here, but I kinda like that approach. I'm not sure what "foo" and "bar" could end up being, but maybe e.g. options to allow forgetting after a certain number of minutes/hours/days, and stuff like that. Not that you'd implement that now, but it just allows for that sort of thing in the future without things getting messy.

In this case you'd use something like (el.dataset.rememberPlugin || "").split(",").map(a => a.trim()).includes("size").

A couple more thoughts:

  • Some devices have different screen widths - e.g. horizontal/vertical orientation for mobiles and tablets. I don't think this will cause much trouble, but I can imagine some edge cases where it would be annoying - e.g. you made the textarea wide while in horizontal orientation, and then later you came back to the site in vertical, but the textarea is now too wide to grab the little gripper to resize it, so the app appears "broken" to you. It's tempting to put responsibility for this onto the gen author, but it's probably not something that most perchance devs would realize.
  • I'm not sure if el.style.resize !== 'none' is needed, but if it is, then window.getComputedStyle(el).resize might need to be used instead, since I think user agent styles tend to allow resizing in both axes by default.
[–] VioneT 1 points 7 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.