From dd2ba852f72fb9eb5b5266d6584dc4a33a985c2a Mon Sep 17 00:00:00 2001
From: "Karl O. Pinc" <kop@karlpinc.com>
Date: Tue, 8 Oct 2024 13:08:24 -0500
Subject: [PATCH] Modify the link disabled attribute instead of using the DOM

Having the page load with the disabled attribute present prevents
the "flash" of having the styling present and then removed.  But the
DOM can't be used to put the stylesheet in and out of the rendering
chain when the stylesheet is disabled, so no point in that.
---
 src/pgwui_sql/static/pgwui_sql.js | 26 ++++++++++++++------------
 src/pgwui_sql/templates/sql.mak   |  2 ++
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/pgwui_sql/static/pgwui_sql.js b/src/pgwui_sql/static/pgwui_sql.js
index e30b7d1..fcd1a87 100644
--- a/src/pgwui_sql/static/pgwui_sql.js
+++ b/src/pgwui_sql/static/pgwui_sql.js
@@ -39,19 +39,23 @@ function openSqlEdit() {
 }
 
 function whitespaceDisplay(checked) {
-         if (checked) {
-           globalThis.tdSqltextSheet.disabled = false;
-         } else {
-           globalThis.tdSqltextSheet.disabled = true;
-         }
+    const whitespace_sheet = document.getElementById(
+        'stylesheet_show_whitespace_id');
+    if (checked) {
+        whitespace_sheet.removeAttribute('disabled');
+    } else {
+         whitespace_sheet.setAttribute('disabled', '');
+    }
 }
 
 function rulesDisplay(checked) {
-         if (checked) {
-           globalThis.horizontalRuleSheet.disabled = false;
-         } else {
-           globalThis.horizontalRuleSheet.disabled = true;
-         }
+    const rule_sheet = document.getElementById(
+        'stylesheet_background_rules_id');
+     if (checked) {
+         rule_sheet.removeAttribute('disabled');
+     } else {
+         rule_sheet.setAttribute('disabled', '');
+     }
 }
 
 /* Functions for initialization */
@@ -81,8 +85,6 @@ function initializeStyling() {
 }
 
 /* Initialization */
-globalThis.tdSqltextSheet = getSheet(pgwuiSqlShowWhitespaceURL());
-globalThis.horizontalRuleSheet = getSheet(pgwuiSqlBackgroundRulesURL());
 attachEvents();
 /* This is redundent, since styling on load should be right,
    but it does not hurt and is needed to properly style should the checkbox
diff --git a/src/pgwui_sql/templates/sql.mak b/src/pgwui_sql/templates/sql.mak
index 868ac5a..9f3877d 100644
--- a/src/pgwui_sql/templates/sql.mak
+++ b/src/pgwui_sql/templates/sql.mak
@@ -75,10 +75,12 @@
 <%block name="stylesheet_links">
   ${parent.stylesheet_links()}
   <link rel="stylesheet"
+        id="stylesheet_show_whitespace_id"
         disabled
         href="${request.static_path('pgwui_sql:static/show_whitespace.css')}"
         type="text/css" />
   <link rel="stylesheet"
+        id="stylesheet_background_rules_id"
         disabled
         href="${request.static_path('pgwui_sql:static/background_rules.css')}"
         type="text/css" />
-- 
2.34.1