@salla.sa/twilight-components 1.0.58 → 1.0.61

package/dist/collection/components/salla-rating-modal/salla-rating-modal.js

@@ -41,7 +41,7 @@ export class SallaRatingModal {
       .then(() => this.modal.setTitle(salla.lang.get('pages.rating.rate_order') + ' <span class="unicode">(#' + this.order.id + ')</span>'))
       .then(() => this.modal.stopLoading())
       .then(() => this.stepsCount = [this.order.testimonials_enabled, this.order.products_enabled, this.order.shipping_enabled].filter(enabled => enabled).length)
-      .then(() => setTimeout(() => this.initiateRating(), 100));
+      .then(() => setTimeout(() => this.handleWizard(), 100));
   }
   /**
    * Show the rating modal
@@ -49,30 +49,6 @@ export class SallaRatingModal {
   async hide() {
     return this.modal.hide();
   }
-  initiateRating() {
-    this.handleWizard();
-    this.highlightSelectedStars();
-    salla.document.event.onSubmit('.s-rating-modal-stars-element', function (event) {
-      // Prevent form from submitting
-      event.preventDefault();
-      // Get the selected star - activeElement is not supported in safari
-      let activeStars = event.target.querySelectorAll('.s-rating-modal-btn-star.s-rating-modal-hovered');
-      let selected = activeStars[activeStars.length - 1];
-      if (!selected)
-        return;
-      let selectedIndex = parseInt(selected.dataset.star, 10);
-      event.target.querySelector('.rating_hidden_input').value = selectedIndex;
-      // Get all stars in this form (only search in the form, not the whole document)
-      // Loop through each star, and add or remove the `.selected` class to toggle highlighting
-      event.target
-        .querySelectorAll('.s-rating-modal-btn-star')
-        .forEach((star, index) => Helper.toggleElementClassIf(star, 's-rating-modal-selected', 's-rating-modal-un-selected', () => index < selectedIndex));
-      // Remove aria-pressed from any previously selected star
-      event.target.querySelectorAll('.s-rating-modal-btn-star[aria-pressed="true"]').forEach(star => star.removeAttribute('aria-pressed'));
-      // Add aria-pressed role to the selected button
-      selected.setAttribute('aria-pressed', '');
-    });
-  }
   // handle wizard
   handleWizard() {
     this.steps = this.host.querySelectorAll(".s-rating-modal-step");
@@ -95,28 +71,6 @@ export class SallaRatingModal {
       : salla.lang.get('pages.rating.send_ratings'));
     setTimeout(() => { var _a; return this.body.setAttribute('style', 'height:' + ((_a = this.currentTab) === null || _a === void 0 ? void 0 : _a.scrollHeight) + 'px'); });
   }
-  highlightSelectedStars() {
-    let hover = ['s-rating-modal-hovered'];
-    Helper.all('.s-rating-modal-stars-element', el => {
-      let starElements = el.querySelectorAll('.s-rating-modal-btn-star');
-      // remove hovered state from stars ---
-      el.addEventListener('mouseout', () => starElements.forEach(star => star.classList.remove(...hover)));
-      starElements.forEach((starElement, index) => {
-        starElement.addEventListener('mouseover', () => {
-          starElement.classList.add(...hover);
-          if (index <= 1) {
-            starElement.previousElementSibling.tagName === 'BUTTON' ? starElement.previousElementSibling.classList.add(...hover) : null;
-          }
-          else {
-            for (let i = 0; i < index; i++) {
-              starElements[i].classList.add(...hover);
-            }
-          }
-        });
-        starElement.addEventListener('mouseout', () => starElement.classList.remove(...hover));
-      });
-    });
-  }
   previousTab() {
     this.currentIndex > 0 && this.currentIndex--;
     Helper.toggleElementClassIf(this.backBtn, 's-rating-modal-unvisiable', 'block', () => this.currentIndex == 0);
@@ -189,13 +143,6 @@ export class SallaRatingModal {
     this.host.querySelector('.s-rating-modal-footer').classList.add('s-rating-modal-unvisiable');
     this.showActiveStep(this.thanksTab);
   }
-  renderRatingStars(size, name = 'rating') {
-    return (h("form", { class: "s-rating-modal-stars-element" },
-      h("input", { type: "hidden", class: "rating_hidden_input", name: name, value: "" }),
-      [1, 2, 3, 4, 5].map(star => h("button", { type: "submit", class: `s-rating-modal-btn-star s-rating-modal-btn-star-` + size, "data-star": star },
-        h("i", { class: "sicon-star2" })))));
-  }
-  // render
   render() {
     return (h(Host, { id: "s-rating" },
       h("salla-modal", { isLoading: true, width: "md", ref: modal => this.modal = modal }, this.order
@@ -206,8 +153,7 @@ export class SallaRatingModal {
                   h("img", { src: salla.config.get('store.logo', 'https://assets.salla.sa/cp/assets/images/logo-new.png'), alt: "store name", class: "s-rating-modal-store-logo" })),
                 h("h2", { class: "s-rating-modal-title" }, this.rate_the_store),
                 h("div", { class: "s-rating-modal-stars-company" },
-                  " ",
-                  this.renderRatingStars('large')),
+                  h("salla-rating-stars", { size: "large" })),
                 h("textarea", { id: "storeReview", name: "comment", class: "s-rating-modal-comment", placeholder: this.write_store_rate }),
                 h("small", { class: "s-rating-modal-validation-msg" }))
               : '',
@@ -219,8 +165,7 @@ export class SallaRatingModal {
                     " ",
                     item.product.name),
                   h("div", { class: "s-rating-modal-stars-product" },
-                    " ",
-                    this.renderRatingStars('small', `products[${index}][rating]`)),
+                    h("salla-rating-stars", { size: "small", name: `products[${index}][rating]` })),
                   h("input", { type: "hidden", name: `products[${index}][product_id]`, value: item.product.id }),
                   h("textarea", { placeholder: this.write_product_rate, name: `products[${index}][comment]`, class: "s-rating-modal-comment" }),
                   h("small", { class: "s-rating-modal-validation-msg" })))))
@@ -235,7 +180,8 @@ export class SallaRatingModal {
                 h("div", { class: "s-rating-modal-title" },
                   " ",
                   this.rate_shipping + ' ' + this.order.shipping.company.name),
-                h("div", { class: "s-rating-modal-stars-company" }, this.renderRatingStars('large')),
+                h("div", { class: "s-rating-modal-stars-company" },
+                  h("salla-rating-stars", { size: "large" })),
                 h("textarea", { name: "comment", class: "s-rating-modal-comment", placeholder: this.write_shipping_rate }),
                 h("small", { class: "s-rating-modal-validation-msg" }))
               : '',