Move controller registration to components; out of article tag as we now can have e.g. citations outside of article in title

Author: Ludwig Schubert

examples/article.html

@@ -42,7 +42,7 @@
 </d-front-matter>
 <d-title>
   <figure style="grid-column: page; margin: 1rem 0;"><img src="momentum.png" style="width:100%; border: 1px solid rgba(0, 0, 0, 0.2);"/></figure>
-  <p>We often think of Momentum as a means of dampening oscillations and speeding up the iterations, leading to faster convergence. But it has other interesting behavior. It allows a larger range of step-sizes to be used, and creates its own oscillations. What is going on?</p>
+  <p>We often think of Momentum<d-cite key="mercier2011humans"></d-cite> as a means of dampening oscillations and speeding up the iterations, leading to faster convergence. But it has other interesting behavior. It allows a larger range of step-sizes to be used, and creates its own oscillations. What is going on?</p>
 </d-title>
 <d-article>
   <a class="marker" href="#section-1" id="section-1"><span>1</span></a>

src/components.js

@@ -2,7 +2,7 @@ import { Controller } from './controller';
 
 /* Transforms */
 import { makeStyleTag }    from './styles/styles';
-import { Polyfills, polyfills }       from './helpers/polyfills';
+import { Polyfills }       from './helpers/polyfills';
 
 /* Components */
 import { Abstract }        from './components/d-abstract';
@@ -48,7 +48,7 @@ const distillMain = function() {
   makeStyleTag(document);
   console.info('Runlevel 1: Static Distill styles have been added.');
   console.info('Runlevel 1->2.');
-  window.distillRunlevel = 2;
+  window.distillRunlevel += 1;
 
   /* 3. Register components */
   /* Article will register controller which takes control from there */
@@ -73,18 +73,29 @@ const distillMain = function() {
 
   console.info('Runlevel 2: Distill Template finished registering custom elements.');
   console.info('Runlevel 2->3.');
-  window.distillRunlevel = 3;
-  console.info('Distill Template initialisation complete.');
-  Controller.listeners.DOMContentLoaded();
+  window.distillRunlevel += 1;
 
+  /* 4. Register Controller listener functions */
+  for (const [functionName, callback] of Object.entries(Controller.listeners)) {
+    if (typeof callback === 'function') {
+      document.addEventListener(functionName, callback);
+    } else {
+      console.error('Runlevel 3: Controller listeners need to be functions!');
+    }
+  }
+  console.info('Runlevel 3: We can now listen to controller events.');
+  console.info('Runlevel 3->4.');
+  window.distillRunlevel += 1;
+
+  console.info('Runlevel 4: Distill Template initialisation complete.');
 };
 
 window.distillRunlevel = 0;
 /* 0. Check browser feature support; synchronously polyfill if needed */
 if (Polyfills.browserSupportsAllFeatures()) {
   console.info('Runlevel 0: No need for polyfills.');
   console.info('Runlevel 0->1.');
-  window.distillRunlevel = 1;
+  window.distillRunlevel += 1;
   distillMain();
 } else {
   console.info('Runlevel 0: Distill Template is loading polyfills.');

src/components/d-article.js

@@ -1,5 +1,5 @@
 // import { Template } from '../mixins/template';
-import { Controller } from '../controller';
+// import { Controller } from '../controller';
 
 const isOnlyWhitespace = /^\s*$/;
 
@@ -29,20 +29,4 @@ export class Article extends HTMLElement {
     }).observe(this, {childList: true});
   }
 
-  connectedCallback() {
-    document.onreadystatechange = function () {
-      console.log('onreadystatechange:');
-      console.log(document.readyState);
-    };
-    console.info('Article tag connected, we can now listen to controller events.');
-    console.info('Runlevel 3->4.');
-    for (const [functionName, callback] of Object.entries(Controller.listeners)) {
-      if (typeof callback === 'function') {
-        document.addEventListener(functionName, callback);
-      } else {
-        console.error('Controller listeners need to be functions!');
-      }
-    }
-  }
-
 }

src/components/d-hover-box.js

@@ -52,7 +52,7 @@ export class HoverBox extends T(HTMLElement) {
   }
 
   listen(element) {
-    console.log(element)
+    // console.log(element)
     this.bindDivEvents(this);
     this.bindTriggerEvents(element);
     // this.style.display = "block";

src/controller.js

@@ -6,6 +6,10 @@ import optionalComponents from './transforms/optional-components';
 
 const frontMatter = new FrontMatter();
 
+function domContentLoaded() {
+  return ['interactive', 'complete'].indexOf(document.readyState) !== -1;
+}
+
 export const Controller = {
 
   frontMatter: frontMatter,
@@ -120,7 +124,7 @@ export const Controller = {
       }
 
       const prerendered = document.body.hasAttribute('distill-prerendered');
-      if (!prerendered) {
+      if (!prerendered && domContentLoaded()) {
         optionalComponents(document, frontMatter);
 
         const appendix = document.querySelector('distill-appendix');
@@ -141,18 +145,18 @@ export const Controller = {
     },
 
     DOMContentLoaded() {
-      if (Controller.loaded || ['interactive', 'complete'].indexOf(document.readyState) === -1) {
+      if (Controller.loaded || !domContentLoaded()) {
         return;
       } else {
         Controller.loaded = true;
-        console.log('Controller running DOMContentLoaded');
+        console.log('Runlevel 4: Controller running DOMContentLoaded');
       }
 
       const frontMatterTag = document.querySelector('d-front-matter');
       const data = parseFrontmatter(frontMatterTag);
       Controller.listeners.onFrontMatterChanged({detail: data});
 
-      // console.debug('Resolving "citations" dependency due to initial DOM load.');
+      // Resolving "citations" dependency due to initial DOM load
       frontMatter.citations = collect_citations();
       frontMatter.citationsCollected = true;
       for (const waitingCallback of Controller.waitingOn.citations.slice()) {