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

main
gamerdonkey 2023-01-09 05:28:35 +00:00
parent 13371126fb
commit c95a3c27e5
3 changed files with 77 additions and 9 deletions

View File

@ -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

View File

@ -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;
}
@ -61,12 +80,14 @@ button {
</head>
<body>
<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>

View File

@ -4,14 +4,56 @@ 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'])
@ -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) {