Begin implementing versus mode

_js/wrapify/__tests__/__snapshots__/index.test.js.snap

@@ -217,20 +217,9 @@ exports[`simple usage 1`] = `
     <div
       class="body h3-section-list"
       data-js-h3-section-list=""
-    />
-  </div>
-  <div
-    class="h2-section"
     >
-    <h2>
       
     
-    
-    </h2>
-    <div
-      class="body h3-section-list"
-      data-js-h3-section-list=""
-    >
       <div
         class="h3-section"
       >
@@ -247,7 +236,6 @@ exports[`simple usage 1`] = `
           </p>
           
     
-    
         </div>
       </div>
       <div
@@ -272,3 +260,47 @@ exports[`simple usage 1`] = `
   </div>
 </div>
 `;
+
+exports[`versus mode 1`] = `
+<div>
+  
+    
+  <div
+    class="h2-section -versus"
+  >
+    <h2
+      class="-versus"
+    >
+      versus
+    </h2>
+    <div
+      class="body -versus"
+    >
+      
+
+    
+      <h3>
+        install
+      </h3>
+      
+    
+      <p>
+        (install)
+      </p>
+      
+
+    
+      <h3>
+        usage
+      </h3>
+      
+    
+      <p>
+        (usage)
+      </p>
+      
+  
+    </div>
+  </div>
+</div>
+`;

_js/wrapify/__tests__/index.test.js

@@ -4,11 +4,9 @@ import $ from 'jquery'
 
 it('simple usage', run(`
   <div>
-    <h2>simple usage<h2>
+    <h2>simple usage</h2>
-
     <h3>install</h3>
     <p>(install)</p>
-
     <h3>usage</h3>
     <p>(usage)</p>
   </div>
@@ -46,6 +44,31 @@ it('multiple h2s', run(`
   </div>
 `))
 
+it('h2 + pre', run(`
+  <div>
+    <h2>heading</h2>
+    <pre class='language-markdown'>(code)</pre>
+  </div>
+`))
+
+it('versus mode', run(`
+  <div>
+    <h2 class='-versus'>versus</h2>
+
+    <h3>install</h3>
+    <p>(install)</p>
+
+    <h3>usage</h3>
+    <p>(usage)</p>
+  </div>
+`, $div => {
+  expect($div.find('h2 + div.body.-versus').length).toEqual(1)
+}))
+
+/*
+ * Helper
+ */
+
 function run (input, fn) {
   return function () {
     const $div = $(input)
@@ -54,10 +77,3 @@ function run (input, fn) {
     if (fn) fn($div)
   }
 }
-
-it('h2 + pre', run(`
-  <div>
-    <h2>heading</h2>
-    <pre class='language-markdown'>(code)</pre>
-  </div>
-`))

_js/wrapify/index.js

@@ -37,13 +37,29 @@ function wrapifyH2 (root) {
   return groupify(root, {
     tag: 'h2',
     wrapperFn: () => createDiv({ class: 'h2-section' }),
-    bodyFn: () => createDiv({
+    bodyFn: (pivot) => {
+      if (isExcempted(pivot)) {
+        return createDiv({
+          class: 'body'
+        })
+      } else {
+        return createDiv({
           class: 'body h3-section-list',
           'data-js-h3-section-list': ''
         })
+      }
+    }
   })
 }
 
+/**
+ * Checks if an H2 is excempted from formatting its descendant h3's
+ */
+
+function isExcempted (h2) {
+  return h2.classList.contains('-versus')
+}
+
 /**
  * Wraps h3 sections into h3-section.
  * Creates and HTML structure like so:
@@ -98,7 +114,7 @@ export function groupify (el, { tag, wrapperFn, bodyFn }) {
     if (pivotClass) addClass(wrap, pivotClass)
     before(pivot, wrap)
 
-    const body = bodyFn()
+    const body = bodyFn(pivot)
     if (pivotClass) addClass(body, pivotClass)
     appendMany(body, sibs)
 

dom.md

@@ -248,6 +248,106 @@ $(el).focus()
 el.focus()
 ```
 
+## DOM operations
+{: .-one-column}
+
+### Remove
+
+```js
+$(el).remove()
+```
+
+```js
+el.parentNode.removeChild(el)
+```
+
+### Before
+
+```js
+$(refEl).before(newEl)
+```
+
+```js
+refEl.parentNode.insertBefore(newEl, refEl)
+```
+
+### After
+
+```js
+$(refEl).after(newEl)
+```
+
+```js
+refEl.parentNode.insertBefore(newEl, refEl.nextSibling)
+```
+
+### Before/after (HTML)
+
+```js
+$(el).before('<span></span>')
+$(el).after('<span></span>')
+```
+
+```js
+el.insertAdjacentHTML('beforebegin', '<span></span>')
+el.insertAdjacentHTML('afterend', '<span></span>')
+```
+
+### Set text
+
+```js
+$(el).text('hello')
+```
+
+```js
+el.textContent = 'hello'
+```
+
+### Get text
+
+```js
+$(el).text()
+```
+
+```js
+el.textContent
+```
+
+<!-- needs polyfill for IE8 below -->
+
+## Events
+{: .-one-column}
+
+### Attach event
+
+```js
+$(el).on('click', (event) => {
+  ···
+})
+```
+
+```js
+el.addEventListener('click', (event) => {
+})
+```
+
+<!-- needs polyfill for IE8 below -->
+
+### Trigger
+
+```js
+$(el).trigger('click')
+```
+
+```js
+var ev = document.createEvent('HTMLEvents')
+ev.initEvent('click', true, true)
+el.dispatchEvent(ev)
+```
+
+<!-- See: [document.createEvent](https://developer.mozilla.org/en-US/docs/Web/API/Document/createEvent) -->
+
+
 <style>
 .h3-section .body {
 display: flex;
@@ -261,4 +361,7 @@ background: #faf7ff;
 .h3-section .body > pre ~ p {
 display: none;
 }
+.h3-section h3 {
+display: none;
+}
 </style>

package.json

@@ -53,7 +53,7 @@
   },
   "jest": {
     "snapshotSerializers": [
-      " <rootDir>/node_modules/jest-html"
+      "jest-html"
     ]
   }
 }