Fix up more behaviors

_js/behaviors/dismiss.js

@@ -3,6 +3,7 @@ import remove from 'dom101/remove'
 import on from 'dom101/on'
 import { getData } from '../helpers/data'
 import onmount from 'onmount'
+import * as Dismiss from '../helpers/dismiss'
 
 /**
  * Dismiss button
@@ -11,7 +12,7 @@ import onmount from 'onmount'
 onmount('[data-js-dismiss]', function () {
   const parent = closest(this, '[data-js-dismissable]')
   const dismissable = getData(parent, 'js-dismissable')
-  const id = dismissable && dismissable.id || ''
+  const id = (dismissable && dismissable.id) || ''
 
   on(this, 'click', e => {
     Dismiss.setDismissed(id)

_js/behaviors/h3-section-list.js

@@ -1,5 +1,8 @@
+/* eslint-disable no-new */
+
 import $ from 'jquery'
 import Isotope from 'isotope-layout/dist/isotope.pkgd.js'
+import onmount from 'onmount'
 
 /*
  * Ensure that main-body is evaluated first
@@ -11,11 +14,9 @@ import './main-body'
  * Behavior: Isotope
  */
 
-$(function () {
-  $('[data-js-h3-section-list]').each(function () {
-    var iso = new Isotope(this, {
-      itemSelector: '.h3-section',
-      transitionDuration: 0
-    })
+onmount('[data-js-h3-section-list]', function () {
+  new Isotope(this, {
+    itemSelector: '.h3-section',
+    transitionDuration: 0
   })
 })

_js/behaviors/main-body.js

@@ -1,11 +1,12 @@
-import $ from 'jquery'
+import onmount from 'onmount'
 import wrapify from '../wrapify'
+import ready from 'dom101/ready'
 
-/*
+/**
  * Behavior: Wrapping
  */
 
-$(function () {
-  const $root = $('[data-js-main-body]')
-  wrapify($root)
+ready(() => {
+  const body = document.querySelector('[data-js-main-body]')
+  if (body) wrapify(body)
 })

_js/behaviors/no-preview.js

@@ -1,5 +1,3 @@
-import $ from 'jquery'
-import ready from 'dom101/ready'
 import remove from 'dom101/remove'
 import onmount from 'onmount'
 import addClass from 'dom101/add-class'

_js/behaviors/search-form.js

@@ -0,0 +1,17 @@
+import onmount from 'onmount'
+import on from 'dom101/on'
+
+/**
+ * Submitting the search form
+ */
+
+onmount('[data-js-search-form]', function () {
+  on(this, 'submit', e => {
+    e.preventDefault()
+
+    const link = document.querySelector('a[data-search-index]:visible')
+    const href = link && link.getAttribute('href')
+
+    if (href) window.location = href
+  })
+})

_js/behaviors/search-input.js

@@ -0,0 +1,24 @@
+import $ from 'jquery'
+import onmount from 'onmount'
+import * as Search from '../helpers/search'
+import qs from '../helpers/qs'
+
+onmount('[data-js-search-input]', function () {
+  const $this = $(this)
+
+  $this.on('input', () => {
+    const val = $this.val()
+
+    if (val === '') {
+      Search.showAll()
+    } else {
+      Search.show(val)
+    }
+  })
+
+  const query = (qs(window.location.search) || {}).q
+  if (query && query.length) {
+    $this.val(query)
+    Search.show(query)
+  }
+})

_js/behaviors/search.js

@@ -1,92 +0,0 @@
-import $ from 'jquery'
-import * as Search from '../helpers/search'
-
-/*
- * Behavior: Search
- */
-
-$(function () {
-  // Propagate item search indices to headers
-  $('[data-js-searchable-header]').each(function () {
-    const $this = $(this)
-    const $els = $this
-      .nextUntil('[data-js-searchable-header]')
-      .filter('[data-search-index]')
-
-    const keywords = $els
-      .map(function () { return $(this).attr('data-search-index') })
-      .get()
-      .join(' ')
-      .split(' ')
-
-    $this.attr('data-search-index', keywords.join(' '))
-  })
-})
-
-/*
- * Behavior: search input
- */
-
-$(function () {
-  $('[data-js-search-input]').each(function () {
-    const $this = $(this)
-    const val = $this.val()
-
-    $this.on('input', () => {
-      const val = $this.val()
-
-      if (val === '') {
-        Search.showAll()
-      } else {
-        Search.show(val)
-      }
-    })
-
-    const query = (qs(window.location.search) || {}).q
-    if (query && query.length) {
-      $this.val(query)
-      Search.show(query)
-    }
-  })
-
-  $('[data-js-search-form]').each(function () {
-    const $this = $(this)
-
-    $this.on('submit', e => {
-      e.preventDefault()
-      const href = $('a[data-search-index]:visible').eq(0).attr('href')
-      if (href) window.location = href
-    })
-  })
-})
-
-/*
- * Helper for splitting to words
- */
-
-function splitwords (str) {
-  const words = str.toLowerCase()
-    .split(/[ \/\-_]/)
-    .filter(k => k && k.length !== 0)
-
-  return words
-}
-
-/*
- * Helper: minimal qs implementation
- */
-
-function qs (search) {
-  search = search.substr(1)
-  const parts = search.split('&').map(p => p.split('='))
-  return parts.reduce((result, part) => {
-    result[part[0]] = qsdecode(part[1])
-    return result
-  }, {})
-}
-
-function qsdecode (string) {
-  if (!string) string = ''
-  string = string.replace(/\+/g, ' ')
-  return string
-}

_js/behaviors/searchable-header.js

@@ -0,0 +1,24 @@
+import onmount from 'onmount'
+import $ from 'jquery'
+
+// Ensure that search-index is set first
+import './searchable-item'
+
+/**
+ * Propagate item search indices to headers
+ */
+
+onmount('[data-js-searchable-header]', function () {
+  const $this = $(this)
+  const $els = $this
+    .nextUntil('[data-js-searchable-header]')
+    .filter('[data-search-index]')
+
+  const keywords = $els
+    .map(function () { return $(this).attr('data-search-index') })
+    .get()
+    .join(' ')
+    .split(' ')
+
+  $this.attr('data-search-index', keywords.join(' '))
+})

_js/helpers/__tests__/qs.test.js

@@ -0,0 +1,21 @@
+/* eslint-env jest */
+import qs from '../qs'
+
+describe('qs()', () => {
+  test('basic', run({
+    input: '?preview=1',
+    output: { preview: '1' }
+  }))
+
+  test('two fragments', run({
+    input: '?a=1&b=2',
+    output: { a: '1', b: '2' }
+  }))
+
+  function run ({ input, output }) {
+    return function () {
+      const result = qs(input)
+      expect(result).toEqual(output)
+    }
+  }
+})

_js/helpers/inject_disqus.js

@@ -6,9 +6,9 @@
  */
 
 export default function injectDisqus (host) {
-  var d = document, s = d.createElement('script')
+  const d = document
+  const s = d.createElement('script')
   s.src = 'https://' + host + '/embed.js'
   s.setAttribute('data-timestamp', +new Date())
   ;(d.head || d.body).appendChild(s)
 }
-

_js/helpers/qs.js

@@ -0,0 +1,18 @@
+/*
+ * Helper: minimal qs implementation
+ */
+
+export default function qs (search) {
+  search = search.substr(1)
+  const parts = search.split('&').map(p => p.split('='))
+  return parts.reduce((result, part) => {
+    result[part[0]] = qsdecode(part[1])
+    return result
+  }, {})
+}
+
+export function qsdecode (string) {
+  if (!string) string = ''
+  string = string.replace(/\+/g, ' ')
+  return string
+}

_js/wrapify/index.js

@@ -5,7 +5,8 @@ import $ from 'jquery'
  * Wraps h3 sections into h3-section.
  */
 
-export default function wrapify ($root) {
+export default function wrapify (root) {
+  const $root = $(root)
   const $h2sections = groupify($root, {
     tag: 'h2',
     wrapper: '<div class="h2-section">',

_support/webpack.config.js

@@ -17,8 +17,7 @@ module.exports = {
         use: [
           { loader: 'babel-loader' }
         ]
-      }
-      ,
+      },
       {
         test: /\.css$/,
         use: [

package.json

@@ -7,15 +7,22 @@
   "license": "MIT",
   "devDependencies": {
     "babel-core": "6.26.0",
+    "babel-eslint": "8.0.1",
+    "babel-jest": "21.2.0",
     "babel-loader": "7.1.2",
     "babel-preset-env": "1.6.0",
     "css-loader": "0.28.7",
+    "eslint-plugin-flowtype": "2.37.0",
+    "jest": "21.2.1",
+    "prettier-standard": "7.0.1",
+    "standard": "10.0.3",
     "style-loader": "0.18.2",
     "webpack": "3.6.0"
   },
   "scripts": {
     "dev": "webpack --watch --progress --colors",
-    "prepublish": "webpack"
+    "prepublish": "webpack",
+    "test": "jest"
   },
   "dependencies": {
     "babel-polyfill": "6.26.0",
@@ -26,5 +33,14 @@
     "onmount": "1.3.0",
     "prismjs": "1.8.1",
     "sanitize.css": "5.0.0"
+  },
+  "standard": {
+    "parser": "babel-eslint",
+    "ignore": [
+      "assets/script.js"
+    ],
+    "plugins": [
+      "flowtype"
+    ]
   }
 }