diff --git a/src/scripts/lib/events/off.js b/src/scripts/lib/events/off.js new file mode 100644 index 0000000..df4bac6 --- /dev/null +++ b/src/scripts/lib/events/off.js @@ -0,0 +1,11 @@ +var forEachEls = require("../foreach-els") + +module.exports = function(els, events, listener, useCapture) { + events = (typeof events === "string" ? events.split(" ") : events) + + events.forEach(function(e) { + forEachEls(els, function(el) { + el.removeEventListener(e, listener, useCapture) + }) + }) +} diff --git a/src/scripts/lib/events/on.js b/src/scripts/lib/events/on.js new file mode 100644 index 0000000..50b5a1d --- /dev/null +++ b/src/scripts/lib/events/on.js @@ -0,0 +1,11 @@ +var forEachEls = require("../foreach-els") + +module.exports = function(els, events, listener, useCapture) { + events = (typeof events === "string" ? events.split(" ") : events) + + events.forEach(function(e) { + forEachEls(els, function(el) { + el.addEventListener(e, listener, useCapture) + }) + }) +} diff --git a/src/scripts/lib/events/trigger.js b/src/scripts/lib/events/trigger.js new file mode 100644 index 0000000..3e6b2d5 --- /dev/null +++ b/src/scripts/lib/events/trigger.js @@ -0,0 +1,30 @@ +var forEachEls = require("../foreach-els") + +module.exports = function(els, events) { + events = (typeof events === "string" ? events.split(" ") : events) + + events.forEach(function(e) { + var event + if (document.createEvent) { + event = document.createEvent("HTMLEvents") + event.initEvent(e, true, true) + } + else { + event = document.createEventObject() + event.eventType = e + } + + event.eventName = e + + if (document.createEvent) { + forEachEls(els, function(el) { + el.dispatchEvent(event) + }) + } + else { + forEachEls(els, function(el) { + el.fireEvent("on" + event.eventType, event) + }) + } + }) +} diff --git a/tests/scripts/lib/events.js b/tests/scripts/lib/events.js new file mode 100644 index 0000000..d979c8d --- /dev/null +++ b/tests/scripts/lib/events.js @@ -0,0 +1,92 @@ +var tape = require("tape") + +var on = require("../../../src/scripts/lib/events/on") +var off = require("../../../src/scripts/lib/events/off") +var trigger = require("../../../src/scripts/lib/events/trigger") + +var el = document.createElement("div") +var el2 = document.createElement("span") +var els = [el, el2] +var eventType2 = "resize" +var eventsType = "click resize" +var classCb = function() { + this.className += "on" +} +var attrCb = function() { + this.setAttribute("data-state", this.getAttribute("data-state") + "ON") +} + +tape("test events on/off/trigger for one element, one event", function(t) { + el.className = "" + on(el, "click", classCb) + trigger(el, "click") + t.equal(el.className, "on", "attached callback has been fired properly") + + el.className = "off" + off(el, "click", classCb) + trigger(el, "click") + t.equal(el.className, "off", "triggered event didn't fire detached callback") + + t.end() +}) + +tape("test events on/off/trigger for multiple elements, one event", function(t) { + el.className = "" + el2.className = "" + + on(els, "click", classCb) + trigger(els, "click") + t.equal(el.className, "on", "attached callback has been fired properly on the first element") + t.equal(el2.className, "on", "attached callback has been fired properly on the second element") + + el.className = "off" + el2.className = "off" + off(els, "click", classCb) + trigger(els, "click") + t.equal(el.className, "off", "triggered event didn't fire detached callback on the first element") + t.equal(el2.className, "off", "triggered event didn't fire detached callback on the second element") + + t.end() +}) + +tape("test events on/off/trigger for one element, multiple events", function(t) { + el.className = "" + on(el, "click mouseover", classCb) + trigger(el, "click mouseover") + t.equal(el.className, "onon", "attached callbacks have been fired properly") + + el.className = "off" + off(el, "click mouseover", classCb) + trigger(el, "click mouseover") + t.equal(el.className, "off", "triggered events didn't fire detached callback") + + t.end() +}) + +tape("test events on/off/trigger for multiple elements, multiple events", function(t) { + el.className = "" + el2.className = "" + el.setAttribute("data-state", "") + el2.setAttribute("data-state", "") + on(els, "click mouseover", classCb) + on(els, "resize scroll", attrCb) + trigger(els, "click mouseover resize scroll") + t.equal(el.className, "onon", "attached callbacks has been fired properly on the first element") + t.equal(el.getAttribute("data-state"), "ONON", "attached callbacks has been fired properly on the first element") + t.equal(el2.className, "onon", "attached callbacks has been fired properly on the second element") + t.equal(el2.getAttribute("data-state"), "ONON", "attached callbacks has been fired properly on the second element") + + el.className = "off" + el2.className = "off" + el.setAttribute("data-state", "off") + el2.setAttribute("data-state", "off") + off(els, "click mouseover", classCb) + off(els, "resize scroll", attrCb) + trigger(els, "click mouseover resize scroll") + t.equal(el.className, "off", "triggered events didn't fire detached callbacks on the first element") + t.equal(el.getAttribute("data-state"), "off", "triggered events didn't fire detached callbacks on the first element") + t.equal(el2.className, "off", "triggered events didn't fire detached callbacks on the first element") + t.equal(el2.getAttribute("data-state"), "off", "triggered events didn't fire detached callbacks on the first element") + + t.end() +})