polyrhythm/ui.js at master · Angramme/polyrhythm · 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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
const createSegment = (function(){
    function createSegment(onupdate, onclose=false, cache_param=null){
        var value_cache = cache_param || {
            ratios:"",
            repeat: "",
            subdivide: "",
            scale: "",
        };
        cache_param = undefined;


        var on_dispose = [];
        const dispose = function(){
            for(var ev of on_dispose){
                ev();
            }
            on_dispose = undefined;
            value_cache = undefined;
        }
        const bind_elem_change = function(elem, change){
            const cb = function(){
                change();
                onupdate(value_cache);
            }

            elem.addEventListener("change", cb);
            on_dispose.push(function(){
                elem.removeEventListener("change", cb);
            })

            change();
        }


        var DIV = document.createElement("div");
        DIV.classList.add("segment");

        var closeBTN = null;
        if(onclose){
            //console.warn("close button not implemented!!!");
            closeBTN = document.createElement("button");
            DIV.appendChild(closeBTN);
            closeBTN.innerHTML = "close &times;";
            closeBTN.id = "closebtn";

            var event = "click";
            var close_callback = function(e){
                closeBTN.removeEventListener(event, close_callback);
                onclose();
            };

            closeBTN.addEventListener(event, close_callback);
        }

        var ratioIN = document.createElement("input");
        DIV.appendChild(ratioIN);
        ratioIN.type = "text";
        ratioIN.name = "ratios";
        ratioIN.id = "ratiosIN";
        ratioIN.title = "integer numbers separated by colons";
        ratioIN.value = "1:2";

        bind_elem_change(ratioIN, function(){
            const ratios_v = ratioIN.value;
            const ratios_e = ratios_v.trim().split(":").map(cleanEquation); //clean equatios
            const ratios_n = ratios_e.map(eval).map(v=>v?Number(v):0); //equation results

            var text = ratios_e.join(":");
            ratioIN.value = text;
            value_cache.ratios = ratios_n;
        });


        var timeOpts = document.createElement("div");
        DIV.appendChild(timeOpts);
        timeOpts.classList.add("time-options");

        {
            var table = document.createElement("table");
            timeOpts.appendChild(table);

            {
                var tr = document.createElement("tr");
                table.appendChild(tr);

                for(var txt of [
                    "repeat: ",
                    "scale: ",
                    "subdivide: ",
                ]){
                    var td = document.createElement("td");
                    tr.appendChild(td);
                    td.textContent = txt;
                }
            }
            {
                var tr = document.createElement("tr");
                table.appendChild(tr);

                for(var data of [
                    {n:"repeat", id:"repeatIN", v:"1"},
                    {n:"scale", id:"scaleIN", v:"1"},
                    {n:"subdivide", id:"subdivideIN", v:"1:1"},
                ]){
                    var td = document.createElement("td");
                    tr.appendChild(td);

                    var inp = document.createElement("input");
                    td.appendChild(inp);

                    inp.type = "text";
                    inp.name = data.n;
                    inp.id = data.id;
                    inp.value = data.v;
                    inp.title = data.n == "subdivide" ?
                        "Enter an integer or integers separated by colons. Each one represents a subdivision for an individual voice." :
                        "Enter a number representing the " + data.n + " amount.";

                    if(data.n == "subdivide"){
                        bind_elem_change(inp, (function(){
                            const value_v = this.value.trim().split(":");
                            const value_e = value_v.map(cleanEquation);
                            const value_n = value_e.map(eval).map(r=>r?Number(r):1);

                            this.value = value_e.join(":");

                            value_cache[this.name] = value_n.length == 1 ? value_n[0] : value_n;
                        }).bind(inp));
                    }else{
                        bind_elem_change(inp, (function(){
                            const value_e = cleanEquation(this.value);
                            const value_n = ( x=> x ? Number(x) : 0 )(eval(value_e));
                            this.value = value_e;

                            value_cache[this.name] = value_n;
                        }).bind(inp));
                    }
                }
            }
        }

        return [DIV, dispose];
    }

    function cleanEquation(str){
        return str.replace(/\s|[^0-9*/+\-.]/g, '');
    }

    return createSegment;
})();