@salla.sa/twilight-components
Version:
Salla Web Component
142 lines (141 loc) • 5.96 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { Host, h } from "@stencil/core";
export class SallaCommentForm {
constructor() {
this.placeholder = salla.lang.get('blocks.comments.placeholder');
this.submitText = salla.lang.get('blocks.comments.submit');
salla.lang.onLoaded(() => {
this.placeholder = salla.lang.get('blocks.comments.placeholder');
this.submitText = salla.lang.get('blocks.comments.submit');
});
salla.onReady(() => {
this.canComment = salla.config.get('user.can_comment');
this.itemId = salla.config.get('page.id');
this.type = salla.url.is_page('page-single') ? 'page' : salla.url.is_page('blog.single') ? 'blog' : 'product';
});
}
submit() {
if (!this.commentForm.reportValidity()) {
salla.log('CommentForm:: validation error!');
return;
}
const commentText = this.commentField.value;
this.submitBtn.load()
.then(() => salla.comment.add({ id: this.itemId, comment: commentText, type: this.type }))
.then(() => {
this.commentAdded.emit({
name: salla.config.get('user.name'),
avatar: salla.config.get('user.avatar'),
content: commentText,
is_pending: true,
created_at: { date: new Date().toISOString().replace('T', ' ').substring(0, 19) },
images: [],
});
this.commentField.value = '';
})
.finally(() => this.submitBtn.stop());
}
render() {
return (h(Host, { key: '0ec765c8dd7cf28d23c4305c234cec5efd3daae1' }, !!this.canComment ? h("form", { ref: frm => this.commentForm = frm }, h("div", { class: "s-comment-form-wrapper" }, this.showAvatar ?
h("img", { class: "s-comment-form-avatar", src: salla.config.get('user.avatar'), alt: "user avatar" }) : '', h("div", { class: "s-comment-form-content" }, h("textarea", { cols: 30, rows: 5, minlength: "4", maxlength: "500", ref: field => this.commentField = field, placeholder: this.placeholder, class: "s-comment-form-input", required: true }), h("br", null), h("div", { class: "s-comment-form-action" }, h("salla-button", { ref: btn => this.submitBtn = btn, "loader-position": 'center', onClick: () => this.submit() }, this.submitText))))) : ''));
}
static get is() { return "salla-comment-form"; }
static get originalStyleUrls() {
return {
"$": ["salla-comment-form.scss"]
};
}
static get styleUrls() {
return {
"$": ["salla-comment-form.css"]
};
}
static get properties() {
return {
"type": {
"type": "string",
"attribute": "type",
"mutable": true,
"complexType": {
"original": "'product' | 'page' | 'blog'",
"resolved": "\"blog\" | \"page\" | \"product\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Type of entity the comment is being submitted for. Defaults to `salla.url.is_page('page-single') ? 'page' : 'product'`"
},
"getter": false,
"setter": false,
"reflect": true
},
"showAvatar": {
"type": "boolean",
"attribute": "show-avatar",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "To show the avatar or not in the comment form"
},
"getter": false,
"setter": false,
"reflect": false
},
"itemId": {
"type": "any",
"attribute": "item-id",
"mutable": true,
"complexType": {
"original": "string | number",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The ID of the item(as defined in the type), where the comment is for. defaults to `salla.config.get('page.id')`"
},
"getter": false,
"setter": false,
"reflect": true
}
};
}
static get states() {
return {
"placeholder": {},
"submitText": {},
"canComment": {}
};
}
static get events() {
return [{
"method": "commentAdded",
"name": "commentAdded",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted after a comment is successfully added, carrying a locally-built Comment object for instant rendering."
},
"complexType": {
"original": "{\n id?: number;\n avatar?: string;\n name?: string;\n content?: string;\n is_pending?: boolean;\n created_at?: { date?: string };\n images: string[];\n }",
"resolved": "{ id?: number; avatar?: string; name?: string; content?: string; is_pending?: boolean; created_at?: { date?: string; }; images: string[]; }",
"references": {}
}
}];
}
}