Compare commits
2 Commits
structure_
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| af565b476f | |||
| 2caa54d9c8 |
16
README.md
16
README.md
@ -1,3 +1,17 @@
|
|||||||
# AffichagePDF
|
# AffichagePDF
|
||||||
|
|
||||||
Code JS pour afficher les fichier PDF depuis Edocman
|
Code HTML et JS pour afficher les fichier PDF depuis Edocman
|
||||||
|
|
||||||
|
## 🔥 Description
|
||||||
|
|
||||||
|
Ce projet a était crée pour répondre à un besoin du clien "SAVCO".
|
||||||
|
Il permet de lire des pdf depuis Edocman sur une page spéciale.
|
||||||
|
|
||||||
|
### Fonctionnalités principales :
|
||||||
|
|
||||||
|
- 🌍 Pouvoir lire des PDF récupéré sur Edocman
|
||||||
|
|
||||||
|
## 🙏 Remerciements
|
||||||
|
|
||||||
|
Merci à Glenda pour son aide, son inspiration, etc...
|
||||||
|
Merci à Savco / Armelle pour m'avoir donné le projet.
|
||||||
30
index.html
30
index.html
@ -1,30 +0,0 @@
|
|||||||
<!-- Conteneur des cartes -->
|
|
||||||
<div class="contenair-div">
|
|
||||||
<a href="#" class="uk-card-custom" id="card1">
|
|
||||||
<div class="image-circle">
|
|
||||||
<img src="/images/icons/1_savco_produits-chimiques.svg" alt="Icône bidon en plastique avec un point d'exclamation dans un triangle" />
|
|
||||||
</div>
|
|
||||||
<p>Produits chimiques</p>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="#" class="uk-card-custom" id="card2">
|
|
||||||
<div class="image-circle">
|
|
||||||
<img src="/images/icons/savco_travaux-en-hauteur.png" alt="Icône échafaudage" />
|
|
||||||
</div>
|
|
||||||
<p>Travailler en hauteur</p>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="#" class="uk-card-custom" id="card3">
|
|
||||||
<div class="image-circle">
|
|
||||||
<img src="/images/icons/savco_espace-confine.png" alt="Icône d'une personne coincé dans un carré" />
|
|
||||||
</div>
|
|
||||||
<p>Travaux en espaces confiné</p>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="#" class="uk-card-custom" id="card4">
|
|
||||||
<div class="image-circle">
|
|
||||||
<img src="/images/icons/savco_autres-risques.png" alt="Icône triangle avec point d'exclamation dedans" />
|
|
||||||
</div>
|
|
||||||
<p>Utilisation d'équipements dangereux</p>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
196
script.js
196
script.js
@ -1,196 +0,0 @@
|
|||||||
document.addEventListener("DOMContentLoaded", function() {
|
|
||||||
const pdfUrls = {
|
|
||||||
card1: [
|
|
||||||
{ url: "https://savco-campus.fr/component/edocman/2018-flash-sse-risque-fumees-soudure-b/viewdocument/455", title: "Travaux exposant à des agents CMR - <br>fumées soudage" },
|
|
||||||
{ url: "https://savco-campus.fr/component/edocman/2022-flash-sse-travaux-points-chauds-e/viewdocument/457", title: "Travaux exposant à des agents CMR - <br>fumées soudage" },
|
|
||||||
{ url: "https://savco-campus.fr/component/edocman/2020-flash-sse-produits-chimiques-a-pdf/viewdocument/470", title: "Exposition aux produits chimiques - <br> Produits dangereux" }
|
|
||||||
],
|
|
||||||
card2: [
|
|
||||||
{ url: "https://savco-campus.fr/component/edocman/10-2020-flash-sse-bonnes-pratiques-et-risques-utilisation-echafaudage-b/viewdocument/81", title: "Travaux exposant à un risque de chute de hauteur - utilisation d'échafaudages" },
|
|
||||||
{ url: "https://savco-campus.fr/component/edocman/34-2023-flash-sse-travail-en-hauteur-a/viewdocument/82", title: "Travaux exposant à un risque de chute de hauteur - port du harnais ou travail sur cordes" },
|
|
||||||
{ url: "https://savco-campus.fr/component/edocman/45-2023-flash-sse-harnais-a/viewdocument/84", title: "Travaux exposant à un risque de chute de hauteur - port du harnais ou travail sur cordes" }
|
|
||||||
],
|
|
||||||
card3: [
|
|
||||||
{ url: "https://savco-campus.fr/component/edocman/22-2023-flash-sse-travaux-espace-confine-c/viewdocument/93", title: "Espaces confinés" },
|
|
||||||
{ url: "https://savco-campus.fr/component/edocman/35-2023-flash-sse-utilisation-detecteur-de-gaz-va-2/viewdocument/94", title: "Utilisation detecteur de gaz" }
|
|
||||||
],
|
|
||||||
card4: [
|
|
||||||
{ url: "https://savco-campus.fr/component/edocman/2021-flash-sse-bp-outillage-protection-a-pdf/viewdocument/474", title: "Utilisation Meuleuse - <br> (ponçage, meulage, tronçonage)" },
|
|
||||||
{ url: "https://example.com/second-pdf-card4.pdf", title: "Utilisation Meuleuse - <br>(ponçage, meulage, tronçonage)" },
|
|
||||||
{ url: "https://savco-campus.fr/component/edocman/2023-flash-sse-bruit-b-pdf/viewdocument/483", title: "Bruit - vibrations" }
|
|
||||||
]
|
|
||||||
};
|
|
||||||
|
|
||||||
let currentStep = 1;
|
|
||||||
let currentPdfIndex = 0;
|
|
||||||
const completedCards = [false, false, false, false]; // Suivi de l'état des cartes
|
|
||||||
const pdfReadState = [false, false, false, false]; // Suivi de l'état des PDFs de chaque carte
|
|
||||||
const progress = [0, 0, 0, 0]; // Suivi de l'avancement des PDFs dans chaque carte
|
|
||||||
|
|
||||||
function activateCard(step) {
|
|
||||||
const cards = document.querySelectorAll('.uk-card-custom');
|
|
||||||
|
|
||||||
cards.forEach((card, index) => {
|
|
||||||
card.style.pointerEvents = 'none';
|
|
||||||
card.style.opacity = '0.5';
|
|
||||||
card.style.filter = 'grayscale(100%)';
|
|
||||||
card.classList.remove('active-card');
|
|
||||||
|
|
||||||
// Réinitialisation de la progression si on revient à une carte non terminée
|
|
||||||
if (!completedCards[index]) {
|
|
||||||
progress[index] = 0; // Réinitialisation de l'index à 0 (premier PDF)
|
|
||||||
pdfReadState[index] = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (completedCards[index]) {
|
|
||||||
card.style.filter = 'grayscale(0%)';
|
|
||||||
card.style.opacity = '1';
|
|
||||||
card.style.pointerEvents = 'auto';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const card = cards[step - 1];
|
|
||||||
if (card) {
|
|
||||||
card.style.pointerEvents = 'auto';
|
|
||||||
card.style.opacity = '1';
|
|
||||||
card.style.filter = 'grayscale(0%)';
|
|
||||||
card.classList.add('active-card');
|
|
||||||
}
|
|
||||||
|
|
||||||
updateNavigationButtons();
|
|
||||||
loadPdfForCurrentCard();
|
|
||||||
}
|
|
||||||
|
|
||||||
function loadPdfForCurrentCard() {
|
|
||||||
const iframe = document.getElementById("pdf-iframe");
|
|
||||||
const titleElement = document.getElementById("pdf-title");
|
|
||||||
const fileContainer = document.getElementById("pdf-container");
|
|
||||||
const nextButton = document.getElementById("next-button");
|
|
||||||
const prevButton = document.getElementById("prev-button");
|
|
||||||
const pdfCounter = document.getElementById("pdf-counter");
|
|
||||||
|
|
||||||
const cardKey = "card" + currentStep;
|
|
||||||
const pdfData = pdfUrls[cardKey][progress[currentStep - 1]]; // Charger le PDF basé sur la progression de la carte
|
|
||||||
|
|
||||||
iframe.src = pdfData.url;
|
|
||||||
titleElement.innerHTML = pdfData.title;
|
|
||||||
fileContainer.style.display = "block";
|
|
||||||
|
|
||||||
nextButton.style.display = "inline-block";
|
|
||||||
prevButton.style.display = "inline-block";
|
|
||||||
|
|
||||||
const totalPdfs = pdfUrls[cardKey].length;
|
|
||||||
pdfCounter.innerHTML = `${progress[currentStep - 1] + 1} / ${totalPdfs}`;
|
|
||||||
|
|
||||||
iframe.onload = function() {
|
|
||||||
nextButton.disabled = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
updateNavigationButtons();
|
|
||||||
}
|
|
||||||
|
|
||||||
function goToNextPdf() {
|
|
||||||
const pdfData = pdfUrls["card" + currentStep];
|
|
||||||
if (progress[currentStep - 1] < pdfData.length - 1) {
|
|
||||||
progress[currentStep - 1]++;
|
|
||||||
loadPdfForCurrentCard();
|
|
||||||
} else {
|
|
||||||
alert("Vous avez terminé de visualiser tous les PDFs de cette carte !");
|
|
||||||
pdfReadState[currentStep - 1] = true;
|
|
||||||
completedCards[currentStep - 1] = true;
|
|
||||||
goToNextCard();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function goToPreviousPdf() {
|
|
||||||
if (progress[currentStep - 1] > 0) {
|
|
||||||
progress[currentStep - 1]--;
|
|
||||||
loadPdfForCurrentCard();
|
|
||||||
} else {
|
|
||||||
goToPreviousCard();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function goToNextCard() {
|
|
||||||
if (currentStep < 4 && pdfReadState[currentStep - 1]) {
|
|
||||||
currentStep++;
|
|
||||||
progress[currentStep - 1] = 0; // Réinitialiser l'index pour la carte suivante
|
|
||||||
activateCard(currentStep);
|
|
||||||
} else {
|
|
||||||
alert("Veuillez d'abord lire tous les PDFs de cette carte avant de passer à la suivante.");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function goToPreviousCard() {
|
|
||||||
if (currentStep > 1) {
|
|
||||||
currentStep--;
|
|
||||||
progress[currentStep - 1] = 0; // Réinitialiser l'index pour revenir à la carte précédente
|
|
||||||
activateCard(currentStep);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateNavigationButtons() {
|
|
||||||
const nextButton = document.getElementById("next-button");
|
|
||||||
const prevButton = document.getElementById("prev-button");
|
|
||||||
|
|
||||||
if (currentStep === 1 && progress[currentStep - 1] === 0) {
|
|
||||||
prevButton.style.display = "none";
|
|
||||||
} else {
|
|
||||||
prevButton.disabled = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (currentStep === 4 && progress[currentStep - 1] === pdfUrls["card4"].length - 1) {
|
|
||||||
nextButton.disabled = true;
|
|
||||||
nextButton.innerHTML = "Vous avez tout visualisé ?<br>Vous pouvez maintenant accéder au questionnaire.";
|
|
||||||
} else {
|
|
||||||
nextButton.disabled = false;
|
|
||||||
nextButton.textContent = "Suivant";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
activateCard(1);
|
|
||||||
const fileContainer = document.getElementById("pdf-container");
|
|
||||||
fileContainer.style.display = "none";
|
|
||||||
const nextButton = document.getElementById("next-button");
|
|
||||||
const prevButton = document.getElementById("prev-button");
|
|
||||||
nextButton.style.display = "none";
|
|
||||||
prevButton.style.display = "none";
|
|
||||||
|
|
||||||
loadPdfForCurrentCard();
|
|
||||||
|
|
||||||
document.getElementById("card1").addEventListener("click", function(event) {
|
|
||||||
event.preventDefault();
|
|
||||||
currentStep = 1;
|
|
||||||
progress[0] = 0; // Réinitialiser à la première page quand tu viens sur la carte 1
|
|
||||||
activateCard(1);
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById("card2").addEventListener("click", function(event) {
|
|
||||||
event.preventDefault();
|
|
||||||
currentStep = 2;
|
|
||||||
progress[1] = 0; // Réinitialiser à la première page quand tu viens sur la carte 2
|
|
||||||
activateCard(2);
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById("card3").addEventListener("click", function(event) {
|
|
||||||
event.preventDefault();
|
|
||||||
currentStep = 3;
|
|
||||||
progress[2] = 0; // Réinitialiser à la première page quand tu viens sur la carte 3
|
|
||||||
activateCard(3);
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById("card4").addEventListener("click", function(event) {
|
|
||||||
event.preventDefault();
|
|
||||||
currentStep = 4;
|
|
||||||
progress[3] = 0; // Réinitialiser à la première page quand tu viens sur la carte 4
|
|
||||||
activateCard(4);
|
|
||||||
});
|
|
||||||
|
|
||||||
nextButton.addEventListener("click", function() {
|
|
||||||
goToNextPdf();
|
|
||||||
});
|
|
||||||
|
|
||||||
prevButton.addEventListener("click", function() {
|
|
||||||
goToPreviousPdf();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Loading…
Reference in New Issue
Block a user