Skip to content

Commit 8ec67a3

Browse files
moneuronmoneuron
committed
styles
1 parent b86f23f commit 8ec67a3

2 files changed

Lines changed: 95 additions & 62 deletions

File tree

‎assets/script.js‎

Lines changed: 83 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -51,22 +51,9 @@ document.addEventListener("DOMContentLoaded", () => {
5151

5252
document.addEventListener('DOMContentLoaded', function() {
5353

54-
const emailData = {
55-
active: [
56-
'mohammadhosein.shakiba@umontreal.ca',
57-
'shakibamhosein@gmail.com',
58-
],
59-
inactive: [
60-
'shakiba.m@modares.ac.ir',
61-
'mohammadhosein.shakiba@neuromatchacademy.org',
62-
'shakiba@mail.um.ac.ir / shakiba@alumni.um.ac.ir',
63-
'm.shakiba@gosafir.com'
64-
]
65-
};
66-
6754
const toggleText = {
6855
default: 'CONTACT',
69-
alternate: 'HOME'
56+
alternate: 'HOME'
7057
};
7158

7259
// --- Selectors ---
@@ -75,73 +62,107 @@ document.addEventListener('DOMContentLoaded', function() {
7562
const paperItems = document.querySelectorAll('.paper-item');
7663
const footer = document.querySelector('footer');
7764

78-
function createEmailBlockquote({ active, inactive }) {
79-
const container = document.createElement('div');
80-
container.id = 'email-blockquote';
81-
container.classList.add('hidden-view');
82-
83-
container.innerHTML = `
84-
<div class="row">
85-
<div class="col-xs-6">
86-
<span class="email-badge email-badge-active">Active</span>
87-
<ul class="list-unstyled" style="margin-top: 12px;">
88-
${active.map(email => `
89-
<li style="padding: 5px 0; border-bottom: 1px solid #eee;">
90-
<small>${email}</small>
91-
</li>
92-
`).join('')}
93-
</ul>
94-
</div>
95-
<div class="col-xs-6">
96-
<span class="email-badge email-badge-inactive">Inactive</span>
97-
<ul class="list-unstyled" style="margin-top: 12px;">
98-
${inactive.map(email => `
99-
<li style="padding: 5px 0; border-bottom: 1px solid #eee; color: #777;">
100-
<small>${email}</small>
101-
</li>
102-
`).join('')}
103-
</ul>
104-
</div>
105-
</div>
106-
<p class="text-muted" style="margin-top: 20px; font-style: italic;">
107-
<small>Feel free to reach out via the active addresses.</small>
108-
</p>
109-
`;
110-
return container;
111-
}
112-
113-
// --- Inject CSS class for hiding elements (add to your stylesheet or inject here) ---
65+
// --- Inject CSS class for hiding elements ---
11466
const style = document.createElement('style');
11567
style.textContent = `.hidden-view { display: none !important; }`;
11668
document.head.appendChild(style);
11769

118-
// --- Build and insert email blockquote ---
119-
const emailBlockquote = createEmailBlockquote(emailData);
120-
const insertionPoint = mainBlockquote || document.querySelector('.col-xs-12');
121-
if (insertionPoint) {
122-
insertionPoint.insertAdjacentElement('afterend', emailBlockquote);
70+
// --- Build email block from data (same as before) ---
71+
function createEmailBlockquote({ active, inactive }) {
72+
const container = document.createElement('div');
73+
container.id = 'email-blockquote';
74+
container.classList.add('hidden-view'); // start hidden
75+
76+
container.innerHTML = `
77+
<div class="row">
78+
<div class="col-xs-6">
79+
<span class="email-badge email-badge-active">Active</span>
80+
<ul class="list-unstyled" style="margin-top: 12px;">
81+
${active.map(email => `
82+
<li style="padding: 5px 0; border-bottom: 1px solid #eee;">
83+
<small>${email}</small>
84+
</li>
85+
`).join('')}
86+
</ul>
87+
</div>
88+
<div class="col-xs-6">
89+
<span class="email-badge email-badge-inactive">Inactive</span>
90+
<ul class="list-unstyled" style="margin-top: 12px;">
91+
${inactive.map(email => `
92+
<li style="padding: 5px 0; border-bottom: 1px solid #eee; color: #777;">
93+
<small>${email}</small>
94+
</li>
95+
`).join('')}
96+
</ul>
97+
</div>
98+
</div>
99+
<p class="text-muted" style="margin-top: 20px; font-style: italic;">
100+
<small>Feel free to reach out via the active addresses.</small>
101+
</p>
102+
`;
103+
return container;
123104
}
124105

125106
// --- Collect elements to toggle ---
126107
const elementsToToggle = [
127108
mainBlockquote,
128109
...paperItems,
129110
footer
130-
].filter(el => el !== null); // remove any missing elements
111+
].filter(el => el !== null);
131112

132-
// --- Toggle state ---
113+
// --- State variables ---
133114
let showingEmails = false;
115+
let emailBlockquote = null; // will hold the DOM element after fetch
116+
let emailDataPromise = null; // cache the fetch promise
117+
118+
// --- Insert the email block (called after data is ready) ---
119+
function insertEmailBlock(emailData) {
120+
if (emailBlockquote) return emailBlockquote; // already inserted
121+
122+
emailBlockquote = createEmailBlockquote(emailData);
123+
const insertionPoint = mainBlockquote || document.querySelector('.col-xs-12');
124+
if (insertionPoint) {
125+
insertionPoint.insertAdjacentElement('afterend', emailBlockquote);
126+
}
127+
return emailBlockquote;
128+
}
134129

135-
function toggleView(event) {
130+
// --- Toggle view handler ---
131+
async function toggleView(event) {
136132
event.preventDefault();
137133

138-
// Toggle visibility classes
134+
// If we're about to show emails and haven't loaded them yet, fetch now
135+
if (!showingEmails && !emailDataPromise) {
136+
// Show a temporary loading state (optional)
137+
toggleBtn.textContent = '...';
138+
139+
emailDataPromise = fetch('/emails.json')
140+
.then(response => {
141+
if (!response.ok) throw new Error('Failed to load email data');
142+
return response.json();
143+
})
144+
.catch(error => {
145+
console.error('Could not load emails:', error);
146+
// Fallback: show an error message instead of emails
147+
return { active: [], inactive: ['Error loading email addresses.'] };
148+
});
149+
}
150+
151+
// Wait for the data if we're opening the view for the first time
152+
if (!showingEmails && emailDataPromise) {
153+
const emailData = await emailDataPromise;
154+
insertEmailBlock(emailData);
155+
}
156+
157+
// Toggle visibility
158+
if (emailBlockquote) {
159+
emailBlockquote.classList.toggle('hidden-view');
160+
}
139161
elementsToToggle.forEach(el => el.classList.toggle('hidden-view'));
140-
emailBlockquote.classList.toggle('hidden-view');
141-
162+
142163
// Update button text
143164
toggleBtn.textContent = showingEmails ? toggleText.default : toggleText.alternate;
144-
165+
145166
// Flip state
146167
showingEmails = !showingEmails;
147168
}

‎emails.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"active": [
3+
"mohammadhosein.shakiba@umontreal.ca",
4+
"shakibamhosein@gmail.com"
5+
],
6+
"inactive": [
7+
"shakiba.m@modares.ac.ir",
8+
"mohammadhosein.shakiba@neuromatchacademy.org",
9+
"shakiba@mail.um.ac.ir / shakiba@alumni.um.ac.ir",
10+
"m.shakiba@gosafir.com"
11+
]
12+
}

0 commit comments

Comments
 (0)