Skip to content

Commit ccc9868

Browse files
PierstovalPierstoval
committed
Don't inject things in app's constructor, retrieve them manually instead
1 parent eb4f540 commit ccc9868

File tree

4 files changed

+71
-64
lines changed

4 files changed

+71
-64
lines changed

‎build/index.js

+31-8
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,39 @@
11
"use strict";
22
var App = /** @class */ (function () {
3-
function App(window, patterns_container, handpan_notes_input, handpan_notes_result_element, number_of_bars_input, number_of_bars_result_element, regenerate_button, rhythm_inputs, rhythm_input_to_enable) {
3+
function App() {
44
this.handpan_tune = new HandpanTune();
55
this._running = false;
66
this.window = window;
77
this.document = window.document;
8+
var patterns_container = this.document.getElementById('pattern');
9+
if (!(patterns_container instanceof HTMLElement)) {
10+
throw App.invalidTypeMessage('patterns_container', 'HTMLElement', typeof patterns_container);
11+
}
12+
var number_of_bars_input = this.document.getElementById('pattern_bars');
13+
if (!(number_of_bars_input instanceof HTMLInputElement)) {
14+
throw App.invalidTypeMessage('number_of_bars_input', 'HTMLInputElement', typeof number_of_bars_input);
15+
}
16+
var number_of_bars_result_element = this.document.getElementById('pattern_bars_result');
17+
if (!(number_of_bars_result_element instanceof HTMLElement)) {
18+
throw App.invalidTypeMessage('number_of_bars_result_element', 'var_type', typeof number_of_bars_result_element);
19+
}
20+
var regenerate_button = this.document.getElementById('regenerate_button');
21+
if (!(regenerate_button instanceof HTMLElement)) {
22+
throw App.invalidTypeMessage('regenerate_button', 'HTMLElement', typeof regenerate_button);
23+
}
24+
var rhythm_inputs = this.document.querySelectorAll('input[name="rhythm"]');
25+
if (!(rhythm_inputs instanceof NodeList)) {
26+
throw App.invalidTypeMessage('rhythm_inputs', 'NodeList', typeof rhythm_inputs);
27+
}
28+
var rhythm_input_to_enable = rhythm_inputs[1] || rhythm_inputs[0];
29+
if (!(rhythm_input_to_enable instanceof HTMLInputElement)) {
30+
throw App.invalidTypeMessage('rhythm_input_to_enable', 'HTMLInputElement', typeof rhythm_input_to_enable);
31+
}
832
this.patterns_container = patterns_container;
9-
this.handpan_notes_input = handpan_notes_input;
10-
this.handpan_notes_result_element = handpan_notes_result_element;
1133
this.number_of_bars_input = number_of_bars_input;
1234
this.number_of_bars_result_element = number_of_bars_result_element;
13-
this.rhythm_inputs = rhythm_inputs;
1435
this.regenerate_button = regenerate_button;
36+
this.rhythm_inputs = rhythm_inputs;
1537
this.rhythm_input_to_enable = rhythm_input_to_enable;
1638
this._currentPattern = new Pattern(0, this.handpan_tune);
1739
this._patternRenderer = new PatternRenderer(this.document, this.patterns_container);
@@ -23,8 +45,6 @@ var App = /** @class */ (function () {
2345
}
2446
this._running = true;
2547
this.regenerate_button.addEventListener('click', function () { return _this.refreshRandomPattern(); });
26-
// handpan_notes_result_element.value = 9;
27-
// handpan_notes_input.addEventListener('input', this.refreshRandomPattern);
2848
this.rhythm_input_to_enable.checked = true;
2949
this.number_of_bars_input.value = '2';
3050
this.refreshRandomPattern();
@@ -57,6 +77,9 @@ var App = /** @class */ (function () {
5777
});
5878
return value;
5979
};
80+
App.invalidTypeMessage = function (var_name, type, current_type) {
81+
return 'Variable ' + var_name + ' was expected to be a ' + type + ', ' + current_type + ' given';
82+
};
6083
return App;
6184
}());
6285
var Hand;
@@ -287,7 +310,7 @@ var PatternRenderer = /** @class */ (function () {
287310
var i = 0;
288311
for (var _i = 0, _a = pattern.hits; _i < _a.length; _i++) {
289312
var handpan_hit = _a[_i];
290-
var pattern_item = this.createPatternItem(pattern, handpan_hit);
313+
var pattern_item = PatternRenderer.createPatternItem(pattern, handpan_hit);
291314
this.container.appendChild(pattern_item);
292315
// Alternate left/right
293316
pattern_item.classList.add(handpan_hit.hand === Hand.left ? 'hand-left' : 'hand-right');
@@ -302,7 +325,7 @@ var PatternRenderer = /** @class */ (function () {
302325
i++;
303326
}
304327
};
305-
PatternRenderer.prototype.createPatternItem = function (pattern, handpan_hit) {
328+
PatternRenderer.createPatternItem = function (pattern, handpan_hit) {
306329
var pattern_item = document.createElement('div');
307330
pattern_item.className = 'pattern_item';
308331
// Display handpan hit type

‎index.html

+1-34
Original file line numberDiff line numberDiff line change
@@ -102,22 +102,6 @@
102102

103103
<form action="#">
104104

105-
<!--
106-
<fieldset class="form-group">
107-
<div class="row">
108-
<div class="col-sm-5">
109-
<label for="handpan_notes">Number of notes on your handpan (including the ding):</label>
110-
<input type="range" id="handpan_notes" class="custom-range" min="9" max="17" step="1" value="9">
111-
<div>
112-
Current:
113-
<strong id="handpan_notes_result">9</strong>
114-
</div>
115-
(this option is not used for now, but will be in the future)
116-
</div>
117-
</div>
118-
</fieldset>
119-
-->
120-
121105
<fieldset class="form-group">
122106
<p>Rhythm:</p>
123107

@@ -166,24 +150,7 @@
166150
<script src="assets/bootstrap.min.js"></script>
167151
<script src="build/index.js"></script>
168152

169-
<script>
170-
171-
(function () {
172-
const rhythm_inputs = document.querySelectorAll('input[name="rhythm"]');
173-
(new App(
174-
window,
175-
document.getElementById('pattern'),
176-
document.getElementById('handpan_notes'),
177-
document.getElementById('handpan_notes_result'),
178-
document.getElementById('pattern_bars'),
179-
document.getElementById('pattern_bars_result'),
180-
document.getElementById('regenerate_button'),
181-
rhythm_inputs,
182-
rhythm_inputs[1] || rhythm_inputs[0]
183-
)).run();
184-
})();
185-
186-
</script>
153+
<script type="text/javascript">(new App()).run();</script>
187154

188155
</body>
189156
</html>

‎src/App.ts

+37-20
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ class App {
33
private readonly window: Window;
44
private readonly document: HTMLDocument;
55
private readonly patterns_container: HTMLElement;
6-
private readonly handpan_notes_input: HTMLInputElement;
7-
private readonly handpan_notes_result_element: HTMLElement;
86
private readonly number_of_bars_input: HTMLInputElement;
97
private readonly number_of_bars_result_element: HTMLElement;
108
private readonly rhythm_inputs: NodeList;
@@ -18,27 +16,45 @@ class App {
1816
private _currentPattern: Pattern;
1917
private _patternRenderer: PatternRenderer;
2018

21-
constructor(
22-
window: Window,
23-
patterns_container: HTMLElement,
24-
handpan_notes_input: HTMLInputElement,
25-
handpan_notes_result_element: HTMLElement,
26-
number_of_bars_input: HTMLInputElement,
27-
number_of_bars_result_element: HTMLElement,
28-
regenerate_button: HTMLElement,
29-
rhythm_inputs: NodeList,
30-
rhythm_input_to_enable: HTMLInputElement
31-
) {
32-
19+
constructor() {
3320
this.window = window;
3421
this.document = window.document;
22+
23+
const patterns_container = this.document.getElementById('pattern');
24+
if (!(patterns_container instanceof HTMLElement)) {
25+
throw App.invalidTypeMessage('patterns_container', 'HTMLElement', typeof patterns_container);
26+
}
27+
28+
const number_of_bars_input = this.document.getElementById('pattern_bars');
29+
if (!(number_of_bars_input instanceof HTMLInputElement)) {
30+
throw App.invalidTypeMessage('number_of_bars_input', 'HTMLInputElement', typeof number_of_bars_input);
31+
}
32+
33+
const number_of_bars_result_element = this.document.getElementById('pattern_bars_result');
34+
if (!(number_of_bars_result_element instanceof HTMLElement)) {
35+
throw App.invalidTypeMessage('number_of_bars_result_element', 'var_type', typeof number_of_bars_result_element);
36+
}
37+
38+
const regenerate_button = this.document.getElementById('regenerate_button');
39+
if (!(regenerate_button instanceof HTMLElement)) {
40+
throw App.invalidTypeMessage('regenerate_button', 'HTMLElement', typeof regenerate_button);
41+
}
42+
43+
const rhythm_inputs = this.document.querySelectorAll('input[name="rhythm"]');
44+
if (!(rhythm_inputs instanceof NodeList)) {
45+
throw App.invalidTypeMessage('rhythm_inputs', 'NodeList', typeof rhythm_inputs);
46+
}
47+
48+
const rhythm_input_to_enable = rhythm_inputs[1] || rhythm_inputs[0];
49+
if (!(rhythm_input_to_enable instanceof HTMLInputElement)) {
50+
throw App.invalidTypeMessage('rhythm_input_to_enable', 'HTMLInputElement', typeof rhythm_input_to_enable);
51+
}
52+
3553
this.patterns_container = patterns_container;
36-
this.handpan_notes_input = handpan_notes_input;
37-
this.handpan_notes_result_element = handpan_notes_result_element;
3854
this.number_of_bars_input = number_of_bars_input;
3955
this.number_of_bars_result_element = number_of_bars_result_element;
40-
this.rhythm_inputs = rhythm_inputs;
4156
this.regenerate_button = regenerate_button;
57+
this.rhythm_inputs = rhythm_inputs;
4258
this.rhythm_input_to_enable = rhythm_input_to_enable;
4359

4460
this._currentPattern = new Pattern(0, this.handpan_tune);
@@ -54,9 +70,6 @@ class App {
5470

5571
this.regenerate_button.addEventListener('click', () => this.refreshRandomPattern());
5672

57-
// handpan_notes_result_element.value = 9;
58-
// handpan_notes_input.addEventListener('input', this.refreshRandomPattern);
59-
6073
this.rhythm_input_to_enable.checked = true;
6174

6275
this.number_of_bars_input.value = '2';
@@ -104,4 +117,8 @@ class App {
104117

105118
return value;
106119
}
120+
121+
private static invalidTypeMessage(var_name: string, type: string, current_type: string) {
122+
return 'Variable '+var_name+' was expected to be a '+type+', '+current_type+' given';
123+
}
107124
}

‎src/PatternRenderer.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ class PatternRenderer {
1313
let i = 0;
1414

1515
for (let handpan_hit of pattern.hits) {
16-
let pattern_item = this.createPatternItem(pattern, handpan_hit);
16+
let pattern_item = PatternRenderer.createPatternItem(pattern, handpan_hit);
1717

1818
this.container.appendChild(pattern_item);
1919

@@ -34,7 +34,7 @@ class PatternRenderer {
3434
}
3535
}
3636

37-
private createPatternItem(pattern: Pattern, handpan_hit: HandpanHit): HTMLElement {
37+
private static createPatternItem(pattern: Pattern, handpan_hit: HandpanHit): HTMLElement {
3838
const pattern_item = document.createElement('div');
3939
pattern_item.className = 'pattern_item';
4040

0 commit comments

Comments
 (0)