Merge pull request #11240 from mendix/olu-feedback-widget-fix

Fix: hidden feedback widget and unresponsive button click

Author: OlufunkeMoronfolu

layouts/docs/list.html

@@ -11,7 +11,8 @@ <h1>{{ .Title }}</h1>
 	</header>
 	{{ .Content }}
         {{ partial "section-index.html" . }}
-	{{ if (and (not .Params.hide_feedback) (.Site.Params.ui.feedback.enable) (.Site.Config.Services.GoogleAnalytics.ID)) }}
+	<!-- Olu: removed checking for .Site.Config.Services.GoogleAnalytics.ID as part of the conditions -->
+	{{ if (and (not .Params.hide_feedback) (.Site.Params.ui.feedback.enable)) }}
 		{{ partial "feedback.html" .Site.Params.ui.feedback }}
 		<br />
 	{{ end }}

layouts/partials/feedback.html

@@ -66,35 +66,40 @@ <h2 class="feedback--title">Feedback</h2>
 
 <!-- NK - document.querySelector lines grab feedback issue link generated from page-meta-links.html -->
 <script>
-  document.querySelector('.feedback--link').href = document.querySelector('a.feedback-issue').href;
-  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 ga !== 'function') return;
-    const args = {
-      command: 'send',
-      hitType: 'event',
-      category: 'Helpful',
-      action: 'click',
-      label: window.location.pathname,
-      value: value
+  document.addEventListener('DOMContentLoaded', function () {
+    const feedbackIssueLink = document.querySelector('a.feedback-issue');
+    if (feedbackIssueLink) {
+      document.querySelector('.feedback--link').href = feedbackIssueLink.href;
+    }
+    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;
     };
-    ga(args.command, args.hitType, args.category, args.action, args.label, args.value);
-  };
-  yesButton.addEventListener('click', () => {
-    yesResponse.classList.add('feedback--response__visible');
-    disableButtons();
-    sendFeedback(1);
-  });
-  noButton.addEventListener('click', () => {
-    noResponse.classList.add('feedback--response__visible');
-    disableButtons();
-    sendFeedback(0);
+    const sendFeedback = (value) => {
+      if (typeof ga !== 'function') return;
+      const args = {
+        command: 'send',
+        hitType: 'event',
+        category: 'Helpful',
+        action: 'click',
+        label: window.location.pathname,
+        value: value
+      };
+      ga(args.command, args.hitType, args.category, args.action, args.label, args.value);
+    };
+    yesButton.addEventListener('click', () => {
+      yesResponse.classList.add('feedback--response__visible');
+      disableButtons();
+      sendFeedback(1);
+    });
+    noButton.addEventListener('click', () => {
+      noResponse.classList.add('feedback--response__visible');
+      disableButtons();
+      sendFeedback(0);
+    });
   });
 </script>