-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
125 lines (105 loc) · 3.95 KB
/
index.js
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
import * as cache from './utils/cache.js';
const arBtn = document.getElementById('ar-btn');
const enBtn = document.getElementById('en-btn');
const morningTab = document.getElementById('morning');
const eveningTab = document.getElementById('evening');
const morningBtn = document.getElementById('morning-btn');
const eveningBtn = document.getElementById('evening-btn');
let currentLanguage = 'ar';
const loadAzkar = async (language) => {
const filePath = `/azkar/morning-and-evening/${language}.json`;
const data = await cache.get(filePath);
if (data) return displayAzkar(data, language);
fetch(filePath)
.then((response) => response.json())
.then((data) => {
displayAzkar(data, language);
cache.set(filePath, data);
});
};
const displayAzkar = (azkarData, language) => {
const isMorning = morningTab.style.display !== 'none';
const tab = isMorning ? morningTab : eveningTab;
const azkar = isMorning
? azkarData.filter(
(azkar) => azkar.type === 1 || azkar.type === 0,
)
: azkarData.filter(
(azkar) => azkar.type === 2 || azkar.type === 0,
);
tab.innerHTML = '';
azkar.forEach((zikr) => {
const azkarElement = document.createElement('div');
azkarElement.classList.add('card');
switch (language) {
case 'ar':
azkarElement.innerHTML = `
<p class="content">${zikr.content}</p>
<hr />
<div class="zikr-info">
<p><span class="info-subtitle">عدد مرات الذكر:</span> ${
zikr.count
} - ${zikr.count_description}</p>
<p><span class="info-subtitle">فضل الذكر:</span> ${
zikr.fadl
}</p>
<p><span class="info-subtitle">المصدر:</span> ${
zikr.source
}</p>
${
zikr.hadith_text !== ''
? `<p><span class="info-subtitle">الحديث:</span> ${zikr.hadith_text}</p>`
: ''
}
${
zikr.explanation_of_hadith_vocabulary !== ''
? `<p><span class="info-subtitle">شرح ألفاظ الحديث:</span> ${zikr.explanation_of_hadith_vocabulary}</p>`
: ''
}
</div>
`;
break;
case 'en':
azkarElement.classList.add('text-left');
azkarElement.innerHTML = `
<p class="content">${zikr.translation}</p>
<p><span class="info-subtitle">Transliteration:</span> ${zikr.transliteration}</p>
<hr />
<div class="zikr-info">
<p><span class="info-subtitle">Count:</span> ${zikr.count} - ${zikr.count_description}</p>
<p><span class="info-subtitle">Benefit of The Zikr:</span> ${zikr.fadl}</p>
<p><span class="info-subtitle">Source:</span> ${zikr.source}</p>
</div>
`;
break;
}
tab.appendChild(azkarElement);
});
};
morningBtn.addEventListener('click', () => {
morningBtn.classList.add('active');
morningTab.style.display = 'block';
eveningBtn.classList.remove('active');
eveningTab.style.display = 'none';
loadAzkar(currentLanguage);
});
eveningBtn.addEventListener('click', () => {
eveningBtn.classList.add('active');
eveningTab.style.display = 'block';
morningBtn.classList.remove('active');
morningTab.style.display = 'none';
loadAzkar(currentLanguage);
});
arBtn.addEventListener('click', () => {
currentLanguage = 'ar';
morningBtn.innerText = 'أذكار الصباح';
eveningBtn.innerText = 'أذكار المساء';
loadAzkar(currentLanguage);
});
enBtn.addEventListener('click', () => {
currentLanguage = 'en';
morningBtn.innerText = 'Morning Azkar';
eveningBtn.innerText = 'Evening Azkar';
loadAzkar(currentLanguage);
});
loadAzkar(currentLanguage);