Move some behaviors into Webpack

_js/app.js

@@ -6,5 +6,10 @@ window.Prism = require('prismjs')
 require('sanitize.css')
 require('prismjs/plugins/line-highlight/prism-line-highlight.css')
 
+// Behaviors that need to go first
+require('./behaviors/main-body')
+
+// All the others
 function requireAll (r) { r.keys().forEach(r) }
+requireAll(require.context('./initializers/', true, /\.js$/))
 requireAll(require.context('./behaviors/', true, /\.js$/))

_js/behaviors/h3-section-list.js

@@ -0,0 +1,15 @@
+import $ from 'jquery'
+import Isotope from 'isotope-layout/dist/isotope.pkgd.js'
+
+/*
+ * Behavior: Isotope
+ */
+
+$(function () {
+  $('[data-js-h3-section-list]').each(function () {
+    var iso = new Isotope(this, {
+      itemSelector: '.h3-section',
+      transitionDuration: 0
+    })
+  })
+})

_js/behaviors/main-body.js

@@ -0,0 +1,11 @@
+import $ from 'jquery'
+import wrapify from '../wrapify'
+
+/*
+ * Behavior: Wrapping
+ */
+
+$(function () {
+  const $root = $('[data-js-main-body]')
+  wrapify($root)
+})

_js/behaviors/no-preview.js

@@ -1,11 +1,14 @@
 import $ from 'jquery'
+import ready from 'dom101/ready'
+import remove from 'dom101/remove'
+import onmount from 'onmount'
 
 /*
- * Behavior: [data-js-no-preview]
+ * Behavior: Things to remove when preview mode is on
  */
 
-$(function () {
+onmount('[data-js-no-preview]', function (b) {
   if (~window.location.search.indexOf('preview=1')) {
-    $('[data-js-no-preview]').remove()
+    remove(this)
   }
 })

_js/initializers/onmount.js

@@ -0,0 +1,4 @@
+import ready from 'dom101/ready'
+import onmount from 'onmount'
+
+ready(() => { onmount() })

_js/wrapify/index.js

@@ -0,0 +1,62 @@
+import $ from 'jquery'
+
+/*
+ * Wraps h2 sections into h2-section.
+ * Wraps h3 sections into h3-section.
+ */
+
+export default function wrapify ($root) {
+  const $h2sections = groupify($root, {
+    tag: 'h2',
+    wrapper: '<div class="h2-section">',
+    body: '<div class="body h3-section-list" data-js-h3-section-list>'
+  })
+
+  $h2sections.each(function () {
+    const $body = $(this).children('[data-js-h3-section-list]')
+
+    groupify($body, {
+      tag: 'h3',
+      wrapper: '<div class="h3-section">',
+      body: '<div class="body">'
+    })
+  })
+}
+
+/*
+ * Groups stuff
+ */
+
+export function groupify ($this, { tag, wrapper, body }) {
+  const $first = $this.children(':first-child')
+  let $result = $()
+
+  // Handle the markup before the first h2
+  if (!$first.is(tag)) {
+    const $sibs = $first.nextUntil(tag)
+    $result = $result.add(wrap($first, null, $first.add($sibs)))
+  }
+
+  $this.children(tag).each(function () {
+    const $sibs = $(this).nextUntil(tag)
+    const $heading = $(this)
+    $result = $result.add(wrap($heading, $heading, $sibs))
+  })
+
+  return $result
+
+  function wrap ($pivot, $first, $sibs) {
+    const $wrap = $(wrapper)
+    $wrap.addClass($pivot.attr('class'))
+    $pivot.before($wrap)
+
+    const $body = $(body)
+    $body.addClass($pivot.attr('class'))
+    $body.append($sibs)
+
+    if ($first) $wrap.append($first)
+    $wrap.append($body)
+
+    return $wrap
+  }
+}

assets/2017/script.js

@@ -1,25 +1,3 @@
-/*
- * Behavior: Wrapping
- */
-
-$(function () {
-  const $root = $('[data-js-main-body]')
-  wrapify($root)
-})
-
-/*
- * Behavior: Isotope
- */
-
-$(function () {
-  $('[data-js-h3-section-list]').each(function () {
-    var iso = new Isotope(this, {
-      itemSelector: '.h3-section',
-      transitionDuration: 0
-    })
-  })
-})
-
 /*
  * Behavior: Search
  */
@@ -251,67 +229,6 @@ function permutateWord (str) {
   return words
 }
 
-/*
- * Wraps h2 sections into h2-section.
- * Wraps h3 sections into h3-section.
- */
-
-function wrapify ($root) {
-  const $h2sections = groupify($root, {
-    tag: 'h2',
-    wrapper: '<div class="h2-section">',
-    body: '<div class="body h3-section-list" data-js-h3-section-list>'
-  })
-
-  $h2sections.each(function () {
-    const $body = $(this).children('[data-js-h3-section-list]')
-
-    groupify($body, {
-      tag: 'h3',
-      wrapper: '<div class="h3-section">',
-      body: '<div class="body">'
-    })
-  })
-}
-
-/*
- * Groups stuff
- */
-
-function groupify ($this, { tag, wrapper, body }) {
-  const $first = $this.children(':first-child')
-  let $result = $()
-
-  // Handle the markup before the first h2
-  if (!$first.is(tag)) {
-    const $sibs = $first.nextUntil(tag)
-    $result = $result.add(wrap($first, null, $first.add($sibs)))
-  }
-
-  $this.children(tag).each(function () {
-    const $sibs = $(this).nextUntil(tag)
-    const $heading = $(this)
-    $result = $result.add(wrap($heading, $heading, $sibs))
-  })
-
-  return $result
-
-  function wrap ($pivot, $first, $sibs) {
-    const $wrap = $(wrapper)
-    $wrap.addClass($pivot.attr('class'))
-    $pivot.before($wrap)
-
-    const $body = $(body)
-    $body.addClass($pivot.attr('class'))
-    $body.append($sibs)
-
-    if ($first) $wrap.append($first)
-    $wrap.append($body)
-
-    return $wrap
-  }
-}
-
 /*
  * Helper: minimal qs implementation
  */

package.json

@@ -23,8 +23,10 @@
     "prepublish": "webpack"
   },
   "dependencies": {
+    "dom101": "1.3.0",
     "isotope-layout": "3.0.4",
     "jquery": "3.2.1",
+    "onmount": "1.3.0",
     "prismjs": "1.8.1",
     "sanitize.css": "5.0.0"
   }

yarn.lock

@@ -1186,6 +1186,10 @@ diffie-hellman@^5.0.0:
     miller-rabin "^4.0.0"
     randombytes "^2.0.0"
 
+dom101@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/dom101/-/dom101-1.3.0.tgz#d7fca30686240171b6cf17c2e855d6a32fa2c9c9"
+
 domain-browser@^1.1.1:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
@@ -2229,6 +2233,10 @@ once@^1.3.0, once@^1.3.3:
   dependencies:
     wrappy "1"
 
+onmount@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/onmount/-/onmount-1.3.0.tgz#dcf6c3d8c26baa4294b53c38d066347b616ddd7e"
+
 os-browserify@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.2.1.tgz#63fc4ccee5d2d7763d26bbf8601078e6c2e0044f"