summaryrefslogtreecommitdiff
path: root/book/src/main/resources/js/ui.js
blob: 5f144bb24d82be3a23402b1224f14b3874d87feb (plain) (blame)
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
document.addEventListener("DOMContentLoaded", function(){
    console.log("HIGHLIGHTING")

    var layout   = document.getElementById('layout'),
        menu     = document.getElementById('menu'),
        menuLink = document.getElementById('menuLink');

    function toggleClass(element, className) {
        var classes = element.className.split(/\s+/),
            length = classes.length,
            i = 0;

        for(; i < length; i++) {
          if (classes[i] === className) {
            classes.splice(i, 1);
            break;
          }
        }
        // The className is not found
        if (length === classes.length) {
            classes.push(className);
        }

        element.className = classes.join(' ');
    }

    menuLink.onclick = function (e) {
        var active = 'active';

        e.preventDefault();
        toggleClass(layout, active);
        toggleClass(menu, active);
        toggleClass(menuLink, active);
    };


    var snippets = document.getElementsByClassName("highlight-me");
    for(var i = 0; i < snippets.length; i++){
        console.log("highlighting", snippets[i])
        hljs.highlightBlock(snippets[i])
    }




    // Cache selectors
    var lastId = -1;
    var main = document.getElementById("main");

    scrollItems = document.getElementsByClassName("menu-item");

    scrollHeaders = []

    for(var i = 0; i < scrollItems.length; i++){
        scrollHeaders.push(
            document.getElementById(
                scrollItems[i].getAttribute("href").substring(1)
            )
        )
    }


    function isElementInViewport (el) {
        var rect = el.getBoundingClientRect();

        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
            rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
        );
    }
    main.addEventListener("scroll", function(){
        // Get container scroll position
        var fromTop = main.scrollTop;

        // Get id of current scroll item
        for(var i = scrollItems.length - 1; i >= 0; i--){
            if (scrollHeaders[i].offsetTop < fromTop + 100 /*fudge factor*/){
                if (lastId != i) {
                    if (lastId != -1) {
                        scrollItems[lastId].parentElement.className = scrollItems[lastId].parentElement.className.replace(
                            " pure-menu-selected",
                            ""
                        );
                    }
                    scrollItems[i].parentElement.className = scrollItems[i].parentElement.className + " pure-menu-selected"
                    if (!isElementInViewport(scrollItems[i].parentElement)){
                        scrollItems[i].parentElement.scrollIntoView(lastId > i)
                    }

                    lastId = i
                }
                break;
            }
        }
    });
});