Skip to content

Commit 5781b81

Browse files
alina-derkach-oazaalina-derkach-oaza
committed
submit feedback in the background using fetch or a hidden form
 modified: _resourcepdf/overrides/partials/rating.html
1 parent 15302fa commit 5781b81

File tree

1 file changed

+225
-9
lines changed

1 file changed

+225
-9
lines changed

‎_resourcepdf/overrides/partials/rating.html‎

Lines changed: 225 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,16 @@
99
color: #000;
1010
text-align: center;
1111
">
12-
<div style="margin-bottom: 4px; font-weight: bold; color: #0E5FB5;">
12+
<div style="
13+
margin-bottom: 4px;
14+
font-weight: bold;
15+
color: #0E5FB5;
16+
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
17+
font-size: 15px;
18+
">
1319
Do you like Percona docs?
1420
</div>
21+
1522
<div class="rating-stars" style="display: inline-block;">
1623
{% for i in range(1,6) %}
1724
<span class="star" data-rating="{{ i }}" style="
@@ -20,14 +27,177 @@
2027
margin: 0 2px;
2128
color: #000;
2229
display: inline-block;
30+
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
2331
">☆</span>
2432
{% endfor %}
2533
</div>
34+
35+
<!-- Notification container -->
36+
<div id="feedback-notification" style="
37+
display: none;
38+
margin-top: 10px;
39+
color: green;
40+
font-weight: 500;
41+
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
42+
font-size: 14px;
43+
">Thank you for your feedback</div>
44+
45+
<div id="feedback-form" style="
46+
display: none;
47+
margin-top: 12px;
48+
text-align: left;
49+
position: relative;
50+
border: 1px solid #ccc;
51+
padding: 12px;
52+
border-radius: 6px;
53+
background: #f9f9f9;
54+
width: 100%;
55+
box-sizing: border-box;
56+
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
57+
">
58+
<button id="close-feedback" aria-label="Close feedback form" title="Close" style="
59+
position: absolute;
60+
top: 8px;
61+
right: 8px;
62+
background: transparent;
63+
border: none;
64+
font-size: 20px;
65+
font-weight: bold;
66+
cursor: pointer;
67+
color: #999;
68+
line-height: 1;
69+
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
70+
">×</button>
71+
72+
<div style="margin-bottom: 10px; font-weight: normal; font-size: 15px;">
73+
Was this page helpful?
74+
</div>
75+
76+
<textarea id="feedback-text" rows="3" placeholder="Write your feedback here..." style="
77+
width: 100%;
78+
font-size: 14px;
79+
padding: 6px;
80+
margin-bottom: 12px;
81+
resize: vertical;
82+
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
83+
"></textarea>
84+
85+
<label for="feedback-email" style="
86+
display: block;
87+
font-weight: 500;
88+
font-size: 15px;
89+
margin-bottom: 4px;
90+
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
91+
">
92+
Email <span style="font-weight: normal; color: #666;">(optional)</span>
93+
</label>
94+
95+
<input type="email" id="feedback-email" placeholder="[email protected]" style="
96+
width: 100%;
97+
font-size: 14px;
98+
padding: 6px;
99+
margin-bottom: 12px;
100+
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
101+
" />
102+
103+
<button id="submit-feedback" style="
104+
padding: 5px 10px;
105+
font-size: 14px;
106+
background-color: #0E5FB5;
107+
color: white;
108+
border: none;
109+
border-radius: 3px;
110+
cursor: pointer;
111+
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
112+
">
113+
Send
114+
</button>
115+
116+
<div id="feedback-status" style="
117+
margin-top: 8px;
118+
font-size: 13px;
119+
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
120+
"></div>
121+
</div>
26122
</div>
27123

