diff options
Diffstat (limited to 'src/main/resources')
5 files changed, 76 insertions, 13 deletions
diff --git a/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js b/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js index 0a8fad7..3dd3754 100644 --- a/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js +++ b/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js @@ -10,7 +10,7 @@ template.innerHTML = ` <form class="pure-form" method="post" action="/bookmarks"> <fieldset> - <legend>New Bookmark</legend> + <legend>Edit Bookmark</legend> <label for="uri-input">URI:</label> <input name="uri" id="uri-input" type="text" placeholder="URI" required /> @@ -24,9 +24,9 @@ template.innerHTML = ` <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> + <option value="PUBLIC" selected>Public</option> + <option value="SEMIPRIVATE">Semiprivate</option> + <option value="PRIVATE">Private</option> </select> <div class="controls"> diff --git a/src/main/resources/META-INF/resources/cms2/base.css b/src/main/resources/META-INF/resources/cms2/base.css index 61f447c..c455ce8 100644 --- a/src/main/resources/META-INF/resources/cms2/base.css +++ b/src/main/resources/META-INF/resources/cms2/base.css @@ -187,6 +187,15 @@ article.lazychat-message { min-width: calc(100% - 12em); } +elix-expandable-section.editor-pane::part(toggle) { + margin: 0; + display: inline; +} + +elix-expandable-section.editor-pane::part(header) { + display: inline-block; +} + .paging { display: flex; flex-direction: row; diff --git a/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js b/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js index a2bef8c..6cb3059 100644 --- a/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js +++ b/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js @@ -8,18 +8,18 @@ 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"> + <form id="main-form" class="pure-form" method="post" action="/lazychat"> <fieldset> - <legend>New Message</legend> + <legend>Edit 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">Public</option> - <option value="semiprivate" selected>Semiprivate</option> - <option value="private">Private</option> + <option value="PUBLIC">Public</option> + <option value="SEMIPRIVATE" selected>Semiprivate</option> + <option value="PRIVATE">Private</option> </select> <div class="controls"> @@ -31,6 +31,8 @@ template.innerHTML = ` export class MlkLazychatSubmissionForm extends HTMLElement { /*:: textInput: HTMLTextAreaElement; + visibilityInput: HTMLInputElement; + loaded: boolean; */ constructor() { @@ -41,20 +43,57 @@ export class MlkLazychatSubmissionForm extends HTMLElement { this.textInput = cast(shadow.getElementById('text-input')); + this.visibilityInput = + cast(shadow.getElementById('visibility-input')); + this.loaded = false; } static get observedAttributes() { return []; } - connectedCallback () {} + get editedId() { + return this.getAttribute("edited-id"); + } + + get isEditor() { + return this.editedId !== null; + } - disconnectedCallback () {} + connectedCallback() { + if (this.isEditor) { + let form = this.shadowRoot.getElementById("main-form"); + form.method = "post"; + form.action = `/lazychat/p/${this.editedId}/edit`; + } + } + + disconnectedCallback() {} attributeChangedCallback(name /*:string*/, oldValue /*:string*/, newValue /*:string*/) {} focus() { this.textInput.focus(); + this.load(); + } + + async load() { + if (!this.editedId || this.loaded) { + return; + } + + let fetchUrl = new URL(`/lazychat/p/${this.editedId}`, document.URL); + let r = await fetch(fetchUrl); + + if (!r.ok) { + return; + } + + let post = await r.json(); + this.textInput.value = post.content; + this.visibilityInput.value = post.visibility; + + this.loaded = true; } } diff --git a/src/main/resources/META-INF/resources/posts/postList.js b/src/main/resources/META-INF/resources/posts/postList.js index 0578d7b..3eb23ce 100644 --- a/src/main/resources/META-INF/resources/posts/postList.js +++ b/src/main/resources/META-INF/resources/posts/postList.js @@ -10,4 +10,10 @@ document.addEventListener('DOMContentLoaded', () => { let lazychatSubmissionForm = document.getElementById('lazychat-submission-form'); lazychatSubmissionPane.addEventListener('opened',() => lazychatSubmissionForm.focus()); } + + let lazychatEditorPanes = document.getElementsByClassName('lazychat-editor-pane'); + for (let pane of lazychatEditorPanes) { + let form = pane.getElementsByTagName('mlk-lazychat-submission-form')[0]; + pane.addEventListener('opened', () => form.focus()); + } }); diff --git a/src/main/resources/templates/benki/posts/postList.html b/src/main/resources/templates/benki/posts/postList.html index a29d886..8dd5210 100644 --- a/src/main/resources/templates/benki/posts/postList.html +++ b/src/main/resources/templates/benki/posts/postList.html @@ -1,4 +1,4 @@ -{@java.util.List<eu.mulk.mulkcms2.benki.bookmarks.Bookmark> posts} +{@java.util.List<eu.mulk.mulkcms2.benki.posts.Post> posts} {@java.lang.String pageTitle} {@java.lang.Boolean showBookmarkForm} {@java.lang.Boolean hasPreviousPage} @@ -69,15 +69,24 @@ {#else} <article class="lazychat-message"> <header> - <div class="lazychat-message-info"> + <div class="lazychat-message-info" style="display: inline-block"> <time datetime="{date.htmlDateTime}">{date.humanDateTime}</time> <span class="lazychat-message-owner">{owner.firstName} {owner.lastName}</span> </div> + + {#if showLazychatForm} + <elix-expandable-section class="lazychat-editor-pane editor-pane"> + <mlk-lazychat-submission-form edited-id="{post.id}"></mlk-lazychat-submission-form> + </elix-expandable-section> + {/if} </header> <section class="lazychat-message-content"> {contentHtml.raw} </section> + + <section class="lazychat-editor"> + </section> </article> {/if} {/with} |