Dokončenie hviezdičkového hodnotenia v JavaScripte

V minulom tutoriále o tvorbe hviezdičkového hodnotenia v JavaScripte sme rozpracovali HTML časť. V dnešnom dieli ju dokončíme a pridáme JavaScript. Hodnotenie tým oživíme a tiež dokončíme.

Použitie obrázkového písma

Elementom, do ktorých chceme priradiť obrázkový znak, pridáme triedu glyphicon a potom triedu, ktorá reprezentuje znak. Zoznam všetkých tried pre jednotlivé znaky nájdete na http://getbootstrap.com/components/. Nám stačí znaky star a star-empty. Na úvod všetky hviezdičky necháme prázdne, spanie budú vyzerať nasledovne:

<span class="glyphicon glyphicon-star-empty review-star"></span>
<span class="glyphicon glyphicon-star-empty review-star"></span>
<span class="glyphicon glyphicon-star-empty review-star"></span>
<span class="glyphicon glyphicon-star-empty review-star"></span>
<span class="glyphicon glyphicon-star-empty review-star"></span>

Teraz budú naše hviezdičky vyzerať nasledovne:

Sú však celkom malé. Pridajme CSS a do našej triedy review-star pridajme vlastnosť font-size s hodnotou 25px, čím hviezdičky zväčšíme. Tiež im nastavíme kurzor myši na ruku. Keď sme už u CSS, nastavme formulári centrovanie.

.review-star {
    font-size:25px;
    cursor: pointer;
}

form.review  {
    text-align: center;
}

výsledok:

Už ste asi postrehli, že keby sme zvolili obrázky, museli by sme otvárať grafický editor a zväčšovať obrázok (čo ku všetkému zníži jeho kvalitu) alebo ho pracne vytvárať znova.

Označovanie hviezdičiek pri kliknutí

Začneme označovaním hviezdičky kliknutím. V obsluhe udalosti pre načítanie dokumentu si teda načíta hviezdičky podľa triedy review-star a pridajme im obsluhu udalosti click na funkciu setStars (), ktorú vzápätí vytvoríme.

$(document).ready(function() {
    var stars = $(".review-star");
    stars.click(setStars);
});

SetStars

Vytvorme si funkciu setStars ().

Vo funkcii, ktorá sa volá pri kliknutí na tlačidlo, je objekt, na ktorý používateľ klikne, nastavený do premennej this. Tento element nie je elementom jQuery, ale to nám práve veľmi nevadí. Potrebujeme získať index v poli prvkov elementov danej hviezdičky, čo nám vráti počet "vybraných" hviezdičiek počítaný od nuly. Z prvku this si teda vezmeme parentElement, potom children, ... Lenže "pole" children nie je poľa, ale jedná sa o objekt HTMLCollection, ktorý síce poľom nie je, ale chová sa ako pole. Bohužiaľ však neobsahuje metódu indexOf (). V podstate nám však v JavaScripte (v iných jazykoch by sa to muselo riešiť zložitejšie) nič nebráni buď metódu indexOf () objektu HTMLCollection doprogramovať ručne alebo mu jednoducho povedať, aby pridal do objektu HtmlCollection funkciu úplne rovnakú ako je indexOf () na poli. Pridajme teda na začiatok súboru nasledujúci riadok.

HTMLCollection.prototype.indexOf = [].indexOf;

Teraz už na kolekciu HTMLCollection môžeme úplne normálne zavolať metódu indexOf (), tak, ako sme zvyknutí na poli.

Uložte si teda počet vybraných hviezdičiek do premennej a pripočítame k nej jedničku, aby sme číslo dostali do užívateľovi prívetivejšie podoby ako je počítanie od nuly.

var selectedStars = this.parentElement.children.indexOf(this) + 1;

Nastavme túto hodnotu inputu, ktorý má id rating.

$("#rating").val(selectedStars);

ReturnStartState

Tá technicky najpodstatnejšia časť je za nami. Teraz je však dobré užívateľovi zvýrazniť toľko hviezdičiek, koľko vybral. Pretože to budeme robiť na viacerých miestach, vytvoríme si na to funkciu returnStarState ().

V tej si znovu načítame hviezdičky. Čisto teoreticky by sme mohli mať hviezdičky uložené globálne, ale to sa neodporúča kvôli udržiavateľnosti a prehľadnosti zdrojového kódu a odovzdávaním dát sa pre zjednodušenie zaoberať nebudeme, tak si ich načítame znova.

Najprv vyresetuje stav všetkých hviezdičiek. Hviezdy budeme označovať zmenou triedy glyphicon-star-empty za glyphicon-star. Preto všetkým hviezdičkám odstránime triedu glyphicon-star a všetkým nastavíme triedu glyphicon-star-empty.

var stars = $(".review-star");
stars.addClass("glyphicon-star-empty");
stars.removeClass("glyphicon-star");

Potom cyklom prejdeme počet vybraných hviezdičiek a týmto hvězdičkám to urobíme naopak, odstránime triedy glyphicon-star-empty a pridáme glyphicon-star. Riadiaci premennou v cykle môžeme vyčítať z hodnoty v skrytom políčku.

for (var i = 0; i < $("#rating").val(); i++) {
    $(stars[i]).removeClass("glyphicon-star-empty");
    $(stars[i]).addClass("glyphicon-star");
}

Funkciu zavolajte na konci funkcie setStars (). Pri kliknutí na hviezdičku sa všetky predné a ona sama vyplní.

Hover hviezdičiek

Hover hviezdičiek musíme obslúžiť sami a v CSS to nepôjde, pretože musíme označiť aj predchádzajúce hviezdičky. Vytvorme si funkciu starHover (), ktorá sa zavolá pri nabehnutí myši a funkciu pri vyjdenie už máme hotovú - využijeme returnStarState (). Nastavme teda obsluhy udalosti mouseenter a mouseleave hvězdičkám v obsluhe udalosti pre načítanie dokumentu.

stars.mouseenter(starHover);
stars.mouseleave(returnStarState);

Vo funkcii si musíme získať počet hviezdičiek, ktoré chce užívateľ označiť. Aj u obsluhy udalosti mouseenter si opäť získame počet vybraných hviezdičiek pomocou indexOf () na kolekcii children rodičia elementu, nad ktorý užívateľ umiestnil kurzor. Ten je opäť v premennej this. Všetkým im opäť vyresetuje triedy a v cykle je nastavíme "hoverovaným" hviezdičkám.

function starHover() {
    var stars = $(".review-star");
    var selectedStars = this.parentElement.children.indexOf(this) + 1;
    stars.addClass("glyphicon-star-empty");
    stars.removeClass("glyphicon-star");

    for (var i = 0; i < selectedStars; i++) {
        $(stars[i]).removeClass("glyphicon-star-empty");
        $(stars[i]).addClass("glyphicon-star");
    }
}

Na začiatku scriptu je dobré možno ešte označiť niekoľko hviezdičiek do východiskového stavu, čo sa dá urobiť niekoľkými cestami, napríklad zavolaním metódy (javascriptové, nie jQuery) click () na objekt hviezdičky.

stars[2].click();

Gratulujem. Script máme hotový, môžeme ho vyskúšať. Pridajme si do formulára nejakej potvrdzovacie tlačidlo a sledujme, že môžeme vyberať hviezdičky a ako sa pri odoslaní formulára počet vybraných hviezdičiek umiestni do adresného okna prehliadača.