harpiya_frontend 4.3.0.alpha

data/app/assets/javascripts/harpiya/frontend/views/harpiya/shared/carousel/swipes.js

@@ -0,0 +1,53 @@
+Harpiya.ready(function($) {
+  Harpiya.addSwipeEventListeners = function($carousel) {
+    var touchStartX = 0
+    var touchStartY = 0
+    var touchCurrentX = 0
+    var touchCurrentY = 0
+
+    var SWIPE_THRESHOLD = 40
+
+    $carousel.on('touchstart.bs.carousel', function(event) {
+      touchStartX = event.touches[0].clientX
+      touchStartY = event.touches[0].clientY
+    })
+
+    $carousel.on('touchmove.bs.carousel', function(event) {
+      touchCurrentX = event.touches[0].clientX
+      touchCurrentY = event.touches[0].clientY
+    })
+
+    $carousel.on('touchend.bs.carousel', function(_event) {
+      var carouselInstance = $carousel.data('bs.carousel')
+
+      var touchDeltaX = touchCurrentX - touchStartX
+      var touchDeltaY = touchCurrentY - touchStartY
+
+      var absDeltaX = Math.abs(touchDeltaX)
+      var absDeltaY = Math.abs(touchDeltaY)
+
+      if (touchCurrentX > 0 && absDeltaX > SWIPE_THRESHOLD && absDeltaX > absDeltaY) {
+        var direction = absDeltaX / touchDeltaX
+
+        if (direction > 0) {
+          carouselInstance.prev()
+        }
+
+        if (direction < 0) {
+          carouselInstance.next()
+        }
+      }
+
+      touchCurrentX = 0
+      touchStartX = 0
+      touchCurrentY = 0
+      touchStartY = 0
+
+      carouselInstance.touchDeltaX = 0
+    })
+  }
+
+  $('.carousel').each(function(_index, carousel) {
+    Harpiya.addSwipeEventListeners($(carousel))
+  })
+})

data/app/assets/javascripts/harpiya/frontend/views/harpiya/shared/carousel/thumbnails.js

