Dziudek's jogger

Jakoś nigdy nie miałem motywacji by zająć się stworzeniem skryptu do tworzenia rozwijanego drzewa na bazie list nieuporządkowanych, ale zmieniło się to wraz z moimi planami stworzenia pewnej małej webaplikacji, która docelowo ma ułatwić życie programistom JavaScript. Na razie nie zdradzę szczegółów samej aplikacji, ale chciałem tu zaprezentować jak niewiele potrzeba by stworzyć rozwijane drzewko z użyciem MooTools 1.2 . Skrypt działa wszędzie poza IE, ale docelowo sama aplikacja też będzie działać na przeglądarkach wspierających standardy (bo z nich mam nadzieję korzysta tzw. grupa docelowa tworzonej aplikacji), więc póki co darowałem sobie zabawy związane z IE zwłaszcza jeszcze, że nie wiem czy to wina MooTools 1.2 w wersji beta 2 czy nie.

Oczywiście zaczęło się od kodu xHTML i CSS. W wypadku struktury dokumentu, każdy element listy ma następującą budowę:

<li><img [odpowiednia grafika węzła] /><span>Etykieta</span>[ewentualne submenu]</li>

Kod CSS prezentuje się następująco:

ul{
        margin:0;
        padding: 0;
        list-style-type: none;
        font-size: 11px;
        font-family: Arial, Verdana, sans-serif;
        color: #636363;
}

ul li{
        margin: 0;
        padding: 0 0 0 15px;
        line-height: 15px;      
        background: url(line.png) repeat-y;
}

ul li img{
        display: block;
        width: 15px;
        height: 15px;
        margin: 0 0 0 -15px;
        padding: 0;
        float: left;
}

W powyższym kodzie najważniejsze jest to, że każdy element listy ma przypisane tło, które będzie tworzyć na każdym poziomie linię, która wraz z odpowiednimi grafikami węzłów stworzy odpowiednią strukturę drzewa...

Drzewko od strony CSS i kodu xHTML jest gotowe - możemy teraz zająć się kodem JS. Zaczynamy jak zwykle od zdarzenia domready w którym umieszczamy cały pozostały kod.

Pierwsza rzecz to mała korekta kodu CSS - każdy ostatni element listy musi mieć inny obrazek węzła, a dodatkowo należy wyłączyć powtarzanie tła - bez tego, jeżeli ostatni węzeł będzie rozwijalny to obok rozwiniętego menu pojawi się linia, a tego chyba nie chcemy ? Cały problem załatwia jedna, za to dość długa linijka:

$$('ul li:last-child').getElement('img').setProperty('src','last.png').getParent().setStyle('background-repeat','no-repeat');

Sprawa druga - należy do węzłów, które mają menu podrzędne dodać odpowiednią ikonkę węzła. Rozwiązałem to w ten sposób, że dokonuję selekcji wszystkich list umieszczonych w elementach list, a następnie dla każdego z nich dokonuję selekcji rodzica (czyli węzła) i mu zmieniam grafikę oraz samą listę ukrywam (będzie rozwijana):

$$('li ul').each(function(el){
        var img = el.getParent().getElement('img');
        img.setProperty('src',(img.getProperty("src") == 'last.png') ? 'last-node.png' : 'center-node.png');
        el.setStyle("display","none");
});

No i dochodzimy do sprawy ostatniej czyli zwijania/rozwijania. Skrypt ma być elastyczny, zatem miło by było gdyby po dodaniu jakiegoś podmenu nie trzeba było dodawać kolejnego zdarzenia. Rozwiązałem to za pomocą jednego obserwatora zdarzeń, który na bazie event.target odnosi się do odpowiednich elementów, wykonując odpowiednie operacje. Na bazie atrybutu src skrypt decyduje czy lista ma być rozwinięta czy zwinięta:

$("tree").addEvent("click",function(e){
        var event = new Event(e);
        var el = event.target;
                
        if((el.getProperty("src") == 'last-node.png') || (el.getProperty("src") == 'center-node.png')){
                el.getParent().getElement('ul').setStyle('display','block')
                el.setProperty('src',(el.getProperty("src") == 'last-node.png') ? 'last-node-h.png' : 'center-node-h.png');
        }
        else if((el.getProperty("src") == 'last-node-h.png') || (el.getProperty("src") == 'center-node-h.png')){
                el.getParent().getElement('ul').setStyle('display','none')
                el.setProperty('src',(el.getProperty("src") == 'last-node-h.png') ? 'last-node.png' : 'center-node.png');
        }
});

I w ten oto sposób za pomocą kilkunastu linijek CSS i JS zamieniamy zagnieżdżone listy UL w eleganckie rozwijane drzewko.

Co jeszcze można poprawić ? Aktualnie dwie rzeczy mi się nasuwają - elementy img zamienić na divy i wykorzystać technikę z background-position by nie ładować wszystkich ikonek węzłów oddzielnie. Druga sprawa to zamienienie tego prostego skryptu w klasę, która będzie pozwalała na łatwe manipulowanie otrzymanym drzewkiem. Ale te usprawnienia stworzę już później gdy drzewko zostanie wykorzystane w webaplikacji.