JavaScript: Tooltip cz. 3

0:00Pozostało nam do zrobienia jeszcze kilka drobnych rzeczy z naszym tooltipem i myślę,

0:04że w tej lekcji już uda nam się je wszystkie zakończyć.

0:07Więc ten tooltip teraz działa tak, że po najechaniu

0:09na element, do którego go przypisaliśmy pojawia się w odpowiednim miejscu,

0:13ale po pierwsze jak widzisz koło kursora

0:15myszy pojawia się nam oryginalny title, a chcemy się go pozbyć, a po drugie

0:19chcielibyśmy po zjechaniu myszą również ukrywać ten tooltip.

0:22Więc przejdźmy sobie do naszych założeń I zrobiliśmy punkt czwarty w lekcji

0:26poprzedniej, więc chciałbym teraz zająć się punktem pierwszym.

0:29A więc przypisz zdarzenie mouseleave do wszystkich przekazanych elementów.

0:33Zatem tutaj jak przypisywaliśmy takie zdarzenie jak mouseenter to chciałbym od razu

0:37przypisać zdarzenie mouseleave i to zdarzenie się wywołuje kiedy

0:42zjedziemy kursorem myszy z jakiegoś elementu i tutaj będziemy chcieli

0:46wywoływać funkcję, którą nazwiemy sobie heideTooltip.

0:50A zatem utwórzmy sobie taką funkcję

0:55hideTooltip i ją tutaj po prostu przypiszemy.

0:58OK, i teraz ta funkcja się będzie wywoływać. Ale zastanówmy się co się

1:02stanie jak my zjedziemy z takiego elementu.

1:04Wywołamy funkcję, ale skąd będziemy wiedzieć, który tooltip jest aktywny?

1:08No i można by było zrobić tak, że na

1:09stronie wyszukamy z użyciem querySelektor tego elementu i go usuniemy, ale można to

1:14również zrobić w bardziej wydajny i lepszy sposób.

1:17To znaczy w momencie kiedy tworzymy tooltip,

1:18to przypisywać go do jakiejś globalnej zmiennej.

1:22Więc jeżeli byśmy sobie tutaj utworzyli zmienną, którą nazwiemy activeTooltip, bo zawsze na

1:26stronie będzie tylko jeden taki aktywny tooltip, może być ona pusta, albo możemy

1:30przypisać tutaj wartość null, żeby zasygnalizować, że na początku specjalnie

1:34nic w niej nie ma, to teraz w momencie jak taki tooltip tworzymy to moglibyśmy go

1:38przypisywać do tej zmiennej activeTooltip.

1:41Czyli na tym etapie utworzyliśmy tooltip i moglibyśmy go tutaj po prostu zapisać.

1:46W zasadzie można to zrobić w tym miejscu.

1:49activeTooltip równa się tooltip.

1:55OK, mam nadzieję, że to rozumiesz. Czyli utworzyliśmy element,

1:58wstawiliśmy go na stronę, ale odwołanie do

2:00niego mamy w takiej globalnej tutaj zmiennej, którą sobie utworzyliśmy.

2:04I to odwołanie jest takie samo jak tutaj, jak w każdym innym miejscu, więc na nim możemy

2:08wtedy wszystkie te metody wywoływać. I dzięki temu to nam ułatwi bardzo sprawę.

2:13Bo jak sobie skopiujemy tą zmienną to w funkcji hideTooltip

2:17wystarczy się do tego tooltip odwołać i

2:19pokazywałem Ci, że możemy w drzewie DOM usuwać elementy metodą remove.

2:23One wtedy znikają.

2:24A zatem po zjechaniu myszy z dowolnego

2:27elementu będziemy aktywny tooltip chcieli usunąć.

2:30Natomiast tutaj fajnie byłoby zadbać o to, czy taki tooltip na pewno istnieje.

2:35On się będzie tworzył i będzie istniał,

2:36ale ja dla pewności sprawdziłbym sobie czy tutaj nie ma wartości null, bo jak na null

2:40spróbujemy wykonać remove to otrzymamy błąd, więc najbezpieczniej będzie sprawdzić.

2:45Jeżeli activeTooltip,

2:47czyli jeżeli tam będzie odwołanie do obiektu to będzie uznane jako wartość

2:50prawdziwa, jeżeli null to jako false i tylko wtedy chcemy usunąć.

2:54W zasadzie ta sytuacja nie powinna mieć miejsca, bo po zjechaniu elementu kiedy

2:58będziemy to oznacza, że najpierw na niego najechaliśmy i ten tooltip utworzyliśmy, ale

