From cf0ecbfd4a5b7a0479c97f8608f7867be5d00e56 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Fri, 24 Sep 2021 09:39:49 +0300
Subject: [PATCH] support EyeDropper API in color picker

Chrome 95+
https://wicg.github.io/eyedropper-api/
---
 images/eyedropper/16px.png  | Bin 0 -> 275 bytes
 images/eyedropper/32px.png  | Bin 0 -> 376 bytes
 images/eyedropper/README.md |   3 +++
 js/color/color-picker.css   |   9 +++++++++
 js/color/color-picker.js    |   6 ++++++
 5 files changed, 18 insertions(+)
 create mode 100644 images/eyedropper/16px.png
 create mode 100644 images/eyedropper/32px.png
 create mode 100644 images/eyedropper/README.md

diff --git a/images/eyedropper/16px.png b/images/eyedropper/16px.png
new file mode 100644
index 0000000000000000000000000000000000000000..bcd33177e6dc2380522d758141ef12da129c1f14
GIT binary patch
literal 275
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!73?$#)eFPF<Nq6*hWMJ6X&;2Kn7072S4sv&5
zSa(k5C6Hqf;1lBNlUb;ttEH-?E~g|9WXP*1s%WYKxj;4?DXA&LMNHMM8w2(7mjw9*
zGaRzxJ0oG}zozc_XVs!9x|J{g1EtbDT^vI=t|uojG<&gf<bM1wJmcBN|Nn(ujI;m#
z|1W#w#IOJV>zO+g|Ns9l&MdGPNG(;Eb@uoF|4ahPh8h3gGfZgE*xVu<p>RMTN2gzV
wv%rmzb4(o!&7Ql2kL>H7#IDd2!OX$Sa4AFfjICsEJ<vu5Pgg&ebxsLQ00DAZ!~g&Q

literal 0
HcmV?d00001

diff --git a/images/eyedropper/32px.png b/images/eyedropper/32px.png
new file mode 100644
index 0000000000000000000000000000000000000000..de1c9cf250816596af84d2b6aed5dff1964514bf
GIT binary patch
literal 376
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnF3?v&v(vJfvmUKs7M+SzC{oH>NS%G}U;vjb?
zhIQv;UIIA=0X`wFKAD9Yx?04e_$%A>fO`2$g8YIR;=W(v6xw~r-C{}YyGb(UEplQ&
zsneb=jv*T7lM@cGADL<t_#^TE|N2=CN1ogK2LcuqMn#4H`<a@~|CRSmu#H&2kk=qG
z<9|HEsr1GZ|NpZFA7Fd<-@K9Yg!7MjxdSZkoLTA)ti8c6c!NQFMt_zHv$tJ@0;}GG
zZx`iU*}eB2NKOf76gBw3IJKtCK_emI#sB~J`8*k!+l$_3?P#i6(4-dJvj6TuE+&CI
zhwuZxr9&B+{h3xVwf*2;!6osH+kit+`$0%@%s<&k#?5K}majhX@p!SDA%m)uB)|WG
c*$fg4xuxZwm+V$s4)hj-r>mdKI;Vst0DumI3IG5A

literal 0
HcmV?d00001

diff --git a/images/eyedropper/README.md b/images/eyedropper/README.md
new file mode 100644
index 00000000..ff9e1d59
--- /dev/null
+++ b/images/eyedropper/README.md
@@ -0,0 +1,3 @@
+Author: DesignContest
+License: https://creativecommons.org/licenses/by/4.0/
+Source: https://iconarchive.com/show/outline-icons-by-designcontest/Eyedropper-icon.html
\ No newline at end of file
diff --git a/js/color/color-picker.css b/js/color/color-picker.css
index aa36e27a..b1cf448e 100644
--- a/js/color/color-picker.css
+++ b/js/color/color-picker.css
@@ -377,6 +377,15 @@
   color: var(--label-color-hover);
 }
 
+.colorpicker-dropper {
+  position: absolute;
+  right: 7px;
+  bottom: 4px;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
 .colorpicker-palette:not(:empty) {
   --swatch-size: 16px;
   margin: 0 var(--margin) var(--margin);
diff --git a/js/color/color-picker.js b/js/color/color-picker.js
index f4b9e89f..53a8d2c6 100644
--- a/js/color/color-picker.js
+++ b/js/color/color-picker.js
@@ -167,6 +167,12 @@
         $('format-change', [
           $formatChangeButton = $('format-change-button', {onclick: setFromFormatElement}, '↔'),
         ]),
+        window.EyeDropper &&
+        $('dropper', {
+          tag: 'img',
+          onclick: () => new window.EyeDropper().open().then(r => setFromColor(r.sRGBHex), () => 0),
+          srcset: '/images/eyedropper/16px.png, /images/eyedropper/32px.png 2x',
+        }),
       ]),
       $palette = $('palette', {
         onclick: onPaletteClicked,