src/views/admin/edit_post.html
<title>edit post</title>
<article class="post edit">
<header>
<h2>edit post</h2>
<h3>{{&title}}</h3>
</header>
<form id="edit">
<section class="flex-row">
<label for="date">date</label>
<input type="date" id="date" name="date" value="{{&date}}" required onkeydown="return event.key != 'Enter';" />
</section>
<section class="flex-row">
<label for="url">url</label>
<input type="text" id="url" value="{{&url}}" required pattern="[0-9a-z_]+"
onkeydown="return event.key != 'Enter';" disabled />
<fieldset hx-on:click="customize()">
<input type="checkbox" id="custom" />
<legend>custom?</legend>
<callout id="url_warn"><i class="nf nf-fa-warning"></i> urls must alphanumeric, lowercase, and underscored.
</callout>
</fieldset>
</section>
<section class="flex-row">
<label for="title">title</label>
<input type="text" name="title" id="title" value="{{&title}}" hx-on:keyup="sanitize()" required
onkeydown="return event.key != 'Enter';" hx-target="#url_warn" />
</section>
<section class="flex-row">
<label for="subtitle">subtitle</label>
<input type="text" name="subtitle" id="subtitle" value="{{&subtitle}}" required
onkeydown="return event.key != 'Enter';" />
</section>
<section class="flex-row">
<label for="excerpt">excerpt</label>
<textarea id="excerpt" name="excerpt" required>{{&excerpt}}</textarea>
</section>
<section class="flex-row">
<label for="content">content</label>
<textarea id="content" name="content" required>{{&content}}</textarea>
</section>
<section class="flex-row">
<label for="postTags">tags</label>
<section id="tagCloud">
<input type="hidden" name="tags" value="" />
{{&tagcloud}}
</section>
<input type="text" list="tags" id="postTags" name="postTags" hx-on:change="tagChange()"
placeholder="add tags..." onkeydown="return event.key != 'Enter';" />
<datalist id="tags">
{{&tags}}
</datalist>
</section>
<section class="flex-row">
<label for="postCats">categories</label>
<section id="pounce">
<input type="hidden" name="cats" value="" />
{{&pounce}}
</section>
<input type="text" list="cats" id="postCats" name="postCats" hx-on:change="meow()"
placeholder="add categories..." onkeydown="return event.key != 'Enter';" />
<datalist id="cats">
{{&cats}}
</datalist>
</section>
<section class="flex-row">
<fieldset>
<label for="live">published</label><br />
<input type="checkbox" id="live" name="live" />
<legend>live?</legend>
</fieldset>
</section>
<header>
<button type="submit" id="submitCaptain">save</button>
<button id="preview" onclick="previewPost(event)">preview</button>
</header>
</form>
</article>
<article class="post" id="previewDOM"></article>
<script>
function sanitize() {
if (!htmx.find("#custom").checked) {
htmx.find("#url").value = htmx.find("#title").value.toString().trim().toLowerCase().replace(/ /g, "_").replace(/[^0-9a-z_]/g, "");
}
}
function customize() {
htmx.find("#custom").toggleAttribute("checked");
htmx.find("#url").toggleAttribute("disabled");
htmx.toggleClass(htmx.find("#url_warn"), "revealed");
sanitize();
}
function meow() {
let val = htmx.values(htmx.find("#edit"));
let cat = val["postCats"].toString();
if (!Object.values(val["cats"]).includes(cat)) {
htmx.find("#pounce").innerHTML += `<button onclick="remove(event, 'btn${cat}')" id="btn${cat}" class="cat">${cat}<input type="hidden" name="cats" value="${cat}"/></button>`;
}
htmx.find("#postCats").value = "";
}
function tagChange() {
let val = htmx.values(htmx.find("#edit"));
let tag = val["postTags"].toString();
if (!Object.values(val["tags"]).includes(tag)) {
htmx.find("#tagCloud").innerHTML += `<button onclick="remove(event, 'btn${tag}')" id="btn${tag}" class="tag">${tag}<input type="hidden" name="tags" value="${tag}"/></button>`;
}
htmx.find("#postTags").value = "";
}
function remove(e, id) {
e.preventDefault();
htmx.find("#" + id).outerHTML = '';
}
function previewPost(e) {
e.preventDefault();
let dom = htmx.find('#previewDOM');
let val = htmx.values(htmx.find("#edit"));
dom.innerHTML = "<header><h2>" + val.title + "</h2><h3>" + val.subtitle + '</h3></header>' + val.content;
}
</script>
