@salla.sa/twilight-components
Version:
Salla Web Component
221 lines (215 loc) • 15.6 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { I as IconVerified } 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 {
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));
}
PinnedIcon() {
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "16", height: "16", color: "#555555", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M12 16V21" }), h("path", { d: "M8 5.2918C8 5.02079 8 4.88529 8.01312 4.77132C8.1194 3.84789 8.84789 3.1194 9.77133 3.01312C9.88529 3 10.0208 3 10.2918 3H13.7082C13.9792 3 14.1147 3 14.2287 3.01312C15.1521 3.1194 15.8806 3.84789 15.9869 4.77132C16 4.88529 16 5.02079 16 5.2918C16 5.37885 16 5.42237 15.9967 5.46264C15.9708 5.78281 15.7927 6.07104 15.5179 6.2374C15.4834 6.25832 15.4444 6.27779 15.3666 6.31672L15.1055 6.44726C14.7021 6.64897 14.5003 6.74983 14.3681 6.90564C14.26 7.03286 14.1856 7.18509 14.1515 7.34846C14.1097 7.54854 14.1539 7.76968 14.2424 8.21197L15 12H15.3333C15.9533 12 16.2633 12 16.5176 12.0681C17.2078 12.2531 17.7469 12.7922 17.9319 13.4824C18 13.7367 18 14.0467 18 14.6667C18 14.9767 18 15.1317 17.9659 15.2588C17.8735 15.6039 17.6039 15.8735 17.2588 15.9659C17.1317 16 16.9767 16 16.6667 16H7.33333C7.02334 16 6.86835 16 6.74118 15.9659C6.39609 15.8735 6.12654 15.6039 6.03407 15.2588C6 15.1317 6 14.9767 6 14.6667C6 14.0467 6 13.7367 6.06815 13.4824C6.25308 12.7922 6.79218 12.2531 7.48236 12.0681C7.73669 12 8.04669 12 8.66667 12H9L9.75761 8.21197C9.84606 7.76968 9.89029 7.54854 9.84852 7.34846C9.81441 7.18509 9.73995 7.03286 9.63194 6.90564C9.49965 6.74983 9.29794 6.64897 8.89452 6.44726L8.63344 6.31672C8.55558 6.27779 8.51665 6.25832 8.48208 6.2374C8.20731 6.07104 8.02917 5.78281 8.00326 5.46264C8 5.42237 8 5.37885 8 5.2918Z" })));
}
render() {
let isAdmin = this.comment.type == 'admin';
return (h(Host, { key: '93d39f2ef35c0cfdcd6333e58e6a836845b4fe12', class: isAdmin ? 's-comments-item-admin' : 's-comments-item' }, h("div", { key: 'c160b10f946149c293cb0daeaf96aa7b06ba095e', class: { "s-comments-item-wrapper": !isAdmin, "s-comments-item-admin-wrapper": isAdmin }, id: `s-comments-item-${this.comment.id}` }, h("div", { key: '60728bde4f0293cf419b589759b6621c5f0a519a', class: "s-comments-item-inner s-comments-flex-1" }, isAdmin && h("span", { key: 'aac6a394aa6460756c4c54d0a0c671078d1dddd6', class: "s-comments-item-reply-icon", innerHTML: Reply }), h("div", { key: 'cdca36fac4f23720084477ee889325942d25341e', class: "s-comments-item-avatar" }, h("img", { key: '07e8e17f7470d87607c8aaa8f15e283b129ca070', "data-src": this.comment?.avatar, alt: this.comment?.name, src: this.comment?.avatar, class: "s-comments-item-avatar-img lazy" })), h("div", { key: '6ef14e9b64d8300a24d886c081cc66ec621fd2a6', class: "s-comments-flex-1" }, h("div", { key: '4f72cfb690978fae30d8ef7c957e6adf53a2872d', class: "s-comments-item-user-wrapper" }, h("div", { key: '413840281c0050521a8ae4fd60e502ed821f4260', class: "s-comments-item-user-info" }, h("h3", { key: '814c32cefc6b62585022ab3e1cdb59965553f1d2', class: this.comment.is_pinned ? "s-comments-item-user-info-name" : "s-comments-item-user-info-name-with-margin" }, this.comment?.name), this.comment.is_pinned ?
h("div", { class: "s-comments-item-pinned-icon-with-margin" }, this.PinnedIcon())
: null, (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: IconVerified }), 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: '7c6745073e250e100c8a613e4fd94d751042fb7f', class: "s-comments-item-timestamp s-ltr" }, this.getDate(this.comment.created_at?.date), h("span", { key: '011cfc88b9702e14f6ea9d8ded0fa6f8678adb18', class: "s-comments-item-time" }, " - ", this.getTime(this.comment.created_at?.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: '044599867529f9526306ac258981a15e4c43e369', class: "s-comments-item-content" }, h("p", { key: 'd3d082f84a154205bb6eedb0d14c2bb9a83387ee', innerHTML: this.comment.content }), this.allowAttachImages && h("div", { key: 'c475b4911834163084ede77e2c1f289ea9efddca', 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: '384d4555813e8e9c4bf7c6ad626def802f8f6f5a', ref: modal => this.modal = modal, width: "sm" }, h("salla-slider", { key: 'a2be6511ff82555b87196183c6f463f4582c18c4', 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: 'c6029d94bdddf9958758fbd8c3dbca3e40ad1c01', slot: 'items' }, this.comment.images.map((image, index) => (h("img", { key: index, src: image, alt: "" })))), h("div", { key: 'b5febbea6d46ce3b920f5bc15866eebb54f440e4', 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;
} });
}
defineCustomElement();
export { SallaCommentItem as S, defineCustomElement as d };