piątek,
JS: Obsługa kółka myszy
Możliwość przechwycenia zdarzeń związanych z kółkiem myszy otwiera nowe możliwości dodawania funkcjonalności do stron internetowych. W materiale zaprezentowano dwa proste przykłady.
Przykład nr 1
Po umieszczeniu wskaźnika myszy nad poniższym szarym paskiem za pomocą kółka myszy można zwiększyć lub zmniejszyć jego szerokość.
Kod HTML przykładu
<p id="tester" style="background: #343434;height:40px;width:40px;"></p>
Kod JavaScript przykładu
document.querySelector('#tester').onwheel = function(e) {
e.preventDefault();
var w = parseInt(e.target.style.width);
var x = (e.deltaY > 0 ? 10 : (w > 20 ? -10 : 0));
e.target.style.width = (w + x) + 'px';
}
Po umieszczeniu wskaźnika myszy nad elementem opatrzonym identyfikatorem #tester i poruszeniu jej kółkiem przy pomocy metody preventDefault() zablokowano domyślną dla tego zdarzenia akcję polegającą na przewinięciu strony. W wierszu nr 3 pobrano aktualną w momencie zaistnienia zdarzenia szerokość monitorowanego elementu i skonwertowano ją na liczbę całkowitą (metoda parseInt()), co spowodowało usunięcie jednostki.
W zdecydowanej większości interfejsów obrót kółka myszy w górę w kontekście skalowania oznacza powiększenie elementu, a obrót w dół jego pomniejszenie. Taką samą zasadę przyjęto w prezentowanym skrypcie. W języku JawvaScript ustalenie, w którą stronę nastąpił obrót w pionie jest możliwe dzięki własności deltaY. Jako zmienianą wartość przyjęto dziesięć pikseli. W przypadku obrotu w górę (e.deltaY > 0) wartość ta jest dodatnia. Jeśli obrót nastąpił w dół, należy przyjąć wartość ujemną, jednak dodatkowo zabezpieczono element przed zmniejszeniem do zera (w konsekwencji byłby niewidoczny). Jako wartość graniczną przyjęto dwadzieścia pikseli (w > 20). W wierszu nr 5 monitorowany element otrzymuje ustaloną szerokość wyrażoną w pikselach.
Możliwości wykorzystania zdarzenia onwheel
Możliwość przechwycenia zdarzenia onwheel daje kreatywnemu programiście duże możliwości wprowadzenia ułatwień dla użytkownika. Należy pamiętać, że będą to opcje niestandardowe i że należy dodać jakąś podpowiedź. Na przykład pole input tupu number obsługuje kółko myszy, a nawet w tym przypadku niewielu użytkowników o tym wie. Zastosowanie zdarzenia onwheel może obejmować np.:
- skalowanie obrazów;
- zmiana wartości w polu formularza;
- przemieszczanie lub zamiana obiektu (np. w grze).
Zawsze trzeba wziąć pod uwagę możliwość braku obsługi JavaScript i o ile to możliwe stosować tzw. łagodną degradację. Oczywiście w niektórych przypadkach (np. gra w JavaScript) nie będzie to możliwe, ale wtedy trzeba dla użytkownika wyświetlić odpowiedni komunikat.
Przykład nr 2
Drugi przykładowy skrypt umożliwia wybór opcji w niestandardowy sposób. Po umieszczeniu wskaźnika myszy nad rozwijaną listą wyboru możesz dokonać wyboru za pomocą kółka myszy. Taka funkcjonalność nie jest domyślnie oferowana przez przeglądarki. Standardowa możliwość wyboru jest nadal dostępna.
Kod HTML przykładu
<div id="tester-1">
<label>Wybierz zawód:
<select>
<option value="ti">technik informatyk</option>
<option value="tr">technik reklamy</option>
<option value="tm">technik mechanik</option>
<option value="tps">technik pojazdów samochodowych</option>
<option value="tpm">technik przetwórstwa mleczarskiego</option>
</select>
</label>
</div>
Kod JavaScript przykładu
document.querySelector('#tester-1 select').onwheel = function(e) {
e.preventDefault();
var opts = this.querySelectorAll('option');
if (e.deltaY < 0) {
this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
} else {
this.selectedIndex = Math.min(this.selectedIndex + 1, this.length - 1);
}
}
Duża część prezentowanego kodu została omówiona w poprzednim przykładzie. Element select ma własność length, z której można odczytać ilość zawartych w nim opcji. Każda z nich ma kolejny unikalny indeks w postaci liczby, a numeracja zaczyna się od zera. Własność selectedIndex elementu select to indeks aktualnie wybranej opcji. Wybierając coraz niższą (patrząc na kod) opcję, wybrany indeks rośnie. Najwyższy możliwy indeks to length - 1 (zmniejszenie o jeden z powodu numeracji indeksów prowadzonej od zera), najniższy to oczywiście zero.
Podczas kręcenia kółkiem myszy aktualnie wybrana opcja (selectedIndex) jest odpowiednio zmniejszana lub zwiększana. W przypadku osiągnięcia wartości krańcowej (najwyższej lub najniższej) mechanizm zostaje zatrzymany. Zrealizowano to za pomocą podobnie działających metod min() oraz max(), które zwracają odpowiednio najmniejszy lub największy spośród przekazanych elemntów. Na przykład, jeśli wybrany indeks miałby stać się liczbą ujemną (wiersz nr 5), w skrypcie zwracane jest zero (indeks pierwszego elementu).
