From 7d325ddccc05d745f7f9dbaf626dc2571a0942e5 Mon Sep 17 00:00:00 2001 From: Joshua Sigona Date: Sat, 13 Jun 2020 06:37:26 +0900 Subject: [PATCH] Custom Color support --- canvas.js | 43 +++++++++++++++++++++++++++++++++++++++++-- index.html | 8 ++++++-- style.css | 14 ++++++++++++++ transparent.png | Bin 0 -> 6004 bytes 4 files changed, 61 insertions(+), 4 deletions(-) create mode 100644 transparent.png diff --git a/canvas.js b/canvas.js index 7ef5eae..95fbe57 100644 --- a/canvas.js +++ b/canvas.js @@ -5,6 +5,7 @@ var unselectedColorBorder = "2px black solid"; document.addEventListener("DOMContentLoaded",()=>{ var canvas = document.getElementsByClassName("canvas")[0]; + var toolbar = document.getElementsByClassName("toolbar")[0]; var MouseListener = (e)=>{ e.preventDefault(); if (mouseState>=0) { @@ -40,6 +41,7 @@ document.addEventListener("DOMContentLoaded",()=>{ var row = document.createElement("tr"); for (var j=0;j{ e.target.style.border=selectedColorBorder; selectedColor = e.target.style.background; }) - canvas.appendChild(dot); + toolbar.appendChild(dot); } + var customColorContainer = document.createElement("div"); + customColorContainer.classList.add("toolbar") + var customColorToolbar=false; + var dot = document.createElement("img") + dot.classList.add("dot") + dot.src="colorwheel.png" + customColorContainer.append(dot); + toolbar.appendChild(customColorContainer); + customColorContainer.addEventListener("click",(e)=>{ + if (customColorToolbar) { + var otherDots = document.getElementsByClassName("dot"); + for (var i=0;i{ + dot.style.background=e.target.value + selectedColor=e.target.value + }) + dot.src="transparent.png"; + dot.style.background=customColorInput.value; + customColorToolbar=true; + } + }) } - generateTable(20,20); + generateTable(30,30); canvas.appendChild(document.createElement("br")) generateColors(false); + + document.addEventListener("scroll",()=>{ + toolbar.style.position="absolute"; + toolbar.style.left=window.scrollX+"px"; + toolbar.style.bottom=-window.scrollY+"px"; + }) }) \ No newline at end of file diff --git a/index.html b/index.html index 9090b43..c921369 100644 --- a/index.html +++ b/index.html @@ -8,8 +8,12 @@ -
- +
+
+ +
+
+
\ No newline at end of file diff --git a/style.css b/style.css index a98b179..6f40131 100644 --- a/style.css +++ b/style.css @@ -9,6 +9,20 @@ th{ width:16px; height:16px; } +.container{ + text-align: center; +} +.canvas{ + display:inline-block; + background-color: #EEEEFF; + border-radius: 10%; + padding: 48px; +} +.customColor{ + vertical-align: middle; + position:relative; + top:-8px; +} .dot{ height: 25px; width: 25px; diff --git a/transparent.png b/transparent.png new file mode 100644 index 0000000000000000000000000000000000000000..93bdb3c72885202659b54688736ece08b067cbc8 GIT binary patch literal 6004 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%0A0000PbVXQnLvL+uWo~o;Lvm$dbY)~9 zcWHEJAV*0}P*;Ht7XSbU7D+@wR9M5MmrJN!R~g5DYpwl$oO|xMN5Zuvsi}%-Xe>#k z#V8fgaXPV+iW3W>I1xo~BnsM$oEdyII1tnbD$$99ln|=uq!nyhn<_?cOigkh=iGDl z`>`CXb?-g5O=?;<{5hM$W_`c!|9$HvwAQ?%r<+6Hf&iooGJZ$HIQRTzb`x&=31%-q z^E|kJg|6d*OI z4rBwep`)UuqGrZieUbI)(g=t_M5e=KWB^nE$}<4YB0vkW zrWX}01vNP}4keNT$yEJ<=eschP%)?oRA>MkTLy*6 zUbSdh+3bC4TuKxrf&$3V-0;3joIS*2>NHZyHvrtc0ndKZWT`{YF^CxC0Avc%LO2m9 zf3FV|w*DhYBzfmJfkP0FISDxt837pq>vD}t@&aw!E&$ADaQ+;09&|qRp>cu8 zx{z8Ymi8dj3aAlCBP~X>EK@V2Vu_NJf|#6`jEJ0&IX-hdo(q1;)@*YD;Kdi<*1w^5 zq4z-hdjLB}%Avnw6j0}WWrejFM5;X%GJfR?_AS5Rs!zaUIj?0?!H(u)gjMmx$ zTzLsv2U-_8*ErF8wiKaNY#~xm7D5_nxf494BB3OvAleO{+u#|lmBSTzg{En26JEIj zt%6QL=j=Jrd!Riauxr82luXRDR31p^scCSi(Ui25RFwGS_~dxxxK<81iVVrC?p3O? zvH(}FLMxz^7Q(9EfpHgLd=PqcBQCLlsJ?N|IcJW+q4!y?KGZmr=k7b zDZ{>ZZ?{i$BWR?cRWY4(>G0|B=<(=r7v!PwtpYR=PCrCzZ2bQf*#1ez4;#Hfs+h#(KawL4<(($<2~0?b;-C1e3)5#$jRflKMR zRBlWym#M{=mTg)lbWC_4a|sRv7U1Czf?k4V0Cfsg0%Zb40)7mB1g_l;wTEscbqS>d zIWTWw))^P(5zJ%AV#8bniqcQ0yog#2X~YVCKjmmX!}omyAP=q5efkvYXV;)gp-iDj zO>oz4Kq4^B**Y|pp!6VD7NCP^1DSPU7Q-yH5HS=Xl!2u3LmDsO^rYe7z(Xlz0E7^9 zPksXRlkug54meI7RG_?2DTd03wa3h#JDgYK$aSa zDuJi;O^y#^!Z3UTfKoJ{e;oD4%g9#)v*e1%Y)YLEtxH!)lf4IpYa0*9deaBnwe1Dp zSf8bk%^+KXVgL{2IZv$oht<^&AcT1HiO7HVGTE7vM4$a9a?=LyeX}_=&TjUFt$!wM z4`|zn4NPh%96NDlkk28{;6PRLg_WxuJ#v^J2=06&6G9N3xR2RcNWNU4uG3M%gP zc3jsr)9IA0o7+sU2`0A`^FmN+4Sq|qQgPtEn$b$aXfz^C(|zav{~KVjG+o#2N^6Y} i!mMhJgHq~kjrU*nJ7EstNav;i0000