Feedback buttons (#546)

* Test commit, feedback

* more

* feedback buttons

* changed position in toc

* changed feedback max_value to 100

---------

Co-authored-by: mjang <michael.jang@qdrant.com>
This commit is contained in:
trean
2024-01-24 14:30:31 +01:00
committed by GitHub
co-authored by mjang
parent a0b49a85ba
commit 1cb3cae381
8 changed files with 115 additions and 6 deletions
@@ -0,0 +1,47 @@
{{ if .Site.Params.feedback.enable }}
<div class="feedback d-print-none">
<h6 class="feedback__title">{{ .Site.Params.feedback.title }}</h6>
<p class="feedback__question">{{ .Site.Params.feedback.question }}</p>
<button class="btn feedback__answer feedback__answer_yes">{{ .Site.Params.feedback.positive }}</button>
<button class="btn feedback__answer feedback__answer_no">{{ .Site.Params.feedback.negative }}</button>
<p class="feedback__response feedback__response_yes">
{{.Site.Params.feedback.on_yes | safeHTML }}
</p>
<p class="feedback__response feedback__response_no">
{{.Site.Params.feedback.on_no | safeHTML }}
<br>You can <a class="text-brand-p" href="{{ .Site.Params.githubDocPrefix }}{{ .File.Path }}" target="_blank">edit</a> this page on GitHub, or <a class="text-brand-p" href="{{ .Site.Params.githubIssueLink }}" target="_blank">create</a> a GitHub issue.
</p>
</div>
<script>
const yesButton = document.querySelector('.feedback__answer_yes');
const noButton = document.querySelector('.feedback__answer_no');
const yesResponse = document.querySelector('.feedback__response_yes');
const noResponse = document.querySelector('.feedback__response_no');
const disableButtons = () => {
yesButton.disabled = true;
noButton.disabled = true;
};
const sendFeedback = (value) => {
if (typeof gtag !== 'function') return;
gtag('event', 'page_helpful', {
'event_category': 'Helpful',
'event_label': window.location.pathname,
'value': value
});
};
yesButton.addEventListener('click', () => {
yesResponse.classList.add('feedback__response_visible');
disableButtons();
{{ $maxValue := .Site.Params.feedback.max_value | default 100 -}}
sendFeedback({{ $maxValue }});
});
noButton.addEventListener('click', () => {
noResponse.classList.add('feedback__response_visible');
disableButtons();
sendFeedback(0);
});
</script>
{{ end }}
@@ -5,7 +5,8 @@
<div class="sticky-top">
<h5 class="tableOfContent__header">Table of contents</h5>
{{ .TableOfContents }}
<div class="divider mb-1"></div>
<div class="divider mb-2"></div>
<ul class="tableOfContent__footer">
<li>
<a class="text-brand-p" href="{{ .Site.Params.githubDocPrefix }}{{ .File.Path }}" target="_blank">
@@ -18,7 +19,11 @@
</a>
</li>
</ul>
<br/>
<div class="divider pt-2 mb-3"></div>
{{ if (and (not .Params.hide_feedback) (.Site.Params.feedback.enable) (.Site.GoogleAnalytics)) }}
{{ partial "feedback.html" . -}}
{{ end }}
</div>
{{ end }}
</nav>
</nav>