Skip to content

Commit d0ac638

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 d0ac638

File tree

1 file changed

+203
-9
lines changed

1 file changed

+203
-9
lines changed

‎_resourcepdf/overrides/partials/rating.html‎

Lines changed: 203 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,156 @@
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+
<div id="feedback-form" style="
36+
display: none;
37+
margin-top: 12px;
38+
text-align: left;
39+
position: relative;
40+
border: 1px solid #ccc;
41+
padding: 12px;
42+
border-radius: 6px;
43+
background: #f9f9f9;
44+
width: 100%;
45+
box-sizing: border-box;
46+
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
47+
">
48+
<button id="close-feedback" aria-label="Close feedback form" title="Close" style="
49+
position: absolute;
50+
top: 8px;
51+
right: 8px;
52+
background: transparent;
53+
border: none;
54+
font-size: 20px;
55+
font-weight: bold;
56+
cursor: pointer;
57+
color: #999;
58+
line-height: 1;
59+
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
60+
">×</button>
61+
62+
<div style="margin-bottom: 10px; font-weight: normal; font-size: 15px;">
63+
Was this page helpful?
64+
</div>
65+
66+
<textarea id="feedback-text" rows="3" placeholder="Write your feedback here..." style="
67+
width: 100%;
68+
font-size: 14px;
69+
padding: 6px;
70+
margin-bottom: 12px;
71+
resize: vertical;
72+
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
73+
"></textarea>
74+
75+
<label for="feedback-email" style="
76+
display: block;
77+
font-weight: 500;
78+
font-size: 15px;
79+
margin-bottom: 4px;
80+
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
81+
">
82+
Email <span style="font-weight: normal; color: #666;">(optional)</span>
83+
</label>
84+
85+
<input type="email" id="feedback-email" placeholder="[email protected]" style="
86+
width: 100%;
87+
font-size: 14px;
88+
padding: 6px;
89+
margin-bottom: 12px;
90+
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
91+
" />
92+
93+
<button id="submit-feedback" style="
94+
padding: 5px 10px;
95+
font-size: 14px;
96+
background-color: #0E5FB5;
97+
color: white;
98+
border: none;
99+
border-radius: 3px;
100+
cursor: pointer;
101+
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
102+
">
103+
Send
104+
</button>
105+
106+
<div id="feedback-status" style="
107+
margin-top: 8px;
108+
font-size: 13px;
109+
font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
110+
"></div>
111+
</div>
26112
</div>
27113

28114
<script>
29-
document.addEventListener("DOMContentLoaded", function () {
115+
function initFeedbackWidget() {
30116
const stars = document.querySelectorAll(".rating-stars .star");
117+
const feedbackForm = document.getElementById("feedback-form");
118+
const feedbackTextarea = document.getElementById("feedback-text");
119+
const emailInput = document.getElementById("feedback-email");
120+
const submitButton = document.getElementById("submit-feedback");
121+
const statusDiv = document.getElementById("feedback-status");
122+
const closeButton = document.getElementById("close-feedback");
123+
124+
if (!stars.length || !feedbackForm) return;
125+
126+
const formURL = "https://docs.google.com/forms/d/e/1FAIpQLSfhscELpzoXB4uyh9pXNmXSeqKc10IH_DxmAoaVGID85sO0Aw/formResponse";
127+
128+
const fieldIds = {
129+
rating: "entry.303027158",
130+
pageUrl: "entry.295622433",
131+
feedback: "entry.2131350495",
132+
email: "entry.1689727303"
133+
};
134+
135+
let selectedRating = 0;
136+
137+
function sendRatingOnly(rating) {
138+
const formData = new FormData();
139+
formData.append(fieldIds.rating, rating);
140+
formData.append(fieldIds.pageUrl, window.location.href);
141+
142+
fetch(formURL, {
143+
method: "POST",
144+
mode: "no-cors",
145+
body: formData
146+
}).catch(() => {
147+
console.warn("Rating failed to submit silently.");
148+
});
149+
}
150+
151+
function submitFeedback(rating, feedbackText = "", email = "") {
152+
const formData = new FormData();
153+
formData.append(fieldIds.rating, rating);
154+
formData.append(fieldIds.pageUrl, window.location.href);
155+
formData.append(fieldIds.feedback, feedbackText);
156+
if (email) formData.append(fieldIds.email, email);
157+
158+
fetch(formURL, {
159+
method: "POST",
160+
mode: "no-cors",
161+
body: formData
162+
}).then(() => {
163+
statusDiv.style.color = "green";
164+
statusDiv.textContent = "Thanks for your feedback!";
165+
feedbackTextarea.value = "";
166+
emailInput.value = "";
167+
feedbackForm.style.display = "none";
168+
selectedRating = 0;
169+
170+
stars.forEach((s) => {
171+
s.innerHTML = "☆";
172+
s.style.color = "#000";
173+
});
174+
}).catch(() => {
175+
statusDiv.style.color = "red";
176+
statusDiv.textContent = "Error sending feedback.";
177+
});
178+
}
179+
31180
stars.forEach((star) => {
32181
const rating = parseInt(star.dataset.rating, 10);
33182

@@ -39,17 +188,62 @@
39188
});
40189

41190
star.addEventListener("mouseleave", () => {
42-
stars.forEach((s) => {
43-
s.innerHTML = "☆";
44-
s.style.color = "#000";
191+
stars.forEach((s, index) => {
192+
s.innerHTML = index < selectedRating ? "★" : "☆";
193+
s.style.color = index < selectedRating ? "#0E5FB5" : "#000";
45194
});
46195
});
47196

48197
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");
198+
selectedRating = rating;
199+
200+
stars.forEach((s, index) => {
201+
s.innerHTML = index < rating ? "★" : "☆";
202+
s.style.color = index < rating ? "#0E5FB5" : "#000";
203+
});
204+
205+
sendRatingOnly(rating);
206+
feedbackForm.style.display = "block";
207+
statusDiv.textContent = "";
52208
});
53209
});
54-
});
210+
211+
submitButton.addEventListener("click", () => {
212+
if (!selectedRating) return;
213+
214+
const feedbackText = feedbackTextarea.value.trim();
215+
const email = emailInput.value.trim();
216+
217+
if (selectedRating < 5 && !feedbackText) {
218+
statusDiv.style.color = "red";
219+
statusDiv.textContent = "Please enter feedback before sending.";
220+
return;
221+
}
222+
223+
submitFeedback(selectedRating, feedbackText, email);
224+
});
225+
226+
closeButton.addEventListener("click", () => {
227+
feedbackForm.style.display = "none";
228+
feedbackTextarea.value = "";
229+
emailInput.value = "";
230+
statusDiv.textContent = "";
231+
selectedRating = 0;
232+
233+
stars.forEach((s) => {
234+
s.innerHTML = "☆";
235+
s.style.color = "#000";
236+
});
237+
});
238+
}
239+
240+
// Run on full page load
241+
document.addEventListener("DOMContentLoaded", initFeedbackWidget);
242+
243+
// Run on every page change in MkDocs Material
244+
if (typeof document$ !== 'undefined') {
245+
document$.subscribe(() => {
246+
initFeedbackWidget();
247+
});
248+
}
55249
</script>

0 commit comments

Comments
 (0)