Skip to content

Commit 1b9a75a

Browse files
ConnorYohConnorYoh
authored
Cookie banner (#3302)
# Description of Changes Please provide a summary of the changes, including: - Added cookie banner using [Cookie consent](https://github.com/orestbida/cookieconsent)# - Posthog now is disabled using posthogs consent API by default - Posthog will have consent enabled based on events "cc:onConsent" and "cc:onChange" from cookieConsent. Closes #(3298) --- ## Checklist ### General - [ ] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [ ] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md) (if applicable) - [ ] I have performed a self-review of my own code - [ ] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### UI Changes (if applicable) - [ ] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#6-testing) for more details.
1 parent 606451a commit 1b9a75a

File tree

8 files changed

+212
-5
lines changed

8 files changed

+212
-5
lines changed

Diff for: ‎src/main/resources/messages_en_GB.properties

+24
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ legal.terms=Terms and Conditions
9090
legal.accessibility=Accessibility
9191
legal.cookie=Cookie Policy
9292
legal.impressum=Impressum
93+
legal.showCookieBanner=Cookie Preferences
9394

9495
###############
9596
# Pipeline #
@@ -135,6 +136,7 @@ analytics.enable=Enable analytics
135136
analytics.disable=Disable analytics
136137
analytics.settings=You can change the settings for analytics in the config/settings.yml file
137138

139+
138140
#############
139141
# NAVBAR #
140142
#############
@@ -1399,3 +1401,25 @@ validateSignature.cert.version=Version
13991401
validateSignature.cert.keyUsage=Key Usage
14001402
validateSignature.cert.selfSigned=Self-Signed
14011403
validateSignature.cert.bits=bits
1404+
1405+
####################
1406+
# Cookie banner #
1407+
####################
1408+
cookieBanner.popUp.title=How we use Cookies
1409+
cookieBanner.popUp.description=We use cookies and other technologies to make Stirling PDF work better for you—helping us improve our tools and keep building features you'll love. <br>If you’d rather not, clicking 'No Thanks' will only enable the essential cookies needed to keep things running smoothly.
1410+
cookieBanner.popUp.acceptAllBtn=Okay
1411+
cookieBanner.popUp.acceptNecessaryBtn=No Thanks
1412+
cookieBanner.popUp.showPreferencesBtn=Manage preferences
1413+
cookieBanner.preferencesModal.title=Consent Preferences Center
1414+
cookieBanner.preferencesModal.acceptAllBtn=Accept all
1415+
cookieBanner.preferencesModal.acceptNecessaryBtn=Reject all
1416+
cookieBanner.preferencesModal.savePreferencesBtn=Save preferences
1417+
cookieBanner.preferencesModal.closeIconLabel=Close modal
1418+
cookieBanner.preferencesModal.serviceCounterLabel=Service|Services
1419+
cookieBanner.preferencesModal.subtitle=Cookie Usage
1420+
cookieBanner.preferencesModal.description=Stirling PDF uses cookies and similar technologies to enhance your experience and understand how our tools are used. This helps us improve performance, develop the features you care about, and provide ongoing support to our users. <br><br>Stirling PDF cannot—and will never—track or access the content of the documents you use. <b>Your privacy and trust are at the core of what we do<b>.
1421+
cookieBanner.preferencesModal.necessary.title=Strictly Necessary Cookies <span class=\"pm__badge\">Always Enabled</span>
1422+
cookieBanner.preferencesModal.necessary.description=These cookies are essential for the website to function properly. They enable core features like setting your privacy preferences, logging in, and filling out forms—which is why they can’t be turned off.
1423+
cookieBanner.preferencesModal.analytics.title=Analytics
1424+
cookieBanner.preferencesModal.analytics.description=These cookies help us understand how our tools are being used, so we can focus on building the features our community values most. Rest assured—Stirling PDF cannot and will never track the content of the documents you work with.
1425+

Diff for: ‎src/main/resources/static/css/cookieconsent.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎src/main/resources/static/css/cookieconsentCustomisation.css

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
.cc--darkmode{
2+
--cc-bg: var(--md-sys-color-inverse-on-surface);
3+
--cc-primary-color: var(--md-sys-color-on-surface);
4+
--cc-secondary-color: var(--md-sys-color-on-surface);
5+
6+
--cc-btn-primary-bg: var(--md-sys-color-secondary);
7+
--cc-btn-primary-color: var(--cc-bg);
8+
--cc-btn-primary-border-color: var(--cc-btn-primary-bg);
9+
--cc-btn-primary-hover-bg: var(--md-sys-color-surface-3);
10+
--cc-btn-primary-hover-color: var(--md-sys-color-on-secondary-container);
11+
--cc-btn-primary-hover-border-color: var(--md-sys-color-surface-3);
12+
13+
--cc-btn-secondary-bg: var(--md-sys-color-surface-3);
14+
--cc-btn-secondary-color: var(--md-sys-color-on-secondary-container);
15+
--cc-btn-secondary-border-color: var(--md-sys-color-surface-3);
16+
--cc-btn-secondary-hover-bg:var(--md-sys-color-secondary);
17+
--cc-btn-secondary-hover-color: var(--cc-bg);
18+
--cc-btn-secondary-hover-border-color: var(--md-sys-color-secondary);
19+
20+
--cc-separator-border-color: var(--md-sys-color-outline);
21+
22+
--cc-toggle-on-bg: var(--cc-btn-primary-bg);
23+
--cc-toggle-off-bg: var(--md-sys-color-outline);
24+
--cc-toggle-on-knob-bg: var(--cc-btn-primary-color);
25+
--cc-toggle-off-knob-bg: var(--cc-btn-primary-color);
26+
27+
--cc-toggle-enabled-icon-color: var(--cc-btn-primary-color);
28+
--cc-toggle-disabled-icon-color: var(--cc-btn-primary-color);
29+
30+
--cc-toggle-readonly-bg: var(--md-sys-color-surface);
31+
--cc-toggle-readonly-knob-bg: var(--md-sys-color-outline);
32+
--cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg);
33+
34+
--cc-section-category-border: var(--md-sys-color-outline);
35+
36+
--cc-cookie-category-block-bg: var(--cc-btn-secondary-bg);
37+
--cc-cookie-category-block-border: var(--cc-btn-secondary-bg);
38+
--cc-cookie-category-block-hover-bg: var(--cc-btn-secondary-bg);
39+
--cc-cookie-category-block-hover-border: var(--cc-btn-secondary-bg);
40+
41+
--cc-cookie-category-expanded-block-bg: var(--cc-btn-secondary-bg);
42+
--cc-cookie-category-expanded-block-hover-bg: var(--cc-toggle-readonly-bg);
43+
44+
/* --cc-overlay-bg: rgba(0, 0, 0, 0.65);
45+
--cc-webkit-scrollbar-bg: var(--cc-section-category-border);
46+
--cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg);
47+
*/
48+
--cc-footer-bg: var(--cc-bg);
49+
--cc-footer-color: var(--cc-primary-color);
50+
--cc-footer-border-color: var(--cc-bg);
51+
}
52+
.cm__body{
53+
max-width: 90% !important;
54+
flex-direction: row !important;
55+
align-items: center !important;
56+
57+
}
58+
59+
.cm__desc{
60+
max-width: 70rem !important;
61+
}
62+
63+
.cm__btns{
64+
flex-direction: row-reverse !important;
65+
gap:10px !important;
66+
padding-top: 3.4rem !important;
67+
}
68+
69+
@media only screen and (max-width: 1400px) {
70+
.cm__body{
71+
max-width: 90% !important;
72+
flex-direction: column !important;
73+
align-items: normal !important;
74+
}
75+
76+
.cm__btns{
77+
padding-top: 1rem !important;
78+
}
79+
}

Diff for: ‎src/main/resources/static/css/footer.css

+1
Original file line numberDiff line numberDiff line change
@@ -35,4 +35,5 @@
3535

3636
.footer-link {
3737
text-decoration: none;
38+
cursor: pointer;
3839
}

Diff for: ‎src/main/resources/static/js/thirdParty/cookieconsent-config.js

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import './cookieconsent.umd.js';
2+
import 'https://cdn.jsdelivr.net/gh/orestbida/[email protected]/dist/cookieconsent.umd.js';
3+
4+
// Enable dark mode
5+
document.documentElement.classList.add('cc--darkmode');
6+
7+
CookieConsent.run({
8+
guiOptions: {
9+
consentModal: {
10+
layout: "bar",
11+
position: "bottom",
12+
equalWeightButtons: true,
13+
flipButtons: true
14+
},
15+
preferencesModal: {
16+
layout: "box",
17+
position: "right",
18+
equalWeightButtons: true,
19+
flipButtons: true
20+
}
21+
},
22+
categories: {
23+
necessary: {
24+
readOnly: true
25+
},
26+
analytics: {}
27+
},
28+
language: {
29+
default: "en",
30+
translations: {
31+
en: {
32+
consentModal: {
33+
title: cookieBannerPopUpTitle,
34+
description: cookieBannerPopUpDescription,
35+
acceptAllBtn: cookieBannerPopUpAcceptAllBtn,
36+
acceptNecessaryBtn: cookieBannerPopUpAcceptNecessaryBtn,
37+
showPreferencesBtn: cookieBannerPopUpShowPreferencesBtn,
38+
},
39+
preferencesModal: {
40+
title: cookieBannerPreferencesModalTitle,
41+
acceptAllBtn: cookieBannerPreferencesModalAcceptAllBtn,
42+
acceptNecessaryBtn: cookieBannerPreferencesModalAcceptNecessaryBtn,
43+
savePreferencesBtn: cookieBannerPreferencesModalSavePreferencesBtn,
44+
closeIconLabel: cookieBannerPreferencesModalCloseIconLabel,
45+
serviceCounterLabel: cookieBannerPreferencesModalServiceCounterLabel,
46+
sections: [
47+
{
48+
title: cookieBannerPreferencesModalSubtitle,
49+
description: cookieBannerPreferencesModalDescription
50+
},
51+
{
52+
title:cookieBannerPreferencesModalNecessaryTitle,
53+
description: cookieBannerPreferencesModalNecessaryDescription,
54+
linkedCategory: "necessary"
55+
},
56+
{
57+
title: cookieBannerPreferencesModalAnalyticsTitle,
58+
description: cookieBannerPreferencesModalAnalyticsDescription,
59+
linkedCategory: "analytics"
60+
}
61+
]
62+
}
63+
}
64+
}
65+
}
66+
});

