mirror of
https://framagit.org/JonathanMM/sutom.git
synced 2024-05-19 14:16:39 +02:00
Affichage de la notification dans le panel
This commit is contained in:
parent
a8bf4a10a7
commit
335b42256f
|
@ -53,6 +53,7 @@
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="panel-fenetre-notification"> </div>
|
||||||
<div id="panel-fenetre-contenu"></div>
|
<div id="panel-fenetre-contenu"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -210,7 +210,8 @@ h1 {
|
||||||
color: var(--couleur-police);
|
color: var(--couleur-police);
|
||||||
}
|
}
|
||||||
|
|
||||||
#notification {
|
#notification,
|
||||||
|
#panel-fenetre-notification {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity linear 1s;
|
transition: opacity linear 1s;
|
||||||
}
|
}
|
||||||
|
|
|
@ -58,16 +58,16 @@ export default class FinDePartiePanel {
|
||||||
resumeBouton.addEventListener("click", (event) => {
|
resumeBouton.addEventListener("click", (event) => {
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
if (!navigator.clipboard) {
|
if (!navigator.clipboard) {
|
||||||
NotificationMessage.ajouterNotification("Votre navigateur n'est pas compatible");
|
NotificationMessage.ajouterNotificationPanel("Votre navigateur n'est pas compatible");
|
||||||
}
|
}
|
||||||
|
|
||||||
navigator.clipboard
|
navigator.clipboard
|
||||||
.writeText(this._resumeTexte + "\n\nhttps://sutom.nocle.fr")
|
.writeText(this._resumeTexte + "\n\nhttps://sutom.nocle.fr")
|
||||||
.then(() => {
|
.then(() => {
|
||||||
NotificationMessage.ajouterNotification("Résumé copié dans le presse papier");
|
NotificationMessage.ajouterNotificationPanel("Résumé copié dans le presse papier");
|
||||||
})
|
})
|
||||||
.catch((raison) => {
|
.catch((raison) => {
|
||||||
NotificationMessage.ajouterNotification("Votre navigateur n'est pas compatible");
|
NotificationMessage.ajouterNotificationPanel("Votre navigateur n'est pas compatible");
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -103,7 +103,7 @@ export default class FinDePartiePanel {
|
||||||
let stats = Sauvegardeur.chargerSauvegardeStats();
|
let stats = Sauvegardeur.chargerSauvegardeStats();
|
||||||
if (stats) {
|
if (stats) {
|
||||||
contenu +=
|
contenu +=
|
||||||
'<div class="stats-area"><div class="stats-ligne"><div class="stats-cellule">Parties :</div>' +
|
'<p>Statistiques</p><div class="stats-area"><div class="stats-ligne"><div class="stats-cellule">Parties :</div>' +
|
||||||
`<div class="stats-cellule">${stats.partiesGagnees}/${stats.partiesJouees}</div>` +
|
`<div class="stats-cellule">${stats.partiesGagnees}/${stats.partiesJouees}</div>` +
|
||||||
"</div>" +
|
"</div>" +
|
||||||
`<div class="stats-ligne"><div class="stats-cellule">1/6 :</div><div class="stats-cellule">${stats.repartition[1]}</div></div>` +
|
`<div class="stats-ligne"><div class="stats-cellule">1/6 :</div><div class="stats-cellule">${stats.repartition[1]}</div></div>` +
|
||||||
|
|
|
@ -1,19 +1,28 @@
|
||||||
export default class NotificationMessage {
|
export default class NotificationMessage {
|
||||||
private static _notificationArea: HTMLElement = document.getElementById("notification") as HTMLElement;
|
private static _notificationArea: HTMLElement = document.getElementById("notification") as HTMLElement;
|
||||||
|
private static _notificationPanelArea: HTMLElement = document.getElementById("panel-fenetre-notification") as HTMLElement;
|
||||||
private static _currentTimeout: NodeJS.Timeout | undefined;
|
private static _currentTimeout: NodeJS.Timeout | undefined;
|
||||||
public static ajouterNotification(message: string): void {
|
public static ajouterNotification(message: string): void {
|
||||||
|
this.ajouterNotificationDiv(this._notificationArea, message);
|
||||||
|
}
|
||||||
|
|
||||||
|
public static ajouterNotificationPanel(message: string): void {
|
||||||
|
this.ajouterNotificationDiv(this._notificationPanelArea, message);
|
||||||
|
}
|
||||||
|
|
||||||
|
private static ajouterNotificationDiv(div: HTMLElement, message: string): void {
|
||||||
if (this._currentTimeout) {
|
if (this._currentTimeout) {
|
||||||
clearTimeout(this._currentTimeout);
|
clearTimeout(this._currentTimeout);
|
||||||
this._currentTimeout = undefined;
|
this._currentTimeout = undefined;
|
||||||
}
|
}
|
||||||
this._notificationArea.innerHTML = message;
|
div.innerHTML = message;
|
||||||
this._notificationArea.style.opacity = "1";
|
div.style.opacity = "1";
|
||||||
this._currentTimeout = setTimeout(
|
this._currentTimeout = setTimeout(
|
||||||
(() => {
|
(() => {
|
||||||
this._notificationArea.style.opacity = "0";
|
div.style.opacity = "0";
|
||||||
this._currentTimeout = setTimeout(
|
this._currentTimeout = setTimeout(
|
||||||
(() => {
|
(() => {
|
||||||
this._notificationArea.innerHTML = " ";
|
div.innerHTML = " ";
|
||||||
this._currentTimeout = undefined;
|
this._currentTimeout = undefined;
|
||||||
}).bind(this),
|
}).bind(this),
|
||||||
1000
|
1000
|
||||||
|
|
Loading…
Reference in a new issue