Correct way to have inputs show other data?
The goal here is to show a color input. If the input is empty then it shows the user's current color. If it's showing the user's current color, then I want it t o be able to modify the color variable. This all basically works, but what it's doing is quickly updating the variable to the user's color instead of just staying blank and falling back to the user's color. This causes a double render and makes it so that if the user's color changes, then this won't be using the new value.
Is there a better way to do this?
65 Replies
Where
updates.data.measureTemplate.color is seeded with any current values when the form is opened (updates is seeded with current data when opened)Do you have a repo link as well?
Not with my current changes
I am confused as to what is causing an update here
I believe it's the
data-edit property
As I still want the input to be editable so the user can change itWhy not use svelte to do the updates?
This is being dropped directly into a Item sheet in foundry
Not using svelte (for the update) because I'd rather have it within the Item sheet so it's more integrated
You are already
bind:value itRight, that's for the case when there is already a value
Specifically the question is how to handle the else block where I want the input to be editable when there is no value, but behave as if the value is
currentUserColorWhat do you mean "behave", because from what I am seeing you are just inputting the
currentUserColor into the input and that may or may not be triggering the update through data-editYes, this isn't working as I want it and I don't know the correct way to do it, hence the questi on 🙃
If you want the color to show up as a default but not actually exist in the input, use
placeholderJust a head check... Where is
updates / updates.data coming from? I know on v12 the field changed to renderData instead if this is coming through a document update / TJSDocument.This is still on v11. I'm constructing it based off an Item passed to the svelte app. (technically
action, but it's a basically a document in pf1)
--> {#if updates.data.measureTemplate.color}
This line, it doesn't appear to be going off of the truthiness of color. Right now color is an empty string but it's still entering this block
Either that, or it's not being rebuilt when the value is emptied because that second block isn't binding to it nowOh. If types are the issue then why not
Boolean(updates.data.measureTemplate.color)?
That sounds more likely, as static Foundry things go.I don't suppose I can do something like
bind:value={updates.data.measureTemplate.color || currentUserColor}?Oh you'll like this.. I believe an empty string evaluates as false with Javascript.
Is there any kind
log helper I can drop into my template?{@debug updates.data.measureTemplate.color}
You can also be cheeky and drop a console log in the middleCan I concatenate that with something?
{console.log("lol") ?? ""}Oh gosh
Its just JS with the output being turned into HTML
You can do anything as long as you dont mind the output being JS
Or you do that trick I shown in case your code returns undefined
So anything between curly braces is just js? And the framework just treats it differently if the first char is a hashtag?
Hashtag is a prefix for special functions
But
{} is indeed just JS anywhere you wantDang, I had no idea
like how you have
above
updates.data.flags[MODULE_NAME][CONSTS.flags.colorAlpha] could very well be fetch(something)
or () => { return "the lolz" }🤯
ok maybe not the last one now I test it out, but generally thats the concept
Intricacies apply™️
What about (() => 'value')() (i.e. wrapping the function in parens before executing it
yeeeeah that does it
Well that doesn't help me at all 😅. Still cool though
lol, you can do inline logs and stuff with that logic
as said, this above lets you just output to console without any changes to HTML
If you dont fancy using
{@debug}This is my
else block as of right now
If I erase the value, it should show "Player Color" which it does for a second (see gif). But then it saves that value still shows Custom Color.
Sorry "save" is the wrong word. It doesn't save the color
Best I can say is the whole
data-edit thing is screwing you over, I really have no clue whats going on hereMan, even without
data-edit it's still the same behaviorThen I am pretty certain that
bind:value causes an immediate update to some default value
I just don't understand how it's getting into this if block right here
Nowhere else is using that label so it should jump to the else
Oh wait, that's showing the return value of the log function
yes
Undefined is false. so is empty string: https://developer.mozilla.org/en-US/docs/Glossary/Falsy
You still have to look at the logs
to see the console logs :wokeJoy:
Right, I'm running into lack of knowledge with the framework, not basic js knowledge
We know
Check the console and see what results you are getting
Yeah, the update value is flip-flopping. blank, when I erase it, but then immediately set to the player value instead of remaining empty
I would just check for if the value
=== player color if I were youI don't want to save the player color, though. Because if the player color changes, then I'll have an invalid color saved. I only want a color value saved if it was specifically set
I still don't get why you need an entire if else statement here though
Why not a single input that is empty
with a placeholder user color
and only change the label in presence of a value
Previously there was more in here so it made more sense to have all of the inputs swapped. But recent changes in the system negated all of that. I think I found what's going on and I'll try it with just a placeholder now. It looks like I was defaulting the color the player color when fetching my update options (because previously it made sense..but now it doesn't)
Hm, slight problem, it doesn't look like the placeholder color actually changes the color of the input. That should be purple.
Yeah it doesnt, you will have to make a
disabled, non-binded input if you want to preview it without making changes
But that's easy enough, here the {#if else} actually helps
Meanwhile the one at the top is somewhat superficial
Just replace the localize
It needs to remain enabled so the color can be changed, though
Then best I can say is deal with it or make an unlock button, locked by default it previews the user color, unlock and now the user can edit it but its black as expected
Since
input type="color" is pretty barren in terms of attributesCan I wrap individual property assignments in
{#if} blocsk?elaborate
Something like
No
treat hashtags as special HTML components
you cannot put them inside of other components
Hooooooooweeeever
You can go around this problem
unbind the value and use
on:change instead
You have to manually bind the changes to the update object but now you have control over it, including ignoring it if its the same as the player colorAh, that's a good idea. Should be pretty simple 👍
Ok, thank you both for your patience with me. It's all working how I envisioned it now
Excellent.. Thanks @Vauxs for jumping in and helping out! 😄
Unrelatred I did notice the
localizeFull function. There is a helper function in TRL to use the core i18n localization.
import { localize } from '#runtime/svelte/helper';I'm not sure what the one you provide does, but I use mine because I've also wrapped
format with it
In new mods (i.e. ones I work on regularly instead of just keep working), I use this instead so I can be more lazy 😅
That's good. I'm not sure why Foundry has it split into two methods