Dokončení hvězdičkového hodnocení v JavaScriptu

V minulém tutoriálu o tvorbě hvězdičkového hodnocení v JavaScriptu jsme rozpracovali HTML část. V dnešním dílu ji dokončíme a přidáme JavaScript. Hodnocení tím oživíme a také dokončíme.

Použití obrázkového písma

Elementům, do kterých chceme přiřadit obrázkový znak, přidáme třídu glyphicon a poté třídu, která reprezentuje znak. Seznam všech tříd pro jednotlivé znaky naleznete na http://getbootstrap.com/components/. Nám stačí znaky star a star-empty. Na úvod všechny hvězdičky necháme prázdné, spany budou vypadat následovně:

<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>

Nyní budou naše hvězdičky vypadat následovně:

Jsou však docela malé. Přidejme CSS a do naší třídy review-star přidejme vlastnost font-size s hodnotou 25px, čímž hvězdičky zvětšíme. Také jim nastavíme kurzor myši na ruku. Když jsme již u CSS, nastavme formuláři centrování.

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

form.review  {
    text-align: center;
}

Výsledek:

Již jste asi postřehli, že kdybychom zvolili obrázky, museli bychom otevírat grafický editor a zvětšovat obrázek (což ke všemu sníží jeho kvalitu) nebo ho pracně vytvářet znovu.

Označování hvězdiček při kliknutí

Začneme označováním hvězdičky kliknutím. V obsluze události pro načtení dokumentu si tedy načtěme hvězdičky podle třídy review-star a přidejme jim obsluhu události click na funkci setStars(), kterou vzápětí vytvoříme.

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

setStars

Vytvořme si funkci setStars().

Ve funkci, která se volá při kliknutí na tlačítko, je objekt, na který uživatel klikne, nastaven do proměnné this. Tento element není elementem jQuery, ale to nám zrovna moc nevadí. Potřebujeme získat index v poli prvků elementů dané hvězdičky, což nám vrátí počet "vybraných" hvězdiček počítaný od nuly. Z prvku this si tedy vezmeme parentElement, poté children,... Jenže "pole" children není pole, ale jedná se o objekt HTMLCollection, který sice polem není, ale chová se jako pole. Bohužel však neobsahuje metodu indexOf(). V podstatě nám však v JavaScriptu (v jiných jazycích by se to muselo řešit složitěji) nic nebrání buďto metodu indexOf() objektu HTMLCollection doprogramovat ručně nebo mu prostě říci, aby přidal do objektu HtmlCollection funkci úplně stejnou jako je indexOf() na poli. Přidejme tedy na začátek souboru následující řádek.

HTMLCollection.prototype.indexOf = [].indexOf;

Nyní již na kolekci HTMLCollection můžeme zcela normálně zavolat metodu indexOf(), tak, jak jsme zvyklí na poli.

Uložme si tedy počet vybraných hvězdiček do proměnné a přičtěme k ní jedničku, abychom číslo dostali do uživateli přívětivější podoby než je počítání od nuly.

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

Nastavme tuto hodnotu inputu, který má id rating.

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

returnStartState

Ta technicky nejpodstatnější část je za námi. Nyní je však dobré uživateli zvýraznit tolik hvězdiček, kolik vybral. Protože to budeme dělat na více místech, vytvoříme si na to funkci returnStarState().

V té si znovu načteme hvězdičky. Čistě teoreticky bychom mohli mít hvězdičky uložené globálně, ale to se nedoporučuje kvůli udržovatelnosti a přehlednosti zdrojového kódu a předáváním dat se pro zjednodušení zabývat nebudeme, tak si je načteme znovu.

Nejprve vyresetujeme stav všech hvězdiček. Hvězdičky budeme označovat změnou třídy glyphicon-star-empty za glyphicon-star. Proto všem hvězdičkám odstraníme třídu glyphicon-star a všem nastavíme třídu glyphicon-star-empty.

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

Poté cyklem projdeme počet vybraných hvězdiček a těmto hvězdičkám to uděláme naopak, odstraníme třídy glyphicon-star-empty a přidáme glyphicon-star. Řídící proměnnou v cyklu můžeme vyčíst z hodnoty v skrytém políčku.

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

Funkci zavolejme na konci funkce setStars(). Při kliknutí na hvězdičku se všechny přední a ona sama vyplní.

Hover hvězdiček

Hover hvězdiček musíme obsloužit sami a v CSS to nepůjde, protože musíme označit i předchozí hvězdičky. Vytvořme si funkci starHover(), která se zavolá při najetí myši a funkci při vyjetí již máme hotovou - využijeme returnStarState(). Nastavme tedy obsluhy události mouseenter a mouseleave hvězdičkám v obsluze události pro načtení dokumentu.

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

Ve funkci si musíme získat počet hvězdiček, které chce uživatel označit. I u obsluhy události mouseenter si opět získáme počet vybraných hvězdiček pomocí indexOf() na kolekci children rodiče elementu, nad který uživatel umístil kurzor. Ten je opět v proměnné this. Všem jim opět vyresetujeme třídy a v cyklu je nastavíme "hoverovaným" hvězdič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čátku scriptu je dobré možná ještě označit několik hvězdiček do výchozího stavu, což lze udělat několika cestami, například zavoláním metody (javascriptové, nikoli jQuery) click() na objekt hvězdičky.

stars[2].click();

Gratuluji. Script máme hotový, můžeme jej vyzkoušet. Přidejme si do formuláře nějaké potvrzovací tlačítko a sledujme, že můžeme vybírat hvězdičky a jak se při odeslání formuláře počet vybraných hvězdiček umístí do adresního okna prohlížeče.