Dziudek's jogger

Pora zająć się tą częścią MooTools, która pozwoli nam na właściwie dowolne manipulacje elementami strony - ich wyglądem, zdarzeniami itd. Zaczynamy od zdarzeń właśnie gdyż są one podstawą do tworzenia dalszego kodu. Oczywiście poznamy też kluczową dla MooTools funkcję - $, gdyż bez niej niewiele byśmy zdziałali.

Dolar

Ten kto pisał w czystym JavaScript z pewnością pamięta powtarzane do bólu:

document.getElementById('jakiesID');

W MooTools (i nie tylko zresztą) zamiast tego długiego zapisu stosujemy po prostu funkcję $:

$('jakiesID');

Po pierwsze - tak jest krócej, po drugie - dzięki temu zyskujemy nie tylko dostęp do danego elementu, ale także do wszystkich metod klasy Element (poznamy je w kolejnych częściach kursu).

Dodatkowo jeżeli mamy już uchwyt do elementu możemy po prostu "wyposażyć" go w metody klasy Element. Przyjmijmy, że zmienna el jest uchwytem do jakiegoś elementu strony:

el = $(el);

Po takim zapisie el będzie posiadał wszystkie metody klasy Element. Mając już tak "wyposażony" element dokumentu, możemy zacząć pracę ze zdarzeniami.

Prawie jak powtórka z rozrywki

Jak już pisałem - zapewnienie jakiejkolwiek sensownej interakcji na stronie wymaga użycia zdarzeń. W czystym JavaScript istnieją zasadniczo trzy metody dodawania zdarzeń:

1. zgodna z Internet Explorerem,
2. zgodna z Document Object Model,
3. zgodna z tym co niezgodne z IE i DOM ;)

W MooTools nie musimy się martwić o zgodność - dodanie zdarzenia wymaga użycia metody klasy Element o znajomo brzmiącej nazwie - addEvent. Mogę w tym miejscu od razu zdradzić, że pozostałe metody poza cloneEvents także już znamy z klasy Events: fireEvent, addEvents, removeEvent i removeEvents.

Różnica polega na tym, że o ile w wypadku klas musieliśmy się sami martwić o wywołanie zdarzenia, to w wypadku elementów strony wiele zdarzeń wymaga z reguły dwóch czynności - dodania i usunięcia (przy czym to usuwanie też nie zawsze występuje).

Zacznijmy od podstaw

Wszystko ma swój początek i koniec - ta zasada dotyczy także żywotu strony w oknie przeglądarki - w tym czasie możemy ze stroną wiele zrobić, ale przede wszystkim musimy wiedzieć kiedy zacząć. W naszym wypadku wyznacznikiem początku będzie wystąpienie zdarzenia onLoad obiektu window. Poniższy kod będzie stosowany we właściwie każdym skrypcie:

window.addEvent("load", function(){
    // tu zaczynamy działać z MooTools
});

Jest to spowodowane tym, że dopiero po wystąpieniu tego zdarzenia mamy pewność iż będziemy mogli bezproblemowo korzystać ze wszystkich elementów strony. Przykładowo chcemy dodać zdarzenie onClick do przycisku - jeżeli wykonamy tą operację przed wystąpieniem zdarzenia onLoad to najprawdopodobniej napotkamy błąd w konsoli błędów.

Na początek stwórzmy prostą stronę na której będzie można zmieniać rozmiar czcionki w określonym przedziale, a dodatkowo będziemy mogli ustawić trzecim przyciskiem wartość domyślną.

Na naszej stronie poza nagłówkiem i paragrafami tekstu dodajemy też diva z trzema linkami:

<div>
        <a href="#" id="plus">Zwiększ czcionkę</a>
        <a href="#" id="default">Domyślny rozmiar czcionki</a>
        <a href="#" id="minus">Zmniejsz czcionkę</a>
</div>

Aby miłośnicy zachowywania funkcjonalności strony przy wyłączonym JavaScript nie mieli mi za złe tych hashy zamiast linków dodam, że zamiast nich można umieścić linki do wersji strony z powiększoną/zmniejszoną czcionką - tak by zmiana rozmiaru była możliwa również, bez JavaScript.

Podstawą do zmiany rozmiaru czcionki jest fakt zastosowania jednostek em zamiast px - po ustawieniu dla body w CSS:

body{
    font-size: 62.5%;
}

Możemy poprzez zmianę wartości font-size dla body uzyskać efekt zmiany rozmiaru czcionki (ale tylko dla elementów gdzie font-size jest podany w em).

Póki co przy zmianie stylu będziemy bazować na właściwości style, natomiast w dalszych częściach kursu poznamy bardziej wyszukane metody zmiany stylu elementów :)

Do naszych linków musimy dodać zdarzenia onClick - szkielet całości prezentuje się następująco:

window.addEvent("load", function(){
    document.body.style.fontSize = '62.5%';
 
    $('plus').addEvent("click", function(){});
    $('minus').addEvent("click", function(){});
    $('default').addEvent("click", function(){});
});

Jak widzimy, jeżeli chodzi o kwestię dodawania zdarzeń to nie ma żadnej różnicy składniowej pomiędzy metodą addEvent klas Events i Element. Warto zwrócić uwagę na pierwszą linijkę zdarzenia - będziemy odwoływać się do atrybuty style elementu, który jest początkowo pusty - dlatego musimy ustawić mu początkową wartość - celowo piszę na razie w taki pozbawiony MooTools-owych funkcji sposób, aby można było później zobaczyć jak MooTools ułatwia nam życie :)

Rozmiar czcionki będziemy zmieniali o 2.5% w przedziale 50-75%:

