<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/colorjoe@4.1.1/css/colorjoe.css">
<script src="https://cdn.jsdelivr.net/npm/colorjoe@4.1.1/dist/colorjoe.min.js"></script>
<style>
.ausblenden{
display:none;
}
#farbuswahl{
font-weight:900;
color:white;
}
table th{
background:lightgrey;
}
table, tr, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h1>Pattern Creator</h1>
<main class="Pattern-Creator">
<div id="Pattern-Table">
</div>
<div class="settings">
<form>
<label for="h-stitches">Vertical Stitches:</label>
<input type="number" min="0" id="v-stitches" name="v-stitches"><br><br>
<label for="v-stitches">Horizontal Stitches:</label>
<input type="number" min="0" id="h-stitches" name="h-stitches"><br><br><label> Farbauswahl</label>
<input type="text" id="farbuswahl" placeholder="auswahl...">
</form>
<div id="colormodal" class="container ausblenden">
<div class="colorjoe"></div>
</div>
<script type="text/javascript" src="Untitled-2.js"></script>
</main>
<script>
let elementsArray = document.querySelectorAll('input[type="number"]');
elementsArray.forEach(function(elem) {
elem.addEventListener("change", function() {
document.getElementById("Pattern-Table").innerHTML=" ";
let row = document.getElementById("h-stitches").value;
let col = document.getElementById("v-stitches").value;
let table = document.createElement('table');
for(i=0; i<row; i++) {
let tr = document.createElement('tr');
for(j=0; j<col; j++) {
let td = document.createElement('td');
td.innerHTML = " ";
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById("Pattern-Table").appendChild(table);
});
});
class ColorPicker {
constructor(root){
this.root = root;
this.colorjoe = colorjoe.rgb(this.root.querySelector('.colorjoe'));
this.selectedColor = null;
this.savedColors = this.getSavedColors();
this.colorjoe.show();
this.setSelectedColor('#009578');
this.colorjoe.on('change',color => {
this.setSelectedColor(color.hex(),true);
});
this.root.querySelectorAll('.saved-color').forEach((element,index) => {
this.showSavedColor(element,this.savedColors[index]);
element.addEventListener('mouseup',event => {
if(event.button == 1){
this.saveColor(this.selectedColor,index);
this.showSavedColor(element,this.selectedColor);
} this.setSelectedColor(element.dataset.color);
});
});
}
setSelectedColor(color,skipCjUpdate = false){
this.selectedColor = color;
document.querySelector('#farbuswahl').value = color;
document.querySelector('#farbuswahl').style.backgroundColor = color;
let fa=document.getElementById('farbuswahl').value;
// this.style.backgroundColor = fa;
let vst=document.getElementById('v-stitches').value;
let hst=document.getElementById('h-stitches').value;
x++;
if(x==1){
document.getElementById('Pattern-Table').innerHTML=`<table>
<tr><th>Vertical Stitches</th><th>Horizontal Stitches</th><th>Farbauswahl</th></tr>
<tbody id="mehr">
</tbody>
</table>`;
}else if(x>1){
document.getElementById('mehr').innerHTML+=`<tr><td>${vst}</td><td>${hst}</td><td style="background:${fa}">${fa}</td></tr>`;
}
if(!skipCjUpdate){
this.colorjoe.set(color);
}
}
getSavedColors(){
const saved = JSON.parse(localStorage.getItem('colorpicker-saved') || '[]');
return new Array(5).fill('#ffffff').map((defaultColor,index) => {
return saved[index] || defaultColor;
});
}
showSavedColor(element,color){
element.style.backgroundColor = color;
element.dataset.color = color;
}
saveColor(color,index){
this.savedColors[index] = color;
localStorage.setItem('colorpicker-saved',JSON.stringify(this.savedColors));
}
}
const colorPicker = new ColorPicker(document.querySelector('.container'));
document.querySelector('#farbuswahl').addEventListener('click',function(){
let mod=document.querySelector('#colormodal');
mod.classList.toggle('ausblenden');
});
let Cells = document.querySelectorAll('td');
var x=0;
Cells.forEach(function(elem) {
elem.addEventListener("click", function() {
}
)
});
</script>
</body>
</html>