2.4.0

package-lock.json

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

package.json

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

src/components.js

@@ -13,6 +13,7 @@
 // limitations under the License.
 
 import { Controller } from './controller';
+import { domContentLoaded } from './helpers/domContentLoaded.js';
 
 /* Transforms */
 import { makeStyleTag }    from './styles/styles';
@@ -55,13 +56,13 @@ const distillMain = function() {
     throw new Error('Runlevel 1: Distill Template is getting loaded more than once, aborting!');
   } else {
     window.distillTemplateIsLoading = true;
-    console.info('Runlevel 1: Distill Template has started loading.');
+    console.debug('Runlevel 1: Distill Template has started loading.');
   }
 
   /* 2. Add styles if they weren't added during prerendering */
   makeStyleTag(document);
-  console.info('Runlevel 1: Static Distill styles have been added.');
-  console.info('Runlevel 1->2.');
+  console.debug('Runlevel 1: Static Distill styles have been added.');
+  console.debug('Runlevel 1->2.');
   window.distillRunlevel += 1;
 
   /* 3. Register Controller listener functions */
@@ -73,8 +74,8 @@ const distillMain = function() {
       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.');
+  console.debug('Runlevel 2: We can now listen to controller events.');
+  console.debug('Runlevel 2->3.');
   window.distillRunlevel += 1;
 
   /* 4. Register components */
@@ -93,29 +94,31 @@ const distillMain = function() {
   }
   const allComponents = components.concat(distillComponents);
   for (const component of allComponents) {
-    console.info('Runlevel 2: Registering custom element: ' + component.is);
+    console.debug('Runlevel 2: Registering custom element: ' + component.is);
     customElements.define(component.is, component);
   }
 
-  console.info('Runlevel 3: Distill Template finished registering custom elements.');
-  console.info('Runlevel 3->4.');
+  console.debug('Runlevel 3: Distill Template finished registering custom elements.');
+  console.debug('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();
+  if (domContentLoaded()) {
+    Controller.listeners.DOMContentLoaded();
+  }
 
-  console.info('Runlevel 4: Distill Template initialisation complete.');
+  console.debug('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.');
+  console.debug('Runlevel 0: No need for polyfills.');
+  console.debug('Runlevel 0->1.');
   window.distillRunlevel += 1;
   distillMain();
 } else {
-  console.info('Runlevel 0: Distill Template is loading polyfills.');
+  console.debug('Runlevel 0: Distill Template is loading polyfills.');
   Polyfills.load(distillMain);
 }

src/components/d-citation-list.js

@@ -16,7 +16,7 @@ import { bibliography_cite } from '../helpers/citation';
 
 const styles = `
 d-citation-list {
-  contain: layout style;
+  contain: style;
 }
 
 d-citation-list .references {

src/components/d-cite.js

@@ -19,11 +19,10 @@ const T = Template('d-cite', `
 <style>
 
 :host {
-
+  display: inline-block;
 }
 
 .citation {
-  display: inline-block;
   color: hsla(206, 90%, 20%, 0.7);
 }
 
@@ -68,7 +67,6 @@ ul li:last-of-type {
 <d-hover-box id="hover-box"></d-hover-box>
 
 <div id="citation-" class="citation">
-  <slot></slot>
   <span class="citation-number"></span>
 </div>
 `);
@@ -76,6 +74,11 @@ ul li:last-of-type {
 export class Cite extends T(HTMLElement) {
 
   /* Lifecycle */
+  constructor() {
+    super();
+    this._numbers = [];
+    this._entries = [];
+  }
 
   connectedCallback() {
     this.outerSpan = this.root.querySelector('#citation-');
@@ -84,6 +87,13 @@ export class Cite extends T(HTMLElement) {
     window.customElements.whenDefined('d-hover-box').then(() => {
       this.hoverBox.listen(this);
     });
+    // in case this component got connected after values were set
+    if (this.numbers) {
+      this.displayNumbers(this.numbers)
+    }
+    if (this.entries) {
+      this.displayEntries(this.entries)
+    }
   }
 
   //TODO This causes an infinite loop on firefox with polyfills.
@@ -123,21 +133,37 @@ export class Cite extends T(HTMLElement) {
   /* Setters & Rendering */
 
   set numbers(numbers) {
+    this._numbers = numbers;
+    this.displayNumbers(numbers);
+  }
+
+  get numbers() {
+    return this._numbers;
+  }
+
+  displayNumbers(numbers) {
+    if (!this.innerSpan) return;
     const numberStrings = numbers.map( index => {
       return index == -1 ? '?' : index + 1 + '';
     });
     const textContent = '[' + numberStrings.join(', ') + ']';
-    if (this.innerSpan) {
-      this.innerSpan.textContent = textContent;
-    }
+    this.innerSpan.textContent = textContent;
   }
 
   set entries(entries) {
-    if (this.hoverBox) {
-      this.hoverBox.innerHTML = `<ul>
+    this._entries = entries;
+    this.displayEntries(entries)
+  }
+
+  get entries() {
+    return this._entries;
+  }
+
+  displayEntries(entries) {
+    if (!this.hoverBox) return
+    this.hoverBox.innerHTML = `<ul>
       ${entries.map(hover_cite).map(html => `<li>${html}</li>`).join('\n')}
-      </ul>`;
-    }
+    </ul>`;
   }
 
 }

src/components/d-front-matter.js

@@ -30,7 +30,6 @@ export function _moveLegacyAffiliationFormatIntoArray(frontMatter) {
       author.affiliations = [newAffiliation];
     }
   }
-  console.log(frontMatter)
   return frontMatter
 }
 

src/components/d-math.js

@@ -30,7 +30,7 @@ ${katexCSSTag}
 
 :host {
   display: inline-block;
-  contain: content;
+  contain: style;
 }
 
 :host([block]) {
@@ -73,8 +73,7 @@ export class DMath extends Mutating(T(HTMLElement)) {
     }
     // transform inline delimited math to d-math tags
     if (DMath.katexOptions.delimiters) {
-      const article = document.querySelector('d-article');
-      renderMathInElement(article, DMath.katexOptions);
+      renderMathInElement(document.body, DMath.katexOptions);
     }
   }
 

src/controller.js

@@ -15,14 +15,12 @@
 import { FrontMatter, mergeFromYMLFrontmatter } from './front-matter';
 import { DMath } from './components/d-math';
 import { collect_citations } from './helpers/citation.js';
+import { domContentLoaded } from './helpers/domContentLoaded.js';
 import { parseFrontmatter } from './components/d-front-matter';
 import optionalComponents from './transforms/optional-components';
 
 const frontMatter = new FrontMatter();
 
-function domContentLoaded() {
-  return ['interactive', 'complete'].indexOf(document.readyState) !== -1;
-}
 
 export const Controller = {
 
@@ -109,7 +107,7 @@ export const Controller = {
 
 
       if (citationListTag.hasAttribute('distill-prerendered')) {
-        console.info('Citation list was prerendered; not updating it.');
+        console.debug('Citation list was prerendered; not updating it.');
       } else {
         const entries = new Map(frontMatter.citations.map( citationKey => {
           return [citationKey, frontMatter.bibliography.get(citationKey)];
@@ -167,11 +165,11 @@ export const Controller = {
         console.warn('Controller received DOMContentLoaded but was already loaded!');
         return;
       } else if (!domContentLoaded()) {
-        console.warn('Controller received DOMContentLoaded before appropriate document.readyState!');
+        console.warn('Controller received DOMContentLoaded at document.readyState: ' + document.readyState + '!');
         return;
       } else {
         Controller.loaded = true;
-        console.log('Runlevel 4: Controller running DOMContentLoaded');
+        console.debug('Runlevel 4: Controller running DOMContentLoaded');
       }
 
       const frontMatterTag = document.querySelector('d-front-matter');

src/helpers/domContentLoaded.js

@@ -0,0 +1,3 @@
+export function domContentLoaded() {
+  return ['interactive', 'complete'].indexOf(document.readyState) !== -1;
+}

src/helpers/polyfills.js

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 export function addPolyfill(polyfill, polyfillLoadedCallback) {
-  console.info('Runlevel 0: Polyfill required: ' + polyfill.name);
+  console.debug('Runlevel 0: Polyfill required: ' + polyfill.name);
   const script = document.createElement('script');
   script.src = polyfill.url;
   script.async = false;
@@ -58,11 +58,11 @@ export class Polyfills {
     // Define an intermediate callback that checks if all is loaded.
     const polyfillLoaded = function(polyfill) {
       polyfill.loaded = true;
-      console.info('Runlevel 0: Polyfill has finished loading: ' + polyfill.name);
-      // console.info(window[polyfill.name]);
+      console.debug('Runlevel 0: Polyfill has finished loading: ' + polyfill.name);
+      // console.debug(window[polyfill.name]);
       if (Polyfills.neededPolyfills.every((poly) => poly.loaded)) {
-        console.info('Runlevel 0: All required polyfills have finished loading.');
-        console.info('Runlevel 0->1.');
+        console.debug('Runlevel 0: All required polyfills have finished loading.');
+        console.debug('Runlevel 0->1.');
         window.distillRunlevel = 1;
         callback();
       }

src/styles/d-byline.css

@@ -15,7 +15,7 @@
  */
 
 d-byline {
-  contain: content;
+  contain: style;
   overflow: hidden;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   font-size: 0.8rem;

src/transforms/polyfills.js

@@ -67,7 +67,7 @@ export default function render(dom) {
   if (templateTag) {
     templateTag.parentNode.removeChild(templateTag);
   } else {
-    console.info('FYI: Did not find template tag when trying to remove it. You may not have added it. Be aware that our polyfills will add it.')
+    console.debug('FYI: Did not find template tag when trying to remove it. You may not have added it. Be aware that our polyfills will add it.')
   }
 
   // add loader