window.addEvent("load", function(){
    document.body.style.fontSize = '62.5%';
 
    $('plus').addEvent("click", function(){
        if(document.body.style.fontSize.toFloat() < 75)
        {
            document.body.style.fontSize = document.body.style.fontSize.toFloat() + 2.5 + "%";
        }
    });
 
    $('minus').addEvent("click", function(){
        if(document.body.style.fontSize.toFloat() > 50)
        {
            document.body.style.fontSize = document.body.style.fontSize.toFloat() - 2.5 + "%";
        }
    });
 
    $('default').addEvent("click", function(){
        document.body.style.fontSize = "62.5%";
    });
});

Jak widać trochę tego kodu jest (dałoby się sporo zoptymalizować, ale nie ma co komplikować kodu w przykładach), ale myślę, że każdy kto miał styczność z JavaScript powinien zrozumieć istotę jego działania. A działający przykład można znaleźć pod poniższym adresem:

Przykład 1

Dodawanie kilku zdarzeń naraz

Metodę addEvents możemy wykorzystać w wypadku pól input - chcemy na przykład umieścić wskazówkę jak wypełnić dany formularz - do tego celu wykorzystujemy zdarzenia onFocus i onBlur. Przyjmijmy, że mamy prosty formularz, gdzie należy podać imię i nazwisko:

<form action="mootools2.html" method="post">
        <p><input type="text" name="name1" id="inputName1" value="Podaj imię" /></p>
        <p><input type="text" name="name2" id="inputName2" value="Podaj nazwisko" /></p>
        <p><input type="submit" id="submit" /></p>
</form>

Zdarzenia poprzez metodę addEvents dodajemy tak samo jak w wypadku klasy Events.

window.addEvent("load", function(){
 
    $('inputName1').addEvents({
        "focus" : function(e){
            var el = new Event(e).target;
            if(el.value == 'Podaj imię') el.value = '';
        },
        "blur" : function(e){
            var el = new Event(e).target;
            if(el.value == '') el.value = 'Podaj imię';
        }
    });
 
    $('inputName2').addEvents({
        "focus" : function(e){
            var el = new Event(e).target;
            if(el.value == 'Podaj nazwisko') el.value = '';
        },
        "blur" : function(e){
            var el = new Event(e).target;
            if(el.value == '') el.value = 'Podaj nazwisko';
        }
    });
 
});

Pozwoliłem sobie w powyższym kodzie zamiast selekcji poprzez funkcję $ skorzystać z właściwości target obiektu Event, aby zaprezentować tu przekazywanie uchwytu do zdarzenia dla funkcji.

Powyższy kod powoduje dodanie obsługi zdarzeń onBlur i onFocus tak by po aktywowaniu pola nastąpiło usunięcie zawartości pola input, a następnie jego wypełnienie jeżeli zostanie ono puste.

Nie jest to może dopieszczony model - zwłaszcza w wypadku wyłączonego JavaScript, ale ma on jedynie pokazać istotę stosowania metody addEvents.

Przykład w akcji można obejrzeć na poniższej stronie:

PRZYKŁAD 2

Usuwanie zdarzeń

Jeżeli chodzi o metody removeEvent i removeEvents to tak jak w wypadku klasy Events, pierwszej z tych metod nie darzę sympatią ze względu na wymagany jako argument uchwyt do funkcji obsługi usuwanego zdarzenia:

$('idElementu').removeEvent("typ", uchwytDoFunkcji);

Jeżeli pamiętacie - metoda removeEvents usuwa wszystkie zdarzenia elementu, gdy nie podamy jej żadnego argumentu, lub usuwa wybrane zdarzenie określone podanym argumentem. Nie wymaga zatem definiowania funkcji "na zewnątrz" metod addEvent i addEvents:

var fn = function(){
    // kod obsługi zdarzenia
}
 
$(element).addEvent("typ", fn);
 
$(element).removeEvent("typ", fn);

W wypadku metody removeEvents możemy umieścić kod obsługi zdarzenia właściwie gdzie chcemy:

$(element).removeEvents(); // usuwa wszystkie zdarzenia elementu
$(element).removeEvents("blur"); // usuwa tylko zdarzenie onBlur elementu

Osobiście rzadko zdarzało mi się stosować metody do usuwania zdarzeń i z reguły są one potrzebne tylko przy specyficznych przypadkach związanych ze zdarzeniami - z reguły dobre podejście do umieszczenia obserwatorów zdarzeń poprzez metody addEvent i addEvents eliminuje potrzebę usuwania zdarzeń :) Choć oczywiście czasem może się to okazać niezbędne.

Dla treningu

Propozycja rozszerzenia prezentowanych przykładów:

• Przykład 1 - zmodyfikowanie kodu zdarzeń tak by zapobiec wykonywaniu akcji domyślnej przez linki (gdybyśmy umieścili linki na dole strony to powodowałyby one w niektórych przypadkach przewijanie strony na samą górę z powodu atrybutu href="#").
• Przykład 2 - dodanie obsługi przycisku submit (przypadkiem nawet id już ma ;) ) i przeprowadzenie prostej walidacji formularza przed jego "wysłaniem".

Powyższe modyfikacje to po prostu mała powtórka z właściwości obiektu Event (no jak ktoś bardzo poszaleje ze złożonością modyfikacji to także z wyrażeń regularnych i obiektu natywnego String :) ).

Podsumowanie

Znamy już jedną z ważniejszych funkcji w MooTools - $, a także wiemy jak dodawać i usuwać zdarzenia. W następnej części zajmiemy się metodami fireEvent, cloneEvents oraz zapoznamy się ze zdarzeniami zaimplementowanymi dodatkowo w MooTools i nauczymy się tworzyć własne złożone zdarzenia.