Projektowanie i inne takie...

Kończymy właśnie pisać naszego autorskiego CMSa. Jako, że dostałem wolną ręke jeśli chodzi o interfejs (Iiiihahaa!), postanowiłem, że będzie on dokładnie taki, jakiego sobie wymarzyłem, czyli lekki, estetyczny i maksymalnie przyjazny dla użytkownika. Interfejs ów opiera się m. in. na tabelkach, które są wypełnione zawartością - lista aktualności, podstron, wzorów listów, menu, galerii itp.

Layout jest dynamiczny i konfigurowalny, toteż ktoś, kto, tak jak ja, ma pulpit szeroki na 1900 pikseli mógłby poczuć się niekomfortowo otrzymując tabelkę z kolumną zawierającą tytuły podstron rozjechaną na 1600 pikseli a resztę ściśniętą, gdzieś pod koniec, jak labrador w mikrofalówce. Oczywiście przewidziałem to i tak naprawdę, taka sytuacja nie ma prawa zajść, jednak mimo to chciałem dać użytkownikom wybór, która kolumna jest dla nich aktualnie najważniejsza i do której chcieliby mieć w danej chwili jak najwygodnieszy dostęp. Wybór był jeden - dynamiczna zmiana szerokości kolumn.

Jako, że robiłem to pierwszy raz, ucząc się przy okazji, chciałbym teraz trochę pouczyć was. Tak więc dzisiejszy temat lekcji, to wspomiana już:

"Dynamiczna zmiana szerokości kolumn - czyli, dlaczego lubimy Javascript."

Jedziemy
Potrzebna nam będzie tabelka. Ja zrobiłem sobie taką:

Wy możecie zrobić zwykłą, prostą tabelkę zawierająca nagłówki i kilka rzędów komórek, dla zachowania przejrzystości:

<table border="0" cellpadding="2" cellspacing="0">
   <thead>
           <tr>
                  <th>Lp</th>
                  <th>Lorem</th>
                  <th>Ipsum</th>
                  <th>Dolor</th>
           </tr>
   <thead>
   <tbody>
            <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td
            </tr>
            <tr>
                  <td>5</td>
                  <td>6</td>
                  <td>7</td>
                  <td>8</td>
             </tr>
   </tbody>
</table>

Teraz musimy przygotować sobie jakiś uchwyt, za który będzie można złapać i zacząć woogie boogie. Wystarczy jakiś DIV. Problem w tym, że elementy TH/TD ignorują position: absolute;... musimy więc użyć dwóch DIVów. Jeden będzie robił za containing block dla drugiego, pozycjonowanego absolutnie handlera (uchwytu):

<th>
  <div>
      Lorem <div class="handler"></div>
  </div>
</th>

Takie same DIVy dodajemy do pozostałych nagłówków tabelki. Następnie ostylujemy je trochę abyśmy wiedzieli, co się dzieje:

th > div {
    position: relative; /* tworzymy containing block */
}

.handler {
    position: absolute;
    top: 0;
    right: 99.5; /* uchwyt będzie na końcu każdego nagłówka a właściwie pomiędzy końcem a początkiem następnego */ 
    height: 100%;
    width: 9px; /* optymalna szerokośc dla uchwytu nie powodująca efektu "Kur... gdzie ten cycek?!" */
    cursor: ew-resize; /*  ew działa tylko w Safari, możecie użyć innego */
    border: 1px #900 solid; /* tymczasowo, żebyśmy wiedzieli, gdzie jesteśmy */
}

W rezultacie otrzymamy coś takiego:

Javascript
Front już mamy, teraz zaplecze, które wykona całą robote. Potrzebujemy dwie funkcje - jedną, która zajmie się zmianą szerokości i drugą, która wywoła cały mechanizm. Nie będziemy bawić się w żadne onclicki w TH a użyjemy do tego DOM poziomu drugiego i ładnie odseparujemy bebechy od warstwy prezentacji. Zaczniemy od resizowania. Funkcja, która napiszemy, będzie potrzebowała dwa parametry - referencje do obiektu, który będzie uchwytem (nasz DIV.handler) oraz drugi, obiekt Event zdarzenia mousedown.

    function resizeColumn(handler, event) { }

Teraz, musimy sprawdzić, jaką szerokość ma dany nagłówek i wyliczyć różnicę między nim a punktem kliknięcia myszką. Użyłem tu własnej funkcji do wyciągania reguł CSS - getStyleOf(), wy możecie użyć swojej.

function resizeColumn(handler, event) { 
var headerSize = parseInt(getStyleOf(handler.parentNode.parentNode, 0).getPropertyValue('width'));
var deltaX = event.clientX - headerSize;
}

Następnie musimy zarejestrować procedury obsługi zdarzenia, które będą odpowiadać na zdarzenia mousedown i mouseup, występującą bezpośednio po niej. Te procedury będą aktywne dopóty, dopóki będzie naciśniety lewy przycisk myszy i zostaną zwolnione gdy go puścimy. Dopisujemy dalej w ciele funkcji:

function resizeColumn(handler, event) { 
... /* tu poprzednie wyliczenia deltyX i headerSize */

document.addEventListener('mousemove', resizeDo, true);
document.addEventListener('mouseup', resizeStop, true);

event.stopPropagation();
event.preventDefault();
}

O stopPropagation() i preventDefault() oraz propagacji zdarzeń innym razem. Teraz po prostu przyjmij, że musimy tak zrobić. Ostatnim krokiem jest przygotowanie procedur resizeDo i resizeStop, które wykonają całą robotę:

