Poziome rozszerzanie bloczka z kodem po najechaniu myszką

[ScriptyChris]

Inspiracja na pomysł pochodzi od @Argeento, który jakiś czas temu dodawał ten ficzer do nowego (testowego) forum.

Generalnie mamy już możliwość przeglądania bloczka z kodem na pełnym ekranie. Natomiast często przydaje się przejrzeć kod w możliwie najszerszym widoku, nie chcąc jednak specjalnie wchodzić we wspomniany tryb. Pomyślałem, że przyda się więc taka funkcjonalność, która aktywuje się w momencie najechania myszką na rozwinięty bloczek.

Poniżej filmik jak to działa.

https://user-images.githubusercontent.com/18393526/193429195-93fe3cba-2046-4546-87bd-b4ccb32e4c57.mp4

[ScriptyChris]

Poprawiłem kilka problemów:

• związanych z szybkim poruszaniem myszką do wewnątrz i poza obszar bloczka,
• konflikty między więcej niż jednym rozszerzonym bloczkiem ("kłótnia" o ustawianie overflow dla wrapperów),
• synchronizację rozszerzonego bloczka z otwartym menu opcji (kwestia z-index),
• precyzję rozszerzania (obszar bez potrzeby nie rozszerza się w pełni *[]**).

Udekorowałem też rozszerzony bloczek cienkim połączeniem outline + border, aby treść nie zlewała się z otoczeniem. W międzyczasie spróbowałem "narysować" kreskę z poziomu samej belki poprzez pseudo elementy, ale to okazało się przekombinowane, z widocznymi drobnymi niedociągnięciami w postaci szczelin między pionowymi borderami samego bloczka a wspomnianą kreską belki.

*[]** Można zauważyć, że bloczki, które nie rozszerzają się w pełni (z uwagi na odpowiednio "wąski" kod) zostawiają minimalną ilość scrolla poziomego. Ma to związek z tym, że należało by doliczać jeszcze możliwą szerokość scrolla pionowego (który nie zawsze jest widoczny), a ten z kolei również czasem zostawia minimalny obszar do przewinięcia, ponieważ - analogicznie - rozwijanie bloczków w pionie nie uwzględnia możliwej obecności paska przewijania poziomego. Trzeba by więc ten problem rozwiązać w obu miejscach - rozwijaniu pionowym i poziomym - aby oba mechanizmy brały pod uwagę drugą oś przewijania.

---

P.S. Od razu odpowiem na prawdopodobne pytanie: dlaczego bloczki nie rozwijają się na całą szerokość ekranu (lub w okolice), gdy kod jest odpowiednio szeroki? Otóż, z tego co zauważyłem, trzeba by (oprócz dotychczasowych wrapperów) włączyć overflow dla .qa-body-wrapper. To z kolei powoduje efekt uboczny w postaci rozjeżdżającego się layoutu - uznałem więc, że z dwojga złego lepiej ograniczyć rozwijaną szerokość niż próbować łatać rozjeżdżający się layout.

https://user-images.githubusercontent.com/18393526/193474362-7211246b-1ab4-4128-a899-6633536d3edf.mp4

[awaluk]

Poklikałem, jak dla mnie spoko. Zastanawiam się tylko co z urządzeniami mobilnymi, bo obecnie ta funkcja też tam działa np. po zaznaczeniu tekstu w bloczku. Bloczek się rozwija, a zupełnie nie ma gdzie się rozwinąć, ponieważ nie ma miejsca. Chyba najsensowniej byłoby wyłączyć to dla ekranów, które są na tyle małe, że bloczka nie ma gdzie rozwinąć.

[ScriptyChris]

Wyłączyłem ficzer dla urządzeń mobilnych i gdy rozwinięcie będzie albo zbyt małe albo jest zbyt mało miejsca między bloczkiem a wrapperem (próg ustaliłem na 80px). Zrobiłem też małą optymalizację, rozbijając warunki sprawdzające, aby kolejne obliczenia niepotrzebnie się nie wykonywały, gdy zawczasu wiadomo, że dany bloczek i tak nie będzie rozwijany.