Merge pull request #808 from kgar/dnd5e-3.3.x-restore-switch-clickabi…

…lity Resolved: Switches don't toggle when clicking their labels
kgar · Oct 21, 2024 · 6607779 · 6607779
2 parents 1e818aa + 3d74ebc
commit 6607779
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 54 deletions.
diff --git a/src/applications/spell-source-class-assignments/SpellSourceClassAssignments.svelte b/src/applications/spell-source-class-assignments/SpellSourceClassAssignments.svelte
@@ -121,11 +121,11 @@
                 assignment.item.system.sourceClass === classColumn.key}
               <TidyTableHeaderCell>
                 <TidySwitch
-                  value={selected}
-                  on:change={() =>
+                  checked={selected}
+                  on:change={(ev) =>
                     setItemSourceClass(
                       assignment.item,
-                      selected ? '' : classColumn.key,
+                      ev.detail.currentTarget.checked ? classColumn.key : '',
                     )}
                 />
               </TidyTableHeaderCell>

diff --git a/src/components/toggle/ConditionToggle.svelte b/src/components/toggle/ConditionToggle.svelte
@@ -21,7 +21,7 @@
     switchOn = !condition.disabled;
   }
 
-  async function handleChange(originalValue: boolean) {
+  async function handleChange(newValue: boolean) {
     try {
       await FoundryAdapter.toggleCondition($context.actor, condition);
     } catch (e) {
@@ -30,7 +30,7 @@
         condition,
         state: switchOn,
       });
-      switchOn = originalValue;
+      switchOn = !newValue;
     }
   }
 </script>
@@ -39,8 +39,8 @@
   class="flex-row small-gap tidy-condition-toggle {switchOn
     ? 'active'
     : 'inactive'}"
-  bind:value={switchOn}
-  on:change={(ev) => handleChange(ev.detail.originalValue)}
+  bind:checked={switchOn}
+  on:change={(ev) => handleChange(ev.detail.currentTarget.checked)}
   title={condition.name}
   disabled={!$context.editable}
   data-uuid={condition.reference}

diff --git a/src/components/toggle/PropertyToggle.svelte b/src/components/toggle/PropertyToggle.svelte
@@ -17,18 +17,22 @@
     switchOn = checked;
   }
 
-  async function handleChange(originalValue: boolean) {
+  async function handleChange(newValue: boolean) {
     try {
-      document.update({
-        [field]: !originalValue,
+      const result = await document.update({
+        [field]: newValue,
       });
+
+      if (!result) {
+        switchOn = !newValue;
+      }
     } catch (e) {
       error('An error occurred while toggling a property', false, e);
       debug('Property toggle error troubleshooting info', {
-        originalValue,
+        originalValue: !newValue,
         state: switchOn,
       });
-      switchOn = originalValue;
+      switchOn = !newValue;
     }
   }
 </script>
@@ -37,8 +41,8 @@
   class="flex-row small-gap tidy-property-toggle {switchOn
     ? 'active'
     : 'inactive'}"
-  bind:value={switchOn}
-  on:change={(ev) => handleChange(ev.detail.originalValue)}
+  bind:checked={switchOn}
+  on:change={(ev) => handleChange(ev.detail.currentTarget.checked)}
   {title}
   {disabled}
 >

diff --git a/src/components/toggle/TidySwitch.svelte b/src/components/toggle/TidySwitch.svelte
@@ -1,24 +1,15 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
 
-  export let value: boolean = false;
+  export let checked: boolean = false;
   export let disabled: boolean = false;
   export let thumbIconClass: string | undefined = undefined;
 
   const switchLabelId = `switch-${foundry.utils.randomID()}-label`;
+
   const dispatcher = createEventDispatcher<{
-    change: { originalValue: boolean };
+    change: Event & { currentTarget: HTMLInputElement };
   }>();
-
-  function handleClick(
-    _: MouseEvent & {
-      currentTarget: EventTarget & HTMLElement;
-    },
-  ) {
-    const originalValue = value;
-    value = !value;
-    dispatcher('change', { originalValue: originalValue });
-  }
 </script>
 
 <label
@@ -28,17 +19,17 @@
   title={$$props.title ?? null}
 >
   <slot />
-  <!-- svelte-ignore a11y-interactive-supports-focus -->
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <!-- svelte-ignore a11y-missing-attribute -->
-  <a
-    role="switch"
-    on:click={(ev) => !disabled && handleClick(ev)}
-    aria-checked={value}
-    aria-labelledby={switchLabelId}
-  >
+  <div role="switch" aria-checked={checked} aria-labelledby={switchLabelId}>
     {#if thumbIconClass}
       <i class="thumb-icon {thumbIconClass}"></i>
     {/if}
-  </a>
+  </div>
+
+  <input
+    type="checkbox"
+    on:change={(ev) => dispatcher('change', ev)}
+    {checked}
+    {disabled}
+    class="hidden"
+  />
 </label>
diff --git a/src/components/toggle/_toggles.scss b/src/components/toggle/_toggles.scss
@@ -54,14 +54,15 @@
 .tidy-switch {
   display: flex;
   align-items: center;
+  cursor: pointer;
 
   --tidy-switch-scale-internal: var(--tidy-switch-scale, 1);
   --tidy-switch-thumb-transform-duration-internal: var(
     --tidy-switch-thumb-transform-duration,
     0.3s
   );
 
-  [role="switch"] {
+  [role='switch'] {
     width: calc(2.625rem * var(--tidy-switch-scale-internal));
     height: calc(1.375rem * var(--tidy-switch-scale-internal));
     position: relative;
@@ -103,23 +104,19 @@
       transition: transform var(--tidy-switch-thumb-transform-duration-internal);
     }
 
-    &[aria-checked='true'] {
-      &:not(.disabled) {
-        background-color: var(--t5e-primary-accent-color);
-      }
+    &:focus-visible {
+      outline: 0.0625rem solid var(--t5e-primary-accent-color);
+    }
+  }
 
-      &::before,
-      .thumb-icon {
-        transform: translateX(
-          calc(1.25rem * var(--tidy-switch-scale-internal))
-        );
-        transition: transform
-          var(--tidy-switch-thumb-transform-duration-internal);
-      }
+  &:has(input:checked) [role='switch'] {
+    &:not(.disabled) {
+      background-color: var(--t5e-primary-accent-color);
     }
 
-    &:focus-visible {
-      outline: 0.0625rem solid var(--t5e-primary-accent-color);
+    &::before,
+    .thumb-icon {
+      transform: translateX(calc(1.25rem * var(--tidy-switch-scale-internal)));
     }
   }
 }
diff --git a/src/sheets/actor/SheetEditModeToggle.svelte b/src/sheets/actor/SheetEditModeToggle.svelte
@@ -50,7 +50,7 @@
     --tidy-switch-scale="1"
     --tidy-switch-thumb-transform-duration="0.15s"
     title={allowEdit ? unlockTitle : lockTitle}
-    value={allowEdit}
+    checked={allowEdit}
     thumbIconClass="{allowEdit ? 'fas fa-unlock' : 'fas fa-lock'} fa-fw"
     on:change={() => toggleLock()}
   ></TidySwitch>

diff --git a/src/sheets/character/parts/FavoriteEffectsList.svelte b/src/sheets/character/parts/FavoriteEffectsList.svelte
@@ -86,7 +86,7 @@
         <ItemTableCell baseWidth={controlsColumnWidth}>
           <TidySwitch
             disabled={effectContext.suppressed}
-            value={effectContext.toggle.value}
+            checked={effectContext.toggle.value}
             on:change={() => toggleEffect(effectContext)}
           />
         </ItemTableCell>

diff --git a/src/sheets/shared/SheetHeaderEditModeToggle.svelte b/src/sheets/shared/SheetHeaderEditModeToggle.svelte
@@ -48,7 +48,7 @@
       --tidy-switch-scale="1"
       --tidy-switch-thumb-transform-duration="0.15s"
       title={allowEdit ? unlockTitle : lockTitle}
-      value={allowEdit}
+      checked={allowEdit}
       thumbIconClass="{allowEdit ? 'fas fa-unlock' : 'fas fa-lock'} fa-fw"
       on:change={() => toggleLock()}
     ></TidySwitch>