More work on perf: CSS contain etc.

src/components/d-abstract.js

@@ -7,7 +7,8 @@ const T = Template('d-abstract', `
     display: block;
     font-size: 23px;
     line-height: 1.7em;
-    margin-bottom: 140px;
+    margin-top: 64px;
+    margin-bottom: 64px;
   }
   ${body('d-abstract')}
 </style>

src/components/d-acknowledgements.js

@@ -2,6 +2,11 @@ import { Template } from '../mixins/template';
 
 const T = Template('d-acknowledgements', `
 <style>
+
+:host {
+  contain: content;
+}
+
 ::slotted(h3) {
   font-size: 15px;
   font-weight: 500;
@@ -10,9 +15,11 @@ const T = Template('d-acknowledgements', `
   color: rgba(0,0,0,0.65);
   line-height: 1em;
 }
+
 ::slotted(*) a {
   color: rgba(0, 0, 0, 0.6);
 }
+
 </style>
 
 <slot></slot>

src/components/d-appendix.js

@@ -14,9 +14,10 @@ const T = Template('d-appendix', `
   margin-bottom: 0;
   border-top: 1px solid rgba(0,0,0,0.1);
   color: rgba(0,0,0,0.5);
-  background: hsl(180, 5%, 98%);
   padding-top: 36px;
   padding-bottom: 48px;
+
+  contain: content;
 }
 
 ${body('.content')}

src/components/d-article.js

@@ -2,7 +2,11 @@ import { Template } from '../mixins/template';
 import { Controller } from '../controller';
 
 const T = Template('d-article', `
-<style></style>
+<style>
+d-article {
+  contain: content;
+}
+</style>
 `, false);
 
 // export function addInferableTags(dom, frontMatter) {

src/components/d-bibliography.js

@@ -4,6 +4,9 @@ import { bibliography_cite } from '../helpers/citation';
 
 export const templateString = `
 <style>
+  :host {
+    contain: content;
+  }
   .references {
     font-size: 12px;
     line-height: 20px;

src/components/d-byline.js

@@ -1,128 +1,128 @@
-import { Template } from '../mixins/template';
-import { page } from '../helpers/layout';
+export const style = `
+d-byline {
+  font-size: 13px;
+  line-height: 20px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  color: rgba(0, 0, 0, 0.6);
+  padding-top: 20px;
+  padding-bottom: 20px;
+  contain: content;
+  min-height: 42px;
+}
 
-const T = Template('d-byline', `
-<style>
-  :host {
-    box-sizing: border-box;
-    font-size: 13px;
-    line-height: 20px;
-    display: block;
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-    color: rgba(0, 0, 0, 0.6);
-    padding-top: 20px;
-    padding-bottom: 20px;
+d-byline .byline-container {
+  grid-column: margin-left / page;
+}
+
+d-byline a,
+d-article d-byline a {
+  color: rgba(0, 0, 0, 0.8);
+  text-decoration: none;
+  border-bottom: none;
+}
+
+d-article d-byline a:hover {
+  text-decoration: underline;
+  border-bottom: none;
+}
+
+d-byline .authors {
+  text-align: left;
+  contain: content;
+}
+
+.author .name {
+  font-weight: 600;
+  display: inline;
+  text-transform: uppercase;
+  contain: content;
+}
+
+.author .affiliation {
+  display: inline;
+}
+
+d-byline .date {
+  display: block;
+  text-align: left;
+  margin-top: 8px;
+}
+
+.date .year, .date .month {
+  display: inline;
+}
+
+d-byline .citation {
+  display: block;
+  text-align: left;
+}
+
+.citation div {
+  display: inline;
+}
+
+@media screen and (min-width: 768px), print {
+
+  a:hover {
+    color: rgba(0, 0, 0, 0.9);
   }
-  ${page('.byline')}
-  d-article.centered {
-    text-align: center;
+
+  d-byline .authors {
+    display: inline-block;
   }
-  a,
-  d-article a {
-    color: rgba(0, 0, 0, 0.8);
-    text-decoration: none;
-    border-bottom: none;
-  }
-  d-article a:hover {
-    text-decoration: underline;
-    border-bottom: none;
-  }
-  .authors {
-    text-align: left;
-  }
-  .name {
-    font-weight: 600;
-    display: inline;
-    text-transform: uppercase;
+
+  .author {
+    display: inline-block;
+    margin-right: 12px;
+    /*padding-left: 20px;*/
+    /*border-left: 1px solid #ddd;*/
   }
+
   .affiliation {
-    display: inline;
-  }
-  .date {
     display: block;
-    text-align: left;
-    margin-top: 8px;
   }
-  .year, .month {
-    display: inline;
+
+  .author:last-child {
+    margin-right: 0;
   }
-  .citation {
+
+  .author .name {
     display: block;
-    text-align: left;
+  }
+
+  d-byline .date {
+
+    border-left: 1px solid rgba(0, 0, 0, 0.1);
+    padding-left: 15px;
+    margin-left: 15px;
+    margin-top: 0;
+    display: inline-block;
+  }
+  .date .year, .date .month {
+    display: block;
+  }
+
+  d-byline .citation {
+    align-self: flex-end;
+    border-left: 1px solid rgba(0, 0, 0, 0.15);
+    padding-left: 15px;
+    margin-left: 15px;
+    display: inline-block;
   }
   .citation div {
-    display: inline;
+    display: block;
   }
 
-  @media screen and (min-width: 768px), print {
-    d-byline {
-      border-bottom: none;
-    }
-
-    a:hover {
-      color: rgba(0, 0, 0, 0.9);
-    }
-
-    .authors {
-      display: inline-block;
-    }
-
-    .author {
-      display: inline-block;
-      margin-right: 12px;
-      /*padding-left: 20px;*/
-      /*border-left: 1px solid #ddd;*/
-    }
-
-    .affiliation {
-      display: block;
-    }
-
-    .author:last-child {
-      margin-right: 0;
-    }
-
-    .name {
-      display: block;
-    }
-
-    .date {
-
-      border-left: 1px solid rgba(0, 0, 0, 0.1);
-      padding-left: 15px;
-      margin-left: 15px;
-      margin-top: 0;
-      display: inline-block;
-    }
-    .year, .month {
-      display: block;
-    }
-
-    .citation {
-      align-self: flex-end;
-      border-left: 1px solid rgba(0, 0, 0, 0.15);
-      padding-left: 15px;
-      margin-left: 15px;
-      display: inline-block;
-    }
-    .citation div {
-      display: block;
-    }
-
-    .byline {
-      display: flex;
-      min-height: 40px;
-    }
+  .byline-container {
+    display: flex;
   }
-</style>
+}`;
 
-<div class='byline'>
-</div>
-`, true);
 
 export function bylineTemplate(frontMatter) {
   return `
+<div class='byline-container'>
   <div class="authors">
     ${frontMatter.authors.map( author => `<div class="author">
       ${author.personalURL ?
@@ -145,14 +145,16 @@ export function bylineTemplate(frontMatter) {
     <div>Citation:</div>
     <div>${frontMatter.concatenatedAuthors}, ${frontMatter.publishedYear}</div>
   </a>
-  `;
+</div>
+`;
 }
 
-export class Byline extends T(HTMLElement) {
+export class Byline extends HTMLElement {
+
+  static get is() { return 'd-byline'; }
 
   set frontMatter(frontMatter) {
-    const container = this.root.querySelector('.byline');
-    container.innerHTML = bylineTemplate(frontMatter);
+    this.innerHTML = bylineTemplate(frontMatter);
   }
 
 }

src/components/d-figure.js

@@ -17,8 +17,39 @@ export class Figure extends HTMLElement {
 
   static get is() { return 'd-figure'; }
 
+  static get readyQueue() {
+    if (!Figure._readyQueue) {
+      Figure._readyQueue = [];
+    }
+    return Figure._readyQueue;
+  }
+
+  static addToReadyQueue(figure) {
+    if (Figure.readyQueue.indexOf(figure) === -1) {
+      Figure.readyQueue.push(figure);
+      Figure.runReadyQueue();
+    }
+  }
+
+  static runReadyQueue() {
+    // console.log("Checking to run readyQueue, length: " + Figure.readyQueue.length + ", scrolling: " + Figure.isScrolling);
+    if (Figure.isScrolling) return;
+
+    // console.log("Running ready Queue");
+    const figure = Figure.readyQueue
+      .sort((a,b) => a._seenOnScreen - b._seenOnScreen )
+      .filter((figure) => !figure._ready)
+      .pop();
+    if (figure) {
+      figure.ready();
+      requestAnimationFrame(Figure.runReadyQueue);
+    }
+
+  }
+
   constructor() {
     super();
+    // debugger
     this._ready = false;
     this._onscreen = false;
     this._offscreen = true;
@@ -54,7 +85,7 @@ export class Figure extends HTMLElement {
     for (const entry of entries) {
       const figure = entry.target;
       if (entry.isIntersecting && !figure._ready) {
-        figure.ready();
+        Figure.addToReadyQueue(figure);
       }
     }
   }
@@ -74,7 +105,8 @@ export class Figure extends HTMLElement {
     for (const entry of entries) {
       const figure = entry.target;
       if (entry.isIntersecting) {
-        if (!figure._ready) { figure.ready(); }
+        figure._seenOnScreen = new Date();
+        // if (!figure._ready) { figure.ready(); }
         if (figure._offscreen) { figure.onscreen(); }
       } else {
         if (figure._onscreen) { figure.offscreen(); }
@@ -87,19 +119,22 @@ export class Figure extends HTMLElement {
   addEventListener(eventName, callback) {
     super.addEventListener(eventName, callback);
     // if we had already dispatched something while presumingly no one was listening, we do so again
-    setTimeout(() => {
-      if (this._ready && eventName === 'ready') {
-        this.ready();
+    // debugger
+    if (eventName === 'ready') {
+      if (Figure.readyQueue.indexOf(this) !== -1) {
+        this._ready = false;
+        Figure.runReadyQueue();
       }
-      if (this._onscreen && eventName === 'onscreen') {
-        this.onscreen();
-      }
-    }, 1);
+    }
+    if (eventName === 'onscreen') {
+      this.onscreen();
+    }
   }
 
   // Custom Events
 
   ready() {
+    // debugger
     this._ready = true;
     Figure.marginObserver.unobserve(this);
     const event = new CustomEvent('ready');
@@ -121,3 +156,20 @@ export class Figure extends HTMLElement {
   }
 
 }
+
+if (typeof window !== 'undefined') {
+
+  Figure.isScrolling = false;
+  let timeout;
+  const resetTimer = () => {
+    Figure.isScrolling = true;
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      Figure.isScrolling = false;
+      console.log('Stopped Scrolling')
+      Figure.runReadyQueue();
+    }, 500);
+  };
+  window.addEventListener('scroll', resetTimer, true);
+
+}

src/components/d-footnote-list.js

@@ -2,6 +2,10 @@ import { Template } from '../mixins/template';
 
 const T = Template('d-footnote-list', `
 <style>
+:host {
+  contain: content;
+}
+
 ol {
   padding: 0 0 0 18px;
 }

src/components/d-front-matter.js

@@ -19,10 +19,10 @@ export class FrontMatter extends HTMLElement {
   constructor() {
     super();
 
-    const options = {childList: true};
+    const options = {childList: true, characterData: true, subtree: true};
     const observer = new MutationObserver( (entries) => {
       for (const entry of entries) {
-        if (entry.target.nodeName === 'SCRIPT') {
+        if (entry.target.nodeName === 'SCRIPT' || entry.type === 'characterData') {
           const data = parseFrontmatter(this);
           this.notify(data);
         }

src/components/d-math.js

@@ -8,6 +8,10 @@ const katexCSSTag = '<link rel="stylesheet" href="https://distill.pub/third-part
 const T = Template('d-math', `
 <style>
 
+:host {
+  contain: content;
+}
+
 d-math[block] {
   display: block;
 }

src/components/d-title.js

@@ -8,7 +8,7 @@ const T = Template('d-title', `
   box-sizing: border-box;
   display: block;
   width: 100%;
-  margin-bottom: 64px;
+  contain: content;
 }
 
 
@@ -23,6 +23,7 @@ const T = Template('d-title', `
 
 ::slotted(h2) {
   border-bottom: none !important;
+
 }
 
 @media screen and (min-width: 768px), print {
@@ -33,14 +34,13 @@ const T = Template('d-title', `
 }
 @media(min-width: 1024px) {
   ::slotted(h1) {
-    padding-top: 64px;
+    padding-top: 0px;
     padding-bottom: 32px;
     font-size: 48px;
   }
 }
 @media(min-width: 1280px) {
   ::slotted(h1) {
-    padding-top: 96px;
     padding-bottom: 32px;
     font-size: 56px;
   }

src/components/d-toc.js

@@ -1,13 +1,66 @@
-import {Template} from '../mixins/template';
+export class TOC extends HTMLElement {
 
-const T = Template('d-toc', `
-<style>
-d-toc {
-  display: block;
-}
-</style>
-`, false);
+  static get is() { return 'd-toc'; }
 
-export class TOC extends T(HTMLElement) {
+  connectedCallback() {
+    if (!this.getAttribute('prerendered')) {
+      window.onload = () => {
+        const article = document.querySelector('d-article');
+        const headings = article.querySelectorAll('h2, h3');
+        renderTOC(this, headings);
+      };
+    }
+  }
 
 }
+
+export function renderTOC(element, headings) {
+
+  let ToC =`
+  <style>
+
+  d-toc {
+    contain: content;
+    display: block;
+  }
+
+  d-toc ul {
+    padding-left: 0;
+  }
+
+  d-toc ul > ul {
+    padding-left: 24px;
+  }
+
+  d-toc a {
+    border-bottom: none;
+    text-decoration: none;
+  }
+
+  </style>
+  <nav role="navigation" class="table-of-contents"></nav>
+  <h2>Table of contents</h2>
+  <ul>`;
+
+  for (const el of headings) {
+    // should element be included in TOC?
+    const isInTitle = el.parentElement.tagName == 'D-TITLE';
+    const isException = el.getAttribute('no-toc');
+    if (isInTitle || isException) continue;
+    // create TOC entry
+    const title = el.textContent;
+    const link = '#' + el.getAttribute('id');
+
+    let newLine = '<li>' + '<a href="' + link + '">' + title + '</a>' + '</li>';
+    if (el.tagName == 'H3') {
+      newLine = '<ul>' + newLine + '</ul>';
+    } else {
+      newLine += '<br>';
+    }
+    ToC += newLine;
+
+  }
+
+  ToC += '</ul></nav>';
+  element.innerHTML = ToC;
+}