https://cheoljunp.github.io/assets/js/main.js

1// About Me content is the one by default shown
2$('#educationContent').hide();
3$('#publicationsContent').hide();
4$('#experienceContent').hide();
5$('#conferencesContent').hide();
6$('#projectsContent').hide();
7$('#tutorialsContent').hide();
8$('#academicContent').hide();
9$('#particularContent').hide();
10/* Template
11$('#nameContent').hide();
12*/
13$('#theme').hide();
14$('#lan').hide();
15
16// Hides all the divs in the particular, unless the first one
17$('.particular-clickable').next().hide();
18$('.particular-clickable').next()[0].style.display="block";
19
20$(document).ready(function(){
21
22	$.getJSON("https://api.countapi.xyz/hit/nicolasmeseguer.github.io/634c2142-b35d-430e-b51c-dad16880dd3a", function(response) {
23		$("#contadorVisitas").text(response.value);
24	});
25
26	// First time, check the theme
27	if(localStorage.getItem("theme") === null){
28		localStorage.theme = "light";
29		if (window.matchMedia('(prefers-color-scheme: dark)').matches)
30			localStorage.theme = "dark";
31	}
32	
33	// First time, check the locale
34	let userLang = navigator.language || navigator.userLanguage;
35	if(localStorage.getItem("lan") === null){
36		localStorage.lan = "en";
37		if (userLang.split('-')[0] == "es")
38			localStorage.lan = "es";
39	}
40
41	// Maybe first time or not, so load the localStorage value
42	$('<link>').appendTo('head').attr({
43		type: 'text/css', 
44		rel: 'stylesheet',
45		href: 'assets/css/light.css'
46	});
47	if (localStorage.theme == "dark") {
48		// Handle menu
49		$("link[href='assets/css/light.css']").remove();
50		$('<link>').appendTo('head').attr({
51			type: 'text/css', 
52			rel: 'stylesheet',
53			href: 'assets/css/dark.css'
54		});
55		$('#theme').empty().append("<i class='fa-duotone fa-lightbulb-slash'></i>");
56	}
57	// Done because light is the one by default
58	if(localStorage.lan == "es") {
59		$('#lan img').attr("src","/assets/img/es_flag.webp");
60		$('#lan').addClass("es");
61	}
62	updateLanguage();
63
64	// Handle 'About Me' content
65	$('#aboutme').click(function(e) {
66
67		// If the div has already the class active, no need to reload the divs...
68		if(!$(e.target).hasClass('active')) {
69			// Update navbar
70			clearActiveLinks();
71			activateLink(e);
72
73			// Hide other contents
74			clearActiveDivs();
75
76			// Show current content
77			activateDiv('#aboutmeContent');
78		}
79
80	});
81
82	// Handle 'Education' content
83	$('#education').click(function(e) {
84
85		// If the div has already the class active, no need to reload the divs...
86		if(!$(e.target).hasClass('active')) {
87			// Update navbar
88			clearActiveLinks();
89			activateLink(e);
90
91			// Hide other contents
92			clearActiveDivs();
93
94			// Show current content
95			activateDiv('#educationContent');
96		}
97	});
98
99	// // Handle 'Publications' content
100	// $('#publications').click(function(e) {
101
102	// 	// If the div has already the class active, no need to reload the divs...
103	// 	if(!$(e.target).hasClass('active')) {
104	// 		// Update navbar
105	// 		clearActiveLinks();
106	// 		activateLink(e);
107
108	// 		// Hide other contents
109	// 		clearActiveDivs();
110
111	// 		// Show current content
112	// 		activateDiv('#publicationsContent');
113	// 	}
114	// });
115
116	// Handle 'Blog' content
117	$('#tutorials').click(function(e) {
118
119		// If the div has already the class active, no need to reload the divs...
120		if(!$(e.target).hasClass('active')) {
121			// Update navbar
122			clearActiveLinks();
123			activateLink(e);
124
125			// Hide other contents
126			clearActiveDivs();
127
128			// Show current content
129			activateDiv('#tutorialsContent');
130		}
131	});
132
133	// Handle 'Academic' content
134	$('#academic').click(function(e) {
135
136		// If the div has already the class active, no need to reload the divs...
137		if(!$(e.target).hasClass('active')) {
138			// Update navbar
139			clearActiveLinks();
140			activateLink(e);
141
142			// Hide other contents
143			clearActiveDivs();
144
145			// Show current content
146			activateDiv('#academicContent');
147		}
148	});
149
150	// Handle 'Particular' content
151	$('#particular').click(function(e) {
152
153		// If the div has already the class active, no need to reload the divs...
154		if(!$(e.target).hasClass('active')) {
155			// Update navbar
156			clearActiveLinks();
157			activateLink(e);
158
159			// Hide other contents
160			clearActiveDivs();
161
162			// Show current content
163			activateDiv('#particularContent');
164		}
165	});
166
167	// Handle 'Conferences' content
168	// $('#conferences').click(function(e) {
169
170	// 	// If the div has already the class active, no need to reload the divs...
171	// 	if(!$(e.target).hasClass('active')) {
172	// 		// Update navbar
173	// 		clearActiveLinks();
174	// 		activateLink(e);
175
176	// 		// Hide other contents
177	// 		clearActiveDivs();
178
179	// 		// Show current content
180	// 		activateDiv('#conferencesContent');
181	// 	}
182	// });
183
184	// Handle 'Experience' content
185	// $('#experience').click(function(e) {
186
187	// 	// If the div has already the class active, no need to reload the divs...
188	// 	if(!$(e.target).hasClass('active')) {
189	// 		// Update navbar
190	// 		clearActiveLinks();
191	// 		activateLink(e);
192
193	// 		// Hide other contents
194	// 		clearActiveDivs();
195
196	// 		// Show current content
197	// 		activateDiv('#experienceContent');
198	// 	}
199	// });
200
201	// Handle 'Projects' content
202	// $('#projects').click(function(e) {
203
204	// 	// If the div has already the class active, no need to reload the divs...
205	// 	if(!$(e.target).hasClass('active')) {
206	// 		// Update navbar
207	// 		clearActiveLinks();
208	// 		activateLink(e);
209
210	// 		// Hide other contents
211	// 		clearActiveDivs();
212
213	// 		// Show current content
214	// 		activateDiv('#projectsContent');
215	// 	}
216	// });
217
218	/*
219	// Handle 'Template' content
220	$('#name').click(function(e) {
221
222		// If the div has already the class active, no need to reload the divs...
223		if(!$(e.target).hasClass('active')) {
224			// Update navbar
225			clearActiveLinks();
226			activateLink(e);
227
228			// Hide other contents
229			clearActiveDivs();
230
231			// Show current content
232			activateDiv('#nameContent');
233		}
234	});
235	*/
236
237	// Whenever you clic on a blog post, you should be redirected to that post' html
238	$('.clickable').click(function(e) {
239		window.open($(e.currentTarget)[0].childNodes[1].innerText, '_blank').focus();
240	});
241
242	// Whenever you clic on a clases particulares heading, you should toggle
243	$('.particular-clickable').click(function(e) {
244		var e = $(e.currentTarget)[0].nextElementSibling;
245		if (e.style.display === "none") {
246			e.style.display = "block";
247		}
248		else {
249			e.style.display = "none";
250		}
251	});
252
253	// Copy the citation to the clipboard
254	// THIS SHOULD BE THE SAME FOR ALL THE PAPERS
255	$(document).on("click", "#citation", function(){
256		var text = $(this).parent().parent().next()[0].innerHTML;
257
258		navigator.clipboard.writeText(text);
259
260		toastr.success('Citation copied');
261	});
262
263	// Controls the URL; if it has '#blog'
264	// then trigger the 'Blog' clic
265	// if (((window.location).href).substring(((window.location).href).lastIndexOf('#') + 1) == 'tutorials') {
266	// 	$('#tutorials').click();
267	// 	$('#tutorialsContent').focus();
268	// }
269
270	if (((window.location).href).substring(((window.location).href).lastIndexOf('#') + 1) == 'clases-particulares') {
271		$('#particular').click();
272		$('#particularContent').focus();
273	}
274
275	// Controls the options menu
276	$('#options-toggler').click(function(e) {
277		if(!$(e.currentTarget).hasClass('active')) {
278			$(e.currentTarget).addClass('active');
279			$('#theme').show("fast");
280			$('#lan').show("fast");
281		}
282		else {
283			$(e.currentTarget).removeClass('active');
284			$('#theme').hide("fast");
285			$('#lan').hide("fast");
286		}
287	})
288
289	// Animates the theme button + functionality
290	$('#theme').click(function(e) {
291		if(localStorage.theme != "dark"){
292
293			$('#theme').empty().append("<i class='fa-duotone fa-lightbulb-slash'></i>");
294
295			localStorage.theme = "dark"
296			
297			$("link[href='assets/css/light.css']").remove();
298			$('<link>').appendTo('head').attr({
299				type: 'text/css', 
300				rel: 'stylesheet',
301				href: 'assets/css/dark.css'
302			});
303		}
304		else {
305
306			$('#theme').empty().append("<i class='fa-duotone fa-lightbulb'></i>");
307
308			localStorage.theme = "light"
309			
310			$("link[href='assets/css/dark.css']").remove();
311			$('<link>').appendTo('head').attr({
312				type: 'text/css', 
313				rel: 'stylesheet',
314				href: 'assets/css/light.css'
315			});
316		}
317	})
318
319	// Animates the lan button + functionality
320	$('#lan').click(function(e) {
321		if(!$(e.currentTarget).hasClass('es')){
322			$(e.currentTarget).addClass('es');
323

324			$('#lan img').attr("src","/assets/img/es_flag.webp");
325
326			localStorage.lan = "es"
327		}
328		else {
329			$(e.currentTarget).removeClass('es');
330
331			$('#lan img').attr("src","/assets/img/en_flag.webp");
332
333			localStorage.lan = "en"
334		}
335
336		updateLanguage();
337	})
338
339});
340
341function updateLanguage() {
342	let lang = localStorage.lan;
343	$(".language *").each(function(){
344		$(this).html( $(this).data(lang) );
345	});
346}
347
348function clearActiveLinks() {
349	$('#navbarList .nav-item .nav-link').each(function() {
350		$(this).removeClass('active');
351	});
352}
353
354function clearActiveDivs() {
355	$('.container .content .active').each(function() {
356		$(this).removeClass('active');
357		$(this).hide();
358	});
359}
360
361function activateLink(e) {
362	$(e.target).addClass('active');
363	
364	// Hide left panel
365	if(e.target.id == "particular")
366		$('#leftPanel').hide();
367	else
368		$('#leftPanel').show();
369}
370
371function activateDiv(divId) {
372	$(divId).addClass('active');
373	$(divId).show();
374
375	// Scrolls to the content
376	scrollToContent(divId);
377}
378
379function scrollToContent(divId) {
380	if ($(window).width() < 751) {
381		$('html, body').animate({
382			scrollTop: $(divId).offset().top
383		}, 1);
384	}
385}
386
387function resetViews() {
388	$.getJSON("https://api.countapi.xyz/set/nicolasmeseguer.github.io/634c2142-b35d-430e-b51c-dad16880dd3a?value=0", function(response) {
389		$("#contadorVisitas").text("0");
390	});
391}