From 73ccc139a92ddcc13064c8dec14415c33e0e9ad3 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Wed, 25 Oct 2017 18:04:30 +0800
Subject: [PATCH] Begin implementing versus mode

---
 .../__snapshots__/index.test.js.snap          |  60 +++++++---
 _js/wrapify/__tests__/index.test.js           |  36 ++++--
 _js/wrapify/index.js                          |  26 ++++-
 dom.md                                        | 103 ++++++++++++++++++
 package.json                                  |   2 +-
 5 files changed, 197 insertions(+), 30 deletions(-)

diff --git a/_js/wrapify/__tests__/__snapshots__/index.test.js.snap b/_js/wrapify/__tests__/__snapshots__/index.test.js.snap
index 8a48b6043..6d0b1c098 100644
--- a/_js/wrapify/__tests__/__snapshots__/index.test.js.snap
+++ b/_js/wrapify/__tests__/__snapshots__/index.test.js.snap
@@ -213,24 +213,13 @@ exports[`simple usage 1`] = `
   >
     <h2>
       simple usage
-    </h2>
-    <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"
       >
@@ -246,7 +235,6 @@ exports[`simple usage 1`] = `
             (install)
           </p>
           
-
     
         </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>
+`;
diff --git a/_js/wrapify/__tests__/index.test.js b/_js/wrapify/__tests__/index.test.js
index 1b51f359d..b70dd37e6 100644
--- a/_js/wrapify/__tests__/index.test.js
+++ b/_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>
-`))
diff --git a/_js/wrapify/index.js b/_js/wrapify/index.js
index e2b93f589..340d5d7b2 100644
--- a/_js/wrapify/index.js
+++ b/_js/wrapify/index.js
@@ -37,13 +37,29 @@ function wrapifyH2 (root) {
   return groupify(root, {
     tag: 'h2',
     wrapperFn: () => createDiv({ class: 'h2-section' }),
-    bodyFn: () => createDiv({
-      class: 'body h3-section-list',
-      'data-js-h3-section-list': ''
-    })
+    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)
 
diff --git a/dom.md b/dom.md
index 3927f9d4b..fd6af26ee 100644
--- a/dom.md
+++ b/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>
diff --git a/package.json b/package.json
index e99648117..9c5829ab5 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,7 @@
   },
   "jest": {
     "snapshotSerializers": [
-      " <rootDir>/node_modules/jest-html"
+      "jest-html"
     ]
   }
 }