From 0619a74fee4117dcff413b0a17a9db6ddffda57f Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Wed, 11 Dec 2024 17:15:19 +0000 Subject: [PATCH 01/11] Add button and drag to swap colors --- src/lib/components/colors/Header.svelte | 19 ++++++++++++++++++- src/lib/components/colors/index.svelte | 4 ++-- src/lib/stores.ts | 8 +++++++- 3 files changed, 27 insertions(+), 4 deletions(-) diff --git a/src/lib/components/colors/Header.svelte b/src/lib/components/colors/Header.svelte index adb627e6..2af2bf35 100644 --- 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(); + };
-
+ diff --git a/src/lib/components/colors/index.svelte b/src/lib/components/colors/index.svelte index ee82c135..edefc17b 100644 --- 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';

Check the contrast ratio between two colors

@@ -13,7 +13,7 @@
- +
diff --git a/src/lib/stores.ts b/src/lib/stores.ts index cc5773cd..2928b2a5 100644 --- 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)); From 6b88aa548ae0525ee682c00daa9ea5af48ba985f Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Wed, 11 Dec 2024 21:36:21 +0000 Subject: [PATCH 02/11] Start styling switch button --- src/lib/components/colors/SwitchButton.svelte | 9 +++++++++ src/lib/components/colors/index.svelte | 6 ++++-- src/lib/components/util/Icon.svelte | 2 ++ src/lib/icons/Switch.svelte | 17 +++++++++++++++++ src/sass/initial/_layout.scss | 4 ++-- 5 files changed, 34 insertions(+), 4 deletions(-) create mode 100644 src/lib/components/colors/SwitchButton.svelte create mode 100755 src/lib/icons/Switch.svelte diff --git a/src/lib/components/colors/SwitchButton.svelte b/src/lib/components/colors/SwitchButton.svelte new file mode 100644 index 00000000..fd531ed4 --- /dev/null +++ b/src/lib/components/colors/SwitchButton.svelte @@ -0,0 +1,9 @@ + + + diff --git a/src/lib/components/colors/index.svelte b/src/lib/components/colors/index.svelte index edefc17b..f952e194 100644 --- a/src/lib/components/colors/index.svelte +++ b/src/lib/components/colors/index.svelte @@ -3,7 +3,9 @@ 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, switchColors } from '$lib/stores'; + import { bg, fg, format } from '$lib/stores'; + + import SwitchButton from './SwitchButton.svelte';

Check the contrast ratio between two colors

@@ -13,7 +15,7 @@
- +
diff --git a/src/lib/components/util/Icon.svelte b/src/lib/components/util/Icon.svelte index 659ed6d5..9e43e609 100644 --- a/src/lib/components/util/Icon.svelte +++ b/src/lib/components/util/Icon.svelte @@ -12,6 +12,7 @@ import OddBird from '$lib/icons/OddBird.svelte'; import Twitter from '$lib/icons/Twitter.svelte'; import Warning from '$lib/icons/Warning.svelte'; + import Switch from '$src/lib/icons/Switch.svelte'; const icons: Record = { check: Check, @@ -25,6 +26,7 @@ oddbird: OddBird, linkedin: LinkedIn, mastodon: Mastodon, + switch: Switch, }; interface Props { diff --git a/src/lib/icons/Switch.svelte b/src/lib/icons/Switch.svelte new file mode 100755 index 00000000..dbfb9e12 --- /dev/null +++ b/src/lib/icons/Switch.svelte @@ -0,0 +1,17 @@ + + + + + diff --git a/src/sass/initial/_layout.scss b/src/sass/initial/_layout.scss index c8517246..8efaccd4 100644 --- a/src/sass/initial/_layout.scss +++ b/src/sass/initial/_layout.scss @@ -81,8 +81,8 @@ body { @include config.above('sm-page-break') { display: grid; grid-template: - 'bginput fginput' auto - 'bgslide fgslide' auto / 1fr 1fr; + 'bginput switch fginput' auto + 'bgslide . fgslide' auto / 1fr min-content 1fr; } } From 1461f17d6fd74aa8610526821635b8a0c9273f9b Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Tue, 28 Jan 2025 14:43:40 -0500 Subject: [PATCH 03/11] Better handling of dragging --- src/lib/components/colors/Header.svelte | 30 ++++++++++++++++++++----- 1 file changed, 25 insertions(+), 5 deletions(-) diff --git a/src/lib/components/colors/Header.svelte b/src/lib/components/colors/Header.svelte index 2af2bf35..5e650d72 100644 --- a/src/lib/components/colors/Header.svelte +++ b/src/lib/components/colors/Header.svelte @@ -13,6 +13,8 @@ format: ColorFormatId; } + const CUSTOM_MIMETYPE = 'text/odd'; + let { type, color, format }: Props = $props(); let targetSpace = $derived(getSpaceFromFormatId(format)); @@ -82,11 +84,29 @@ break; } }; - const switchColorsT = () => { - switchColors(); + const onDragStart = (event: DragEvent) => { + isDragging = true; + if (!event.dataTransfer) return; + event.dataTransfer.clearData(); + event.dataTransfer.setData(CUSTOM_MIMETYPE, type); + }; + + const onDrop = (event: DragEvent | undefined) => { + const droppedType = event?.dataTransfer?.getData(CUSTOM_MIMETYPE); + const dragIsFromOther = + type === 'fg' ? droppedType === 'bg' : droppedType === 'fg'; + if (dragIsFromOther) { + switchColors(); + } }; const makeDropable = (event: DragEvent) => { - if (!isDragging) event.preventDefault(); + // DataTransfer values are not available on dragover, but because the types + // of items is available, we can use a custom mimetype to check if a swatch + // is the drag target. + if (!isDragging && event?.dataTransfer?.types.includes(CUSTOM_MIMETYPE)) { + // Cancelling the event signals that the dragged item can be dropped here. + event.preventDefault(); + } }; @@ -100,10 +120,10 @@ role="complementary" class="swatch {type}" draggable="true" - ondrop={switchColorsT} + ondrop={onDrop} ondragenter={makeDropable} ondragover={makeDropable} - ondragstart={() => (isDragging = true)} + ondragstart={onDragStart} ondragend={() => (isDragging = false)} >