Skip to content

Commit d31883f

Browse files
Drarig29Drarig29
committed
Improve demos
1 parent 92bb185 commit d31883f

File tree

4 files changed

+125
-135
lines changed

4 files changed

+125
-135
lines changed

‎demo/with-api.html

Lines changed: 36 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -18,44 +18,42 @@
1818
<!-- This div will be used as the root for the library. It must be **perfectly** empty to prevent a FOUC. -->
1919
<div id="example" class="brackets-viewer"></div>
2020

21-
<script>
22-
(async function () {
23-
const data = await fetch('http://localhost:3000/db')
24-
.catch(() => alert('Failed to fetch localhost. Please do `npm run db` or use json-server your own way.'))
25-
.then(res => res.json());
26-
27-
// You can manually add locales. English will be used as a fallback if keys are missing.
28-
// You can force browser language detection with: `window.localStorage['i18nextLng'] = 'ru'` and reloading the page.
29-
window.bracketsViewer.addLocale('ru', {
30-
"common": {
31-
"round-name": "раунд {{roundNumber}}",
32-
}
33-
});
34-
35-
// This is optional. You must do it before render().
36-
window.bracketsViewer.setParticipantImages(data.participant.map(participant => ({
37-
participantId: participant.id,
38-
imageUrl: 'https://github.githubassets.com/pinned-octocat.svg',
39-
})));
40-
41-
window.bracketsViewer.onMatchClicked = match => console.log(match)
42-
43-
window.bracketsViewer.render({
44-
stages: data.stage,
45-
matches: data.match,
46-
matchGames: data.match_game,
47-
participants: data.participant,
48-
}, {
49-
selector: '#example',
50-
participantOriginPlacement: 'before',
51-
separatedChildCountLabel: true,
52-
showSlotsOrigin: true,
53-
showLowerBracketSlotsOrigin: true,
54-
highlightParticipantOnHover: true,
55-
}).then(
56-
() => console.log('Render finished')
57-
);
58-
})();
21+
<script type="module">
22+
const data = await fetch('http://localhost:3000/db')
23+
.catch(() => alert('Failed to fetch localhost. Please do `npm run db` or use json-server your own way.'))
24+
.then(res => res.json());
25+
26+
// You can manually add locales. English will be used as a fallback if keys are missing.
27+
// You can force browser language detection with: `window.localStorage['i18nextLng'] = 'ru'` and reloading the page.
28+
window.bracketsViewer.addLocale('ru', {
29+
"common": {
30+
"round-name": "раунд {{roundNumber}}",
31+
}
32+
});
33+
34+
// This is optional. You must do it before render().
35+
window.bracketsViewer.setParticipantImages(data.participant.map(participant => ({
36+
participantId: participant.id,
37+
imageUrl: 'https://github.githubassets.com/pinned-octocat.svg',
38+
})));
39+
40+
window.bracketsViewer.onMatchClicked = match => console.log(match)
41+
42+
await window.bracketsViewer.render({
43+
stages: data.stage,
44+
matches: data.match,
45+
matchGames: data.match_game,
46+
participants: data.participant,
47+
}, {
48+
selector: '#example',
49+
participantOriginPlacement: 'before',
50+
separatedChildCountLabel: true,
51+
showSlotsOrigin: true,
52+
showLowerBracketSlotsOrigin: true,
53+
highlightParticipantOnHover: true,
54+
})
55+
56+
console.log('Render finished')
5957
</script>
6058
</body>
6159

‎demo/with-local-storage.html

Lines changed: 42 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -18,53 +18,51 @@
1818
<!-- This div will be used as the root for the library. It must be **perfectly** empty to prevent a FOUC. -->
1919
<div id="example" class="brackets-viewer"></div>
2020

