Dziudek's jogger

W tej części kursu poprzewijamy sobie elementy z atrybutem overflow:hidden we wszystkie strony :) Do przewijania służy klasa Fx.Scroll z tytułowego pliku. W mootools elementy możemy przewijać na trzy sposoby - poprzez określenie współrzędnych punktu do jakiego ma zostać przewinięty element, możemy także przewijać element do jego krańców oraz możemy przewijać element według miejsca położenia elementów w nim umieszczonych.

Na tą część kursu przewidziałem dwa zadania - przewijanie elementu przyciskami (w górę i w dół), oraz wykonanie elementu na stronę, który pozwoli nam na małym obszarze upchać sporo treści i na dodatek ładnie ją prezentować.

Na początek tradycyjna dawka teorii, która później zostanie wykorzystana w praktyce. Klasa Fx.Scroll ma składnię podobną do już poznanych wcześniej klas. Oprócz tego co dziedziczy po klasie Fx.Base, posiada jeszcze jedną własną opcję - overflown, która jest tablicą elementów w których jest umieszczony element jaki chcemy przewijać - chodzi tylko o te elementy, które także są przewijane.

Składnia prezentuje się następująco:

var przewijanie = new Fx.Scroll("id_elementu");

Gdzie zmienna id_elementu to oczywiście identyfikator elementu jaki będziemy przewijali.

Klasa Fx.Scroll posiada 6 metod z których cztery nie pobierają dodatkowych argumentów:

• toLeft
• toRight
• toTop
• toBottom

Tak więc ich składnia wygląda następująco (korzystamy z wcześniej utworzonego obiektu klasy Fx.Scroll):

przewijanie.toTop();

Gdzie toTop() możemy zastąpić jedną z pozostałych metod.

Dwie pozostałe metody tej klasy pobierają argumenty. W wypadku metody scrollTo są to współrzędne punktu do jakiego zostanie przewinięty element:

przewijanie.scrollTo(x, y);

Natomiast metoda toElement jako argument pobiera element do jakiego ma zostać przewinięty element nadrzędny.

przewijanie.toElement("id_elementu");

Myślę, że użycie tej klasy nie powinno być dla czytelników kursu skomplikowane zwłaszcza, że z podobnymi zagadnieniami mieliśmy już styczność przy omawianiu pliku Element. Dimensions.js . Pora zatem przejść do przykładów, które rozjaśnią resztę wątpliwości.

Na początek stworzymy przewijany za pomocą dwóch przycisków element wypełniony tekstem i oczywiście mający mniejszą wysokość niż potrzebna do prezentacji tekstu w całości.

W tym wypadku skorzystamy z metody scrollTo - będziemy przewijać nasz element o ilość pikseli równą jego wysokości (przyjmijmy 300 pikseli).

Nasz div będzie miał identyfikator "div_przewijany". Stwórzmy na początek obiekt klasy Fx.Scroll dla tego elementu:

var przewijanie = new Fx.Scroll("div_przewijany");

Teraz pora na działanie przycisków - działanie będzie się opierało na dodawaniu/odejmowaniu od aktualnego położenia zapisanego w zmiennej aktualna_pozycja odpowiedniej wartości (300). O ile z przyciskiem "Przewiń w górę" nie będzie problemu bo przewijanie zostanie przerwane gdy zmienna aktualna_pozycja osiągnie wartość 0 to w wypadku przycisku "Przewiń w dół" pojawia się mały problem - musimy znać wysokość naszego elementu aby wiedzieć do którego momentu możemy przewijać.

W tym momencie musimy skorzystać z tego co udostępnia nam plik Element. Dimensions.js, a dokładniej z właściwości scrollSize.y zwracanego przez metodę getSize obiektu.

Stwórzmy zatem zmienną aktualna_pozycja i zmienną wysokosc_diva:

var aktualna_pozycja = 0;
var wysokosc_diva = $("div_przewijany").getSize().scrollSize.y;

Teraz już możemy zająć się dodaniem zdarzeń onclick do naszych przycisków, którym nadałem identyfikatory wGore i wDol. W wypadku przycisku wGore działanie polega na sprawdzeniu czy zmienna aktualna_pozycja jest większa od zera - jeżeli tak to można przewijać (poprzez zmniejszenie wartości wspomnianej zmiennej i jej wykorzystanie w metodzie scrollTo), w przeciwnym wypadku po prostu nic się nie stanie:

$("wGore").addEvent("click",function(){
   if(aktualna_pozycja > 0){
      aktualna_pozycja -= 300;
      przewijanie.scrollTo(0,aktualna_pozycja);
   }
});

W wypadku przycisku wDol sprawdzamy czy zmienna aktualna_pozycja powiększona o 300 ma wartość mniejszą od zmiennej wysokosc_diva - jeżeli tak to możemy przewijać (poprzez zwiększenie wartości zmiennej aktualna_pozycja i jej wykorzystanie w metodzie scrollTo).

