hx-tomselect 1.0.12 → 1.0.15

package/hx-tomselect.js

@@ -2,6 +2,9 @@
     /** stable build*/
     const version = '11'
 
+    /** Resolve htmx from global (script tag) so we work with htmx 4 and correct load order. */
+    function getHtmx() { return typeof window !== 'undefined' && window.htmx; }
+
     /**
      * @typedef {Object} SupportedAttribute
      * Defines an attribute supported by a configuration modification system.
@@ -166,7 +169,7 @@
 							}
 							return res.text();
 						})
-                        .then((responseHtml) => htmx.process(elm, responseHtml))
+                        .then((responseHtml) => getHtmx().process(elm, responseHtml))
                         .catch(error => {
                             console.error('Error adding item', error)
                             elm.setAttribute('tom-select-warning', `ts-add-post-url - Error processing item: ${JSON.stringify(error)}`);
@@ -219,6 +222,21 @@
                 }
             })
         },
+        {
+            key: 'ts-on-change-navigate',
+            configChange: (elm, config) => ({
+                multiple: false,
+                onChange: function(value) {
+                    const urlTemplate = elm.getAttribute('ts-on-change-navigate')
+                    if(urlTemplate && value){
+                        const url = urlTemplate.replace('{value}', value)
+                        window.location.href = url
+                    }else{
+                        console.warn('tomSelect - ts-on-change-navigate - no url template found')
+                    }
+                }
+            })
+        },
         {
             key: 'ts-raw-config',
             configChange: (elm, config) => elm.getAttribute('ts-raw-config')
@@ -295,7 +313,10 @@
     }
     }
 
-    htmx.defineExtension('tomselect', {
+    function register() {
+        var h = getHtmx();
+        if (!h || !h.defineExtension) return false;
+        h.defineExtension('tomselect', {
         // This is doing all the tom-select attachment at this stage, but relies on this full document scan (would prefer onLoad of speicfic content):
         onEvent: function (name, evt) {
             if (name === "htmx:afterProcessNode") {
@@ -329,5 +350,22 @@
             	.forEach(elt => elt.tomselect.destroy())*/
 		}
     });
+        return true;
+    }
+    if (!register()) {
+        function tryRegister() {
+            if (register()) return;
+            if (document.readyState === 'loading') {
+                document.addEventListener('DOMContentLoaded', tryRegister);
+            } else {
+                setTimeout(tryRegister, 50);
+            }
+        }
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', tryRegister);
+        } else {
+            setTimeout(tryRegister, 50);
+        }
+    }
 
 })();

package/index.html

@@ -5,8 +5,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>hx-tomselect</title>
-    <script defer src="./hx-tomselect.js"></script>
-    <script src="https://unpkg.com/htmx.org@latest"></script>
+    <script src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0-alpha7/dist/htmx.min.js"></script>
+    <script src="./hx-tomselect.js"></script>
     <link href="https://cdn.jsdelivr.net/npm/tom-select@latest/dist/css/tom-select.css" rel="stylesheet"/>
     <script src="https://cdn.jsdelivr.net/npm/tom-select@latest/dist/js/tom-select.complete.min.js"></script>
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css" rel="stylesheet">
@@ -60,15 +60,15 @@
             <pre
                 class="mb-2 code-container"><code class="language-markup wrap">&lt;script src="https://unpkg.com/hx-tomselect/hx-tomselect.js"&gt;&lt;/script&gt;</code></pre>
 
-            this extention relies on <a class="underline" href="https://v1.htmx.org">htmx</a> and <a class="underline"
-                href="https://tom-select.js.org/">tom-select.js</a> being loaded before it is included:
+            this extention relies on <a class="underline" href="https://htmx.org">htmx</a> and <a class="underline"
+                href="https://tom-select.js.org/">tom-select.js</a> being loaded before it is included (htmx first, then this extension):
             <pre class="mb-2 code-container"><code class="language-markup">&lt;!DOCTYPE html&gt;
 &lt;html&gt;
     &lt;head&gt;
-        &lt;script src="https://unpkg.com/htmx.org@latest"&gt;
+        &lt;script src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0-alpha7/dist/htmx.min.js"&gt;&lt;/script&gt;
         &lt;link href="https://unpkg.com/tom-select@latest/dist/css/tom-select.css" rel="stylesheet" /&gt;
-        &lt;script src="https://unpkg.com/tom-select@latest/dist/js/tom-select.complete.min.js"&gt;
-        &lt;script src="https://unpkg.com/hx-tomselect/hx-tomselect.js"/&gt;
+        &lt;script src="https://unpkg.com/tom-select@latest/dist/js/tom-select.complete.min.js"&gt;&lt;/script&gt;
+        &lt;script src="https://unpkg.com/hx-tomselect/hx-tomselect.js"&gt;&lt;/script&gt;
     &lt;/head&gt;
     &lt;body&gt;
         &lt;select hx-ext="tomselect"&gt;
@@ -262,6 +262,17 @@
 </code></pre>
         </section>
     </div>
+
+
+    <section class="mb-20">
+        <h2 class="text-xl font-semibold mb-3">Navigate on change</h2>
+        <p>navigate to a new page when the value changes</p>
+        <select hx-ext="tomselect" ts-on-change-navigate="{value}">
+            <option value="">Select</option>
+            <option value="https://www.google.com">Google </option>
+            <option value="https://www.bing.com">Bing</option>
+        </select>
+    </section>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/prism.min.js"></script>
 </body>
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hx-tomselect",
-  "version": "1.0.12",
-  "description": "Provides a hx-ext=\"tomselect\" htmx extention tag",
+  "version": "1.0.15",
+  "description": "Htmx extension that allows rendering tom-select via plain html elements",
   "main": "hx-tomselect.js",
   "repository": {
     "type": "git",