/*
Ze swojego doświadczenia myślę, że najlepiej byłoby gdybyś znalazł jakąś bibliotekę do tworzenia klas w JS która Ci najlepiej odpowiada. Ja używam tej dołączonej do prototype.js, ponieważ jest zwięzła i prosta.
Jako, że trudno napisać gotowiec :) , mogę Ci podać tylko pewne schematy myślenia.
Ważne, żebyś wyobraził sobie wszystko co chcesz otrzymać i rozbił temat, nieco abstrakcyjny na drobniejsze elementy.
Idąc tokiem myślenia z mojego poprzedniego postu:
Spróbuj zrobić tak, żeby w momencie konkretyzacji klasy kreatora ankiety konieczne
było tylko podanie elementu w którym pomieści się cały interfejs użytkownika i
wszystkie elementy z których będzie on zbudowany:
var kreatorAnkiety = new KreatorAnkiety("id_diva_z_kreatorem")
Skoro chcesz utworzyć "kreator ankiet" możesz zacząć od stworzenia konstruktora kreatora ankiety:
W konstruktorze możesz utworzyć wszystkie pola klasy, które będą potrzebne do jego działania czyli:
- pole z przyciskiem dodawania pytania (który będzie węzłem DOM) z przypisanym zdarzeniem, np "dodajPytanieButton"
- pole z ilością pytań, które w danej chwili są w kreatorze (między innymi po to aby wiedzieć jaki
numer będzie miało następne pytanie.
na przykład:
*/
/*
* Klasa kreatora ankiety. Na stronie może znajdować się więcej takich kreatorów.
*
*/
var KreatorAnkiety = Class.create({
initialize: function (selektorElementu) {
/*
* Węzeł DOM w którym będą się znajdować pytania
*/
this.$kontenerKreatora = $("<div>")
/*
* Pole z tablicą, która przetrzymuje obiekty klasy Pytanie
*/
this.pytania = [];
/*
* Wrzucanie kontenera do węzła o selektorze podanym w konstruktorze
*/
$(selektorElementu).append(this.$kontenerKreatora);
/*
* Utworzenie i dodanie do kontenera - przycisku odpowiedzialnego za
* dodawanie pytań w kreatorze
*/
this.$buttonDodajPytanie = $("<input type='button' value='Dodaj pytanie'>");
this.$kontenerKreatora.append(this.$buttonDodajPytanie)
/*
* Ilość pytań, jako że jesteśmy w konstruktorze to przypisujemy tej właściwości
* (lub polu - słów "właściwość" i "pole" używam zamiennie) wartość zerową
*/
this.iloscPytan = 0;
/*
* Uruchomienie przycisku z dodawaniem pytań
*/
this.uruchomDodawaniePytan();
},
uruchomDodawaniePytan: function () {
/*
* Przy kliknięciu w button dodający pytanie wykonuje się funkcja dodajPytanie
*/
this.$buttonDodajPytanie.click(this.dodajPytanie.bind(this))
},
dodajPytanie: function () {
/*
* Dodaj 1 do ilości pytań w tym kreatorze ankiety,
* dla jasności przypisz tę wartość do zmiennej kolejnePytanie
*/
this.iloscPytan += 1;
var kolejnePytanie = this.iloscPytan;
/*
* Dialog pytający o treść pytania i umożliwiający wpisanie jego treści
*/
var tresc = prompt("Prosze podać treść pytania");
/*
* Sedno funkcji dodajPytanie - utworzenie nowej instancji (konkretyzacja) klasy
* Pytanie.
* Obiekt nowePytanie zostaje skonstruowany z trzema parametrami:
* 1. this - ten kreator ankiety, obiekt typu Pytanie musi wiedzieć do którego
* kreatora ankiety należy
* 2. kolejnePytanie - czyli numer właśnie tworzonego pytania
* 3. tresc - mówi samo za siebie
*/
var nowePytanie = new Pytanie(this, kolejnePytanie, tresc)
/*
* Wyswietlenie pytania
*/
nowePytanie.wyswietl();
this.pytania.push(nowePytanie);
this.przenumeruj();
},
usunPytanie: function (pytanie) {
/*
* Odwrotność tego co dzieje się przy dodawaniu pytania. Tutaj
* przesyłany jest obiekt klasy Pytanie (w argumencie "pytanie")
*/
this.iloscPytan -=1;
/*
* Poszukiwanie pytania które ma być usunięte z kreatora
*/
var indexPytania = this.pytania.indexOf(pytanie);
/*
* Usunięcie podanego pytania z tablicy pytań tego kreatora ankiety
*/
this.pytania.splice(indexPytania,1);
this.przenumeruj();
},
przenumeruj: function () {
// Tutaj kod przenumerujący pytania tak aby miały prawidłowe numery.
// Do napisania we własnym zakresie :)
},
pobierzKontenerKreatora: function () {
return this.$kontenerKreatora;
}
})
var Pytanie = Class.create({
initialize: function (kreatorAnkiety, numer, tresc) {
/*
* Kreator ankiety, w którym znajduje się pytanie,
*/
this.kreatorAnkiety = kreatorAnkiety
this.utworzElementy();
this.uruchomUsuwanie();
/*
* Przekazanie wykonania konstruktora do metod
*/
this.ustawNumer(numer);
this.ustawTresc(tresc)
},
utworzElementy: function () {
this.$kontenerPytania = $("<div></div>");
this.$numer = $("<span></span>");
this.$tresc = $("<span></span>");
this.$buttonUsunPytanie = $("<button type='button' value='Usun to pytanie'>")
this.$kontenerPytania.append(this.$numer);
this.$kontenerPytania.append(this.$tresc);
this.$kontenerPytania.append(this.$buttonUsunPytanie);
},
uruchomUsuwanie: function () {
this.$buttonUsunPytanie.click(this.usun.bind(this));
},
wyswietl: function () {
var $kontenerKreatora = this.kreatorAnkiety.pobierzKontenerKreatora();
$kontenerKreatora.append(this.$kontenerPytania);
},
ustawNumer: function (numer) {
this.$numer.html(numer + ".")
},
ustawTresc: function (tresc) {
this.$tresc.html(tresc + ".")
},
usun: function () {
/*
* Pytanie musi się usunąć z kreatora ankiety
*/
this.kreatorAnkiety.usunPytanie(this);
this.$kontenerPytania.remove();
}
})
/*
Zauważ że to tylko fragment całości i do klasy KreatorAnkiety trzeba jeszcze dopisać
metodę "przenumeruj".
W chwili obecnej dodając dwa pytania i usuwając pytanie numer 1. Po ponownym dodaniu
pytania - powstają dwa pytania o numerze '2'.
Dlatego wewnątrz klasy KreatorAnkiety znajduje się pole "pytania", które
jest tablicą pytań. Dzięki tej tablicy będziesz w stanie przenumerować pytania po
dodaniu lub usunięciu pytania.
*/
