2.2.9

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>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "distill-template",
-  "version": "2.2.5",
+  "version": "2.2.9",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -3987,11 +3987,11 @@
       }
     },
     "katex": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/katex/-/katex-0.7.1.tgz",
-      "integrity": "sha1-BrtSmO+tBeHnIoA1uo4VkfMGG48=",
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.8.3.tgz",
+      "integrity": "sha512-0VKw+G/wvgLKMy4fhhKdPGjXehYF3l3PBRdzkvBivK5wMtAH9xRHImQaGk9gaukBTdOfZ1Biq8kL5vgkUsBT0Q==",
       "requires": {
-        "match-at": "0.1.0"
+        "match-at": "0.1.1"
       }
     },
     "kind-of": {
@@ -4190,9 +4190,9 @@
       "dev": true
     },
     "match-at": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/match-at/-/match-at-0.1.0.tgz",
-      "integrity": "sha1-9WHncJ/5oQW4XMYsa47nwVvyTzE="
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/match-at/-/match-at-0.1.1.tgz",
+      "integrity": "sha512-h4Yd392z9mST+dzc+yjuybOGFNOZjmXIPKWjxBd1Bb23r4SmDOsk2NYCU2BMUBGbSpZqwVsZYNq26QS3xfaT3Q=="
     },
     "memory-fs": {
       "version": "0.4.1",
@@ -5157,9 +5157,9 @@
       }
     },
     "rollup": {
-      "version": "0.49.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.49.2.tgz",
-      "integrity": "sha512-9mySqItSwq5/dXYQyFGrrzqV282EZfz4kSCU2m4e6OjgqLmIsp9zK6qNQ6wbBWR4EhASEqQMBQ/IF45jaNPAtw==",
+      "version": "0.50.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.50.0.tgz",
+      "integrity": "sha512-7RqCBQ9iwsOBPkjYgoIaeUij606mSkDMExP0NT7QDI3bqkHYQHrQ83uoNIXwPcQm/vP2VbsUz3kiyZZ1qPlLTQ==",
       "dev": true
     },
     "rollup-plugin-babili": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "distill-template",
-  "version": "2.2.5",
+  "version": "2.2.9",
   "description": "Template for creating Distill articles.",
   "main": "dist/template.v2.js",
   "bin": {
@@ -34,7 +34,7 @@
     "marked": "^0.3.6",
     "mocha": "^3.5.3",
     "prismjs": "^1.6.0",
-    "rollup": "latest",
+    "rollup": "^0.50.0",
     "rollup-plugin-babili": "^3.1.0",
     "rollup-plugin-buble": "^0.15.0",
     "rollup-plugin-commonjs": "^7.0.0",
@@ -61,6 +61,6 @@
     "escape-html": "^1.0.3",
     "intersection-observer": "^0.4.0",
     "jsdom-wc": "^11.0.0-alpha-1",
-    "katex": "^0.7.1"
+    "katex": "^0.8.3"
   }
 }

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,10 +73,24 @@ 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.');
+  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.');
 };
 
 window.distillRunlevel = 0;
@@ -84,7 +98,7 @@ window.distillRunlevel = 0;
 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,22 @@ export const Controller = {
     },
 
     DOMContentLoaded() {
-      if (Controller.loaded || ['interactive', 'complete'].indexOf(document.readyState) === -1) {
+      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;
-        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()) {

src/helpers/bibtex.js

@@ -28,6 +28,7 @@ export function serializeFrontmatterToBibtex(frontMatter) {
   title = {${frontMatter.title}},
   journal = {${frontMatter.journal.title}},
   year = {${frontMatter.publishedYear}},
-  note = {${frontMatter.url}}
+  note = {${frontMatter.url}},
+  doi = {${frontMatter.doi}}
 }`;
 }

src/styles/styles-base.css

@@ -105,14 +105,16 @@ figure svg text,
 figure svg tspan {
 }
 
-figcaption {
+figcaption,
+.figcaption {
   color: rgba(0, 0, 0, 0.6);
   font-size: 12px;
   line-height: 1.5em;
 }
 
 @media(min-width: 1024px) {
-figcaption {
+figcaption,
+.figcaption {
     font-size: 13px;
   }
 }

src/transforms/polyfills.js

@@ -42,7 +42,7 @@ const addBackIn = `
 window.addEventListener('WebComponentsReady', function() {
   console.warn('WebComponentsReady');
   const loaderTag = document.createElement('script');
-  loaderTag.src = '/template.v2.js';
+  loaderTag.src = 'https://distill.pub/template.v2.js';
   document.head.insertBefore(loaderTag, document.head.firstChild);
 });
 `;