2.2.10

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "distill-template",
-  "version": "2.2.8",
+  "version": "2.2.10",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "distill-template",
-  "version": "2.2.8",
+  "version": "2.2.10",
   "description": "Template for creating Distill articles.",
   "main": "dist/template.v2.js",
   "bin": {

src/components.js

@@ -50,8 +50,20 @@ const distillMain = function() {
   console.info('Runlevel 1->2.');
   window.distillRunlevel += 1;
 
-  /* 3. Register components */
+  /* 3. Register Controller listener functions */
-  /* Article will register controller which takes control from there */
+  /* Needs to happen before components to their connected callbacks have a controller to talk to. */
+  for (const [functionName, callback] of Object.entries(Controller.listeners)) {
+    if (typeof callback === 'function') {
+      document.addEventListener(functionName, callback);
+    } else {
+      console.error('Runlevel 2: Controller listeners need to be functions!');
+    }
+  }
+  console.info('Runlevel 2: We can now listen to controller events.');
+  console.info('Runlevel 2->3.');
+  window.distillRunlevel += 1;
+
+  /* 4. Register components */
   const components = [
     Abstract, Appendix, Article, Bibliography, Byline, Cite, CitationList, Code,
     Footnote, FootnoteList, FrontMatter, HoverBox, Title, DMath, References, TOC, Figure,
@@ -71,22 +83,14 @@ const distillMain = function() {
     customElements.define(component.is, component);
   }
 
-  console.info('Runlevel 2: Distill Template finished registering custom elements.');
+  console.info('Runlevel 3: Distill Template finished registering custom elements.');
-  console.info('Runlevel 2->3.');
-  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;
 
+  // If template was added after DOMContentLoaded we may have missed that event.
+  // Controller will check for that case, so trigger the event explicitly:
+  Controller.listeners.DOMContentLoaded();
+
   console.info('Runlevel 4: Distill Template initialisation complete.');
 };
 

src/controller.js

@@ -145,7 +145,11 @@ export const Controller = {
     },
 
     DOMContentLoaded() {
-      if (Controller.loaded || !domContentLoaded()) {
+      if (Controller.loaded) {
+        console.warn('Controller received DOMContentLoaded but was already loaded!');
+        return;
+      } else if (!domContentLoaded()) {
+        console.warn('Controller received DOMContentLoaded before appropriate document.readyState!');
         return;
       } else {
         Controller.loaded = true;