Permalink
Browse files

Enabled binding of custom events for arrays and trees (#54)

  • Loading branch information...
vkaravir committed May 2, 2012
1 parent 1eabb1c commit 626a6ea426bf479946982f0e0d83ce76d47abf61
Showing with 49 additions and 0 deletions.
  1. +9 −0 doc/api.html
  2. +4 −0 src/array.js
  3. +4 −0 src/tree.js
  4. +32 −0 test/unit/array.js
View
@@ -384,6 +384,11 @@ <h3 class="apitopic">Events</h3>
<p>This will use array's <code>css</code> function as the event handler and pass it another parameter
when the event is triggered. On mouse enter, the function call will essentially be:
<code>arr(index, {"color": "red"}, e)</code>. Here, <code>e</code> is again the jQuery event object.</p>
<h3 class="apimethod">.on(eventName, [data,], handler)</h3>
<p>To bind other events than the ones listed above, you can use the <code>on</code> function. It takes
as the first parameter the name of the event. Multiple events can be bound by separating their names with
spaces. Other parameters are the same as for the shortcuts.</p>
<h3 class="apitopic">CSS control</h3>
There are various options and style effects that can be controlled via
@@ -485,6 +490,10 @@ <h3 class="apitopic">Events</h3>
<p>Similarly to arrays, you can also pass custom data to the handler. For example,
<code>bt.click({"color": "blue"}, JSAV.utils._helpers.css);</code> would call the <code>css</code>
function with the given parameter. </p>
<h3 class="apimethod">.on(eventName, [data,], handler, options)</h3>
<p>To bind other events than the ones listed above, you can use the <code>on</code> function. It takes
as the first parameter the name of the event. Multiple events can be bound by separating their names with
spaces. Other parameters are the same as for the shortcuts.</p>
<h2>Tree Node API</h2>
View
@@ -347,6 +347,10 @@
for (var i = events.length; i--; ) {
arrproto[events[i]] = eventhandler(events[i]);
}
arrproto.on = function(eventName, data, handler) {
eventhandler(eventName).call(this, data, handler);
return this;
};
arrproto.toggleArrow = JSAV.anim(function(indices) {
var $elems = getIndices($(this.element).find("li"), indices);
View
@@ -150,6 +150,10 @@
for (var i = events.length; i--; ) {
treeproto[events[i]] = eventhandler(events[i]);
}
treeproto.on = function(eventName, data, handler, options) {
eventhandler(eventName).call(this, data, handler, options);
return this;
};
var TreeNode = function(container, value, parent, options) {
View
@@ -353,4 +353,36 @@ test("Test click event", function() {
arr2.element.find(".jsavindex:eq(0)").click();
arr3.element.find(".jsavindex:eq(3)").click();
});
test("Test on event binding and custom events", function() {
expect(12);
var handler1 = function(index, event) {
equals(index, 2);
ok(event);
equals(this.value(index), 3);
};
var handler2 = function(index, myval, event) {
equals(myval, "kissa");
equals(index, 0);
ok(event);
equals(this.value(index), 5);
}
var handler3 = function(index, myval, myval2, event) {
equals(myval, "kissa");
equals(myval2, "koira");
equals(index, 3);
ok(event);
equals(this.value(index), 12);
}
var av = new JSAV("arraycontainer"),
arr = av.ds.array([1, 2, 3, 4]),
arr2 = av.ds.array([5, 6, 7, 8]),
arr3 = av.ds.array([9, 10, 11, 12]);
arr.on("jsavclick", handler1);
arr2.on("jsavclick", "kissa", handler2);
arr3.on("jsavclick", ["kissa", "koira"], handler3);
arr.element.find(".jsavindex:eq(2)").trigger("jsavclick");
arr2.element.find(".jsavindex:eq(0)").trigger("jsavclick");
arr3.element.find(".jsavindex:eq(3)").trigger("jsavclick");
});
})();

0 comments on commit 626a6ea

Please sign in to comment.