Můj jQuery togglovací skript našel finišátora

Dnes vyšel na Vitamínu článek ve kterém jsem náhodou narazil na skript pro snažší togglování. Nevím přesně co jejich skript dělá a jak to dělá, ale připomělo mi to můj skript pro jQuery, který by bylo fajn vylepšit. Odkazovaný článek mimochodem obsahuje kód pro Prototype.

Togglování: z anglického toggle = mj. přepínat, proces skrývání a odkrývání nějaké části webové stránky, přepínání viditelnosti mezi stavy viditelný a skrytý. K vidění zde v postranním sloupci nebo taktéž někde jinde.

Obecně u togglování existuje obtíž, nutnost propojení tlačítka (přepínače) a oblasti, jejíž viditelnost se přepíná. Třeba kód na Vitamínu to dělá tak, že přepínacímu tlačítku definuje reakci na onclick událost, reakcí je přirozeně togglování přilehlého bloku. Považuji za zdlouhavé to dělat právě přes onclick, kdy je nezbytné explicitně udat identifikátor togglovaného bloku. Je to přece jen dost obecná operace…

Aha, a teď se koukám, že podobně jako já to dělá i skript ve Drupalu, hezké. Dělám to takle:

<!-- obepínající element, nutný -->
<section>

        <!-- togglovací tlačítko -->
        <h3 id="h-latest-articles" class="toggleable h rememberable">Togglni!</h3>

        <!-- togglovaná oblast -->
        <ul id="b-latest-articles" class="toggleable b">
                <!-- ... -->
        </ul>

</section>

Pointa je v:

• třídě .toggleable.h, která značí elementy, jimž je jinde dána reakce na onclick.
• třídě .toggleable.b, která je přepínanou oblastí
• obepínajícím (např. div) elementu, který určuje spojení tlačítko-oblast.
• .rememberable říká, že poslední stav tohoto přepínače bude pamatován v cookie

// automatic toggling
$('.h.toggleable').click(function() {

        $(this).toggleClass('closed');
        $(this).siblings('.b').slideToggle();

        // set cookie
        var cookie_content = 'open';
        if ($(this).is('.closed'))      cookie_content = 'closed';
        $.cookie('toggleable_' + $(this).attr('id'), cookie_content, {path: "/"});

});

Předchozí skript obstaral onclick:

• togglnul (čili přidal či odebral) tlačítku třídu closed
• togglnul viditelnost togglovaného bloku pomocí jQuery efektu slideToggle, což je „za/vy-sunutí“.
• uložil viditelnost bloku do cookie pomocí jQuery pluginu Cookie (tlačítko musí mít identifikátor). Jméno cookie bude toggleable_{id přepínacího tlačítka} a jejím obsahem open nebo closed.

Chcete-li dát neviditelnost jako výchozí stav, přidejte tlačítku i oblasti třídu closed a do kódu přidejte…

$('.b.toggleable.closed').hide();

Zpět ke cookie. Toto je kód, který obstará vzpomínání stavu z cookies:

// universal function for transformig cookies into "closed" class
function SetAfterCookie(element) {
        if ($.cookie('toggleable_' + element.substr(1))) {
                if ($.cookie('toggleable_' + element.substr(1)) == 'closed') {
                        $(element).addClass('closed');
                        $(element).siblings ('.b').addClass('closed');
                } else {
                        $(element).removeClass('closed');
                        $(element).siblings ('.b').removeClass('closed');
                }
        }
}


// set all rememberable things after cookie
$('.h.toggleable.rememberable').each(function (i) {
        SetAfterCookie('#' + this.id);
});

Za pomoc s cyklickým volání SetAfterCookie, díky čemuž už není třeba žádné zásahy do JS kódu, děkuji Arcaovi.

Funkčnost toho celého (togglování + pamatování v cookie) si můžete prohlédnout na Kahi's Wordpress Notes.