Merge pull request #574 from frankier/from-window

Allow listening to events from:window

src/htmx.js

@@ -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);
             }

test/attributes/hx-trigger.js

@@ -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;

www/attributes/hx-trigger.md

@@ -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