atomicmenu/atomicmenu.js at master · mttshw/atomicmenu · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
function atomicMenu() {
    const atomicmenu = document.getElementsByClassName('atomicmenu');

    function atomicMenuCheckWidths(menuitems) {
        let menuitemswidth = 0;
        for (x = 0; x < menuitems.length; x++) {
            const menuitemwidth = menuitems[x].clientWidth;
            // const menuitempadding = (menuitems[x].style.paddingLeft + menuitems[x].style.paddingRight);
            // const menuitemmargin = (menuitems[x].style.marginLeft + menuitems[x].style.marginRight);
            menuitemswidth = menuitemswidth + menuitemwidth;

        }
        return (menuitemswidth+70);
    }

    for (i = 0; i < atomicmenu.length; i++) {
        const menuitems = atomicmenu[i].getElementsByClassName('atomicmenu-option');
        const menucontainer = atomicmenu[i].getElementsByClassName('atomicmenu-container');
        const atomicmenutoggle = atomicmenu[i].getElementsByClassName('atomicmenu-toggle');

        const menuwidth = atomicmenu[i].clientWidth;

        menuitemswidth = atomicMenuCheckWidths(menuitems);

        if( menuitemswidth >= menuwidth ) {
            menucontainer[0].classList.add('atomicmenu-inactive');
            menucontainer[0].classList.remove('atomicmenu-active');

            atomicmenutoggle[0].classList.add('atomicmenu-active');
            atomicmenutoggle[0].classList.remove('atomicmenu-inactive');

        } else {
            menucontainer[0].classList.add('atomicmenu-active');
            menucontainer[0].classList.remove('atomicmenu-inactive');

            atomicmenutoggle[0].classList.add('atomicmenu-inactive');
            atomicmenutoggle[0].classList.remove('atomicmenu-active');

            menuitemswidth = atomicMenuCheckWidths(menuitems);

            if( menuitemswidth >= menuwidth ) {
                menucontainer[0].classList.add('atomicmenu-inactive');
                menucontainer[0].classList.remove('atomicmenu-active');

                atomicmenutoggle[0].classList.add('atomicmenu-active');
                atomicmenutoggle[0].classList.remove('atomicmenu-inactive');
            }
        }

        atomicmenutoggle[0].onclick = function() {
            if( this.classList.contains('atomicmenu-toggleopen') ) {
                atomicmenutoggle[0].classList.remove('atomicmenu-toggleopen');
                menucontainer[0].classList.remove('atomicmenu-open');
            } else {
                atomicmenutoggle[0].classList.add('atomicmenu-toggleopen');
                menucontainer[0].classList.add('atomicmenu-open');
            }
            return false;
        }
    }
}
// on ready
document.addEventListener("DOMContentLoaded", function() {
    atomicMenu();
    window.onresize = atomicMenu;
});