21-
<script>
22-
(() => {
23-
const urlParams = new URLSearchParams(window.location.search);
24-
const id = urlParams.get('id');
21+
<script type="module">
22+
const urlParams = new URLSearchParams(window.location.search);
23+
const id = urlParams.get('id');
2524

26-
const bracketsStore = JSON.parse(localStorage.getItem('brackets'));
25+
const bracketsStore = JSON.parse(localStorage.getItem('brackets'));
2726

28-
if (null === bracketsStore || !(id in bracketsStore)) {
29-
alert('Key is not found in data!');
30-
return;
31-
}
27+
if (null === bracketsStore || !(id in bracketsStore)) {
28+
alert('Key is not found in data!');
29+
return;
30+
}
31+
32+
const data = bracketsStore[id];
33+
console.log(data);
3234

33-
const data = bracketsStore[id];
34-
console.log(data);
35-
36-
// You can manually add locales. English will be used as a fallback if keys are missing.
37-
// You can force browser language detection with: `window.localStorage['i18nextLng'] = 'ru'` and reloading the page.
38-
window.bracketsViewer.addLocale('ru', {
39-
"common": {
40-
"round-name": "раунд {{roundNumber}}",
41-
}
42-
});
43-
44-
// This is optional. You must do it before render().
45-
window.bracketsViewer.setParticipantImages(data.participant.map(participant => ({
46-
participantId: participant.id,
47-
imageUrl: 'https://github.githubassets.com/pinned-octocat.svg',
48-
})));
49-
50-
window.bracketsViewer.onMatchClicked = match => console.log(match)
51-
52-
window.bracketsViewer.render({
53-
stages: data.stage,
54-
matches: data.match,
55-
matchGames: data.match_game,
56-
participants: data.participant,
57-
}, {
58-
selector: '#example',
59-
participantOriginPlacement: 'before',
60-
separatedChildCountLabel: true,
61-
showSlotsOrigin: true,
62-
showLowerBracketSlotsOrigin: true,
63-
highlightParticipantOnHover: true,
64-
}).then(
65-
() => console.log('Render finished')
66-
);
67-
})()
35+
// You can manually add locales. English will be used as a fallback if keys are missing.
36+
// You can force browser language detection with: `window.localStorage['i18nextLng'] = 'ru'` and reloading the page.
37+
window.bracketsViewer.addLocale('ru', {
38+
"common": {
39+
"round-name": "раунд {{roundNumber}}",
40+
}
41+
});
42+
43+
// This is optional. You must do it before render().
44+
window.bracketsViewer.setParticipantImages(data.participant.map(participant => ({
45+
participantId: participant.id,
46+
imageUrl: 'https://github.githubassets.com/pinned-octocat.svg',
47+
})));
48+
49+
window.bracketsViewer.onMatchClicked = match => console.log(match)
50+
51+
await window.bracketsViewer.render({
52+
stages: data.stage,
53+
matches: data.match,
54+
matchGames: data.match_game,
55+
participants: data.participant,
56+
}, {
57+
selector: '#example',
58+
participantOriginPlacement: 'before',
59+
separatedChildCountLabel: true,
60+
showSlotsOrigin: true,
61+
showLowerBracketSlotsOrigin: true,
62+
highlightParticipantOnHover: true,
63+
})
64+
65+
console.log('Render finished')
6866
</script>
6967
</body>
7068

‎demo/with-printing.html

Lines changed: 28 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -45,37 +45,34 @@
4545
<!-- This div will be used as the root for the library. It must be **perfectly** empty to prevent a FOUC. -->
4646
<div id="example" class="brackets-viewer"></div>
4747

