diff --git a/src/components.js b/src/components.js index 6c1a819..9deba37 100644 --- a/src/components.js +++ b/src/components.js @@ -3,25 +3,27 @@ import { makeStyleTag } from './styles/styles'; makeStyleTag(document); /* 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 { DMath } from './components/d-math'; -import { References } from './components/d-references'; -import { TOC } from './components/d-toc'; -import { Figure } from './components/d-figure'; +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 { 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'; const components = [ Abstract, Appendix, Article, Bibliography, Byline, Cite, CitationList, Code, Footnote, FootnoteList, FrontMatter, DMath, References, TOC, Figure, + Interstitial, ]; /* Distill website specific components */ diff --git a/src/components/d-interstitial.js b/src/components/d-interstitial.js new file mode 100644 index 0000000..2726ac9 --- /dev/null +++ b/src/components/d-interstitial.js @@ -0,0 +1,114 @@ +import { Template } from '../mixins/template'; + +// This overlay is not secure. +// It is only meant as a social deterrent. + +const T = Template('d-interstitial', ` + + +
+
+

This article is in review.

+

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.

+
+
+`); + +export class Interstitial extends T(HTMLElement) { + + connectedCallback() { + const passwordInput = this.root.querySelector('#interstitial-password-input'); + passwordInput.oninput = (event) => this.passwordChanged(event); + setTimeout(() => { + this.article = document.querySelector('d-article'); + this.article.style = 'filter: blur(15px)'; + const overlay = this.root.querySelector('.overlay'); + overlay.classList.add('transparent'); + }, 500); + } + + passwordChanged(event) { + const entered = event.target.value; + if (entered === this.password) { + console.log('Correct password entered.'); + event.target.classList.add('right'); + this.article.style = ''; + this.parentElement.removeChild(this); + } + } + +} diff --git a/src/controller.js b/src/controller.js index e0a7ea8..a7c70f0 100644 --- a/src/controller.js +++ b/src/controller.js @@ -109,6 +109,11 @@ export const Controller = { const data = event.detail; frontMatter.mergeFromYMLFrontmatter(data); + const interstitial = document.querySelector('d-interstitial'); + if (interstitial) { + interstitial.password = frontMatter.password; + } + const prerendered = document.body.hasAttribute('distill-prerendered'); if (!prerendered) { optionalComponents(document, frontMatter); diff --git a/src/front-matter.js b/src/front-matter.js index dc33cfe..eed187e 100644 --- a/src/front-matter.js +++ b/src/front-matter.js @@ -124,6 +124,7 @@ export class FrontMatter { this.description = data.description; this.authors = data.authors.map( (authorObject) => new Author(authorObject)); this.katex = data.katex; + this.password = data.password; } // diff --git a/src/transforms/optional-components.js b/src/transforms/optional-components.js index b532379..14ca533 100644 --- a/src/transforms/optional-components.js +++ b/src/transforms/optional-components.js @@ -10,6 +10,13 @@ export default function(dom, data) { const article = dom.querySelector('d-article'); + let interstitial = dom.querySelector('d-interstitial'); + if (!interstitial && data.password) { + interstitial = dom.createElement('d-interstitial'); + interstitial.password = data.password; + dom.body.insertBefore(interstitial, article); + } + let h1 = dom.querySelector('h1'); if (h1) { if (!data.title) {