Označovač akordov v JavaScripte

V tomto tutoriále si vytvoríme javascriptový označovač akordov. Zadáte mu text s akordy a on je sformátuje do príjemne čitateľného HTML. Pre začiatok si ukážeme, čoho by sme chceli dosiahnuť:

• hore je HTML kód, dole je výsledok
• vľavo je pôvodný kód, vpravo je upravený
• pre ukážky som sa rozhodol použiť text skladby zraz nás na kolená od mojej obľúbenej kapely Škwor

Tak sa do toho pustime. Začneme nadpisom. Ten vygenerujeme z hodnôt atribútov daného elementu. K získaniu elementov použijeme jQuery, ja ju pre jednoduchosť načítajú z webu Google.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Vytvoríme si element s textom pesničky, ktorý budeme upravovať:

<div class="song" data-song-name="Sraž nás na kolena" data-band-name="Škwor">
R:
|G#m|Sraž nás na kolena
|H|výhružka s náma nic neudělá
tak|C#|dál konec svejch dnů
hle|G#m\dám
R
1.
Zkou|H\šej jít dál tou naší
duší|C#|závislou
nej|H\si v tom sám i ostatní v
tom s|C#|námi jsou
2.
Až|H|ke hvězdám jak silný
tady|C#|zůstanou
a|H|já se ptám co pro nás
bude|C#|záchranou
co pro nás bude záchranou
R
3.
Když|H|dojde nám
zlý časy se tu|C#|rýsujou
tu|H|sílu znám
a v mozku myši|C#|fízlujou
a v mozku myši fízlujou
-()-
R
R
</div>

K html súboru si pripojíme 2 ďalšie súbory - code.js a styles.css Do súboru code.js vložíme:

$(function(){
    var songs = $('.song');
    for(var s = 0; s < songs.length; s++){
        var oldStr = songs.eq(s).text();
        var b = '';
        var songName = songs.eq(s).data('song-name'), bandName = songs.eq(s).data('band-name');
        b = '<span class="band-name">' + bandName + '&nbsp;&nbsp;-&nbsp;&nbsp;</span><span class="song-name">' + songName + '</span><br /><br />';
        songs.eq(s).html(b);
    }
});

Všetko sa samozrejme vykoná pri udalosti document.ready.

var songs = $('.song');

Nám získa všetky elementy s pesničkami, tie potom prejdeme cyklom.

var oldStr = songs.eq(s).text();

Tu používame metódu .eq (index), ktorá nám vracia jQuery objekt. Ak by sme použili .get (index), alebo [index], dostali by sme síce objekt s elementom z DOM, ale nemohli by sme na ňom volať metódy z jQuery (napr .Texty (), a pod.).

var songName = songs.eq(s).data('song-name'), bandName = songs.eq(s).data('band-name');

Toto je získanie dát z atribútov. K tomu sa obvykle používa metóda .attr (názov), ale ak je atribút zapísaný v tvare data-niečo, môžeme použiť metódu **. Dáta (názov bez "data-").

Keď stránku otvoríme. malo by sa nám vypísať toto:

Škwor  -  Sraž nás na kolena

Iste ste si všimli, že v kóde umiestňujem vygenerovaný text do elementov span s nejakými triedami. Poďme to využiť a nastylujte si ho v súbore styles.css:

.band-name
{
    color: #648;
    font-size: 2em;
    font-weight: bold;
}
.song-name
{
    color: #488;
    font-size: 1.5em;
    font-weight: bold;
}

Pokračujeme. Teraz si konečne napíšeme označovaní akordov:

var newStr = '';
var bool = false;
for(var i = 0; i < oldStr.length; i++)
{
    if((oldStr[i] == '|') || (oldStr[i] == '\\'))
    {
        if(bool)
        {
            newStr += '</sup> ';
        }
        else
            newStr += '<sup class="chord"> ';
        bool = !bool;
    }
    else if(oldStr[i] == '\n')
        newStr += '<br />';
    else
    {
        newStr += oldStr[i];
    }
}
if(bool)
    newStr += '</sup>';

Musíme ešte upraviť kód Vyhlasujúca výsledok:

b = '<span class="band-name">' + bandName + '&nbsp;&nbsp;-&nbsp;&nbsp;</span><span class="song-name">' + songName + '</span><br /><br />';
b += newStr;
songs.eq(s).html(b);

Prejdeme všetky znaky v reťazci a v prípade nájdenia znaku '|' otvoríme (či uzavrieme) element sup, ktorý sa pre akordy skvele hodí. Ak objavíme ukončenie riadku, nahradíme ho
. To preto, že prehliadač prechody na nový riadok ignoruje. Podmienka na konci je tu pre prípad, že by niektorý z akordov nebol uzavretý.

Akordy si samozrejme tiež nejako nastylujeme, stačí ich farebne odlíšiť:

