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

2018-09-23 15:57:53 +02:00
parent a2d949edaf
commit ae31accd81
13 changed files with 201 additions and 8 deletions
@@ -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>
@@ -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 = []
-  }
-}
@@ -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>
@@ -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;
-    }
-  }
-}