$("wDol").addEvent("click",function(){
   if( (aktualna_pozycja + 300) < wysokosc_diva){
   aktualna_pozycja += 300;
   przewijanie.scrollTo(0,aktualna_pozycja);
   }
});

Całość tradycyjnie już umieszczamy w zdarzeniu onload i możemy podziwiać skrypt w akcji:

PRZYKŁAD 1

Pora na drugi przykład, który zapozna Was z pozostałymi metodami klasy Fx.Scroll.

Całość opiera się na tym, że w divie są wyświetlane inne divy, które mają taki sam rozmiar jak ten główny div i są umieszczone w jeszcze jednym divie, którego długość jest równa długości wszystkich tych divów razem wziętych po to by móc umieścić wszystkie te elementy obok siebie za pomocą :

float:left;

Poruszanie się po tym ciągu elementów polega na korzystaniu z dwóch przycisków: wLewo i wPrawo.

Na początek tworzymy potrzebne zmienne - obiekt efektu przewijania, tablicę elementów tworzących ciąg jaki przewijamy oraz zmienną przechowującą informację jaki element jest aktualnie pokazywany:

var przewijanie = new Fx.Scroll("scrollinfo");
var el_tab = [];
var aktualny_div = 0;

Następnie wypełniamy naszą tablicę elementami tworzącymi animowany ciąg:

$$("#scrollinfo div.news").each(function(element,index){
   el_tab[index] = element;
});

Dodam tylko, że główny div ma w tym wypadku id scrollinfo, a wszystkie elementy, które są pokazywane mają przypisaną klasę news.

Pora na rzecz najważniejszą - obsługa przycisków, które będą służyły do przewijania. Na początek przycisk do przewijania w lewo - musi on działać w ten sposób, że będzie sprawdzane czy aktualnie pokazywany element jest pierwszym w ciągu - jeżeli tak to nastąpi przewinięcie do ostatniego elementu poprzez wykorzystanie metody toRight (mógłbym użyć takiego zapisu jak w wypadku drugiej części warunku, ale ten zapis jest dłuższy) i zwiększenie wartości zmiennej przechowującej informację o aktualnie pokazywanym elemencie do 4. W pozostałych wypadkach będzie zmniejszana wspomniana zmienna, a następnie zostanie wykorzystana jako identyfikator w tablicy elementów, której element zostanie użyty jako argument metody toElement:

$("wLewo").addEvent("click",function(){
   if(aktualny_div == 0){
      aktualny_div = 4;
      przewijanie.toRight();
   }
   else{
      aktualny_div--;
      przewijanie.toElement(el_tab[aktualny_div]);
   }
});

W przypadku przycisku wPrawo wszystko działa jakby na odwrót - sprawdzamy czy aktualnie pokazywany element jest ostatnim w ciągu. Jeżeli tak to za pomocą metody toLeft przechodzimy na początek. W pozostałych wypadkach zwiększamy zmienną z informacją o aktualnie pokazywanym elemencie i używamy jej by wskazać element tablicy do którego chcemy przejść z użyciem metody toElement:

$("wPrawo").addEvent("click",function(){
   if(aktualny_div == 4){
      aktualny_div = 0;
      przewijanie.toLeft();
   }
   else{
      aktualny_div++;
      przewijanie.toElement(el_tab[aktualny_div]);
   }
});

Kod skryptu nie jest zbyt długi, a sam efekt według mnie całkiem ładny (oczywiście po małej zabawie z CSS):

PRZYKŁAD 2

Jeszcze parę propozycji co do drugiego przykładu:

• zauważmy, że możemy wykonać skrypt tego samego typu, ale działający w kierunku pionowym. Wystarczy wyrzucić div posiadający identyfikator flex (bo jest w tym wypadku zbędny) i usunąć float:left z kodu CSS dla klasy news. No i oczywiście zmienić metodę toLeft na metodę toBottom, a metodę toRight na toTop.
• nie każdemu pewnie spodoba się to przewijanie w momencie gdy przechodzimy z pierwszego elementu do ostatniego lub na odwrót. Możemy tego uniknąć na dwa sposoby :
  • po prostu nie pozwalać na dalsze przewijanie po dotarciu do początku, końca ciągu lub
  • stworzyć jeszcze jeden efekt przewijania dla diva scrollinfo z opcją duration równą 0. Następnie przy ładowaniu skryptu skopiować ostatni div z newsem przed pierwszy, a pierwszy element skopiować za ostatni element. I teraz wykorzystać mały trick - w wypadku gdy znajdziemy się przy pierwszym lub ostatnim elemencie w chwili przejścia do kolejnego elementu najpierw wykonać standardową animację (do kopii elementu), a potem po wykonaniu tego przewinięcia wykonać cofnięcie do prawdziwego elementu z użyciem drugiego efektu, który ma najkrótszy możliwy czas wykonania. Oczywiście jest to rozwiązanie dla tych, którzy bardzo chcą utrzymać ładną ciągłość animacji.

W następnej części kursu zajmiemy się plikiem Fx.Slide.js, który jest ostatnim omawianym plikiem z grupy Effects.