48-
<script>
49-
(async function () {
50-
const data = await fetch('http://localhost:3000/db')
51-
.catch(() => alert('Failed to fetch localhost. Please do `npm run db` or use json-server your own way.'))
52-
.then(res => res.json());
53-
54-
55-
window.bracketsViewer.addLocale('en', {
56-
"common": {
57-
"group-name-winner-bracket": "{{stage.name}}",
58-
"group-name-loser-bracket": "{{stage.name}} - Repechage",
59-
}
60-
});
61-
62-
window.bracketsViewer.render({
63-
stages: data.stage,
64-
matches: data.match,
65-
matchGames: data.match_game,
66-
participants: data.participant,
67-
}, {
68-
selector: '#example',
69-
participantOriginPlacement: 'before',
70-
separatedChildCountLabel: true,
71-
showSlotsOrigin: true,
72-
showLowerBracketSlotsOrigin: true,
73-
highlightParticipantOnHover: true,
74-
}).then(
75-
() => console.log('Render finished')
76-
);
77-
})();
48+
<script type="module">
49+
const data = await fetch('http://localhost:3000/db')
50+
.catch(() => alert('Failed to fetch localhost. Please do `npm run db` or use json-server your own way.'))
51+
.then(res => res.json());
52+
53+
window.bracketsViewer.addLocale('en', {
54+
"common": {
55+
"group-name-winner-bracket": "{{stage.name}}",
56+
"group-name-loser-bracket": "{{stage.name}} - Repechage",
57+
}
58+
});
59+
60+
await window.bracketsViewer.render({
61+
stages: data.stage,
62+
matches: data.match,
63+
matchGames: data.match_game,
64+
participants: data.participant,
65+
}, {
66+
selector: '#example',
67+
participantOriginPlacement: 'before',
68+
separatedChildCountLabel: true,
69+
showSlotsOrigin: true,
70+
showLowerBracketSlotsOrigin: true,
71+
highlightParticipantOnHover: true,
72+
})
73+
74+
console.log('Render finished')
7875
</script>
7976
</body>
8077

81-
</html>
78+
</html>

‎demo/with-ui.html

Lines changed: 19 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232

3333
<div id="createNewBracket"></div>
3434
<script type="text/javascript" src="../dist/stage-form-creator.min.js"></script>
35-
<script type="text/javascript">
35+
<script>
3636
const config = {
3737
parent_id: 'createNewBracket',
3838
html_name_id: 'name',
@@ -49,31 +49,28 @@
4949
group_default_size: 1
5050
}
5151

52-
window.stageFormCreator(config, function (config) {
53-
(async function () {
54-
await window.bracketsManager.create(config)
55-
.then(() => {
56-
const rawStoredBrackets = localStorage.getItem(BRACKETS);
52+
window.stageFormCreator(config, async (config) => {
53+
await window.bracketsManager.create(config)
5754

58-
if (null === rawStoredBrackets || '' === rawStoredBrackets) {
59-
localStorage.setItem(BRACKETS, JSON.stringify({
60-
0: window.inMemoryDatabase.data,
61-
}));
55+
const rawStoredBrackets = localStorage.getItem(BRACKETS);
6256

63-
window.location.href = '?id=0';
64-
}
57+
if (null === rawStoredBrackets || '' === rawStoredBrackets) {
58+
localStorage.setItem(BRACKETS, JSON.stringify({
59+
0: window.inMemoryDatabase.data,
60+
}));
6561

66-
let storedBrackets = JSON.parse(rawStoredBrackets);
67-
console.log(storedBrackets);
62+
window.location.href = '?id=0';
63+
}
6864

69-
let index = Object.keys(storedBrackets).length;
70-
storedBrackets[index] = window.inMemoryDatabase.data;
65+
let storedBrackets = JSON.parse(rawStoredBrackets);
66+
console.log(storedBrackets);
7167

72-
localStorage.setItem(BRACKETS, JSON.stringify(storedBrackets));
68+
let index = Object.keys(storedBrackets).length;
69+
storedBrackets[index] = window.inMemoryDatabase.data;
7370

74-
window.location.href = '?id=' + index;
75-
});
76-
})();
71+
localStorage.setItem(BRACKETS, JSON.stringify(storedBrackets));
72+
73+
window.location.href = '?id=' + index;
7774
});
7875
</script>
7976

@@ -92,7 +89,7 @@ <h3></h3>
9289
</div>
9390
</div>
9491

95-
<script type="text/javascript">
92+
<script>
9693
const BRACKETS = 'brackets';
9794
const INPUT_MASK = 'input-mask';
9895
const INPUT_SUBMIT = 'input-submit';
@@ -225,4 +222,4 @@ <h3></h3>
225222
</script>
226223
</body>
227224

228-
</html>
225+
</html>

0 commit comments

Comments
 (0)