✨**Nazwa projektu:** `JustJoinIT Chrome Extension`✨ Nowy feature `d... (@high_five_guys)

✨Nazwa projektu: JustJoinIT Chrome Extension✨

Nowy feature dodawanie do ulubionych zakończone!

- na listingach ofert oraz w samej ofercie pojawia się serce
- po kliknieciu w zmienia się w co sygnalizuje, że dodaliśmy ofertę do obserwowanych
- w panelu na dole pojawiła się pozycja Favourites, gdzie po kliknięciu w open otwieramy listing ulubionych ofert (screen)
- po kliknieciu w nazwę oferty możemy szybko do niej przejść
- kliknięcie w krzyżyk zamyka obserwowane
Co było było ciekawego w realizacji tej funkcjonalności?
- wyszedł fajny efekt kliknięcia w open, który tworzy panel Favourites i przykrywa główny. To był prosty js połączony z cssem, który nadaje z-index wiekszy od tego na panelu głównym
- odpytanie dla oferty czy mamy jej href dodany w lokalnym storage

chrome.storage.local.get("jjit_visited_offers", function (result) {
oraz sprawdzenie czy już lubimy ofertę

var isFav = jjit_fav_offers.some((i) => i.offerHref == offerHref);
 var favHtml = "";
 if (isFav) {
 favHtml =
 '';
 } else {
 favHtml =
 '';
 }

najgłupszy, najbardziej chamski oraz najprostszy sposób. Nigdy nie lubiłem robić takich lajków.
Mam jakiś dziwny uraz do tego typu funkcjonalności. Strasznie tu wieje nudą i okropną powtarzalnością.
- dowiedziałem się, że jak chcemy użyć w jsie funkcji typu .find na elementach przechwyconych z querySelectorAll, to musimy zamienic je na arraya. Całe życie myslałem, że to już właściwy array, ale jednak nie:

var $spans = Array.from(document.querySelectorAll("#root span")); // <-- tu dzieje sie w/w "magia"
 var $price = $spans.find((s) => s.innerText.indexOf(" PLN") > -1);

kluczem jest Array.from(document.querySelectorAll("#root span"));.
Od ponad 10 lat używam do takich rzeczy jquery, ale gdy go zabrakło, okazało się, że jednak się myliłem i trzeba pobrane elementy przerobić na array. Nieźle, cieszę się, że to poznałem.

Co następne?
Myslę nad dodaniem możliwości wrzucania notatek do ulubionych ofert. Pamiętam, że kiedyś zabrakło mi podobnej funkcjonalności.

dzięki i do następnego razu!

to be continued ヘ( ^o^)ノ＼(^_^ )
#programowanie #javascript #chrome #chromeextensions #justjoinit

#highfiveguys <--- obserwuj ten tag! aby być na bieżąco

na #4programmers można zobaczyć wszystkie wpisy jakby ktoś był zainteresowany tutaj