Dziudek's jogger

Od pliku group.js zacznę opis pluginów frameworka mootools. W pliku tym znajdziemy jedną klasę - Group, z jedną tylko metodą - addEvent. Jakie jest przeznaczenie tej klasy ? Służy ona do wywoływania funkcji w momencie, gdy wszystkie podane jako argumenty obiekty klas wywołają określone zdarzenie.

Jeżeli na przykład ładujemy kilka obrazków korzystając z klasy Asset to możemy sprawić, że po załadowaniu wszystkich grafik zostanie wywołana określona funkcja. Oczywiście to tylko przykład, bo o wiele lepiej w tym wypadku skorzystać z metody images klasy Asset. O wiele lepiej klasa Group sprawdzi się, że tak to ujmę "rozproszonych" sytuacjach, czyli nie takich gdzie kilka operacji wykonuje się jedna po drugiej, ale tam gdzie pewne zdarzenia występują w różnych momentach działania skryptu, a muszą po wykonaniu całości dać znać, że wszystkie zostały wykonane.

Składnia tworzenia obiektu klasy Group wygląda następująco:

var grupa = new Group(obiekt_1, obiekt_2, ... , obiekt_n);

Jak widzimy jako argumenty klasy Group podajemy dowolnie długi ciąg obiektów.

Gdy mamy już grupę możemy dodać do niej zdarzenie, którego wykonanie we wszystkich instancjach spowoduje wywołanie funkcji:

grupa.addEvent("onzdarzenie",function(){
   // kod funkcji
});

Jak widzimy w przeciwieństwie do standardowej metody addEvent klasy Element w wypadku klasy Group do nazwy zdarzenia dodajemy też prefiks "on".

Klasa Group jak widać nie jest zbyt skomplikowana w użyciu, więc pora na jakiś przykład użycia. Proponuję rozbudowę ostatniego przykładu z poprzedniej części kursu. Będzie ona polegała na tym, że w momencie usunięcia wszystkich przenośnych divów, będzie usuwana cała struktura służąca do drag'n'drop (biały i czarny element), a zamiast nich pojawi się stosowny komunikat.

Na początku musimy pamiętać o tym, że klasa Group jako argumenty nie przyjmuje tablic - zatem musimy rozdzielić wszystkie elementy tablicy $$(".przenosny") - zrobię to poprzez stworzenie nowej tablicy, choć oczywiście można się odwoływać bezpośrednio poprzez zapis $$(".przenosny")[indeks], ale spowodowałoby to wykonanie dziewięć razy selekcji elementów.

Tworzymy zmienną elementy:

var elementy = [];

Następnie zmieniamy linijkę:

$$(".przenosny").each(function(element){

na zapis:

$$(".przenosny").each(function(element,index){
   elementy[index] = element;

Dzięki temu dodajemy automatycznie zmienną iteracyjną i dodajemy elementy do nowej tablicy.

Na koniec już poza metodą each tworzymy obiekt klasy Group i jako argumenty wypisujemy po kolei wszystkie pozycje tablicy elementy:

var grupa = new Group(elementy[0], elementy[1], elementy[2], elementy[3], elementy[4], elementy[5], elementy[6], elementy[7], elementy[8]);

oraz dodajemy zdarzenie do nowo utworzonego obiektu:

grupa.addEvent("emptydrop",function(){
   $("dobro").remove();
   $("zuo").remove();
   $("content").setHTML("Usunąłeś/aś wszystkie divy i nie ma już co przenosić...");
});

Warto zapamiętać, że zdarzenie emptydrop nie posiada przedrostka "on" (przy innych zdarzeniach musimy ów przedrostek zapisać). A kod funkcji powinien być już chyba dla każdego zrozumiały :)

No to teraz usuńcie wszystkie elementy z obszaru dobra i zła :D

PRZYKŁAD

I to by było właściwie wszystko o tym prostym pluginie. Może jeszcze dodam, że możemy za jego pomocą monitorować kilka zdarzeń dla danej grupy - w tym wypadku oczywiście wywołujemy metodę addEvent odpowiednią ilość razy.

Kolejnym omawianym pluginem będzie SmoothScroll.js