.chord
{
    color: #C66;
}

Čo keby sme ale chceli akordy dočasne odstrániť, aby bol text čitateľnejší? Najlepšie riešenie bude tlačidlo. Pridáme si teda tlačidlo, ktorým akordy zneviditeľníte: HTML:

<button id="hideTabs">schovat akordy</button>

CSS:

.hidden{
    display: none;
}

JavaScript:

var boolean = false;
$('#hideTabs').click(function(){
    if(boolean)
    {
        $('.chord').removeClass('hidden');
        $('#hideTabs').text('schovat akordy');
        boolean = false;
    }
    else
    {
        $('.chord').addClass('hidden');
        $('#hideTabs').text('zobrazit akordy');
        boolean = true;
    }
});

Môžete si vyskúšať, že všetko funguje. Jedna chyba sa ale predsa len nájde. Ak je akord vnútri slová, zostane po ňom pri stlačení tlačidla medzera. Práve preto sú niektoré akordy (tie vnútri slov) ukončené znakom '\' miesto '|'. Podmienku if si teda rozdelíme:

if(oldStr[i] == '|')
{
    if(bool)
    {
        newStr += '</sup> '; // mezera mimo element sup
    }
    else
        newStr += '<sup class="chord"> ';
    bool = !bool;
}
else if(oldStr[i] == '\\')
{
    if(bool)
    {
        newStr += ' </sup>'; // mezera uvnitř elementu sup
        bool = false;
    }
}

Problému sme sa zbavili. Ďalšie, čo by sme mohli urobiť, je zoznam akordov v pesničke. Kód teda znovu rozšírime:

var tabs = new Array(); // pole s akordy
for(var i = 0; i < oldStr.length; i++)
{
    if(oldStr[i] == '|')
    {
        if(bool)
        {
            newStr += '</sup> ';
            if(tabs.indexOf(b) == -1) // akord v poli není (každý má být v seznamu jen jednou)
                tabs.push(b); // přidání
            b = ''; // vyprázdnění řetězce
        }
        else
            newStr += '<sup class="chord"> ';
        bool = !bool;
    }
    else if(oldStr[i] == '\\')
    {
        if(bool)
        {
            newStr += ' </sup>';
            if(tabs.indexOf(b) == -1) // akord v poli není (každý má být v seznamu jen jednou)
                tabs.push(b); // přidání
            b = '';
            bool = false;
        }
    }
    else if(oldStr[i] == '\n')
        newStr += '<br />';
    else
    {
        if(bool)
            b += oldStr[i];
        newStr += oldStr[i];
    }
}
if(bool)
    newStr += '</sup>';
b = '<span class="band-name">' + bandName + '&nbsp;&nbsp;-&nbsp;&nbsp;</span><span class="song-name">' + songName + '</span><br /><br />Akordy: <span class="chords">';
for(var i = 0; i < tabs.length; i++) // výpis akordů oddělených čárkami
    b += tabs[i] + ((i < tabs.length -1)?', ':'');
b += '</span>' + newStr + '<br /><br />';
songs.eq(s).html(b);

CSS:

.chords
{
    color: #C66;
    font-weight: bold;
}

Nakoniec dopíšeme zvýraznenie čísel slôh, písmena R (refrén), r: (nahradíme za Rec a - () -, čo sa vypíše ako ~ medzihra ~. Tieto veci pridáme do prehliadania textu:

JS:

else if(oldStr[i] == 'R')
{// Refrén
    if((i < (oldStr.length - 2)) && (oldStr[i + 1] == ':') && (oldStr[i + 2] == '\n'))
    {
        newStr += '<br /><span class="verse">R:</span>';
        i++;
    }
    else if((i < (oldStr.length - 1)) && (oldStr[i + 1] == '\n'))
    {
        newStr += '<br /><span class="verse">R</span>';
    }
}
else if((oldStr[i] == 'r') && (i < (oldStr.length - 1)) && (oldStr[i + 1] == ':'))
{// Recitativ
    newStr += '<br /><span class="verse">Rec:</span>';
    i++;
}
else if((!isNaN(parseInt(oldStr[i]))) && (i < (oldStr.length - 1)) && (oldStr[i + 1] == '.'))
{// číslo sloky
    newStr += '<br /><span class="verse">' + oldStr[i] + '.</span>';
    i++;
}
else if((oldStr[i] == '-') && (i < (oldStr.length - 3)) && (oldStr[i + 1] == '(') && (oldStr[i + 2] == ')') && (oldStr[i + 3] == '-'))
{// mezihra
    newStr += '<br /><span class="verse">~mezihra~</span>';
    i += 3;
}

CSS:

.verse
{
    color: #44F;
    font-weight: bold;
}

A to by bolo všetko, ak vám niečo nefunguje, skúste sa pozrieť do súborov na stiahnutie, alebo sa spýtajte v komentároch.