diff options
Diffstat (limited to 'src/main/resources')
3 files changed, 102 insertions, 58 deletions
diff --git a/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js b/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js new file mode 100644 index 0000000..25de54b --- /dev/null +++ b/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js @@ -0,0 +1,97 @@ +import {html, render} from "../../web_modules/lit-html.js"; +import ProgressSpinner from "../web_modules/elix/define/ProgressSpinner.js"; + +export class MlkBookmarkSubmissionForm extends HTMLElement { + constructor() { + super(); + this.attachShadow({mode: "open"}); + } + + static get observedAttributes() { + return ["greetee"]; + } + + connectedCallback () { + this.render(); + } + + attributeChangedCallback(name, oldValue, newValue) { + this.render(); + } + + focus() { + let uriInput = this.shadowRoot.getElementById('uri-input'); + uriInput.focus(); + } + + async onUriBlur() { + let titleInput = this.shadowRoot.getElementById('title-input'); + let uriInput = this.shadowRoot.getElementById('uri-input'); + let uriSpinner = this.shadowRoot.getElementById('uri-spinner'); + + if (!uriInput.value) { + return; + } + + uriSpinner.hidden = false; + uriSpinner.playing = true; + let searchParams = new URLSearchParams({'uri': uriInput.value}); + console.log(`/bookmarks/page-info?${searchParams}`); + let fetchUrl = new URL(`/bookmarks/page-info?${searchParams}`, document.URL); + let r = await fetch(fetchUrl); + uriSpinner.hidden = true; + uriSpinner.playing = false; + + if (!r.ok) { + return; + } + + let pageInfo = await r.json(); + titleInput.value = pageInfo.title; + } + + render() { + const template = html` + <link rel="stylesheet" type="text/css" href="/cms2/base.css" /> + + <form class="pure-form pure-form-aligned" method="post"> + <fieldset> + <legend>New Bookmark</legend> + + <div class="pure-control-group"> + <label for="uri-input">URI:</label> + <input name="uri" id="uri-input" type="text" placeholder="URI" required + @blur=${this.onUriBlur.bind(this)}/> + <elix-progress-spinner id="uri-spinner" hidden></elix-progress-spinner> + </div> + + <div class="pure-control-group"> + <label for="title-input">Title:</label> + <input name="title" id="title-input" type="text" placeholder="Title" required/> + </div> + + <div class="pure-control-group"> + <label for="description-input">Description:</label> + <textarea name="description" id="description-input" placeholder="Description"></textarea> + </div> + + <div class="pure-control-group"> + <label for="visibility-input">Visibility:</label> + <select id="visibility-input" name="visibility" required> + <option value="public">Public</option> + <option value="semiprivate" selected>Semiprivate</option> + <option value="private">Private</option> + </select> + </div> + + <div class="pure-controls"> + <button type="submit" class="pure-button pure-button-primary">Submit Bookmark</button> + </div> + </fieldset> + </form>`; + + render(template, this.shadowRoot); + } +} + +customElements.define("mlk-bookmark-submission-form", MlkBookmarkSubmissionForm); diff --git a/src/main/resources/META-INF/resources/bookmarks/bookmarkList.js b/src/main/resources/META-INF/resources/bookmarks/bookmarkList.js index 4c8287a..a6f78e6 100644 --- a/src/main/resources/META-INF/resources/bookmarks/bookmarkList.js +++ b/src/main/resources/META-INF/resources/bookmarks/bookmarkList.js @@ -1,28 +1,9 @@ document.addEventListener('DOMContentLoaded', () => { let bookmarkSubmissionPane = document.getElementById( 'bookmark-submission-pane'); - let titleInput = document.getElementById('title-input'); - let uriInput = document.getElementById('uri-input'); - let uriSpinner = document.getElementById('uri-spinner'); + let bookmarkSubmissionForm = document.getElementById( + 'bookmark-submission-form'); - bookmarkSubmissionPane.addEventListener('opened', () => uriInput.focus()); - - uriInput.addEventListener('blur', async () => { - uriSpinner.hidden = false; - uriSpinner.playing = true; - let searchParams = new URLSearchParams({'uri': uriInput.value}); - console.log(`/bookmarks/page-info?${searchParams}`); - let fetchUrl = new URL(`/bookmarks/page-info?${searchParams}`, document.URL); - let r = await fetch(fetchUrl); - uriSpinner.hidden = true; - uriSpinner.playing = false; - - if (!r.ok) { - return; - } - - let pageInfo = await r.json(); - titleInput.value = pageInfo.title; - }); + bookmarkSubmissionPane.addEventListener('opened', () => bookmarkSubmissionForm.focus()); }); diff --git a/src/main/resources/templates/benki/bookmarks/bookmarkList.html b/src/main/resources/templates/benki/bookmarks/bookmarkList.html index 2c35249..566bfb2 100644 --- a/src/main/resources/templates/benki/bookmarks/bookmarkList.html +++ b/src/main/resources/templates/benki/bookmarks/bookmarkList.html @@ -13,47 +13,13 @@ {! #if authenticated !} <script type="module" src="/web_modules/elix/define/ExpandableSection.js"></script> - <script type="module" src="/web_modules/elix/define/ProgressSpinner.js"></script> - + <script type="module" src="/bookmarks/MlkBookmarkSubmissionForm.js" defer></script> <script type="module" src="/bookmarks/bookmarkList.js" defer></script> <elix-expandable-section id="bookmark-submission-pane"> <h2 slot="header" class="small-title"><button class="pure-button">Create New Bookmark</button></h2> <section id="bookmark-submission"> - <form class="pure-form pure-form-aligned" method="post"> - <fieldset> - <legend>New Bookmark</legend> - - <div class="pure-control-group"> - <label for="uri-input">URI:</label> - <input name="uri" id="uri-input" type="text" placeholder="URI" required/> - <elix-progress-spinner id="uri-spinner" hidden></elix-progress-spinner> - </div> - - <div class="pure-control-group"> - <label for="title-input">Title:</label> - <input name="title" id="title-input" type="text" placeholder="Title" required/> - </div> - - <div class="pure-control-group"> - <label for="description-input">Description:</label> - <textarea name="description" id="description-input" placeholder="Description"></textarea> - </div> - - <div class="pure-control-group"> - <label for="visibility-input">Visibility:</label> - <select id="visibility-input" name="visibility" required> - <option value="public">Public</option> - <option value="semiprivate" selected>Semiprivate</option> - <option value="private">Private</option> - </select> - </div> - - <div class="pure-controls"> - <button type="submit" class="pure-button pure-button-primary">Submit Bookmark</button> - </div> - </fieldset> - </form> + <mlk-bookmark-submission-form id="bookmark-submission-form"></mlk-bookmark-submission-form> </section> </elix-expandable-section> {! /if !} |