Add button and drag to swap colors

oddbird · Dec 11, 2024 · 0619a74 · 0619a74
1 parent 2fbf5f0
commit 0619a74
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 4 deletions.
diff --git a/src/lib/components/colors/Header.svelte b/src/lib/components/colors/Header.svelte
@@ -4,6 +4,7 @@
 
   import CopyButton from '$lib/components/util/CopyButton.svelte';
   import type { ColorFormatId } from '$lib/constants';
+  import { switchColors } from '$lib/stores';
   import { getSpaceFromFormatId } from '$lib/utils';
 
   interface Props {
@@ -20,6 +21,7 @@
   let editing = $state(false);
   let inputValue = $state('');
   let hasError = $state(false);
+  let isDragging = false;
 
   // When not editing, sync input value with color (e.g. when sliders change)
   $effect(() => {
@@ -80,6 +82,12 @@
         break;
     }
   };
+  const switchColorsT = () => {
+    switchColors();
+  };
+  const makeDropable = (event: DragEvent) => {
+    if (!isDragging) event.preventDefault();
+  };
 </script>
 
 <div
@@ -88,7 +96,16 @@
   data-column="tool"
   data-needs-changes={hasError}
 >
-  <div class="swatch {type}"></div>
+  <div
+    role="complementary"
+    class="swatch {type}"
+    draggable="true"
+    ondrop={switchColorsT}
+    ondragenter={makeDropable}
+    ondragover={makeDropable}
+    ondragstart={() => (isDragging = true)}
+    ondragend={() => (isDragging = false)}
+  ></div>
   <label for="{type}-color" data-label>
     {displayType} Color
   </label>

diff --git a/src/lib/components/colors/index.svelte b/src/lib/components/colors/index.svelte
@@ -3,7 +3,7 @@
   import Header from '$lib/components/colors/Header.svelte';
   import Sliders from '$lib/components/colors/Sliders.svelte';
   import SupportWarning from '$lib/components/colors/SupportWarning.svelte';
-  import { bg, fg, format } from '$lib/stores';
+  import { bg, fg, format, switchColors } from '$lib/stores';
 </script>
 
 <h2 class="sr-only">Check the contrast ratio between two colors</h2>
@@ -13,7 +13,7 @@
 <form data-form="contrast-checker" data-layout="color-form">
   <Header type="bg" color={bg} format={$format} />
   <Sliders type="bg" color={bg} format={$format} />
-
+  <button type="button" on:click={switchColors}>Switch colors</button>
   <Header type="fg" color={fg} format={$format} />
   <Sliders type="fg" color={fg} format={$format} />
 </form>

diff --git a/src/lib/stores.ts b/src/lib/stores.ts
@@ -10,7 +10,7 @@ import {
   REC_2020,
   sRGB,
 } from 'colorjs.io/fn';
-import { writable } from 'svelte/store';
+import { get, writable } from 'svelte/store';
 
 // eslint-disable-next-line import/no-unresolved
 import { browser, dev } from '$app/environment';
@@ -57,6 +57,12 @@ export const reset = () => {
   fg.set(INITIAL_FG);
 };
 
+export const switchColors = () => {
+  const temp = get(bg);
+  bg.set(get(fg));
+  fg.set(temp);
+};
+
 /* c8 ignore next 5 */
 if (browser && dev) {
   bg.subscribe(($bg) => (window.bg = $bg));