From 077c659f3f01438e4900d4aa4d98123384b4950b Mon Sep 17 00:00:00 2001
From: "Karl O. Pinc" <kop@karlpinc.com>
Date: Tue, 24 Sep 2024 22:56:44 -0500
Subject: [PATCH] Make the show spaces function of the sql results page work

---
 MANIFEST.in                              |  1 +
 src/pgwui_sql/static/pgwui_sql.css       |  4 +-
 src/pgwui_sql/static/pgwui_sql.js        | 54 ++++++++++++++++++
 src/pgwui_sql/static/show_whitespace.css | 27 +++++++++
 src/pgwui_sql/templates/sql.mak          | 70 +++++++++---------------
 5 files changed, 111 insertions(+), 45 deletions(-)
 create mode 100644 src/pgwui_sql/static/pgwui_sql.js
 create mode 100644 src/pgwui_sql/static/show_whitespace.css

diff --git a/MANIFEST.in b/MANIFEST.in
index 53186a6..444fd9e 100644
--- a/MANIFEST.in
+++ b/MANIFEST.in
@@ -6,5 +6,6 @@ include LICENSE.txt
 include Makefile
 include src/pgwui_sql/VERSION
 include src/pgwui_sql/static/*.css
+include src/pgwui_sql/static/*.js
 include src/pgwui_sql/templates/*.mak
 include tox.ini
diff --git a/src/pgwui_sql/static/pgwui_sql.css b/src/pgwui_sql/static/pgwui_sql.css
index 458e3b9..bb547b4 100644
--- a/src/pgwui_sql/static/pgwui_sql.css
+++ b/src/pgwui_sql/static/pgwui_sql.css
@@ -1,6 +1,6 @@
 /* Copyright (C) 2024 The Meme Factory, Inc.  http://www.karlpinc.com/
  *
- * This file is part of PGWUI_Common.
+ * This file is part of PGWUI_SQL.
  *
  * This program is free software: you can redistribute it and/or
  * modify it under the terms of the GNU Affero General Public License
@@ -16,7 +16,7 @@
  * License along with this program.  If not, see
  * <http://www.gnu.org/licenses/>.
  *
- * Required style sheet for PGWUI programs.
+ * Required style sheet for PGWUI_SQL.
  *
  * Karl O. Pinc <kop@karlpinc.com>
  */
diff --git a/src/pgwui_sql/static/pgwui_sql.js b/src/pgwui_sql/static/pgwui_sql.js
new file mode 100644
index 0000000..66e1728
--- /dev/null
+++ b/src/pgwui_sql/static/pgwui_sql.js
@@ -0,0 +1,54 @@
+/* Copyright (C) 2024 The Meme Factory, Inc.  http://www.karlpinc.com/
+ 
+     This file is part of PGWUI_SQL.
+    
+     This program is free software: you can redistribute it and/or
+     modify it under the terms of the GNU Affero General Public License
+     as published by the Free Software Foundation, either version 3 of
+     the License, or (at your option) any later version.
+    
+     This program is distributed in the hope that it will be useful, but
+     WITHOUT ANY WARRANTY; without even the implied warranty of
+     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+     Affero General Public License for more details.
+    
+     You should have received a copy of the GNU Affero General Public
+     License along with this program.  If not, see
+     <http://www.gnu.org/licenses/>.
+
+  Javascript for the sql results window.
+ 
+  Karl O. Pinc <kop@karlpinc.com>
+
+  See sql.mak for the script that defines
+*/
+
+function openSqlEdit() {
+         window.open(
+              pgwuiSqlEditRoute(),
+              'sql_edit',
+              'popup=true,width=' + window.innerWidth
+                + ',height=' + window.innerHeight
+                + ',left=' + (window.screenLeft + window.outerWidth)
+                + ',top=' + window.screenTop)
+         .focus();
+}
+function whitespaceDisplay(checked) {
+         if (checked) {
+           globalThis.tdSqltextSheet.disabled = false;
+         } else {
+           globalThis.tdSqltextSheet.disabled = true;
+         }
+}
+function getTdSqltextSheet() {
+    const url = pgwuiSqlShowWhitespaceURL();
+    for (const sheet of document.styleSheets) {
+        if (sheet.href === url) {
+            return sheet;
+        }}}
+
+globalThis.tdSqltextSheet = getTdSqltextSheet();
+const show_spaces = document.getElementById('show_spaces_id');
+if (show_spaces !== null) {
+    whitespaceDisplay(show_spaces.checked);
+}
diff --git a/src/pgwui_sql/static/show_whitespace.css b/src/pgwui_sql/static/show_whitespace.css
new file mode 100644
index 0000000..69c86f2
--- /dev/null
+++ b/src/pgwui_sql/static/show_whitespace.css
@@ -0,0 +1,27 @@
+/* Copyright (C) 2024 The Meme Factory, Inc.  http://www.karlpinc.com/
+ *
+ * This file is part of PGWUI_SQL.
+ *
+ * This program is free software: you can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License
+ * as published by the Free Software Foundation, either version 3 of
+ * the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public
+ * License along with this program.  If not, see
+ * <http://www.gnu.org/licenses/>.
+ *
+ * Style sheet that shows whitespace in the SQL results
+ *
+ * Karl O. Pinc <kop@karlpinc.com>
+ */
+
+td.sqltext { text-decoration-line: underline;
+             text-decoration-color: silver;
+             text-decoration-style: double; }
+
diff --git a/src/pgwui_sql/templates/sql.mak b/src/pgwui_sql/templates/sql.mak
index 18adeba..0c11e8b 100644
--- a/src/pgwui_sql/templates/sql.mak
+++ b/src/pgwui_sql/templates/sql.mak
@@ -39,6 +39,20 @@
 
 <%inherit file="${sql_base_mak}" />
 
