Rozwiazanie dla wielu pojawiajacych sie okienek

Question

Witam, w moim projekcie jest pewna popularna funkcja jak wyskakujace okienka, w tych okienkach, a raczej jednym dotychczas, mozna bylo wybrac interesujaca nas opcje.

Problem sie pojawil gdy wyskoczylo wiecej niz jedno, poniewaz sluzyl im obiekt globalny do ktorego bylo przypisana obecna informacja, tak tez po dlugim mysleniu kazda informacje stworzylem oddzielnie jako obiekt co umozliwilo trzymanie w pamieci wiecej niz jednego komunikatu.

 

Rozwiazanie wyglada tak:

 

let warn = [];




function makeAlert(ob) { // konstruktor
	
this.info = ob.info 
	
	const el = document.createElement('div');  // tworzenie diva z tekstem
    el.innerText = this.info;
	el.className="divEl";
    document.body.appendChild(el);

this.chooseDOM = []; // tworzenie pustej tablicy na przyciski
this.DOMdiv = el; // dodawanie glownego diva jako wlasciwosc naszego obiektu
warn.push(this); // wepchniecie naszego obiektu do tablicy z ostrzezeniami/opcjami
	
}



makeAlert.prototype.addButton=function (ob) {
	
	const el = document.createElement('button');
    el.innerText = ob.text;
	el.type="button";
	
	this.chooseDOM.push({name:ob.text,element:el}); // dodanie do wlascowosci obiektu z elementami przycisku
	
	el.addEventListener("click",e=>{
		
		ob.doit(); // wykonanie pyrzpisanej akcji
		
		warn = warn.filter(e=>e!=this); // kasowanie obiektu z tablicy
		
		this.DOMdiv.remove(); // kasowanie obiektu z DOM
		delete this; // kasowanie obiektu z pamieci(?) pomoc dla Garbage collectora? :p
		;})
	
	
    this.DOMdiv.appendChild(el);
	
	;}

A tutaj przykladowe stworzenie dwoch komunikatow:

document.addEventListener("DOMContentLoaded", function(event) {
	
	// some warn

let x = new makeAlert({info:"Napotykasz dziwna droge, idz w: "});
x.addButton({text:"lewo",doit:function(){alert("Poszles w lewo");}});
x.addButton({text:"prawo",doit:function(){alert("Poszles w prawo");}});

let y = new makeAlert({info:"Spotykasz tajemnicza skrzynie"});
y.addButton({text:"Otworz",doit:function(){alert("Zdobylas 5 sztuk zlota");}});
y.addButton({text:"Zostaw",doit:function(){alert("Ruszyles dalej w droge");}});
	
  });

i troche css

.divEl{
display:inline-block;
border:1px black solid;
padding:2px;
margin:2px;
}

 

Chcialbym prosic o ocene tego rozwiazania i kodu, oraz co mozna zrobic aby to udoskonalic, bede bardzo wdzieczny.

Pozdrawiam :)