Skip to content

Commit f26ad5d

Browse files
xkeshavxkeshav
committed
[RZB-250021]: indic page code refactor
1 parent 0e4255f commit f26ad5d

File tree

8 files changed

+245
-336
lines changed

8 files changed

+245
-336
lines changed

‎.vscode/dictionaries/project-words.txt‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ datetime
2020
Deepavali
2121
dhaga
2222
Dhaivat
23+
dogri
2324
Dussehra
2425
ensurepip
2526
fontsource
@@ -45,13 +46,16 @@ lucide
4546
LXXX
4647
Madhyam
4748
Magha
49+
maithili
4850
Margashirsha
4951
matra
5052
matras
5153
moonsign
54+
Nakshtra
5255
nameform
5356
Nishad
5457
nodownload
58+
odia
5559
Organja
5660
orgenja
5761
paksha

‎src/components/IndicLanguageGrid.astro‎

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
---
2+
import {
3+
englishVowels,
4+
englishConsonants,
5+
allAlphabet,
6+
letterPairs,
7+
languages,
8+
getLetterForLanguage
9+
} from "@/utils/languageLetters";
10+
import "@/assets/styles/indic.css";
11+
12+
const { primary, secondary } = Astro.props;
13+
---
14+
15+
<div class="language-letters-container">
16+
<div class="main-header">
17+
<div class="toggle-container">
18+
<div class="dropdown-wrapper">
19+
<label id="lang1Label" class="dropdown-label language-label active"> PRIMARY LANGUAGE </label>
20+
<select id="primaryDropdown">
21+
<option disabled aria-disabled="true" aria-readonly="true">Select Primary Language</option>
22+
{
23+
languages.map((lang) => (
24+
<option class="opt" value={lang.code} selected={lang.code === primary}>
25+
{lang.name} ({lang.locale})
26+
</option>
27+
))
28+
}
29+
</select>
30+
</div>
31+
<button id="toggleButton" class="toggle-button" aria-label="Swap language" title="Swap language">
32+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
33+
<path d="M17 14 9 14 9 16 17 16 17 19 22 15 17 11 17 14z"></path><path
34+
d="M15 10 15 8 7 7 7 5 2 9 7 13 7 10 15 10z"></path>
35+
</svg>
36+
</button>
37+
38+
<div class="dropdown-wrapper">
39+
<label id="lang2Label" class="dropdown-label language-label"> SECONDARY LANGUAGE </label>
40+
<select id="secondaryDropdown">
41+
<option disabled aria-disabled="true" aria-readonly="true">Select Secondary Language</option>
42+
{
43+
languages.map((lang) => (
44+
<option class="opt" value={lang.code} selected={lang.code === secondary}>
45+
{lang.locale} ({lang.name})
46+
</option>
47+
))
48+
}
49+
</select>
50+
</div>
51+
</div>
52+
</div>
53+
<!-- Letters Grid Section -->
54+
<div class="language-letters-grid">
55+
<h2 class="group-heading" style="grid-column: 1 / -1;">VOWELS</h2>
56+
{
57+
letterPairs
58+
.filter((pair) => pair.type === "vowel")
59+
.map((pair, index) => (
60+
<div data-key={`vowel-${index}`} class="language-letter-card language-letter-card-vowel">
61+
<div class="language-letter-top">{getLetterForLanguage(pair, primary)}</div>
62+
<div class="language-letter-bottom">{getLetterForLanguage(pair, secondary)}</div>
63+
</div>
64+
))
65+
}
66+
67+
<div class="language-letters-separator" style="grid-column: 1 / -1;"></div>
68+
69+
<h2 class="group-heading" style="grid-column: 1 / -1;">CONSONANTS</h2>
70+
{
71+
letterPairs
72+
.filter((pair) => pair.type === "consonant")
73+
.map((pair, index) => (
74+
<div data-key={`consonant-${index}`} class="language-letter-card language-letter-card-consonant">
75+
<div class="language-letter-top">{getLetterForLanguage(pair, primary)}</div>
76+
<div class="language-letter-bottom">{getLetterForLanguage(pair, secondary)}</div>
77+
</div>
78+
))
79+
}
80+
</div>
81+
<script define:vars={{ englishVowels, englishConsonants, allAlphabet, languages, primary, secondary }} is:inline>
82+
let selectedLanguage1 = primary;
83+
let selectedLanguage2 = secondary;
84+
85+
const getLetter = (langCode, type, index) => {
86+
const langObj = languages.find((lang) => lang.code === langCode);
87+
if (!langObj) {
88+
return "";
89+
}
90+
91+
const languageName = langObj.name; // Get the full language name (e.g., "hindi", "kannada")
92+
93+
if (type === "vowel") {
94+
// Handle Marathi separately as it shares Hindi vowels
95+
if (langCode === "mr") {
96+
return allAlphabet.vowels.hindi[index] || "";
97+
}
98+
// Use the languageName to access the correct array in allAlphabets.vowels
99+
return allAlphabet.vowels[languageName]?.[index] || "";
100+
} else if (type === "consonant") {
101+
// Handle Marathi separately as it shares Hindi consonants
102+
if (langCode === "mr") {
103+
return allAlphabet.consonants.hindi[index] || "";
104+
}
105+
// Use the languageName to access the correct array in allAlphabets.consonants
106+
return allAlphabet.consonants[languageName]?.[index] || "";
107+
}
108+
return "";
109+
};
110+
111+
// Main function to swap languages
112+
const swapLanguages = () => {
113+
// Swap the language variables
114+
[selectedLanguage1, selectedLanguage2] = [selectedLanguage2, selectedLanguage1];
115+
116+
// Update the dropdown values
117+
document.getElementById("primaryDropdown").value = selectedLanguage1;
118+
document.getElementById("secondaryDropdown").value = selectedLanguage2;
119+
// Refresh the grid
120+
updateGrid();
121+
// Toggle persistent state
122+
const button = document.getElementById("toggleButton");
123+
button.classList.toggle("toggled");
124+
// Keep the animation
125+
button.classList.add("swapping");
126+
setTimeout(() => button.classList.remove("swapping"), 300);
127+
// Add visual feedback
128+
const toggleButton = document.getElementById("toggleButton");
129+
toggleButton.classList.add("swapping");
130+
setTimeout(() => {
131+
toggleButton.classList.remove("swapping");
132+
}, 300);
133+
};
134+
// Helper function to update language labels
135+
const updateGrid = () => {
136+
// Update all letter cards
137+
const vowelCards = document.querySelectorAll(".language-letter-card-vowel");
138+
const consonantCards = document.querySelectorAll(".language-letter-card-consonant");
139+
// Update vowels
140+
vowelCards.forEach((card, index) => {
141+
const topElement = card.querySelector(".language-letter-top");
142+
const bottomElement = card.querySelector(".language-letter-bottom");
143+
if (topElement && bottomElement) {
144+
topElement.textContent = getLetter(selectedLanguage1, "vowel", index);
145+
bottomElement.textContent = getLetter(selectedLanguage2, "vowel", index);
146+
// Add special styling for English text
147+
topElement.classList.toggle("english-text", selectedLanguage1 === "en");
148+
bottomElement.classList.toggle("english-text", selectedLanguage2 === "en");
149+
// Add transliteration class for proper display of diacritical marks
150+
topElement.classList.toggle("transliteration", selectedLanguage1 === "en");
151+
bottomElement.classList.toggle("transliteration", selectedLanguage2 === "en");
152+
}
153+
});
154+
// Update consonants
155+
consonantCards.forEach((card, index) => {
156+
const topElement = card.querySelector(".language-letter-top");
157+
const bottomElement = card.querySelector(".language-letter-bottom");
158+
if (topElement && bottomElement) {
159+
topElement.textContent = getLetter(selectedLanguage1, "consonant", index);
160+
bottomElement.textContent = getLetter(selectedLanguage2, "consonant", index);
161+
// Add special styling for English text
162+
topElement.classList.toggle("english-text", selectedLanguage1 === "en");
163+
bottomElement.classList.toggle("english-text", selectedLanguage2 === "en");
164+
// Add transliteration class for proper display of diacritical marks
165+
topElement.classList.toggle("transliteration", selectedLanguage1 === "en");
166+
bottomElement.classList.toggle("transliteration", selectedLanguage2 === "en");
167+
}
168+
});
169+
};
170+
// Set up event listeners
171+
document.addEventListener("DOMContentLoaded", () => {
172+
const dropdown1 = document.getElementById("primaryDropdown");
173+
const dropdown2 = document.getElementById("secondaryDropdown");
174+
const toggleButton = document.getElementById("toggleButton");
175+
// Get the popup elements
176+
const closeButton = document.getElementById("closePopup");
177+
const mainHeader = document.querySelector(".main-header");
178+
const scrollThreshold = 50; // Pixels to scroll before the header shrinks
179+
180+
function handleScroll() {
181+
if (window.scrollY > scrollThreshold) {
182+
mainHeader.classList.add("scrolled-header");
183+
} else {
184+
mainHeader.classList.remove("scrolled-header");
185+
}
186+
}
187+
188+
// Initial check in case the page is loaded with a scroll position
189+
handleScroll();
190+
191+
// Listen for scroll events
192+
window.addEventListener("scroll", handleScroll);
193+
194+
// Event listeners
195+
dropdown1.addEventListener("change", (e) => {
196+
selectedLanguage1 = e.target.value;
197+
updateGrid();
198+
});
199+
dropdown2.addEventListener("change", (e) => {
200+
selectedLanguage2 = e.target.value;
201+
updateGrid();
202+
});
203+
// Add click handler for swap button
204+
toggleButton.addEventListener("click", swapLanguages);
205+
updateGrid();
206+
});
207+
</script>
208+
</div>

0 commit comments

Comments
 (0)