diff options
Diffstat (limited to 'www')
-rw-r--r-- | www/content/_index.md | 8 | ||||
-rw-r--r-- | www/content/docs.md | 10 | ||||
-rw-r--r-- | www/content/extensions/head-support.md | 2 | ||||
-rw-r--r-- | www/content/extensions/htmx-1-compat.md | 2 | ||||
-rw-r--r-- | www/content/extensions/idiomorph.md | 2 | ||||
-rw-r--r-- | www/content/extensions/preload.md | 2 | ||||
-rw-r--r-- | www/content/extensions/response-targets.md | 2 | ||||
-rw-r--r-- | www/content/extensions/sse.md | 2 | ||||
-rw-r--r-- | www/content/extensions/ws.md | 2 | ||||
-rw-r--r-- | www/static/src/htmx.js | 6 | ||||
-rw-r--r-- | www/static/test/core/internals.js | 5 | ||||
-rw-r--r-- | www/static/test/core/regressions.js | 42 | ||||
-rw-r--r-- | www/themes/htmx-theme/static/js/htmx.js | 6 |
13 files changed, 68 insertions, 23 deletions
diff --git a/www/content/_index.md b/www/content/_index.md index c6c42fc6..020f2897 100644 --- a/www/content/_index.md +++ b/www/content/_index.md @@ -91,12 +91,6 @@ if(window.location.search=="?ads=true") { </a> </div> -<div class="alert"> -<b>NEWS:</b> htmx 2.0 has been released! It is not currently marked as <a href="https://docs.npmjs.com/cli/v10/commands/npm-dist-tag#purpose"><code>latest</code></a> -in NPM so that people using the <a href="https://v1.htmx.org">1.x line</a> are not accidentally upgraded. We will mark -2.0 as <code>latest</code> at some point in 2025. -</div> - <h2>introduction</h2> htmx gives you access to [AJAX](@/docs.md#ajax), [CSS Transitions](@/docs.md#css_transitions), [WebSockets](@/docs.md#websockets-and-sse) and [Server Sent Events](@/docs.md#websockets-and-sse) @@ -120,7 +114,7 @@ By removing these constraints, htmx completes HTML as a [hypertext](https://en.w <h2>quick start</h2> ```html - <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.5/dist/htmx.min.js"></script> + <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js"></script> <!-- have a button POST a click via AJAX --> <button hx-post="/clicked" hx-swap="outerHTML"> Click Me diff --git a/www/content/docs.md b/www/content/docs.md index dfba110a..f64f4d5f 100644 --- a/www/content/docs.md +++ b/www/content/docs.md @@ -123,13 +123,13 @@ The fastest way to get going with htmx is to load it via a CDN. You can simply a your head tag and get going: ```html -<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.5/dist/htmx.min.js" integrity="sha384-t4DxZSyQK+0Uv4jzy5B0QyHyWQD2GFURUmxKMBVww9+e2EJ0ei/vCvv7+79z0fkr" crossorigin="anonymous"></script> +<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js" integrity="sha384-Akqfrbj/HpNVo8k11SXBb6TlBWmXXlYQrCSqEWmyKJe+hDm3Z/B2WVG4smwBkRVm" crossorigin="anonymous"></script> ``` An unminified version is also available as well: ```html -<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.5/dist/htmx.js" integrity="sha384-5DNWP7/6VfmFjDrEgZ0MwJiuIz0/juUdZwgMAqxCaHBd/BH8MF4yWxDv+mo/o9CG" crossorigin="anonymous"></script> +<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.js" integrity="sha384-2ksKjJrwjL5VxqAkAZAVOPXvMkwAykMaNYegdixAESVr+KqLkKE8XBDoZuwyWVUDv" crossorigin="anonymous"></script> ``` While the CDN approach is extremely simple, you may want to consider @@ -139,7 +139,7 @@ While the CDN approach is extremely simple, you may want to consider The next easiest way to install htmx is to simply copy it into your project. -Download `htmx.min.js` [from jsDelivr](https://cdn.jsdelivr.net/npm/htmx.org@2.0.5/dist/htmx.min.js) and add it to the appropriate directory in your project +Download `htmx.min.js` [from jsDelivr](https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js) and add it to the appropriate directory in your project and include it where necessary with a `<script>` tag: ```html @@ -151,7 +151,7 @@ and include it where necessary with a `<script>` tag: For npm-style build systems, you can install htmx via [npm](https://www.npmjs.com/): ```sh -npm install htmx.org@2.0.5 +npm install htmx.org@2.0.6 ``` After installing, you’ll need to use appropriate tooling to use `node_modules/htmx.org/dist/htmx.js` (or `.min.js`). @@ -1140,7 +1140,7 @@ You can see all available extensions on the [Extensions](/extensions) page. The fastest way to install htmx extensions created by others is to load them via a CDN. Remember to always include the core htmx library before the extensions and [enable the extension](#enabling-extensions). For example, if you would like to use the [response-targets](/extensions/response-targets) extension, you can add this to your head tag: ```HTML <head> - <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.5/dist/htmx.min.js" integrity="sha384-t4DxZSyQK+0Uv4jzy5B0QyHyWQD2GFURUmxKMBVww9+e2EJ0ei/vCvv7+79z0fkr" crossorigin="anonymous"></script> + <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js" integrity="sha384-Akqfrbj/HpNVo8k11SXBb6TlBWmXXlYQrCSqEWmyKJe+hDm3Z/B2WVG4smwBkRVm" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/htmx-ext-response-targets@2.0.2" integrity="sha384-UMuM7P2CPg9i2/dfvBlAeqjXITmEWe9k17Mp9X07Z4jXPN21Ychng569t+sUL8oa" crossorigin="anonymous"></script> </head> <body hx-ext="extension-name"> diff --git a/www/content/extensions/head-support.md b/www/content/extensions/head-support.md index 5eb8b324..8414ff59 100644 --- a/www/content/extensions/head-support.md +++ b/www/content/extensions/head-support.md @@ -18,7 +18,7 @@ a feature of the library. This extension addresses that shortcoming. The fastest way to install `head-support` is to load it via a CDN. Remember to always include the core htmx library before the extension and [enable the extension](#usage). ```HTML <head> - <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.5/dist/htmx.min.js" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script> + <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/htmx-ext-head-support@2.0.2" integrity="sha384-cvMqHzjCJsOHgGuyB3sWXaUSv/Krm0BdzjuI1rtkjCbL1l1oHJx+cHyVRJhyuEz0" crossorigin="anonymous"></script> </head> <body hx-ext="head-support"> diff --git a/www/content/extensions/htmx-1-compat.md b/www/content/extensions/htmx-1-compat.md index 19fb25a8..b266d2c9 100644 --- a/www/content/extensions/htmx-1-compat.md +++ b/www/content/extensions/htmx-1-compat.md @@ -9,7 +9,7 @@ The `htmx-1-compat` extension allows you to almost seamlessly upgrade from htmx The fastest way to install `htmx-1-compat` is to load it via a CDN. Remember to always include the core htmx library before the extension and enable the extension. ```HTML <head> - <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.5/dist/htmx.min.js" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script> + <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/htmx-ext-htmx-1-compat@2.0.0" integrity="sha384-lcvVWaNjF5zPPUeeWmC0OkJ2MLqoWLlkAabuGm+EuMSTfGo5WRyHrNaAp0cJr9Pg" crossorigin="anonymous"></script> </head> <body hx-ext="htmx-1-compat"> diff --git a/www/content/extensions/idiomorph.md b/www/content/extensions/idiomorph.md index 43b41723..c095ea72 100644 --- a/www/content/extensions/idiomorph.md +++ b/www/content/extensions/idiomorph.md @@ -15,7 +15,7 @@ extension. The fastest way to install `idiomorph` is to load it via a CDN. Remember to always include the core htmx library before the extension and [enable the extension](#usage). ```HTML <head> - <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.5/dist/htmx.min.js@2.0.5" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script> + <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js@2.0.6" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script> <script src="https://unpkg.com/idiomorph@0.7.3" integrity="sha384-JcorokHTL/m+D6ZHe2+yFVQopVwZ+91GxAPDyEZ6/A/OEPGEx1+MeNSe2OGvoRS9" crossorigin="anonymous"></script> <script src="https://unpkg.com/idiomorph@0.7.3/dist/idiomorph-ext.min.js" integrity="sha384-szktAZju9fwY15dZ6D2FKFN4eZoltuXiHStNDJWK9+FARrxJtquql828JzikODob" crossorigin="anonymous"></script> </head> diff --git a/www/content/extensions/preload.md b/www/content/extensions/preload.md index 729d5a2f..762ccbd7 100644 --- a/www/content/extensions/preload.md +++ b/www/content/extensions/preload.md @@ -15,7 +15,7 @@ unused requests. Use this extension carefully! The fastest way to install `preload` is to load it via a CDN. Remember to always include the core htmx library before the extension and [enable the extension](#usage). ```HTML <head> - <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.5/dist/htmx.min.js" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script> + <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/htmx-ext-preload@2.1.0" integrity="sha384-fkzubQiTB69M7XTToqW6tplvxAOJkqPl5JmLAbumV2EacmuJb8xEP9KnJafk/rg8" crossorigin="anonymous"></script> </head> <body hx-ext="preload"> diff --git a/www/content/extensions/response-targets.md b/www/content/extensions/response-targets.md index 60c3e975..55649102 100644 --- a/www/content/extensions/response-targets.md +++ b/www/content/extensions/response-targets.md @@ -27,7 +27,7 @@ The value of each attribute can be: The fastest way to install `response-targets` is to load it via a CDN. Remember to always include the core htmx library before the extension and [enable the extension](#usage). ```HTML <head> - <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.5/dist/htmx.min.js" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script> + <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/htmx-ext-response-targets@2.0.2" integrity="sha384-T41oglUPvXLGBVyRdZsVRxNWnOOqCynaPubjUVjxhsjFTKrFJGEMm3/0KGmNQ+Pg" crossorigin="anonymous"></script> </head> <body hx-ext="response-targets"> diff --git a/www/content/extensions/sse.md b/www/content/extensions/sse.md index 4da6118f..83756c52 100644 --- a/www/content/extensions/sse.md +++ b/www/content/extensions/sse.md @@ -29,7 +29,7 @@ Use the following attributes to configure how SSE connections behave: The fastest way to install `sse` is to load it via a CDN. Remember to always include the core htmx library before the extension and [enable the extension](#usage). ```HTML <head> - <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.5/dist/htmx.min.js" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script> + <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/htmx-ext-sse@2.2.2" integrity="sha384-Y4gc0CK6Kg+hmulDc6rZPJu0tqvk7EWlih0Oh+2OkAi1ZDlCbBDCQEE2uVk472Ky" crossorigin="anonymous"></script> </head> <body hx-ext="sse"> diff --git a/www/content/extensions/ws.md b/www/content/extensions/ws.md index e938c624..2002e7d6 100644 --- a/www/content/extensions/ws.md +++ b/www/content/extensions/ws.md @@ -23,7 +23,7 @@ Use the following attributes to configure how WebSockets behave: The fastest way to install `ws` is to load it via a CDN. Remember to always include the core htmx library before the extension and [enable the extension](#usage). ```HTML <head> - <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.5/dist/htmx.min.js" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script> + <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/htmx-ext-ws@2.0.2" integrity="sha384-vuKxTKv5TX/b3lLzDKP2U363sOAoRo5wSvzzc3LJsbaQRSBSS+3rKKHcOx5J8doU" crossorigin="anonymous"></script> </head> <body hx-ext="ws"> diff --git a/www/static/src/htmx.js b/www/static/src/htmx.js index 69348460..4c8203ef 100644 --- a/www/static/src/htmx.js +++ b/www/static/src/htmx.js @@ -289,7 +289,7 @@ var htmx = (function() { location, /** @type {typeof internalEval} */ _: null, - version: '2.0.5' + version: '2.0.6' } // Tsc madness part 2 htmx.onLoad = onLoadHelper @@ -2435,7 +2435,9 @@ var htmx = (function() { if (elt.form && elt.type === 'submit') { return true } - if (elt instanceof HTMLAnchorElement && elt.href && + elt = elt.closest('a') + // @ts-ignore check for a link wrapping the event elt or if elt is a link. elt will be link so href check is fine + if (elt && elt.href && (elt.getAttribute('href') === '#' || elt.getAttribute('href').indexOf('#') !== 0)) { return true } diff --git a/www/static/test/core/internals.js b/www/static/test/core/internals.js index e3d4f96d..9b6d0b97 100644 --- a/www/static/test/core/internals.js +++ b/www/static/test/core/internals.js @@ -107,6 +107,11 @@ describe('Core htmx internals Tests', function() { htmx._('shouldCancel')({ type: 'submit', target: anchorThatShouldNotCancel }, form).should.equal(false) htmx._('shouldCancel')({ type: 'click', target: divThatShouldNotCancel }, form).should.equal(false) + // check elements inside links getting click events should cancel parent links + var anchorWithButton = make("<a href='/foo'><button></button></a>") + htmx._('shouldCancel')({ type: 'click', target: anchorWithButton.firstChild }, anchorWithButton).should.equal(true) + htmx._('shouldCancel')({ type: 'click', target: anchorWithButton.firstChild }, anchorWithButton.firstChild).should.equal(true) + form = make('<form id="f1">' + '<input id="insideInput" type="submit">' + '<button id="insideFormBtn"></button>' + diff --git a/www/static/test/core/regressions.js b/www/static/test/core/regressions.js index 015b5815..91a35a0e 100644 --- a/www/static/test/core/regressions.js +++ b/www/static/test/core/regressions.js @@ -291,4 +291,46 @@ describe('Core htmx Regression Tests', function() { byId('datefield').click() }) + + it('a button clicked inside an htmx enabled link will prevent the link from navigating on click', function(done) { + var defaultPrevented = 'unset' + var link = make('<a href="/foo" hx-get="/foo"><button>test</button></a>') + var button = link.firstChild + + htmx.on(link, 'click', function(evt) { + // we need to wait so the state of the evt is finalized + setTimeout(() => { + defaultPrevented = evt.defaultPrevented + try { + defaultPrevented.should.equal(true) + done() + } catch (err) { + done(err) + } + }, 0) + }) + + button.click() + }) + + it('a htmx enabled button clicked inside a link will prevent the link from navigating on click', function(done) { + var defaultPrevented = 'unset' + var link = make('<a href="/foo"><button hx-get="/foo">test</button></a>') + var button = link.firstChild + + htmx.on(link, 'click', function(evt) { + // we need to wait so the state of the evt is finalized + setTimeout(() => { + defaultPrevented = evt.defaultPrevented + try { + defaultPrevented.should.equal(true) + done() + } catch (err) { + done(err) + } + }, 0) + }) + + button.click() + }) }) diff --git a/www/themes/htmx-theme/static/js/htmx.js b/www/themes/htmx-theme/static/js/htmx.js index 69348460..4c8203ef 100644 --- a/www/themes/htmx-theme/static/js/htmx.js +++ b/www/themes/htmx-theme/static/js/htmx.js @@ -289,7 +289,7 @@ var htmx = (function() { location, /** @type {typeof internalEval} */ _: null, - version: '2.0.5' + version: '2.0.6' } // Tsc madness part 2 htmx.onLoad = onLoadHelper @@ -2435,7 +2435,9 @@ var htmx = (function() { if (elt.form && elt.type === 'submit') { return true } - if (elt instanceof HTMLAnchorElement && elt.href && + elt = elt.closest('a') + // @ts-ignore check for a link wrapping the event elt or if elt is a link. elt will be link so href check is fine + if (elt && elt.href && (elt.getAttribute('href') === '#' || elt.getAttribute('href').indexOf('#') !== 0)) { return true } |