@@ -0,0 +1,177 @@
+function ThumbnailsCarousel($, carousel) {
+  var VISIBLE_IMAGE_SELECTOR = '.product-thumbnails-carousel-item-single--visible img'
+  var SELECTED_IMAGE_CLASS = 'selected'
+  var self = this
+  var modalCarouselId = 'productModalThumbnailsCarousel'
+  var modalCarousel = $('#' + modalCarouselId)
+  var zoomClickObject = $('.product-carousel-overlay-modal-opener')
+
+  this.constructor = function() {
+    this.bindEventHandlers()
+  }
+
+  this.bindEventHandlers = function() {
+    zoomClickObject.on('click', this.handleZoomClick)
+    carousel.on('click', 'img', this.handleImageClick)
+    carousel.on('thumbnails:ready', this.handleThumbnailsReady)
+
+    $('body').on('single_carousel:slide', this.handleSingleCarouselSlide)
+  }
+
+  this.handleImageClick = function(event) {
+    self.selectImage(event, $(event.target))
+  }
+
+  this.handleThumbnailsReady = function(event) {
+    var image = carousel.find(VISIBLE_IMAGE_SELECTOR).eq(0)
+
+    self.selectImage(event, image)
+  }
+
+  this.handleSingleCarouselSlide = function(event, imageIndex) {
+    var image;
+    if (event.target.id === 'productModalCarousel') {
+      image = modalCarousel.find('[data-product-carousel-to-slide=' + imageIndex + '] img')
+      self.unselectModalImages()
+    } else {
+      image = carousel.find('[data-product-carousel-to-slide=' + imageIndex + '] img')
+      self.unselectThumbanilsImages()
+    }
+
+    image.addClass(SELECTED_IMAGE_CLASS)
+  }
+
+  this.selectImage = function(event, image) {
+    var clickedElement = event.target
+    var productModalThumbnailClicked = $(clickedElement).closest('.product-thumbnails-carousel').is('#' + modalCarouselId)
+
+    if (clickedElement.id === modalCarouselId || productModalThumbnailClicked) {
+      this.unselectModalImages()
+    } else {
+      this.unselectThumbanilsImages()
+    }
+
+    image.addClass(SELECTED_IMAGE_CLASS)
+  }
+
+  this.unselectThumbanilsImages = function() {
+    carousel.find('img').removeClass(SELECTED_IMAGE_CLASS)
+  }
+
+  this.unselectModalImages = function() {
+    modalCarousel.find('img').removeClass(SELECTED_IMAGE_CLASS)
+  }
+
+  this.handleZoomClick = function(event) {
+    var selectedImageId = self.getSelectedImageId()
+    var image = modalCarousel.find(VISIBLE_IMAGE_SELECTOR).eq(selectedImageId)
+    self.unselectModalImages()
+
+    image.addClass(SELECTED_IMAGE_CLASS)
+  }
+
+  this.getSelectedImageId = function() {
+    var selectedImages = $('#productThumbnailsCarousel').find('img.d-block.w-100.lazyloaded.selected')
+
+    if (selectedImages.length > 1) {
+      return $(selectedImages[1]).parent()[0].dataset.productCarouselToSlide
+    } else {
+      return '0'
+    }
+  }
+
+  this.constructor()
+}
+
+Harpiya.ready(function($) {
+  // Adjust thumbnails carousel based on picked variant.
+
+  if ($('#product-details').length) {
+
+    var variantIdAttributeName = 'data-variant-id'
+    var carouselItemSelector = '[data-variant-id]'
+    var isMasterVariantAttributeName = 'data-variant-is-master'
+    var enabledCarouselItemClass = 'carousel-item'
+    var activeCarouselItemClass = 'active'
+    var getCarouselsWithVariantChangeTriggerSelector = function(triggerId) {
+      return (
+        '.product-thumbnails-carousel[data-variant-change-trigger-identifier="' +
+        triggerId +
+        '"]'
+      )
+    }
+
+    Harpiya.showThumbnailsCarouselVariantImages = function(carousel, variantId) {
+      var carouselSlideSelector = '.product-thumbnails-carousel-item'
+      var carouselSlideContainerSelector =
+        '.product-thumbnails-carousel-item-content'
+      var enabledCarouselSingleClass =
+        'product-thumbnails-carousel-item-single--visible'
+      var carouselToSlideAttributeName = 'data-product-carousel-to-slide'
+      var carouselPerPageAttributeName = 'data-product-carousel-per-page'
+      var carouselEmptyClass = 'product-thumbnails-carousel--empty'
+
+      carousel.carouselBootstrap4('dispose')
+      var qualifiedSlides = 0
+      var perPage = parseInt(carousel.attr(carouselPerPageAttributeName)) || 1
+      var slides = carousel.find(carouselSlideSelector)
+
+      carousel
+        .find(carouselItemSelector)
+        .each(function(_itemIndex, slideElement) {
+          // Switch item visibility in the carousel based on picked variant.
+
+          var targetSlideIndex
+          var slide = $(slideElement)
+          var qualifies =
+            slide.attr(variantIdAttributeName) === variantId ||
+            slide.attr(isMasterVariantAttributeName) === 'true'
+
+          if (qualifies) {
+            qualifiedSlides += 1
+            slide.attr(carouselToSlideAttributeName, qualifiedSlides - 1)
+          }
+
+          targetSlideIndex = Math.max(0, Math.ceil(qualifiedSlides / perPage) - 1)
+          slide.detach()
+          slides
+            .eq(targetSlideIndex)
+            .find(carouselSlideContainerSelector)
+            .append(slide)
+          slide.toggleClass(enabledCarouselSingleClass, qualifies)
+        })
+      var enabledSlidesCount = Math.ceil(qualifiedSlides / perPage)
+      carousel
+        .find(carouselSlideSelector)
+        .each(function(slideIndex, slideElement) {
+          var slide = $(slideElement)
+          slide.toggleClass(
+            enabledCarouselItemClass,
+            slideIndex < enabledSlidesCount
+          )
+          slide.toggleClass(activeCarouselItemClass, slideIndex === 0)
+        })
+
+      // If there are no images to show after picking a variant, disable the carousel.
+      carousel.toggleClass(carouselEmptyClass, enabledSlidesCount === 0)
+
+      carousel.carouselBootstrap4()
+      carousel.trigger('thumbnails:ready')
+    }
+
+    $('#product-details').on('variant_id_change', function(options) {
+      var triggerId = options.triggerId
+      var variantId = options.variantId
+      $(getCarouselsWithVariantChangeTriggerSelector(triggerId)).each(function(
+        _carouselElementIndex,
+        carouselElement
+      ) {
+        Harpiya.showThumbnailsCarouselVariantImages($(carouselElement), variantId)
+      })
+    })
+
+    var carousel = $('#productThumbnailsCarousel')
+
+    ThumbnailsCarousel($, carousel)
+  }
+})

