Skrývání komentářů

Pachollini, 6. července 2004, 08:08

Když jsem včera se zalíbením prohlížel své grafomansko-kodérské výplody na Secích, můj skrznaskrz dobrý dojem trošku kazila nepřehlednost výpisů kódu mých úžasných udělátek. Rozhodl jsem se tedy strávit krásné slunné odpoledne tvorbou malého vylepšení, které by umožnilo kódy skrývat.

Princip funkce je opět celkem jednoduchý: skript po načtení stránky projde pomocí JavaScriptu a DOMu (viz popis funkce find_class v seku Relativní výška prvku: javascriptový experiment ) celý kód a najde prvky (výpisy kódu) označené třídou skryvatkomentare. K těm přidá tlačítka tvořená elementem <span> a přiřadí jim ovladač události onclick, který zavolá funkci pro přepnutí zobrazení komentářů. Ta zároveň uloží informaci o přepnutí do cookie. Skrytí provádí tak, že elementu <body> přiřadí třídu skryjkomentare, jejíž potomci s třídou comment mají v CSS nastaven display:none. Tlačítka pro přepínání, která jsou potomky prvku s třídou skryjkomentare mají nastaven border-style: inset;, takže vypadají „zmáčknutě“ (alespoň v Mozille, MSIE a Opera vykreslují okraje tak, že se tento efekt trochu ztrácí). Změna třídy elementu <body> se projeví v celém dokumentu, takže se velmi jednoduše zobrazí / skryjí všechny komentáře zároveň se změnou vzhledu tlačítka. Toť vše, JavaScript je prostě skvělý sluha.

Podobné řešení je použito např. na webu Adaru, třeba na stránce s výpisem aktuálních odpovědí v daňové poradně (checkbox vpravo nahoře na stránce).

Výpisy kódu

Inicializační funkce, kterou je nejlepší volat úplně na konci stránky:

function init_comments()
{
document.body.className=
  document.cookie.indexOf("skryjkomentare=1")>-1?"skryjkomentare":"";
  // nastaví skrytí podle posledního uživatelova zobrazení
var $koment_elements=find_class(document.body,"skryvatkomentare");
  // najde všechny označené prvky (výpisy kódu)
if($koment_elements.length) pokud nějaké jsou
  {
  $anode=document.createElement("span"); 
  $anode.appendChild(document.createTextNode("skrýt komentáře"));
  $anode.title=
    "přepne zobrazení / skrytí komentářů pro větší přehlednost kódu";
    // vytvoří „tlačítko“ s textem a popiskem
  $bnode=document.createElement("div");
  $bnode.className="prepinackomentaru";
  $bnode.appendChild($anode);
    // vytvoří obahující div a vloží do něj tlačítko
  for($i=0;$i<$koment_elements.length;$i++) // u každého označeného prvku
    {
    $cnode=$bnode.cloneNode(true); // vytvoří kopii prvku s tlačítkem
    $cnode.onclick=switch_comments; // přiřadí ovladač události
    $koment_elements[$i].parentNode.insertBefore
      ($cnode,$koment_elements[$i]);
      // vloží ovládací prvek před výpis kódu
    $cnode=$bnode.cloneNode(true); // druhá kopie
    $cnode.onclick=switch_comments;
    $cnode.className+=" bottom"; // přidá třídu kvůli zobrazení
    $koment_elements[$i].parentNode.insertBefore
      ($cnode,$koment_elements[$i].nextSibling,$bnode.cloneNode(true));
      // vloží druhou kopii pod výpis
    }
  }
}

Funkce pro přepnutí zobrazení je velmi jednoduchá, jen otestuje, zda má prvek body přiřazen třídu skryjkomentare a pokud ano, odebere ji, pokud ne, přidá a výsledek uloží do cookie. Pokud by měl mít prvek body více tříd, je třeba použít malinko sofistikovanější funkci.

function switch_comments(e)
  {
  var $skryj=document.body.className=="skryjkomentare"?false:true;
  document.body.className=$skryj?"skryjkomentare":"";
  document.cookie="skryjkomentare="+($skryj?1:0)+";path=/";
  }

Teď už zbývá jenom nastavit v CSS všechny třídy:

.skryjkomentare .skryvatkomentare .comment{ /* základ funkčnosti */
  display:none;
}

.prepinackomentaru{ /* základní vzhled ovládacího prvku */
  font-size: x-small;
  color: green;
  text-align: right;
  margin-bottom: -1em;
}

.prepinackomentaru.bottom{ /* jiné okraje, pokud je pod výpisem */
  margin-top: -1em;
  margin-bottom: 1em;
}

.prepinackomentaru span{ /* vzhled tlačítka */
  padding: 0 0.5em;
  border: outset green 2px;
  cursor: default;
  font-weight: bold;
}

.skryjkomentare .prepinackomentaru span{ /* stisknuté tlačítko */
  border-style: inset;
}

.prepinackomentaru span:hover{
  background: #FAEE99;
}

Co vy na to?

Zatím žádné komentáře.

Aktuální Seky

.