chi-events - npm Package Compare versions

Comparing version 0.0.4 to 0.1.0

ie-bug.js

@@ -0,1 +1,3 @@
+'use strict';
+
 // Fix bug that occurs in at least IE 9 and 10
@@ -2,0 +4,0 @@ // Some newly-created nodes will not fire events until they are added to an

index.js

@@ -0,5 +1,8 @@
+'use strict';
+
 var flatten = require('flatten-list'),
     forEach = require('mout/array/forEach'),
     ieBug = require('./ie-bug'),
-    document = window.document;
+    document = window.document,
+    DelegateEvents = require('./delegate');
 
@@ -23,8 +26,19 @@ if (ieBug.check(trigger)) {
 
+Events.prototype.trigger = function(event, detail) {
+    return trigger(this.nodes, event, detail);
+};
+
 Events.prototype.once = function(event, handler) {
-    return once(this.nodes, event, handler);
+    var ref = this.on(event, wrapped);
+    return ref;
+
+    function wrapped(e) {
+        /*jshint validthis: true */
+        ref.remove();
+        return handler.call(this, e);
+    }
 };
 
-Events.prototype.trigger = function(event, detail) {
-    return trigger(this.nodes, event, detail);
+Events.prototype.children = function(filter) {
+    return new DelegateEvents(this, filter);
 };
@@ -52,13 +66,2 @@
 
-function once(nodes, event, handler) {
-    var listener;
-    function onceHandler(e) {
-        listener.remove();
-        handler.call(this, e);
-    }
-
-    listener = on(nodes, event, onceHandler);
-    return listener;
-}
-
 function trigger(nodes, event) {
@@ -65,0 +68,0 @@ var e = createEvent(event);

package.json

 {
   "name": "chi-events",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "description": "Easily manage DOM events",
@@ -8,3 +8,3 @@ "main": "index.js",
     "test": "hut-build test",
-    "serve": "hut-build serve",
+    "start": "hut-build serve",
     "lint": "hut-build lint"
@@ -29,9 +29,12 @@ },
   "devDependencies": {
-    "tape": "~1.1.1",
-    "hut-build": "~0.1.4"
+    "tape": "~2.1.0",
+    "hut-build": "~0.2.0"
   },
   "dependencies": {
     "flatten-list": "~0.0.1",
-    "mout": "~0.7.1"
+    "mout": "~0.7.1",
+    "chi-matches": "0.0.1",
+    "sinon": "~1.7.3",
+    "chi-create": "0.0.2"
   }
 }

README.md

@@ -45,2 +45,9 @@ # chi-events
 });
+
+// Use event delegation to listen for events on child nodes
+events(container)
+    .children('button') // Can use CSS selector or function
+    .on('click', function() {
+        // `this` is the button element
+    });
 ```
@@ -71,1 +78,16 @@
 DOM nodes.
+
+### `#children(filter)`
+
+Returns a new object that can be used to listen to events that occur in the
+children of the nodes. The returned object contains the `#on` and `#once`
+methods that have the same usage, but use event delegation to listen only for
+events that occur in child nodes that match `filter`. `filter` can be a CSS
+selector string or a function that takes a node and returns a truthy value if
+events on that node should be handled.
+
+The context (the `this` object) in any attached event handlers will be the node
+that the event bubbled from that matches `filter`.
+
+Note that since this listens for bubbled events, it will include child nodes
+that are added after the event listener has been attached.

test.js

@@ -0,9 +1,13 @@
+'use strict';
+
 var test = require('tape'),
     events = require('./'),
-    document = window.document;
+    create = require('chi-create'),
+    document = window.document,
+    body = document.body;
 
 function triggerTest(el) {
-    var ev = document.createEvent('Event');
-    ev.initEvent('test', true, true);
-    el.dispatchEvent(ev);
+    var e = document.createEvent('Event');
+    e.initEvent('test', true, false);
+    el.dispatchEvent(e);
 }
@@ -16,2 +20,3 @@
             called = false;
+
         events(el).on('test', function(e) {
@@ -22,4 +27,4 @@ t.equal(this, el);
         });
+        triggerTest(el);
 
-        triggerTest(el);
         t.ok(called, 'handler should be called');
@@ -32,2 +37,3 @@ t.end();
             called = false;
+
         events(el)
@@ -47,2 +53,3 @@ .on('test', function() { called = true; })
             called = 0;
+
         events(a, [b, c]).on('test', function() { called++; });
@@ -65,2 +72,3 @@ triggerTest(a);
             called = 0;
+
         events(el).once('test', function(e) {
@@ -81,2 +89,3 @@ t.equal(this, el);
             called = false;
+
         events(el)
@@ -112,4 +121,4 @@ .once('test', function() { called = true; })
 
-        el.addEventListener('click', function() { called = true; }, false);
-        events(el).trigger('click');
+        el.addEventListener('test', function() { called = true; }, false);
+        events(el).trigger('test');
 
@@ -126,7 +135,8 @@ t.ok(called, 'event should be triggered');
         function handle() {
+            /*jshint validthis: true */
             results.push(this);
         }
-        a.addEventListener('click', handle, false);
-        b.addEventListener('click', handle, false);
-        events(a, b).trigger('click');
+        a.addEventListener('test', handle, false);
+        b.addEventListener('test', handle, false);
+        events(a, b).trigger('test');
 
@@ -138,2 +148,119 @@ t.deepEqual(results, [a, b]);
     t.end();
-});
+});
+
+test('children', function(t) {
+
+    function structure() {
+        var el = create('div',
+            create('div', { 'class': 'first' },
+                create('div', { 'class': 'nested' })),
+            create('div', { 'class': 'second' }));
+
+        body.appendChild(el);
+        return el;
+    }
+
+    t.test('handle events on matched children', function(t) {
+        var el = structure(),
+            first = el.querySelector('.first'),
+            called = 0;
+
+        events(el)
+            .children(function(n) { return n === first; })
+            .on('test', function(e) {
+                t.equal(e.target, first);
+                t.equal(this, first);
+                called++;
+            });
+
+        triggerTest(first);
+        body.removeChild(el);
+
+        t.equal(called, 1);
+        t.end();
+    });
+
+    t.test('walk up the tree', function(t) {
+        var el = structure(),
+            first = el.querySelector('.first'),
+            nested = el.querySelector('.nested'),
+            called = 0;
+
+        events(el)
+            .children(function(n) { return n === first; })
+            .on('test', function(e) {
+                t.equal(e.target, nested);
+                t.equal(this, first);
+                called++;
+            });
+
+        triggerTest(nested);
+        body.removeChild(el);
+
+        t.equal(called, 1);
+        t.end();
+    });
+
+    t.test('skip events on unmatched children', function(t) {
+        var el = structure(),
+            first = el.querySelector('.first'),
+            called = 0;
+
+        events(el)
+            .children(function(n) { return n !== first; })
+            .on('test', function() {
+                called++;
+            });
+
+        triggerTest(first);
+        body.removeChild(el);
+
+        t.equal(called, 0);
+        t.end();
+    });
+
+    t.test('allow CSS selectors for matching', function(t) {
+        var el = structure(),
+            first = el.querySelector('.first'),
+            second = el.querySelector('.second'),
+            called = 0;
+
+        events(el)
+            .children('.second')
+            .on('test', function() {
+                t.equal(this, second);
+                called++;
+            });
+
+        triggerTest(first);
+        triggerTest(second);
+        body.removeChild(el);
+
+        t.equal(called, 1);
+        t.end();
+    });
+
+    t.test('should handle .once', function(t) {
+        var el = structure(),
+            first = el.querySelector('.first'),
+            second = el.querySelector('.second'),
+            called = 0;
+
+        events(el)
+            .children('.second')
+            .once('test', function() {
+                t.equal(this, second);
+                called++;
+            });
+
+        triggerTest(first);
+        triggerTest(second);
+        triggerTest(second);
+        body.removeChild(el);
+
+        t.equal(called, 1);
+        t.end();
+    });
+
+    t.end();
+});

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15746

increased by50.98%

Number of package files

8

increased by14.29%

Lines of code

355

increased by69.86%

Number of lines in readme file

92

increased by31.43%

Worsened metrics

Dependency count

5

increased by150%

Dependency changes

• + Addedchi-create@0.0.2

• + Addedchi-matches@0.0.1

• + Addedsinon@~1.7.3

• + Addedbuster-format@0.5.6(transitive)

• + Addedchi-create@0.0.2(transitive)

• + Addedchi-matches@0.0.1(transitive)

• + Addedsinon@1.7.3(transitive)