data/app/assets/javascripts/harpiya/frontend/views/harpiya/shared/delete_address_popup.js

@@ -0,0 +1,27 @@
+Harpiya.ready(function($) {
+  var deleteAddressLinks = document.querySelectorAll('.js-delete-address-link');
+  if (deleteAddressLinks.length > 0) {
+    deleteAddressLinks.forEach(function(deleteLink) {
+      deleteLink.addEventListener('click', function(e) {
+        document.querySelector('#overlay').classList.add('shown');
+        document.querySelector('#delete-address-popup').classList.add('shown');
+        document.querySelector('#delete-address-popup-confirm').href = e.currentTarget.dataset.address;
+      }, false)
+    })
+  }
+
+  document.querySelector('#overlay').addEventListener('click', function () {
+    var addressActionElement = document.querySelector('#delete-address-popup');
+    if (addressActionElement) addressActionElement.classList.remove('shown');
+  }, false);
+
+  var popupCloseButtons = document.querySelectorAll('.js-delete-address-popup-close-button')
+  if (popupCloseButtons.length > 0) {
+    popupCloseButtons.forEach(function(closeButton) {
+      closeButton.addEventListener('click', function(e) {
+        document.querySelector('#overlay').classList.remove('shown');
+        document.querySelector('#delete-address-popup').classList.remove('shown');
+      })
+    })
+  }
+})

data/app/assets/javascripts/harpiya/frontend/views/harpiya/shared/mobile_navigation.js

