OLX.pl Modern UI Fix 0.1.1

Skoro wydałem poprawki do skryptu na Allegro to skusiłem się też na naprawienie długo olewanego przeze mnie problemu ze skryptem do serwisu Olx i wypuszczenie nowej wersji tegoż skryptu.

Jedną z wykonywanych rzeczy przez olxowy skrypt użytkownika jest poprawienie wygody korzystania z paginacji. Skrypt dodaje własne elementy z odnośnikami do poprzedniej/następnej strony wraz z bardziej adekwatnymi ikonkami.

Ikonki te to nic innego jak glify pochodzące z ikonkowej czcionki. Kody znaków na sztywno dodałem w stylach:

.prev .pageNextPrev .omuif-link::before { content: "\\E04E"; }
.next .pageNextPrev .omuif-link::after  { content: "\\E062"; }

I to długo działało, do czasu jakiś zmian w czcionce “iconfont”, bo obecnie ikonki te na pasku wyglądają tak:

Idealnie byłoby pobierać oryginalne kody znaków unicode ze strony i je używać zamiast hard-kodowanych wartości.

Tak też zrobiłem i wywaliłem z dodawanych styli te elementy. Style są wstrzykiwane na początku ładowania strony, więc nie bardzo mógłbym tam manipulować JS-em. Dlatego przeniosłem ten kod do funkcji FixNextPrevLinks i teraz przed dodaniem własnych elementów “omuif-link” najpierw “doklejane” są dodatkowe style z poprawnymi “znakami”:

style.textContent += `
	.prev .pageNextPrev .omuif-link::before {
		content: ${getComputedStyle(links[0], ':before').getPropertyValue('content')}
	}
	.next .pageNextPrev .omuif-link::after {
		content: ${getComputedStyle(links[1], ':before').getPropertyValue('content')};
	}
`;

Oczywiście tylko przy pierwszym wywołaniu tej funkcji, aby nie doklejać w nieskończoność kolejnych CSS-ów.

Działa od kopa z minimalnym wysiłkiem, więc można oznaczyć jako “fixed”! ;)

Swoją drogą tworząc ten skrypt mogłem na początku obrać inną strategię. Można było użyć elementy dostępne na stronie i ewentualnie pozmieniać ich ułożenie jakimś flexem czy czymś innym i być może nie byłoby takich problemów…

Poprawiona wersja skryptu (0.1.1) dostępna jest już w moim repozytorium UserScripts.