summaryrefslogtreecommitdiff
path: root/src/main/resources
diff options
context:
space:
mode:
Diffstat (limited to 'src/main/resources')
-rw-r--r--src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js54
-rw-r--r--src/main/resources/META-INF/resources/cms2/base.css18
-rw-r--r--src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js2
-rw-r--r--src/main/resources/META-INF/resources/posts/postList.js13
-rw-r--r--src/main/resources/templates/benki/posts/postList.html21
5 files changed, 102 insertions, 6 deletions
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 = `
<link rel="stylesheet" type="text/css" href="/cms2/base.css" />
<link rel="stylesheet" type="text/css" href="/bookmarks/MlkBookmarkSubmissionForm.css" />
- <form class="pure-form" method="post" action="/bookmarks">
+ <form id="main-form" class="pure-form" method="post" action="/bookmarks">
<fieldset>
<legend>Edit Bookmark</legend>
@@ -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}
<article class="bookmark">
<header>
- <a href="{uri}"><h1 class="bookmark-title">{title}</h1></a>
<div class="bookmark-info">
<a class="post-link" href="/posts/{post.id}">
<time datetime="{date.htmlDateTime}">{date.humanDateTime}</time>
<span class="bookmark-owner">{owner.firstName} {owner.lastName}</span>
</a>
</div>
+
+ <div class="bookmark-controls">
+ {#if showBookmarkForm}
+ <button class="pure-button bookmark-edit-button">Edit</button>
+ {/if}
+ </div>
</header>
+ <section class="bookmark-editor post-editor">
+ {#if showBookmarkForm}
+ <elix-expandable-panel class="bookmark-editor-pane editor-pane">
+ <mlk-bookmark-submission-form edited-id="{post.id}"></mlk-bookmark-submission-form>
+ </elix-expandable-panel>
+ {/if}
+ </section>
+
+ <section class="bookmark-title-section">
+ <a href="{uri}" class="bookmark-title"><h1 class="bookmark-title">⇢&nbsp;{title}</h1></a>
+ </section>
+
<section class="bookmark-description">
{descriptionHtml.raw}
</section>
@@ -87,7 +104,7 @@
</div>
</header>
- <section class="lazychat-editor">
+ <section class="lazychat-editor post-editor">
{#if showLazychatForm}
<elix-expandable-panel class="lazychat-editor-pane editor-pane">
<mlk-lazychat-submission-form edited-id="{post.id}"></mlk-lazychat-submission-form>