@@ -0,0 +1,122 @@
+Harpiya.ready(function($) {
+
+  function MobileNavigationManager()  {
+    this.mobileNavigation = document.querySelector('.mobile-navigation');
+
+    if (this.mobileNavigation !== null) {
+      this.burgerButton = document.querySelector('.navbar-toggler');
+      this.closeButton = document.querySelector('#mobile-navigation-close-button');
+      this.mobileNavigationList = document.querySelector('.mobile-navigation-list');
+      this.categoryLinks = document.querySelectorAll('.mobile-navigation-category-link');
+      this.backButton = document.querySelector('#mobile-navigation-back-button');
+      this.overlay = document.querySelector('#overlay');
+      this.navigationOpen = false;
+      this.openedCategories = ['main'];
+
+      this.onResize = this.onResize.bind(this);
+      this.onCategoryClick = this.onCategoryClick.bind(this);
+      this.onBurgerClick = this.onBurgerClick.bind(this);
+      this.onCloseClick = this.onCloseClick.bind(this);
+      this.onBackClick = this.onBackClick.bind(this);
+      this.closeAllCategories = this.closeAllCategories.bind(this);
+
+      window.addEventListener('resize', this.onResize);
+      window.addEventListener('turbolinks:request-start', this.onCloseClick);
+
+      this.burgerButton.addEventListener('click', this.onBurgerClick, false);
+      this.closeButton.addEventListener('click', this.onCloseClick, false);
+      this.backButton.addEventListener('click', this.onBackClick, false);
+
+      this.categoryLinks.forEach(function(link) {
+        link.addEventListener('click', this.onCategoryClick)
+      }.bind(this))
+    }
+  }
+
+  MobileNavigationManager.prototype.onResize = function(e) {
+    var currentWidth = e.currentTarget.innerWidth;
+    if (this.navigationOpen && currentWidth >= 1200) this.close();
+  }
+
+  MobileNavigationManager.prototype.onCategoryClick = function(e) {
+    var category = e.currentTarget.dataset.category;
+    e.preventDefault();
+    this.openCategory(category);
+  }
+
+  MobileNavigationManager.prototype.onBurgerClick = function() {
+    if (this.navigationOpen) {
+      this.close();
+    } else {
+      this.open();
+    }
+  };
+
+  MobileNavigationManager.prototype.onCloseClick = function() {
+    this.close();
+    setTimeout(this.closeAllCategories, 500);
+  };
+
+  MobileNavigationManager.prototype.onBackClick = function() {
+    this.closeCurrentCategory();
+  };
+
+  MobileNavigationManager.prototype.open = function() {
+    this.navigationOpen = true;
+    this.mobileNavigation.classList.add('shown');
+    document.body.style.overflow = "hidden";
+    this.overlay.classList.add('shown');
+  }
+
+  MobileNavigationManager.prototype.close = function() {
+    this.navigationOpen = false;
+    this.mobileNavigation.classList.remove('shown');
+    document.body.style.overflow = "";
+    this.overlay.classList.remove('shown');
+  }
+
+  MobileNavigationManager.prototype.openCategory = function(category) {
+    this.openedCategories.push(category);
+    var subList = document.querySelector('ul[data-category=' + category + ']');
+    if (subList) {
+      this.mobileNavigationList.classList.add('mobile-navigation-list-subcategory-shown');
+      this.mobileNavigationList.scrollTop = 0
+      subList.classList.add('shown');
+      this.backButton.classList.add('shown');
+    }
+    return false;
+  }
+
+  MobileNavigationManager.prototype.closeCurrentCategory = function() {
+    var category = this.openedCategories.pop();
+    var subList = document.querySelector('ul[data-category=' + category + ']');
+    if (subList) {
+      subList.classList.remove('shown');
+    }
+    if (this.openedCategories[this.openedCategories.length - 1] === 'main') {
+      this.backButton.classList.remove('shown');
+    }
+    this.mobileNavigationList.classList.remove('mobile-navigation-list-subcategory-shown')
+    return false;
+  }
+
+  MobileNavigationManager.prototype.closeCategory = function(category) {
+    var subList = document.querySelector('ul[data-category=' + category + ']');
+    subList.style.transition = 'none';
+    subList.classList.remove('shown');
+    setTimeout(function(){ subList.style.transition = ''; }, 500);
+  }
+
+  MobileNavigationManager.prototype.closeAllCategories = function() {
+    var openedCategories = this.openedCategories;
+    if (openedCategories.length === 1) return false;
+    for (var i = openedCategories.length - 1; i > 0; i--) {
+      var category = openedCategories.pop();
+      this.closeCategory(category);
+    }
+    this.mobileNavigationList.classList.remove('mobile-navigation-list-subcategory-shown')
+    this.backButton.classList.remove('shown');
+  }
+
+  new MobileNavigationManager();
+})

data/app/assets/javascripts/harpiya/frontend/views/harpiya/shared/nav_bar.js

@@ -0,0 +1,25 @@
+$(document).ready(function() {
+  var searchIcons = document.querySelectorAll('#nav-bar .search-icons')[0]
+  var searchDropdown = document.getElementById('search-dropdown')
+
+  if (searchIcons !== undefined) {
+    searchIcons.addEventListener(
+      'click',
+      toggleSearchBar,
+      false
+    )
+  }
+
+  function toggleSearchBar() {
+    if (searchDropdown.classList.contains('shown')) {
+      document.querySelector('.header-harpiya').classList.remove('above-overlay')
+      document.getElementById('overlay').classList.remove('shown')
+      searchDropdown.classList.remove('shown')
+    } else {
+      document.querySelector('.header-harpiya').classList.add('above-overlay')
+      document.getElementById('overlay').classList.add('shown')
+      searchDropdown.classList.add('shown')
+      document.querySelector('#search-dropdown input').focus()
+    }
+  }
+})

data/app/assets/javascripts/harpiya/frontend/views/harpiya/shared/product_added_modal.js

