|
|
|
@ -1,66 +1,60 @@
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function ()
|
|
|
|
|
{
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
|
|
|
const globalSections = document.getElementById('global-sections');
|
|
|
|
|
const subSections = document.getElementById('sub-sections');
|
|
|
|
|
const contentDisplay = document.getElementById('content-display');
|
|
|
|
|
|
|
|
|
|
const sectionsData =
|
|
|
|
|
{
|
|
|
|
|
about:
|
|
|
|
|
{
|
|
|
|
|
const sectionsData = {
|
|
|
|
|
about: {
|
|
|
|
|
name: 'About',
|
|
|
|
|
items: []
|
|
|
|
|
},
|
|
|
|
|
projects:
|
|
|
|
|
{
|
|
|
|
|
projects: {
|
|
|
|
|
name: 'Projects',
|
|
|
|
|
items: [
|
|
|
|
|
{
|
|
|
|
|
filename: 'ft_42',
|
|
|
|
|
filextension: '.css',
|
|
|
|
|
title: 'ft_42.css Project',
|
|
|
|
|
content: 'Contenu du projet ft_42.css',
|
|
|
|
|
repo: 'https://github.com/user/ft_42'
|
|
|
|
|
},
|
|
|
|
|
filename: 'ft_42',
|
|
|
|
|
filextension: '.css',
|
|
|
|
|
title: 'ft_42.css Project',
|
|
|
|
|
content: 'Contenu du projet ft_42.css',
|
|
|
|
|
repo: 'https://github.com/user/ft_42'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
filename: 'Maquette',
|
|
|
|
|
filextension: '.html',
|
|
|
|
|
title: 'Maquette Project',
|
|
|
|
|
content: 'Contenu du projet Maquette.html',
|
|
|
|
|
repo: 'https://github.com/user/Maquette'
|
|
|
|
|
},
|
|
|
|
|
filename: 'Maquette',
|
|
|
|
|
filextension: '.html',
|
|
|
|
|
title: 'Maquette Project',
|
|
|
|
|
content: 'Contenu du projet Maquette.html',
|
|
|
|
|
repo: 'https://github.com/user/Maquette'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
filename: 'Mont-blanc',
|
|
|
|
|
filextension: '.LDA',
|
|
|
|
|
title: 'Mont-blanc (LDA) Project',
|
|
|
|
|
content: 'Contenu du projet Mont-blanc (LDA)',
|
|
|
|
|
repo: 'https://github.com/user/Mont-blanc'
|
|
|
|
|
},
|
|
|
|
|
filename: 'Mont-blanc',
|
|
|
|
|
filextension: '.LDA',
|
|
|
|
|
title: 'Mont-blanc (LDA) Project',
|
|
|
|
|
content: 'Contenu du projet Mont-blanc (LDA)',
|
|
|
|
|
repo: 'https://github.com/user/Mont-blanc'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
filename: 'test',
|
|
|
|
|
filextension: '.test',
|
|
|
|
|
title: 'test',
|
|
|
|
|
content: 'Contenu du projet test',
|
|
|
|
|
repo: 'https://github.com/user/test'
|
|
|
|
|
}
|
|
|
|
|
filename: 'test',
|
|
|
|
|
filextension: '.test',
|
|
|
|
|
title: 'test',
|
|
|
|
|
content: 'Contenu du projet test',
|
|
|
|
|
repo: 'https://github.com/user/test'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
contact:
|
|
|
|
|
{
|
|
|
|
|
contact: {
|
|
|
|
|
name: 'Contact',
|
|
|
|
|
items: []
|
|
|
|
|
},
|
|
|
|
|
readme:
|
|
|
|
|
{
|
|
|
|
|
readme: {
|
|
|
|
|
name: 'Readme',
|
|
|
|
|
items: [
|
|
|
|
|
{
|
|
|
|
|
filename: 'README',
|
|
|
|
|
filextension: '.md',
|
|
|
|
|
title: 'README',
|
|
|
|
|
content: 'Contenu du README.md',
|
|
|
|
|
repo: 'https://github.com/user/repo'
|
|
|
|
|
}
|
|
|
|
|
filename: 'README',
|
|
|
|
|
filextension: '.md',
|
|
|
|
|
title: 'README',
|
|
|
|
|
content: 'Contenu du README.md',
|
|
|
|
|
repo: 'https://github.com/user/repo'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
@ -76,13 +70,11 @@ document.addEventListener('DOMContentLoaded', function ()
|
|
|
|
|
|
|
|
|
|
const sectionElements = document.querySelectorAll('#global-sections .section');
|
|
|
|
|
|
|
|
|
|
function displaySectionContent(sectionName)
|
|
|
|
|
{
|
|
|
|
|
function displaySectionContent(sectionName) {
|
|
|
|
|
document.querySelector('.nav-link.active')?.classList.remove('active');
|
|
|
|
|
document.querySelector(`[data-section="${sectionName}"] .nav-link`).classList.add('active');
|
|
|
|
|
|
|
|
|
|
if (sectionName === 'readme')
|
|
|
|
|
{
|
|
|
|
|
if (sectionName === 'readme') {
|
|
|
|
|
subSections.innerHTML = '';
|
|
|
|
|
|
|
|
|
|
const item = sectionsData.readme.items[0];
|
|
|
|
@ -106,34 +98,33 @@ document.addEventListener('DOMContentLoaded', function ()
|
|
|
|
|
<a href="#" class="sub-link" data-content="${item.content}" data-title="${item.title}" data-repo="${item.repo}">${item.filename}${item.filextension}</a>
|
|
|
|
|
`;
|
|
|
|
|
subSections.appendChild(li);
|
|
|
|
|
|
|
|
|
|
// Ajouter un événement de clic pour chaque sous-section
|
|
|
|
|
li.addEventListener('click', function (e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
document.querySelector('.file-item.selected')?.classList.remove('selected');
|
|
|
|
|
li.classList.add('selected');
|
|
|
|
|
|
|
|
|
|
const content = li.querySelector('.sub-link').getAttribute('data-content');
|
|
|
|
|
const title = li.querySelector('.sub-link').getAttribute('data-title');
|
|
|
|
|
const repo = li.querySelector('.sub-link').getAttribute('data-repo');
|
|
|
|
|
contentDisplay.innerHTML = `
|
|
|
|
|
<div class="sheet">
|
|
|
|
|
<h1>${title}</h1>
|
|
|
|
|
<p>${content}</p>
|
|
|
|
|
<p><a href="${repo}" target="_blank">Repository</a></p>
|
|
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
sectionElements.forEach(section => {
|
|
|
|
|
section.addEventListener('click', function ()
|
|
|
|
|
{
|
|
|
|
|
section.addEventListener('click', function () {
|
|
|
|
|
const sectionName = this.getAttribute('data-section');
|
|
|
|
|
displaySectionContent(sectionName);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
subSections.addEventListener('click', function (e)
|
|
|
|
|
{
|
|
|
|
|
if (e.target.classList.contains('sub-link') || e.target.classList.contains('file-img'))
|
|
|
|
|
{
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
const content = e.target.getAttribute('data-content');
|
|
|
|
|
const title = e.target.getAttribute('data-title');
|
|
|
|
|
const repo = e.target.getAttribute('data-repo');
|
|
|
|
|
contentDisplay.innerHTML = `
|
|
|
|
|
<div class="sheet">
|
|
|
|
|
<h1>${title}</h1>
|
|
|
|
|
<p>${content}</p>
|
|
|
|
|
<p><a href="${repo}" target="_blank">Repository</a></p>
|
|
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
displaySectionContent('readme');
|
|
|
|
|
});
|
|
|
|
|