Cześć, chciałbym podzielić się małym ogłoszeniem dotyczącym rozwoju forum.
W związku z pomysłami na dalsze poszerzanie funkcjonalności bloczka z kodem, pojawiła się zaktualizowana wersja interaktywnej belki. Przycisk "Kopiuj" został zastąpiony przyciskiem "Opcje", którego kliknięcie otwiera listę opcji. Wewnątrz, na chwilę obecną, są dostępne trzy ficzery, ale w różnym czasie w dyskusjach na GitHubie czy Discordzie padały m.in. propozycje dodania możliwości:
- formatowania zawartości bloczka,
- kompilacji kodu i pokazania wyniku,
- tworzenia wielo-plikowego snippeta uruchamianego w zewnętrznym serwisie (pokroju używanych już CodePen i JSFiddle).
W pierwszej kolejności natomiast, zostały zaimplementowane funkcjonalności pokazania bloczka na pełnym ekranie i wyszukiwarki. Gdy pojawi się okazja do wprowadzenia kolejnych funkcjonalności (np. wspomnianych wyżej), to miejsce na przycisk je aktywujący będzie już przygotowane.
Szczegóły zmian wprowadzonych obecnie:
- przycisk "Szukaj" otwiera wyszukiwarkę, która działa w kontekście danego bloczka (co jest wygodniejsze niż korzystanie z przeglądarkowej szukajki zwłaszcza, gdy w danym temacie jest sporo bloczków z kodem i pewne frazy powtarzają się między nimi) i szuka w trybie ignorowania wielkości znaków (tzw. case-insensitive). Wyszukiwarka posiada wskaźnik aktualnie wybranego wystąpienia oraz licznik wszystkich znalezionych wystąpień. Znalezione i wybrane frazy są zaznaczone odpowiednimi kolorami, a przechodzić pomiędzy kolejnymi wystąpieniami można za pomocą dostępnych przycisków w kształcie strzałek, kierunkowo odpowiadającym im strzałkom na klawiaturze lub kombinacji Enter oraz Shift + Enter. Wyszukiwarka w razie potrzeby przesuwa się w poziomie lub pionie, aby uniknąć przesłaniania aktualnie wybranego wystąpienia. Bloczek jest automatycznie przewijany, jeśli wystąpienie frazy znajduje się poza widocznym obszarem. Do wyszukiwarki można (poza kliknięciem w "Szukaj" z listy opacji) wejść również za pomocą skrótu Ctrl + F (wcześniej trzeba kliknąć w okno z zawartością bloczka, aby nadać mu focus) i z niej wyjść za pomocą klawisza Escape (jeśli pole do wyszukiwania ma focus). Wyszukiwarka zapamiętuje ostatnio wprowadzoną frazę oraz wybrane wystąpienie pomiędzy jej otwarciami - jest to przydatne, jeśli przypadkiem zamknie się wyszukiwarkę, a szukana fraza była długa lub skomplikowana do wprowadzenia;
- przycisk "Kopiuj" znajduje się teraz w liście opcji i jego użycie (udane lub nie) jest sygnalizowane odpowiednim kolorowym komunikatem;
- przycisk "Pełny ekran" jest aktywny, gdy bloczek nadaje się do pokazania na pełnym ekranie, a więc jest przewijalny i jego szerokość wynosi minimum 400px. Ficzer ten działa w jednym z dwóch trybów: korzysta z natywnego Full Screen API przeglądarki lub (jako fallback dla niewspierających przeglądarek) bloczek jest pokazywany jako popup na całą szerokość ekranu. W obu przypadkach bloczek jest automatycznie rozwijany, a otwarte menu opcji chowane;
Zachęcam do dzielenia się sugestiami, co można poprawić lub jakie ficzery dodać oraz do zgłaszania ewentualnych błędów, których nie udało się wyłapać. :)
P.S. Poniżej znajduje się bloczek, na którym można sobie przetestować wprowadzone zmiany.
<?php
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi bibendum lectus non leo iaculis, nec posuere ipsum laoreet.
Donec et ex dignissim, egestas lectus vitae, tempor risus. Cras vel ullamcorper libero. Sed eu ullamcorper metus.
</p>
<article>
Quisque sodales dictum urna, id hendrerit orci. Nulla nulla velit, convallis in vestibulum a, sollicitudin quis magna.
In placerat sit amet mi tempus scelerisque.
Nam sollicitudin lobortis suscipit. Morbi eget tortor consequat, mattis dolor ornare, dictum metus.
Donec pharetra, sapien a convallis auctor, felis sapien porta leo, nec fringilla mi magna elementum ante.
Nam pulvinar velit vitae eros convallis, ut aliquam nisi tincidunt.
Nullam convallis tortor sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Morbi pulvinar ante ut tellus suscipit pulvinar. Vestibulum a varius orci, sit amet sagittis magna.
Cras quis nibh sit amet eros bibendum maximus.
Nam ut justo quis nisl porttitor sollicitudin eu consectetur orci. Pellentesque quis tellus massa.
<q>
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain...
</q>
</article>
<script>
const msg = "Hello world!";
if (typeof window !== 'undefined' && window?.alert) {
alert(msg);
} else if (console && typeof console.log === 'function') {
console.log(msg);
}
</script>
?>
