sigonasr2/pixel-art-maker
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Custom Color support

Browse Source
This commit is contained in:
Joshua Sigona 2020-06-13 06:37:26 +09:00
parent 8d1614dcb0
commit 7d325ddccc
4 changed files with 61 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
canvas.js
View File

@ -5,6 +5,7 @@ var unselectedColorBorder = "2px black solid";
document.addEventListener("DOMContentLoaded",()=>{ document.addEventListener("DOMContentLoaded",()=>{
var canvas = document.getElementsByClassName("canvas")[0]; var canvas = document.getElementsByClassName("canvas")[0];
var toolbar = document.getElementsByClassName("toolbar")[0];
var MouseListener = (e)=>{ var MouseListener = (e)=>{
e.preventDefault(); e.preventDefault();
if (mouseState>=0) { if (mouseState>=0) {
@ -40,6 +41,7 @@ document.addEventListener("DOMContentLoaded",()=>{
var row = document.createElement("tr"); var row = document.createElement("tr");
for (var j=0;j<columns;j++) { for (var j=0;j<columns;j++) {
var col = document.createElement("th"); var col = document.createElement("th");
col.style.background="white";
row.appendChild(col); row.appendChild(col);
} }
table.appendChild(row); table.appendChild(row);
@ -71,11 +73,48 @@ document.addEventListener("DOMContentLoaded",()=>{
e.target.style.border=selectedColorBorder; e.target.style.border=selectedColorBorder;
selectedColor = e.target.style.background; 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<otherDots.length;i++) {
var dot2 = otherDots[i];
dot2.style.border=unselectedColorBorder;
}
dot.style.border=selectedColorBorder;
} else {
var customColorInput = document.createElement("input");
customColorInput.type="color"
customColorInput.value="#222222"
customColorInput.classList.add("customColor")
customColorContainer.appendChild(customColorInput);
customColorInput.addEventListener("change",(e)=>{
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")) canvas.appendChild(document.createElement("br"))
generateColors(false); generateColors(false);
document.addEventListener("scroll",()=>{
toolbar.style.position="absolute";
toolbar.style.left=window.scrollX+"px";
toolbar.style.bottom=-window.scrollY+"px";
})
}) })

6
index.html
View File

@ -8,8 +8,12 @@
</head> </head>
<body> <body>
<div class="canvas"> <div class="container">
<div class="canvas">
</div>
</div>
<div class="toolbar">
</div> </div>
</body> </body>
</html> </html>

14
style.css
View File

@ -9,6 +9,20 @@ th{
width:16px; width:16px;
height: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{ .dot{
height: 25px; height: 25px;
width: 25px; width: 25px;

BIN
transparent.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB