Cleanup

docs/orgchart/index.html

@@ -4,26 +4,30 @@
     <meta charset="utf-8">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.5.0/lz-string.min.js" integrity="sha512-qtX0GLM3qX8rxJN1gyDfcnMFFrKvixfoEOwbBib9VafR5vbChV5LeE5wSI/x+IlCkTY5ZFddFDCCfaVJJNnuKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.1/jquery-ui.min.js" integrity="sha512-MSOo1aY+3pXCOCdGAYoBZ6YGI0aragoQsg1mKKBHXCYPIWxamwOE7Drh+N5CPgGI5SA9IEKJiPjdfqWFWmZtRA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/sync.min.js"></script>
     <script src='https://unpkg.com/[email protected]/dist/panzoom.min.js'></script>
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
     <script type="text/javascript">
-      console.log("Version: {{site.github.build_revision}}");
+      let Zoomer;
+      let OneTimeSetupComplete = false;
 
-      let zoomer;
-      let oneTimeSetup = false;
-
-      google.charts.load("current", { 
-        packages: ["orgchart"],
+      $(document).ready(() => {
+        loadCharts();
       });
-      google.charts.setOnLoadCallback(() => {
-        $(document).ready(() => {
+
+      function loadCharts() {
+        google.charts.load("current", { 
+          packages: ["orgchart"],
+        });
+
+        google.charts.setOnLoadCallback(() => {
+          // Add a delay, to ensure that the Coda iframe is properly sized.
+          // A loading bar will be shown.
           window.setTimeout(() => {
             drawChart();
           }, 1000);
-        })
-      });
+        });
+      }
 
       function isElementFullyVisible(el) {
         const rect = el.getBoundingClientRect();
@@ -37,7 +41,7 @@
 
       function showAll() {
         let table = $("#chart > table").get(0);
-        zoomer.showRectangle(table.getBoundingClientRect());
+        Zoomer.showRectangle(table.getBoundingClientRect());
       }
 
       function centerOn(elem) {
@@ -49,29 +53,35 @@
         var dx = container.width / 2 - cx;
         var dy = container.height / 2 - cy;
 
-        let curr = zoomer.getTransform();
-        zoomer.smoothMoveTo(curr.x + dx, curr.y + dy)
+        let curr = Zoomer.getTransform();
+        Zoomer.smoothMoveTo(curr.x + dx, curr.y + dy)
       }
 
       function drawChart() {
-        var data = new google.visualization.DataTable();
-        data.addColumn("string", "Name");
-        data.addColumn("string", "Manager");
-
+        // Get parameters from the URL.
         let params = new URLSearchParams(window.location.search);
         let input = params.get('i');
         let backgroundColor = params.get('b');
         let textColor = params.get('t');
 
+        // Handle the color options, if set.
         if (backgroundColor) {
           document.documentElement.style.setProperty("--node-background-color", backgroundColor);
         }
         if (textColor) {
           document.documentElement.style.setProperty("--node-text-color", textColor);
         }
 
+        // Parse the input data.
         let csv = LZString.decompressFromEncodedURIComponent(input);
         let people = csv_parse_sync.parse(csv);
+
+        // Setup the chart datasource.
+        var data = new google.visualization.DataTable();
+        data.addColumn("string", "Name");
+        data.addColumn("string", "Manager");
+
+        // Add to the datasource.
         let rows = people.map((person, i) => {
           let [name, managerIndex, description] = person;
           let isManager = people.some(p => p[1] == i);
@@ -88,24 +98,24 @@
             manager,
           ];
         });
-
-        // For each orgchart box, provide the name, manager, and tooltip to show.
         data.addRows(rows);
 
         // Create the chart.
         var chart = new google.visualization.OrgChart(document.getElementById("chart"));
 
+        // Add handler for after the chart renders.
         google.visualization.events.addListener(chart, 'ready', () => {
-          if (!oneTimeSetup) {
+          if (!OneTimeSetupComplete) {
             let pane = $("#pane").get(0);
-              zoomer = panzoom(pane, {
+              Zoomer = panzoom(pane, {
               zoomDoubleClickSpeed: 1,
             });
             showAll();
-            oneTimeSetup = true;
+            OneTimeSetupComplete = true;
           }
         });
 
+        // Add a handler for when a node is collapsed or expanded.
         google.visualization.events.addListener(chart, 'collapse', (e) => {
           let {row, collapsed} = e;
           let node = $('#person-' + row);
@@ -120,7 +130,7 @@
           }
         });
 
-        // Draw the chart, setting the allowHtml option to true for the tooltips.
+        // Draw the chart.
         chart.draw(data, {
           allowHtml :true,
           allowCollapse: true,
@@ -131,7 +141,6 @@
     </script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.14.1/themes/base/jquery-ui.min.css" integrity="sha512-TFee0335YRJoyiqz8hA8KV3P0tXa5CpRBSoM0Wnkn7JoJx1kaq1yXL/rb8YFpWXkMOjRcv5txv+C6UluttluCQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.colors.min.css">
     <style>
       :root {
         --node-background-color: rgb(219, 238, 250);