Matthias Andreas Benkard | b3a2c48 | 2020-02-15 20:40:30 +0100 | [diff] [blame] | 1 | // @flow |
| 2 | |
Matthias Andreas Benkard | 6991257 | 2020-02-13 04:41:32 +0100 | [diff] [blame] | 3 | import ProgressSpinner from "../web_modules/elix/define/ProgressSpinner.js"; |
Matthias Andreas Benkard | 8c29ae9 | 2020-02-15 21:04:58 +0100 | [diff] [blame] | 4 | import { cast } from "../cms2/types.js"; |
Matthias Andreas Benkard | 6991257 | 2020-02-13 04:41:32 +0100 | [diff] [blame] | 5 | |
Matthias Andreas Benkard | f550d24 | 2020-02-15 18:49:45 +0100 | [diff] [blame] | 6 | const template = document.createElement('template'); |
| 7 | template.innerHTML = ` |
| 8 | <link rel="stylesheet" type="text/css" href="/cms2/base.css" /> |
| 9 | <link rel="stylesheet" type="text/css" href="/bookmarks/MlkBookmarkSubmissionForm.css" /> |
| 10 | |
| 11 | <form class="pure-form" method="post" action="/bookmarks"> |
| 12 | <fieldset> |
| 13 | <legend>New Bookmark</legend> |
| 14 | |
| 15 | <label for="uri-input">URI:</label> |
| 16 | <input name="uri" id="uri-input" type="text" placeholder="URI" required /> |
| 17 | <elix-progress-spinner id="uri-spinner" hidden></elix-progress-spinner> |
| 18 | |
| 19 | <label for="title-input">Title:</label> |
| 20 | <input name="title" id="title-input" type="text" placeholder="Title" required /> |
| 21 | |
| 22 | <label for="description-input">Description:</label> |
| 23 | <textarea name="description" id="description-input" placeholder="Description"></textarea> |
| 24 | |
| 25 | <label for="visibility-input">Visibility:</label> |
| 26 | <select id="visibility-input" name="visibility" required> |
| 27 | <option value="public" selected>Public</option> |
| 28 | <option value="semiprivate">Semiprivate</option> |
| 29 | <option value="private">Private</option> |
| 30 | </select> |
| 31 | |
| 32 | <div class="controls"> |
| 33 | <button type="submit" class="pure-button pure-button-primary">Submit Bookmark</button> |
| 34 | </div> |
| 35 | </fieldset> |
| 36 | </form>`; |
| 37 | |
Matthias Andreas Benkard | 6991257 | 2020-02-13 04:41:32 +0100 | [diff] [blame] | 38 | export class MlkBookmarkSubmissionForm extends HTMLElement { |
Matthias Andreas Benkard | b3a2c48 | 2020-02-15 20:40:30 +0100 | [diff] [blame] | 39 | /*:: |
| 40 | descriptionInput: HTMLTextAreaElement; |
| 41 | titleInput: HTMLInputElement; |
| 42 | uriInput: HTMLInputElement; |
| 43 | uriSpinner: ProgressSpinner; |
| 44 | */ |
| 45 | |
Matthias Andreas Benkard | 6991257 | 2020-02-13 04:41:32 +0100 | [diff] [blame] | 46 | constructor() { |
| 47 | super(); |
Matthias Andreas Benkard | 4eb7126 | 2020-02-15 14:40:37 +0100 | [diff] [blame] | 48 | |
Matthias Andreas Benkard | f550d24 | 2020-02-15 18:49:45 +0100 | [diff] [blame] | 49 | let shadow = this.attachShadow({mode: "open"}); |
Matthias Andreas Benkard | b3a2c48 | 2020-02-15 20:40:30 +0100 | [diff] [blame] | 50 | shadow.appendChild(template.content.cloneNode(true)); |
Matthias Andreas Benkard | f550d24 | 2020-02-15 18:49:45 +0100 | [diff] [blame] | 51 | |
Matthias Andreas Benkard | b3a2c48 | 2020-02-15 20:40:30 +0100 | [diff] [blame] | 52 | this.descriptionInput = |
Matthias Andreas Benkard | 9e203aa | 2020-02-15 20:47:24 +0100 | [diff] [blame] | 53 | cast(shadow.getElementById('description-input')); |
Matthias Andreas Benkard | b3a2c48 | 2020-02-15 20:40:30 +0100 | [diff] [blame] | 54 | this.titleInput = |
Matthias Andreas Benkard | 9e203aa | 2020-02-15 20:47:24 +0100 | [diff] [blame] | 55 | cast(shadow.getElementById('title-input')); |
Matthias Andreas Benkard | b3a2c48 | 2020-02-15 20:40:30 +0100 | [diff] [blame] | 56 | this.uriInput = |
Matthias Andreas Benkard | 9e203aa | 2020-02-15 20:47:24 +0100 | [diff] [blame] | 57 | cast(shadow.getElementById('uri-input')); |
Matthias Andreas Benkard | b3a2c48 | 2020-02-15 20:40:30 +0100 | [diff] [blame] | 58 | this.uriSpinner = |
Matthias Andreas Benkard | 9e203aa | 2020-02-15 20:47:24 +0100 | [diff] [blame] | 59 | cast(shadow.getElementById('uri-spinner')); |
Matthias Andreas Benkard | 6991257 | 2020-02-13 04:41:32 +0100 | [diff] [blame] | 60 | } |
| 61 | |
| 62 | static get observedAttributes() { |
Matthias Andreas Benkard | c530297 | 2020-02-15 18:36:49 +0100 | [diff] [blame] | 63 | return []; |
Matthias Andreas Benkard | 6991257 | 2020-02-13 04:41:32 +0100 | [diff] [blame] | 64 | } |
| 65 | |
| 66 | connectedCallback () { |
Matthias Andreas Benkard | b3a2c48 | 2020-02-15 20:40:30 +0100 | [diff] [blame] | 67 | this.uriInput.addEventListener('blur', this.onUriBlur.bind(this)); |
Matthias Andreas Benkard | f550d24 | 2020-02-15 18:49:45 +0100 | [diff] [blame] | 68 | this.uriInput.value = this.uri || ""; |
Matthias Andreas Benkard | b3a2c48 | 2020-02-15 20:40:30 +0100 | [diff] [blame] | 69 | this.titleInput.value = this.titleText || ""; |
Matthias Andreas Benkard | f550d24 | 2020-02-15 18:49:45 +0100 | [diff] [blame] | 70 | this.descriptionInput.innerText = this.description || ""; |
Matthias Andreas Benkard | 6991257 | 2020-02-13 04:41:32 +0100 | [diff] [blame] | 71 | } |
| 72 | |
Matthias Andreas Benkard | edd7e5e | 2020-02-15 22:16:58 +0100 | [diff] [blame^] | 73 | disconnectedCallback () { |
| 74 | this.uriInput.removeEventListener('blur', this.onUriBlur.bind(this)); |
| 75 | } |
| 76 | |
Matthias Andreas Benkard | b3a2c48 | 2020-02-15 20:40:30 +0100 | [diff] [blame] | 77 | attributeChangedCallback(name /*:string*/, oldValue /*:string*/, newValue /*:string*/) { |
Matthias Andreas Benkard | 6991257 | 2020-02-13 04:41:32 +0100 | [diff] [blame] | 78 | } |
| 79 | |
Matthias Andreas Benkard | 4eb7126 | 2020-02-15 14:40:37 +0100 | [diff] [blame] | 80 | get uri() { |
| 81 | return this.getAttribute("uri"); |
| 82 | } |
| 83 | |
Matthias Andreas Benkard | b3a2c48 | 2020-02-15 20:40:30 +0100 | [diff] [blame] | 84 | get titleText() { |
Matthias Andreas Benkard | 4eb7126 | 2020-02-15 14:40:37 +0100 | [diff] [blame] | 85 | return this.getAttribute("title"); |
| 86 | } |
| 87 | |
| 88 | get description() { |
| 89 | return this.getAttribute("description"); |
| 90 | } |
| 91 | |
Matthias Andreas Benkard | 6991257 | 2020-02-13 04:41:32 +0100 | [diff] [blame] | 92 | focus() { |
Matthias Andreas Benkard | c530297 | 2020-02-15 18:36:49 +0100 | [diff] [blame] | 93 | if (!this.uriInput.value) { |
| 94 | this.uriInput.focus(); |
| 95 | } else if (!this.titleInput.value) { |
| 96 | this.titleInput.focus(); |
Matthias Andreas Benkard | 8bd0196 | 2020-02-13 05:03:30 +0100 | [diff] [blame] | 97 | this.onUriBlur(); |
Matthias Andreas Benkard | fc427e2 | 2020-02-13 05:00:54 +0100 | [diff] [blame] | 98 | } else { |
Matthias Andreas Benkard | c530297 | 2020-02-15 18:36:49 +0100 | [diff] [blame] | 99 | this.descriptionInput.focus(); |
Matthias Andreas Benkard | fc427e2 | 2020-02-13 05:00:54 +0100 | [diff] [blame] | 100 | } |
Matthias Andreas Benkard | 6991257 | 2020-02-13 04:41:32 +0100 | [diff] [blame] | 101 | } |
| 102 | |
| 103 | async onUriBlur() { |
Matthias Andreas Benkard | c530297 | 2020-02-15 18:36:49 +0100 | [diff] [blame] | 104 | if (!this.uriInput.value) { |
Matthias Andreas Benkard | 6991257 | 2020-02-13 04:41:32 +0100 | [diff] [blame] | 105 | return; |
| 106 | } |
| 107 | |
Matthias Andreas Benkard | c530297 | 2020-02-15 18:36:49 +0100 | [diff] [blame] | 108 | this.uriSpinner.hidden = false; |
| 109 | this.uriSpinner.playing = true; |
| 110 | let searchParams = new URLSearchParams({'uri': this.uriInput.value}); |
Matthias Andreas Benkard | b3a2c48 | 2020-02-15 20:40:30 +0100 | [diff] [blame] | 111 | console.log(`/bookmarks/page-info?${searchParams.toString()}`); |
| 112 | let fetchUrl = new URL(`/bookmarks/page-info?${searchParams.toString()}`, document.URL); |
Matthias Andreas Benkard | 6991257 | 2020-02-13 04:41:32 +0100 | [diff] [blame] | 113 | let r = await fetch(fetchUrl); |
Matthias Andreas Benkard | c530297 | 2020-02-15 18:36:49 +0100 | [diff] [blame] | 114 | this.uriSpinner.hidden = true; |
| 115 | this.uriSpinner.playing = false; |
Matthias Andreas Benkard | 6991257 | 2020-02-13 04:41:32 +0100 | [diff] [blame] | 116 | |
| 117 | if (!r.ok) { |
| 118 | return; |
| 119 | } |
| 120 | |
| 121 | let pageInfo = await r.json(); |
Matthias Andreas Benkard | c530297 | 2020-02-15 18:36:49 +0100 | [diff] [blame] | 122 | this.titleInput.value = pageInfo.title; |
Matthias Andreas Benkard | 6991257 | 2020-02-13 04:41:32 +0100 | [diff] [blame] | 123 | } |
Matthias Andreas Benkard | 6991257 | 2020-02-13 04:41:32 +0100 | [diff] [blame] | 124 | } |
| 125 | |
| 126 | customElements.define("mlk-bookmark-submission-form", MlkBookmarkSubmissionForm); |