Skip to content

Commit 194b7e8

Browse files
ArdenButterfieldArdenButterfield
committed
create dropdown with language options
1 parent 676760f commit 194b7e8

8 files changed

Lines changed: 175 additions & 8 deletions

File tree

‎Input Processing/__pycache__/translate.cpython-313.pyc‎

-39 Bytes
Binary file not shown.

‎Input Processing/parse_annotations_xlsx.py‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -215,17 +215,20 @@ def parse_annotations_sheet(ws, act_number, isGeneral):
215215

216216
all_annotations.sort(key=lambda a: a['act'] * 10000 + a['measure_range'][0])
217217
with open("../site/src/data/annotations.ts", 'w', encoding='utf8') as annotations_file:
218-
annotations_file.write("""export type AnnotationCode = 'dy' | 'du' | 'for' | 'int' | 'mo' | 'tim' | 'graph';
218+
annotations_file.write("""import {LanguageCode} from "./text";
219+
220+
export type AnnotationCode = 'dy' | 'du' | 'for' | 'int' | 'mo' | 'tim' | 'graph';
219221
220222
export interface Annotation {
221223
code : Array<AnnotationCode>;
222-
annotation : { 'fr' : string, 'en': string };
224+
annotation : {[language in LanguageCode] : string};
223225
act : number;
224226
is_general: boolean;
225227
page_range: [number, number];
226228
measure_range : [number, number];
227229
}
228230
231+
229232
export const annotations : Array<Annotation> =
230233
""")
231234
annotations_file.write(str(all_annotations)

‎site/de.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="de">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Wozzeck Annotierte Partitur</title>
6+
<meta name="viewport" content="width=device-width" />
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
10+
<link rel="stylesheet" href="styles/styles.css">
11+
<link rel="icon" type="image/x-icon" href="https://musique.umontreal.ca/favicon-32x32.png">
12+
<script>
13+
(function() {
14+
if (localStorage.getItem('theme') === 'light') {
15+
document.documentElement.setAttribute('data-theme', 'light');
16+
}
17+
})();
18+
</script>
19+
</head>
20+
<body>
21+
<script type="module" src="./src/main.ts"></script>
22+
<script>
23+
document.addEventListener("DOMContentLoaded", () => {
24+
window.buildWindow("de");
25+
});
26+
</script>
27+
</body>
28+
</html>

‎site/pt.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="pt">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Wozzeck Partitura Anotada</title>
6+
<meta name="viewport" content="width=device-width" />
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
10+
<link rel="stylesheet" href="styles/styles.css">
11+
<link rel="icon" type="image/x-icon" href="https://musique.umontreal.ca/favicon-32x32.png">
12+
<script>
13+
(function() {
14+
if (localStorage.getItem('theme') === 'light') {
15+
document.documentElement.setAttribute('data-theme', 'light');
16+
}
17+
})();
18+
</script>
19+
</head>
20+
<body>
21+
<script type="module" src="./src/main.ts"></script>
22+
<script>
23+
document.addEventListener("DOMContentLoaded", () => {
24+
window.buildWindow("pt");
25+
});
26+
</script>
27+
</body>
28+
</html>

‎site/src/TitleSectionManager.ts‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {text} from "./data/text";
1+
import {text, LanguageCode} from "./data/text";
22
import {globals} from "./globals";
33

44
function showCredits(showOrHide: boolean) {
@@ -31,15 +31,23 @@ function themeToggleLabel(): string {
3131
return getTheme() === 'dark' ? t.THEME_LIGHT : t.THEME_DARK;
3232
}
3333

34+
const LANGUAGES: { code: LanguageCode; label: string; page: string }[] = [
35+
{ code: 'fr', label: 'Français', page: 'fr.html' },
36+
{ code: 'en', label: 'English', page: 'en.html' },
37+
{ code: 'de', label: 'Deutsch', page: 'de.html' },
38+
{ code: 'pt', label: 'Português', page: 'pt.html' },
39+
];
40+
3441
export class TitleSectionManager {
3542
constructor() {
3643
const titleSection = document.getElementById("title-section");
3744
if (titleSection) {
38-
const otherLangPage = globals.language === 'en' ? 'fr.html' : 'en.html';
39-
const otherLangName = globals.language === 'en' ? 'FR' : 'EN';
45+
const options = LANGUAGES.map(l =>
46+
`<option value="${l.page}"${l.code === globals.language ? ' selected' : ''}>${l.label}</option>`
47+
).join('');
4048

4149
titleSection.innerHTML = `<h1>` + text[globals.language].TITLE + `</h1>
42-
<div class="title-links-and-buttons"><h3 id="info-link">Info</h3><h3 id="theme-toggle">${themeToggleLabel()}</h3><h3 class="language-switch"><a href="`+ otherLangPage + `">` + otherLangName + `</a></h3></div>`;
50+
<div class="title-links-and-buttons"><h3 id="info-link">Info</h3><h3 id="theme-toggle">${themeToggleLabel()}</h3><select id="language-select" class="language-select">${options}</select></div>`;
4351

4452
const darken = document.createElement("div");
4553
darken.id = 'darken';
@@ -62,6 +70,10 @@ export class TitleSectionManager {
6270
const toggle = document.getElementById("theme-toggle");
6371
if (toggle) toggle.textContent = themeToggleLabel();
6472
});
73+
74+
document.getElementById("language-select")?.addEventListener("change", (e) => {
75+
window.location.href = (e.target as HTMLSelectElement).value;
76+
});
6577
}
6678
}
6779
}

‎site/src/data/annotations.ts‎

Lines changed: 5 additions & 2 deletions
Large diffs are not rendered by default.

‎site/src/data/text.ts‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,70 @@ export const text = {
3333
TIMBRE: "Timbre",
3434
GRAPHICAL: "Graphical"
3535
},
36+
'pt' : {
37+
ACT: 'act',
38+
ACTS: 'acts',
39+
SCENE: 'scene',
40+
SCENES: 'scenes',
41+
SCENE_STRUCTURE: 'measures',
42+
BAR: 'bar',
43+
BARS: 'bars',
44+
BEAT: 'beat',
45+
PREV_BAR: 'previous bar',
46+
NEXT_BAR: 'next bar',
47+
PREV_PAGE: 'previous page',
48+
NEXT_PAGE: 'next page',
49+
TITLE: '<i>Wozzeck</i> Annotated Score',
50+
BYLINE: 'By Arden Butterfield, François-Hugues Leclair, and Matthieu Galliker',
51+
ANNOTATIONS: 'Annotations',
52+
TIMELINES: 'Temporal Structure',
53+
VIDEO_PLAYER: 'Video Player',
54+
PAGE: 'page',
55+
INFO: 'info',
56+
CLOSE: 'close',
57+
THEME_LIGHT: 'light mode',
58+
THEME_DARK: 'dark mode',
59+
SEARCH_PLACEHOLDER: 'Search annotations…',
60+
DYNAMICS: "Dynamics",
61+
DURATION: "Duration",
62+
FORM: "Form",
63+
INTONATION: "Intonation",
64+
MOTIFS: "Motifs",
65+
TIMBRE: "Timbre",
66+
GRAPHICAL: "Graphical"
67+
},
68+
'de' : {
69+
ACT: 'act',
70+
ACTS: 'acts',
71+
SCENE: 'scene',
72+
SCENES: 'scenes',
73+
SCENE_STRUCTURE: 'measures',
74+
BAR: 'bar',
75+
BARS: 'bars',
76+
BEAT: 'beat',
77+
PREV_BAR: 'previous bar',
78+
NEXT_BAR: 'next bar',
79+
PREV_PAGE: 'previous page',
80+
NEXT_PAGE: 'next page',
81+
TITLE: '<i>Wozzeck</i> Annotated Score',
82+
BYLINE: 'By Arden Butterfield, François-Hugues Leclair, and Matthieu Galliker',
83+
ANNOTATIONS: 'Annotations',
84+
TIMELINES: 'Temporal Structure',
85+
VIDEO_PLAYER: 'Video Player',
86+
PAGE: 'page',
87+
INFO: 'info',
88+
CLOSE: 'close',
89+
THEME_LIGHT: 'light mode',
90+
THEME_DARK: 'dark mode',
91+
SEARCH_PLACEHOLDER: 'Search annotations…',
92+
DYNAMICS: "Dynamics",
93+
DURATION: "Duration",
94+
FORM: "Form",
95+
INTONATION: "Intonation",
96+
MOTIFS: "Motifs",
97+
TIMBRE: "Timbre",
98+
GRAPHICAL: "Graphical"
99+
},
36100
'fr' : {
37101
ACT: 'acte',
38102
ACTS: 'actes',

‎site/styles/styles.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,35 @@ button {
182182
text-decoration: none;
183183
}
184184

185+
.language-select {
186+
cursor: pointer;
187+
color: rgba(255, 255, 255, 0.65);
188+
font-size: 12px;
189+
font-weight: 500;
190+
font-family: inherit;
191+
letter-spacing: 0.04em;
192+
text-transform: uppercase;
193+
padding: 4px 10px;
194+
border-radius: 20px;
195+
border: none;
196+
background: transparent;
197+
transition: color var(--transition), background var(--transition);
198+
appearance: none;
199+
-webkit-appearance: none;
200+
}
201+
202+
.language-select:hover {
203+
color: white;
204+
background: rgba(255, 255, 255, 0.12);
205+
}
206+
207+
.language-select option {
208+
background: var(--color-navy, #1a1a2e);
209+
color: white;
210+
text-transform: none;
211+
letter-spacing: normal;
212+
}
213+
185214
/* ── Timelines ───────────────────────────────────────── */
186215

187216
#timelines-section {

0 commit comments

Comments
 (0)