Przeglądanie bloczka z kodem na pełnym ekranie

Czasami zdarza się, że kod w bloczku jest na tyle szeroki, że trzeba go przewijać - co bywa niewygodne zwłaszcza, gdy kodu jest dużo.

Dodałem przycisk do interaktywnej belki bloczka, który otwiera bloczek na pełen ekran, rozwijając go automatycznie. Otwarcie działa na dwa sposoby:

natywny full screen przeglądarki
wersja customowa dla przeglądarek, które nie wspierają powyższego. Bloczek na czas powiększenia przenoszony jest do osobnego kontenera, zajmującego całą stronę, który z kolei podpinany jest do <body>.

Funkcjonalność włączana jest dla bloczków, których najdłuższa linijka kodu jest dłuższa niż 30 znaków (co przekłada się mniej więcej na 400px szerokości). Dodatkowo, przycisk jest ukrywany/pokazywany w momencie gdy zmieniana jest szerokość strony (np. gdy użytkownik zmieni orientację ekranu z poziomej na pionową i odwrotnie). Jeśli strona jest zbyt wąska, to nie ma sensu otwierać bloczka na pełny ekran, ponieważ wtedy w większości przypadków i tak trzeba będzie przewijać go w poziomie. Ten ficzer jest najbardziej użyteczny na dużych (szerokich) ekranach.

Demo:

https://user-images.githubusercontent.com/18393526/125212567-995b0c80-e2ae-11eb-85e9-82ae0d4b431e.mp4

Jest spoko, fajnie działa. Na mój mały rzut oka kod wygląda ok, ale najlepiej jakby to ktoś od JSa lepiej ocenił.

Czepiłbym się tylko wyglądu. Jak już mówiłem w rozmowie, wg mnie belka bloczka wygląda słabo. Zrzut ekranu z 2021-07-12 21-35-19 Mamy przecież takie same bloczki, ten sam mechanizm, tylko różny kod wstawiony, a przyciski rozwijania oraz powiększania latają w każdym przypadku gdzie chcą. Nie wygląda to ani ładnie ani intuicyjnie. Jeśli jednak to tylko stan przejściowy, bo taka też padła sugestia, i to będzie zaraz zmieniane w kolejnym PR, to jak dla mnie może sobie tak tu zostać.

Nie jestem też pewien czy górna belka na widoku pełnego ekranu ma sens. Z jednej strony tak, bo to jest jakiś nagłówek i pokazuje np. język, z drugiej jednak po co ktoś miałby chociażby zwijać bloczek na pełnym ekranie? Trochę bez sensu.

Jest jednak jakiś problem z bloczkami kodu, które możemy powiększyć na cały ekran, ale nie posiadają opcji rozwinięcia. Gdy włączymy pełny ekran dla bloczka, wciśniemy esc to po zamknięciu pełnego ekranu na konsoli ląduje błąd i nie da się go już ponownie otworzyć:

Uncaught (in promise) TypeError: Cannot read property 'closest' of null

Podobnie dzieje się gdy zamkniemy pełny ekran przyciskiem otwierania, wtedy pokazuje się jeszcze jakiś dodatkowy błąd:

TypeError: Cannot read property 'closest' of null TypeError: Failed to execute 'exitFullscreen' on 'Document': Document not active

Co do nieestetycznego/asymetrycznego wyglądu przycisków na belce, to - jak już uzgodniliśmy na Discordzie - belka raczej będzie lekko zmodernizowana w osobnym PR: w miejsce przycisku "Kopiuj" pojawi się przycisk do otwierania czegoś w stylu drawer'a i tam będą umieszczone przyciski do dodatkowych ficzerów - na tą chwilę, będą tam umieszczone przyciski do pełnego ekranu i kopiowania (więcej ficzerów do obsługi belki po prostu jeszcze nie ma). Pozostałe elementy belki: etykieta języka oraz przycisk do (ro)zwijania belki pozostaną na swoich miejscach. Dzięki temu uniknie się straty czasu na korygowanie layoutu tylko pod przycisk do ficzera pełnego ekranu, a każdy następny ficzer dla belki będzie mógł zostać uruchamiany ze wspomnianego drawer'a. Takie rozwiązanie w layoucie wydaje się elastyczne i przyszłościowe.

Naprawiłem problem generujący błędy w konsoli. Zablokowałem też przycisk zwijania bloczka na pełnym ekranie. Myślę, że lepiej jest zablokować przycisk niż go ukryć, bo ficzer (ro)zwijania nadal działa na pełnym ekranie (oczywiście, jeśli dany bloczek jest rozwijalny), tylko jest tymczasowo wyłączany, żeby użytkownik nie mógł zwinąć kodu, bo faktycznie nie ma takiej potrzeby na pełnym ekranie.

CodersCommunity / forum.pasja-informatyki.local

Przeglądanie bloczka z kodem na pełnym ekranie #270