diff options
Diffstat (limited to 'static/js/ext/multi-swap.js')
-rw-r--r-- | static/js/ext/multi-swap.js | 50 |
1 files changed, 50 insertions, 0 deletions
diff --git a/static/js/ext/multi-swap.js b/static/js/ext/multi-swap.js new file mode 100644 index 0000000..0c882f8 --- /dev/null +++ b/static/js/ext/multi-swap.js @@ -0,0 +1,50 @@ +(function () { + + if (htmx.version && !htmx.version.startsWith("1.")) { + console.warn("WARNING: You are using an htmx 1 extension with htmx " + htmx.version + + ". It is recommended that you move to the version of this extension found on https://htmx.org/extensions") + } + + /** @type {import("../htmx").HtmxInternalApi} */ + var api; + + htmx.defineExtension('multi-swap', { + init: function (apiRef) { + api = apiRef; + }, + isInlineSwap: function (swapStyle) { + return swapStyle.indexOf('multi:') === 0; + }, + handleSwap: function (swapStyle, target, fragment, settleInfo) { + if (swapStyle.indexOf('multi:') === 0) { + var selectorToSwapStyle = {}; + var elements = swapStyle.replace(/^multi\s*:\s*/, '').split(/\s*,\s*/); + + elements.map(function (element) { + var split = element.split(/\s*:\s*/); + var elementSelector = split[0]; + var elementSwapStyle = typeof (split[1]) !== "undefined" ? split[1] : "innerHTML"; + + if (elementSelector.charAt(0) !== '#') { + console.error("HTMX multi-swap: unsupported selector '" + elementSelector + "'. Only ID selectors starting with '#' are supported."); + return; + } + + selectorToSwapStyle[elementSelector] = elementSwapStyle; + }); + + for (var selector in selectorToSwapStyle) { + var swapStyle = selectorToSwapStyle[selector]; + var elementToSwap = fragment.querySelector(selector); + if (elementToSwap) { + api.oobSwap(swapStyle, elementToSwap, settleInfo); + } else { + console.warn("HTMX multi-swap: selector '" + selector + "' not found in source content."); + } + } + + return true; + } + } + }); +})(); |