28124
<script>
29-
document.addEventListener("DOMContentLoaded", function () {
125+
function initFeedbackWidget() {
30126
const stars = document.querySelectorAll(".rating-stars .star");
127+
const feedbackForm = document.getElementById("feedback-form");
128+
const feedbackTextarea = document.getElementById("feedback-text");
129+
const emailInput = document.getElementById("feedback-email");
130+
const submitButton = document.getElementById("submit-feedback");
131+
const statusDiv = document.getElementById("feedback-status");
132+
const closeButton = document.getElementById("close-feedback");
133+
const notification = document.getElementById("feedback-notification");
134+
135+
if (!stars.length || !feedbackForm) return;
136+
137+
const formURL = "https://docs.google.com/forms/d/e/1FAIpQLSfhscELpzoXB4uyh9pXNmXSeqKc10IH_DxmAoaVGID85sO0Aw/formResponse";
138+
139+
const fieldIds = {
140+
rating: "entry.303027158",
141+
pageUrl: "entry.295622433",
142+
feedback: "entry.2131350495",
143+
email: "entry.1689727303"
144+
};
145+
146+
let selectedRating = 0;
147+
let notificationTimeout;
148+
149+
function sendRatingOnly(rating) {
150+
const formData = new FormData();
151+
formData.append(fieldIds.rating, rating);
152+
formData.append(fieldIds.pageUrl, window.location.href);
153+
154+
fetch(formURL, {
155+
method: "POST",
156+
mode: "no-cors",
157+
body: formData
158+
}).catch(() => {
159+
console.warn("Rating failed to submit silently.");
160+
});
161+
}
162+
163+
function showNotification(msg) {
164+
notification.textContent = msg;
165+
notification.style.display = "block";
166+
clearTimeout(notificationTimeout);
167+
notificationTimeout = setTimeout(() => {
168+
notification.style.display = "none";
169+
}, 3000);
170+
}
171+
172+
function submitFeedback(rating, feedbackText = "", email = "") {
173+
const formData = new FormData();
174+
formData.append(fieldIds.rating, rating);
175+
formData.append(fieldIds.pageUrl, window.location.href);
176+
formData.append(fieldIds.feedback, feedbackText);
177+
if (email) formData.append(fieldIds.email, email);
178+
179+
fetch(formURL, {
180+
method: "POST",
181+
mode: "no-cors",
182+
body: formData
183+
}).then(() => {
184+
statusDiv.style.color = "green";
185+
statusDiv.textContent = "Thanks for your feedback!";
186+
feedbackTextarea.value = "";
187+
emailInput.value = "";
188+
feedbackForm.style.display = "none";
189+
selectedRating = 0;
190+
191+
stars.forEach((s) => {
192+
s.innerHTML = "☆";
193+
s.style.color = "#000";
194+
});
195+
}).catch(() => {
196+
statusDiv.style.color = "red";
197+
statusDiv.textContent = "Error sending feedback.";
198+
});
199+
}
200+
31201
stars.forEach((star) => {
32202
const rating = parseInt(star.dataset.rating, 10);
33203

@@ -39,17 +209,63 @@
39209
});
40210

41211
star.addEventListener("mouseleave", () => {
42-
stars.forEach((s) => {
43-
s.innerHTML = "☆";
44-
s.style.color = "#000";
212+
stars.forEach((s, index) => {
213+
s.innerHTML = index < selectedRating ? "★" : "☆";
214+
s.style.color = index < selectedRating ? "#0E5FB5" : "#000";
45215
});
46216
});
47217

48218
star.addEventListener("click", () => {
49-
const formURL = "https://docs.google.com/forms/d/e/1FAIpQLSfhscELpzoXB4uyh9pXNmXSeqKc10IH_DxmAoaVGID85sO0Aw/viewform";
50-
const ratingURL = `${formURL}?entry.303027158=${rating}`;
51-
window.open(ratingURL, "_blank");
219+
selectedRating = rating;
220+
221+
stars.forEach((s, index) => {
222+
s.innerHTML = index < rating ? "★" : "☆";
223+
s.style.color = index < rating ? "#0E5FB5" : "#000";
224+
});
225+
226+
sendRatingOnly(rating);
227+
showNotification("Thank you for your feedback");
228+
feedbackForm.style.display = "block";
229+
statusDiv.textContent = "";
52230
});
53231
});
54-
});
232+
233+
submitButton.addEventListener("click", () => {
234+
if (!selectedRating) return;
235+
236+
const feedbackText = feedbackTextarea.value.trim();
237+
const email = emailInput.value.trim();
238+
239+
if (selectedRating < 5 && !feedbackText) {
240+
statusDiv.style.color = "red";
241+
statusDiv.textContent = "Please enter feedback before sending.";
242+
return;
243+
}
244+
245+
submitFeedback(selectedRating, feedbackText, email);
246+
});
247+
248+
closeButton.addEventListener("click", () => {
249+
feedbackForm.style.display = "none";
250+
feedbackTextarea.value = "";
251+
emailInput.value = "";
252+
statusDiv.textContent = "";
253+
selectedRating = 0;
254+
255+
stars.forEach((s) => {
256+
s.innerHTML = "☆";
257+
s.style.color = "#000";
258+
});
259+
});
260+
}
261+
262+
// Run on full page load
263+
document.addEventListener("DOMContentLoaded", initFeedbackWidget);
264+
265+
// Run on every page change in MkDocs Material
266+
if (typeof document$ !== 'undefined') {
267+
document$.subscribe(() => {
268+
initFeedbackWidget();
269+
});
270+
}
55271
</script>

0 commit comments

Comments
 (0)