git ssb - refine form submission and change file folder

Zach committed on 7/8/2018, 7:12:13 AM
Parent: f357e1396450f2c11a97f1fe5b6e70fb1c7365f2

building/aesthetic/stylesheets/main.css	changed
building/components/branchPlacard.js	changed
building/components/branchPlacardForm.js	added
volunteers/displayBranchInfo.js	changed
volunteers/setBranchName.js	deleted
volunteers/formHandler.js	added
branch/info.txt	added
distro/info.txt	deleted

building/aesthetic/stylesheets/main.cssView
		@@ -273,8 +273,9 @@
273	273 …	position: absolute;
274	274 …	z-index: 2;
275	275 …	background: var(--background-color);
WritePreview
276	276 …	left: 0;
	277 …	+ padding-left: 1em;
277	278 …	height: 100%;
278	279 …	}
279	280 …
280	281 …	.hidden{

building/components/branchPlacard.jsView
		@@ -2,33 +2,25 @@
2	2 …	const raw = require('nanohtml/raw')
3	3 …	const md = require('markdown-it')()
4	4 …
5	5 …	const button = require('./actionButtons')
	6 …	+const editForm = require('./branchPlacardForm')
6	7 …
7	8 …	module.exports = view
8	9 …
9	10 …	function view (state, emit) {
10		- if (state.branch.title) {
	11 …	+ if (state.branch.name) {
11	12 …	var branch = state.branch
12	13 …	return html`
13	14 …	<section id='branch-placard'>
14	15 …	<div id='placard' class='transition-left'>
15		- <h1>${branch.title} ${button.editDetails(state.identity)}</h1>
	16 …	+ <h1>${branch.name} ${button.editDetails(state.identity)}</h1>
16	17 …	${render(branch.description)}
17	18 …	<p>Want to start your own zine library?<span> ${button.makeBranch()}</span></p>
18	19 …	</div>
19		- <div id='placard-form' class='form-card'>
20		- <h1>Library Details</h1>
21		- <p id='placard-form-close' onclick=${button.placardClose}>close</p>
22		- <form>
23		- <label for='branch name'>Branch Name:<input type='text' name='title' placeholder='the name of your library'/></label>
24		- <label for='branch description'>description:</label><textarea name='description' placeholder='what you wanna say about yr library!'/></textarea>
25		- <input type='submit' />
26		- </form>
27		- </div>
	20 …	+ ${editForm(state, emit)}
28	21 …	</section>
29		-
30		- `
	22 …	+ `
31	23 …	} else {
32	24 …	return html`<h1>loading</h1>`
33	25 …	}
34	26 …	}

building/components/branchPlacardForm.jsView
		@@ -1,0 +1,26 @@
	1 …	+const html = require('nanohtml')
	2 …	+
	3 …	+const button = require('./actionButtons')
	4 …	+
	5 …	+module.exports = (state, emit) => {
	6 …	+ var branch = state.branch
	7 …	+ if (state.branch.name) {
	8 …	+ return html`
	9 …	+ <div id='placard-form' class='form-card'>
	10 …	+ <h1>Library Details</h1>
	11 …	+ <p id='placard-form-close' onclick=${button.placardClose}>close</p>
	12 …	+ <form onsubmit=${updateBranch}>
	13 …	+ <label for='branch name'>Branch Name:<input type='text' name='name' value=${branch.name} /></label>
	14 …	+ <label for='branch description'>description:</label><textarea name='description' value=${branch.description}/>${branch.description}</textarea>
	15 …	+ <input type='submit' />
	16 …	+ </form>
	17 …	+ </div>
	18 …	+ `
	19 …	+ }
	20 …	+
	21 …	+ function updateBranch (e) {
	22 …	+ e.preventDefault()
	23 …	+ var form = e.currentTarget
	24 …	+ emit('branch updated', form)
	25 …	+ }
	26 …	+}

volunteers/displayBranchInfo.jsView
		@@ -1,17 +1,32 @@
1	1 …	const smarkt = require('smarkt')
2	2 …
	3 …	+const formHandler = require('./formHandler')
	4 …	+
3	5 …	var archive = new DatArchive(window.location)
4	6 …
5	7 …	function store (state, emitter) {
6	8 …	state.branch = {}
7	9 …	emitter.on('DOMContentLoaded', function () {
8		- archive.readFile('distro/info.txt')
9		- .then(file => {
10		- var branchInfo = smarkt.parse(file)
11		- state.branch = branchInfo
	10 …	+ mapInfoToState(state, emitter)
	11 …	+ })
	12 …	+
	13 …	+ emitter.on('branch updated', function (form) {
	14 …	+ var infoAsObj = formHandler.handle(form)
	15 …	+ var infoAsTxt = smarkt.stringify(infoAsObj)
	16 …	+
	17 …	+ state.branch = infoAsObj
	18 …	+ archive.writeFile('branch/info.txt', infoAsTxt)
	19 …	+ .then(emitter.emit('pushState'))
	20 …	+ })
	21 …	+
	22 …	+ function mapInfoToState (state, emitter) {
	23 …	+ archive.readFile('branch/info.txt')
	24 …	+ .then(info => {
	25 …	+ var infoAsObj = smarkt.parse(info)
	26 …	+ state.branch = infoAsObj
12	27 …	emitter.emit('pushState')
13	28 …	})
14		- })
	29 …	+ }
15	30 …	}
16	31 …
17	32 …	module.exports = store

volunteers/setBranchName.jsView

volunteers/formHandler.jsView
		@@ -1,0 +1,10 @@
	1 …	+module.exports = {handle}
	2 …	+
	3 …	+function handle (form) {
	4 …	+ var formData = new FormData(form)
	5 …	+ var data = {}
	6 …	+ for (var pair of formData.entries()) {
	7 …	+ data[pair[0]] = pair[1]
	8 …	+ }
	9 …	+ return data
	10 …	+}

branch/info.txtView
		@@ -1,0 +1,8 @@
	1 …	+name: Zach's Zine Library!
	2 …	+----
	3 …	+description: The first dat zine library, but hopefully not the last!
	4 …	+
	5 …	+Collecting zines I wrote, my friends wrote, and ones that I discovered through sharing on here.
	6 …	+
	7 …	+
	8 …	+Send me your zine! [webmaster@coolguy.website](mailto:webmaster@coolguy.website) or through [Scuttlebutt](https://scuttlebutt.nz) (where I am Zach!)

distro/info.txtView
		@@ -1,9 +1,0 @@
1		-title: Zach Mandeville's Zine Library
2		-----
3		-description:
4		-
5		-The first dat zine library, but hopefully not the last! Collecting zines I wrote, my friends wrote, and ones that I discovered through sharing on here.
6		-
7		-
8		-Send me your zine! [webmaster@coolguy.website](mailto:webmaster@coolguy.website) or through [Scuttlebutt](https://scuttlebutt.nz) (where I am Zach!)
9		-

Zach! / dat-zine-library