319 lines
15 KiB
HTML
319 lines
15 KiB
HTML
{{ if eq .Site.Params.feedback.emoticonTpl true -}}
|
|
{{ $emoticons := slice "very_satisfied" "satisfied" "dissatisfied" "very_dissatisfied" }}
|
|
<div class="container d-flex align-items-center justify-content-center">
|
|
<div id="feedback-widget-emoticon" class="mt-4">
|
|
<div id="feedback-cta" class="d-flex justify-content-center py-1">
|
|
<span class="fs-6 align-self-center align-middle ms-2 me-0">
|
|
{{ i18n "feedback_helpful" | default "Was this page helpful?" }}
|
|
</span>
|
|
<div class="d-flex">
|
|
<div class="form-emoji d-flex ps-2">
|
|
{{ range $index, $value := $emoticons }}
|
|
<div class="radio-emoji">
|
|
<input type="radio" name="feedback-emoticon" autocomplete="off" value="{{ $value | humanize | title }}" id="radio_{{ $index }}" required>
|
|
<label class="d-flex justify-content-center align-items-center" for="radio_{{ $index }}">
|
|
{{ $emoticon := resources.Get ( printf "%s%s.svg" "images/icons/feedback/" $value ) }}
|
|
{{ $emoticon.Content | safeHTML }}
|
|
<!-- <i class="feedback-emoji material-icons">
|
|
sentiment_{{ $value }}
|
|
</i> -->
|
|
</label>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="feedback-emoji-end" class="d-flex justify-content-md-start justify-content-sm-center">
|
|
</div>
|
|
|
|
<div id="feedback-send">
|
|
<div id="text-wrapper">
|
|
<textarea id="textarea-emoji" cols="55" maxlength="500" rows="3" placeholder="(Optional) Try to be as specific and detailed as possible!" type="text" class="feedback-textarea-emoji p-2 mb-2"></textarea>
|
|
</div>
|
|
<div id="feedback-emoji-submit-container" class="d-flex justify-content-end">
|
|
<button type="button" id="feedback-emoji-submit-button" class="feedback-submit-emoji-btn btn btn-sm btn-primary mt-1 mb-2" role="button" type="submit" disabled>
|
|
{{ i18n "feedback_submit" | default "Submit" }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const emojiTextWrapper = document.getElementById("text-wrapper");
|
|
const emojiRadios = document.querySelectorAll('input[name="feedback-emoticon"]');
|
|
const emojiContainer = document.getElementById("feedback-widget-emoticon");
|
|
const feedbackEmojiCta = document.getElementById("feedback-cta");
|
|
const feedbackEmojiSubmitContainer = document.getElementById("feedback-emoji-submit-container");
|
|
const feedbackEmojiSubmitBtn = document.getElementById("feedback-emoji-submit-button");
|
|
|
|
// Show emoji text area
|
|
emojiRadios.forEach(emojiRadio => {
|
|
emojiRadio.addEventListener('change', function(event) {
|
|
const emojiRadioID = event.target.id;
|
|
emojiContainer.style.borderRadius = '8px'
|
|
feedbackEmojiCta.classList.add("px-4");
|
|
emojiTextWrapper.classList.add("is-visible");
|
|
feedbackEmojiSubmitBtn.removeAttribute("disabled");
|
|
feedbackEmojiSubmitContainer.classList.add("is-visible");
|
|
// emojiTextWrapper.addEventListener('transitionend', function () {
|
|
// // do something!!!
|
|
// }
|
|
// );
|
|
})
|
|
});
|
|
|
|
// Submit emoticon feedback to Google or Plausible analytics
|
|
feedbackEmojiSubmitBtn.addEventListener('click', event => {
|
|
const result = document.getElementById("feedback-emoji-end");
|
|
const sendArea = document.getElementById("feedback-send");
|
|
const rating = document.querySelector('input[name="feedback-emoticon"]:checked').value;
|
|
const message = document.getElementById('textarea-emoji').value;
|
|
function success(e) {
|
|
feedbackEmojiCta.remove();
|
|
sendArea.remove();
|
|
result.innerHTML = '{{ .Site.Params.feedback.successMsg | default "Thank you for helping to improve our documentation!" }}';
|
|
result.classList.add("is-visible");
|
|
}
|
|
try {
|
|
{{ if .Site.Config.Services.GoogleAnalytics.ID -}}
|
|
{{ if not .Site.Params.feedback.eventDest | or (in .Site.Params.feedback.eventDest "google") -}}
|
|
gtag('event', '{{ replaceRE `( {1,})` "_" (.Site.Params.feedback.emoticonEventName | default "feedback" | lower) }}',
|
|
{
|
|
'rating': rating.replace(/\s+/g, '_').toLowerCase(),
|
|
'message': message,
|
|
'event_callback': success
|
|
}
|
|
),
|
|
{{ end -}}
|
|
{{ end -}}
|
|
{{ if .Site.Params.plausible.dataDomain -}}
|
|
{{ if not .Site.Params.feedback.eventDest | or (in .Site.Params.feedback.eventDest "plausible") -}}
|
|
plausible('{{ .Site.Params.feedback.emoticonEventName | default "Feedback" }}',
|
|
{
|
|
callback: success,
|
|
props:
|
|
{
|
|
rating: rating,
|
|
message: message
|
|
}
|
|
}
|
|
)
|
|
{{ end -}}
|
|
{{ end -}}
|
|
} catch (err) {
|
|
console.log(err);
|
|
feedbackEmojiCta.remove();
|
|
sendArea.remove();
|
|
result.innerHTML = '{{ .Site.Params.feedback.errorMsg | default "Sorry! There was an error while attempting to submit your feedback!" }}';
|
|
result.classList.add("is-visible");
|
|
}
|
|
// console.log("feedback submitted")
|
|
});
|
|
</script>
|
|
|
|
{{ else }}
|
|
<div id="feedback-widget" class="feedback-container pt-4">
|
|
<div id="feedback-init" class="d-flex justify-content-md-start justify-content-sm-center">
|
|
<span class="fs-5 fw-bold me-2 align-self-center">{{ i18n "feedback_helpful" | default "Was this page helpful?" }}</span>
|
|
<div class="d-flex">
|
|
<button id="posBtn" class="feedback-btn btn btn-primary btn-sm me-2" type="submit">
|
|
<span class="fs-6">
|
|
<i class="material-icons me-1 align-middle">thumb_up</i>
|
|
{{ i18n "feedback_yes" | default "Yes" }}
|
|
</span>
|
|
</button>
|
|
<button id="negBtn" class="feedback-btn btn btn-primary btn-sm me-2" type="submit">
|
|
<span class="fs-6">
|
|
<i class="material-icons me-1 align-middle">thumb_down</i>
|
|
{{ i18n "feedback_no" | default "No" }}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="feedback-end" class="d-flex justify-content-md-start justify-content-sm-center fs-4 fw-bold me-2">
|
|
</div>
|
|
|
|
<div id="feedback-form-pos" data-type="positive" class="feedback-form justify-content-md-start justify-content-sm-center">
|
|
<p class="fw-bold fs-5">{{ .Site.Params.feedback.positiveFormTitle | default "What did you like?" }}</p>
|
|
|
|
{{ range $index, $value := .Site.Params.feedback.positiveForm }}
|
|
{{ $rating := (index . 0) }}
|
|
{{ $description := (index . 1) }}
|
|
<div class="form-check pb-1">
|
|
<input class="form-check-input" type="radio" name="feedback" autocomplete="off" value="{{ $rating | lower }}" id="radio{{ $index }}Pos" required>
|
|
<label class="form-check-label" for="radio{{ $index }}Pos">
|
|
{{ $rating }}
|
|
{{ if $description }}
|
|
<p class="feedback-radio-desc fw-normal mb-0">{{ $description }}</p>
|
|
{{ end }}
|
|
</label>
|
|
</div>
|
|
<div id="radio{{ $index }}PosTextContainer" class="feedback-textarea-container"></div>
|
|
{{ end }}
|
|
|
|
</div>
|
|
|
|
<div id="feedback-form-neg" data-type="negative" class="feedback-form justify-content-sm-center">
|
|
<p class="fw-bold fs-5">{{ .Site.Params.feedback.negativeFormTitle | default "What went wrong?" }}</p>
|
|
|
|
{{ range $index, $value := .Site.Params.feedback.negativeForm }}
|
|
{{ $rating := (index . 0) }}
|
|
{{ $description := (index . 1) }}
|
|
<div class="form-check pb-1">
|
|
<input class="form-check-input" type="radio" name="feedback" autocomplete="off" value="{{ $rating | lower }}" id="radio{{ $index }}Neg" required>
|
|
<label class="form-check-label" for="radio{{ $index }}Neg">
|
|
{{ $rating }}
|
|
{{ if $description }}
|
|
<p class="feedback-radio-desc fw-normal mb-0">{{ $description }}</p>
|
|
{{ end }}
|
|
</label>
|
|
</div>
|
|
<div id="radio{{ $index }}NegTextContainer" class="feedback-textarea-container"></div>
|
|
{{ end }}
|
|
|
|
</div>
|
|
|
|
<div id="feedback-submit-container">
|
|
<button id="feedback-submit-button" class="feedback-submit-btn btn btn-primary mt-3" role="button" type="submit" disabled>
|
|
<span class="fs-6">
|
|
{{ i18n "feedback_submit" | default "Submit" }}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
// https://stackoverflow.com/a/29017547
|
|
const feedbackInit = document.getElementById("feedback-init");
|
|
const posBtn = document.getElementById("posBtn");
|
|
const negBtn = document.getElementById("negBtn");
|
|
const feedbackBtn = document.querySelectorAll('.feedback-btn');
|
|
const feedbackFormPos = document.getElementById("feedback-form-pos");
|
|
const feedbackFormNeg = document.getElementById("feedback-form-neg");
|
|
const feedbackSubmitBtn = document.getElementById("feedback-submit-button");
|
|
const feedbackSubmitContainer = document.getElementById("feedback-submit-container");
|
|
|
|
// Show feedback form
|
|
feedbackBtn.forEach(btn => {
|
|
btn.addEventListener('click', event => {
|
|
const btnID = btn.id
|
|
feedbackInit.style.opacity = '0'
|
|
feedbackInit.addEventListener('transitionend', function () {
|
|
feedbackInit.remove();
|
|
if (btnID == 'posBtn') {
|
|
feedbackFormPos.classList.add("is-visible");
|
|
feedbackFormNeg.remove();
|
|
feedbackSubmitContainer.classList.add("is-visible");
|
|
} else if (btnID == 'negBtn') {
|
|
feedbackFormNeg.classList.add("is-visible");
|
|
feedbackFormPos.remove();
|
|
feedbackSubmitContainer.classList.add("is-visible");
|
|
}
|
|
}
|
|
);
|
|
})
|
|
});
|
|
|
|
// Add text area box to the selected feedback radio
|
|
const Radios = document.querySelectorAll('input[name="feedback"]');
|
|
const textareas = document.querySelectorAll('.feedback-textarea-container');
|
|
|
|
Radios.forEach(radio => {
|
|
radio.addEventListener('change', function(event) {
|
|
const radioID = event.target.id;
|
|
const addOn = document.getElementById(radioID+"TextContainer");
|
|
// First, remove 'activeBox' class and <textarea> from all textarea containers
|
|
for (const textarea of textareas) {
|
|
while (textarea.firstChild) {
|
|
textarea.removeChild(textarea.firstChild);
|
|
}
|
|
}
|
|
addOn.innerHTML +='<textarea id="textarea" cols="55" maxlength="500" rows="3" placeholder="(Optional) Try to be as specific and detailed as possible!" type="text" class="feedback-textarea p-2 mb-2"></textarea>';
|
|
feedbackSubmitBtn.removeAttribute("disabled");
|
|
// console.log(radioID);
|
|
});
|
|
});
|
|
|
|
// Submit feedback to Google or Plausible analytics
|
|
feedbackSubmitBtn.addEventListener('click', event => {
|
|
const form = document.querySelector('.feedback-form');
|
|
const formType = form.getAttribute("data-type");
|
|
const result = document.getElementById("feedback-end");
|
|
const rating = document.querySelector('input[name="feedback"]:checked').value;
|
|
const message = document.getElementById('textarea').value;
|
|
function success(e) {
|
|
form.remove();
|
|
feedbackSubmitContainer.remove();
|
|
result.innerHTML = '{{ .Site.Params.feedback.successMsg | default "Thank you for helping to improve our documentation!" }}';
|
|
result.classList.add("is-visible");
|
|
}
|
|
try {
|
|
if (formType == "positive") {
|
|
{{ if .Site.Config.Services.GoogleAnalytics.ID -}}
|
|
{{ if not .Site.Params.feedback.eventDest | or (in .Site.Params.feedback.eventDest "google") -}}
|
|
gtag('event', '{{ replaceRE `( {1,})` "_" (.Site.Params.feedback.positiveEventName | default "Positive Feedback" | lower) }}',
|
|
{
|
|
'rating': rating,
|
|
'message': message,
|
|
'event_callback': success
|
|
}
|
|
),
|
|
{{ end -}}
|
|
{{ end -}}
|
|
{{ if .Site.Params.plausible.dataDomain -}}
|
|
{{ if not .Site.Params.feedback.eventDest | or (in .Site.Params.feedback.eventDest "plausible") -}}
|
|
plausible('{{ .Site.Params.feedback.positiveEventName | default "Positive Feedback" }}',
|
|
{
|
|
callback: success,
|
|
props:
|
|
{
|
|
rating: rating,
|
|
message: message
|
|
}
|
|
}
|
|
)
|
|
{{ end -}}
|
|
{{ end -}}
|
|
} else if (formType == "negative") {
|
|
{{ if .Site.Config.Services.GoogleAnalytics.ID -}}
|
|
{{ if not .Site.Params.feedback.eventDest | or (in .Site.Params.feedback.eventDest "google") -}}
|
|
gtag('event', '{{ replaceRE `( {1,})` "_" (.Site.Params.feedback.negativeEventName | default "Positive Feedback" | lower) }}',
|
|
{
|
|
'rating': rating,
|
|
'message': message,
|
|
'event_callback': success
|
|
}
|
|
),
|
|
{{ end -}}
|
|
{{ end -}}
|
|
{{ if .Site.Params.plausible.dataDomain -}}
|
|
{{ if not .Site.Params.feedback.eventDest | or (in .Site.Params.feedback.eventDest "plausible") -}}
|
|
plausible('{{ .Site.Params.feedback.negativeEventName | default "Negative Feedback" }}',
|
|
{
|
|
callback: success,
|
|
props:
|
|
{
|
|
rating: rating,
|
|
message: message
|
|
}
|
|
}
|
|
)
|
|
{{ end -}}
|
|
{{ end -}}
|
|
}
|
|
} catch (err) {
|
|
console.log(err);
|
|
form.remove();
|
|
feedbackSubmitContainer.remove();
|
|
result.innerHTML = '{{ .Site.Params.feedback.errorMsg | default "Sorry! There was an error while attempting to submit your feedback!" }}';
|
|
result.classList.add("is-visible");
|
|
}
|
|
// console.log("feedback submitted")
|
|
});
|
|
|
|
</script>
|
|
{{ end }} |