From 05bce4aad44484f202077b8b66700deb65e7134f Mon Sep 17 00:00:00 2001 From: Ima Person Date: Sun, 30 Jul 2023 15:23:39 -0400 Subject: [PATCH 1/3] Update disable-element extension Allow multiple elements to be selected in the query --- src/ext/disable-element.js | 12 +++++---- test/ext/disable-element.js | 33 +++++++++++++++++++++++ www/content/extensions/disable-element.md | 7 +++++ 3 files changed, 47 insertions(+), 5 deletions(-) diff --git a/src/ext/disable-element.js b/src/ext/disable-element.js index 3493d811a..390574dfb 100644 --- a/src/ext/disable-element.js +++ b/src/ext/disable-element.js @@ -5,12 +5,14 @@ htmx.defineExtension('disable-element', { onEvent: function (name, evt) { let elt = evt.detail.elt; let target = elt.getAttribute("hx-disable-element"); - let targetElement = (target == "self") ? elt : document.querySelector(target); + let targetElements = (target == "self") ? [ elt ] : document.querySelectorAll(target); - if (name === "htmx:beforeRequest" && targetElement) { - targetElement.disabled = true; - } else if (name == "htmx:afterRequest" && targetElement) { - targetElement.disabled = false; + for (var i = 0; i < targetElements.length; i++) { + if (name === "htmx:beforeRequest" && targetElements[i]) { + targetElements[i].disabled = true; + } else if (name == "htmx:afterRequest" && targetElements[i]) { + targetElements[i].disabled = false; + } } } }); \ No newline at end of file diff --git a/test/ext/disable-element.js b/test/ext/disable-element.js index cde1ad229..18fd5923c 100644 --- a/test/ext/disable-element.js +++ b/test/ext/disable-element.js @@ -59,4 +59,37 @@ describe("disable-element extension", function() { btn2.disabled.should.equal(false); }); + it('disables multiple elements during htmx request', function () { + // GIVEN: + // - A button triggering an htmx request with disable-element extension + // - Another button that needs to be disabled during the htmx request + // - A control button that won't be disabled during the htmx request + // - All buttons are enabled + this.server.respondWith("GET", "/test", function (xhr) { + xhr.respond(200, {}) + }); + var btn = make('') + var btn2 = make('') + var btn3 = make('') + btn.disabled.should.equal(false); + btn2.disabled.should.equal(false); + btn3.disabled.should.equal(false); + + // WHEN clicking + btn.click(); + + // THEN the first two are disabled, but the last one isn't + btn.disabled.should.equal(true); + btn2.disabled.should.equal(true); + btn3.disabled.should.equal(false); + + // WHEN server response has arrived + this.server.respond(); + + // THEN all buttons are back enabled + btn.disabled.should.equal(false); + btn2.disabled.should.equal(false); + btn3.disabled.should.equal(false); + }); + }); \ No newline at end of file diff --git a/www/content/extensions/disable-element.md b/www/content/extensions/disable-element.md index 4bbebabc6..1009c4770 100644 --- a/www/content/extensions/disable-element.md +++ b/www/content/extensions/disable-element.md @@ -22,3 +22,10 @@ This extension disables an element during an htmx request, when configured on th ``` + +### Disabling multiple elements +```html + + + +``` From da89d6176f858e2d122156c0764b2c1a0aff02e6 Mon Sep 17 00:00:00 2001 From: Ari Date: Mon, 31 Jul 2023 00:17:57 -0400 Subject: [PATCH 2/3] Remove unnecessary comments https://github.com/bigskysoftware/htmx/pull/1650#discussion_r1278773982 --- test/ext/disable-element.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/test/ext/disable-element.js b/test/ext/disable-element.js index 18fd5923c..a6fd0e6d3 100644 --- a/test/ext/disable-element.js +++ b/test/ext/disable-element.js @@ -60,11 +60,6 @@ describe("disable-element extension", function() { }); it('disables multiple elements during htmx request', function () { - // GIVEN: - // - A button triggering an htmx request with disable-element extension - // - Another button that needs to be disabled during the htmx request - // - A control button that won't be disabled during the htmx request - // - All buttons are enabled this.server.respondWith("GET", "/test", function (xhr) { xhr.respond(200, {}) }); @@ -92,4 +87,4 @@ describe("disable-element extension", function() { btn3.disabled.should.equal(false); }); -}); \ No newline at end of file +}); From 7def0be3e99357d07cd6bbce9178d0cf835a5c2b Mon Sep 17 00:00:00 2001 From: Ari Date: Tue, 1 Aug 2023 21:29:45 -0400 Subject: [PATCH 3/3] Change tab indentations to spaces --- src/ext/disable-element.js | 2 +- test/ext/disable-element.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/ext/disable-element.js b/src/ext/disable-element.js index 390574dfb..07bef62d8 100644 --- a/src/ext/disable-element.js +++ b/src/ext/disable-element.js @@ -7,7 +7,7 @@ htmx.defineExtension('disable-element', { let target = elt.getAttribute("hx-disable-element"); let targetElements = (target == "self") ? [ elt ] : document.querySelectorAll(target); - for (var i = 0; i < targetElements.length; i++) { + for (var i = 0; i < targetElements.length; i++) { if (name === "htmx:beforeRequest" && targetElements[i]) { targetElements[i].disabled = true; } else if (name == "htmx:afterRequest" && targetElements[i]) { diff --git a/test/ext/disable-element.js b/test/ext/disable-element.js index a6fd0e6d3..58e5a7324 100644 --- a/test/ext/disable-element.js +++ b/test/ext/disable-element.js @@ -60,7 +60,7 @@ describe("disable-element extension", function() { }); it('disables multiple elements during htmx request', function () { - this.server.respondWith("GET", "/test", function (xhr) { + this.server.respondWith("GET", "/test", function (xhr) { xhr.respond(200, {}) }); var btn = make('') @@ -70,7 +70,7 @@ describe("disable-element extension", function() { btn2.disabled.should.equal(false); btn3.disabled.should.equal(false); - // WHEN clicking + // WHEN clicking btn.click(); // THEN the first two are disabled, but the last one isn't