98 lines
3.7 KiB
JavaScript
98 lines
3.7 KiB
JavaScript
/**
|
|
* 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';
|
|
// eslint-disable-next-line
|
|
import 'velocity-animate';
|
|
// import updateSources from 'update-sources';
|
|
|
|
export default class ProductSelect {
|
|
init() {
|
|
const MAX_THUMBS = 5;
|
|
const $arrows = $('.js-modal-arrows');
|
|
const $thumbnails = $('.js-modal-product-images');
|
|
|
|
$('body')
|
|
.on('click', '.js-modal-thumb', (event) => {
|
|
// Swap active classes on thumbnail
|
|
if ($('.js-modal-thumb').hasClass('selected')) {
|
|
$('.js-modal-thumb').removeClass('selected');
|
|
}
|
|
$(event.currentTarget).addClass('selected');
|
|
|
|
// Get data from thumbnail and update cover src, alt and title
|
|
$(prestashop.themeSelectors.product.modalProductCover).attr('src', $(event.target).data('image-large-src'));
|
|
$(prestashop.themeSelectors.product.modalProductCover).attr('title', $(event.target).attr('title'));
|
|
$(prestashop.themeSelectors.product.modalProductCover).attr('alt', $(event.target).attr('alt'));
|
|
|
|
// Get data from thumbnail and update cover sources
|
|
// updateSources(
|
|
// $(prestashop.themeSelectors.product.modalProductCover),
|
|
// $(event.target).data('image-large-sources'),
|
|
// );
|
|
})
|
|
.on('click', 'aside#thumbnails', (event) => {
|
|
if (event.target.id === 'thumbnails') {
|
|
$('#product-modal').modal('hide');
|
|
}
|
|
});
|
|
|
|
if ($('.js-modal-product-images li').length <= MAX_THUMBS) {
|
|
$arrows.css('opacity', '.2');
|
|
} else {
|
|
$arrows.on('click', (event) => {
|
|
if ($(event.target).hasClass('arrow-up') && $thumbnails.position().top < 0) {
|
|
this.move('up');
|
|
$('.js-modal-arrow-down').css('opacity', '1');
|
|
} else if (
|
|
$(event.target).hasClass('arrow-down')
|
|
&& $thumbnails.position().top + $thumbnails.height() > $('.js-modal-mask').height()
|
|
) {
|
|
this.move('down');
|
|
$('.js-modal-arrow-up').css('opacity', '1');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
move(direction) {
|
|
const THUMB_MARGIN = 10;
|
|
const $thumbnails = $('.js-modal-product-images');
|
|
const thumbHeight = $('.js-modal-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) {
|
|
$('.js-modal-arrow-up').css('opacity', '.2');
|
|
} else if ($thumbnails.position().top + $thumbnails.height() <= $('.js-modal-mask').height()) {
|
|
$('.js-modal-arrow-down').css('opacity', '.2');
|
|
}
|
|
},
|
|
);
|
|
}
|
|
}
|