Made indicator and request classes customisable

This commit is contained in:
Ben Croker 2020-06-30 11:34:06 +02:00 committed by GitHub
parent 2fbe230853
commit e6a9501d9a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1149,7 +1149,7 @@ return (function () {
indicators = [elt]; indicators = [elt];
} }
forEach(indicators, function(ic) { forEach(indicators, function(ic) {
ic.classList[action].call(ic.classList, "htmx-request"); ic.classList[action].call(ic.classList, htmx.config.requestClass);
}); });
} }
@ -1668,18 +1668,16 @@ return (function () {
} }
} }
// insert htmx-indicator css rules immediate, if not configured otherwise function insertIndicatorStyles() {
(function() { if (htmx.config.includeIndicatorStyles !== false) {
var metaConfig = getMetaConfig();
if (metaConfig === null || metaConfig.includeIndicatorStyles !== false) {
getDocument().head.insertAdjacentHTML("beforeend", getDocument().head.insertAdjacentHTML("beforeend",
"<style>\ "<style>\
.htmx-indicator{opacity:0;transition: opacity 200ms ease-in;}\ ." + htmx.config.indicatorClass + "{opacity:0;transition: opacity 200ms ease-in;}\
.htmx-request .htmx-indicator{opacity:1}\ ." + htmx.config.requestClass + " ." + htmx.config.indicatorClass + "{opacity:1}\
.htmx-request.htmx-indicator{opacity:1}\ ." + htmx.config.requestClass + "." + htmx.config.indicatorClass + "{opacity:1}\
</style>"); </style>");
} }
})(); }
function getMetaConfig() { function getMetaConfig() {
var element = getDocument().querySelector('meta[name="htmx-config"]'); var element = getDocument().querySelector('meta[name="htmx-config"]');
@ -1700,6 +1698,7 @@ return (function () {
// initialize the document // initialize the document
ready(function () { ready(function () {
mergeMetaConfig(); mergeMetaConfig();
insertIndicatorStyles();
var body = getDocument().body; var body = getDocument().body;
processNode(body, true); processNode(body, true);
triggerEvent(body, 'load.htmx', {}); triggerEvent(body, 'load.htmx', {});
@ -1733,7 +1732,9 @@ return (function () {
defaultSwapStyle:'innerHTML', defaultSwapStyle:'innerHTML',
defaultSwapDelay:0, defaultSwapDelay:0,
defaultSettleDelay:100, defaultSettleDelay:100,
includeIndicatorStyles:true includeIndicatorStyles:true,
indicatorClass:'htmx-indicator',
requestClass:'htmx-request'
}, },
parseInterval:parseInterval, parseInterval:parseInterval,
_:internalEval, _:internalEval,