How to add checkbox functionality above Giscus?

[syeda-git]

We have implemented Giscus. But, we would like users to first select a checkbox before adding comments. The checkbox with text "To add a comment...'. How can we add it?

[kamilkrzyskow]

Hello,
you'd have to use some custom extra JavaScript:
https://squidfunk.github.io/mkdocs-material/customization/#additional-javascript

You can look at the example of how the Giscus implementation is synced to the current palette:
https://squidfunk.github.io/mkdocs-material/setup/adding-a-comment-system/#__codelineno-1-21

Similarly to that you can use the DOMContentLoaded event to add custom logic which would hide the comment button and add a checkbox that would unhide it later.
EDIT: My mistake, read the comment below.

[kamilkrzyskow]

@syeda-git
I'm sorry, but I spoke too soon. Giscus creates their own iframe with a different domain, therefore accessing the DOM inside it with JavaScript leads to a DOMException: Permission denied to access property "document" on cross-origin object error.

Therefore, it's not possible to modify the inner DOM at all. So instead of hiding the button you could hide the whole comment section, but I'm assuming it's not an ideal solution.

[kamilkrzyskow]

Something like this should work:

let toggleVisibility = (element) => {
  let state = element.style.display;
  if (!state) {
    element.style.display = "none";
  } else {
    element.style.display = "";
  }
}

let handleCheckBox = (_) => {
  toggleVisibility(document.querySelector(".giscus-frame"));
}

let insertCheckBox = (commentBox) => {
  let checkBox = document.createElement("input");
  checkBox.type = "checkbox";
  checkBox.name = "toggle-comments";
  checkBox.id = "toggle-comments";
  checkBox.addEventListener("change", handleCheckBox);

  let label = document.createElement("label");
  label.htmlFor = "toggle-comments";
  label.appendChild(document.createTextNode("Confirm desire to comment"));

  commentBox.insertAdjacentElement("beforebegin", checkBox);
  commentBox.insertAdjacentElement("beforebegin", label);
}

document.addEventListener("DOMContentLoaded", () => {
  let giscusFrame = document.querySelector(".giscus-frame");
  if (!giscusFrame) {
    console.debug("no giscus frame found");
    return;
  }

  insertCheckBox(giscusFrame);
  toggleVisibility(giscusFrame);
});

But please note that this only hides an already initialized Giscus frame. Advantages of that are that after checking the box the user will immediately see the comments, without any loading. But perhaps you'd like to prevent loading Giscus before the checkbox, then you'd need to also insert the Giscus script tag after the user has checked the box. Something similar to this giscus/giscus#336 (comment)

[squidfunk]

I'm marking this as answered. The request was specifically about adding a comment, which I read that comments should be available to be read, so Giscus in fact must be loaded. This should be a reasonable solution to achieve what was asked for. Thanks for answering, @kamilkrzyskow!

[kamilkrzyskow]

Giscus is loaded but the iframe is hidden, so it does indeed prevent the visitor from reading the comments too 😞.

This example crudely adds a checkbox preventing writing and reading comments for the average user. It meets the criteria of the request while also adding an unfortunate trade-off.

I couldn't find any config options to disable the ability to add new comments, so perhaps @syeda-git could create a request upstream to Giscus.

[squidfunk]

I'm not sure what the nature of the request is, but if it's privacy reasons, a better idea might be to conditionally load Giscus after the user agreed to it via a checkbox (or button – even simpler to implement). Another idea might be to use the cookie consent, and bring that up if the user hasn't accepted the cookie.

[syeda-git]

Thanks @kamilkrzyskow for the suggestion. It worked. I agree it would be good to at least read the comments before selecting the checkbox. I will raise the request with Giscus.