david aka claudekennilol Posts

david aka claudekennilol

•Created by david aka claudekennilol on 7/5/2024 in #typhonjs-runtime

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?

99 replies

Gaming

Programming