+<script>
+  // Functions for delivering "static" content that comes from templating.
+  function pgwuiSqlEditRoute() {
+           return '${request.route_path("pgwui_sql_edit")|n}';
+  }
+  function pgwuiSqlShowWhitespaceURL() {
+           return '${request.static_url(
+                         "pgwui_sql:static/show_whitespace.css")}';
+  }
+  // Set window name so that the sql_edit window can vary the target
+  // by db/user/etc. and have multiple result windows open at once.
+  window.name='${self.sql_results_target()}';
+</script>
+
 <%block name="title" filter="trim">
   % if havecreds:
       sql -- Results
@@ -47,6 +61,13 @@
   % endif
 </%block>
 
+<%block name="stylesheet_links">
+  ${parent.stylesheet_links()}
+  <link rel="stylesheet"
+        href="${request.static_url('pgwui_sql:static/show_whitespace.css')}"
+        type="text/css" />
+</%block>
+
 <%block name="action_success">
   <p><em class="success">No errors</em>${
       f', from file ({filename})' if upload_sql else ''
@@ -128,6 +149,7 @@
       </self.lib:td_label>
       <self.lib:td_input tab_index="${tab_index}">
         <input name="show_spaces"
+               id="show_spaces_id"
                tabindex="${tab_index.val}"
                type="checkbox"
                ${show_spaces | n}
@@ -145,48 +167,6 @@
   </form>
 </%def>
 
-<script>
-  window.name='${self.sql_results_target()}';
-  function open_sql_edit() {
-           window.open(
-                '${request.route_path("pgwui_sql_edit")|n}',
-                'sql_edit',
-                'popup=true,width=' + window.innerWidth
-                  + ',height=' + window.innerHeight
-                  + ',left=' + (window.screenLeft + window.outerWidth)
-                  + ',top=' + window.screenTop)
-           .focus();
-  }
-  function whitespaceDisplay(checked) {
-           const tdSqltextSheet = document.adoptedStyleSheets[0];
-
-           if (checked) {
-             tdSqltextSheet.disabled = false;
-           } else {
-             tdSqltextSheet.disabled = true;
-           }
-  }
-
-  // See: https://web.dev/articles/constructable-stylesheets
-  function setupCSS() {
-    tdSqltextSheet = new CSSStyleSheet(disabled=true);
-    tdSqltextSheet.replaceSync(
-      'td.sqltext {
-         text-decoration-line: underline;
-         text-decoration-color: silver;
-         text-decoration-style: double; }');
-    document.adoptedStyleSheets = [tdSqltextSheet];
-  }
-
-  if (document.readyState === "loading") {
-    // Loading hasn't finished yet
-    document.addEventListener("DOMContentLoaded", setupCSS);
-  } else {
-    // `DOMContentLoaded` has already fired
-    setupCSS();
-  }
-</script>
-
 <noscript>
   <p class="error">ALERT: This page requires JavaScript be turned on.</p>
 </noscript>
@@ -196,7 +176,7 @@
      <input value="Login" tabindex="${tab_index.val}" type="submit" />
    % else:
      <button type="button" tabindex="${tab_index.val}"
-             onclick="open_sql_edit();"
+             onclick="openSqlEdit();"
      >New SQL Entry Window</button>
    % endif
    <% tab_index.inc() %>
@@ -205,3 +185,7 @@
 <% tab_index = self.attr.TabIndex() %>
 ${render_results()}
 ${self.main_form(tab_index)}
+
+<script defer
+        src="${request.static_url('pgwui_sql:static/pgwui_sql.js')}">
+</script>
-- 
2.34.1