75 lines
2.2 KiB
JavaScript
75 lines
2.2 KiB
JavaScript
// Obliczanie
|
|
class Obliczanie extends HTMLElement {
|
|
elementy = {};
|
|
dzialanie = "";
|
|
constructor() {
|
|
super();
|
|
this.shadow = this.attachShadow({ mode: "open" });
|
|
}
|
|
|
|
wylicz() {
|
|
let operacja = this.dzialanie;
|
|
let pelne = true;
|
|
for (const znak in this.elementy)
|
|
{
|
|
const element = this.shadow.getElementById(znak);
|
|
if (element == null || element.value == "") {
|
|
pelne = false;
|
|
continue;
|
|
}
|
|
operacja = operacja.replaceAll(znak, element == null ? "" : element.value);
|
|
}
|
|
if (!pelne) {
|
|
this.wynik.innerText = operacja;
|
|
return;
|
|
}
|
|
try {
|
|
this.wynik.innerText = eval(operacja);
|
|
} catch {
|
|
this.wynik.innerText = "Nieprawidłowa operacja";
|
|
}
|
|
}
|
|
|
|
connectedCallback() {
|
|
const styl = document.createElement("style");
|
|
styl.textContent = `
|
|
@import url('/assets/css/baza.css');
|
|
`;
|
|
|
|
this.dzialanie = this.getAttribute("dzialanie") ?? "";
|
|
if (this.dzialanie == "") {
|
|
this.shadow.innerHTML = "<h1>Nieustawione działanie!</h1>";
|
|
return;
|
|
}
|
|
|
|
let html = this.dzialanie;
|
|
const matche = this.dzialanie.match(/[a-z]/gi);
|
|
if (matche != null) {
|
|
matche.forEach(znak => {
|
|
if (!this.elementy[znak]) {
|
|
this.elementy[znak] = true;
|
|
const element = document.createElement("input");
|
|
element.id = znak;
|
|
html = html.replaceAll(znak, element.outerHTML);
|
|
}
|
|
})
|
|
}
|
|
|
|
this.wynik = document.createElement("span");
|
|
this.shadow.innerHTML = html + " = ";
|
|
this.shadow.appendChild(this.wynik);
|
|
this.shadow.appendChild(styl);
|
|
|
|
for (const child of this.shadow.children) {
|
|
if (child.id != "") {
|
|
child.type = "number";
|
|
child.oninput = () => {
|
|
this.wylicz();
|
|
}
|
|
}
|
|
}
|
|
this.wylicz();
|
|
}
|
|
};
|
|
|
|
customElements.define("obliczanie-comp", Obliczanie); |