Add interstitial splash screen for use with in-review posts on drafts.distill.pub

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 */

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', `
+<style>
+
+.overlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: white;
+
+  opacity: 1;
+  visibility: visible;
+
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  z-index: 2147483647 /* MaxInt32 */
+
+}
+
+.overlay.transparent {
+  background: hsla(0, 0%, 100%, 0.7);
+  transition: background 1s;
+}
+
+.container {
+  position: relative;
+  left: 25%;
+  width: 50%;
+}
+
+h1 {
+  text-decoration: underline;
+  text-decoration-color: hsl(0,100%,40%);
+  margin-bottom: 1em;
+}
+
+input[type="password"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  -webkit-border-radius: none;
+  -moz-border-radius: none;
+  -ms-border-radius: none;
+  -o-border-radius: none;
+  border-radius: none;
+  outline: none;
+
+  font-size: 18px;
+  background: none;
+  width: 25%;
+  padding: 10px;
+  border: none;
+  border-bottom: solid 2px #999;
+  transition: border .3s;
+}
+
+input[type="password"]:focus {
+  border-bottom: solid 2px #333;
+}
+
+input[type="password"].wrong {
+  border-bottom: solid 2px hsl(0,100%,40%);
+}
+
+p small {
+  color: #888;
+}
+
+</style>
+
+<div class="overlay">
+  <div class="container">
+    <h1>This article is in review.</h1>
+    <p>Do not share this URL, or the contents of this article. Thank you!</p>
+    <input id="interstitial-password-input" type="password" name="password" autofocus/>
+    <p><small>Enter the password we shared with you as part of the review process to view the article.</small></p>
+  </div>
+</div>
+`);
+
+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);
+    }
+  }
+
+}

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);

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;
   }
 
   //

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) {