Diff for: ‎src/main/resources/static/js/thirdParty/cookieconsent.umd.js

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎src/main/resources/templates/fragments/common.html

+31-5
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,8 @@
6666
<link rel="stylesheet" th:href="@{'/css/footer.css'}">
6767

6868
<link rel="preload" th:href="@{'/fonts/google-symbol.woff2'}" as="font" type="font/woff2" crossorigin="anonymous">
69-
69+
<link rel="stylesheet" th:href="@{'/css/cookieconsent.css'}">
70+
<link rel="stylesheet" th:href="@{'/css/cookieconsentCustomisation.css'}">
7071
<script th:src="@{'/js/thirdParty/fontfaceobserver.standalone.js'}"></script>
7172

7273
<!-- Google MD Icons -->
@@ -80,9 +81,33 @@
8081
<script th:src="@{'/js/darkmode.js'}"></script>
8182
<script th:src="@{'/js/csrf.js'}"></script>
8283
<script th:inline="javascript">
84+
85+
function UpdatePosthogConsent(){
86+
window.CookieConsent.acceptedCategory('analytics')?
87+
posthog.opt_in_capturing() : posthog.opt_out_capturing();
88+
console.log("Posthog: Opted " + (posthog.has_opted_out_capturing()? "out" : "in"));
89+
}
8390
const stirlingPDFLabel = /*[[${@StirlingPDFLabel}]]*/ '';
8491
const analyticsEnabled = /*[[${@analyticsEnabled}]]*/ false;
8592

