134 lines
2.7 KiB
JavaScript
134 lines
2.7 KiB
JavaScript
import $ from 'jquery'
|
|
import matches from 'dom101/matches'
|
|
import addClass from 'dom101/add-class'
|
|
|
|
/*
|
|
* Wraps h2 sections into h2-section.
|
|
* Wraps h3 sections into h3-section.
|
|
*/
|
|
|
|
export default function wrapify (root) {
|
|
const $root = $(root)
|
|
|
|
const $h2sections = groupify(root, {
|
|
tag: 'h2',
|
|
wrapper: '<div class="h2-section">',
|
|
wrapperFn: () => {
|
|
const d = document.createElement('div')
|
|
d.className = 'h2-section'
|
|
return d
|
|
},
|
|
bodyFn: () => {
|
|
const d = document.createElement('div')
|
|
d.className = 'body h3-section-list'
|
|
d.setAttribute('data-js-h3-section-list', '')
|
|
return d
|
|
}
|
|
})
|
|
|
|
$($h2sections).each(function () {
|
|
const $body = $(this).children('[data-js-h3-section-list]')
|
|
|
|
groupify($body[0], {
|
|
tag: 'h3',
|
|
wrapperFn: () => {
|
|
const d = document.createElement('div')
|
|
d.className = 'h3-section'
|
|
return d
|
|
},
|
|
bodyFn: () => {
|
|
const d = document.createElement('div')
|
|
d.className = 'body'
|
|
return d
|
|
}
|
|
})
|
|
})
|
|
}
|
|
|
|
/*
|
|
* Groups stuff
|
|
*/
|
|
|
|
export function groupify (el, { tag, wrapperFn, bodyFn }) {
|
|
const first = el.children[0]
|
|
const $first = $(first)
|
|
let result = []
|
|
|
|
// Handle the markup before the first h2
|
|
if (first && !matches(first, tag)) {
|
|
const sibs = nextUntil(first, tag)
|
|
result.push(wrap(first, null, [ $first[0], ...sibs ]))
|
|
}
|
|
|
|
// Find all h3's inside it
|
|
const children = findChildren(el, tag)
|
|
|
|
children.forEach(child => {
|
|
const sibs = nextUntil(child, tag)
|
|
result.push(wrap(child, child, sibs))
|
|
})
|
|
|
|
return result
|
|
|
|
function wrap (pivot, first, sibs) {
|
|
const wrap = wrapperFn()
|
|
|
|
const pivotClass = pivot.className
|
|
if (pivotClass) addClass(wrap, pivotClass)
|
|
before(pivot, wrap)
|
|
|
|
const body = bodyFn()
|
|
if (pivotClass) addClass(body, pivotClass)
|
|
appendMany(body, sibs)
|
|
|
|
if (first) wrap.appendChild(first)
|
|
wrap.appendChild(body)
|
|
|
|
return wrap
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Just like jQuery.append
|
|
*/
|
|
|
|
function appendMany (el, children) {
|
|
children.forEach(child => { el.appendChild(child) })
|
|
}
|
|
|
|
/*
|
|
* Just like jQuery.nextUntil
|
|
*/
|
|
|
|
function nextUntil (el, selector) {
|
|
const nextEl = el.nextSibling
|
|
return nextUntilTick(nextEl, selector, [])
|
|
}
|
|
|
|
function nextUntilTick (el, selector, acc) {
|
|
if (!el) return acc
|
|
|
|
const isMatch = matches(el, selector)
|
|
if (isMatch) return acc
|
|
|
|
return nextUntilTick(el.nextSibling, selector, [ ...acc, el ])
|
|
}
|
|
|
|
/*
|
|
* Just like jQuery.before
|
|
*/
|
|
|
|
function before (reference, newNode) {
|
|
reference.parentNode.insertBefore(newNode, reference)
|
|
}
|
|
|
|
/*
|
|
* Like jQuery.children('selector')
|
|
*/
|
|
|
|
function findChildren (el, selector) {
|
|
return [].slice.call(el.children)
|
|
.filter(child => matches(child, selector))
|
|
}
|
|
|