update guestbook

This commit is contained in:
yequari 2026-01-03 17:22:01 -07:00
parent 6b1ee357b0
commit 9beca95c6e
2 changed files with 45 additions and 2 deletions

View File

@ -3,6 +3,42 @@ title: "Guestbook"
date: 2025-06-26T20:17:07-07:00
---
<script type="module" src="/guestbook.js"></script>
<template id="custom-guestbook-comments">
<style>
.comment-list {
font-size: large;
color: #226F54;
padding: 10px;
background: #F2F8DD;
box-sizing: border-box;
min-height: 45px;
border: 1px solid #226F54;
border-radius: 10px;
}
</style>
</template>
<template id="custom-guestbook-form">
<style>
input[type="text"],
textarea {
font-size: large;
color: #226F54;
padding: 10px;
background: #F2F8DD;
box-sizing: border-box;
min-height: 45px;
border: 1px solid #226F54;
border-radius: 10px;
}
<guestbook-form guestbook="https://beta.webweav.ing/websites/26wxzbrx/guestbook"></guestbook-form>
<guestbook-comments guestbook="https://beta.webweav.ing/websites/26wxzbrx/guestbook"></guestbook-comments>
textarea {
height: 150px;
}
label {
color: #226F54;
}
</style>
</template>
<guestbook-form guestbook="https://webweav.ing/websites/2f4bnb2z/guestbook"></guestbook-form>
<guestbook-comments guestbook="https://webweav.ing/websites/2f4bnb2z/guestbook"></guestbook-comments>

View File

@ -6,6 +6,8 @@ class GuestbookForm extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
let template = document.getElementById("custom-guestbook-form");
this.templateContent = template.content;
this._guestbook = this.getAttribute('guestbook') || '';
this._postUrl = `${this._guestbook}/comments/create/remote`
this.render();
@ -63,6 +65,7 @@ class GuestbookForm extends HTMLElement {
</div>
</form>
`;
this.shadowRoot.appendChild(document.importNode(this.templateContent, true))
}
}
@ -74,9 +77,12 @@ class CommentList extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
let template = document.getElementById("custom-guestbook-comments");
this.templateContent = template.content;
this.comments = [];
this.loading = false;
this.error = null;
}
connectedCallback() {
@ -169,6 +175,7 @@ class CommentList extends HTMLElement {
}
</div>
`;
this.shadowRoot.appendChild(document.importNode(this.templateContent, true))
}
}