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",
+ "");
+ }
+ })();
- 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 @@
+
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 @@
+
+
+
+
+ Test if the includeIndicatorStyles meta option works
+
+
+
+
You should see bars here:
+
+ We are overriding the normal CSS inclusion with the meta directive {"includeIndicatorStyles":false}
+ so you should see the indicator because it is not being hidden by the default classes.
+
+
+
+
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 @@
+
+
+
+ Test if indicators are invisible by default
+
+
+
+
You should not see bars here:
+
+
+
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:
+
+
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 @@
+
+
+
+