Better style handling:

* inject the style as a stand alone element * support the meta directive to not include the default style fixes bigskysoftware#13
piotrtomiak · May 16, 2020 · 6e06c0d · 6e06c0d
1 parent d4b4d46
commit 6e06c0d
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 13 deletions.
diff --git 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
diff --git a/test/no-indicator-css.html 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
@@ -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
@@ -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: