Skip to content

Commit 36f3fee

Browse files
HenraLHenraL
committed
[UPDATE] the banner design to be more flexible regarding the banners that are displayed + [ADD] a feedback banner
1 parent b41453c commit 36f3fee

File tree

19 files changed

+197
-28
lines changed

19 files changed

+197
-28
lines changed

‎bonus/bootstrap/asperboard.bsdesign‎

1.17 KB
Binary file not shown.

‎html/api/v1/oauth/callback/index.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,10 @@
4242
</head>
4343

4444
<body>
45-
<section id="cookie_banner"></section>
45+
<section id="banners" class="banner-container">
46+
<article id="cookie_banner"></article>
47+
<article id="feedback_banner"></article>
48+
</section>
4649
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
4750
<script src="../../../../assets/js/modules/cookie_manager.mjs" type="module"></script>
4851
<script src="../../../../assets/js/modules/indexeddb_manager.mjs" type="module"></script>
@@ -57,6 +60,7 @@
5760
<script src="../../../../assets/js/modules/constants.mjs" type="module"></script>
5861
<script src="../../../../assets/js/theme_toggler.js"></script>
5962
<script src="../../../../assets/js/banners/cookies.js"></script>
63+
<script src="../../../../assets/js/banners/feedback.js"></script>
6064
<script src="../../../../assets/js/callback/redirect.js"></script>
6165
<script src="../../../../assets/js/change_toggle_option.js"></script>
6266
<script src="../../../../assets/js/chatbot/chatbot.js"></script>

‎html/assets/css/banner.css‎

Lines changed: 44 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,64 @@
33
** File description:
44
** banner.css */
55

6-
.cookie-banner {
6+
:root {
7+
--cookie-background-button-colour: steelblue;
8+
--cookie-button-colour: white;
9+
}
10+
11+
/* The section in charge of containing the different banners */
12+
13+
.banner-container {
14+
display: flex;
15+
flex-direction: column;
16+
gap: 10px;
717
position: fixed;
818
bottom: 0;
919
left: 0;
1020
width: 100%;
11-
margin: 0 !important;
21+
z-index: 1000;
22+
}
23+
24+
.cookie-banner {
25+
/*position: fixed;*/
26+
/*bottom: 0;*/
27+
/*left: 0;*/
28+
/*width: 100%;*/
29+
/*margin: 0 !important;*/
30+
/*text-align: center;*/
31+
/*padding: 10px;*/
32+
/*z-index: 1000;*/
33+
/*background-color: var(--bs-body-bg);*/
1234
text-align: center;
1335
padding: 10px;
14-
z-index: 1000;
1536
background-color: var(--bs-body-bg);
37+
border: 1px solid #ddd;
38+
width: 100%;
1639
}
1740

18-
.cookie-banner button {
19-
background-color: #4CAF50;
20-
color: white;
41+
.cookie-banner p {
42+
display: inline;
43+
padding: 0px;
44+
margin-bottom: 0px;
45+
}
46+
47+
.cookie-banner button, .cookie-banner button[data-theme="cross"] {
48+
background-color: var(--cookie-background-button-colour);
49+
color: var(--cookie-button-colour);
2150
border: none;
22-
padding: 10px 20px;
51+
padding: 5px 10px;
2352
margin-left: 10px;
2453
cursor: pointer;
2554
}
2655

27-
.cookie-banner button:hover {
28-
background-color: invert(#4CAF50);
56+
.cookie-banner button:hover, .cookie-banner button[data-theme="cross"]:hover {
57+
background-color: invert(var(--cookie-background-button-colour));
58+
color: invert(var(--cookie-button-colour));
59+
}
60+
61+
.cookie-banner button[data-theme="cross"] {
62+
background-color: transparent;
63+
color: var(--bs-body-color);
2964
}
3065

3166
.style_popup_banner_container {

‎html/assets/js/banners/cookies.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@
88
const cookie_consent_cookie_name = 'cookie_consent';
99

1010
function inject_cookie_banner(ID = 'cookie_banner') {
11-
const banner = document.createElement('div');
12-
banner.id = ID;
11+
const banner = document.getElementById(ID) || document.createElement("div");
1312
banner.classList.add("cookie-banner");
1413
banner.classList.add("style_popup_banner_container");
1514
banner.innerHTML = `
16-
<p>This website uses cookies to ensure you get the best experience on our website.</p>
17-
<button onclick="acceptCookies(this)">Accept</button>
15+
<p data-type="cookie">
16+
Ce site utilise des cookies qui sont essentiels pour sont bon fonctionnement, aucune de vos données ne sort de votre ordinateur.
17+
<button onclick="acceptCookies(this.parentElement)">Accepter</button>
18+
</p>
1819
`;
19-
document.body.appendChild(banner);
2020
}
2121

2222
function acceptCookies(element) {

‎html/assets/js/banners/feedback.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
/*
2+
** EPITECH PROJECT, 2024
3+
** mockup
4+
** File description:
5+
** cookies.js
6+
*/
7+
8+
const feedback_form_cookie_name = 'feedback_form';
9+
10+
function inject_feedback_banner(ID = 'feedback_banner') {
11+
const banner = document.getElementById(ID) || document.createElement("div");
12+
const trigger_node = `window.open('${checkHtmlPath()}/feedback', '_blank', 'width=640px,height=480px');`;
13+
const opens_externally = `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"><i class="fas fa-external-link-alt"></i>`;
14+
banner.classList.add("cookie-banner");
15+
banner.classList.add("style_popup_banner_container");
16+
banner.innerHTML = `
17+
<p data-type="feedback">
18+
Votre avis nous intéresse:
19+
<button onclick="${trigger_node}">Remplir le formulaire ${opens_externally}</button>
20+
<button onclick="permaHideFeedbackBanner(this.parentElement)">Ne plus montrer</button>
21+
<button data-theme="cross" onclick="hideFeedbackBanner(this.parentElement)">X</button>
22+
</p>
23+
`;
24+
}
25+
26+
function permaHideFeedbackBanner(element) {
27+
element.parentElement.style.display = 'none';
28+
console.log("Feedback banner hidden permanently (for a year)");
29+
window.cookie_manager.createCookie(feedback_form_cookie_name, 'true', 365);
30+
}
31+
32+
function hideFeedbackBanner(element) {
33+
element.parentElement.style.display = 'none';
34+
console.log("Feedback banner hidden for this session");
35+
window.cookie_manager.createCookie(feedback_form_cookie_name, 'true', window.cookie_manager.toMinute(30));
36+
}
37+
38+
async function inject_the_feedback_banner() {
39+
const id = "feedback_banner";
40+
let maxTries = 10;
41+
42+
while (maxTries > 0) {
43+
if (window.cookie_manager) {
44+
break;
45+
}
46+
await sleep(1000);
47+
maxTries--;
48+
}
49+
50+
if (!window.cookie_manager) {
51+
console.error("feedback module is still missing after multiple retries.");
52+
return;
53+
}
54+
const cookie_accepted = window.cookie_manager.readCookie(feedback_form_cookie_name);
55+
console.log("form_banner_closed: '", cookie_accepted, "'");
56+
if (cookie_accepted === "" && document.getElementById(id) !== null) {
57+
console.log("Feedback not accepted");
58+
inject_feedback_banner(id);
59+
} else {
60+
console.log("Feedback already accepted");
61+
}
62+
}
63+
64+
document.addEventListener("DOMContentLoaded", inject_the_feedback_banner);

‎html/assets/js/chatbot/chatbot.js‎

Lines changed: 2 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎html/assets/js/dashboard/my_onload.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,5 @@ async function my_onload() {
1818
}
1919

2020
// Add a a rule to only run once the page is loaded
21-
document.addEventListener("DOMContentLoaded", my_onload);
21+
// The functionality has been ignored because not used in the project
22+
// document.addEventListener("DOMContentLoaded", my_onload);

‎html/assets/js/modules/cookie_manager.mjs‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,25 @@
66
*/
77

88
console.log("js/cookie_dealing initialising");
9+
10+
function toSeconds(seconds) {
11+
const now = new Date();
12+
now.setSeconds(now.getSeconds() + seconds);
13+
return now.toUTCString();
14+
}
15+
16+
function toMinute(minutes) {
17+
const now = new Date();
18+
now.setMinutes(now.getMinutes() + minutes);
19+
return now.toUTCString();
20+
}
21+
22+
function toHour(hours) {
23+
const now = new Date();
24+
now.setHours(now.getHours() + hours);
25+
return now.toUTCString();
26+
}
27+
928
function createMany(string) {
1029
document.cookie = string
1130
}
@@ -120,6 +139,9 @@ function display() {
120139
console.log("js/cookie_dealing initialised");
121140

122141
const cookie = {
142+
toSeconds,
143+
toMinute,
144+
toHour,
123145
createMany,
124146
create,
125147
read,

‎html/callback/index.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,10 @@
4242
</head>
4343

4444
<body>
45-
<section id="cookie_banner"></section>
45+
<section id="banners" class="banner-container">
46+
<article id="cookie_banner"></article>
47+
<article id="feedback_banner"></article>
48+
</section>
4649
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
4750
<script src="../assets/js/modules/cookie_manager.mjs" type="module"></script>
4851
<script src="../assets/js/modules/indexeddb_manager.mjs" type="module"></script>
@@ -57,6 +60,7 @@
5760
<script src="../assets/js/modules/constants.mjs" type="module"></script>
5861
<script src="../assets/js/theme_toggler.js"></script>
5962
<script src="../assets/js/banners/cookies.js"></script>
63+
<script src="../assets/js/banners/feedback.js"></script>
6064
<script src="../assets/js/callback/redirect.js"></script>
6165
<script src="../assets/js/change_toggle_option.js"></script>
6266
<script src="../assets/js/chatbot/chatbot.js"></script>

‎html/feedback/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@
6161
<script src="../assets/js/modules/constants.mjs" type="module"></script>
6262
<script src="../assets/js/theme_toggler.js"></script>
6363
<script src="../assets/js/banners/cookies.js"></script>
64+
<script src="../assets/js/banners/feedback.js"></script>
6465
<script src="../assets/js/change_toggle_option.js"></script>
6566
<script src="../assets/js/chatbot/chatbot.js"></script>
6667
<script src="../assets/js/github_normalizer.js"></script>

0 commit comments

Comments
 (0)