Pimp my Jogger!

Na wstępie (gdzieś czytałem, że tak się nie powinno zaczynać ;)) chciałbym zaznaczyć, że doceniam w pełni pracę jaką wykonały osoby (głownie Sparrow) projektując i rozszerzając standardowego Joggera o nowe opcje. Doceniam to podwójnie, ponieważ Jogger jest „narzędziem” za free.

Jednak dużo rzeczy mu brakuje. Joggerowcy wspólnymi siłami wymodzili (buzzword, Łukasz się cieszy :P) pare ficzerów, dosyć ciekawie usprawniających działanie blogów.

Zanim zacznę - można się spytać po co to wszystko, WordPress i inne CMS-y1 / blogsystemy mają ho-ho i jeszcze więcej. Odpowiedzieć mogę tylko pytaniem: więc czemu oni nadal tutaj są? :)

Cytując moją rozmowę z nbw:

nbw: (04.07.2005 17:03)

w sumie to jest naprawde fenomenalne

nbw: (04.07.2005 17:03)

Przypomina mi amigę

nbw: (04.07.2005 17:03)

i amigowcow

riddle: (04.07.2005 17:03)

Środowisko Joggera?

nbw: (04.07.2005 17:03)

tak

nbw: (04.07.2005 17:04)

Firma-matka (sparrow ;)) nie mający możliwości rozwoju sprzętu (joggera), który dodatkowo jest mocno zacofany i brak mu ficzerów, a mimo wszystko potrafią dorobić rzeczy, których nie przewidywano. ;)

Wylistowane przeze mnie tweaki i pomysły są wspólnym dziełem Joggerowców, lecz sądzę że żaden z nich nie będzie miał przeciwko wykorzystanie tych informacji. :) Aha - nie jestem bogiem JavaScriptu, bynajmniej nie umiem go sam od podstaw stworzyć. Raczej zlepiam to co gdzieś ktoś coś napisał (przy okazji też coś to mi daje), więc przepraszam za uproszczenia.

Numerowanie komentarzy

To zrobić potrafi każdy. ;) Po prostu złóż szablon z komentarzami wklepanymi w listę uporządkowaną. Jak nie masz / nie chce Ci się tak, to możesz skorzystać z kodu Piotrka Janeczka (złożonego razem z jeszcze jednym, opisanym dalej, ficzerem).

Wyróżnienie autorów komentarzy

W komentarzach nie przewidziano znacznika, bądź klasy opisującej autora bloga. Można więc zrobić to samemu, korzystając z selektorów CSS3 (pomysł nbw). Każdy z zalogowanych odwiedzających zostawia stempelek w postaci linka do swojego jogga.

1. .nick a[href*="riddle"]

W ten sposób można wyróżnić swój nick. Można też wyróżnić osoby znajome, albo dodać im mały obrazek (bądź użyć favicony). Nie istnieje selektor który opisze element na podstawie wewnętrznego elementu (utopijne <), więc można zrobić to w JavaScript. Wykonawcę ozłocę. :P

Klikalne hiperłącza w komentarzach

Jak wiadomo, w komentarzach nie można używać znaczników HTML, bądź jakichkolwiek innych. Mnie denerwowało zawsze kopiowanie linków z czystego tekstu do paska adresu. Przypomniałem sobie o skrypcie dla Greasemonkey, który to potrafił. Teraz wystarczy załączyć moduł linkify.js (znajdziesz go u mnie i inny, zmodyfikowany, u Marcoosa), oraz objąć znacznikami <span> treść komentarzy. Gotowe. :)

Identyfikatory i linki dla komentarzy

