Re: Get Grades Done: the joys of Org's simple power

[Richard Lawrence <wyley.r@gmail.com>]

Hi Devin,

Devin Prater <r.d.t.prater@gmail.com> writes:

> Ah, I’m using Safari on MacOS 10.15. I can try with Chrome as well, though.

Did it work in Chrome, and/or when you moved the script to the end of
the file?

For what it's worth, here is a new version that should work better
regardless of where it's placed in the document.  The only change is
that the code which replaces the text representation of the checkboxes
with HTML checkboxes has been wrapped in a function that fires on the
"DOMContentLoaded" event.

Hope that's helpful!

-- 
Best,
Richard

#+begin_export html
<script type="text/javascript">
  function updateCookiesIn(div) {
      const headline = div.querySelector("h1, h2, h3, h4, h5, h6");
      if (!headline) return;
      const cookies = Array.from(headline.querySelectorAll("code"))
            .filter(c => c.innerText.startsWith("[") && c.innerText.endsWith("]"));
      const fracCookies = cookies.filter(c => c.innerText.includes("/"));
      const pctCookies = cookies.filter(c => c.innerText.includes("%"));

      // The ugly query strings here restrict the selection to checkboxes at *this* level of the hierarchy
      const allTasks = div.querySelectorAll(`#${div.id} > div > ul input[type=checkbox], #${div.id} > div > ol input[type=checkbox]`);
      const completedTasks = div.querySelectorAll(`#${div.id} > div > ul input[type=checkbox]:checked, #${div.id} > div > ol input[type=checkbox]:checked`);

      const newFrac = `[${completedTasks.length}/${allTasks.length}]`;
      const newPctText = allTasks.length
            ? (100 * completedTasks.length / allTasks.length).toFixed(0)
            : "100"; // Org shows 100% for a cookie when there are no checkboxes 
      const newPct = `[${newPctText}%]`;

      fracCookies.forEach(c => c.innerText = newFrac);
      pctCookies.forEach(c => c.innerText = newPct);
  }

  function replaceWithCheckbox(code) {
      const isChecked = code.innerText.includes("X");

      const checkbox = document.createElement("input");
      checkbox.setAttribute("type", "checkbox");
      if (isChecked) checkbox.setAttribute("checked", "checked");
      checkbox.onclick = function (e) {
          const container = findContainingSection(e.target);
          if (!container) return;
          updateCookiesIn(container);
      };

      code.replaceWith(checkbox);
  }

  function findContainingSection(el) {
      if (!el.parentElement) return null;

      const parent = el.parentElement;
      const classes = Array.from(parent.classList);
      if (classes.some(cl => cl.startsWith("outline") && !cl.startsWith("outline-text"))) {
          return parent;
      } else {
          return findContainingSection(parent);
      }
  }

document.addEventListener("DOMContentLoaded", function(event) { 
  const orgCheckboxes = document.querySelectorAll(".off > code, .on > code");
  orgCheckboxes.forEach(replaceWithCheckbox);
  
  const orgSections = document.querySelectorAll("div.outline-1, div.outline-2, div.outline-3, div.outline-4, div.outline-5, div.outline-6");
  orgSections.forEach(updateCookiesIn);
});

</script>
#+end_export