TyphonJS•3mo ago

Correct way to have inputs show other data?

        {#if updates.data.measureTemplate.color}
            <label for="colorOverride">{localizeFull("PF1.CustomColor")}</label>
            <div class="form-fields">
                <input
                    id="colorOverride"
                    type="text"
                    bind:value={updates.data.measureTemplate.color}
                    name="measureTemplate.color"
                />
                <div class="color-input-border">
                    <input
                        style="opacity: {updates.data.flags[MODULE_NAME][CONSTS.flags.colorAlpha]}"
                        type="color"
                        bind:value={updates.data.measureTemplate.color}
                        data-edit="measureTemplate.color"
                    />
                </div>
            </div>
        {:else}
            <label for="colorOverride">{localizeFull("PF1.CustomColor")}</label>
            <div class="form-fields">
                <input id="colorOverride" type="text" value={currentUserColor} name="measureTemplate.color" />
                <div class="color-input-border">
                    <input
                        style="opacity: {updates.data.flags[MODULE_NAME][CONSTS.flags.colorAlpha]}"
                        type="color"
                        value={currentUserColor}
                        data-edit="measureTemplate.color"
                    />
                </div>
            </div>
        {/if}

        {#if updates.data.measureTemplate.color}
            <label for="colorOverride">{localizeFull("PF1.CustomColor")}</label>
            <div class="form-fields">
                <input
                    id="colorOverride"
                    type="text"
                    bind:value={updates.data.measureTemplate.color}
                    name="measureTemplate.color"
                />
                <div class="color-input-border">
                    <input
                        style="opacity: {updates.data.flags[MODULE_NAME][CONSTS.flags.colorAlpha]}"
                        type="color"
                        bind:value={updates.data.measureTemplate.color}
                        data-edit="measureTemplate.color"
                    />
                </div>
            </div>
        {:else}
            <label for="colorOverride">{localizeFull("PF1.CustomColor")}</label>
            <div class="form-fields">
                <input id="colorOverride" type="text" value={currentUserColor} name="measureTemplate.color" />
                <div class="color-input-border">
                    <input
                        style="opacity: {updates.data.flags[MODULE_NAME][CONSTS.flags.colorAlpha]}"
                        type="color"
                        value={currentUserColor}
                        data-edit="measureTemplate.color"
                    />
                </div>
            </div>
        {/if}

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

david aka claudekennilol•3mo ago

Where updates.data.measureTemplate.color is seeded with any current values when the form is opened (updates is seeded with current data when opened)

TyphonJS (Michael)•3mo ago

Do you have a repo link as well?

david aka claudekennilol•3mo ago

Not with my current changes

Vauxs•3mo ago

I am confused as to what is causing an update here

david aka claudekennilol•3mo ago

I believe it's the data-edit property As I still want the input to be editable so the user can change it

Vauxs•3mo ago

Why not use svelte to do the updates?

david aka claudekennilol•3mo ago

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

Vauxs•3mo ago

You are already bind:value it

david aka claudekennilol•3mo ago

Right, 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 currentUserColor

Vauxs•3mo ago

What 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-edit

david aka claudekennilol•3mo ago

Yes, this isn't working as I want it and I don't know the correct way to do it, hence the questi on 🙃

Vauxs•3mo ago

If you want the color to show up as a default but not actually exist in the input, use placeholder

TyphonJS (Michael)•3mo ago

Just 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.

david aka claudekennilol•3mo ago

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)

    return new TemplateSettings({
        target: parent,
        anchor: sibling,
        props: { action, TemplateApplication: app },
    });

    return new TemplateSettings({
        target: parent,
        anchor: sibling,
        props: { action, TemplateApplication: app },
    });

<script>
    import SharedSettings from "./shared-settings.svelte";
    import { ifDebug } from "../scripts/utils";
    import { prepareData } from "./prepare-template-data";

    export let action = void 0;
    export let TemplateApplication = void 0;

    const updates = prepareData(action); <-- updates built here

    ifDebug(() => console.log("initializing updates", updates));
</script>

<svelte:component this={TemplateApplication} {action} {updates}>
    <SharedSettings {updates} />
</svelte:component>

<style lang="scss">
</style>

<script>
    import SharedSettings from "./shared-settings.svelte";
    import { ifDebug } from "../scripts/utils";
    import { prepareData } from "./prepare-template-data";

    export let action = void 0;
    export let TemplateApplication = void 0;

    const updates = prepareData(action); <-- updates built here

    ifDebug(() => console.log("initializing updates", updates));
</script>

<svelte:component this={TemplateApplication} {action} {updates}>
    <SharedSettings {updates} />
</svelte:component>

<style lang="scss">
</style>

--> {#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 now

Vauxs•3mo ago

Oh. If types are the issue then why not Boolean(updates.data.measureTemplate.color)? That sounds more likely, as static Foundry things go.

Gaming

Programming

Correct way to have inputs show other data?