Nahraďte textové smajlíky obrázkovými

Knihy návštěv, diskusní fóra, chaty a jiné aplikace můžeme uživatelům zpestřit, pokud zavedeme konverzi textových smajlíků na obrázkové. Pokud do textu uživatel vloží znaky smajlíku, skript to rozpozná a nahradí sekvenci obrázkem.

Základem konverzní funkce je pole, do kterého uložíme seznam kódů smajlíků, které se budou nahrazovat. Kódy vycházejí z určitých standardů, můžeme si však vytvořit i své vlastní kódy, jen je potřeba dát pozor, aby sekvence kódu nekolidovala s některými obecně používanými texty. Například pokud bychom konvertovali tzv. zkrácenou variantu smajlíku :(, mohlo by být pro uživatele obtížné třeba zadat matematický výraz 10:(a-b). Výraz by se zkomolil, protože jeho část by se nahradila obrázkem.

Prohlédněte si ukázku. Náhrada obrázku proběhne tak, že sekvenci textového smajlíku nahradíme prostě elementem určitého obrázku, tyto obrázky musíme mít připravené v nějaké složce. Definice pole nebude až tak rozsáhlá, proto ji vložíme i s konverzní funkcí do jednoho souboru replacesmileys.php.

<?php
$replace = array();
$replace[‚:-D‘]='<img src=“smileys/1.gif“>‘;
$replace[‚:oD‘]='<img src=“smileys/15.gif“>‘;
$replace[‚:-))‘]='<img src=“smileys/2.gif“>‘;
$replace[‚:))‘]='<img src=“smileys/2.gif“>‘;
$replace[‚:)))‘]='<img src=“smileys/2.gif“>‘;
$replace[‚:-)))‘]='<img src=“smileys/2.gif“>‘;
$replace[‚:)‘]='<img src=“smileys/3.gif“>‘;
$replace[‚:-(‚]='<img src=“smileys/8.gif“>‘;
function replace_smile ($body)
{
  global $replace;  // zpřístupnit pole ve funkci
  reset($replace);  // nastavit na začátek
  while(list($key,$val) = each($replace))
    $body = str_replace($key,$val,$body); // procházet pole a nahrazovat zadané výskyty smajlíků
  return $body;
}
?>

Uvedenou funkci replace_smile stačí zavolat s parametrem textu, v kterém se mají nahradit smajlíky. Pokud funkci použijeme před uložením příspěvku (do databáze nebo textového souboru), bude smajlík trvale nahrazen a později s ním už nic nenaděláme, můžeme pouze obměňovat soubory obrázků smajlíků. Pokud příspěvek uložíme tak, jak byl odeslán, a konverzní funkci budeme volat při každém čtení příspěvku, bude čtení sice trochu pomalejší, ale máme více možností manipulace. Volba závisí na typu aplikace a jak rychlou anebo komfortní aplikaci chceme mít.

Jen čisté nahrazování smajlíků je ale řekněme poněkud suché, nehledě na to, že každý smajlík může být zadán různým způsobem a konverze pak nemusí proběhnout správně. Dobrý řešením je nabídnout uživateli vložení smajlíku jediným kliknutím. Jednak je to pohodlné, jednak uživatel hned vidí, jaký smajlík se v příspěvku zobrazí, a hlavně – nebude nám do textu psát navíc smajlíky, které se nezkonvertují nebo se nezkonvertují správně. Pro tuto nápomocnou funkci použijeme jednoduchý JavaScript. Nad pole pro zápis příspěvku naskládáme všechny obrázky smajlíků a k obrázkům přidáme obsluhu události onclick, která do rozepsaného příspěvku vloží kód smajlíku.

<script type=“text/javascript“>
function Smile(what)
{
  document.forms.comment.body.focus();
  document.forms.comment.body.value=
document.forms.comment.body.value+what;
}
</script>
<form name=“comment“ method=“post“>
<img onclick=“Smile(‚:-D ‚)“ src=“smileys/1.gif“ width=“15″ height=“15″ align=“middle“>
<img onclick=“Smile(‚:oD ‚)“ src=“smileys/15.gif“ width=“15″ height=“15″ align=“middle“>
<img onclick=“Smile(‚:-)) ‚)“ src=“smileys/2.gif“ width=“15″ height=“15″ align=“middle“>
<img onclick=“Smile(‚:-) ‚)“ src=“smileys/3.gif“ width=“15″ height=“15″ align=“middle“>
<br />
<textarea name=“body“ rows=“5″ cols=“30″ /></textarea><br />
<input type=“submit“ value=“Odeslat“ />
</form>

V ukázkovém formuláři vidíme, jak se na událost onclick vyvolanou na obrázku některého smajlíka vrátí zaměření na formulář (po kliknutí na smajlík je kurzor zpět textovém poli a uživatel může pohodlně pokračovat v psaní příspěvku). Dále je převzat parametr kódu smajlíku, který je připojen ke stávajícímu obsahu textového pole. Pokud budete vytvářet vlastní formulář, neopomeňte jej správně pojmenovat a upravit název jména textového pole v obslužné funkci, jinak nebude JavaScript pracovat správně. Kód naší ukázky si můžete stáhnout včetně obrázků, snadno si jej pak upravíte pro vlastní aplikaci.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.