Drag&Drop dla drzewa

Jeżeli w projekcie nad którym pracujemy potrzebna jest funkcjonalność zapewniająca sortowanie listy możemy wykorzystać dwie rzeczy - ScriptAculoUs(domyślnie dostarczona wraz z railsem) oraz ActsAsList.

Problem stanowiło natomiast utworzenie sortowalnego drzewa. Z pomocą w tym przypadku przychodzi rozwiązanie opracowane przez Svena Fuchsa.

Poniżej przykładowe dwa dema:
demo/bold.html
demo/textmate.html

LightWindow 2 i problem z flashowymi bannerami

Korzystając z doskonałego skryptu tworzącego tak zwany LightWindow (http://mysticearth.wordpress.com/2007/07/12/lightwindow-2-available/), napotkałem na dość uciążliwy problem. Sprawa polega na tym, że okno podglądu tworzone jest dynamicznie po kliknięciu na link. Zanim wyświetlony zostanie podgląd zlinkowanego zasobu biblioteka generuję animację rozwijającą w dość atrakcyjny sposób okienko. Wszystko jest dobrze, aż do momentu kiedy animacja ta nie jest wyświetlana na stronie, która zawiera flashowe dodatki. Efekt jest taki, że wszystkie flasha znajdują się nad animowaną warstwą okienka podglądu. Ostateczny wygląd jest dosyć nieciekawy.

Rozwiązań problemu jest zapewne wiele, ale ostatecznie zdecydowałem się na metodę, polegającą na tym, że wszystkie elementy flashowe przed wywołaniem okienka light window są ukrywane, a po jego wyłączeniu na nowo pokazywane.

Aby osiągnąć taki efekt należy skorzystać z dobrodziejstw jakie daje nam biblioteka Prototype (standardowo dołączana do projektu).

  <script type="text/javascript">
     swfobject.embedSWF("<%= url %>", "banner_<%=  banner.id %>", "700", "100", "9.0.0");
  </script>

  <a href="http://<%= banner.url %>" style="position:relative;z-index:1;" class="banner">
     <div id="banner_<%=  banner.id %>" style="z-index:1;" >
      <p><img src="<%= @url_for_app +banner.plik.public_filename if banner.plik %>"/></p>
     </div>
  </a>

Uwaga: do osadzenia obiektu Flash została użyta biblioteka SWFObject (gorąco polecam).

Następnie modyfikujemy dwie funkcji w lightwindow.js. Szukamy następującej linijki:

   activate : function(e, link){  

Dla ułatwienia powiem że jest to linia 252 i na samym początku dodajemy następujący wiersz:

($$('.banner').invoke('hide'));

Następnie w funkcji dekatywacji (linia 277):

 deactivate : function(){

wstawiamy

       ($$('.banner').invoke('show'));

Dzięki takim kosmetycznym zmianom nasz problem został rozwiązany.

Problem z podwójnym kliknięciem w LightWindow 2

Mam przyjemność być użytkownikiem jednej z lepszych bibliotek JavaScript do generowania tak zwanych Light Box/Window http://www.stickmanlabs.com/lightwindow/. Niestety zauważyłem, że posiada ona dość nieprzyjemny mankament objawiający się podczas podwójnego kliknięcia na linku z przypisanym stylem lightwindow. Domyślnie biblioteka rozbudowuje dla takiego elementu drzewo DOM dodając mu właściwość onClick. Niestety jeżeli nastąpi podwójne kliknięcie ramka zwiększa swoją szerokość dwa razy, co w niektórych przypadkach powoduje że staje sie szersza niż okno przeglądarki. Bezpośrednia ingerencja w bibliotekę nie jest trywialna jednak prosty trick zastosowany (niestety na każdym łączu ze stylem lightwindow) pozwala rozwiązać problem. Wystarczy dopisać:

ondblclick="return false;"