Clean up parameter inclusion logic and update demos to use GET where appropriate, rather than hiding from my bad design choices

Add API test + fixes and update all files

dist/kutty.js

@@ -158,6 +158,15 @@ var kutty = kutty || (function () {
             sheet.insertRule(rule, sheet.cssRules.length);
         }
 
+        function mergeObjects(obj1, obj2) {
+            for (var key in obj2) {
+                if (obj2.hasOwnProperty(key)) {
+                    obj1[key] = obj2[key];
+                }
+            }
+            return obj1;
+        }
+
         //==========================================================================================
         // public API
         //==========================================================================================
@@ -167,9 +176,10 @@ var kutty = kutty || (function () {
         }
 
         function onLoadHelper(callback) {
-            kutty.on("load.kutty", function(evt) {
+            var value = kutty.on("load.kutty", function(evt) {
                 callback(evt.detail.elt);
             });
+            return value;
         }
 
         function logAll(){
@@ -182,17 +192,17 @@ var kutty = kutty || (function () {
 
         function find(eltOrSelector, selector) {
             if (selector) {
-                eltOrSelector.querySelector(eltOrSelector);
+                return eltOrSelector.querySelector(selector);
             } else {
-                getDocument().body.querySelector(eltOrSelector);
+                return getDocument().body.querySelector(eltOrSelector);
             }
         }
 
         function findAll(eltOrSelector, selector) {
             if (selector) {
-                eltOrSelector.querySelectorAll(eltOrSelector);
+                return eltOrSelector.querySelectorAll(selector);
             } else {
-                getDocument().body.querySelectorAll(eltOrSelector);
+                return getDocument().body.querySelectorAll(eltOrSelector);
             }
         }
 
@@ -212,7 +222,7 @@ var kutty = kutty || (function () {
             }
         }
 
-        function removeClassFromElement(elt, clazz) {
+        function removeClassFromElement(elt, clazz, delay) {
             if (delay) {
                 setTimeout(function(){removeClassFromElement(elt, clazz);}, delay)
             } else {
@@ -225,7 +235,7 @@ var kutty = kutty || (function () {
         }
 
         function takeClassForElement(elt, clazz) {
-            forEach(elt.parent.children, function(child){
+            forEach(elt.parentElement.children, function(child){
                 removeClassFromElement(child, clazz);
             })
             addClassToElement(elt, clazz);
@@ -254,23 +264,22 @@ var kutty = kutty || (function () {
         }
 
         function addKuttyEventListener(arg1, arg2, arg3) {
-            var eventArgs = processEventArgs(arg1, arg2, arg3);
             ready(function(){
+                var eventArgs = processEventArgs(arg1, arg2, arg3);
                 eventArgs.target.addEventListener(eventArgs.event, eventArgs.listener);
             })
-            return eventArgs.listener;
+            var b = isFunction(arg2);
+            return b ? arg2 : arg3;
         }
 
         function removeKuttyEventListener(arg1, arg2, arg3) {
-            var eventArgs = processEventArgs(arg1, arg2, arg3);
             ready(function(){
-                eventArgs.target.addEventListener(eventArgs.event, eventArgs.listener);
+                var eventArgs = processEventArgs(arg1, arg2, arg3);
+                eventArgs.target.removeEventListener(eventArgs.event, eventArgs.listener);
             })
-            return eventArgs.listener;
+            return isFunction(arg2) ? arg2 : arg3;
         }
 
-
-
         //====================================================================
         // Node processing
         //====================================================================
@@ -281,6 +290,8 @@ var kutty = kutty || (function () {
                 var targetStr = getRawAttribute(explicitTarget, "kt-target");
                 if (targetStr === "this") {
                     return explicitTarget;
+                } else if (targetStr.indexOf("closest ") === 0) {
+                    return closest(elt, targetStr.substr(8));
                 } else {
                     return getDocument().querySelector(targetStr);
                 }
@@ -545,7 +556,7 @@ var kutty = kutty || (function () {
         function isLocalLink(elt) {
             return location.hostname === elt.hostname &&
                 getRawAttribute(elt,'href') &&
-                !getRawAttribute(elt,'href').startsWith("#")
+                getRawAttribute(elt,'href').indexOf("#") !== 0;
         }
 
         function boostElement(elt, nodeData, triggerSpec) {
@@ -760,7 +771,7 @@ var kutty = kutty || (function () {
         }
 
         function triggerErrorEvent(elt, eventName, detail) {
-            triggerEvent(elt, eventName, Object.assign({isError:true}, details));
+            triggerEvent(elt, eventName, mergeObjects({isError:true}, detail));
         }
 
         function triggerEvent(elt, eventName, detail) {
@@ -947,7 +958,7 @@ var kutty = kutty || (function () {
             }
         }
 
-        function getInputValues(elt) {
+        function getInputValues(elt, verb) {
             var processed = [];
             var values = {};
             // include the element itself
@@ -962,8 +973,10 @@ var kutty = kutty || (function () {
                 });
             }
 
-            // include the closest form
+            // for a non-GET include the closest form
-            processInputValue(processed, values, closest(elt, 'form'));
+            if (verb !== 'get') {
+                processInputValue(processed, values, closest(elt, 'form'));
+            }
             return values;
         }
 
@@ -1042,12 +1055,7 @@ var kutty = kutty || (function () {
                     return newValues;
                 }
             } else {
-                // By default GETs do not include parameters
+                return inputValues;
-                if (verb === 'get') {
-                    return {};
-                } else {
-                    return inputValues;
-                }
             }
         }
 
@@ -1203,7 +1211,7 @@ var kutty = kutty || (function () {
                             };
 
                             if (swapSpec.swapDelay > 0) {
-                                setTimeout(doSwap, parseInterval(swapSpec.swapDelay))
+                                setTimeout(doSwap, swapSpec.swapDelay)
                             } else {
                                 doSwap();
                             }
@@ -1252,7 +1260,7 @@ var kutty = kutty || (function () {
             var element = getDocument().querySelector('meta[name="kutty-config"]');
             if (element) {
                 var source = JSON.parse(element.content);
-                kutty.config = Object.assign(kutty.config , source)
+                kutty.config = mergeObjects(kutty.config , source)
             }
         }
 

src/kutty.js

@@ -176,9 +176,10 @@ var kutty = kutty || (function () {
         }
 
         function onLoadHelper(callback) {
-            kutty.on("load.kutty", function(evt) {
+            var value = kutty.on("load.kutty", function(evt) {
                 callback(evt.detail.elt);
             });
+            return value;
         }
 
         function logAll(){
@@ -191,17 +192,17 @@ var kutty = kutty || (function () {
 
         function find(eltOrSelector, selector) {
             if (selector) {
-                eltOrSelector.querySelector(eltOrSelector);
+                return eltOrSelector.querySelector(selector);
             } else {
-                getDocument().body.querySelector(eltOrSelector);
+                return getDocument().body.querySelector(eltOrSelector);
             }
         }
 
         function findAll(eltOrSelector, selector) {
             if (selector) {
-                eltOrSelector.querySelectorAll(eltOrSelector);
+                return eltOrSelector.querySelectorAll(selector);
             } else {
-                getDocument().body.querySelectorAll(eltOrSelector);
+                return getDocument().body.querySelectorAll(eltOrSelector);
             }
         }
 
@@ -221,7 +222,7 @@ var kutty = kutty || (function () {
             }
         }
 
-        function removeClassFromElement(elt, clazz) {
+        function removeClassFromElement(elt, clazz, delay) {
             if (delay) {
                 setTimeout(function(){removeClassFromElement(elt, clazz);}, delay)
             } else {
@@ -234,7 +235,7 @@ var kutty = kutty || (function () {
         }
 
         function takeClassForElement(elt, clazz) {
-            forEach(elt.parent.children, function(child){
+            forEach(elt.parentElement.children, function(child){
                 removeClassFromElement(child, clazz);
             })
             addClassToElement(elt, clazz);
@@ -267,7 +268,8 @@ var kutty = kutty || (function () {
                 var eventArgs = processEventArgs(arg1, arg2, arg3);
                 eventArgs.target.addEventListener(eventArgs.event, eventArgs.listener);
             })
-            return isFunction(arg2) ? arg2 : arg3;
+            var b = isFunction(arg2);
+            return b ? arg2 : arg3;
         }
 
         function removeKuttyEventListener(arg1, arg2, arg3) {

test/core/api.js

@@ -0,0 +1,161 @@
+describe("Core kutty API test", function(){
+    beforeEach(function() {
+        this.server = makeServer();
+        clearWorkArea();
+    });
+    afterEach(function()  {
+        this.server.restore();
+        clearWorkArea();
+    });
+
+    it('version is correct', function(){
+      kutty.version.should.equal("0.0.1");
+    });
+
+    it('onLoad is called... onLoad', function(){
+        // also tests on/off
+        this.server.respondWith("GET", "/test", "<div id='d1' kt-get='/test'></div>")
+        var helper = kutty.onLoad(function (elt) {
+            elt.setAttribute("foo", "bar");
+        });
+        try {
+            var div = make("<div id='d1' kt-get='/test' kt-swap='outerHTML'></div>");
+            div.click();
+            this.server.respond();
+            byId("d1").getAttribute("foo").should.equal("bar");
+        } finally {
+            kutty.off("load.kutty", helper);
+        }
+    });
+
+    it('triggers properly', function () {
+        var div = make("<div/>");
+        var myEventCalled = false;
+        var detailStr = "";
+        kutty.on("myEvent", function(evt){
+            myEventCalled = true;
+            detailStr = evt.detail.str;
+        })
+        kutty.trigger(div, "myEvent", {str:"foo"})
+
+        myEventCalled.should.equal(true);
+        detailStr.should.equal("foo");
+    });
+
+    it('should find properly', function(){
+        var div = make("<div id='d1' class='c1 c2'>");
+        div.should.equal(kutty.find("#d1"));
+        div.should.equal(kutty.find(".c1"));
+        div.should.equal(kutty.find(".c2"));
+        div.should.equal(kutty.find(".c1.c2"));
+    });
+
+    it('should find properly from elt', function(){
+        var div = make("<div><a id='a1'></a><a id='a2'></a></div>");
+        kutty.find(div, "a").id.should.equal('a1');
+    });
+
+    it('should find all properly', function(){
+        var div = make("<div class='c1 c2 c3'><div class='c1 c2'><div class='c1'>");
+        kutty.findAll(".c1").length.should.equal(3);
+        kutty.findAll(".c2").length.should.equal(2);
+        kutty.findAll(".c3").length.should.equal(1);
+    });
+
+    it('should find all properly from elt', function(){
+        var div = make("<div><div class='c1 c2 c3'><div class='c1 c2'><div class='c1'></div>");
+        kutty.findAll(div, ".c1").length.should.equal(3);
+        kutty.findAll(div, ".c2").length.should.equal(2);
+        kutty.findAll(div,".c3").length.should.equal(1);
+    });
+
+    it('should find closest element properly', function () {
+        var div = make("<div><a id='a1'></a><a id='a2'></a></div>");
+        var a = kutty.find(div, "a");
+        kutty.closest(a, "div").should.equal(div);
+    });
+
+    it('should remove element properly', function () {
+        var div = make("<div><a></a></div>");
+        var a = kutty.find(div, "a");
+        kutty.remove(a);
+        div.innerHTML.should.equal("");
+    });
+
+    it('should add class properly', function () {
+        var div = make("<div></div>");
+        div.classList.contains("foo").should.equal(false);
+        kutty.addClass(div, "foo");
+        div.classList.contains("foo").should.equal(true);
+    });
+
+    it('should add class properly after delay', function (done) {
+        var div = make("<div></div>");
+        div.classList.contains("foo").should.equal(false);
+        kutty.addClass(div, "foo", 10);
+        div.classList.contains("foo").should.equal(false);
+        setTimeout(function () {
+            div.classList.contains("foo").should.equal(true);
+            done();
+        }, 20);
+    });
+
+    it('should remove class properly', function () {
+        var div = make("<div></div>");
+        kutty.addClass(div, "foo");
+        div.classList.contains("foo").should.equal(true);
+        kutty.removeClass(div, "foo");
+        div.classList.contains("foo").should.equal(false);
+    });
+
+    it('should add class properly after delay', function (done) {
+        var div = make("<div></div>");
+        kutty.addClass(div, "foo");
+        div.classList.contains("foo").should.equal(true);
+        kutty.removeClass(div, "foo", 10);
+        div.classList.contains("foo").should.equal(true);
+        setTimeout(function () {
+            div.classList.contains("foo").should.equal(false);
+            done();
+        }, 20);
+    });
+
+    it('should toggle class properly', function () {
+        var div = make("<div></div>");
+        div.classList.contains("foo").should.equal(false);
+        kutty.toggleClass(div, "foo");
+        div.classList.contains("foo").should.equal(true);
+        kutty.toggleClass(div, "foo");
+        div.classList.contains("foo").should.equal(false);
+    });
+
+    it('should take class properly', function () {
+        var div1 = make("<div></div>");
+        var div2 = make("<div></div>");
+        var div3 = make("<div></div>");
+
+        div1.classList.contains("foo").should.equal(false);
+        div2.classList.contains("foo").should.equal(false);
+        div3.classList.contains("foo").should.equal(false);
+
+        kutty.takeClass(div1, "foo");
+
+        div1.classList.contains("foo").should.equal(true);
+        div2.classList.contains("foo").should.equal(false);
+        div3.classList.contains("foo").should.equal(false);
+
+        kutty.takeClass(div2, "foo");
+
+        div1.classList.contains("foo").should.equal(false);
+        div2.classList.contains("foo").should.equal(true);
+        div3.classList.contains("foo").should.equal(false);
+
+        kutty.takeClass(div3, "foo");
+
+        div1.classList.contains("foo").should.equal(false);
+        div2.classList.contains("foo").should.equal(false);
+        div3.classList.contains("foo").should.equal(true);
+    });
+
+
+})

test/index.html

@@ -27,6 +27,7 @@
 
 <!-- core tests -->
 <script src="core/internals.js"></script>
+<script src="core/api.js"></script>
 <script src="core/ajax.js"></script>
 <script src="core/verbs.js"></script>
 <script src="core/values.js"></script>

www/js/kutty.js

@@ -176,9 +176,10 @@ var kutty = kutty || (function () {
         }
 
         function onLoadHelper(callback) {
-            kutty.on("load.kutty", function(evt) {
+            var value = kutty.on("load.kutty", function(evt) {
                 callback(evt.detail.elt);
             });
+            return value;
         }
 
         function logAll(){
@@ -191,17 +192,17 @@ var kutty = kutty || (function () {
 
         function find(eltOrSelector, selector) {
             if (selector) {
-                eltOrSelector.querySelector(eltOrSelector);
+                return eltOrSelector.querySelector(selector);
             } else {
-                getDocument().body.querySelector(eltOrSelector);
+                return getDocument().body.querySelector(eltOrSelector);
             }
         }
 
         function findAll(eltOrSelector, selector) {
             if (selector) {
-                eltOrSelector.querySelectorAll(eltOrSelector);
+                return eltOrSelector.querySelectorAll(selector);
             } else {
-                getDocument().body.querySelectorAll(eltOrSelector);
+                return getDocument().body.querySelectorAll(eltOrSelector);
             }
         }
 
@@ -221,7 +222,7 @@ var kutty = kutty || (function () {
             }
         }
 
-        function removeClassFromElement(elt, clazz) {
+        function removeClassFromElement(elt, clazz, delay) {
             if (delay) {
                 setTimeout(function(){removeClassFromElement(elt, clazz);}, delay)
             } else {
@@ -234,7 +235,7 @@ var kutty = kutty || (function () {
         }
 
         function takeClassForElement(elt, clazz) {
-            forEach(elt.parent.children, function(child){
+            forEach(elt.parentElement.children, function(child){
                 removeClassFromElement(child, clazz);
             })
             addClassToElement(elt, clazz);
@@ -267,7 +268,8 @@ var kutty = kutty || (function () {
                 var eventArgs = processEventArgs(arg1, arg2, arg3);
                 eventArgs.target.addEventListener(eventArgs.event, eventArgs.listener);
             })
-            return isFunction(arg2) ? arg2 : arg3;
+            var b = isFunction(arg2);
+            return b ? arg2 : arg3;
         }
 
         function removeKuttyEventListener(arg1, arg2, arg3) {

www/test/0.0.1-alpha.3/src/kutty.js

@@ -176,9 +176,10 @@ var kutty = kutty || (function () {
         }
 
         function onLoadHelper(callback) {
-            kutty.on("load.kutty", function(evt) {
+            var value = kutty.on("load.kutty", function(evt) {
                 callback(evt.detail.elt);
             });
+            return value;
         }
 
         function logAll(){
@@ -191,17 +192,17 @@ var kutty = kutty || (function () {
 
         function find(eltOrSelector, selector) {
             if (selector) {
-                eltOrSelector.querySelector(eltOrSelector);
+                return eltOrSelector.querySelector(selector);
             } else {
-                getDocument().body.querySelector(eltOrSelector);
+                return getDocument().body.querySelector(eltOrSelector);
             }
         }
 
         function findAll(eltOrSelector, selector) {
             if (selector) {
-                eltOrSelector.querySelectorAll(eltOrSelector);
+                return eltOrSelector.querySelectorAll(selector);
             } else {
-                getDocument().body.querySelectorAll(eltOrSelector);
+                return getDocument().body.querySelectorAll(eltOrSelector);
             }
         }
 
@@ -221,7 +222,7 @@ var kutty = kutty || (function () {
             }
         }
 
-        function removeClassFromElement(elt, clazz) {
+        function removeClassFromElement(elt, clazz, delay) {
             if (delay) {
                 setTimeout(function(){removeClassFromElement(elt, clazz);}, delay)
             } else {
@@ -234,7 +235,7 @@ var kutty = kutty || (function () {
         }
 
         function takeClassForElement(elt, clazz) {
-            forEach(elt.parent.children, function(child){
+            forEach(elt.parentElement.children, function(child){
                 removeClassFromElement(child, clazz);
             })
             addClassToElement(elt, clazz);
@@ -267,7 +268,8 @@ var kutty = kutty || (function () {
                 var eventArgs = processEventArgs(arg1, arg2, arg3);
                 eventArgs.target.addEventListener(eventArgs.event, eventArgs.listener);
             })
-            return isFunction(arg2) ? arg2 : arg3;
+            var b = isFunction(arg2);
+            return b ? arg2 : arg3;
         }
 
         function removeKuttyEventListener(arg1, arg2, arg3) {

www/test/0.0.1-alpha.3/test/core/api.js

@@ -0,0 +1,161 @@
+describe("Core kutty API test", function(){
+    beforeEach(function() {
+        this.server = makeServer();
+        clearWorkArea();
+    });
+    afterEach(function()  {
+        this.server.restore();
+        clearWorkArea();
+    });
+
+    it('version is correct', function(){
+      kutty.version.should.equal("0.0.1");
+    });
+
+    it('onLoad is called... onLoad', function(){
+        // also tests on/off
+        this.server.respondWith("GET", "/test", "<div id='d1' kt-get='/test'></div>")
+        var helper = kutty.onLoad(function (elt) {
+            elt.setAttribute("foo", "bar");
+        });
+        try {
+            var div = make("<div id='d1' kt-get='/test' kt-swap='outerHTML'></div>");
+            div.click();
+            this.server.respond();
+            byId("d1").getAttribute("foo").should.equal("bar");
+        } finally {
+            kutty.off("load.kutty", helper);
+        }
+    });
+
+    it('triggers properly', function () {
+        var div = make("<div/>");
+        var myEventCalled = false;
+        var detailStr = "";
+        kutty.on("myEvent", function(evt){
+            myEventCalled = true;
+            detailStr = evt.detail.str;
+        })
+        kutty.trigger(div, "myEvent", {str:"foo"})
+
+        myEventCalled.should.equal(true);
+        detailStr.should.equal("foo");
+    });
+
+    it('should find properly', function(){
+        var div = make("<div id='d1' class='c1 c2'>");
+        div.should.equal(kutty.find("#d1"));
+        div.should.equal(kutty.find(".c1"));
+        div.should.equal(kutty.find(".c2"));
+        div.should.equal(kutty.find(".c1.c2"));
+    });
+
+    it('should find properly from elt', function(){
+        var div = make("<div><a id='a1'></a><a id='a2'></a></div>");
+        kutty.find(div, "a").id.should.equal('a1');
+    });
+
+    it('should find all properly', function(){
+        var div = make("<div class='c1 c2 c3'><div class='c1 c2'><div class='c1'>");
+        kutty.findAll(".c1").length.should.equal(3);
+        kutty.findAll(".c2").length.should.equal(2);
+        kutty.findAll(".c3").length.should.equal(1);
+    });
+
+    it('should find all properly from elt', function(){
+        var div = make("<div><div class='c1 c2 c3'><div class='c1 c2'><div class='c1'></div>");
+        kutty.findAll(div, ".c1").length.should.equal(3);
+        kutty.findAll(div, ".c2").length.should.equal(2);
+        kutty.findAll(div,".c3").length.should.equal(1);
+    });
+
+    it('should find closest element properly', function () {
+        var div = make("<div><a id='a1'></a><a id='a2'></a></div>");
+        var a = kutty.find(div, "a");
+        kutty.closest(a, "div").should.equal(div);
+    });
+
+    it('should remove element properly', function () {
+        var div = make("<div><a></a></div>");
+        var a = kutty.find(div, "a");
+        kutty.remove(a);
+        div.innerHTML.should.equal("");
+    });
+
+    it('should add class properly', function () {
+        var div = make("<div></div>");
+        div.classList.contains("foo").should.equal(false);
+        kutty.addClass(div, "foo");
+        div.classList.contains("foo").should.equal(true);
+    });
+
+    it('should add class properly after delay', function (done) {
+        var div = make("<div></div>");
+        div.classList.contains("foo").should.equal(false);
+        kutty.addClass(div, "foo", 10);
+        div.classList.contains("foo").should.equal(false);
+        setTimeout(function () {
+            div.classList.contains("foo").should.equal(true);
+            done();
+        }, 20);
+    });
+
+    it('should remove class properly', function () {
+        var div = make("<div></div>");
+        kutty.addClass(div, "foo");
+        div.classList.contains("foo").should.equal(true);
+        kutty.removeClass(div, "foo");
+        div.classList.contains("foo").should.equal(false);
+    });
+
+    it('should add class properly after delay', function (done) {
+        var div = make("<div></div>");
+        kutty.addClass(div, "foo");
+        div.classList.contains("foo").should.equal(true);
+        kutty.removeClass(div, "foo", 10);
+        div.classList.contains("foo").should.equal(true);
+        setTimeout(function () {
+            div.classList.contains("foo").should.equal(false);
+            done();
+        }, 20);
+    });
+
+    it('should toggle class properly', function () {
+        var div = make("<div></div>");
+        div.classList.contains("foo").should.equal(false);
+        kutty.toggleClass(div, "foo");
+        div.classList.contains("foo").should.equal(true);
+        kutty.toggleClass(div, "foo");
+        div.classList.contains("foo").should.equal(false);
+    });
+
+    it('should take class properly', function () {
+        var div1 = make("<div></div>");
+        var div2 = make("<div></div>");
+        var div3 = make("<div></div>");
+
+        div1.classList.contains("foo").should.equal(false);
+        div2.classList.contains("foo").should.equal(false);
+        div3.classList.contains("foo").should.equal(false);
+
+        kutty.takeClass(div1, "foo");
+
+        div1.classList.contains("foo").should.equal(true);
+        div2.classList.contains("foo").should.equal(false);
+        div3.classList.contains("foo").should.equal(false);
+
+        kutty.takeClass(div2, "foo");
+
+        div1.classList.contains("foo").should.equal(false);
+        div2.classList.contains("foo").should.equal(true);
+        div3.classList.contains("foo").should.equal(false);
+
+        kutty.takeClass(div3, "foo");
+
+        div1.classList.contains("foo").should.equal(false);
+        div2.classList.contains("foo").should.equal(false);
+        div3.classList.contains("foo").should.equal(true);
+    });
+
+
+})

www/test/0.0.1-alpha.3/test/index.html

@@ -27,6 +27,7 @@
 
 <!-- core tests -->
 <script src="core/internals.js"></script>
+<script src="core/api.js"></script>
 <script src="core/ajax.js"></script>
 <script src="core/verbs.js"></script>
 <script src="core/values.js"></script>