diff --git a/src/components.js b/src/components.js
index c8937a1..e3006c9 100644
--- a/src/components.js
+++ b/src/components.js
@@ -1,54 +1,91 @@
-/* Flag that we're being loaded */
-if (window.distillLoaded) {
- throw new Error('Distill Template is getting loaded more than once, aborting!');
-} else {
- window.distillLoaded = true;
-}
+import { Controller } from './controller';
-/* Static styles and other modules */
-import { makeStyleTag } from './styles/styles';
-makeStyleTag(document);
+/* Transforms */
+import { makeStyleTag } from './styles/styles';
+import { Polyfills, polyfills } from './helpers/polyfills';
/* Components */
-import { Abstract } from './components/d-abstract';
-import { Appendix } from './components/d-appendix';
-import { Article } from './components/d-article';
-import { Bibliography } from './components/d-bibliography';
-import { Byline } from './components/d-byline';
-import { Cite } from './components/d-cite';
-import { CitationList } from './components/d-citation-list';
-import { Code } from './components/d-code';
-import { Footnote } from './components/d-footnote';
-import { FootnoteList } from './components/d-footnote-list';
-import { FrontMatter } from './components/d-front-matter';
-import { Title } from './components/d-title';
-import { DMath } from './components/d-math';
-import { References } from './components/d-references';
-import { TOC } from './components/d-toc';
-import { Figure } from './components/d-figure';
-import { Interstitial } from './components/d-interstitial';
-import { Slider } from './ui/d-slider';
-
-const components = [
- Abstract, Appendix, Article, Bibliography, Byline, Cite, CitationList, Code,
- Footnote, FootnoteList, FrontMatter, Title, DMath, References, TOC, Figure,
- Slider, Interstitial
-];
+import { Abstract } from './components/d-abstract';
+import { Appendix } from './components/d-appendix';
+import { Article } from './components/d-article';
+import { Bibliography } from './components/d-bibliography';
+import { Byline } from './components/d-byline';
+import { Cite } from './components/d-cite';
+import { CitationList } from './components/d-citation-list';
+import { Code } from './components/d-code';
+import { Footnote } from './components/d-footnote';
+import { FootnoteList } from './components/d-footnote-list';
+import { FrontMatter } from './components/d-front-matter';
+import { Title } from './components/d-title';
+import { DMath } from './components/d-math';
+import { References } from './components/d-references';
+import { TOC } from './components/d-toc';
+import { Figure } from './components/d-figure';
+import { Interstitial } from './components/d-interstitial';
+import { Slider } from './ui/d-slider';
/* Distill website specific components */
-import { DistillHeader } from './distill-components/distill-header';
+import { DistillHeader } from './distill-components/distill-header';
import { DistillAppendix } from './distill-components/distill-appendix';
-import { DistillFooter } from './distill-components/distill-footer';
+import { DistillFooter } from './distill-components/distill-footer';
-const distillComponents = [
- DistillHeader, DistillAppendix, DistillFooter,
-];
+const distillMain = function() {
-function defineComponents() {
+ if (window.distillRunlevel < 1) {
+ throw new Error('Insufficient Runlevel for Distill Template!');
+ }
+
+ /* 1. Flag that we're being loaded */
+ if ('distillTemplateIsLoading' in window && window.distillTemplateIsLoading) {
+ 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.');
+ }
+
+ /* 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.');
+ window.distillRunlevel = 2;
+
+ /* 3. Register components */
+ /* Article will register controller which takes control from there */
+ const components = [
+ Abstract, Appendix, Article, Bibliography, Byline, Cite, CitationList, Code,
+ Footnote, FootnoteList, FrontMatter, Title, DMath, References, TOC, Figure,
+ Slider, Interstitial
+ ];
+
+ const distillComponents = [
+ DistillHeader, DistillAppendix, DistillFooter,
+ ];
+
+ if (window.distillRunlevel < 2) {
+ throw new Error('Insufficient Runlevel for adding custom elements!');
+ }
const allComponents = components.concat(distillComponents);
for (const component of allComponents) {
+ console.info('Runlevel 2: Registering custom element: ' + component.is);
customElements.define(component.is, component);
}
-}
-defineComponents();
+ 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 = 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;
+ distillMain();
+} else {
+ console.info('Runlevel 0: Distill Template is loading polyfills.');
+ Polyfills.load(distillMain);
+}
diff --git a/src/components/d-abstract.js b/src/components/d-abstract.js
index e07409a..8cef23d 100644
--- a/src/components/d-abstract.js
+++ b/src/components/d-abstract.js
@@ -4,7 +4,6 @@ import { body } from '../helpers/layout';
const T = Template('d-abstract', `
-
-
References
-
-`, false);
-
-export function renderCitationList(element, entries) {
+export function renderCitationList(element, entries, dom=document) {
if (entries.size > 0) {
element.style.display = '';
- const list = document.getElementById('references-list');
- list.innerHTML = '';
+ let list = element.querySelector('.references');
+ if (list) {
+ list.innerHTML = '';
+ } else {
+ const stylesTag = dom.createElement('style');
+ stylesTag.innerHTML = styles;
+ element.appendChild(stylesTag);
+
+ const heading = dom.createElement('h3');
+ heading.id = 'references';
+ heading.textContent = 'References';
+ element.appendChild(heading);
+
+ list = dom.createElement('ol');
+ list.id = 'references-list';
+ list.className = 'references';
+ element.appendChild(list);
+ }
for (const [key, entry] of entries) {
- const listItem = document.createElement('li');
+ const listItem = dom.createElement('li');
listItem.id = key;
listItem.innerHTML = bibliography_cite(entry);
list.appendChild(listItem);
@@ -40,16 +48,16 @@ export function renderCitationList(element, entries) {
}
}
-export class CitationList extends T(HTMLElement) {
+export class CitationList extends HTMLElement {
+
+ static get is() { return 'd-citation-list'; }
connectedCallback() {
- super.connectedCallback();
-
- this.root.style.display = 'none';
+ this.style.display = 'none';
}
set citations(citations) {
- renderCitationList(this.root, citations);
+ renderCitationList(this, citations);
}
}
diff --git a/src/components/d-cite.js b/src/components/d-cite.js
index 460bb04..6713f5b 100644
--- a/src/components/d-cite.js
+++ b/src/components/d-cite.js
@@ -10,6 +10,7 @@ const T = Template('d-cite', `
}
.citation {
+ display: inline-block;
color: hsla(206, 90%, 20%, 0.7);
}
@@ -39,6 +40,7 @@ figcaption .citation-number {
width: 100%;
left: 0;
z-index: 10000;
+ margin-top: 2em;
}
.dt-hover-box {
@@ -59,7 +61,7 @@ figcaption .citation-number {
-
+
`);
export class Cite extends T(HTMLElement) {
diff --git a/src/components/d-figure.js b/src/components/d-figure.js
index a3e1c47..7fc880f 100644
--- a/src/components/d-figure.js
+++ b/src/components/d-figure.js
@@ -33,8 +33,7 @@ export class Figure extends HTMLElement {
static runReadyQueue() {
// console.log("Checking to run readyQueue, length: " + Figure.readyQueue.length + ", scrolling: " + Figure.isScrolling);
- if (Figure.isScrolling) return;
-
+ // if (Figure.isScrolling) return;
// console.log("Running ready Queue");
const figure = Figure.readyQueue
.sort((a,b) => a._seenOnScreen - b._seenOnScreen )
@@ -56,6 +55,7 @@ export class Figure extends HTMLElement {
}
connectedCallback() {
+ this.loadsWhileScrolling = this.hasAttribute('loadsWhileScrolling');
Figure.marginObserver.observe(this);
Figure.directObserver.observe(this);
}
@@ -71,12 +71,15 @@ export class Figure extends HTMLElement {
static get marginObserver() {
if (!Figure._marginObserver) {
+ // if (!('IntersectionObserver' in window)) {
+ // throw new Error('no interscetionobbserver!');
+ // }
const viewportHeight = window.innerHeight;
const margin = Math.floor(2 * viewportHeight);
- Figure._marginObserver = new IntersectionObserver(
- Figure.didObserveMarginIntersection, {
- rootMargin: margin + 'px 0px ' + margin + 'px 0px', threshold: 0.01,
- });
+ const options = {rootMargin: margin + 'px 0px ' + margin + 'px 0px', threshold: 0.01};
+ const callback = Figure.didObserveMarginIntersection;
+ const observer = new IntersectionObserver(callback, options);
+ Figure._marginObserver = observer;
}
return Figure._marginObserver;
}
diff --git a/src/components/d-interstitial.js b/src/components/d-interstitial.js
index c980424..e214f66 100644
--- a/src/components/d-interstitial.js
+++ b/src/components/d-interstitial.js
@@ -26,14 +26,18 @@ const T = Template('d-interstitial', `
.container {
position: relative;
- left: 25%;
- width: 50%;
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 420px;
+ padding: 2em;
}
h1 {
text-decoration: underline;
text-decoration-color: hsl(0,100%,40%);
+ -webkit-text-decoration-color: hsl(0,100%,40%);
margin-bottom: 1em;
+ line-height: 1.5em;
}
input[type="password"] {
@@ -71,12 +75,31 @@ p small {
color: #888;
}
+.logo {
+ position: relative;
+ font-size: 1.5em;
+ margin-bottom: 3em;
+}
+
+.logo svg {
+ width: 36px;
+ position: relative;
+ top: 6px;
+ margin-right: 2px;
+}
+
+.logo svg path {
+ fill: none;
+ stroke: black;
+ stroke-width: 2px;
+}
+
This article is in review.
-
Do not share this URL, or the contents of this article. Thank you!
+
Do not share this URL or the contents of this article. Thank you!
Enter the password we shared with you as part of the review process to view the article.
@@ -88,14 +111,23 @@ export class Interstitial extends T(HTMLElement) {
connectedCallback() {
const passwordInput = this.root.querySelector('#interstitial-password-input');
passwordInput.oninput = (event) => this.passwordChanged(event);
+ if (typeof(Storage) !== 'undefined') {
+ if (localStorage.getItem('distill-interstitial-password-correct') === 'true') {
+ console.log('Loaded that correct password was entered before; skipping interstitial.');
+ this.parentElement.removeChild(this);
+ }
+ }
}
passwordChanged(event) {
const entered = event.target.value;
if (entered === this.password) {
console.log('Correct password entered.');
- event.target.classList.add('correct');
this.parentElement.removeChild(this);
+ if (typeof(Storage) !== 'undefined') {
+ console.log('Saved that correct password was entered.');
+ localStorage.setItem('distill-interstitial-password-correct', 'true');
+ }
}
}
diff --git a/src/components/d-math.js b/src/components/d-math.js
index 3b4ad76..25c99fb 100644
--- a/src/components/d-math.js
+++ b/src/components/d-math.js
@@ -33,15 +33,19 @@ export class DMath extends Mutating(T(HTMLElement)) {
static set katexOptions(options) {
DMath._katexOptions = options;
- if (DMath.katexOptions.delimiters && !DMath.katexAdded) {
- DMath.addKatex();
+ if (DMath.katexOptions.delimiters) {
+ if (!DMath.katexAdded) {
+ DMath.addKatex();
+ } else {
+ DMath.katexLoadedCallback();
+ }
}
}
static get katexOptions() {
if (!DMath._katexOptions) {
DMath._katexOptions = {
- delimiters: [ { 'left':'$', 'right':'$', 'display':true } ]
+ delimiters: [ { 'left':'$$', 'right':'$$', 'display': false } ]
};
}
return DMath._katexOptions;
diff --git a/src/controller.js b/src/controller.js
index a0567ec..3a93f02 100644
--- a/src/controller.js
+++ b/src/controller.js
@@ -71,6 +71,7 @@ export const Controller = {
},
onBibliographyChanged(event) {
+ console.info('BibliographyChanged');
const citationListTag = document.querySelector('d-citation-list');
const bibliography = event.detail;
@@ -136,7 +137,12 @@ export const Controller = {
},
DOMContentLoaded() {
- // console.debug('DOMContentLoaded.');
+ if (Controller.loaded || ['interactive', 'complete'].indexOf(document.readyState) === -1) {
+ return;
+ } else {
+ Controller.loaded = true;
+ console.log('Controller running DOMContentLoaded')
+ }
const frontMatterTag = document.querySelector('d-front-matter');
const data = parseFrontmatter(frontMatterTag);
@@ -149,6 +155,12 @@ export const Controller = {
waitingCallback();
}
+ if (frontMatter.bibliographyParsed) {
+ for (const waitingCallback of Controller.waitingOn.bibliography.slice()) {
+ waitingCallback();
+ }
+ }
+
const footnotesList = document.querySelector('d-footnote-list');
if (footnotesList) {
const footnotes = document.querySelectorAll('d-footnote');
diff --git a/src/distill-components/distill-appendix.js b/src/distill-components/distill-appendix.js
index 924dedc..f219a1b 100644
--- a/src/distill-components/distill-appendix.js
+++ b/src/distill-components/distill-appendix.js
@@ -35,7 +35,12 @@ export function appendixTemplate(frontMatter) {
if (typeof frontMatter.githubUrl !== 'undefined') {
html += `
Updates and Corrections
-
View all changes to this article since it was first published. If you see mistakes or want to suggest changes, please create an issue on GitHub .
+
`;
+ if (frontMatter.githubCompareUpdatesUrl) {
+ html += `View all changes to this article since it was first published.`;
+ }
+ html += `
+ If you see mistakes or want to suggest changes, please create an issue on GitHub .
`;
}
diff --git a/src/distill-components/distill-footer.js b/src/distill-components/distill-footer.js
index f27660d..04ce57a 100644
--- a/src/distill-components/distill-footer.js
+++ b/src/distill-components/distill-footer.js
@@ -5,7 +5,6 @@ const T = Template('distill-footer', `