modify() method to add/change multiple properties at once. (#25)

domassist.default.js

@@ -17,6 +17,7 @@ import ready from './lib/ready';
 import toArray from './lib/toArray';
 import styles from './lib/styles';
 import html from './lib/html';
+import modify from './lib/modify';
 
 export default {
   addClass,
@@ -38,4 +39,5 @@ export default {
   toArray,
   styles,
   html,
+  modify,
 };

domassist.js

@@ -17,4 +17,5 @@ export { default as ready } from './lib/ready';
 export { default as toArray } from './lib/toArray';
 export { default as styles } from './lib/styles';
 export { default as html } from './lib/html';
+export { default as modify } from './lib/modify';
 export { default } from './domassist.default';

lib/modify.js

@@ -0,0 +1,41 @@
+import find from './find';
+import addClass from './addClass';
+import removeClass from './removeClass';
+import html from './html';
+// import addAttrs from './addAttrs';
+import on from './on';
+import styles from './styles';
+
+function bindEvents(el, events) {
+  Object.keys(events).forEach((event) => {
+    on(el, event, events[event]);
+  });
+}
+
+function modify(selector, params) {
+  if (Array.isArray(selector)) {
+    selector.forEach((item) => modify(item, params));
+  }
+  const modules = {
+    addClass,
+    removeClass,
+    html,
+    events: on,
+    styles,
+  };
+  const els = find(selector);
+  if (els.length) {
+    els.forEach((el) => {
+      Object.keys(params).forEach((param, index) => {
+        if (param in modules) {
+          if (param === 'events') {
+            bindEvents(el, params[param]);
+          }
+          modules[param](el, params[param]);
+        }
+      });
+    });
+  }
+}
+
+export default modify;

test/domassist.test.js

@@ -7,6 +7,7 @@ import './find.test.js';
 import './on.test.js';
 import './off.test.js';
 import './html.test.js';
+import './modify.test.js';
 
 const page = window.phantom.page;
 

test/modify.test.js

@@ -0,0 +1,109 @@
+import domassist from '../domassist';
+import test from 'tape-rollup';
+
+// const setup = (total) => {
+//   const frag = document.createDocumentFragment();
+//   for (let i = 0; i < total; i += 1) {
+//     const div = document.createElement('div');
+//     domassist.addClass(div, 'test-divs');
+//     domassist.addClass(div, `div-${i}`);
+//     const p = document.createElement('p');
+//     p.innerHTML = `paragraph-${1}`;
+//     div.appendChild(p);
+//     frag.appendChild(div);
+//   }
+//   return frag;
+// };
+//
+const teardown = (el) => {
+  while (el.firstChild) {
+    el.removeChild(el.firstChild);
+  }
+};
+
+const page = window.phantom.page;
+
+test('modify - add class', assert => {
+  const el = domassist.findOne('#domassist');
+  domassist.modify(el, {
+    addClass: 'testing',
+  });
+  assert.ok(domassist.hasClass(el, 'testing'), 'Class added');
+  assert.end();
+});
+
+test('modify - remove class', assert => {
+  const el = domassist.findOne('#domassist');
+  domassist.modify(el, {
+    addClass: 'testing',
+  });
+  domassist.modify(el, {
+    removeClass: 'testing'
+  });
+  assert.notOk(domassist.hasClass(el, 'testing'), 'Class removed');
+  assert.end();
+});
+//
+// test('modify - attributes', assert => {
+//   const el = domassist.findOne('#domassist');
+// });
+//
+test('modify - html', assert => {
+  const el = domassist.findOne('#domassist');
+  domassist.modify(el, {
+    html: 'hello world'
+  });
+  assert.equal(el.innerHTML, 'hello world', 'HTML added');
+  assert.end();
+});
+//
+test('modify - events', assert => {
+  // assert.plan(5);
+  const el = domassist.findOne('#domassist');
+  el.innerHTML = `
+    <a style="display: block; height: 100px; width: 100px;" href="#">Click</a>
+  `;
+  const link = domassist.findOne('a');
+  const pos = link.getBoundingClientRect();
+  domassist.modify(link, {
+    events: {
+      click: (e) => {
+        assert.ok(e instanceof MouseEvent, 'Click event fired');
+      },
+      mouseenter: (e) => {
+        assert.ok(e instanceof MouseEvent, 'Enter fired');
+        assert.equal(e.type, 'mouseenter', 'Correct event');
+      },
+      mouseleave: (e) => {
+        assert.ok(e instanceof MouseEvent, 'Leave fired');
+        assert.equal(e.type, 'mouseleave', 'Correct event');
+        assert.end();
+      }
+    }
+  });
+
+  page.sendEvent('click', pos.left + pos.width / 2, pos.top + pos.height / 2);
+  page.sendEvent('mousemove', pos.left + pos.width / 2, pos.top + pos.height / 2);
+  page.sendEvent('mousemove', pos.left + pos.width + 100, pos.top + pos.height + 100);
+});
+test('modify - styles', assert => {
+  const el = domassist.findOne('#domassist');
+  el.innerHTML = `
+    <p>p1</p>
+    <p>p2</p>
+  `;
+  const els = domassist.find('p');
+  domassist.modify(els, {
+    styles: {
+      width: '100px',
+      height: '150px',
+    }
+  });
+
+  assert.equal(els[0].style.width, '100px', 'width on first el set correctly');
+  assert.equal(els[0].style.height, '150px', 'height on first el set correctly');
+  assert.equal(els[1].style.width, '100px', 'width on second el set correctly');
+  assert.equal(els[1].style.height, '150px', 'height on second el set correctly');
+  teardown(el);
+  assert.end();
+});