diff options
author | Carson Gross <carson@bigsky.software> | 2023-09-21 16:57:28 -0600 |
---|---|---|
committer | Carson Gross <carson@bigsky.software> | 2023-09-21 16:57:28 -0600 |
commit | a5fd1b7081645e31d1a3af50a7b6e24a152271b0 (patch) | |
tree | 381a85e695c0483e2471a5afd1ecff55f9615f6e | |
parent | aa7ae144b5f29077f30f3d67103c26d8fe6d4980 (diff) | |
download | htmx-a5fd1b7081645e31d1a3af50a7b6e24a152271b0.tar.gz htmx-a5fd1b7081645e31d1a3af50a7b6e24a152271b0.zip |
make singular to make more consistent w/ other attributes
-rw-r--r-- | src/htmx.js | 2 | ||||
-rw-r--r-- | test/attributes/hx-disabled-elt.js (renamed from test/attributes/hx-disabled-elts.js) | 14 | ||||
-rw-r--r-- | test/index.html | 2 | ||||
-rw-r--r-- | test/scratch/scratch.html | 5 | ||||
-rw-r--r-- | www/content/attributes/hx-disabled-elt.md (renamed from www/content/attributes/hx-disabled-elts.md) | 6 | ||||
-rw-r--r-- | www/content/docs.md | 2 | ||||
-rw-r--r-- | www/content/reference.md | 52 |
7 files changed, 44 insertions, 39 deletions
diff --git a/src/htmx.js b/src/htmx.js index 294eb1be..0d8c0cfb 100644 --- a/src/htmx.js +++ b/src/htmx.js @@ -2345,7 +2345,7 @@ return (function () { } function disableElements(elt) { - var disabledElts = findAttributeTargets(elt, 'hx-disabled-elts'); + var disabledElts = findAttributeTargets(elt, 'hx-disabled-elt'); if (disabledElts == null) { disabledElts = []; } diff --git a/test/attributes/hx-disabled-elts.js b/test/attributes/hx-disabled-elt.js index f66fd5e8..dac6bb7b 100644 --- a/test/attributes/hx-disabled-elts.js +++ b/test/attributes/hx-disabled-elt.js @@ -1,4 +1,4 @@ -describe("hx-disabled-elts attribute", function(){ +describe("hx-disabled-elt attribute", function(){ beforeEach(function() { this.server = sinon.fakeServer.create(); clearWorkArea(); @@ -11,7 +11,7 @@ describe("hx-disabled-elts attribute", function(){ it('single element can be disabled w/ hx-disabled elts', function() { this.server.respondWith("GET", "/test", "Clicked!"); - var btn = make('<button hx-get="/test" hx-disabled-elts="this">Click Me!</button>') + var btn = make('<button hx-get="/test" hx-disabled-elt="this">Click Me!</button>') btn.hasAttribute('disabled').should.equal(false); btn.click(); btn.hasAttribute('disabled').should.equal(true); @@ -23,7 +23,7 @@ describe("hx-disabled-elts attribute", function(){ it('single element can be disabled w/ data-hx-disabled elts', function() { this.server.respondWith("GET", "/test", "Clicked!"); - var btn = make('<button hx-get="/test" data-hx-disabled-elts="this">Click Me!</button>') + var btn = make('<button hx-get="/test" data-hx-disabled-elt="this">Click Me!</button>') btn.hasAttribute('disabled').should.equal(false); btn.click(); btn.hasAttribute('disabled').should.equal(true); @@ -34,7 +34,7 @@ describe("hx-disabled-elts attribute", function(){ it('single element can be disabled w/ closest syntax', function() { this.server.respondWith("GET", "/test", "Clicked!"); - var fieldset = make('<fieldset><button id="b1" hx-get="/test" hx-disabled-elts="closest fieldset">Click Me!</button></fieldset>') + var fieldset = make('<fieldset><button id="b1" hx-get="/test" hx-disabled-elt="closest fieldset">Click Me!</button></fieldset>') var btn = byId('b1'); fieldset.hasAttribute('disabled').should.equal(false); btn.click(); @@ -46,8 +46,8 @@ describe("hx-disabled-elts attribute", function(){ it('multiple requests with same disabled elt are handled properly', function() { this.server.respondWith("GET", "/test", "Clicked!"); - var b1 = make('<button hx-get="/test" hx-disabled-elts="#b3">Click Me!</button>') - var b2 = make('<button hx-get="/test" hx-disabled-elts="#b3">Click Me!</button>') + var b1 = make('<button hx-get="/test" hx-disabled-elt="#b3">Click Me!</button>') + var b2 = make('<button hx-get="/test" hx-disabled-elt="#b3">Click Me!</button>') var b3 = make('<button id="b3">Demo</button>') b3.hasAttribute('disabled').should.equal(false); @@ -72,7 +72,7 @@ describe("hx-disabled-elts attribute", function(){ it('multiple elts can be disabled', function() { this.server.respondWith("GET", "/test", "Clicked!"); - var b1 = make('<button hx-get="/test" hx-disabled-elts="#b2, #b3">Click Me!</button>') + var b1 = make('<button hx-get="/test" hx-disabled-elt="#b2, #b3">Click Me!</button>') var b2 = make('<button id="b2">Click Me!</button>') var b3 = make('<button id="b3">Demo</button>') diff --git a/test/index.html b/test/index.html index 9abe5fa6..50892993 100644 --- a/test/index.html +++ b/test/index.html @@ -77,7 +77,7 @@ <script src="attributes/hx-history.js"></script> <script src="attributes/hx-include.js"></script> <script src="attributes/hx-indicator.js"></script> -<script src="attributes/hx-disabled-elts.js"></script> +<script src="attributes/hx-disabled-elt.js"></script> <script src="attributes/hx-disinherit.js"></script> <script src="attributes/hx-on.js"></script> <script src="attributes/hx-on-wildcard.js"></script> diff --git a/test/scratch/scratch.html b/test/scratch/scratch.html index b73ff46d..28edcadc 100644 --- a/test/scratch/scratch.html +++ b/test/scratch/scratch.html @@ -62,6 +62,11 @@ Autorespond: <input id="autorespond" type="checkbox" onclick="toggleAutoRespond( <em>Work Area</em> <hr/> +<form id="whatever"> +</form> + +<input form="whatever"> + <div id="work-area" hx-history-elt> <a id="a1" hx-boost="true" href="#" target="">Asdf</a> </div> diff --git a/www/content/attributes/hx-disabled-elts.md b/www/content/attributes/hx-disabled-elt.md index 17d8f604..5635e636 100644 --- a/www/content/attributes/hx-disabled-elts.md +++ b/www/content/attributes/hx-disabled-elt.md @@ -1,8 +1,8 @@ +++ -title = "hx-disabled-elts" +title = "hx-disabled-elt" +++ -The `hx-disabled-elts` attribute allows you to specify elements that will have the `disabled` attribute +The `hx-disabled-elt` attribute allows you to specify elements that will have the `disabled` attribute added to them for the duration of the request. The value of this attribute is a CSS query selector of the element or elements to apply the class to, @@ -13,7 +13,7 @@ the keyword `this` Here is an example with a button that will disable itself during a request: ```html -<button hx-post="/example" hx-disabled-elts="this"> +<button hx-post="/example" hx-disabled-elt="this"> Post It! </button> ``` diff --git a/www/content/docs.md b/www/content/docs.md index f88d1222..8ecdf98d 100644 --- a/www/content/docs.md +++ b/www/content/docs.md @@ -369,7 +369,7 @@ Here we call out the indicator explicitly by id. Note that we could have placed and had the same effect. You can also add the [the `disabled` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) to -elements for the duration of a request by using the [hx-disabled-elts](@/attributes/hx-indicator.md) attribute. +elements for the duration of a request by using the [hx-disabled-elt](@/attributes/hx-disabled-elt.md) attribute. ### Targets diff --git a/www/content/reference.md b/www/content/reference.md index de9a5e8a..5ebe446b 100644 --- a/www/content/reference.md +++ b/www/content/reference.md @@ -42,32 +42,32 @@ The table below lists all other attributes available in htmx. <div class="info-table"> -| Attribute | Description | -|--------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------| -| [`hx-confirm`](@/attributes/hx-confirm.md) | shows a `confirm()` dialog before issuing a request | -| [`hx-delete`](@/attributes/hx-delete.md) | issues a `DELETE` to the specified URL | -| [`hx-disable`](@/attributes/hx-disable.md) | disables htmx processing for the given node and any children nodes | -| [`hx-disabled-elts`](@/attributes/hx-disabled-elts.md) | adds the `disabled` attribute to the specified elements while a request is in flight | -| [`hx-disinherit`](@/attributes/hx-disinherit.md) | control and disable automatic attribute inheritance for child nodes | -| [`hx-encoding`](@/attributes/hx-encoding.md) | changes the request encoding type | -| [`hx-ext`](@/attributes/hx-ext.md) | extensions to use for this element | -| [`hx-headers`](@/attributes/hx-headers.md) | adds to the headers that will be submitted with the request | -| [`hx-history`](@/attributes/hx-history.md) | prevent sensitive data being saved to the history cache | -| [`hx-history-elt`](@/attributes/hx-history-elt.md) | the element to snapshot and restore during history navigation | -| [`hx-include`](@/attributes/hx-include.md) | include additional data in requests | -| [`hx-indicator`](@/attributes/hx-indicator.md) | the element to put the `htmx-request` class on during the request | -| [`hx-params`](@/attributes/hx-params.md) | filters the parameters that will be submitted with a request | -| [`hx-patch`](@/attributes/hx-patch.md) | issues a `PATCH` to the specified URL | -| [`hx-preserve`](@/attributes/hx-preserve.md) | specifies elements to keep unchanged between requests | -| [`hx-prompt`](@/attributes/hx-prompt.md) | shows a `prompt()` before submitting a request | -| [`hx-put`](@/attributes/hx-put.md) | issues a `PUT` to the specified URL | -| [`hx-replace-url`](@/attributes/hx-replace-url.md) | replace the URL in the browser location bar | -| [`hx-request`](@/attributes/hx-request.md) | configures various aspects of the request | -| [`hx-sse`](@/extensions/server-sent-events.md) | has been moved to an extension. [Documentation for older versions](@/attributes/hx-sse.md) | -| [`hx-sync`](@/attributes/hx-sync.md) | control how requests made by different elements are synchronized | -| [`hx-validate`](@/attributes/hx-validate.md) | force elements to validate themselves before a request | -| [`hx-vars`](@/attributes/hx-vars.md) | adds values dynamically to the parameters to submit with the request (deprecated, please use [`hx-vals`](@/attributes/hx-vals.md)) | -| [`hx-ws`](@/extensions/web-sockets.md) | has been moved to an extension. [Documentation for older versions](@/attributes/hx-ws.md) | +| Attribute | Description | +|------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------| +| [`hx-confirm`](@/attributes/hx-confirm.md) | shows a `confirm()` dialog before issuing a request | +| [`hx-delete`](@/attributes/hx-delete.md) | issues a `DELETE` to the specified URL | +| [`hx-disable`](@/attributes/hx-disable.md) | disables htmx processing for the given node and any children nodes | +| [`hx-disabled-elt`](@/attributes/hx-disabled-elt.md) | adds the `disabled` attribute to the specified elements while a request is in flight | +| [`hx-disinherit`](@/attributes/hx-disinherit.md) | control and disable automatic attribute inheritance for child nodes | +| [`hx-encoding`](@/attributes/hx-encoding.md) | changes the request encoding type | +| [`hx-ext`](@/attributes/hx-ext.md) | extensions to use for this element | +| [`hx-headers`](@/attributes/hx-headers.md) | adds to the headers that will be submitted with the request | +| [`hx-history`](@/attributes/hx-history.md) | prevent sensitive data being saved to the history cache | +| [`hx-history-elt`](@/attributes/hx-history-elt.md) | the element to snapshot and restore during history navigation | +| [`hx-include`](@/attributes/hx-include.md) | include additional data in requests | +| [`hx-indicator`](@/attributes/hx-indicator.md) | the element to put the `htmx-request` class on during the request | +| [`hx-params`](@/attributes/hx-params.md) | filters the parameters that will be submitted with a request | +| [`hx-patch`](@/attributes/hx-patch.md) | issues a `PATCH` to the specified URL | +| [`hx-preserve`](@/attributes/hx-preserve.md) | specifies elements to keep unchanged between requests | +| [`hx-prompt`](@/attributes/hx-prompt.md) | shows a `prompt()` before submitting a request | +| [`hx-put`](@/attributes/hx-put.md) | issues a `PUT` to the specified URL | +| [`hx-replace-url`](@/attributes/hx-replace-url.md) | replace the URL in the browser location bar | +| [`hx-request`](@/attributes/hx-request.md) | configures various aspects of the request | +| [`hx-sse`](@/extensions/server-sent-events.md) | has been moved to an extension. [Documentation for older versions](@/attributes/hx-sse.md) | +| [`hx-sync`](@/attributes/hx-sync.md) | control how requests made by different elements are synchronized | +| [`hx-validate`](@/attributes/hx-validate.md) | force elements to validate themselves before a request | +| [`hx-vars`](@/attributes/hx-vars.md) | adds values dynamically to the parameters to submit with the request (deprecated, please use [`hx-vals`](@/attributes/hx-vals.md)) | +| [`hx-ws`](@/extensions/web-sockets.md) | has been moved to an extension. [Documentation for older versions](@/attributes/hx-ws.md) | </div> |