Update closest() to accept a css selector

README.md

@@ -177,13 +177,13 @@ domassist.html('.my-div', 'hello world'); // add html
 domassist.html('.my-div', ''); // remove html
 ```
 
-### closest(element, selector)
+### closest(origin, selector)
 
 Find the closest parent element that matches the given selector
 
 #### Parameters:
 
-`element` - {Element} the element where you want to start looking from
+`origin` - {string|Element} - the element where you want to start looking from. It can be either a valid CSS selector or an Element.
 
 `selector` - {string} A valid CSS of the element to be found.
 
@@ -305,13 +305,13 @@ domassist.off('a', 'click');
 ```
 
 
-### once(element, event, callback, capture)
+### once(selector, event, callback, capture)
 
 Attach an event to an element to be fired once.
 
 #### Parameters:
 
-`selector` - {Element}
+`selector` - {string|Element}
 
 `event` - {string} The name of the event to attach such as `click`, `mouseenter`, or `touchend`
 

lib/closest.js

@@ -1,6 +1,9 @@
 import matches from './matches';
+import findOne from './findOne';
+
+function closest(origin, selector) {
+  const el = (selector instanceof HTMLElement) ? origin : findOne(origin);
 
-function closest(el, selector) {
   let parent = el.parentElement;
   while (parent.parentElement && !matches(parent, selector)) {
     parent = parent.parentElement;

lib/once.js

@@ -1,9 +1,9 @@
 import on from './on';
 import off from './off';
 
-function once(el, event, run, capture = false) {
-  on(el, event, e => {
-    off(el, event);
+function once(selector, event, run, capture = false) {
+  on(selector, event, e => {
+    off(selector, event);
     run(e);
   }, capture);
 }

test/closest.test.js

@@ -0,0 +1,52 @@
+import domassist from '../domassist';
+import test from 'tape-rollup';
+
+function addNode(el, num) {
+  const node = document.createElement('div');
+  node.innerText = num;
+  node.classList.add(`level-${num}`);
+  const children = el.children;
+  if (children.length) {
+    const child = domassist.findOne(`.level-${num - 1}`);
+    child.appendChild(node);
+  } else {
+    el.appendChild(node);
+  }
+}
+
+const teardown = (el) => {
+  while (el.firstChild) {
+    el.removeChild(el.firstChild);
+  }
+};
+
+test('closest - element', assert => {
+  const el = domassist.findOne('#domassist');
+  const levels = 4;
+  for (let i = 0; i < levels; i += 1) {
+    addNode(el, i + 1);
+  }
+  const startEl = domassist.findOne(`.level-${levels}`);
+  let count = levels - 1;
+  while (count) {
+    assert.ok(domassist.closest(startEl, `.level-${count}`), `Should find element with class of level-${count}`);
+    --count;
+  }
+  teardown(el);
+  assert.end();
+});
+
+test('closest - selector', assert => {
+  const el = domassist.findOne('#domassist');
+  const levels = 4;
+  for (let i = 0; i < levels; i += 1) {
+    addNode(el, i + 1);
+  }
+  let count = levels - 1;
+  while (count) {
+    assert.ok(domassist.closest(`.level-${levels}`, `.level-${count}`), `Should find element with class of level-${count}`);
+    --count;
+  }
+  teardown(el);
+  assert.end();
+});

test/domassist.test.js

@@ -3,13 +3,15 @@
 import domassist from '../domassist';
 import test from 'tape-rollup';
 import { teardown } from './setup';
-import './find.test.js';
+import './find.test';
 import './classes.test';
-import './attrs.test.js';
-import './on.test.js';
-import './off.test.js';
-import './html.test.js';
-import './modify.test.js';
+import './attrs.test';
+import './on.test';
+import './off.test';
+import './html.test';
+import './modify.test';
+import './closest.test';
+import './once.test';
 
 const page = window.phantom.page;
 
@@ -123,37 +125,6 @@ test('matches', assert => {
   assert.end();
 });
 
-test('closest', assert => {
-  const el = domassist.findOne('#domassist');
-  const levels = 4;
-  // clean up test dom
-  while (el.firstChild) {
-    el.removeChild(el.firstChild);
-  }
-  function addNode(num) {
-    const node = document.createElement('div');
-    node.innerText = num;
-    node.classList.add(`level-${num}`);
-    const children = el.children;
-    if (children.length) {
-      const child = domassist.findOne(`.level-${num - 1}`);
-      child.appendChild(node);
-    } else {
-      el.appendChild(node);
-    }
-  }
-  for (let i = 0; i < levels; i += 1) {
-    addNode(i + 1);
-  }
-  const startEl = domassist.findOne(`.level-${levels}`);
-  let count = levels - 1;
-  while (count) {
-    assert.ok(domassist.closest(startEl, `.level-${count}`), `Should find element with class of level-${count}`);
-    --count;
-  }
-  assert.end();
-});
-
 test('Events - delegate', assert => {
   const el = domassist.findOne('#domassist');
 
@@ -172,32 +143,6 @@ test('Events - delegate', assert => {
   page.sendEvent('click', pos.left + pos.width / 2, pos.top + pos.height / 2);
 });
 
-test('Events - once', assert => {
-  const el = domassist.findOne('#domassist');
-
-  el.innerHTML = `
-    <a href="#">Click</a>
-  `;
-
-  const link = domassist.findOne('a', el);
-  const pos = link.getBoundingClientRect();
-
-  let clicks = 0;
-
-  domassist.once(link, 'click', e => {
-    clicks++;
-  });
-
-  page.sendEvent('click', pos.left + pos.width / 2, pos.top + pos.height / 2);
-  page.sendEvent('click', pos.left + pos.width / 2, pos.top + pos.height / 2);
-  page.sendEvent('click', pos.left + pos.width / 2, pos.top + pos.height / 2);
-
-  setTimeout(() => {
-    assert.equal(clicks, 1, 'Only fired once');
-    assert.end();
-  }, 500);
-});
-
 test('Events - hover', assert => {
   const el = domassist.findOne('#domassist');
 

test/once.test.js

@@ -0,0 +1,63 @@
+import domassist from '../domassist';
+import test from 'tape-rollup';
+
+const page = window.phantom.page;
+
+const teardown = (el) => {
+  while (el.firstChild) {
+    el.removeChild(el.firstChild);
+  }
+};
+
+test('Events - once with Element', assert => {
+  const el = domassist.findOne('#domassist');
+
+  el.innerHTML = `
+    <a href="#">Click</a>
+  `;
+
+  const link = domassist.findOne('a', el);
+  const pos = link.getBoundingClientRect();
+
+  let clicks = 0;
+
+  domassist.once(link, 'click', e => {
+    clicks++;
+  });
+
+  page.sendEvent('click', pos.left + pos.width / 2, pos.top + pos.height / 2);
+  page.sendEvent('click', pos.left + pos.width / 2, pos.top + pos.height / 2);
+  page.sendEvent('click', pos.left + pos.width / 2, pos.top + pos.height / 2);
+
+  setTimeout(() => {
+    assert.equal(clicks, 1, 'Element only fired once');
+    teardown(el);
+    assert.end();
+  }, 500);
+});
+
+test('Events - once with selector', assert => {
+  const el = domassist.findOne('#domassist');
+
+  el.innerHTML = `
+    <a href="#">Click</a>
+  `;
+  const link = domassist.findOne('a', el);
+  const pos = link.getBoundingClientRect();
+
+  let clicks = 0;
+
+  domassist.once('a', 'click', e => {
+    clicks++;
+  });
+
+  page.sendEvent('click', pos.left + pos.width / 2, pos.top + pos.height / 2);
+  page.sendEvent('click', pos.left + pos.width / 2, pos.top + pos.height / 2);
+  page.sendEvent('click', pos.left + pos.width / 2, pos.top + pos.height / 2);
+
+  setTimeout(() => {
+    assert.equal(clicks, 1, 'Selector only fired once');
+    teardown(el);
+    assert.end();
+  }, 500);
+});