BallMenu/index.html at master · teo666/BallMenu · 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
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ball Menu</title>
    <link rel="stylesheet" type="text/css" href="BallMenu.css">
    <script type="text/javascript" src="./lib/jsanimator/jsAnimator.js"></script>
    <script type="text/javascript" src="./conf.js"></script>
    <script type="text/javascript" src="./Ball.js"></script>
    <script type="text/javascript" src="./BallMenu.js"></script>
    <script type="text/javascript" src="./lib/wordfilter/wordsFilter.js"></script>
</head>
<body onload="init()">

<canvas id="ballCanvas" width="5000" height="5000"></canvas>
<input id="search" class="hide" onkeyup="search_change(this.value)" autocomplete="off">
<script>

    let menu = null;
    let word_filter = null;
    let input = null;
    let search_timeout = null;
    let input_has_value = false;
    function init() {
        input = document.getElementById("search");
        menu = new BallMenu();
        let menu_conf = {
            canvas_id: 'ballCanvas',
            ball_size: 75,
            ball_max_size:500,
            ball_min_size: 10,
            ball_padding: 0.15,
        };
        menu.init(menu_conf);
        menu.resize();
        menu.center();
        //menu.drawOrigin();
        menu.drawBalls();
        document.getElementById('ballCanvas').addEventListener('mousemove', function(e) {
            menu.move(e);
        });
        document.getElementById('ballCanvas').addEventListener('wheel', function(e) {
            menu.wheel(e);
        });
        document.getElementById('ballCanvas').addEventListener('mousedown', function(e) {
            menu.down(e);
        });
        document.getElementById('ballCanvas').addEventListener('mouseup', function(e) {
            menu.up(e);
            input.focus();
        });


        word_filter = new WordsFilter(menu.getBalls());

        jsAnimator.setGlobalOnFrameRenderStart(function () {
            menu.clearAll();
            menu.incrementAccumulator();
        });
        menu.loadBall().then(function () {
            menu.drawBalls();
            jsAnimator.animationStart();
        });
        input.focus();
    }

    function search_change(val){
        //console.log(val);

        clearTimeout(search_timeout);

        if(val !== ""){
            input.classList.remove('hide');
            input_has_value = true;
        } else {
            input.classList.add('hide');
            input_has_value = false;
        }
        search_timeout = setTimeout(function () {
            word_filter.search(val);
            menu.setAllDrawable();
            jsAnimator.animationStart();
        },200);

    }

    window.addEventListener("keyup", function (e) {
        if(input_has_value && e.keyCode !== 27 && e.keyCode !== 13 ){
            return;
        }
        switch (e.keyCode){
            case 37://left
                //case 65://a
                menu.moveLeft(150);
                break;
            case 38://up
                //case 87://w
                menu.moveUp(150);
                break;
            case 39://right
                //case 68://d
                menu.moveRight(150);
                break;
            case 40://down
                //case 83://s
                menu.moveDown(150);
                break;
            case 27:// esc all transformations
                menu.resetTransformation();
                break;
            case 13:
                menu.tryOpen();
                break;
            default:
                //console.log(e);
                return;
        }
        menu.positions.stop = false;
        menu.setAllDrawable();
        jsAnimator.animationStart();

        //console.log(input.value)
    });

</script>
</body>
</html>