always add anchors to digest content h2s

for #293

src/js/digest.js

@@ -5,8 +5,6 @@ import SmoothScroll from './smooth-scroll';
 import { $, $$ } from './utils/dom';
 import MenuSpy from './menu-spy';
 
-import { isLargeUp } from './utils/media';
-
 const DigestNav = ({ items = [] }) => {
   return (
     <nav className="digest" aria-labelledby="midd-digest-label">
@@ -28,79 +26,81 @@ const DigestNav = ({ items = [] }) => {
   );
 };
 
-class Digest {
-  constructor(elem) {
-    this.elem = elem;
+function addHeadingAnchors() {
+  // Store the selector since we need to manually update headings
+  // as well as apply AnochrJS to them.
+  const headingSelector = '[data-digest-content] h2';
+
+  // Get all headings in the data-digest-content
+  const headings = $$(headingSelector);
 
-    this.init();
+  if (!headings.length) {
+    return null;
   }
 
-  init() {
-    // Store the selector since we need to manually update headings
-    // as well as apply AnochrJS to them.
-    const headingSelector = '[data-digest-content] h2';
-
-    // Get all headings in the data-digest-content
-    const headings = $$(headingSelector);
-
-    // create a new instance of anchorjs which creates the anchor links within each heading
-    const anchors = new AnchorJS();
-    anchors.add(headingSelector);
-
-    // ensure all heading ids start with a-z
-    headings.forEach(heading => {
-      // if heading text begins with a number, we need to prefix some a-z text
-      // so selectors in digest nav are valid
-      // check if the first char is a number
-      if (!isNaN(heading.id.charAt(0))) {
-        const sectionId = 'section-' + heading.id;
-        const id = sectionId.replace(/&nbsp;/g, '-');
-        heading.id = id;
-        const anchor = $('a', heading);
-        anchor.href = '#' + id;
-      }
-    });
-
-    render(
-      <DigestNav
-        // convert nodelist into array for items prop
-        items={[].slice.call(headings)}
-      />,
-      this.elem
-    );
-
-    const menuSpy = new MenuSpy(this.elem);
-
-    // TODO: don't tie the js-headroom to this widget as the element.
-    // we should allow for a custom selector
-    const headroom = $('.js-headroom');
-
-    // Offset by sticky header on schools or base offset on office site.
-    // This is a function call instead of static value since header height
-    // changes across breakpoints.
-    const baseOffset = 50;
-    const getOffset = () => (headroom ? headroom.offsetHeight : baseOffset);
-
-    const smoothScroll = new SmoothScroll('.digest__link', {
-      offset: getOffset,
-      replaceState: true
-    });
-
-    if (location.hash) {
-      const el = $(location.hash);
-
-      // fake jump to elem since headings don't have IDs until js is loaded
-      if (el) {
-        setTimeout(() => {
-          el.scrollIntoView();
-        }, 300);
-      }
+  // create a new instance of anchorjs which creates the anchor links within each heading
+  const anchors = new AnchorJS();
+  anchors.add(headingSelector);
+
+  // ensure all heading ids start with a-z
+  headings.forEach(heading => {
+    // if heading text begins with a number, we need to prefix some a-z text
+    // so selectors in digest nav are valid
+    // check if the first char is a number
+    if (!isNaN(heading.id.charAt(0))) {
+      const sectionId = 'section-' + heading.id;
+      const id = sectionId.replace(/&nbsp;/g, '-');
+      heading.id = id;
+      const anchor = $('a', heading);
+      anchor.href = '#' + id;
+    }
+  });
+
+  return headings;
+}
+
+function renderDigestNav(elem, headings) {
+  render(
+    <DigestNav
+      // convert nodelist into array for items prop
+      items={[].slice.call(headings)}
+    />,
+    elem
+  );
+
+  const menuSpy = new MenuSpy(elem);
+
+  // TODO: don't tie the js-headroom to this widget as the element.
+  // we should allow for a custom selector
+  const headroom = $('.js-headroom');
+
+  // Offset by sticky header on schools or base offset on office site.
+  // This is a function call instead of static value since header height
+  // changes across breakpoints.
+  const baseOffset = 50;
+  const getOffset = () => (headroom ? headroom.offsetHeight : baseOffset);
+
+  const smoothScroll = new SmoothScroll('.digest__link', {
+    offset: getOffset,
+    replaceState: true
+  });
+
+  if (location.hash) {
+    const el = $(location.hash);
+
+    // fake jump to elem since headings don't have IDs until js is loaded
+    if (el) {
+      setTimeout(() => {
+        el.scrollIntoView();
+      }, 300);
     }
   }
 }
 
-const elems = $$('[data-digest-nav]');
+const headings = addHeadingAnchors();
 
-elems.forEach(elem => new Digest(elem));
+const elems = $$('[data-digest-nav]');
 
-export default Digest;
+elems.forEach(elem => {
+  renderDigestNav(elem, headings);
+});