From 06e6c81c77f8098693473e49c11557820541dd15 Mon Sep 17 00:00:00 2001 From: Matthias Andreas Benkard Date: Mon, 13 Apr 2020 17:01:35 +0200 Subject: Lazy Chat: Implement editing of messages. Change-Id: I291201da1fbc7c2b6563f0837f7ce3e2f7f8555c --- .../bookmarks/MlkBookmarkSubmissionForm.js | 8 ++-- .../resources/META-INF/resources/cms2/base.css | 9 ++++ .../lazychat/MlkLazychatSubmissionForm.js | 53 +++++++++++++++++++--- .../resources/META-INF/resources/posts/postList.js | 6 +++ .../resources/templates/benki/posts/postList.html | 13 +++++- 5 files changed, 76 insertions(+), 13 deletions(-) (limited to 'src/main/resources') 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 = `
- New Bookmark + Edit Bookmark @@ -24,9 +24,9 @@ template.innerHTML = `
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 = ` - +
- New Message + Edit Message
@@ -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 posts} +{@java.util.List posts} {@java.lang.String pageTitle} {@java.lang.Boolean showBookmarkForm} {@java.lang.Boolean hasPreviousPage} @@ -69,15 +69,24 @@ {#else}
-
+
{owner.firstName} {owner.lastName}
+ + {#if showLazychatForm} + + + + {/if}
{contentHtml.raw}
+ +
+
{/if} {/with} -- cgit v1.2.3