diff --git a/_js/app.js b/_js/app.js index 44aa04163..921be9230 100644 --- a/_js/app.js +++ b/_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$/)) diff --git a/_js/behaviors/h3-section-list.js b/_js/behaviors/h3-section-list.js new file mode 100644 index 000000000..20a50aa0b --- /dev/null +++ b/_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 + }) + }) +}) diff --git a/_js/behaviors/main-body.js b/_js/behaviors/main-body.js new file mode 100644 index 000000000..287526915 --- /dev/null +++ b/_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) +}) diff --git a/_js/behaviors/no-preview.js b/_js/behaviors/no-preview.js index 15b15380b..4bf5fe67c 100644 --- a/_js/behaviors/no-preview.js +++ b/_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) } }) diff --git a/_js/initializers/onmount.js b/_js/initializers/onmount.js new file mode 100644 index 000000000..5e8787d09 --- /dev/null +++ b/_js/initializers/onmount.js @@ -0,0 +1,4 @@ +import ready from 'dom101/ready' +import onmount from 'onmount' + +ready(() => { onmount() }) diff --git a/_js/wrapify/index.js b/_js/wrapify/index.js new file mode 100644 index 000000000..d7ce38d0d --- /dev/null +++ b/_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: '
', + body: '
' + }) + + $h2sections.each(function () { + const $body = $(this).children('[data-js-h3-section-list]') + + groupify($body, { + tag: 'h3', + wrapper: '
', + 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 + } +} diff --git a/assets/2017/script.js b/assets/2017/script.js index d38be954c..8cefebabb 100644 --- a/assets/2017/script.js +++ b/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: '
', - body: '
' - }) - - $h2sections.each(function () { - const $body = $(this).children('[data-js-h3-section-list]') - - groupify($body, { - tag: 'h3', - wrapper: '
', - 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 */ diff --git a/package.json b/package.json index 0ef0eaf08..6251df806 100644 --- a/package.json +++ b/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" } diff --git a/yarn.lock b/yarn.lock index e3f2011b2..3fb6e26f2 100644 --- a/yarn.lock +++ b/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"