@salla.sa/twilight-components
Version:
Salla Web Component
5 lines • 8.01 kB
JavaScript
/*!
* Crafted with ❤ by Salla
*/
import{r as i,h as s,g as t}from"./p-DWStDVKB.js";import{I as e}from"./p-uTyAzPSy.js";var r=` <svg width="18" height="17" view-box="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path d="M9.00045 13.6951L3.71036 16.6563L4.89186 10.71L0.440918 6.59397L6.4612 5.88017L9.00045 0.375122L11.5396 5.88017L17.5599 6.59397L13.109 10.71L14.2905 16.6563L9.00045 13.6951Z" fill="currentcolor" />\n</svg>`;var a=` <svg width="18" height="17" view-box="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path d="M9.00045 13.6951L3.71036 16.6563L4.89186 10.71L0.440918 6.59397L6.4612 5.88017L9.00045 0.375122L11.5396 5.88017L17.5599 6.59397L13.109 10.71L14.2905 16.6563L9.00045 13.6951Z" fill="#DDDDDD" />\n</svg>`;var l=` <svg width="12" height="17" view-box="0 0 12 17" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path d="M6 16.2501C9.10658 16.2501 11.625 13.7317 11.625 10.6251C11.625 9.976 11.4523 9.35252 11.25 8.77232C9.99998 10.0075 9.05002 10.6251 8.4 10.6251C11.3966 5.37512 9.75 3.12512 5.25 0.125122C5.625 3.87475 3.15302 5.58043 2.14634 6.52757C1.0559 7.5535 0.375 9.00977 0.375 10.6251C0.375 13.7317 2.89339 16.2501 6 16.2501ZM6.53205 2.92636C8.96333 4.98908 8.97495 6.59185 7.09725 9.88157C6.5265 10.8815 7.2486 12.1251 8.4 12.1251C8.9163 12.1251 9.43807 11.9745 9.98917 11.6789C9.52342 13.4466 7.91393 14.7501 6 14.7501C3.72182 14.7501 1.875 12.9033 1.875 10.6251C1.875 9.47072 2.34959 8.39582 3.17419 7.62002C3.2687 7.53115 3.74812 7.1062 3.76858 7.08782C4.08646 6.8017 4.34835 6.54985 4.60718 6.2727C5.52998 5.28461 6.19283 4.18735 6.53205 2.92636Z" fill="currentcolor" />\n </svg>`;const n=":host{display:block}";const d=class{constructor(s){i(this,s);this.currentSlide=0;this.showPurchaseCount=false;this.startPoint={x:0,y:0};this.isSwiping=false;this.isRTL="rtl";this.handlePointerDown=i=>{var s;if(!i.isPrimary)return;(s=this.sliderElement)===null||s===void 0?void 0:s.setPointerCapture(i.pointerId);this.startSwipe(i.clientX,i.clientY);i.preventDefault()};this.handlePointerMove=i=>{if(!this.isSwiping||!i.isPrimary)return;i.preventDefault()};this.handlePointerUp=i=>{var s;if(!this.isSwiping||!i.isPrimary)return;(s=this.sliderElement)===null||s===void 0?void 0:s.releasePointerCapture(i.pointerId);this.endSwipe(i.clientX,i.clientY)};this.handlePointerCancel=i=>{var s;if(!this.isSwiping||!i.isPrimary)return;(s=this.sliderElement)===null||s===void 0?void 0:s.releasePointerCapture(i.pointerId);this.isSwiping=false};this.goToSlide=i=>{this.currentSlide=Math.max(0,Math.min(i,this.images.length-1))}}async componentDidLoad(){var i,s;await salla.onReady();this.showPurchaseCount=!!salla.config.get("store.settings.product.total_sold_enabled",false);this.isRTL=salla.config.get("theme.is_rtl",true);this.purchasedCount=salla.lang.getWithDefault("blocks.home.reviews.purchased_count",this.isRTL?` تم شراءه ${(i=this.review.product)===null||i===void 0?void 0:i.sold_quantity} مرة`:`Purchased ${this.review.product.sold_quantity} times`,{count:(s=this.review.product)===null||s===void 0?void 0:s.sold_quantity});this.initializeSlider()}disconnectedCallback(){this.removeEventListeners()}get images(){var i,s;const{review:t}=this;return((i=t===null||t===void 0?void 0:t.images)===null||i===void 0?void 0:i.length)>1?t.images.map(((i,s)=>({url:i,alt:"",id:s}))):((s=t===null||t===void 0?void 0:t.product)===null||s===void 0?void 0:s.images)||[]}get hasMultipleImages(){return this.images.length>1}get slideTransform(){const i=this.isRTL?1:-1;return`translateX(${this.currentSlide*100*i}%)`}initializeSlider(){if(!this.hasMultipleImages)return;this.sliderElement=this.el.querySelector(".s-review-card-slider-container");if(!this.sliderElement)return;this.sliderElement.style.touchAction="pan-y pinch-zoom";this.addEventListeners()}addEventListeners(){if(!this.sliderElement)return;this.sliderElement.addEventListener("pointerdown",this.handlePointerDown,{passive:false});this.sliderElement.addEventListener("pointermove",this.handlePointerMove,{passive:false});this.sliderElement.addEventListener("pointerup",this.handlePointerUp,{passive:true});this.sliderElement.addEventListener("pointercancel",this.handlePointerCancel,{passive:true})}removeEventListeners(){if(!this.sliderElement)return;this.sliderElement.removeEventListener("pointerdown",this.handlePointerDown);this.sliderElement.removeEventListener("pointermove",this.handlePointerMove);this.sliderElement.removeEventListener("pointerup",this.handlePointerUp);this.sliderElement.removeEventListener("pointercancel",this.handlePointerCancel)}startSwipe(i,s){this.startPoint={x:i,y:s};this.isSwiping=true}componentDidRender(){this.removeEventListeners();this.addEventListeners()}endSwipe(i,s){this.isSwiping=false;const t=i-this.startPoint.x;const e=s-this.startPoint.y;this.processSwipe(t,e)}processSwipe(i,s){const t=10;if(Math.abs(i)<t||Math.abs(s)>Math.abs(i))return;const e=i<0;const r=this.isRTL?!e:e;if(r){this.goToNextSlide()}else{this.goToPrevSlide()}}goToNextSlide(){if(this.currentSlide<this.images.length-1){this.currentSlide++}}goToPrevSlide(){if(this.currentSlide>0){this.currentSlide--}}renderStars(){return Array(5).fill(null).map(((i,t)=>s("span",{key:t,innerHTML:this.review.stars>=t+1?r:a})))}renderDots(){return this.images.map((({url:i},t)=>s("button",{key:i||t,type:"button",class:`s-review-card-slider-dot ${this.currentSlide===t?"active":""}`,onClick:()=>this.goToSlide(t),"aria-label":`Go to slide ${t+1}`,onPointerDown:()=>this.goToSlide(t)})))}renderSlider(){if(!this.hasMultipleImages)return null;return s("div",{class:"s-review-card-slider-container"},s("div",{class:"s-review-card-slides",style:{transform:this.slideTransform}},this.images.map((i=>s("div",{key:i===null||i===void 0?void 0:i.id,class:"s-review-card-slider-slide"},s("img",{src:i.url,alt:i.alt||"Product image",width:275,height:275,loading:"lazy",draggable:false}))))),s("div",{class:"s-review-card-slider-dots"},this.renderDots()))}renderSingleImage(){var i,t;const e=(t=(i=this.review)===null||i===void 0?void 0:i.product)===null||t===void 0?void 0:t.image;if(!e||this.hasMultipleImages)return null;return s("img",{src:e.url,alt:e.alt||"Product image",class:"s-review-card-image",width:275,height:275,loading:"lazy",decoding:"async",draggable:false})}renderHeader(){var i,t;return s("div",{class:"s-review-card-header"},s("div",{class:"s-review-card-reviewer-name"},s("p",null,(i=this.review)===null||i===void 0?void 0:i.name),((t=this.review)===null||t===void 0?void 0:t.has_order)&&s("span",{class:"s-review-card-verified-icon",innerHTML:e})),s("div",{class:"s-review-card-stars"},this.renderStars()))}renderProductInfo(){var i,t,e,r,a;const n=(i=this.review)===null||i===void 0?void 0:i.product;if(!n)return null;return s("a",{href:(e=(t=this.review)===null||t===void 0?void 0:t.product)===null||e===void 0?void 0:e.url,class:"s-review-card-product-container"},s("img",{alt:((r=n.image)===null||r===void 0?void 0:r.alt)||"Product",src:(a=n.image)===null||a===void 0?void 0:a.url,class:"s-review-card-product-image",width:60,height:60,loading:"lazy",decoding:"async",draggable:false}),s("div",{class:"s-review-card-product-details"},s("p",{class:"s-review-card-product-details-name"},n.name),this.showPurchaseCount?s("p",{class:"s-review-card-product-details-purchase-count"},s("span",{innerHTML:l}),this.purchasedCount):null))}render(){var i;return s("div",{key:"93bb8a6513a912808517145b538a550b378113bf",class:"s-review-card-container"},this.renderSlider(),this.renderSingleImage(),o(),s("div",{key:"98174c43c14aea126b88668a1a415d19f73020e9",class:"s-review-card-content"},this.renderHeader(),s("p",{key:"91f0811f2fe993569022d7711e2a8bea94689080",class:"s-review-card-review-content",innerHTML:(i=this.review)===null||i===void 0?void 0:i.content}),o(),this.renderProductInfo()))}get el(){return t(this)}};const o=i=>s("div",{class:`s-review-card-divider ${""}`});d.style=n;export{d as salla_review_card};
//# sourceMappingURL=p-d7a98e8e.entry.js.map