From bbac0c7d90986f95e93a473c7228021ab726e464 Mon Sep 17 00:00:00 2001 From: Matthias Andreas Benkard Date: Sun, 19 Apr 2020 19:38:49 +0200 Subject: KB53 Support bookmark edition. Change-Id: Ieacbb5c448b9afa4bc9524167e0c73618de6db48 --- .../bookmarks/MlkBookmarkSubmissionForm.js | 54 ++++++++++++++++++++-- .../resources/META-INF/resources/cms2/base.css | 18 ++++++++ .../lazychat/MlkLazychatSubmissionForm.js | 2 +- .../resources/META-INF/resources/posts/postList.js | 13 ++++++ .../resources/templates/benki/posts/postList.html | 21 ++++++++- 5 files changed, 102 insertions(+), 6 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 3dd3754..3b93305 100644 --- a/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js +++ b/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js @@ -8,7 +8,7 @@ template.innerHTML = ` -
+
Edit Bookmark @@ -37,10 +37,13 @@ template.innerHTML = ` export class MlkBookmarkSubmissionForm extends HTMLElement { /*:: + mainForm: HTMLFormElement; descriptionInput: HTMLTextAreaElement; titleInput: HTMLInputElement; uriInput: HTMLInputElement; uriSpinner: ProgressSpinner; + visibilityInput: HTMLInputElement; + loaded: boolean; */ constructor() { @@ -49,6 +52,8 @@ export class MlkBookmarkSubmissionForm extends HTMLElement { let shadow = this.attachShadow({mode: "open"}); shadow.appendChild(template.content.cloneNode(true)); + this.mainForm = + cast(shadow.getElementById('main-form')); this.descriptionInput = cast(shadow.getElementById('description-input')); this.titleInput = @@ -57,13 +62,34 @@ export class MlkBookmarkSubmissionForm extends HTMLElement { cast(shadow.getElementById('uri-input')); this.uriSpinner = cast(shadow.getElementById('uri-spinner')); + this.visibilityInput = + cast(shadow.getElementById('visibility-input')); + + this.loaded = false; } static get observedAttributes() { return []; } - connectedCallback () { + get editedId() /*:number | null*/ { + let attr = this.getAttribute("edited-id"); + if (attr === undefined || attr === null) { + return null; + } + return parseInt(attr, 10); + } + + get isEditor() { + return this.editedId !== null; + } + + connectedCallback() { + if (this.editedId !== null) { + this.mainForm.method = "post"; + this.mainForm.action = `/bookmarks/${this.editedId}/edit`; + } + this.uriInput.addEventListener('blur', this.onUriBlur.bind(this)); this.uriInput.value = this.uri || ""; this.titleInput.value = this.titleText || ""; @@ -98,10 +124,11 @@ export class MlkBookmarkSubmissionForm extends HTMLElement { } else { this.descriptionInput.focus(); } + this.load(); } async onUriBlur() { - if (!this.uriInput.value) { + if (this.isEditor || !this.uriInput.value) { return; } @@ -121,6 +148,27 @@ export class MlkBookmarkSubmissionForm extends HTMLElement { let pageInfo = await r.json(); this.titleInput.value = pageInfo.title; } + + async load() { + if (this.editedId === null || this.loaded) { + return; + } + + let fetchUrl = new URL(`/posts/${this.editedId}`, document.URL); + let r = await fetch(fetchUrl); + + if (!r.ok) { + return; + } + + let post = await r.json(); + this.uriInput.value = post.uri; + this.titleInput.value = post.title; + this.descriptionInput.innerText = post.description; + this.visibilityInput.value = post.visibility; + + this.loaded = true; + } } customElements.define("mlk-bookmark-submission-form", MlkBookmarkSubmissionForm); diff --git a/src/main/resources/META-INF/resources/cms2/base.css b/src/main/resources/META-INF/resources/cms2/base.css index 8811bb3..bc95300 100644 --- a/src/main/resources/META-INF/resources/cms2/base.css +++ b/src/main/resources/META-INF/resources/cms2/base.css @@ -153,10 +153,15 @@ body > footer { border-top: lightgray solid 1px; } +a.bookmark-title { + text-decoration: none; +} + h1.bookmark-title { font-size: 1em; margin: 0; padding: 0; + display: inline; } .bookmark-info { @@ -164,6 +169,7 @@ h1.bookmark-title { font-size: smaller; margin: 0; padding: 0; + flex: auto; } article.bookmark { @@ -173,6 +179,10 @@ article.bookmark { background: #f8f0f0; } +article.bookmark > header { + display: flex +} + .lazychat-message-info { font-style: italic; font-size: smaller; @@ -209,6 +219,14 @@ elix-expandable-section.editor-pane::part(header) { display: inline-block; } +.bookmark-edit-button { + font-size: small; +} + +.bookmark-message-controls { + flex: initial; +} + .lazychat-edit-button { font-size: small; } diff --git a/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js b/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js index e43e135..4c4aca8 100644 --- a/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js +++ b/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js @@ -61,7 +61,7 @@ export class MlkLazychatSubmissionForm extends HTMLElement { if (attr === undefined || attr === null) { return null; } - return parseInt(attr); + return parseInt(attr, 10); } get isEditor() { diff --git a/src/main/resources/META-INF/resources/posts/postList.js b/src/main/resources/META-INF/resources/posts/postList.js index 7bab4f9..8ffb7ca 100644 --- a/src/main/resources/META-INF/resources/posts/postList.js +++ b/src/main/resources/META-INF/resources/posts/postList.js @@ -23,4 +23,17 @@ document.addEventListener('DOMContentLoaded', () => { }); } } + + let bookmarks = document.getElementsByClassName('bookmark'); + for (let bookmark of bookmarks) { + let editorPane = bookmark.getElementsByClassName('editor-pane')[0]; + if (editorPane) { + let form = bookmark.getElementsByTagName('mlk-bookmark-submission-form')[0]; + let editButton = bookmark.getElementsByClassName('bookmark-edit-button')[0]; + editButton.addEventListener('click', () => { + editorPane.toggle(); + form.focus(); + }); + } + } }); diff --git a/src/main/resources/templates/benki/posts/postList.html b/src/main/resources/templates/benki/posts/postList.html index 5f88757..bc479f4 100644 --- a/src/main/resources/templates/benki/posts/postList.html +++ b/src/main/resources/templates/benki/posts/postList.html @@ -57,15 +57,32 @@ {#if post.isBookmark}