From 6e06c0df877d0f4792b110e26e961d4cfd2fd96d Mon Sep 17 00:00:00 2001
From: carson <carson@leaddyno.com>
Date: Sat, 16 May 2020 14:30:25 -0700
Subject: [PATCH] Better style handling:

* inject the style as a stand alone element
* support the meta directive to not include the default style

fixes https://github.com/bigskysoftware/kutty/issues/13
---
 src/kutty.js                | 38 +++++++++++++++++----------
 test/img/bars.svg           | 52 +++++++++++++++++++++++++++++++++++++
 test/no-indicator-css.html  | 16 ++++++++++++
 test/yes-indicator-css.html | 11 ++++++++
 www/docs.md                 |  1 +
 5 files changed, 105 insertions(+), 13 deletions(-)
 create mode 100644 test/img/bars.svg
 create mode 100644 test/no-indicator-css.html
 create mode 100644 test/yes-indicator-css.html

diff --git a/src/kutty.js b/src/kutty.js
index bf70ee95..dbf16f8f 100644
--- a/src/kutty.js
+++ b/src/kutty.js
@@ -163,11 +163,6 @@ var kutty = kutty || (function () {
             return trigger.split(/\s+/);
         }
 
-        function addRule(rule) {
-            var sheet = getDocument().styleSheets[0];
-            sheet.insertRule(rule, sheet.cssRules.length);
-        }
-
         function mergeObjects(obj1, obj2) {
             for (var key in obj2) {
                 if (obj2.hasOwnProperty(key)) {
@@ -1261,16 +1256,32 @@ var kutty = kutty || (function () {
             }
         }
 
-        // insert kutty-indicator css rules
-        addRule(".kutty-indicator{opacity:0;transition: opacity 200ms ease-in;}");
-        addRule(".kutty-request .kutty-indicator{opacity:1}");
-        addRule(".kutty-request.kutty-indicator{opacity:1}");
+        // insert kutty-indicator css rules immediate, if not configured otherwise
+        (function() {
+            var metaConfig = getMetaConfig();
+            if (metaConfig === null || metaConfig.includeIndicatorStyles !== false) {
+                getDocument().head.insertAdjacentHTML("beforeend",
+                    "<style>\
+                      .kutty-indicator{opacity:0;transition: opacity 200ms ease-in;}\
+                      .kutty-request .kutty-indicator{opacity:1}\
+                      .kutty-request.kutty-indicator{opacity:1}\
+                    </style>");
+            }
+        })();
 
-        function mergeMetaConfig() {
+        function getMetaConfig() {
             var element = getDocument().querySelector('meta[name="kutty-config"]');
             if (element) {
-                var source = JSON.parse(element.content);
-                kutty.config = mergeObjects(kutty.config , source)
+                return JSON.parse(element.content);
+            } else {
+                return null;
+            }
+        }
+
+        function mergeMetaConfig() {
+            var metaConfig = getMetaConfig();
+            if (metaConfig) {
+                kutty.config = mergeObjects(kutty.config , metaConfig)
             }
         }
 
@@ -1307,7 +1318,8 @@ var kutty = kutty || (function () {
                 historyCacheSize:10,
                 defaultSwapStyle:'innerHTML',
                 defaultSwapDelay:0,
-                defaultSettleDelay:100
+                defaultSettleDelay:100,
+                includeIndicatorStyles:true
             },
             version: "0.0.2",
             _:internalEval
diff --git a/test/img/bars.svg b/test/img/bars.svg
new file mode 100644
index 00000000..7cb07e65
--- /dev/null
+++ b/test/img/bars.svg
@@ -0,0 +1,52 @@
+<svg width="16" height="16" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" fill="#494949">
+    <rect y="10" width="15" height="120" rx="6">
+        <animate attributeName="height"
+             begin="0.5s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0.5s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+    <rect x="30" y="10" width="15" height="120" rx="6">
+        <animate attributeName="height"
+             begin="0.25s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0.25s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+    <rect x="60" width="15" height="140" rx="6">
+        <animate attributeName="height"
+             begin="0s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+    <rect x="90" y="10" width="15" height="120" rx="6">
+        <animate attributeName="height"
+             begin="0.25s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0.25s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+    <rect x="120" y="10" width="15" height="120" rx="6">
+        <animate attributeName="height"
+             begin="0.5s" dur="1s"
+             values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
+             repeatCount="indefinite" />
+        <animate attributeName="y"
+             begin="0.5s" dur="1s"
+             values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
+             repeatCount="indefinite" />
+    </rect>
+</svg>
diff --git a/test/no-indicator-css.html b/test/no-indicator-css.html
new file mode 100644
index 00000000..04f820a3
--- /dev/null
+++ b/test/no-indicator-css.html
@@ -0,0 +1,16 @@
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="kutty-config" content='{"includeIndicatorStyles":false}'>
+    <title>Test if the includeIndicatorStyles meta option works</title>
+    <script src="../src/kutty.js"></script>
+</head>
+<body>
+  <h1>You should see bars here:</h1>
+  <p>
+      We are overriding the normal CSS inclusion with the meta directive <code>{"includeIndicatorStyles":false}</code>
+      so you should see the indicator because it is not being hidden by the default classes.
+  </p>
+  <img class="kutty-indicator" src="img/bars.svg" width="200">
+</body>
+</html>
diff --git a/test/yes-indicator-css.html b/test/yes-indicator-css.html
new file mode 100644
index 00000000..bbd0b183
--- /dev/null
+++ b/test/yes-indicator-css.html
@@ -0,0 +1,11 @@
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <title>Test if indicators are invisible by default</title>
+    <script src="../src/kutty.js"></script>
+</head>
+<body>
+  <h1>You should not see bars here:</h1>
+  <img class="kutty-indicator" src="img/bars.svg" width="200">
+</body>
+</html>
diff --git a/www/docs.md b/www/docs.md
index 33e845a3..42c6e096 100644
--- a/www/docs.md
+++ b/www/docs.md
@@ -533,6 +533,7 @@ Kutty allows you to configure a few defaults:
 *  `kutty.config.defaultSwapStyle` - defaults to `innerHTML`
 *  `kutty.config.defaultSwapDelay` - defaults to 0
 *  `kutty.config.defaultSettleDelay` - defaults to 100
+*  `kutty.config.includeIndicatorStyles` - defaults to `true` (determines if the `kutty-indicator` default styles are loaded, must be set in a `meta` tag before the kutty js is included)
 
 You can set them directly in javascript, or you can use a `meta` tag: