theme-elegance/_dev/js/listing.js

/**
 * Copyright since 2007 PrestaShop SA and Contributors
 * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
 * that is bundled with this package in the file LICENSE.md.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/AFL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@prestashop.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to https://devdocs.prestashop.com/ for more information.
 *
 * @author    PrestaShop SA and Contributors <contact@prestashop.com>
 * @copyright Since 2007 PrestaShop SA and Contributors
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
 */
import $ from 'jquery';
import prestashop from 'prestashop';
// eslint-disable-next-line
import "velocity-animate";
import updateSources from './components/update-sources';
import ProductMinitature from './components/product-miniature';

$(document).ready(() => {
  const move = (direction) => {
    const THUMB_MARGIN = 20;
    const $thumbnails = $('.js-qv-product-images');
    const thumbHeight = $('.js-qv-product-images li img').height() + THUMB_MARGIN;
    const currentPosition = $thumbnails.position().top;
    $thumbnails.velocity(
      {
        translateY:
          direction === 'up'
            ? currentPosition + thumbHeight
            : currentPosition - thumbHeight,
      },
      () => {
        if ($thumbnails.position().top >= 0) {
          $('.arrow-up').css('opacity', '.2');
        } else if (
          $thumbnails.position().top + $thumbnails.height()
          <= $('.js-qv-mask').height()
        ) {
          $('.arrow-down').css('opacity', '.2');
        }
      },
    );
  };

  const productConfig = (qv) => {
    const MAX_THUMBS = 4;
    const $arrows = $(prestashop.themeSelectors.product.arrows);
    const $thumbnails = qv.find('.js-qv-product-images');
    $(prestashop.themeSelectors.product.thumb).on('click', (event) => {
      // Swap active classes on thumbnail
      if ($(prestashop.themeSelectors.product.thumb).hasClass('selected')) {
        $(prestashop.themeSelectors.product.thumb).removeClass('selected');
      }
      $(event.currentTarget).addClass('selected');

      // Get data from thumbnail and update cover src, alt and title
      $(prestashop.themeSelectors.product.cover).attr(
        'src',
        $(event.target).data('image-large-src'),
      );
      $(prestashop.themeSelectors.product.cover).attr(
        'alt',
        $(event.target).attr('alt'),
      );
      $(prestashop.themeSelectors.product.cover).attr(
        'title',
        $(event.target).attr('title'),
      );

      // Get data from thumbnail and update cover sources
      updateSources(
        $(prestashop.themeSelectors.product.cover),
        $(event.target).data('image-large-sources'),
      );
    });
    if ($thumbnails.find('li').length <= MAX_THUMBS) {
      $arrows.hide();
    } else {
      $arrows.on('click', (event) => {
        if (
          $(event.target).hasClass('arrow-up')
          && $('.js-qv-product-images').position().top < 0
        ) {
          move('up');
          $(prestashop.themeSelectors.arrowDown).css('opacity', '1');
        } else if (
          $(event.target).hasClass('arrow-down')
          && $thumbnails.position().top + $thumbnails.height()
            > $('.js-qv-mask').height()
        ) {
          move('down');
          $(prestashop.themeSelectors.arrowUp).css('opacity', '1');
        }
      });
    }
    qv.find(prestashop.selectors.quantityWanted).TouchSpin({
      verticalbuttons: true,
      min: 1,
      max: 1000000,
    });

    $(prestashop.themeSelectors.touchspin).off('touchstart.touchspin');
  };

  prestashop.on('clickQuickView', (elm) => {
    const data = {
      action: 'quickview',
      id_product: elm.dataset.idProduct,
      id_product_attribute: elm.dataset.idProductAttribute,
    };
    $.post(prestashop.urls.pages.product, data, null, 'json')
      .then((resp) => {
        $('body').append(resp.quickview_html);
        const productModal = $(
          `#quickview-modal-${resp.product.id}-${resp.product.id_product_attribute}`,
        );
        productModal.modal('show');
        productConfig(productModal);
        productModal.on('hidden.bs.modal', () => {
          productModal.remove();
        });
      })
      .fail((resp) => {
        prestashop.emit('handleError', {
          eventType: 'clickQuickView',
          resp,
        });
      });
  });

  $('body').on(
    'click',
    prestashop.themeSelectors.listing.searchFilterToggler,
    () => {
      $(prestashop.themeSelectors.listing.searchFiltersWrapper).removeClass(
        'hidden-sm-down',
      );
      $(prestashop.themeSelectors.contentWrapper).addClass('hidden-sm-down');
      $(prestashop.themeSelectors.footer).addClass('hidden-sm-down');
    },
  );
  $(
    `${prestashop.themeSelectors.listing.searchFilterControls} ${prestashop.themeSelectors.clear}`,
  ).on('click', () => {
    $(prestashop.themeSelectors.listing.searchFiltersWrapper).addClass(
      'hidden-sm-down',
    );
    $(prestashop.themeSelectors.contentWrapper).removeClass('hidden-sm-down');
    $(prestashop.themeSelectors.footer).removeClass('hidden-sm-down');
  });
  $(`${prestashop.themeSelectors.listing.searchFilterControls} .ok`).on(
    'click',
    () => {
      $(prestashop.themeSelectors.listing.searchFiltersWrapper).addClass(
        'hidden-sm-down',
      );
      $(prestashop.themeSelectors.contentWrapper).removeClass('hidden-sm-down');
      $(prestashop.themeSelectors.footer).removeClass('hidden-sm-down');
    },
  );

  const parseSearchUrl = function (event) {
    if (event.target.dataset.searchUrl !== undefined) {
      return event.target.dataset.searchUrl;
    }

    if ($(event.target).parent()[0].dataset.searchUrl === undefined) {
      throw new Error('Can not parse search URL');
    }

    return $(event.target).parent()[0].dataset.searchUrl;
  };

  function updateProductListDOM(data) {
    $(prestashop.themeSelectors.listing.searchFilters).replaceWith(
      data.rendered_facets,
    );
    $(prestashop.themeSelectors.listing.activeSearchFilters).replaceWith(
      data.rendered_active_filters,
    );
    $(prestashop.themeSelectors.listing.listTop).replaceWith(
      data.rendered_products_top,
    );

    const renderedProducts = $(data.rendered_products);
    const productSelectors = $(prestashop.themeSelectors.listing.product);

    if (productSelectors.length > 0) {
      productSelectors
        .removeClass()
        .addClass(productSelectors.first().attr('class'));
    } else {
      productSelectors
        .removeClass()
        .addClass(renderedProducts.first().attr('class'));
    }

    $(prestashop.themeSelectors.listing.list).replaceWith(renderedProducts);

    $(prestashop.themeSelectors.listing.listBottom).replaceWith(
      data.rendered_products_bottom,
    );
    if (data.rendered_products_header) {
      $(prestashop.themeSelectors.listing.listHeader).replaceWith(
        data.rendered_products_header,
      );
    }

    const productMinitature = new ProductMinitature();
    productMinitature.init();
  }

  $('body').on(
    'change',
    `${prestashop.themeSelectors.listing.searchFilters} input[data-search-url]`,
    (event) => {
      prestashop.emit('updateFacets', parseSearchUrl(event));
    },
  );

  $('body').on(
    'click',
    prestashop.themeSelectors.listing.searchFiltersClearAll,
    (event) => {
      prestashop.emit('updateFacets', parseSearchUrl(event));
    },
  );

  $('body').on(
    'click',
    prestashop.themeSelectors.listing.searchLink,
    (event) => {
      event.preventDefault();
      prestashop.emit('updateFacets', $(event.target).closest('a').get(0).href);
    },
  );

  window.addEventListener('popstate', (e) => {
    if (e.state && e.state.current_url) {
      window.location.href = e.state.current_url;
    }
  });

  $('body').on(
    'change',
    `${prestashop.themeSelectors.listing.searchFilters} select`,
    (event) => {
      const form = $(event.target).closest('form');
      prestashop.emit('updateFacets', `?${form.serialize()}`);
    },
  );

  prestashop.on('updateProductList', (data) => {
    updateProductListDOM(data);
    window.scrollTo(0, 0);
  });
});