3:02lepiej sobie również takie zabezpieczenie stworzyć na wszelki wypadek.

3:07OK, no i zobaczmy jak to będzie działać.

3:08Najeżdżam na ten element, zjeżdżam z niego i Tooltip znika. Bo on jest po prostu z

3:13drzewa DOM, co możesz po prawej stronie zobaczyć usuwany.

3:16I o to nam dokładnie chodziło.

3:17Więc zanim zdążymy najechać na inny

3:19element, on już jest usunięty i dopiero wtedy tworzy się nowy i on się usuwa.

3:24Kolejną rzeczą, którą chcę zrobić to jest usunięcie atrybutu title na danym

3:28elemencie po to, żeby on się nie pojawiał razem z tym tooltipem.

3:32I to możemy zrobić.

3:34Przejdziemy sobie w miejsce, w którym w

3:36zasadzie tworzymy taki Tooltip, czyli będzie to tutaj, odczytaliśmy z

3:41elementu, na który najechaliśmy jego atrybut title, przekazaliśmy go tutaj do

3:46tooltipa, no i w zasadzie możemy ten atrybut usunąć.

3:49A więc powiemy e.currentTarget.removeAttribute title.

3:55Skoro go usuniemy, no to on po prostu nie

3:57będzie nam się wyświetlał. Najeżdża na element,

3:59pojawia się tooltip, ale jak widzisz nie

4:02pojawia się już ten dymek, bo usunęliśmy atrybut title.

4:05Natomiast jak zjedziemy z tego elementu,

4:07najedziemy jeszcze raz, to jak widzisz tooltip przestał działać.

4:10Dlaczego? Dlatego, że po najechaniu na ten element

4:13otrzymywaliśmy jego atrybut title i przekazywaliśmy ten tekst do tooltipa.

4:17Skoro ja go za pierwszym razem usunąłem,

4:19to za drugim razem jak chcę go odczytać, to otrzymuję pusty ciąg znaków.

4:24A zatem po zjechaniu z takiego tooltipa chcielibyśmy do takiego elementu przypisać

4:29raz jeszcze atrybut title. I możemy to zrobić.

4:32Przechwycimy sobie tutaj e przy hideTooltip, a więc

4:36przechwycimy dokładnie ten element, z którego zjechaliśmy myszą.

4:40Skoro na nim mieliśmy mysz, to znaczy, że

4:43w tooltipie znajduje się taki tekst, jaki wcześniej był w atrybucie title

4:47a zatem ten tekst możemy odczytać i z powrotem ustawić ten title.

4:51Zrobimy to zanim usuniemy ten element, a więc odwołamy się do e.currentTarget

4:55i w tym miejscu to będzie właśnie ten element, z którego zjechaliśmy myszą

4:59i któremu przy najechaniu myszą usunęliśmy atrybut title i ustawimy jego atrybut

5:04title na wartość pobraną z tooltipa, a więc activeTooltip i textContent.

5:09To będzie dokładnie ta wartość, która się w środku tego div z Tooltip znajduje.

5:13Odczytamy ją i przypiszemy z powrotem jako atrybut title.

5:17Zobaczmy.

5:18Zjeżdżam, najeżdżam i jak widzisz za każdym razem działa to poprawnie.

5:22Bo teraz jeżeli sobie zerkniemy po prostu

5:24na ten obrazek, to on z powrotem ma przypisany atrybut title.

5:27Teraz jak najade ten atrybut jak widzisz

5:29po prawej stronie jest usunięty, ale jest w dymku.

5:32Przy zjechaniu odczytuję go z dymka, ustawiam tutaj i dymek usuwam.

5:36No i jak widzisz działa to już bardzo fajnie.

5:40No i w zasadzie można powiedzieć, że nasz tooltip jest już gotowy, ale chciałem Ci

5:43na koniec pokazać jak to wszystko zawrzeć w fajnym module.

5:46Bo mamy to jak widzisz w punkcie 7.

5:48Teraz te wszystkie funkcje są globalne,

5:50czyli wszędzie się do nich można odwołać np.

5:52createTooltip

5:53I podobnie jak ktoś by miał więcej skryptów podpiętych do naszej strony, to wszędzie

5:57będą te funkcje dostępne zupełnie niepotrzebnie.

6:00Natomiast możemy wszystkie te funkcje

6:02zawrzeć sobie w takiej samo wywołującej się funkcji anonimowej.

6:05Czyli zrobimy to tak, utworzymy funkcję,

6:11następnie tę funkcję wywołamy czyli tutaj

