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 0000000..93bdb3c Binary files /dev/null and b/transparent.png differ