93+
const cookieBannerPopUpTitle = /*[[#{cookieBanner.popUp.title}]]*/ "How we use Cookies";
94+
const cookieBannerPopUpDescription = /*[[#{cookieBanner.popUp.description}]]*/ "";
95+
const cookieBannerPopUpAcceptAllBtn = /*[[#{cookieBanner.popUp.acceptAllBtn}]]*/ "";
96+
const cookieBannerPopUpAcceptNecessaryBtn = /*[[#{cookieBanner.popUp.acceptNecessaryBtn}]]*/ "";
97+
const cookieBannerPopUpShowPreferencesBtn = /*[[#{cookieBanner.popUp.showPreferencesBtn}]]*/ "";
98+
const cookieBannerPreferencesModalTitle = /*[[#{cookieBanner.preferencesModal.title}]]*/ "";
99+
const cookieBannerPreferencesModalAcceptAllBtn = /*[[#{cookieBanner.preferencesModal.acceptAllBtn}]]*/ "";
100+
const cookieBannerPreferencesModalAcceptNecessaryBtn = /*[[#{cookieBanner.preferencesModal.acceptNecessaryBtn}]]*/ "";
101+
const cookieBannerPreferencesModalSavePreferencesBtn = /*[[#{cookieBanner.preferencesModal.savePreferencesBtn}]]*/ "";
102+
const cookieBannerPreferencesModalCloseIconLabel = /*[[#{cookieBanner.preferencesModal.closeIconLabel}]]*/ "";
103+
const cookieBannerPreferencesModalServiceCounterLabel = /*[[#{cookieBanner.preferencesModal.serviceCounterLabel}]]*/ "";
104+
const cookieBannerPreferencesModalSubtitle = /*[[#{cookieBanner.preferencesModal.subtitle}]]*/ "";
105+
const cookieBannerPreferencesModalDescription = /*[[#{cookieBanner.preferencesModal.description}]]*/ "";
106+
const cookieBannerPreferencesModalNecessaryTitle = /*[[#{cookieBanner.preferencesModal.necessary.title}]]*/ "";
107+
const cookieBannerPreferencesModalNecessaryDescription = /*[[#{cookieBanner.preferencesModal.necessary.description}]]*/ "";
108+
const cookieBannerPreferencesModalAnalyticsTitle = /*[[#{cookieBanner.preferencesModal.analytics.title}]]*/ "";
109+
const cookieBannerPreferencesModalAnalyticsDescription = /*[[#{cookieBanner.preferencesModal.analytics.description}]]*/ "";
110+
86111
if (analyticsEnabled) {
87112
!function (t, e) {
88113
var o, n, p, r;
@@ -110,18 +135,19 @@
110135
persistence: 'localStorage',
111136
person_profiles: 'always',
112137
mask_all_text: true,
113-
mask_all_element_attributes: true
138+
mask_all_element_attributes: true,
139+
opt_out_capturing_by_default: true
114140
})
115141
const baseUrl = window.location.hostname;
116142
posthog.register_once({
117143
'hostname': baseUrl,
118144
'UUID': /*[[${@UUID}]]*/ ''
119145
})
120146
}
121-
</script>
122-
123-
124147

148+
window.addEventListener("cc:onConsent", UpdatePosthogConsent);
149+
window.addEventListener("cc:onChange", UpdatePosthogConsent);
150+
</script>
125151
</th:block>
126152

127153
<th:block th:fragment="game">

Diff for: ‎src/main/resources/templates/fragments/footer.html

+3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
<footer th:fragment="footer" id="footer" class="text-center pt-5">
2+
3+
<script type="module" th:src="@{'/js/thirdParty/cookieconsent-config.js'}"></script>
24
<div class="footer-center pb-4">
35
<!-- Links section -->
46
<div class="d-flex justify-content-center">
@@ -11,6 +13,7 @@
1113
<li th:if="${@accessibilityStatement != ''}"><a class="footer-link px-2" target="_blank" th:href="${@accessibilityStatement}" th:text="#{legal.accessibility}">accessibilityStatement</a></li>
1214
<li th:if="${@cookiePolicy != ''}"><a class="footer-link px-2" target="_blank" th:href="${@cookiePolicy}" th:text="#{legal.cookie}">cookiePolicy</a></li>
1315
<li th:if="${@impressum != ''}"><a class="footer-link px-2" target="_blank" th:href="${@impressum}" th:text="#{legal.impressum}">impressum</a></li>
16+
<li><a class="footer-link px-2" id="cookieBanner" target="_blank" th:text="#{legal.showCookieBanner}" onClick="CookieConsent.show(true)">Cookie Preferences</a></li>
1417
</ul>
1518
</div>
1619

0 commit comments

Comments
 (0)