temp work

src/htmx.js

@@ -327,9 +327,17 @@ return (function () {
 
         function closest(elt, selector) {
             elt = resolveTarget(elt);
-            do if (elt == null || matches(elt, selector)) return elt;
+            if (elt.closest) {
+                elt.closest(selector);
+            } else {
+                do{
+                    if (elt == null || matches(elt, selector)){
+                        return elt;
+                    }
+                }
                 while (elt = elt && parentElt(elt));
             }
+        }
 
         function querySelectorAllExt(elt, selector) {
 		    if (selector.indexOf("closest ") === 0) {
@@ -1705,6 +1713,7 @@ return (function () {
                 "HX-Target" : getAttributeValue(target, "id"),
                 "HX-Current-URL" : getDocument().location.href,
             }
+            getValuesForElement(elt, "hx-headers", false, headers)
             if (prompt !== undefined) {
                 headers["HX-Prompt"] = prompt;
             }
@@ -1811,7 +1820,7 @@ return (function () {
             }
         }
 
-        function getValuesForElement(elt, attr, strToValues, expressionVars) {
+        function getValuesForElement(elt, attr, evalAsDefault, expressionVars) {
             if (expressionVars == null) {
                 expressionVars = {};
             }
@@ -1821,10 +1830,20 @@ return (function () {
             var attributeValue = getAttributeValue(elt, attr);
             if (attributeValue) {
                 var str = attributeValue.trim();
+                var evaluateValue = evalAsDefault;
+                if (str.indexOf("javascript:") === 0) {
+                    str = str.substr(11);
+                    evaluateValue = true;
+                }
                 if (str.indexOf('{') !== 0) {
                     str = "{" + str + "}";
                 }
-                var varsValues = strToValues(str);
+                var varsValues;
+                if (evaluateValue) {
+                    varsValues = maybeEval(elt,function () {return Function("return (" + str + ")")();}, {});
+                } else {
+                    varsValues = parseJSON(str);
+                }
                 for (var key in varsValues) {
                     if (varsValues.hasOwnProperty(key)) {
                         if (expressionVars[key] == null) {
@@ -1833,7 +1852,7 @@ return (function () {
                     }
                 }
             }
-            return getValuesForElement(parentElt(elt), attr, strToValues, expressionVars);
+            return getValuesForElement(parentElt(elt), attr, evalAsDefault, expressionVars);
         }
 
         function maybeEval(elt, toEval, defaultVal) {
@@ -1846,15 +1865,11 @@ return (function () {
         }
 
         function getHXVarsForElement(elt, expressionVars) {
-            return getValuesForElement(elt, "hx-vars", function(valueStr){
+            return getValuesForElement(elt, "hx-vars", true, expressionVars);
-                return maybeEval(elt,function () {return Function("return (" + valueStr + ")")();}, {});
-            }, expressionVars);
         }
 
         function getHXValsForElement(elt, expressionVars) {
-            return getValuesForElement(elt, "hx-vals", function(valueStr){
+            return getValuesForElement(elt, "hx-vals", false, expressionVars);
-                return parseJSON(valueStr);
-            }, expressionVars);
         }
 
         function getExpressionVars(elt) {

test/attributes/hx-vals.js

@@ -96,4 +96,81 @@ describe("hx-vals attribute", function() {
         div.innerHTML.should.equal("Clicked!");
     });
 
+    it('basic hx-vals javascript: works', function () {
+        this.server.respondWith("POST", "/vars", function (xhr) {
+            var params = getParameters(xhr);
+            params['i1'].should.equal("test");
+            xhr.respond(200, {}, "Clicked!")
+        });
+        var div = make('<div hx-post="/vars" hx-vars="javascript:i1:\'test\'"></div>')
+        div.click();
+        this.server.respond();
+        div.innerHTML.should.equal("Clicked!");
+    });
+
+    it('hx-vars works with braces', function () {
+        this.server.respondWith("POST", "/vars", function (xhr) {
+            var params = getParameters(xhr);
+            params['i1'].should.equal("test");
+            xhr.respond(200, {}, "Clicked!")
+        });
+        var div = make('<div hx-post="/vars" hx-vars="javascript:{i1:\'test\'}"></div>')
+        div.click();
+        this.server.respond();
+        div.innerHTML.should.equal("Clicked!");
+    });
+
+    it('multiple hx-vars works', function () {
+        this.server.respondWith("POST", "/vars", function (xhr) {
+            var params = getParameters(xhr);
+            params['v1'].should.equal("test");
+            params['v2'].should.equal("42");
+            xhr.respond(200, {}, "Clicked!")
+        });
+        var div = make('<div hx-post="/vars" hx-vars="javascript:v1:\'test\', v2:42"></div>')
+        div.click();
+        this.server.respond();
+        div.innerHTML.should.equal("Clicked!");
+    });
+
+    it('hx-vars can be on parents', function () {
+        this.server.respondWith("POST", "/vars", function (xhr) {
+            var params = getParameters(xhr);
+            params['i1'].should.equal("test");
+            xhr.respond(200, {}, "Clicked!")
+        });
+        make('<div hx-vars="javascript:i1:\'test\'"><div id="d1" hx-post="/vars"></div></div>')
+        var div = byId("d1");
+        div.click();
+        this.server.respond();
+        div.innerHTML.should.equal("Clicked!");
+    });
+
+    it('hx-vars can override parents', function () {
+        this.server.respondWith("POST", "/vars", function (xhr) {
+            var params = getParameters(xhr);
+            params['i1'].should.equal("best");
+            xhr.respond(200, {}, "Clicked!")
+        });
+        make('<div hx-vars="javascript:i1:\'test\'"><div id="d1" hx-vars="javascript:i1:\'best\'" hx-post="/vars"></div></div>')
+        var div = byId("d1");
+        div.click();
+        this.server.respond();
+        div.innerHTML.should.equal("Clicked!");
+    });
+
+    it('hx-vars overrides inputs', function () {
+        this.server.respondWith("POST", "/include", function (xhr) {
+            var params = getParameters(xhr);
+            params['i1'].should.equal("best");
+            xhr.respond(200, {}, "Clicked!")
+        });
+        var div = make('<div hx-target="this"><input hx-post="/include" hx-vars="javascript:i1:\'best\'" hx-trigger="click" id="i1" name="i1" value="test"/></div>')
+        var input = byId("i1")
+        input.click();
+        this.server.respond();
+        div.innerHTML.should.equal("Clicked!");
+    });
+
+
 });