From 9197e3b6b3d5421bd29f6a2efbf9caf3bbaccf26 Mon Sep 17 00:00:00 2001
From: Mischa POSLAWSKY <perl@shiar.org>
Date: Fri, 2 Jul 2021 18:54:43 +0200
Subject: [PATCH] word/edit: story column to store text descriptions

Copy Wikipedia intros as basic summary, for additional details/flavour
after guessing in future quizzes?
---
 editor.css        |  4 ++--
 tools/word.pg.sql |  3 +++
 writer.js         | 13 ++++++++++++-
 writer.plp        | 11 +++++++++++
 4 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/editor.css b/editor.css
index fd92601..077de81 100644
--- a/editor.css
+++ b/editor.css
@@ -24,11 +24,11 @@ form > ul > li > label + * {
 }
 
 .multiinput,
-input,select {
+input, textarea, select {
 	box-sizing: border-box;
 	flex-grow: 1;
 }
-input:not([type=submit]) {
+input:not([type=submit]), textarea {
 	padding: .4rem;
 	font-family: monospace;
 }
diff --git a/tools/word.pg.sql b/tools/word.pg.sql
index fb1e5d1..ec552c9 100644
--- a/tools/word.pg.sql
+++ b/tools/word.pg.sql
@@ -20,6 +20,7 @@ CREATE TABLE word (
 	source     text                 CHECK (source ~ '^https?://'),
 	thumb      text[],
 	wptitle    text,
+	story      text,
 	creator    integer              REFERENCES login (id),
 	created    timestamptz          DEFAULT now(),
 	updated    timestamptz,
@@ -37,6 +38,7 @@ COMMENT ON COLUMN word.cover      IS 'highlight if selected';
 COMMENT ON COLUMN word.source     IS 'URI of downloaded image';
 COMMENT ON COLUMN word.thumb      IS 'ImageMagick convert options to create thumbnail from source image';
 COMMENT ON COLUMN word.wptitle    IS 'reference Wikipedia article';
+COMMENT ON COLUMN word.story      IS 'paragraph defining or describing the entity, wikipedia intro';
 COMMENT ON COLUMN word.updated    IS 'last significant change';
 COMMENT ON COLUMN word.creator    IS 'user responsible for initial submit';
 
@@ -59,6 +61,7 @@ CREATE OR REPLACE VIEW _word_ref AS
 		coalesce(r.source,  w.source ) source,
 		coalesce(r.thumb,   w.thumb  ) thumb,
 		coalesce(r.wptitle, w.wptitle) wptitle,
+		coalesce(r.story,   w.story  ) story,
 		r.creator, r.created, r.updated,
 		CASE WHEN r.source IS NULL THEN w.id ELSE r.id END id -- image id
 	FROM word r
diff --git a/writer.js b/writer.js
index ebace02..a958732 100644
--- a/writer.js
+++ b/writer.js
@@ -36,10 +36,21 @@ document.addEventListener('DOMContentLoaded', () => {
 					});
 				});
 
+				// copy first paragraph to story
+				let wptext = json.parse.text['*'];
+				let storyinput = document.getElementById('story');
+				if (storyinput && wptext) {
+					storyinput.innerHTML = wptext
+						.replace(/<h2.*/s, '') // prefix
+						.replace(/<table.*?<\/table>/sg, '') // ignore infobox
+						.match(/<p>(.*?)<\/p>/s)[0] // first paragraph
+						.replace(/<[^>]*>/g, '') // strip html tags
+				}
+
 				// list images in article html
 				let imginput = document.getElementById('source');
 				if (!imginput || imginput.value) return;
-				let wpimages = json.parse.text['*'].match(/<img\s[^>]+>/g);
+				let wpimages = wptext.match(/<img\s[^>]+>/g);
 				let wpselect = wpinput.parentNode.appendChild(document.createElement('ul'));
 				wpselect.className = 'popup';
 				wpimages.forEach(img => {
diff --git a/writer.plp b/writer.plp
index 84dc4a8..39a373b 100644
--- a/writer.plp
+++ b/writer.plp
@@ -99,6 +99,7 @@ my %wordcol = (
 	wptitle => {-label => 'Wikipedia'},
 	source  => {-label => 'Image'},
 	thumb   => {-label => 'Convert options', -multiple => 1},
+	story   => {-label => 'Story', type => 'textarea'},
 );
 
 if (my $search = $fields{q}) {
@@ -272,6 +273,16 @@ package Shiar_Sheet::FormRow {
 				'</select>',
 			);
 		}
+		elsif ($attr->{type} eq 'textarea') {
+			return (
+				(map {
+					sprintf('<label for="%s">%s</label>', $col, $_)
+				} $attr->{-label} // ()),
+				sprintf('<textarea id="%s" name="%1$s"%s>%s</textarea>',
+					$col, $html, EscapeHTML($val)
+				),
+			);
+		}
 		elsif ($attr->{type} eq 'checkbox') {
 			$html .= ' checked' if $val;
 			return sprintf(
-- 
2.30.0