@@ -0,0 +1,35 @@
+Harpiya.showProductAddedModal = function(product, variant) {
+  var modalSelector = '.product-added-modal'
+  var nameSelector = '.product-added-modal-product-details-name'
+  var priceSelector = '.product-added-modal-product-details-price'
+  var imageSelector = '.product-added-modal-product-image-container-image'
+  var modalNoImageClass = 'product-added-modal--no-image'
+
+  var price = variant.display_price
+  var images = variant && variant.images.length > 0 ? variant.images : product.images
+  var name = product.name
+  var leadImage = images.length === 0 ? null : images[0]
+  var $modal = $(modalSelector)
+
+  $modal.find(nameSelector).text(name)
+  $modal.find(priceSelector).html(price)
+
+  if (leadImage !== null) {
+    $modal
+      .removeClass(modalNoImageClass)
+      .find(imageSelector)
+      .attr('src', leadImage.url_product)
+      .attr('alt', leadImage.alt || name)
+  } else {
+    $modal.addClass(modalNoImageClass)
+  }
+
+  $modal.modal()
+}
+
+Harpiya.hideProductAddedModal = function() {
+  var modalSelector = '.product-added-modal'
+  var $modal = $(modalSelector)
+
+  $modal.modal('hide')
+}

data/app/assets/javascripts/harpiya/frontend/views/harpiya/shared/quantity_select.js

@@ -0,0 +1,58 @@
+Harpiya.ready(function($) {
+  var quantitySelectSelector = '.quantity-select'
+  var quantitySelectDecreaseSelector = '.quantity-select-decrease'
+  var quantitySelectIncreaseSelector = '.quantity-select-increase'
+  var quantitySelectValueSelector = '.quantity-select-value'
+  var body = $('body')
+
+  var onQuantityDecreaseClick = function(event) {
+    var $quantitySelect = $(event.currentTarget).closest(quantitySelectSelector)
+    var $quantitySelectValue = $quantitySelect.find(quantitySelectValueSelector)
+    var min =
+      typeof $quantitySelectValue.attr('min') === 'undefined'
+        ? undefined
+        : parseInt($quantitySelectValue.attr('min'), 10)
+    var value = parseInt($quantitySelectValue.val(), 10)
+
+    if (typeof min === 'undefined' || value > min) {
+      $quantitySelectValue.val(value - 1)
+    }
+  }
+  var onQuantityIncreaseClick = function(event) {
+    var $quantitySelect = $(event.currentTarget).closest(quantitySelectSelector)
+    var $quantitySelectValue = $quantitySelect.find(quantitySelectValueSelector)
+    var max =
+      typeof $quantitySelectValue.attr('max') === 'undefined'
+        ? undefined
+        : parseInt($quantitySelectValue.attr('max'), 10)
+    var value = parseInt($quantitySelectValue.val(), 10)
+
+    if (typeof max === 'undefined' || value < max) {
+      $quantitySelectValue.val(value + 1)
+    }
+  }
+
+  var onValueChange = function(event) {
+    var $quantitySelect = $(event.currentTarget).closest(quantitySelectSelector)
+    var $quantitySelectValue = $quantitySelect.find(quantitySelectValueSelector)
+    var value = parseInt($quantitySelectValue.val(), 10)
+    var min =
+      typeof $quantitySelectValue.attr('min') === 'undefined'
+        ? undefined
+        : parseInt($quantitySelectValue.attr('min'), 10)
+    var max =
+      typeof $quantitySelectValue.attr('max') === 'undefined'
+        ? undefined
+        : parseInt($quantitySelectValue.attr('max'), 10)
+
+    if (value < min) {
+      $quantitySelectValue.val(min)
+    } else if (value > max) {
+      $quantitySelectValue.val(max)
+    }
+  }
+
+  body.off('click', quantitySelectDecreaseSelector).on('click', quantitySelectDecreaseSelector, onQuantityDecreaseClick)
+  body.off('click', quantitySelectIncreaseSelector).on('click', quantitySelectIncreaseSelector, onQuantityIncreaseClick)
+  body.off('change', quantitySelectValueSelector).on('change', quantitySelectValueSelector, onValueChange)
+})