itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-26 20:40:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Better style handling:

Browse Source 
* 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
This commit is contained in:
carson 2020-05-16 14:30:25 -07:00
parent d4b4d462ab
commit 6e06c0df87
5 changed files with 105 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/kutty.js
View File

@ -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

52
test/img/bars.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

16
test/no-indicator-css.html Normal file
View File

@ -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>

11
test/yes-indicator-css.html Normal file
View File

@ -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>

1
www/docs.md
View File

@ -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: