Browse code
Initial htmx npm packages installation
Benjamin Roth authored on25/05/2023 09:52:13 Showing1 changed files
| 1 | 1 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,45 @@ |
| 1 |
+(function () {
|
|
| 2 |
+ |
|
| 3 |
+ /** @type {import("../htmx").HtmxInternalApi} */
|
|
| 4 |
+ var api; |
|
| 5 |
+ |
|
| 6 |
+ htmx.defineExtension('multi-swap', {
|
|
| 7 |
+ init: function (apiRef) {
|
|
| 8 |
+ api = apiRef; |
|
| 9 |
+ }, |
|
| 10 |
+ isInlineSwap: function (swapStyle) {
|
|
| 11 |
+ return swapStyle.indexOf('multi:') === 0;
|
|
| 12 |
+ }, |
|
| 13 |
+ handleSwap: function (swapStyle, target, fragment, settleInfo) {
|
|
| 14 |
+ if (swapStyle.indexOf('multi:') === 0) {
|
|
| 15 |
+ var selectorToSwapStyle = {};
|
|
| 16 |
+ var elements = swapStyle.replace(/^multi\s*:\s*/, '').split(/\s*,\s*/); |
|
| 17 |
+ |
|
| 18 |
+ elements.map(function (element) {
|
|
| 19 |
+ var split = element.split(/\s*:\s*/); |
|
| 20 |
+ var elementSelector = split[0]; |
|
| 21 |
+ var elementSwapStyle = typeof (split[1]) !== "undefined" ? split[1] : "innerHTML"; |
|
| 22 |
+ |
|
| 23 |
+ if (elementSelector.charAt(0) !== '#') {
|
|
| 24 |
+ console.error("HTMX multi-swap: unsupported selector '" + elementSelector + "'. Only ID selectors starting with '#' are supported.");
|
|
| 25 |
+ return; |
|
| 26 |
+ } |
|
| 27 |
+ |
|
| 28 |
+ selectorToSwapStyle[elementSelector] = elementSwapStyle; |
|
| 29 |
+ }); |
|
| 30 |
+ |
|
| 31 |
+ for (var selector in selectorToSwapStyle) {
|
|
| 32 |
+ var swapStyle = selectorToSwapStyle[selector]; |
|
| 33 |
+ var elementToSwap = fragment.querySelector(selector); |
|
| 34 |
+ if (elementToSwap) {
|
|
| 35 |
+ api.oobSwap(swapStyle, elementToSwap, settleInfo); |
|
| 36 |
+ } else {
|
|
| 37 |
+ console.warn("HTMX multi-swap: selector '" + selector + "' not found in source content.");
|
|
| 38 |
+ } |
|
| 39 |
+ } |
|
| 40 |
+ |
|
| 41 |
+ return true; |
|
| 42 |
+ } |
|
| 43 |
+ } |
|
| 44 |
+ }); |
|
| 45 |
+})(); |
|
| 0 | 46 |
\ No newline at end of file |