Adding ability to share a link to a filled out WAKI-LIBS form.

3 months ago · c95a3c27e5
parent 13371126fb
commit c95a3c27e5
3 changed files with 77 additions and 9 deletions
--- a/batch/process_wiki_article.py
+++ b/batch/process_wiki_article.py
@ -1,3 +1,4 @@
+import hashlib
 import json
 import random
 import re
@ -96,7 +97,9 @@ def adlibify(wiki_page, min_adlib_rest):
                output_tokens.append(output_token)
                i += 1

-    article = {'title': wiki_page.displaytitle, 'url': wiki_page.canonicalurl}
+    url = wiki_page.canonicalurl
+    url_hash = hashlib.sha1(url.encode('utf-8')).hexdigest()[:8]
+    article = {'title': wiki_page.displaytitle, 'url': url, 'hash': url_hash}
    article['tokens'] = output_tokens

    return article
--- a/web/index.html
+++ b/web/index.html
@ -5,6 +5,20 @@
  <title>WAKI-LIBS</title>
 <style>

+#error {
+  display: none;
+  color: red;
+  font-weight: bold;
+}
+
+#error::before {
+  content: '>> ';
+}
+
+#error::after {
+  content: ' <<';
+}
+
 #inputs {
  display: flex;
  flex-flow: column wrap;
@ -16,6 +30,11 @@
  margin: 0.5em;
 }

+#inputs p label {
+  display: inline-block;
+  width: 10em;
+}
+
 #inputs p input {
  float: right;
 }
@ -47,7 +66,7 @@ button {
  margin-right: 0.3em;
 }

-#article #link {
+#article .link {
  font-size: 10pt;
 }

@ -60,13 +79,15 @@ button {
 </style>
 </head>
 <body>
-<h1>WAKI-LIBS: Wikipedia Ad-Libbed</h1>
-<div id="inputs"></div>
+  <h1>WAKI-LIBS: Wikipedia Ad-Libbed</h1>
+  <div id="error"></div>
+  <div id="inputs"></div>
  <p><button id="show-article">WAKI-LIB!</button>
  <div id="article">
    <div id="header">
      <span id="title"></span>
-      <span id="link"></span>
+      <span class="link">[ <a id="original-article-link" href="#">Original Article</a> ]</span>
+      <span class="link">[ <a id="sharable-link" href="#">Share your WAKI-LIBS!</a> ]</span>
    </div>
    <hr>
    <div id="summary"></div>
--- a/web/script.js
+++ b/web/script.js
@ -4,15 +4,57 @@ function createInputs(article) {
    if(token.adlib_tag) {
      inputs += `
      <p>
-      <label for="token_${token.id}">${token.adlib_tag}</label>
-      <input type="text" id="token_${token.id}" name="token_${token.id}">
+      <label for="token-${token.id}">${token.adlib_tag}</label>
+      <input type="text" id="token-${token.id}" class="token-input" name="token-${token.id}">
      </p>
      `
    }
  })
  document.getElementById('inputs').innerHTML = inputs
+
+  const urlParams = new URL(window.location.toLocaleString()).searchParams
+  if(urlParams.has('stored')) {
+    try {
+      let storedInputs = JSON.parse(atob(urlParams.get('stored')))
+
+      if(storedInputs.h !== article.hash) {
+        showError("Unable to use shared link because it's for an old article, and well, time makes fools of us all.")
+      }
+      else {
+        document.querySelectorAll('.token-input').forEach(function(tokenInput) {
+          let index = tokenInput.id.split('-')[1]
+          tokenInput.value = storedInputs.i[index]
+        });
+      }
+    }
+    catch(err) {
+      showError("Unable to parse shared link.")
+    }
+  }
+}
+
+
+function showError(errorMessage) {
+  errorDiv = document.getElementById('error')
+  errorDiv.innerHTML = errorMessage;
+  errorDiv.style.display = 'block'
 }

+
+function makeSharableLink(article) {
+  let userInputs = {}
+  document.querySelectorAll('.token-input').forEach(function(tokenInput) {
+    let index = tokenInput.id.split('-')[1]
+    userInputs[index] = tokenInput.value
+  });
+
+  let storedInputs = {h: article.hash, i: userInputs}
+  let url = new URL(window.location.toLocaleString())
+  url.searchParams.set('stored', btoa(JSON.stringify(storedInputs)))
+  return(url.toLocaleString())
+}
+
+
 function showArticle(article) {
  const noSpaceBeforeTags = new Set(['.', ',', ')', ';', ':', '!', '?', "''", 'POS'])
  const noSpaceBeforeTokens = new Set(["n't", ']'])
@ -20,7 +62,7 @@ function showArticle(article) {
  const noSpaceAfterTokens = new Set(['['])

  document.getElementById('title').innerHTML = article.title
-  document.getElementById('link').innerHTML = `[ <a href='${article.url}'>Original Article</a> ]`
+  document.getElementById('original-article-link').href = article.url

  let output = ''
  let spaceBefore = false
@ -30,7 +72,7 @@ function showArticle(article) {
    }
    spaceBefore = true

-    let adlibInput = document.getElementById(`token_${token.id}`);
+    let adlibInput = document.getElementById(`token-${token.id}`);
    if(adlibInput && adlibInput.value) {
      output += `<strong>${adlibInput.value}</strong>`
    }
@ -44,10 +86,12 @@ function showArticle(article) {
  })

  document.getElementById('summary').innerHTML = output
+  document.getElementById('sharable-link').href = makeSharableLink(article)

  document.getElementById('article').classList.add('visible')
 }

+
 createInputs(article)

 document.addEventListener('click', function (event) {