rpdata/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

story: Added add story modal, reorganized story page to allow modals and live updates.

Browse Source
This commit is contained in:
gisle
2018-09-23 15:57:53 +02:00
parent a2d949edaf
commit ae31accd81
13 changed files with 201 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
marko/page/story-content/components/edit-story-modal/index.marko
+3 -1
View File
@@ -3,6 +3,7 @@
<p key="error" class="color-error">${state.error}</p>
<h2>Meta</h2>
<label>Title</label>
<input key="name" placeholder="Name" class="big" on-change("change", "name") value=state.values.name />
@@ -14,7 +15,7 @@
<option for(category in input.categories) value=category.name selected=(state.values.category === category.name)>${category.name}</option>
</select>
<label>Options</label>
<h2>Options</h2>
<toggle value=state.values.listed on="Listed" off="Unlisted"
onDesc="The story will be visible on the front page."
offDesc="A direct link is required to view this story."
@@ -24,5 +25,6 @@
offDesc="Only you can add chapters to this story."
on-change("change", "open") />
<h2></h2>
<button disabled=state.loading on-click("save")>Save</button>
</modal>
marko/page/story-content/components/story-tag-options/component.js
-62
View File
@@ -1,62 +0,0 @@
const {tagApi} = require("../../../../../rpdata/api/Tag")
module.exports = class {
onCreate() {
this.state = {
values: {
name: "",
kind: "Character",
},
tags: [],
suggestions: [],
}
}
onMount() {
tagApi.list().then(list => {
this.state.tags = list
}).catch(err => {})
this.getEl("name").addEventListener("keydown", ev => {
setTimeout(() => {
const name = this.getEl("name").value
const kind = this.getEl("kind").value
const search = name.toLowerCase()
this.state.values = {name, kind}
this.state.suggestions = []
const suggestions = this.state.tags.filter(t => t.name.toLowerCase().includes(search))
if (suggestions.length > 0 && suggestions.length < 20) {
if (suggestions.length > 1 || suggestions[0].name !== name) {
this.state.suggestions = suggestions
}
}
}, 100)
})
}
add(tag) {
this.state.values = {
kind: "Event",
name: "",
}
this.emit("add", tag)
}
change(key, ev) {
const value = ev.target.value
this.state.values[key] = value
}
applySuggestion(tag) {
this.state.values = {
name: tag.name,
kind: tag.kind,
}
this.state.suggestions = []
}
}
marko/page/story-content/components/story-tag-options/index.marko
-21
View File
@@ -1,21 +0,0 @@
<div class="tag-options">
<input key="name" placeholder="Name" class="big" on-change("change", "name") value=state.values.name />
<select key="kind" placeholder="Kind" class="big" on-change("change", "kind") value=state.values.kind>
<option value="Character" selected=(state.values.kind === "Character")>Character</option>
<option value="Event" selected=(state.values.kind === "Event")>Event</option>
<option value="Location" selected=(state.values.kind === "Location")>Location</option>
<option value="Organization" selected=(state.values.kind === "Organization")>Organization</option>
<option value="Series" selected=(state.values.kind === "Series")>Series</option>
</select>
<div class="suggestion-list" if(state.suggestions.length > 0)>
<div class="header color-menu">Suggestions:</div>
<a for(tag in state.suggestions) on-click("applySuggestion", tag) class=["tag", "color-tag-" + tag.kind.toLowerCase()]>${tag.name}</a>
</div>
<button disabled=(input.loading) on-click("add", state.values)>Add</button>
<div for(tag in (input.tags || [])) class="tag" key=(tag.kind+":"+tag.name)>
<div class=("content color-tag-"+tag.kind.toLowerCase())>${tag.name}</div>
<button on-click("emit", "remove", tag)>Remove</button>
</div>
</div>
marko/page/story-content/components/story-tag-options/style.less
-46
View File
@@ -1,46 +0,0 @@
div.tag-options {
div.tag {
padding: 0.25em;
border-bottom: 1px solid rgba(0, 220, 255, 0.125);
div.content {
width: 80%;
display: inline-block;
}
button {
width: 20%;
display: inline-block;
margin: 0;
}
}
div.suggestion-list {
margin: 2em 0;
a.tag {
display: inline-block;
margin: 0.25em 0.5ch;
padding: 0.0625em 0.5ch;
outline: 1px solid;
opacity: 0.75;
user-select: none;
}
a.tag:hover {
opacity: 1;
cursor: pointer;
}
div.header {
display: block;
margin: 0.5em 0.5ch;
padding: 0.0625em 0.5ch;
opacity: 0.5;
user-select: none;
}
}
}
marko/page/story/components/add-story-modal/component.js
+79
View File
@@ -0,0 +1,79 @@
const moment = require("moment")
const {storyApi} = require("../../../../../rpdata/api/Story")
module.exports = class {
onCreate() {
this.state = {
error: null,
values: {
name: "",
fictionalDate: "",
category: "Info",
open: false,
listed: false,
},
tags: [],
loading: false,
}
this.filled = false
}
addTag(tag) {
if (tag.name == "" || tag.kind == "") {
return
}
this.state.tags = this.state.tags.filter(t => t.kind !== tag.kind || t.name !== tag.name).concat([tag])
}
removeTag(tag) {
this.state.tags = this.state.tags.filter(t => t.kind !== tag.kind || t.name !== tag.name)
}
change(key, ev) {
this.state.values[key] = ev.target.value
this.state.values = Object.assign({}, this.state.values)
}
save() {
const values = this.state.values
let fictionalDate = new Date(values.fictionalDate + " UTC")
if (values.fictionalDate != "") {
if (Number.isNaN(fictionalDate)) {
this.state.error = `Could not parse ${values.fictionalDate} as date`
return
}
} else {
fictionalDate = null
}
const input = {name: values.name, category: values.category, open: values.open, listed: values.listed, tags: this.state.tags}
if (fictionalDate != null) {
input.fictionalDate = fictionalDate
}
console.log(input)
this.state.loading = true
storyApi.add(input).then(data => {
this.emit("add", data)
this.emit("close")
this.state.tags = []
this.state.values = {name: "", fictionalDate: "", category: "", open: "", listed: ""}
window.location = `/story/${data.id}/`
}).catch(errs => {
console.warn("Failed to edit:", errs)
this.state.error = "Failed to edit: " + errs[0].message
this.state.loading = false
})
}
close() {
this.emit("close")
}
}
marko/page/story/components/add-story-modal/index.marko
+33
View File
@@ -0,0 +1,33 @@
<modal class="modal color-text nolabel" key="modal2" enabled=(input.enabled) closable on-close("close") >
<h1>Edit Story</h1>
<p key="error" class="color-error">${state.error}</p>
<h2>Meta</h2>
<label>Title</label>
<input key="name" placeholder="Name" class="big" on-change("change", "name") value=state.values.name />
<label>IC Date</label>
<input key="icdate" placeholder="IC Date" on-change("change", "fictionalDate") value=state.values.fictionalDate />
<label>Category</label>
<select key="category" placeholder="Kind" on-change("change", "category")>
<option for(category in input.categories) value=category.name selected=(state.values.category === category.name)>${category.name}</option>
</select>
<h2>Tags</h2>
<story-tag-options small tags=state.tags loading=state.loading on-remove("removeTag") on-add("addTag") />
<h2>Options</h2>
<toggle value=state.values.listed on="Listed" off="Unlisted"
onDesc="The story will be visible on the front page."
offDesc="A direct link is required to view this story."
on-change("change", "listed") />
<toggle value=state.values.open on="Open" off="Closed"
onDesc="Other authors can add chapters to this story."
offDesc="Only you can add chapters to this story."
on-change("change", "open") />
<h2></h2>
<button disabled=state.loading on-click("save")>Add Story</button>
</modal>
marko/page/story/components/page/component.js
+16
View File
@@ -0,0 +1,16 @@
module.exports = class {
onCreate(input) {
this.state = {
stories: input.stories,
modal: null,
}
}
open(modal) {
this.state.modal = modal
}
close() {
this.state.modal = null
}
}
marko/page/story/components/page/index.marko
+5
View File
@@ -0,0 +1,5 @@
<story-menu categories=input.categories selected=(input.selected || {}) menuTags=input.menuTags user=input.user on-open("open") />
<main>
<story-list stories=state.stories />
<add-story-modal enabled=(state.modal === "story.add") stories=input.stories categories=input.categories on-close("close") />
</main>
marko/page/story/components/story-menu/component.js
+5
View File
@@ -0,0 +1,5 @@
module.exports = class {
open(modalName) {
this.emit("open", modalName)
}
}
marko/page/story/components/story-menu/index.marko
+1
View File
@@ -1,6 +1,7 @@
<menu user=input.user>
<menu-header>Story</menu-header>
<menu-link key="index" selected=input.selected.index icon="S" href="/story/">Stories</menu-link>
<menu-link dark key="_create" on-click("open", "story.add") icon="+">Add Story</menu-link>
<menu-gap />
<menu-header>Categories</menu-header>
<menu-link for(category in (input.categories||[])) key=(category.name) selected=(input.selected.category == category.name) href=`/story/by-category/${category.name}` icon=category.name.charAt(0)>${category.name}</menu-link>
marko/page/story/list.marko
+1 -4
View File
@@ -1,9 +1,6 @@
<include("../layout", {title: "Stories", site: "story"})>
<@body>
<background src="/assets/images/bg.png" opacity=0.25 />
<story-menu categories=input.categories selected=(input.selected || {}) menuTags=input.menuTags user=input.user />
<main>
<story-list stories=input.stories />
</main>
<page user=input.user stories=input.stories categories=input.categories />
</@body>
</include>