Dokončujeme zaujímavé interaktívne menu v JavaScripte

V tomto pokračovaní JavaScript tutoriálu o tvorbe doplnku, ktorý zinteraktivní menu na okrúhle, script dosadí pozície podpoložiek menu a nastaví skrývanie a zobrazovanie podpoložiek.

Sínus a Cosinus

Aby sme zistili pozíciu X a Y, musíme použiť matematické operácie sin a cos. Obe sú v Math a obe počítajú s radiány. K prevodu stupňov na radiány sa používa vzorec Math.PI / 180 * stupna. Pre tento účel si vytvoríme funkciu ktorú umiestnime do Math. Tam také funkcie predsa patrí. JavaScript je natoľko veľkorysý, že si môžeme vždy dať čokoľvek kamkoľvek. Do Math si teda zadefinujeme funkciu deg2rad, ktorá prijíma jediný parameter - stupňa a vracia radiány.

Math.deg2rad = function (degrades) {
    return Math.PI / 180 * degrades
}

Goniometrické funkcie použijeme tak, že nám cos (znamyUhel) vráti hodnotu, ktorú keď vynásobíme s polomerom a pripočítame X stredu. Tak dostaneme hodnotu X, na ktorej bude naša podpoložka. Pre X je to podobné s tým rozdielom, že namiesto cos () použijeme sin (). Od X a Y ešte musíme odpočítať polovičnú veľkosť podpoložky. Celá metóda by mohla vyzerať nasledovne:

RadialMenu.prototype.setPositions = function () {
    for (var i = 0; i < this.children.length; i++) {
        var menu = this.children[i]
        var degressBetweenSubItems = 360 / this.children.length

        var degress = (degressBetweenSubItems * i);

        var sin = Math.sin(Math.deg2rad(degress))
        var cos = Math.cos(Math.deg2rad(degress))
        var x = this.size / 2 + (cos * this.size / 2) - menu.size / 2;
        var y = this.size / 2 + (sin * this.size / 2) - menu.size / 2;


        menu.element.style.top = y + "px";
        menu.element.style.left = x + "px";
    }
}

Štýly

Hoci sme všetky veľkosti a pozície nastavili z JavaScriptu, niektoré veci je lepšie robiť cez CSS. Do projektu si vložte štýl a zalinkujte ho do HTML stránky. Pretože sa tento tutoriál nezaoberá CSS, napísal som ho za vás. V zásade sa len jedná o to, že nastavíme, aby sa pozície nastavovali absolútne. Potom samozrejme ešte farbičky, písma a nejaká animácie. Celý zdrojový kód štýlu je tu.

nav[data-radial-menu] {
    margin-top:50px;
}
nav[data-radial-menu] ul li {
    background-color: rgb(255, 237, 139);
    border-radius: 100%;
    position:relative;
    display:table;
    float:left;
    text-align:center;
    margin-left:100px;
}
    nav[data-radial-menu] span {
        font-family:Calibri;
    }
    nav[data-radial-menu] a {
        color: black;
        text-decoration:none;
    }
    nav[data-radial-menu] ul li span {
        vertical-align:middle;
        display:table-cell;
        width: 100%;
    }
    nav[data-radial-menu] ul li ul {
        position:absolute;
        top:0;
        left:0;
    }
        nav[data-radial-menu] ul li ul li {
            background-color: orange;
            position: absolute;
            display: table;
            margin-left: 0;

            -moz-animation-name: ViewSubItems;
            -o-animation-name: ViewSubItems;
            -webkit-animation-name: ViewSubItems;
            animation-name: ViewSubItems;

            -moz-animation-duration: 0.45s;
            -o-animation-duration: 0.45s;
            -webkit-animation-duration: 0.45s;
            animation-duration: 0.45s;

            -moz-animation-iteration-count: initial;
            -o-animation-iteration-count: initial;
            -webkit-animation-iteration-count: initial;
            animation-iteration-count: initial;
        }
            nav[data-radial-menu] ul li ul li span {
                position: absolute;
            }
@keyframes ViewSubItems {
    from {
        opacity:0;
    }

    to {
        opacity:1;
    }
}
@-webkit-keyframes ViewSubItems {
    from {
        opacity:0;
    }

    to {
        opacity:1;
    }
}
@-webkit-keyframes ViewSubItems {
    from {
        opacity:0;
    }

    to {
        opacity:1;
    }
}

Keď si stránku vyskúšate, už to bude vyzerať k svetu. Aby to bolo zaujímavejšie, ešte doprogramujeme pre zobrazovanie, skrývanie a zmenu týchto dvoch stavov metódy. Tým nastavíme udalosti, aby zo začiatku boli všetky podpoložky skryté a pri kliknutí sa zobrazili. Metóda HideChildren (pridajte si ju do prototypu) jednoducho prejde všetky podpoložky a nastaví im CSS vlastnosť display na none. Metóda displayChildrens bude fungovať úplne rovnako, len nastaví CSS vlastnosť display na block. Metóda displayOrHideChil­drens overí, že je tam aspoň jeden člen (presnejšie pokiaľ nie je žiadny, vyskočíme z metódy pomocou return) a inak overuje stav CSS vlastnosti display prvého elementu. Ak je block, zavoláme hideChildrens, ak nie, zavoláme displayChildrens.

RadialMenu.prototype.displayOrHideChildrens = function () {
    // numusí mít žádného člena
    if (this.children.length == 0)
        return;

    if (this.children[0].element.style.display == "none") {
        this.displayChildrens();
    } else {
        this.hideChildrens();
    }
}

No a finišujeme. V konstruktoru objekte RadialMenu nastavíme obsluhu udalosti, ktorá pri kliknutí zavolá metódu displayOrHideChil­drens. Nakoniec zavoláme metódu hideChildrens, ktorá zaistí že po načítaní budú podpoložky skryté.

Dúfam, že sa vám tento dvojdielny tutoriál páčil. Ak si chcete ďalej precvičovať JavaScript, sledujte tunajšie machri na JavaScript. Práve toto je riešenie jedného z predchádzajúcich machrov. V machri netrénujte len prácu v danom jazyku, ale aj schopnosť dokončiť projekt do deadline a nemalú váhu pri hodnotení berie do úvahy aj prehľadnosť zdrojového kódu.

V nasledujúcom cvičení, Riešené úlohy k 23. lekcii OOP v JavaScripte, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.