function resizeColumn(handler, event) { 
...
function resizeDo(event) {
handler.parentNode.parentNode.style.width = (event.clientX - deltaX) + "px";
event.stopPropagation();
}

function resizeStop(event) {
document.removeEventListener('mouseup', resizeStop, true);
document.removeEventListener('mousemove', resizeDo, true);
event.stopPropagation();
}

Okey, funkcja resizeColumn() gotowa. Teraz musimy ją odpowiednio wywołać. Napiszemy drugą funkcje, która się tym zajmie i wywołamy ją z <BODY onload="">. Nię będe się tu rozpisywał, bo działanie jest chyba jasne - bierzemy wszystkie DIVy, szukamy tych, których nazwa klasy równa jest "handler" i aplikujemy im odpowiedni mechanizm. Oczywiście można to zrobić bardziej optymalnie (zadanie domowe ), na przykład przeszukując same tabelki a nie całe drzewo dokumentu ale tak też działa i, na potrzeby tego artykułu, jest bardziej przejrzyście.

function doResize() {
var handlers = document.getElementsByTagName('div');
for(var i=0; i<handlers.length; i++) {
if(handlers[i].className == 'handler') {
handlers[i].onmousedown = function (event) {resizeColumn(this, event)};
}
}
}

Tak, jak wspomniałem - aplikujemy tę funkcję w BODY:

<body onload="doResize();">

...i usuwamy czerwoną ramkę:

.handler {
    border: 1px #900 solid; /* ciach! */
}

...i jeśli niczego po drodze nie popsuliśmy, to wszystko powinno fajnie hulać

PS: uprzedzając komentarze - w IE nie działa i nie będzie. Mamy tę skromną i satysfakcjonującą możliwość wyboru środowiska pracy

Kilka dni temu napisałem do Interii, Onetu, WP, Dziennika internautów (widocznie temat się dla nich wyczerpał) a nawet do PEKAO S.A. Nikt się nie zainteresował. Ok. No to teraz oficjalnie - lista 1600 kandydatów do pracy w PEKAO jest dostępna w serwisie thepiratebay.org. Skąd wiem? Dostałem anonimową wiadomość na GG

Gratulacje!

UPDATE:
Ok, usuwam link, skoro tego chcecie. Rozumiem, że lepiej będzie aby dryfował on sobie w sieci a archiwum będzie ściągane, już po cichu, przez kolejnych internautów i wtedy nie będę "krzywdził" tych ludzi z PEKAO a bank z radością triumfalnie ogłosi, że sprawa zamknięta i wszystko gra.

18/07/08 - link został usunięty przez autora.

Żył sobie pewien człowiek. Człowiek, który wśród wielu mani i nałogów miał jeden szczególny. Lubił przesadzać. Nadgroliwość tą dzielił z inna, równie irytującą cechą, jaką jest zamartwianie się. Jak desktruktywnie wpływało to na jego życie, miał się dowiedzieć niedługo...

Choć efekty były mizerne, człowiek ów pracował. Pracował cieżko. Praca jego, z grubsza, polegała na piciu naparu sporządzanego z palonych ziaren kawowca i układania literek na czymyś, co wyglądało jak okno ale próba wyjrzenia przez nie kończyła się w najlepszym wypadku jego wymianą lub plastrem na nosie. Przyzwoitość nakazuje wspomnieć, że zadanie polegało na tym aby stukając w plastikowe kolcki ułożyć literki w logiczną całość. Całość w rezultacie okazywała się mało logiczna, zwłaszcza po konsultacji ze zleceniodawcą jednak człowieczek nie zrażał się tym i dalej robił swoje.

Praca pochłaniała człowieczka jak Etiopczyk kaszkę, toteż bohater nasz często zapominał o innych, ważnych sprawach, takich jak właśnie regularne i rożnorodne odżywianie. Szczytem ambicji seksualnych stało się przeglądanie azjatyckich obrazków a sport ograniczał się do wyrzucenia zużytego tytoniu przez okno. Trwało to dobrych kilka miesięcy aż człowiek ów poczuł się źle...

c.d.b.m.n.

Dziś żona wyjeżdża z moimi znajomymi na weekend na Hel. Dlaczego ja nie jadę? A bo mi się nie chce. Mam inne, ciekawsze rzeczy do roboty. Oprócz klepania kodu planuje wizytę w kinie (ona nie lubi horrorów), kilkugodzinną partyjkę Half Life'a (ona nie lub jak gram) i butelkę czegoś mocnego i bardzo nielegalnego (ona nie lubi jak pije). Zapowiada się nieźle :]

Autor ciekawego i dość nowatorskiego serwisu ocenpracodawce.pl, o którym kiedyś pisałem poinformował wczoraj, że jego strona zawiesza swoją działalność, głównie z uwagi na ego przewrażliwionych szefów nasyłających na niego niedouczonych prawników. Szkoda. Tyle mam do powiedzenia.

Żona zrobiła fotkę. Fotka od razu skojarzyła mi się z pewnym czymś. Podkręciłem ją trochę w Photoshopie i teraz konkurs - w jakiej grze wystąpił podobny motyw? (dla ułatwienia miła aranżacja pewnej piosenki). Wygrywa ten, kto pierwszy, równo po godzinie 21:00 (wcześniej się nie będzie liczyć!), napisze, o co chodzi. Zwycięzca dostanie koszulkę z logo Opery (Łuki, sorry, mam tylko L'ke ). Tymczasem spadam do Wrocławia. Wróce ok. północy z moim... malutkim - szczegóły jutro