Piotrek stworzył ciekawy kod, który dodaje id="" do każdego komentarza, a potem tworzy do nich eleganckie linki, widywane często na innych blogach („#”). Lekko go zmodyfikowałem, używając wywołania window.addEventListener.

1. /* dodawanie ID do komentarzy */
2. window.addEventListener("load", function commids() {
3. sigs = document.getElementsByClassName('nick');
4. for(i=0; i < sigs.length; i++) {
5. y = i;
6. sigs[i].setAttribute("id", "comm" + (y += 1));
7. }
8. }, false);
9. /* dodawanie linkow dla komentarzy na bazie dodanych ID */
10. window.addEventListener("load", function commlinks() {
11. stamps = document.getElementsByClassName('timestamp');
12. for (i=0; i < stamps.length; i++) {
13. y = i;
14. newlink = document.createElement('a');
15. newlink.setAttribute('href', '#comm'+(y += 1));
16. newlink.setAttribute('title', 'Komentarz numer ' + y);
17. newlink.appendChild(document.createTextNode('#'));
18. newspan = document.createElement('span');
19. newspan.appendChild(document.createTextNode(" | "));
20. newspan.appendChild(newlink);
21. stamps[i].appendChild(newspan);
22. }
23. }, false);

Do tego jest nam potrzebna funkcja zwracająca elementy o podanej klasie.

1. document.getElementsByClassName = function(className) {
2. var children = document.getElementsByTagName('*') || document.all;
3. var elements = new Array();
4. for (var i = 0; i < children.length; i++) {
5. var child = children[i];
6. var classNames = child.className.split(' ');
7. for (var j = 0; j < classNames.length; j++) {
8. if (classNames[j] == className) {
9. elements.push(child);
10. break;
11. }
12. }
13. }
14. return elements;
15. }

Wyszukiwanie

Aby móc się cieszyć tym „bajerem”, należy mieć włączone indeksowanie przez wyszukiwarki (w tym przypadku Google) - albo, mówiąc po ludzku, nie wyłączone. ;D Kod formularza:

1. <form method="get" action="http://www.google.pl/search" id="google">
2. <fieldset>
3. <label for="text" class="hidden">Szukaj:</label>
4. <input name="q" maxlength="2048" value="" id="text" type="text" title="Szukaj [4]" accesskey="4"/>
5. <input name="q" value="site:[-T-W-Ó-J-].jogger.pl" type="hidden" />
6. <input name="ie" value="UTF-8" type="hidden" />
7. <input name="oe" value="UTF-8" type="hidden" />
8. </fieldset>
9. </form>

Powiększenie pola komentarza

U da.killi taki bajer widziałem, ale można go ulepszyć - bo znamy id pola textarea użytego w komentarzach:

1. function lenghten() {
2. document.getElementById("commbody").rows += 5;
3. }
4. function shorten() {
5. document.getElementById("commbody").rows -= 5;
6. }

Del.icio.us w menu

Ostatni krzyk mody. ;) Jeśli posiadasz tam konto to możesz się odwołać do swoich ostatnich dodanych linków (u mnie 10) za pomocą:

1. <script type="text/javascript" src="http://del.icio.us/feeds/json/[L-O-G-I-N]/?count=10"></script>

Teraz jeden element listy w menu (bo masz menu na liście, prawda? :>) będzie poprzedzany twoimi zakładkami.

1. <ul>
2. <li id="deliciouslast"><a href="http://del.icio.us/ridd1e/" title="Moje del.icio.us">Więcej…</a></li>
3. </ul>

1. window.addEventListener("load", function(B, P, N, O){
2. B = document.getElementById("deliciouslast");
3. P = B.parentNode;
4. for (var i=0, post; post = Delicious.posts[i]; i++) {
5. N = document.createElement("a");
6. var shortTxt = ( post.d.length < 25) ? post.d : (post.d.substring(0, 22) + "…") ;
7. N.appendChild(document.createTextNode(shortTxt));
8. N.setAttribute("title", post.d);
9. /* N.setAttribute("title", post.n); */
10. N.setAttribute("href", post.u);
11. (O = document.createElement("li")).appendChild(N);
12. P.insertBefore(O, B);
13. }
14. }, false);

Wykomentowana linijka służy do pokazywania opisu linka (pole extended w del.icio.us) w etykietce narzędziowej, jeśli nie zdecydujemy się na skrócenie tekstu wyświetlanego w menu (shortTxt).

Zmiana stylu strony

To chyba każdy umie, ale Firefox nie zapamiętuje wybranego stylu. Więc jest moduł. :) Używamy do zapamiętania funkcji setActiveStyleSheet(title), gdzie title jest tytułem danego CSS (<link rel="atlternate stylesheet" title="tytuł_css" href="">).

Zwijanie elementów menu

Zwijanie i rozwijanie menu jest zbyt obszernym i różnorodnym tematem, żeby go opisać w całości. Ja mam rozwijanie na klik i zwijanie po określonym interwale, chyba że user „używa menu” - rusza myszką nad nim - kod jest z osiolki.net/tabelki. Da.killa ma zwijanie na klik w dwie strony. Marcoos ma zmniejszenie objętości linków w archiwum. Można też zrobić menu rozwijalne w CSS.

Strona główna Joggera

Istnieje skrypt filtrujący stronę główną joggera, napisany przez cr oraz modding jej wyglądu (screen) by me. Oba dla Greasemonkey, ale można zawsze przygotować skryptozakładki.

Pomysłów na rozszerzenie funkcjonalności joggera jest masa, widziałem też tworzenie linków z atrybutu cite dla <blockquote/>.

Na koniec poleciłbym zobaczenie chociaż ciekawostek na blogach cr - ten to dopiero majstruje JavaScriptem - oraz Olórina - kategorie wpisów korzystając z php i mysql i stylowania.

Masz coś ciekawego? Pochwal się! :)

• 1) Faxe czuwa. :)