@salla.sa/twilight-components
Version:
Salla Web Component
218 lines (212 loc) • 14.1 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { C as CheckCircleIcon } from './check.js';
import { d as defineCustomElement$5 } from './salla-button2.js';
import { d as defineCustomElement$4 } from './salla-loading2.js';
import { d as defineCustomElement$3 } from './salla-modal2.js';
import { d as defineCustomElement$2 } from './salla-rating-stars2.js';
import { d as defineCustomElement$1 } from './salla-slider2.js';
var Reply = `<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>reply</title>
<path d="M20 14.667h-12.609l9.401-6.927c0.592-0.436 0.72-1.271 0.283-1.863-0.439-0.595-1.273-0.72-1.864-0.283l-12.667 9.333c-0.343 0.251-0.544 0.649-0.544 1.072s0.201 0.821 0.543 1.073l12.667 9.333c0.237 0.176 0.515 0.26 0.789 0.26 0.409 0 0.813-0.188 1.075-0.543 0.437-0.592 0.309-1.427-0.283-1.863l-9.4-6.928h12.609c4.412 0 8 3.588 8 8 0 0.737 0.597 1.333 1.333 1.333s1.333-0.596 1.333-1.333c0-5.881-4.785-10.667-10.667-10.667z"></path>
</svg>
`;
var ThumbsUp = `<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>thumbs-up</title>
<path d="M26.667 10.667h-8.261l1.279-3.38c0.723-1.911 0.087-4.051-1.549-5.203-0.909-0.639-2.004-0.881-3.085-0.684-1.101 0.203-2.061 0.837-2.703 1.787l-5.452 8.067c-0.148 0.22-0.228 0.48-0.228 0.747v12c0 3.676 2.991 6.667 6.667 6.667h8.688c2.535 0 4.817-1.407 5.955-3.671l2.548-5.063c0.093-0.187 0.143-0.392 0.143-0.6v-6.667c0-2.205-1.795-4-4-4zM28 21.017l-2.405 4.78c-0.683 1.359-2.052 2.203-3.573 2.203h-8.688c-2.205 0-4-1.795-4-4v-11.592l5.223-7.728c0.237-0.352 0.584-0.585 0.975-0.657 0.367-0.067 0.749 0.017 1.068 0.241 0.631 0.444 0.879 1.317 0.591 2.079l-1.963 5.185c-0.156 0.409-0.099 0.869 0.149 1.229s0.66 0.576 1.099 0.576h10.192c0.735 0 1.333 0.599 1.333 1.333zM2.667 10.667c-0.736 0-1.333 0.597-1.333 1.333v16c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-16c0-0.736-0.597-1.333-1.333-1.333z"></path>
</svg>
`;
const sallaCommentsCss = ":host{display:block}";
const SallaCommentItem = /*@__PURE__*/ proxyCustomElement(class SallaCommentItem extends HTMLElement {
constructor() {
super();
this.__registerHost();
// Translations
this.has_bought_trans = salla.lang.get('blocks.comments.has_bought');
this.rated_trans = salla.lang.get('pages.rating.rated');
this.waiting_approval_trans = salla.lang.get('blocks.comments.waiting_approval');
this.has_order_trans = salla.lang.get('blocks.comments.has_order');
this.allowLikes = salla.config.get('store.settings.rating.allow_likes');
this.allowAttachImages = salla.config.get('store.settings.rating.allow_attach_images');
this.helpfulLabel = salla.lang.getWithDefault('blocks.comments.helpful', 'مفيد');
this.likesCount = 0;
this.likedComments = [];
salla.lang.onLoaded(() => {
const setNestedAsync = (lang, key, value) => {
return new Promise((resolve) => {
salla.helpers.setNested(salla.lang.messages[lang], key, value);
resolve(true);
});
};
const setTranslations = async () => {
await setNestedAsync('ar.trans', 'blocks.comments.helpful', 'مفيد');
await setNestedAsync('en.trans', 'blocks.comments.helpful', 'Helpful');
this.helpfulLabel = salla.lang.getWithDefault('blocks.comments.helpful', 'مفيد');
};
this.has_bought_trans = salla.lang.get('blocks.comments.has_bought');
this.rated_trans = salla.lang.get('pages.rating.rated');
this.waiting_approval_trans = salla.lang.get('blocks.comments.waiting_approval');
this.has_order_trans = salla.lang.get('blocks.comments.has_order');
setTranslations();
});
}
componentDidLoad() {
this.likesCount = this.comment.likes_count;
try {
this.likedComments = JSON.parse(localStorage.getItem('liked_comments') || '[]');
if (this.likedComments.includes(this.comment.id)) {
this.likeBtn.classList.add('liked');
this.likeBtn.fill = "solid";
}
}
catch (_a) {
salla.log('Bad json for liked_comments');
}
}
getReplies() {
return Array.isArray(this.comment.replies) ? this.comment.replies : [this.comment.replies];
}
getDate(dateString) {
const [datePart] = dateString.split(' ');
const [year, month, day] = datePart.split('-');
const formattedDate = `${parseInt(day, 10)}/${parseInt(month, 10)}/${parseInt(year, 10)}`;
return formattedDate;
}
getTime(dateString) {
const [, timePart] = dateString.split(' ');
const [hours, minutes] = timePart.split(':');
const formattedTime = `${parseInt(hours, 10)}:${parseInt(minutes, 10)}`;
return formattedTime;
}
async toggleLike() {
if (salla.config.isGuest()) {
return salla.notify.error(salla.lang.get('common.messages.must_login'));
}
this.likedComments = JSON.parse(localStorage.getItem('liked_comments') || '[]');
const isLiked = this.likedComments.includes(this.comment.id);
try {
const endpoint = isLiked ? `rating/${this.comment.id}/unlike` : `rating/${this.comment.id}/like`;
const res = await salla.api.request(endpoint, '', 'put');
salla.log(res.message);
if (isLiked) {
this.likeBtn.classList.remove('liked');
this.likeBtn.fill = 'outline';
this.updateLikedComments(this.comment.id, false);
this.likesCount--;
}
else {
this.likeBtn.classList.add('liked');
this.likeBtn.fill = 'solid';
this.updateLikedComments(this.comment.id, true);
this.likesCount++;
}
}
catch (e) {
if (e.response.status == 409) {
if (this.likeBtn.classList.contains('liked')) {
this.likeBtn.fill = 'outline';
this.likeBtn.classList.remove('liked');
this.updateLikedComments(this.comment.id, false);
this.likesCount--;
}
else {
this.likeBtn.fill = 'solid';
this.likeBtn.classList.add('liked');
salla.logger.warn('Like already exists');
this.updateLikedComments(this.comment.id, true);
}
}
}
}
updateLikedComments(commentId, add) {
this.likedComments = JSON.parse(localStorage.getItem('liked_comments') || '[]');
if (add) {
if (!this.likedComments.includes(commentId)) {
this.likedComments.push(commentId);
}
}
else {
this.likedComments = this.likedComments.filter(id => id !== commentId);
}
localStorage.setItem('liked_comments', JSON.stringify(this.likedComments));
}
render() {
var _a, _b, _c, _d, _e, _f;
let isAdmin = this.comment.type == 'admin';
return (h(Host, { key: '779f9f3d8e70305fd8a875cb3d7692ddb9e9930e', class: isAdmin ? 's-comments-item-admin' : 's-comments-item' }, h("div", { key: '2a13cd2c638b713b31a97a9b5e7f03759a7e2296', class: { "s-comments-item-wrapper": !isAdmin, "s-comments-item-admin-wrapper": isAdmin }, id: `s-comments-item-${this.comment.id}` }, h("div", { key: 'c3accf6c8363a0cc0919c573ce5345eddb6be550', class: "s-comments-item-inner s-comments-flex-1" }, isAdmin && h("span", { key: '9538973ab5c1d4bdd33f4d532f7041f94a1cb2d7', class: "s-comments-item-reply-icon", innerHTML: Reply }), h("div", { key: '327abfdfab42ab6aeff9579dcc8a72991c141c19', class: "s-comments-item-avatar" }, h("img", { key: 'bd8db28bad90847a94773d59d0d96cc693a8cb92', "data-src": (_a = this.comment) === null || _a === void 0 ? void 0 : _a.avatar, alt: (_b = this.comment) === null || _b === void 0 ? void 0 : _b.name, src: (_c = this.comment) === null || _c === void 0 ? void 0 : _c.avatar, class: "s-comments-item-avatar-img lazy" })), h("div", { key: 'b7d764ee0c96ab53b89170f1609821d5c204faef', class: "s-comments-flex-1" }, h("div", { key: '6ed0d090d9ae163d75f438459326c2d25c7bfd69', class: "s-comments-item-user-wrapper" }, h("div", { key: '1631c0b8667906d279b7105022f197a3b5ed59b6', class: "s-comments-item-user-info" }, h("h3", { key: '6a325e676e77ab1ef6df92d5bbffad2c7393d517', class: "s-comments-item-user-info-name" }, (_d = this.comment) === null || _d === void 0 ? void 0 : _d.name), (this.comment.has_order || !!this.comment.rating) && !this.comment.is_pending && !this.hideBought ?
h("div", { class: "s-comments-flex" }, this.comment.has_order ?
[h("span", { class: "s-comments-item-has-order-check-icon", innerHTML: CheckCircleIcon }), h("span", { class: "s-comments-item-has-order-check-text" }, this.has_bought_trans, " ", this.comment.rating ? ', ' : '')] : null, !!this.comment.rating ?
h("span", { class: "s-comments-item-rated-widget" }, this.rated_trans) : null)
: null), h("p", { key: '22efe65a7cb5717964a1e2012b7739ab7d4ad0c7', class: "s-comments-item-timestamp s-ltr" }, " ", this.getDate((_e = this.comment.created_at) === null || _e === void 0 ? void 0 : _e.date), " ", h("span", { key: '1057fa700388f7be30240254e07f532773332207', class: "s-comments-item-time" }, " - ", this.getTime((_f = this.comment.created_at) === null || _f === void 0 ? void 0 : _f.date), " ")), !!this.comment.rating || !!this.comment.stars ?
h("salla-rating-stars", { size: "mini", class: "s-comments-item-stars", value: this.comment.rating || this.comment.stars })
: null), h("div", { key: '38191d3d3374eb66bd41f29256f8e9edcb089f0e', class: "s-comments-item-content" }, h("p", { key: '8d4ae7f1e812821f5f76cfe638b8460a546e2d70', innerHTML: this.comment.content }), this.allowAttachImages && h("div", { key: '872de29de2c941586a6ff7ee1612099ce0808eff', class: "s-comments-item-images" }, this.comment.images.map((image, index) => (h("img", { key: index, src: image, alt: "", onClick: () => this.modal.open() }))), h("salla-modal", { key: '6930522e277f3e58f369857cd04ef4f76a10cef3', ref: modal => this.modal = modal, width: "sm" }, h("salla-slider", { key: '042b41bbbe78bcd7f0cca354c62290b0365d78ae', id: `s-comments-item-${this.comment.id}-images`, class: "s-comments-item-images-slider", type: "thumbs", "auto-height": true, showControls: this.comment.images.length > 1 ? true : false, "show-thumbs-controls": "false" }, h("div", { key: '5131bdcf40dcf80a81d0636806fbbb7d3dbd349e', slot: 'items' }, this.comment.images.map((image, index) => (h("img", { key: index, src: image, alt: "" })))), h("div", { key: '6efdd073e88d30f35e8ec5ef361590804451bd73', slot: "thumbs" }, this.comment.images.map((image, index) => (h("div", { class: "s-comments-item-images-slider-thumb" }, h("img", { key: index, src: image, alt: "" })))))))), this.allowLikes && !isAdmin && salla.url.is_page('product.single') ? h("salla-button", { ref: el => this.likeBtn = el, class: `s-comments-item-like-btn ${this.likedComments.includes(this.comment.id) ? 'liked' : ''}`, loaderPosition: 'center', fill: 'outline', size: 'small', onClick: () => this.toggleLike() }, h("span", null, this.helpfulLabel, " ", this.likesCount > 0 ? `(${this.likesCount})` : ''), h("span", { innerHTML: ThumbsUp })) : '', this.comment.is_pending ?
h("span", { class: "s-comments-item-pending-text" }, this.waiting_approval_trans) : null))), !!this.getReplies().length && !isAdmin ?
this.getReplies().map((reply) => {
return h("div", null, h("salla-comment-item", { comment: reply }));
}) : null)));
}
get host() { return this; }
static get style() { return sallaCommentsCss; }
}, [0, "salla-comment-item", {
"comment": [16],
"hideBought": [16, "hide-bought"],
"has_bought_trans": [32],
"rated_trans": [32],
"waiting_approval_trans": [32],
"has_order_trans": [32],
"allowLikes": [32],
"allowAttachImages": [32],
"helpfulLabel": [32],
"likesCount": [32],
"likedComments": [32]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["salla-comment-item", "salla-button", "salla-comment-item", "salla-loading", "salla-modal", "salla-rating-stars", "salla-slider"];
components.forEach(tagName => { switch (tagName) {
case "salla-comment-item":
if (!customElements.get(tagName)) {
customElements.define(tagName, SallaCommentItem);
}
break;
case "salla-button":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "salla-comment-item":
if (!customElements.get(tagName)) {
defineCustomElement();
}
break;
case "salla-loading":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "salla-modal":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "salla-rating-stars":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "salla-slider":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { SallaCommentItem as S, defineCustomElement as d };
//# sourceMappingURL=salla-comment-item2.js.map
//# sourceMappingURL=salla-comment-item2.js.map