diff options
Diffstat (limited to 'src/main/resources')
6 files changed, 119 insertions, 10 deletions
diff --git a/src/main/resources/META-INF/resources/bookmarks/bookmarkList.js b/src/main/resources/META-INF/resources/bookmarks/bookmarkList.js deleted file mode 100644 index a6f78e6..0000000 --- a/src/main/resources/META-INF/resources/bookmarks/bookmarkList.js +++ /dev/null @@ -1,9 +0,0 @@ -document.addEventListener('DOMContentLoaded', () => { - let bookmarkSubmissionPane = document.getElementById( - 'bookmark-submission-pane'); - let bookmarkSubmissionForm = document.getElementById( - 'bookmark-submission-form'); - - bookmarkSubmissionPane.addEventListener('opened', () => bookmarkSubmissionForm.focus()); -}); - diff --git a/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.css b/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.css new file mode 100644 index 0000000..007a172 --- /dev/null +++ b/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.css @@ -0,0 +1,30 @@ +fieldset { + display: grid; + grid-template-columns: 1fr; + grid-gap: 5px; +} + +label, +input, +button, +textarea { + grid-column: 1 / 2; +} + +@media (min-width: 30em) { + fieldset { + display: grid; + grid-template-columns: 1fr 5fr; + grid-gap: 0; + } + + label { + grid-column: 1 / 2; + } + + input, + button, + textarea { + grid-column: 2 / 3; + } +} diff --git a/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js b/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js new file mode 100644 index 0000000..8c85d72 --- /dev/null +++ b/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js @@ -0,0 +1,61 @@ +// @flow + +import /*:: ProgressSpinner from */ "../web_modules/elix/define/ProgressSpinner.js"; +import { cast } from "../cms2/types.js"; + +const template = document.createElement('template'); +template.innerHTML = ` + <link rel="stylesheet" type="text/css" href="/cms2/base.css" /> + <link rel="stylesheet" type="text/css" href="/lazychat/MlkLazychatSubmissionForm.css" /> + + <form class="pure-form" method="post" action="/lazychat"> + <fieldset> + <legend>New Message</legend> + + <label for="text-input">Text:</label> + <textarea name="text" id="text-input" placeholder="Text"></textarea> + + <label for="visibility-input">Visibility:</label> + <select id="visibility-input" name="visibility" required> + <option value="public" selected>Public</option> + <option value="semiprivate">Semiprivate</option> + <option value="private">Private</option> + </select> + + <div class="controls"> + <button type="submit" class="pure-button pure-button-primary">Submit Message</button> + </div> + </fieldset> + </form>`; + +export class MlkLazychatSubmissionForm extends HTMLElement { + /*:: + textInput: HTMLTextAreaElement; + */ + + constructor() { + super(); + + let shadow = this.attachShadow({mode: "open"}); + shadow.appendChild(template.content.cloneNode(true)); + + this.textInput = + cast(shadow.getElementById('text-input')); + } + + static get observedAttributes() { + return []; + } + + connectedCallback () {} + + disconnectedCallback () {} + + attributeChangedCallback(name /*:string*/, oldValue /*:string*/, newValue /*:string*/) {} + + focus() { + this.textInput.focus(); + } +} + +customElements.define("mlk-lazychat-submission-form", MlkLazychatSubmissionForm); diff --git a/src/main/resources/META-INF/resources/lazychat/newLazychatMessage.js b/src/main/resources/META-INF/resources/lazychat/newLazychatMessage.js new file mode 100644 index 0000000..ed5072f --- /dev/null +++ b/src/main/resources/META-INF/resources/lazychat/newLazychatMessage.js @@ -0,0 +1,4 @@ +document.addEventListener('DOMContentLoaded', () => { + let bookmarkSubmissionForm = document.getElementById('lazychat-submission-form'); + bookmarkSubmissionForm.focus(); +}); diff --git a/src/main/resources/META-INF/resources/posts/postList.js b/src/main/resources/META-INF/resources/posts/postList.js new file mode 100644 index 0000000..0578d7b --- /dev/null +++ b/src/main/resources/META-INF/resources/posts/postList.js @@ -0,0 +1,13 @@ +document.addEventListener('DOMContentLoaded', () => { + let bookmarkSubmissionPane = document.getElementById('bookmark-submission-pane'); + if (bookmarkSubmissionPane) { + let bookmarkSubmissionForm = document.getElementById('bookmark-submission-form'); + bookmarkSubmissionPane.addEventListener('opened',() => bookmarkSubmissionForm.focus()); + } + + let lazychatSubmissionPane = document.getElementById('lazychat-submission-pane'); + if (lazychatSubmissionPane) { + let lazychatSubmissionForm = document.getElementById('lazychat-submission-form'); + lazychatSubmissionPane.addEventListener('opened',() => lazychatSubmissionForm.focus()); + } +}); diff --git a/src/main/resources/templates/benki/posts/postList.html b/src/main/resources/templates/benki/posts/postList.html index b68f796..a29d886 100644 --- a/src/main/resources/templates/benki/posts/postList.html +++ b/src/main/resources/templates/benki/posts/postList.html @@ -19,7 +19,8 @@ <script type="module" src="/web_modules/elix/define/ExpandableSection.js"></script> <script type="module" src="/bookmarks/MlkBookmarkSubmissionForm.js"></script> - <script type="module" src="/bookmarks/bookmarkList.js" defer></script> + <script type="module" src="/lazychat/MlkLazychatSubmissionForm.js"></script> + <script type="module" src="/posts/postList.js" defer></script> {/head} {#body} @@ -33,6 +34,15 @@ </elix-expandable-section> {/if} +{#if showLazychatForm} + <elix-expandable-section id="lazychat-submission-pane"> + <h2 slot="header" class="small-title expandable-section-title"><button class="pure-button">Post Message</button></h2> + <section id="lazychat-submission"> + <mlk-lazychat-submission-form id="lazychat-submission-form"></mlk-lazychat-submission-form> + </section> + </elix-expandable-section> +{/if} + <div class="paging"> {#if hasPreviousPage}<a href="?i={previousCursor}&n={pageSize}" class="pure-button">⇠ previous page</a>{/if} <span class="filler"></span> |