itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-29 22:11:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #574 from frankier/from-window

Browse Source 
Allow listening to events from:window
This commit is contained in:
1cg 2021-08-30 15:32:02 -06:00 committed by GitHub
commit 0a9923c8af
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/htmx.js
View File

@ -373,6 +373,8 @@ return (function () {
return [find(elt, selector.substr(5))];
} else if (selector === 'document') {
return [document];
} else if (selector === 'window') {
return [window];
} else {
return getDocument().querySelectorAll(selector);
}

14
test/attributes/hx-trigger.js
View File

@ -395,6 +395,20 @@ describe("hx-trigger attribute", function(){
div1.innerHTML.should.equal("Requests: 1");
});
it('from clause works with window selector', function()
{
var requests = 0;
this.server.respondWith("GET", "/test", function (xhr) {
requests++;
xhr.respond(200, {}, "Requests: " + requests);
});
var div1 = make('<div hx-trigger="foo from:window" hx-get="/test">Requests: 0</div>');
div1.innerHTML.should.equal("Requests: 0");
htmx.trigger(window, 'foo');
this.server.respond();
div1.innerHTML.should.equal("Requests: 1");
});
it('event listeners on other elements are removed when an element is swapped out', function()
{
var requests = 0;

1
www/attributes/hx-trigger.md
View File

@ -60,6 +60,7 @@ is seen again before the delay completes it is ignored, the element will trigger
* `from:<Extended CSS selector>` - allows the event that triggers a request to come from another element in the document (e.g. listening to a key event on the body, to support hot keys)
* The extended CSS selector here allows for the following non-standard CSS values:
* `document` - listen for events on the document
* `window` - listen for events on the window
* `closest <CSS selector>` - finds the closest parent matching the given css selector
* `find <CSS selector>` - finds the closest child matching the given css selector
* `target:<CSS selector>` - allows you to filter via a CSS selector on the target of the event. This can be useful when you want to listen for