6:14ona się tworzy i od razu wykonuje

6:16i wszystko, co tutaj mieliśmy,

6:18oprócz tego init, bo zaraz coś z tym będę chciał zrobić,

6:21albo na początek możemy również z tym init.

6:23Wstawimy sobie do tej właśnie funkcji.

6:26Sformatuję to jeszcze.

6:29OK. I tak to będzie wyglądać.

6:30Na tym etapie ten kod będzie działał tak

6:32samo jak widzisz, ale już nie będziemy mieli w globalnym zakresie np.

6:36funkcji createTooltip.

6:37Ale to co ja chciałbym zrobić, to do

6:39globalnego zakresu wypuścić taką funkcję, która będzie nam to wszystko inicjowana.

6:44A zatem nie chcę tego wywoływać wewnątrz

6:46naszej funkcji, tylko chcę móc wywołać sobie to tutaj.

6:50Czyli moglibyśmy wtedy taki skrypt

6:51podłączyć do naszej strony i mielibyśmy całą funkcjonalność tooltipa

6:55a naszym zadaniem albo zadaniem kogoś

6:57innego byłoby wyłącznie wywołanie odpowiedniej funkcji i przekazanie

7:00elementów, do których ten tooltip ma być przypisany.

7:03Natomiast teraz na zewnątrz funkcja init nie jest dostępna.

7:07Wystarczy jednak, że do obiektu window przypiszemy tą funkcję init w ten sposób.

7:12Czyli wskażemy na funkcję init, która jest

7:14wewnątrz tutaj i przypiszemy to do window.init.

7:18Dzięki temu tutaj w globalnym zakresie

7:19będzie już dostępna taka funkcja i wszystko powinno działać tak samo.

7:24Natomiast niezbyt intuicyjnie to brzmi.

7:26Jeżeli byśmy komuś udostępnili taki skrypt

7:28i nazwalibyśmy funkcję do wywoływania tooltip po prostu init.

7:32A zatem przypisując ją do obiektu

7:33globalnego jakim jest window, możemy ją nazwać inaczej np.

7:37makeTooltip

7:39w ten sposób i przypiszemy tutaj funkcję init.

7:42I teraz możemy tak naprawdę zapomnieć o tym kodzie, który był wyżej.

7:45Wiemy, że mamy globalną funkcję, która nazywa się makeTooltip coś takiego,

7:49przekazujemy jej odpowiednie elementy, wywołując makeTooltip

7:53tak naprawdę wywołujemy init i tutaj wszystko dzieje się dokładnie tak samo,

7:57jak stworzyliśmy to na przestrzeni ostatnich lekcji.

8:00Zobacz jak to teraz wygląda.

8:02Wygląda tak samo, ale jest w lepszy sposób spakowane i w zasadzie moglibyśmy cały ten

8:06kod oprócz tej ostatniej funkcji zawrzeć w skrypcie i komuś ten skrypt podrzucić,

8:11on sobie go podłącza do strony i w dowolnym miejscu

8:14nawet tutaj w liniowym skrypcie mógłby

8:17powiedzieć makeTooltip i podać elementy, które mają być do tego

8:22Tooltipa przypisane, a w zasadzie do których Tooltip ma być przypisany.

8:26Jak zatem widzisz w ten sposób można stworzyć fajny moduł.

8:29Ja jednak zostawiam to wywołanie tutaj, żebyś łatwiej mógł po prostu na to

8:33zerknąć, ale nic nie stoi na przeszkodzie, żeby cały ten kod był po prostu w jednym

8:37pliku, a wywołanie w zupełnie innym miejscu.

8:40To zatem tyle jeżeli chodzi o ten Tooltip.

8:42Jak widzisz dosyć długi projekt, ale chciałem Ci na jego podstawie pokazać jak

8:46możemy pracować zarówno z językiem JavaScript, bo tutaj wszędzie pisaliśmy

8:51wyłącznie kod JavaScript, czyli tworzyliśmy jakieś obiekty, gdzie coś

8:54sobie powstawialiśmy, poprzekazywaliśmy to do innych funkcji,

8:57podzieliliśmy to fajnie na kilka funkcji,

9:00ale także jak pracować z obiektowym modelem dokumentu, czyli jak połączyć

9:03wiedzę, którą do tej pory w osobnych lekcjach Ci pokazywałem.

9:07Jak widzisz, efekt jest naprawdę fajny, a

9:09to tylko ułamek tego, co możemy z użyciem Obiektowego Modelu Dokumentu i języka

9:13JavaScript robić na stronach internetowych.