' + '
';
$('body').append(htmlString);
$('.modal-body').spinner().start();
$.ajax({
url: bonusUrl,
method: 'GET',
dataType: 'html',
success: function success(html) {
var parsedHtml = parseHtml(html);
$('#chooseBonusProductModal .modal-body').empty();
$('#chooseBonusProductModal .modal-body').html(parsedHtml.body);
$('#chooseBonusProductModal .modal-footer').html(parsedHtml.footer);
$('#chooseBonusProductModal').modal('show');
$.spinner().stop();
},
error: function error() {
$.spinner().stop();
}
});
}
/**
* Updates the Mini-Cart quantity value after the customer has pressed the "Add to Cart" button
* @param {string} response - ajax response from clicking the add to cart button
*/
function handlePostCartAdd(response) {
$('.minicart').trigger('count:update', response);
var messageType = response.error ? 'alert-danger' : 'alert-success'; // show add to cart toast
if (response.newBonusDiscountLineItem && Object.keys(response.newBonusDiscountLineItem).length !== 0) {
chooseBonusProducts(response.newBonusDiscountLineItem);
} else {
if ($('.add-to-cart-messages').length === 0) {
$('body').append('');
}
$('.add-to-cart-messages').append('');
setTimeout(function () {
$('.add-to-basket-alert').remove();
}, 5000);
}
}
/**
* Retrieves the bundle product item ID's for the Controller to replace bundle master product
* items with their selected variants
*
* @return {string[]} - List of selected bundle product item ID's
*/
function getChildProducts() {
var childProducts = [];
$('.bundle-item').each(function () {
childProducts.push({
pid: $(this).find('.product-id').text(),
quantity: parseInt($(this).find('label.quantity').data('quantity'), 10)
});
});
return childProducts.length ? JSON.stringify(childProducts) : [];
}
/**
* Retrieve product options
*
* @param {jQuery} $productContainer - DOM element for current product
* @return {string} - Product options and their selected values
*/
function getOptions($productContainer) {
var options = $productContainer.find('.product-option').map(function () {
var $elOption = $(this).find('.options-select');
var urlValue = $elOption.val();
var selectedValueId = $elOption.find('option[value="' + urlValue + '"]').data('value-id');
return {
optionId: $(this).data('option-id'),
selectedValueId: selectedValueId
};
}).toArray();
return JSON.stringify(options);
}
/* harmony default export */ __webpack_exports__["default"] = ({
attributeSelect: attributeSelect,
methods: {
editBonusProducts: function editBonusProducts(data) {
chooseBonusProducts(data);
}
},
colorAttribute: function colorAttribute() {
$(document).on('click', '[data-attr="color"] a', function (e) {
e.preventDefault();
if ($(this).attr('disabled')) {
return;
}
var $productContainer = $(this).closest('.set-item');
if (!$productContainer.length) {
$productContainer = $(this).closest('.product-detail');
}
attributeSelect(e.currentTarget.href, $productContainer);
});
},
selectAttribute: function selectAttribute() {
$(document).on('change', 'select[class*="select-"], .options-select', function (e) {
e.preventDefault();
var $productContainer = $(this).closest('.set-item');
if (!$productContainer.length) {
$productContainer = $(this).closest('.product-detail');
}
attributeSelect(e.currentTarget.value, $productContainer);
});
},
availability: function availability() {
$(document).on('change', '.quantity-select', function (e) {
e.preventDefault();
var $productContainer = $(this).closest('.product-detail');
if (!$productContainer.length) {
$productContainer = $(this).closest('.modal-content').find('.product-quickview');
}
if ($('.bundle-items', $productContainer).length === 0) {
attributeSelect($(e.currentTarget).find('option:selected').data('url'), $productContainer);
}
});
},
addToCart: function addToCart() {
$(document).on('click', 'button.add-to-cart, button.add-to-cart-global', function () {
var addToCartUrl;
var pid;
var pidsObj;
var setPids;
$('body').trigger('product:beforeAddToCart', this);
if ($('.set-items').length && $(this).hasClass('add-to-cart-global')) {
setPids = [];
$('.product-detail').each(function () {
if (!$(this).hasClass('product-set-detail')) {
setPids.push({
pid: $(this).find('.product-id').text(),
qty: $(this).find('.quantity-select').val(),
options: getOptions($(this))
});
}
});
pidsObj = JSON.stringify(setPids);
}
pid = getPidValue($(this));
var $productContainer = $(this).closest('.product-detail');
if (!$productContainer.length) {
$productContainer = $(this).closest('.quick-view-dialog').find('.product-detail');
}
addToCartUrl = getAddToCartUrl();
var form = {
pid: pid,
pidsObj: pidsObj,
childProducts: getChildProducts(),
quantity: getQuantitySelected($(this))
};
if (!$('.bundle-item').length) {
form.options = getOptions($productContainer);
}
$(this).trigger('updateAddToCartFormData', form);
if (addToCartUrl) {
$.ajax({
url: addToCartUrl,
method: 'POST',
data: form,
success: function success(data) {
handlePostCartAdd(data);
$('body').trigger('product:afterAddToCart', data);
$.spinner().stop();
},
error: function error() {
$.spinner().stop();
}
});
}
});
},
selectBonusProduct: function selectBonusProduct() {
$(document).on('click', '.select-bonus-product', function () {
var $choiceOfBonusProduct = $(this).parents('.choice-of-bonus-product');
var pid = $(this).data('pid');
var maxPids = $('.choose-bonus-product-dialog').data('total-qty');
var submittedQty = parseInt($(this).parents('.choice-of-bonus-product').find('.bonus-quantity-select').val(), 10);
var totalQty = 0;
$.each($('#chooseBonusProductModal .selected-bonus-products .selected-pid'), function () {
totalQty += $(this).data('qty');
});
totalQty += submittedQty;
var optionID = $(this).parents('.choice-of-bonus-product').find('.product-option').data('option-id');
var valueId = $(this).parents('.choice-of-bonus-product').find('.options-select option:selected').data('valueId');
if (totalQty <= maxPids) {
var selectedBonusProductHtml = '' + '' + '' + '' + '
' + '' + '
';
$('#chooseBonusProductModal .selected-bonus-products').append(selectedBonusProductHtml);
$('.pre-cart-products').html(totalQty);
$('.selected-bonus-products .bonus-summary').removeClass('alert-danger');
} else {
$('.selected-bonus-products .bonus-summary').addClass('alert-danger');
}
});
},
removeBonusProduct: function removeBonusProduct() {
$(document).on('click', '.selected-pid', function () {
$(this).remove();
var $selected = $('#chooseBonusProductModal .selected-bonus-products .selected-pid');
var count = 0;
if ($selected.length) {
$selected.each(function () {
count += parseInt($(this).data('qty'), 10);
});
}
$('.pre-cart-products').html(count);
$('.selected-bonus-products .bonus-summary').removeClass('alert-danger');
});
},
enableBonusProductSelection: function enableBonusProductSelection() {
$('body').on('bonusproduct:updateSelectButton', function (e, response) {
$('button.select-bonus-product', response.$productContainer).attr('disabled', !response.product.readyToOrder || !response.product.available);
var pid = response.product.id;
$('button.select-bonus-product').data('pid', pid);
});
},
showMoreBonusProducts: function showMoreBonusProducts() {
$(document).on('click', '.show-more-bonus-products', function () {
var url = $(this).data('url');
$('.modal-content').spinner().start();
$.ajax({
url: url,
method: 'GET',
success: function success(html) {
var parsedHtml = parseHtml(html);
$('.modal-body').append(parsedHtml.body);
$('.show-more-bonus-products:first').remove();
$('.modal-content').spinner().stop();
},
error: function error() {
$('.modal-content').spinner().stop();
}
});
});
},
addBonusProductsToCart: function addBonusProductsToCart() {
$(document).on('click', '.add-bonus-products', function () {
var $readyToOrderBonusProducts = $('.choose-bonus-product-dialog .selected-pid');
var queryString = '?pids=';
var url = $('.choose-bonus-product-dialog').data('addtocarturl');
var pidsObject = {
bonusProducts: []
};
$.each($readyToOrderBonusProducts, function () {
var qtyOption = parseInt($(this).data('qty'), 10);
var option = null;
if (qtyOption > 0) {
if ($(this).data('optionid') && $(this).data('option-selected-value')) {
option = {};
option.optionId = $(this).data('optionid');
option.productId = $(this).data('pid');
option.selectedValueId = $(this).data('option-selected-value');
}
pidsObject.bonusProducts.push({
pid: $(this).data('pid'),
qty: qtyOption,
options: [option]
});
pidsObject.totalQty = parseInt($('.pre-cart-products').html(), 10);
}
});
queryString += JSON.stringify(pidsObject);
queryString = queryString + '&uuid=' + $('.choose-bonus-product-dialog').data('uuid');
queryString = queryString + '&pliuuid=' + $('.choose-bonus-product-dialog').data('pliuuid');
$.spinner().start();
$.ajax({
url: url + queryString,
method: 'POST',
success: function success(data) {
$.spinner().stop();
if (data.error) {
$('.error-choice-of-bonus-products').html(data.errorMessage);
} else {
$('.configure-bonus-product-attributes').html(data);
$('.bonus-products-step2').removeClass('hidden-xl-down');
$('#chooseBonusProductModal').modal('hide');
if ($('.add-to-cart-messages').length === 0) {
$('body').append('');
}
$('.minicart-quantity').html(data.totalQty);
$('.add-to-cart-messages').append('' + $choiceOfBonusProduct.find('.product-name').html() + '
' + '' + '
' + data.msgSuccess + '
');
setTimeout(function () {
$('.add-to-basket-alert').remove();
if ($('.cart-page').length) {
location.reload();
}
}, 3000);
}
},
error: function error() {
$.spinner().stop();
}
});
});
},
getPidValue: getPidValue,
getQuantitySelected: getQuantitySelected
});
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! jquery */ "./node_modules/jquery/dist/jquery.js")))
/***/ }),
/***/ "./cartridges/app_tfg/cartridge/client/default/js/components/tooltip.js":
/*!******************************************************************************************!*\
!*** ./cartridges/app_tfg/cartridge/client/default/js/components/tooltip.js + 1 modules ***!
\******************************************************************************************/
/*! exports provided: default */
/*! ModuleConcatenation bailout: Cannot concat with ./node_modules/tippy.js/node_modules/popper.js/dist/esm/popper.js (<- Module uses injected variables (global)) */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXTERNAL MODULE: ./node_modules/tippy.js/node_modules/popper.js/dist/esm/popper.js
var esm_popper = __webpack_require__("./node_modules/tippy.js/node_modules/popper.js/dist/esm/popper.js");
// CONCATENATED MODULE: ./node_modules/tippy.js/esm/index.all.js
/**!
* tippy.js v4.0.3
* (c) 2017-2019 atomiks
* MIT License
*/
var css = ".tippy-iOS{cursor:pointer!important}.tippy-notransition{transition:none}.tippy-popper{transition-timing-function:cubic-bezier(.165,.84,.44,1);max-width:calc(100% - 10px);pointer-events:none;outline:0}.tippy-popper[x-placement^=top] .tippy-backdrop{border-radius:40% 40% 0 0}.tippy-popper[x-placement^=top] .tippy-roundarrow{bottom:-8px;-webkit-transform-origin:50% 0;transform-origin:50% 0}.tippy-popper[x-placement^=top] .tippy-roundarrow svg{position:absolute;left:0;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.tippy-popper[x-placement^=top] .tippy-arrow{border-top:8px solid #333;border-right:8px solid transparent;border-left:8px solid transparent;bottom:-7px;margin:0 6px;-webkit-transform-origin:50% 0;transform-origin:50% 0}.tippy-popper[x-placement^=top] .tippy-backdrop{-webkit-transform-origin:0 25%;transform-origin:0 25%}.tippy-popper[x-placement^=top] .tippy-backdrop[data-state=visible]{-webkit-transform:scale(1) translate(-50%,-55%);transform:scale(1) translate(-50%,-55%)}.tippy-popper[x-placement^=top] .tippy-backdrop[data-state=hidden]{-webkit-transform:scale(.2) translate(-50%,-45%);transform:scale(.2) translate(-50%,-45%);opacity:0}.tippy-popper[x-placement^=top] [data-animation=shift-toward][data-state=visible]{-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift-toward][data-state=hidden]{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}.tippy-popper[x-placement^=top] [data-animation=perspective]{-webkit-transform-origin:bottom;transform-origin:bottom}.tippy-popper[x-placement^=top] [data-animation=perspective][data-state=visible]{-webkit-transform:perspective(700px) translateY(-10px) rotateX(0);transform:perspective(700px) translateY(-10px) rotateX(0)}.tippy-popper[x-placement^=top] [data-animation=perspective][data-state=hidden]{opacity:0;-webkit-transform:perspective(700px) translateY(0) rotateX(60deg);transform:perspective(700px) translateY(0) rotateX(60deg)}.tippy-popper[x-placement^=top] [data-animation=fade][data-state=visible]{-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=fade][data-state=hidden]{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift-away][data-state=visible]{-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift-away][data-state=hidden]{opacity:0;-webkit-transform:translateY(0);transform:translateY(0)}.tippy-popper[x-placement^=top] [data-animation=scale]{-webkit-transform-origin:bottom;transform-origin:bottom}.tippy-popper[x-placement^=top] [data-animation=scale][data-state=visible]{-webkit-transform:translateY(-10px) scale(1);transform:translateY(-10px) scale(1)}.tippy-popper[x-placement^=top] [data-animation=scale][data-state=hidden]{opacity:0;-webkit-transform:translateY(-10px) scale(.5);transform:translateY(-10px) scale(.5)}.tippy-popper[x-placement^=bottom] .tippy-backdrop{border-radius:0 0 30% 30%}.tippy-popper[x-placement^=bottom] .tippy-roundarrow{top:-8px;-webkit-transform-origin:50% 100%;transform-origin:50% 100%}.tippy-popper[x-placement^=bottom] .tippy-roundarrow svg{position:absolute;left:0;-webkit-transform:rotate(0);transform:rotate(0)}.tippy-popper[x-placement^=bottom] .tippy-arrow{border-bottom:8px solid #333;border-right:8px solid transparent;border-left:8px solid transparent;top:-7px;margin:0 6px;-webkit-transform-origin:50% 100%;transform-origin:50% 100%}.tippy-popper[x-placement^=bottom] .tippy-backdrop{-webkit-transform-origin:0 -50%;transform-origin:0 -50%}.tippy-popper[x-placement^=bottom] .tippy-backdrop[data-state=visible]{-webkit-transform:scale(1) translate(-50%,-45%);transform:scale(1) translate(-50%,-45%)}.tippy-popper[x-placement^=bottom] .tippy-backdrop[data-state=hidden]{-webkit-transform:scale(.2) translate(-50%);transform:scale(.2) translate(-50%);opacity:0}.tippy-popper[x-placement^=bottom] [data-animation=shift-toward][data-state=visible]{-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift-toward][data-state=hidden]{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}.tippy-popper[x-placement^=bottom] [data-animation=perspective]{-webkit-transform-origin:top;transform-origin:top}.tippy-popper[x-placement^=bottom] [data-animation=perspective][data-state=visible]{-webkit-transform:perspective(700px) translateY(10px) rotateX(0);transform:perspective(700px) translateY(10px) rotateX(0)}.tippy-popper[x-placement^=bottom] [data-animation=perspective][data-state=hidden]{opacity:0;-webkit-transform:perspective(700px) translateY(0) rotateX(-60deg);transform:perspective(700px) translateY(0) rotateX(-60deg)}.tippy-popper[x-placement^=bottom] [data-animation=fade][data-state=visible]{-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=fade][data-state=hidden]{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift-away][data-state=visible]{-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift-away][data-state=hidden]{opacity:0;-webkit-transform:translateY(0);transform:translateY(0)}.tippy-popper[x-placement^=bottom] [data-animation=scale]{-webkit-transform-origin:top;transform-origin:top}.tippy-popper[x-placement^=bottom] [data-animation=scale][data-state=visible]{-webkit-transform:translateY(10px) scale(1);transform:translateY(10px) scale(1)}.tippy-popper[x-placement^=bottom] [data-animation=scale][data-state=hidden]{opacity:0;-webkit-transform:translateY(10px) scale(.5);transform:translateY(10px) scale(.5)}.tippy-popper[x-placement^=left] .tippy-backdrop{border-radius:50% 0 0 50%}.tippy-popper[x-placement^=left] .tippy-roundarrow{right:-16px;-webkit-transform-origin:33.33333333% 50%;transform-origin:33.33333333% 50%}.tippy-popper[x-placement^=left] .tippy-roundarrow svg{position:absolute;left:0;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.tippy-popper[x-placement^=left] .tippy-arrow{border-left:8px solid #333;border-top:8px solid transparent;border-bottom:8px solid transparent;right:-7px;margin:3px 0;-webkit-transform-origin:0 50%;transform-origin:0 50%}.tippy-popper[x-placement^=left] .tippy-backdrop{-webkit-transform-origin:50% 0;transform-origin:50% 0}.tippy-popper[x-placement^=left] .tippy-backdrop[data-state=visible]{-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%)}.tippy-popper[x-placement^=left] .tippy-backdrop[data-state=hidden]{-webkit-transform:scale(.2) translate(-75%,-50%);transform:scale(.2) translate(-75%,-50%);opacity:0}.tippy-popper[x-placement^=left] [data-animation=shift-toward][data-state=visible]{-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift-toward][data-state=hidden]{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}.tippy-popper[x-placement^=left] [data-animation=perspective]{-webkit-transform-origin:right;transform-origin:right}.tippy-popper[x-placement^=left] [data-animation=perspective][data-state=visible]{-webkit-transform:perspective(700px) translateX(-10px) rotateY(0);transform:perspective(700px) translateX(-10px) rotateY(0)}.tippy-popper[x-placement^=left] [data-animation=perspective][data-state=hidden]{opacity:0;-webkit-transform:perspective(700px) translateX(0) rotateY(-60deg);transform:perspective(700px) translateX(0) rotateY(-60deg)}.tippy-popper[x-placement^=left] [data-animation=fade][data-state=visible]{-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=fade][data-state=hidden]{opacity:0;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift-away][data-state=visible]{-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift-away][data-state=hidden]{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.tippy-popper[x-placement^=left] [data-animation=scale]{-webkit-transform-origin:right;transform-origin:right}.tippy-popper[x-placement^=left] [data-animation=scale][data-state=visible]{-webkit-transform:translateX(-10px) scale(1);transform:translateX(-10px) scale(1)}.tippy-popper[x-placement^=left] [data-animation=scale][data-state=hidden]{opacity:0;-webkit-transform:translateX(-10px) scale(.5);transform:translateX(-10px) scale(.5)}.tippy-popper[x-placement^=right] .tippy-backdrop{border-radius:0 50% 50% 0}.tippy-popper[x-placement^=right] .tippy-roundarrow{left:-16px;-webkit-transform-origin:66.66666666% 50%;transform-origin:66.66666666% 50%}.tippy-popper[x-placement^=right] .tippy-roundarrow svg{position:absolute;left:0;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.tippy-popper[x-placement^=right] .tippy-arrow{border-right:8px solid #333;border-top:8px solid transparent;border-bottom:8px solid transparent;left:-7px;margin:3px 0;-webkit-transform-origin:100% 50%;transform-origin:100% 50%}.tippy-popper[x-placement^=right] .tippy-backdrop{-webkit-transform-origin:-50% 0;transform-origin:-50% 0}.tippy-popper[x-placement^=right] .tippy-backdrop[data-state=visible]{-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%)}.tippy-popper[x-placement^=right] .tippy-backdrop[data-state=hidden]{-webkit-transform:scale(.2) translate(-25%,-50%);transform:scale(.2) translate(-25%,-50%);opacity:0}.tippy-popper[x-placement^=right] [data-animation=shift-toward][data-state=visible]{-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift-toward][data-state=hidden]{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}.tippy-popper[x-placement^=right] [data-animation=perspective]{-webkit-transform-origin:left;transform-origin:left}.tippy-popper[x-placement^=right] [data-animation=perspective][data-state=visible]{-webkit-transform:perspective(700px) translateX(10px) rotateY(0);transform:perspective(700px) translateX(10px) rotateY(0)}.tippy-popper[x-placement^=right] [data-animation=perspective][data-state=hidden]{opacity:0;-webkit-transform:perspective(700px) translateX(0) rotateY(60deg);transform:perspective(700px) translateX(0) rotateY(60deg)}.tippy-popper[x-placement^=right] [data-animation=fade][data-state=visible]{-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=fade][data-state=hidden]{opacity:0;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift-away][data-state=visible]{-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift-away][data-state=hidden]{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.tippy-popper[x-placement^=right] [data-animation=scale]{-webkit-transform-origin:left;transform-origin:left}.tippy-popper[x-placement^=right] [data-animation=scale][data-state=visible]{-webkit-transform:translateX(10px) scale(1);transform:translateX(10px) scale(1)}.tippy-popper[x-placement^=right] [data-animation=scale][data-state=hidden]{opacity:0;-webkit-transform:translateX(10px) scale(.5);transform:translateX(10px) scale(.5)}.tippy-tooltip{position:relative;color:#fff;border-radius:4px;font-size:.9rem;padding:.3rem .6rem;line-height:1.4;text-align:center;will-change:transform;background-color:#333}.tippy-tooltip[data-size=small]{padding:.2rem .4rem;font-size:.75rem}.tippy-tooltip[data-size=large]{padding:.4rem .8rem;font-size:1rem}.tippy-tooltip[data-animatefill]{overflow:hidden;background-color:transparent}.tippy-tooltip[data-interactive],.tippy-tooltip[data-interactive] path{pointer-events:auto}.tippy-tooltip[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-tooltip[data-inertia][data-state=hidden]{transition-timing-function:ease}.tippy-arrow,.tippy-roundarrow{position:absolute;width:0;height:0}.tippy-roundarrow{width:24px;height:8px;fill:#333;pointer-events:none}.tippy-backdrop{position:absolute;will-change:transform;background-color:#333;border-radius:50%;width:calc(110% + 2rem);left:50%;top:50%;z-index:-1;transition:all cubic-bezier(.46,.1,.52,.98);-webkit-backface-visibility:hidden;backface-visibility:hidden}.tippy-backdrop:after{content:\"\";float:left;padding-top:100%}.tippy-backdrop+.tippy-content{transition-property:opacity;will-change:opacity}.tippy-backdrop+.tippy-content[data-state=visible]{opacity:1}.tippy-backdrop+.tippy-content[data-state=hidden]{opacity:0}";
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
var version = "4.0.3";
var isBrowser = typeof window !== 'undefined';
var ua = isBrowser && navigator.userAgent;
var isIE = /MSIE |Trident\//.test(ua);
var isUCBrowser = /UCBrowser\//.test(ua);
var isIOS = isBrowser && /iPhone|iPad|iPod/.test(navigator.platform) && !window.MSStream;
var Defaults = {
a11y: true,
allowHTML: true,
animateFill: true,
animation: 'shift-away',
appendTo: function appendTo() {
return document.body;
},
aria: 'describedby',
arrow: false,
arrowType: 'sharp',
boundary: 'scrollParent',
content: '',
delay: [0, 20],
distance: 10,
duration: [325, 275],
flip: true,
flipBehavior: 'flip',
flipOnUpdate: false,
followCursor: false,
hideOnClick: true,
ignoreAttributes: false,
inertia: false,
interactive: false,
interactiveBorder: 2,
interactiveDebounce: 0,
lazy: true,
maxWidth: 350,
multiple: false,
offset: 0,
onHidden: function onHidden() {},
onHide: function onHide() {},
onMount: function onMount() {},
onShow: function onShow() {},
onShown: function onShown() {},
placement: 'top',
popperOptions: {},
role: 'tooltip',
showOnInit: false,
size: 'regular',
sticky: false,
target: '',
theme: 'dark',
touch: true,
touchHold: false,
trigger: 'mouseenter focus',
updateDuration: 0,
wait: null,
zIndex: 9999
/**
* If the set() method encounters one of these, the popperInstance must be
* recreated
*/
};
var POPPER_INSTANCE_DEPENDENCIES = ['arrow', 'arrowType', 'boundary', 'distance', 'flip', 'flipBehavior', 'flipOnUpdate', 'offset', 'placement', 'popperOptions'];
var Selectors = {
POPPER: '.tippy-popper',
TOOLTIP: '.tippy-tooltip',
CONTENT: '.tippy-content',
BACKDROP: '.tippy-backdrop',
ARROW: '.tippy-arrow',
ROUND_ARROW: '.tippy-roundarrow'
};
var elementProto = isBrowser ? Element.prototype : {};
var matches = elementProto.matches || elementProto.matchesSelector || elementProto.webkitMatchesSelector || elementProto.mozMatchesSelector || elementProto.msMatchesSelector;
/**
* Ponyfill for Array.from - converts iterable values to an array
* @param {ArrayLike} value
* @return {any[]}
*/
function arrayFrom(value) {
return [].slice.call(value);
}
/**
* Ponyfill for Element.prototype.closest
* @param {Element} element
* @param {String} parentSelector
* @return {Element}
*/
function closest(element, parentSelector) {
return (elementProto.closest || function (selector) {
var el = this;
while (el) {
if (matches.call(el, selector)) return el;
el = el.parentElement;
}
}).call(element, parentSelector);
}
/**
* Works like Element.prototype.closest, but uses a callback instead
* @param {Element} element
* @param {Function} callback
* @return {Element}
*/
function closestCallback(element, callback) {
while (element) {
if (callback(element)) return element;
element = element.parentElement;
}
}
/**
* Determines if a value is a "bare" virtual element (before mutations done
* by `polyfillElementPrototypeProperties()`). JSDOM elements show up as
* [object Object], we can check if the value is "element-like" if it has
* `addEventListener`
* @param {any} value
* @return {Boolean}
*/
function isBareVirtualElement(value) {
return {}.toString.call(value) === '[object Object]' && !value.addEventListener;
}
/**
* Safe .hasOwnProperty check, for prototype-less objects
* @param {Object} obj
* @param {String} key
* @return {Boolean}
*/
function index_all_hasOwnProperty(obj, key) {
return {}.hasOwnProperty.call(obj, key);
}
/**
* Returns an array of elements based on the value
* @param {any} value
* @return {Array}
*/
function getArrayOfElements(value) {
if (isSingular(value)) {
return [value];
}
if (value instanceof NodeList) {
return arrayFrom(value);
}
if (Array.isArray(value)) {
return value;
}
try {
return arrayFrom(document.querySelectorAll(value));
} catch (e) {
return [];
}
}
/**
* Returns a value at a given index depending on if it's an array or number
* @param {any} value
* @param {Number} index
* @param {any} defaultValue
*/
function getValue(value, index, defaultValue) {
if (Array.isArray(value)) {
var v = value[index];
return v == null ? defaultValue : v;
}
return value;
}
/**
* Debounce utility
* @param {Function} fn
* @param {Number} ms
*/
function debounce(fn, ms) {
var timeoutId;
return function () {
var _this = this,
_arguments = arguments;
clearTimeout(timeoutId);
timeoutId = setTimeout(function () {
return fn.apply(_this, _arguments);
}, ms);
};
}
/**
* Prevents errors from being thrown while accessing nested modifier objects
* in `popperOptions`
* @param {Object} obj
* @param {String} key
* @return {Object|undefined}
*/
function getModifier(obj, key) {
return obj && obj.modifiers && obj.modifiers[key];
}
/**
* Determines if an array or string includes a value
* @param {Array|String} a
* @param {any} b
* @return {Boolean}
*/
function includes(a, b) {
return a.indexOf(b) > -1;
}
/**
* Determines if the value is singular-like
* @param {any} value
* @return {Boolean}
*/
function isSingular(value) {
return !!value && value.isVirtual || value instanceof Element;
}
/**
* Tricking bundlers, linters, and minifiers
* @return {String}
*/
function innerHTML() {
return 'innerHTML';
}
/**
* Evaluates a function if one, or returns the value
* @param {any} value
* @param {any[]} args
* @return {Boolean}
*/
function evaluateValue(value, args) {
return typeof value === 'function' ? value.apply(null, args) : value;
}
/**
* Sets a popperInstance `flip` modifier's enabled state
* @param {Object[]} modifiers
* @param {any} value
*/
function setFlipModifierEnabled(modifiers, value) {
modifiers.filter(function (m) {
return m.name === 'flip';
})[0].enabled = value;
}
/**
* Returns a new `div` element
* @return {HTMLDivElement}
*/
function div() {
return document.createElement('div');
}
/**
* Sets the innerHTML of an element while tricking linters & minifiers
* @param {HTMLElement} el
* @param {Element|String} html
*/
function setInnerHTML(el, html) {
el[innerHTML()] = html instanceof Element ? html[innerHTML()] : html;
}
/**
* Sets the content of a tooltip
* @param {HTMLElement} contentEl
* @param {Object} props
*/
function setContent(contentEl, props) {
if (props.content instanceof Element) {
setInnerHTML(contentEl, '');
contentEl.appendChild(props.content);
} else {
contentEl[props.allowHTML ? 'innerHTML' : 'textContent'] = props.content;
}
}
/**
* Returns the child elements of a popper element
* @param {HTMLElement} popper
* @return {Object}
*/
function getChildren(popper) {
return {
tooltip: popper.querySelector(Selectors.TOOLTIP),
backdrop: popper.querySelector(Selectors.BACKDROP),
content: popper.querySelector(Selectors.CONTENT),
arrow: popper.querySelector(Selectors.ARROW) || popper.querySelector(Selectors.ROUND_ARROW)
};
}
/**
* Adds `data-inertia` attribute
* @param {HTMLElement} tooltip
*/
function addInertia(tooltip) {
tooltip.setAttribute('data-inertia', '');
}
/**
* Removes `data-inertia` attribute
* @param {HTMLElement} tooltip
*/
function removeInertia(tooltip) {
tooltip.removeAttribute('data-inertia');
}
/**
* Creates an arrow element and returns it
* @return {HTMLDivElement}
*/
function createArrowElement(arrowType) {
var arrow = div();
if (arrowType === 'round') {
arrow.className = 'tippy-roundarrow';
setInnerHTML(arrow, '');
} else {
arrow.className = 'tippy-arrow';
}
return arrow;
}
/**
* Creates a backdrop element and returns it
* @return {HTMLDivElement}
*/
function createBackdropElement() {
var backdrop = div();
backdrop.className = 'tippy-backdrop';
backdrop.setAttribute('data-state', 'hidden');
return backdrop;
}
/**
* Adds interactive-related attributes
* @param {HTMLElement} popper
* @param {HTMLElement} tooltip
*/
function addInteractive(popper, tooltip) {
popper.setAttribute('tabindex', '-1');
tooltip.setAttribute('data-interactive', '');
}
/**
* Removes interactive-related attributes
* @param {HTMLElement} popper
* @param {HTMLElement} tooltip
*/
function removeInteractive(popper, tooltip) {
popper.removeAttribute('tabindex');
tooltip.removeAttribute('data-interactive');
}
/**
* Applies a transition duration to a list of elements
* @param {Array} els
* @param {Number} value
*/
function applyTransitionDuration(els, value) {
els.forEach(function (el) {
if (el) {
el.style.transitionDuration = "".concat(value, "ms");
}
});
}
/**
* Add/remove transitionend listener from tooltip
* @param {Element} tooltip
* @param {String} action
* @param {Function} listener
*/
function toggleTransitionEndListener(tooltip, action, listener) {
// UC Browser hasn't adopted the `transitionend` event despite supporting
// unprefixed transitions...
var eventName = isUCBrowser && document.body.style.WebkitTransition !== undefined ? 'webkitTransitionEnd' : 'transitionend';
tooltip[action + 'EventListener'](eventName, listener);
}
/**
* Returns the popper's placement, ignoring shifting (top-start, etc)
* @param {Element} popper
* @return {String}
*/
function getPopperPlacement(popper) {
var fullPlacement = popper.getAttribute('x-placement');
return fullPlacement ? fullPlacement.split('-')[0] : '';
}
/**
* Sets the visibility state to elements so they can begin to transition
* @param {Array} els
* @param {String} state
*/
function setVisibilityState(els, state) {
els.forEach(function (el) {
if (el) {
el.setAttribute('data-state', state);
}
});
}
/**
* Triggers reflow
* @param {Element} popper
*/
function reflow(popper) {
void popper.offsetHeight;
}
/**
* Adds/removes theme from tooltip's classList
* @param {HTMLDivElement} tooltip
* @param {String} action
* @param {String} theme
*/
function toggleTheme(tooltip, action, theme) {
theme.split(' ').forEach(function (themeName) {
tooltip.classList[action](themeName + '-theme');
});
}
/**
* Constructs the popper element and returns it
* @param {Number} id
* @param {Object} props
* @return {HTMLDivElement}
*/
function createPopperElement(id, props) {
var popper = div();
popper.className = 'tippy-popper';
popper.id = "tippy-".concat(id);
popper.style.zIndex = props.zIndex;
if (props.role) {
popper.setAttribute('role', props.role);
}
var tooltip = div();
tooltip.className = 'tippy-tooltip';
tooltip.style.maxWidth = props.maxWidth + (typeof props.maxWidth === 'number' ? 'px' : '');
tooltip.setAttribute('data-size', props.size);
tooltip.setAttribute('data-animation', props.animation);
tooltip.setAttribute('data-state', 'hidden');
toggleTheme(tooltip, 'add', props.theme);
var content = div();
content.className = 'tippy-content';
content.setAttribute('data-state', 'hidden');
if (props.interactive) {
addInteractive(popper, tooltip);
}
if (props.arrow) {
tooltip.appendChild(createArrowElement(props.arrowType));
}
if (props.animateFill) {
tooltip.appendChild(createBackdropElement());
tooltip.setAttribute('data-animatefill', '');
}
if (props.inertia) {
addInertia(tooltip);
}
setContent(content, props);
tooltip.appendChild(content);
popper.appendChild(tooltip);
return popper;
}
/**
* Updates the popper element based on the new props
* @param {HTMLDivElement} popper
* @param {Object} prevProps
* @param {Object} nextProps
*/
function updatePopperElement(popper, prevProps, nextProps) {
var _getChildren = getChildren(popper),
tooltip = _getChildren.tooltip,
content = _getChildren.content,
backdrop = _getChildren.backdrop,
arrow = _getChildren.arrow;
popper.style.zIndex = nextProps.zIndex;
tooltip.setAttribute('data-size', nextProps.size);
tooltip.setAttribute('data-animation', nextProps.animation);
tooltip.style.maxWidth = nextProps.maxWidth + (typeof nextProps.maxWidth === 'number' ? 'px' : '');
if (nextProps.role) {
popper.setAttribute('role', nextProps.role);
} else {
popper.removeAttribute('role');
}
if (prevProps.content !== nextProps.content) {
setContent(content, nextProps);
} // animateFill
if (!prevProps.animateFill && nextProps.animateFill) {
tooltip.appendChild(createBackdropElement());
tooltip.setAttribute('data-animatefill', '');
} else if (prevProps.animateFill && !nextProps.animateFill) {
tooltip.removeChild(backdrop);
tooltip.removeAttribute('data-animatefill');
} // arrow
if (!prevProps.arrow && nextProps.arrow) {
tooltip.appendChild(createArrowElement(nextProps.arrowType));
} else if (prevProps.arrow && !nextProps.arrow) {
tooltip.removeChild(arrow);
} // arrowType
if (prevProps.arrow && nextProps.arrow && prevProps.arrowType !== nextProps.arrowType) {
tooltip.replaceChild(createArrowElement(nextProps.arrowType), arrow);
} // interactive
if (!prevProps.interactive && nextProps.interactive) {
addInteractive(popper, tooltip);
} else if (prevProps.interactive && !nextProps.interactive) {
removeInteractive(popper, tooltip);
} // inertia
if (!prevProps.inertia && nextProps.inertia) {
addInertia(tooltip);
} else if (prevProps.inertia && !nextProps.inertia) {
removeInertia(tooltip);
} // theme
if (prevProps.theme !== nextProps.theme) {
toggleTheme(tooltip, 'remove', prevProps.theme);
toggleTheme(tooltip, 'add', nextProps.theme);
}
}
/**
* Runs the callback after the popper's position has been updated
* update() is debounced with Promise.resolve() or setTimeout()
* scheduleUpdate() is update() wrapped in requestAnimationFrame()
* @param {Popper} popperInstance
* @param {Function} callback
*/
function afterPopperPositionUpdates(popperInstance, callback) {
var popper = popperInstance.popper,
options = popperInstance.options;
var onCreate = options.onCreate,
onUpdate = options.onUpdate;
options.onCreate = options.onUpdate = function (data) {
reflow(popper);
callback();
onUpdate(data);
options.onCreate = onCreate;
options.onUpdate = onUpdate;
};
}
/**
* Hides all visible poppers on the document
* @param {Object} options
*/
function hideAll() {
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
checkHideOnClick = _ref.checkHideOnClick,
exclude = _ref.exclude,
duration = _ref.duration;
arrayFrom(document.querySelectorAll(Selectors.POPPER)).forEach(function (popper) {
var instance = popper._tippy;
if (instance && (checkHideOnClick ? instance.props.hideOnClick === true : true) && (!exclude || popper !== exclude.popper)) {
instance.hide(duration);
}
});
}
/**
* Determines if the mouse cursor is outside of the popper's interactive border
* region
* @param {String} popperPlacement
* @param {ClientRect} popperRect
* @param {MouseEvent} event
* @param {Object} props
* @return {Boolean}
*/
function isCursorOutsideInteractiveBorder(popperPlacement, popperRect, event, props) {
if (!popperPlacement) {
return true;
}
var x = event.clientX,
y = event.clientY;
var interactiveBorder = props.interactiveBorder,
distance = props.distance;
var exceedsTop = popperRect.top - y > (popperPlacement === 'top' ? interactiveBorder + distance : interactiveBorder);
var exceedsBottom = y - popperRect.bottom > (popperPlacement === 'bottom' ? interactiveBorder + distance : interactiveBorder);
var exceedsLeft = popperRect.left - x > (popperPlacement === 'left' ? interactiveBorder + distance : interactiveBorder);
var exceedsRight = x - popperRect.right > (popperPlacement === 'right' ? interactiveBorder + distance : interactiveBorder);
return exceedsTop || exceedsBottom || exceedsLeft || exceedsRight;
}
/**
* Returns the distance offset, taking into account the default offset due to
* the transform: translate() rule (10px) in CSS
* @param {Number} distance
* @return {String}
*/
function getOffsetDistanceInPx(distance) {
return -(distance - 10) + 'px';
}
var PASSIVE = {
passive: true
};
var PADDING = 3;
var isUsingTouch = false;
function onDocumentTouch() {
if (isUsingTouch) {
return;
}
isUsingTouch = true;
if (isIOS) {
document.body.classList.add('tippy-iOS');
}
if (window.performance) {
document.addEventListener('mousemove', onDocumentMouseMove);
}
}
var lastMouseMoveTime = 0;
function onDocumentMouseMove() {
var now = performance.now(); // Chrome 60+ is 1 mousemove per animation frame, use 20ms time difference
if (now - lastMouseMoveTime < 20) {
isUsingTouch = false;
document.removeEventListener('mousemove', onDocumentMouseMove);
if (!isIOS) {
document.body.classList.remove('tippy-iOS');
}
}
lastMouseMoveTime = now;
}
function onDocumentClick(_ref) {
var target = _ref.target;
// Simulated events dispatched on the document
if (!(target instanceof Element)) {
return hideAll();
} // Clicked on an interactive popper
var popper = closest(target, Selectors.POPPER);
if (popper && popper._tippy && popper._tippy.props.interactive) {
return;
} // Clicked on a reference
var reference = closestCallback(target, function (el) {
return el._tippy && el._tippy.reference === el;
});
if (reference) {
var instance = reference._tippy;
var isClickTrigger = includes(instance.props.trigger, 'click');
if (isUsingTouch || isClickTrigger) {
return hideAll({
exclude: instance,
checkHideOnClick: true
});
}
if (instance.props.hideOnClick !== true || isClickTrigger) {
return;
}
instance.clearDelayTimeouts();
}
hideAll({
checkHideOnClick: true
});
}
function onWindowBlur() {
var _document = document,
activeElement = _document.activeElement;
if (activeElement && activeElement.blur && activeElement._tippy) {
activeElement.blur();
}
}
/**
* Adds the needed global event listeners
*/
function bindGlobalEventListeners() {
document.addEventListener('click', onDocumentClick, true);
document.addEventListener('touchstart', onDocumentTouch, PASSIVE);
window.addEventListener('blur', onWindowBlur);
}
var keys = Object.keys(Defaults);
/**
* Determines if an element can receive focus
* @param {Element|Object} el
* @return {Boolean}
*/
function canReceiveFocus(el) {
return el instanceof Element ? matches.call(el, 'a[href],area[href],button,details,input,textarea,select,iframe,[tabindex]') && !el.hasAttribute('disabled') : true;
}
/**
* Returns an object of optional props from data-tippy-* attributes
* @param {Element|Object} reference
* @return {Object}
*/
function getDataAttributeOptions(reference) {
return keys.reduce(function (acc, key) {
var valueAsString = (reference.getAttribute("data-tippy-".concat(key)) || '').trim();
if (!valueAsString) {
return acc;
}
if (key === 'content') {
acc[key] = valueAsString;
} else {
try {
acc[key] = JSON.parse(valueAsString);
} catch (e) {
acc[key] = valueAsString;
}
}
return acc;
}, {});
}
/**
* Polyfills the virtual reference (plain object) with Element.prototype props
* Mutating because DOM elements are mutated, adds `_tippy` property
* @param {Object} virtualReference
*/
function polyfillElementPrototypeProperties(virtualReference) {
var polyfills = {
isVirtual: true,
attributes: virtualReference.attributes || {},
setAttribute: function setAttribute(key, value) {
virtualReference.attributes[key] = value;
},
getAttribute: function getAttribute(key) {
return virtualReference.attributes[key];
},
removeAttribute: function removeAttribute(key) {
delete virtualReference.attributes[key];
},
hasAttribute: function hasAttribute(key) {
return key in virtualReference.attributes;
},
addEventListener: function addEventListener() {},
removeEventListener: function removeEventListener() {},
classList: {
classNames: {},
add: function add(key) {
virtualReference.classList.classNames[key] = true;
},
remove: function remove(key) {
delete virtualReference.classList.classNames[key];
},
contains: function contains(key) {
return key in virtualReference.classList.classNames;
}
}
};
for (var key in polyfills) {
virtualReference[key] = polyfills[key];
}
}
/**
* Evaluates the props object by merging data attributes and
* disabling conflicting options where necessary
* @param {Element} reference
* @param {Object} props
* @return {Object}
*/
function evaluateProps(reference, props) {
var out = _extends({}, props, {
content: evaluateValue(props.content, [reference])
}, props.ignoreAttributes ? {} : getDataAttributeOptions(reference));
if (out.arrow || isUCBrowser) {
out.animateFill = false;
}
return out;
}
/**
* Validates an object of options with the valid default props object
* @param {Object} options
* @param {Object} defaults
*/
function validateOptions() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var defaults = arguments.length > 1 ? arguments[1] : undefined;
Object.keys(options).forEach(function (option) {
if (!index_all_hasOwnProperty(defaults, option)) {
throw new Error("[tippy]: `".concat(option, "` is not a valid option"));
}
});
}
var idCounter = 1;
/**
* Creates and returns a Tippy object. We're using a closure pattern instead of
* a class so that the exposed object API is clean without private members
* prefixed with `_`.
* @param {Element} reference
* @param {Object} collectionProps
* @return {Object} instance
*/
function createTippy(reference, collectionProps) {
var props = evaluateProps(reference, collectionProps); // If the reference shouldn't have multiple tippys, return null early
if (!props.multiple && reference._tippy) {
return null;
}
/* ======================= 🔒 Private members 🔒 ======================= */
// The last trigger event object that caused the tippy to show
var lastTriggerEvent = {}; // The last mousemove event object created by the document mousemove event
var lastMouseMoveEvent = null; // Timeout created by the show delay
var showTimeoutId = 0; // Timeout created by the hide delay
var hideTimeoutId = 0; // Flag to determine if the tippy is preparing to show due to the show timeout
var isPreparingToShow = false; // The current `transitionend` callback reference
var transitionEndListener = function transitionEndListener() {}; // Array of event listeners currently attached to the reference element
var listeners = []; // Private onMouseMove handler reference, debounced or not
var debouncedOnMouseMove = props.interactiveDebounce > 0 ? debounce(onMouseMove, props.interactiveDebounce) : onMouseMove; // Node the tippy is currently appended to
var parentNode = null;
/* ======================= 🔑 Public members 🔑 ======================= */
// id used for the `aria-describedby` / `aria-labelledby` attribute
var id = idCounter++; // Popper element reference
var popper = createPopperElement(id, props); // Prevent a tippy with a delay from hiding if the cursor left then returned
// before it started hiding
popper.addEventListener('mouseenter', function (event) {
if (instance.props.interactive && instance.state.isVisible && lastTriggerEvent.type === 'mouseenter') {
prepareShow(event);
}
});
popper.addEventListener('mouseleave', function () {
if (instance.props.interactive && lastTriggerEvent.type === 'mouseenter') {
document.addEventListener('mousemove', debouncedOnMouseMove);
}
}); // Popper element children: { arrow, backdrop, content, tooltip }
var popperChildren = getChildren(popper); // The state of the tippy
var state = {
// If the tippy is currently enabled
isEnabled: true,
// show() invoked, not currently transitioning out
isVisible: false,
// If the tippy has been destroyed
isDestroyed: false,
// If the tippy is on the DOM (transitioning out or in)
isMounted: false,
// show() transition finished
isShown: false // Popper.js instance for the tippy is lazily created
};
var popperInstance = null; // 🌟 tippy instance
var instance = {
// properties
id: id,
reference: reference,
popper: popper,
popperChildren: popperChildren,
popperInstance: popperInstance,
props: props,
state: state,
// methods
clearDelayTimeouts: clearDelayTimeouts,
set: set,
setContent: setContent$$1,
show: show,
hide: hide,
enable: enable,
disable: disable,
destroy: destroy
};
addTriggersToReference();
if (!props.lazy) {
createPopperInstance();
instance.popperInstance.disableEventListeners();
}
if (props.showOnInit) {
prepareShow();
} // Ensure the reference element can receive focus (and is not a delegate)
if (props.a11y && !props.target && !canReceiveFocus(reference)) {
reference.setAttribute('tabindex', '0');
} // Install shortcuts
reference._tippy = instance;
popper._tippy = instance;
return instance;
/* ======================= 🔒 Private methods 🔒 ======================= */
/**
* Positions the virtual reference near the mouse cursor
*/
function positionVirtualReferenceNearCursor(event) {
var _lastMouseMoveEvent = lastMouseMoveEvent = event,
clientX = _lastMouseMoveEvent.clientX,
clientY = _lastMouseMoveEvent.clientY;
if (!instance.popperInstance) {
return;
} // Ensure virtual reference is padded to prevent tooltip from
// overflowing. Maybe Popper.js issue?
var placement = getPopperPlacement(instance.popper);
var padding = instance.popperChildren.arrow ? PADDING + 16 : PADDING;
var isVerticalPlacement = includes(['top', 'bottom'], placement);
var isHorizontalPlacement = includes(['left', 'right'], placement); // Top / left boundary
var x = isVerticalPlacement ? Math.max(padding, clientX) : clientX;
var y = isHorizontalPlacement ? Math.max(padding, clientY) : clientY; // Bottom / right boundary
if (isVerticalPlacement && x > padding) {
x = Math.min(clientX, window.innerWidth - padding);
}
if (isHorizontalPlacement && y > padding) {
y = Math.min(clientY, window.innerHeight - padding);
}
var rect = instance.reference.getBoundingClientRect();
var followCursor = instance.props.followCursor;
var isHorizontal = followCursor === 'horizontal';
var isVertical = followCursor === 'vertical';
instance.popperInstance.reference = {
getBoundingClientRect: function getBoundingClientRect() {
return {
width: 0,
height: 0,
top: isHorizontal ? rect.top : y,
bottom: isHorizontal ? rect.bottom : y,
left: isVertical ? rect.left : x,
right: isVertical ? rect.right : x
};
},
clientWidth: 0,
clientHeight: 0
};
instance.popperInstance.scheduleUpdate();
if (followCursor === 'initial' && instance.state.isVisible) {
removeFollowCursorListener();
}
}
/**
* Creates the tippy instance for a delegate when it's been triggered
*/
function createDelegateChildTippy(event) {
var targetEl = closest(event.target, instance.props.target);
if (targetEl && !targetEl._tippy) {
createTippy(targetEl, _extends({}, instance.props, {
content: evaluateValue(collectionProps.content, [targetEl]),
appendTo: collectionProps.appendTo,
target: '',
showOnInit: true
}));
prepareShow(event);
}
}
/**
* Setup before show() is invoked (delays, etc.)
*/
function prepareShow(event) {
clearDelayTimeouts();
if (instance.state.isVisible) {
return;
} // Is a delegate, create an instance for the child target
if (instance.props.target) {
return createDelegateChildTippy(event);
}
isPreparingToShow = true;
if (instance.props.wait) {
return instance.props.wait(instance, event);
} // If the tooltip has a delay, we need to be listening to the mousemove as
// soon as the trigger event is fired, so that it's in the correct position
// upon mount.
// Edge case: if the tooltip is still mounted, but then prepareShow() is
// called, it causes a jump.
if (hasFollowCursorBehavior() && !instance.state.isMounted) {
document.addEventListener('mousemove', positionVirtualReferenceNearCursor);
}
var delay = getValue(instance.props.delay, 0, Defaults.delay);
if (delay) {
showTimeoutId = setTimeout(function () {
show();
}, delay);
} else {
show();
}
}
/**
* Setup before hide() is invoked (delays, etc.)
*/
function prepareHide() {
clearDelayTimeouts();
if (!instance.state.isVisible) {
return removeFollowCursorListener();
}
isPreparingToShow = false;
var delay = getValue(instance.props.delay, 1, Defaults.delay);
if (delay) {
hideTimeoutId = setTimeout(function () {
if (instance.state.isVisible) {
hide();
}
}, delay);
} else {
hide();
}
}
/**
* Removes the follow cursor listener
*/
function removeFollowCursorListener() {
document.removeEventListener('mousemove', positionVirtualReferenceNearCursor);
lastMouseMoveEvent = null;
}
/**
* Cleans up old listeners
*/
function cleanupOldMouseListeners() {
document.body.removeEventListener('mouseleave', prepareHide);
document.removeEventListener('mousemove', debouncedOnMouseMove);
}
/**
* Event listener invoked upon trigger
*/
function onTrigger(event) {
if (!instance.state.isEnabled || isEventListenerStopped(event)) {
return;
}
if (!instance.state.isVisible) {
lastTriggerEvent = event; // Use the `mouseenter` event as a "mock" mousemove event for touch
// devices
if (isUsingTouch && includes(event.type, 'mouse')) {
lastMouseMoveEvent = event;
}
} // Toggle show/hide when clicking click-triggered tooltips
if (event.type === 'click' && instance.props.hideOnClick !== false && instance.state.isVisible) {
prepareHide();
} else {
prepareShow(event);
}
}
/**
* Event listener used for interactive tooltips to detect when they should
* hide
*/
function onMouseMove(event) {
var referenceTheCursorIsOver = closestCallback(event.target, function (el) {
return el._tippy;
});
var isCursorOverPopper = closest(event.target, Selectors.POPPER) === instance.popper;
var isCursorOverReference = referenceTheCursorIsOver === instance.reference;
if (isCursorOverPopper || isCursorOverReference) {
return;
}
if (isCursorOutsideInteractiveBorder(getPopperPlacement(instance.popper), instance.popper.getBoundingClientRect(), event, instance.props)) {
cleanupOldMouseListeners();
prepareHide();
}
}
/**
* Event listener invoked upon mouseleave
*/
function onMouseLeave(event) {
if (isEventListenerStopped(event)) {
return;
}
if (instance.props.interactive) {
document.body.addEventListener('mouseleave', prepareHide);
document.addEventListener('mousemove', debouncedOnMouseMove);
return;
}
prepareHide();
}
/**
* Event listener invoked upon blur
*/
function onBlur(event) {
if (event.target !== instance.reference) {
return;
}
if (instance.props.interactive && event.relatedTarget && instance.popper.contains(event.relatedTarget)) {
return;
}
prepareHide();
}
/**
* Event listener invoked when a child target is triggered
*/
function onDelegateShow(event) {
if (closest(event.target, instance.props.target)) {
prepareShow(event);
}
}
/**
* Event listener invoked when a child target should hide
*/
function onDelegateHide(event) {
if (closest(event.target, instance.props.target)) {
prepareHide();
}
}
/**
* Determines if an event listener should stop further execution due to the
* `touchHold` option
*/
function isEventListenerStopped(event) {
var supportsTouch = 'ontouchstart' in window;
var isTouchEvent = includes(event.type, 'touch');
var touchHold = instance.props.touchHold;
return supportsTouch && isUsingTouch && touchHold && !isTouchEvent || isUsingTouch && !touchHold && isTouchEvent;
}
/**
* Creates the popper instance for the instance
*/
function createPopperInstance() {
var popperOptions = instance.props.popperOptions;
var _instance$popperChild = instance.popperChildren,
tooltip = _instance$popperChild.tooltip,
arrow = _instance$popperChild.arrow;
instance.popperInstance = new esm_popper["default"](instance.reference, instance.popper, _extends({
placement: instance.props.placement
}, popperOptions, {
modifiers: _extends({}, popperOptions ? popperOptions.modifiers : {}, {
preventOverflow: _extends({
boundariesElement: instance.props.boundary,
padding: PADDING
}, getModifier(popperOptions, 'preventOverflow')),
arrow: _extends({
element: arrow,
enabled: !!arrow
}, getModifier(popperOptions, 'arrow')),
flip: _extends({
enabled: instance.props.flip,
// The tooltip is offset by 10px from the popper in CSS,
// we need to account for its distance
padding: instance.props.distance + PADDING,
behavior: instance.props.flipBehavior
}, getModifier(popperOptions, 'flip')),
offset: _extends({
offset: instance.props.offset
}, getModifier(popperOptions, 'offset'))
}),
onUpdate: function onUpdate(data) {
if (instance.props.flip && !instance.props.flipOnUpdate) {
if (data.flipped) {
instance.popperInstance.options.placement = data.placement;
}
setFlipModifierEnabled(instance.popperInstance.modifiers, false);
}
var styles = tooltip.style;
styles.top = '';
styles.bottom = '';
styles.left = '';
styles.right = '';
styles[getPopperPlacement(instance.popper)] = getOffsetDistanceInPx(instance.props.distance);
if (popperOptions.onUpdate) {
popperOptions.onUpdate(data);
}
}
}));
}
/**
* Mounts the tooltip to the DOM, callback to show tooltip is run **after**
* popper's position has updated
*/
function mount(callback) {
var shouldEnableListeners = !hasFollowCursorBehavior() && !(instance.props.followCursor === 'initial' && isUsingTouch);
if (!instance.popperInstance) {
createPopperInstance();
if (!shouldEnableListeners) {
instance.popperInstance.disableEventListeners();
}
} else {
if (!hasFollowCursorBehavior()) {
instance.popperInstance.scheduleUpdate();
if (shouldEnableListeners) {
instance.popperInstance.enableEventListeners();
}
}
setFlipModifierEnabled(instance.popperInstance.modifiers, instance.props.flip);
} // If the instance previously had followCursor behavior, it will be
// positioned incorrectly if triggered by `focus` afterwards.
// Update the reference back to the real DOM element
instance.popperInstance.reference = instance.reference;
var arrow = instance.popperChildren.arrow;
if (hasFollowCursorBehavior()) {
if (arrow) {
arrow.style.margin = '0';
}
var delay = getValue(instance.props.delay, 0, Defaults.delay);
if (lastTriggerEvent.type) {
positionVirtualReferenceNearCursor(delay && lastMouseMoveEvent ? lastMouseMoveEvent : lastTriggerEvent);
}
} else if (arrow) {
arrow.style.margin = '';
}
afterPopperPositionUpdates(instance.popperInstance, callback);
var appendTo = instance.props.appendTo;
parentNode = appendTo === 'parent' ? instance.reference.parentNode : evaluateValue(appendTo, [instance.reference]);
if (!parentNode.contains(instance.popper)) {
parentNode.appendChild(instance.popper);
instance.props.onMount(instance);
instance.state.isMounted = true;
}
}
/**
* Determines if the instance is in `followCursor` mode
*/
function hasFollowCursorBehavior() {
return instance.props.followCursor && !isUsingTouch && lastTriggerEvent.type !== 'focus';
}
/**
* Updates the tooltip's position on each animation frame + timeout
*/
function makeSticky() {
applyTransitionDuration([instance.popper], isIE ? 0 : instance.props.updateDuration);
var updatePosition = function updatePosition() {
if (instance.popperInstance) {
instance.popperInstance.scheduleUpdate();
}
if (instance.state.isMounted) {
requestAnimationFrame(updatePosition);
} else {
applyTransitionDuration([instance.popper], 0);
}
};
updatePosition();
}
/**
* Invokes a callback once the tooltip has fully transitioned out
*/
function onTransitionedOut(duration, callback) {
onTransitionEnd(duration, function () {
if (!instance.state.isVisible && parentNode && parentNode.contains(instance.popper)) {
callback();
}
});
}
/**
* Invokes a callback once the tooltip has fully transitioned in
*/
function onTransitionedIn(duration, callback) {
onTransitionEnd(duration, callback);
}
/**
* Invokes a callback once the tooltip's CSS transition ends
*/
function onTransitionEnd(duration, callback) {
// Make callback synchronous if duration is 0
if (duration === 0) {
return callback();
}
var tooltip = instance.popperChildren.tooltip;
var listener = function listener(e) {
if (e.target === tooltip) {
toggleTransitionEndListener(tooltip, 'remove', listener);
callback();
}
};
toggleTransitionEndListener(tooltip, 'remove', transitionEndListener);
toggleTransitionEndListener(tooltip, 'add', listener);
transitionEndListener = listener;
}
/**
* Adds an event listener to the reference and stores it in `listeners`
*/
function on(eventType, handler) {
var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
instance.reference.addEventListener(eventType, handler, options);
listeners.push({
eventType: eventType,
handler: handler,
options: options
});
}
/**
* Adds event listeners to the reference based on the `trigger` prop
*/
function addTriggersToReference() {
if (instance.props.touchHold && !instance.props.target) {
on('touchstart', onTrigger, PASSIVE);
on('touchend', onMouseLeave, PASSIVE);
}
instance.props.trigger.trim().split(' ').forEach(function (eventType) {
if (eventType === 'manual') {
return;
}
if (!instance.props.target) {
on(eventType, onTrigger);
switch (eventType) {
case 'mouseenter':
on('mouseleave', onMouseLeave);
break;
case 'focus':
on(isIE ? 'focusout' : 'blur', onBlur);
break;
}
} else {
switch (eventType) {
case 'mouseenter':
on('mouseover', onDelegateShow);
on('mouseout', onDelegateHide);
break;
case 'focus':
on('focusin', onDelegateShow);
on('focusout', onDelegateHide);
break;
case 'click':
on(eventType, onDelegateShow);
break;
}
}
});
}
/**
* Removes event listeners from the reference
*/
function removeTriggersFromReference() {
listeners.forEach(function (_ref) {
var eventType = _ref.eventType,
handler = _ref.handler,
options = _ref.options;
instance.reference.removeEventListener(eventType, handler, options);
});
listeners = [];
}
/**
* Returns inner elements used in show/hide methods
*/
function getInnerElements() {
return [instance.popperChildren.tooltip, instance.popperChildren.backdrop, instance.popperChildren.content];
}
/* ======================= 🔑 Public methods 🔑 ======================= */
/**
* Enables the instance to allow it to show or hide
*/
function enable() {
instance.state.isEnabled = true;
}
/**
* Disables the instance to disallow it to show or hide
*/
function disable() {
instance.state.isEnabled = false;
}
/**
* Clears pending timeouts related to the `delay` prop if any
*/
function clearDelayTimeouts() {
clearTimeout(showTimeoutId);
clearTimeout(hideTimeoutId);
}
/**
* Sets new props for the instance and redraws the tooltip
*/
function set() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
validateOptions(options, Defaults);
var prevProps = instance.props;
var nextProps = evaluateProps(instance.reference, _extends({}, instance.props, options, {
ignoreAttributes: true
}));
nextProps.ignoreAttributes = index_all_hasOwnProperty(options, 'ignoreAttributes') ? options.ignoreAttributes : prevProps.ignoreAttributes;
instance.props = nextProps;
if (index_all_hasOwnProperty(options, 'trigger') || index_all_hasOwnProperty(options, 'touchHold')) {
removeTriggersFromReference();
addTriggersToReference();
}
if (index_all_hasOwnProperty(options, 'interactiveDebounce')) {
cleanupOldMouseListeners();
debouncedOnMouseMove = debounce(onMouseMove, options.interactiveDebounce);
}
updatePopperElement(instance.popper, prevProps, nextProps);
instance.popperChildren = getChildren(instance.popper);
if (instance.popperInstance) {
instance.popperInstance.update();
if (POPPER_INSTANCE_DEPENDENCIES.some(function (prop) {
return index_all_hasOwnProperty(options, prop);
})) {
instance.popperInstance.destroy();
createPopperInstance();
if (!instance.state.isVisible) {
instance.popperInstance.disableEventListeners();
}
if (instance.props.followCursor && lastMouseMoveEvent) {
positionVirtualReferenceNearCursor(lastMouseMoveEvent);
}
}
}
}
/**
* Shortcut for .set({ content: newContent })
*/
function setContent$$1(content) {
set({
content: content
});
}
/**
* Shows the tooltip
*/
function show() {
var duration = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getValue(instance.props.duration, 0, Defaults.duration[0]);
if (instance.state.isDestroyed || !instance.state.isEnabled || isUsingTouch && !instance.props.touch) {
return;
} // Destroy tooltip if the reference element is no longer on the DOM
if (!instance.reference.isVirtual && !document.documentElement.contains(instance.reference)) {
return destroy();
} // Do not show tooltip if the reference element has a `disabled` attribute
if (instance.reference.hasAttribute('disabled')) {
return;
}
if (instance.props.onShow(instance) === false) {
return;
}
instance.popper.style.visibility = 'visible';
instance.state.isVisible = true;
if (instance.props.interactive) {
instance.reference.classList.add('tippy-active');
} // Prevent a transition if the popper is at the opposite placement
applyTransitionDuration([instance.popper, instance.popperChildren.tooltip, instance.popperChildren.backdrop], 0);
mount(function () {
if (!instance.state.isVisible) {
return;
} // Arrow will sometimes not be positioned correctly. Force another update
if (!hasFollowCursorBehavior()) {
instance.popperInstance.update();
} // Allow followCursor: 'initial' on touch devices
if (isUsingTouch && instance.props.followCursor === 'initial') {
positionVirtualReferenceNearCursor(lastMouseMoveEvent);
}
applyTransitionDuration([instance.popper], props.updateDuration);
applyTransitionDuration(getInnerElements(), duration);
if (instance.popperChildren.backdrop) {
instance.popperChildren.content.style.transitionDelay = Math.round(duration / 12) + 'ms';
}
if (instance.props.sticky) {
makeSticky();
}
setVisibilityState(getInnerElements(), 'visible');
onTransitionedIn(duration, function () {
instance.popperChildren.tooltip.classList.add('tippy-notransition');
if (instance.props.aria) {
instance.reference.setAttribute("aria-".concat(instance.props.aria), instance.popper.id);
}
instance.props.onShown(instance);
instance.state.isShown = true;
});
});
}
/**
* Hides the tooltip
*/
function hide() {
var duration = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getValue(instance.props.duration, 1, Defaults.duration[1]);
if (instance.state.isDestroyed || !instance.state.isEnabled) {
return;
}
if (instance.props.onHide(instance) === false) {
return;
}
instance.popperChildren.tooltip.classList.remove('tippy-notransition');
if (instance.props.interactive) {
instance.reference.classList.remove('tippy-active');
}
instance.popper.style.visibility = 'hidden';
instance.state.isVisible = false;
instance.state.isShown = false;
applyTransitionDuration(getInnerElements(), duration);
setVisibilityState(getInnerElements(), 'hidden');
onTransitionedOut(duration, function () {
if (!isPreparingToShow) {
removeFollowCursorListener();
}
if (instance.props.aria) {
instance.reference.removeAttribute("aria-".concat(instance.props.aria));
}
instance.popperInstance.disableEventListeners();
instance.popperInstance.options.placement = instance.props.placement;
parentNode.removeChild(instance.popper);
instance.props.onHidden(instance);
instance.state.isMounted = false;
});
}
/**
* Destroys the tooltip
*/
function destroy(destroyTargetInstances) {
if (instance.state.isDestroyed) {
return;
} // If the popper is currently mounted to the DOM, we want to ensure it gets
// hidden and unmounted instantly upon destruction
if (instance.state.isMounted) {
hide(0);
}
removeTriggersFromReference();
delete instance.reference._tippy;
if (instance.props.target && destroyTargetInstances) {
arrayFrom(instance.reference.querySelectorAll(instance.props.target)).forEach(function (child) {
if (child._tippy) {
child._tippy.destroy();
}
});
}
if (instance.popperInstance) {
instance.popperInstance.destroy();
}
instance.state.isDestroyed = true;
}
}
/**
* Groups an array of instances by taking control of their props during
* certain lifecycles.
* @param {Object[]} targets
* @param {Object} options
*/
function group(instances) {
var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
_ref$delay = _ref.delay,
delay = _ref$delay === void 0 ? instances[0].props.delay : _ref$delay,
_ref$duration = _ref.duration,
duration = _ref$duration === void 0 ? 0 : _ref$duration;
var isAnyTippyOpen = false;
instances.forEach(function (instance) {
instance._originalProps = {
duration: instance.props.duration,
onHide: instance.props.onHide,
onShow: instance.props.onShow,
onShown: instance.props.onShown
};
});
function setIsAnyTippyOpen(value) {
isAnyTippyOpen = value;
updateInstances();
}
function onShow(instance) {
instance._originalProps.onShow(instance);
instances.forEach(function (instance) {
instance.set({
duration: duration
});
instance.hide();
});
setIsAnyTippyOpen(true);
}
function onHide(instance) {
instance._originalProps.onHide(instance);
setIsAnyTippyOpen(false);
}
function onShown(instance) {
instance._originalProps.onShown(instance);
instance.set({
duration: instance._originalProps.duration
});
}
function updateInstances() {
instances.forEach(function (instance) {
instance.set({
onShow: onShow,
onShown: onShown,
onHide: onHide,
delay: isAnyTippyOpen ? [0, Array.isArray(delay) ? delay[1] : delay] : delay,
duration: isAnyTippyOpen ? duration : instance._originalProps.duration
});
});
}
updateInstances();
}
var globalEventListenersBound = false;
/**
* Exported module
* @param {String|Element|Element[]|NodeList|Object} targets
* @param {Object} options
* @return {Object}
*/
function tippy(targets, options) {
validateOptions(options, Defaults);
if (!globalEventListenersBound) {
bindGlobalEventListeners();
globalEventListenersBound = true;
}
var props = _extends({}, Defaults, options); // If they are specifying a virtual positioning reference, we need to polyfill
// some native DOM props
if (isBareVirtualElement(targets)) {
polyfillElementPrototypeProperties(targets);
}
var instances = getArrayOfElements(targets).reduce(function (acc, reference) {
var instance = reference && createTippy(reference, props);
if (instance) {
acc.push(instance);
}
return acc;
}, []);
return isSingular(targets) ? instances[0] : instances;
}
/**
* Static props
*/
tippy.version = version;
tippy.defaults = Defaults;
/**
* Static methods
*/
tippy.setDefaults = function (partialDefaults) {
Object.keys(partialDefaults).forEach(function (key) {
Defaults[key] = partialDefaults[key];
});
};
tippy.hideAll = hideAll;
tippy.group = group;
/**
* Auto-init tooltips for elements with a `data-tippy="..."` attribute
*/
function autoInit() {
arrayFrom(document.querySelectorAll('[data-tippy]')).forEach(function (el) {
var content = el.getAttribute('data-tippy');
if (content) {
tippy(el, {
content: content
});
}
});
}
if (isBrowser) {
setTimeout(autoInit);
}
/**
* Injects a string of CSS styles to a style node in
* @param {String} css
*/
function injectCSS(css) {
if (isBrowser) {
var style = document.createElement('style');
style.type = 'text/css';
style.textContent = css;
var head = document.head;
var firstChild = head.firstChild;
if (firstChild) {
head.insertBefore(style, firstChild);
} else {
head.appendChild(style);
}
}
}
injectCSS(css);
/* harmony default export */ var index_all = (tippy);
//# sourceMappingURL=index.all.js.map
// CONCATENATED MODULE: ./cartridges/app_tfg/cartridge/client/default/js/components/tooltip.js
const DEFAULTS = {
arrow: true,
animation: 'fade',
appendTo: 'parent',
placement: 'top',
interactive: true,
theme: 'light-border',
maxWidth: 240
};
const getOptions = options => Object.assign({}, DEFAULTS, options || {});
const initTooltip = (selector, options) => {
index_all(selector, getOptions(options));
};
/* harmony default export */ var components_tooltip = __webpack_exports__["default"] = ((selector, options) => {
initTooltip(selector, options);
});
/***/ }),
/***/ "./cartridges/app_tfg/cartridge/client/default/js/product/base.js":
/*!************************************************************************!*\
!*** ./cartridges/app_tfg/cartridge/client/default/js/product/base.js ***!
\************************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! jquery */ "./node_modules/jquery/dist/jquery.js");
/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _base__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ~base */ "./cartridges/app_storefront_base/cartridge/client/default/js/product/base.js");
/* harmony import */ var _util_domutils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../util/domutils */ "./cartridges/app_tfg/cartridge/client/default/js/util/domutils.js");
/* harmony import */ var _util_fetchutils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../util/fetchutils */ "./cartridges/app_tfg/cartridge/client/default/js/util/fetchutils.js");
/* harmony import */ var _components_sizeConversions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../components/sizeConversions */ "./cartridges/app_tfg/cartridge/client/default/js/components/sizeConversions.js");
/* harmony import */ var _components_stickyHeaderScroll__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../components/stickyHeaderScroll */ "./cartridges/app_tfg/cartridge/client/default/js/components/stickyHeaderScroll.js");
/* harmony import */ var _components_flyoutUnderHeader__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../components/flyoutUnderHeader */ "./cartridges/app_tfg/cartridge/client/default/js/components/flyoutUnderHeader.js");
/* eslint-disable import/no-named-as-default */
// eslint-disable-line import/named
const CONSTANTS = {
ADD_NOTIFICATION_DISPLAY_TIME: 5000
};
const CLASSES = {
ATTRIBUTE_HAS_ERROR: 'product-detail__attribute--error'
};
const SELECTORS = {
DETAILS: '.product-detail',
VARIANT_DETAILS: '.product-detail__details-row',
SET_DETAILS: '.set-item',
ATTRIBUTES_CONTAINER: '.product-detail__attributes',
ATTRIBUTE: '.product-detail__attribute',
ATTRIBUTE_VALUE: '.product-detail__attribute__value',
ATTRIBUTE_ERROR: '.product-detail__attribute__error',
ATTRIBUTE_DROPDOWN: '.product-detail__attribute__dropdown',
ADD_TO_BASKET_NOTIFICATION: '.product-detail__add-to-cart__notification',
ADD_TO_WISHLIST_NOTIFICATION: '.product-detail__add-to-wishlist__notification',
get SELECTED_ATTRIBUTE_VALUE() {
return `${this.ATTRIBUTE_VALUE}--current`;
}
};
const getDetailsContainer = child => {
let productContainer = child.closest(SELECTORS.SET_DETAILS);
if (!productContainer) {
productContainer = child.closest(SELECTORS.VARIANT_DETAILS);
}
if (!productContainer) {
productContainer = child.closest(SELECTORS.DETAILS);
}
return productContainer;
};
const handleAttributeChange = async el => {
const container = getDetailsContainer(el);
let isActiveATBMsg;
let index;
const $element = jquery__WEBPACK_IMPORTED_MODULE_0___default()(el); // eslint-disable-next-line jquery/no-closest
const parent = $element.closest('.set-item');
if (parent.length > 0) {
// eslint-disable-next-line jquery/no-find
const sameClassElements = jquery__WEBPACK_IMPORTED_MODULE_0___default()('body').find('.set-item');
index = sameClassElements.index(parent);
}
if (index) {
isActiveATBMsg = document.querySelectorAll('.add-to-bag-msg') && document.querySelectorAll('.add-to-bag-msg')[index].classList.contains('active');
} else {
isActiveATBMsg = document.querySelector('.add-to-bag-msg') && document.querySelector('.add-to-bag-msg').classList.contains('active');
}
document.dispatchEvent(new CustomEvent('product:beforeAttributeSelect')); // eslint-disable-next-line jquery/no-text
const _ref = await Object(_util_fetchutils__WEBPACK_IMPORTED_MODULE_3__["loadContent"])(el, el.value, {
pview: container.dataset.pview || 'pdp'
}),
content = _ref.content;
const tempContainer = document.createElement('div');
tempContainer.innerHTML = content;
let detailsOnly = '';
if (tempContainer.querySelector(SELECTORS.VARIANT_DETAILS)) {
detailsOnly = tempContainer.querySelector(SELECTORS.VARIANT_DETAILS).outerHTML;
container.outerHTML = detailsOnly;
}
if (tempContainer.querySelector(SELECTORS.DETAILS) && detailsOnly === '') {
detailsOnly = tempContainer.querySelector(SELECTORS.DETAILS).outerHTML;
container.outerHTML = detailsOnly;
} // eslint-disable-next-line no-undef
if (typeof PayPalSDK !== 'undefined') {
// eslint-disable-next-line no-undef
PayPalSDK.Messages().render();
}
Object(_components_sizeConversions__WEBPACK_IMPORTED_MODULE_4__["default"])();
_base__WEBPACK_IMPORTED_MODULE_1__["default"].selectVariationPrompt();
document.dispatchEvent(new CustomEvent('product:afterAttributeSelect'));
const ispreorder = el.getAttribute('data-ispreorder');
const preorderDisplayMessage = el.getAttribute('data-preordemessage');
const deliveryAccordion = document.querySelector('.product-detail__accordion__product-details-delivery-returns');
const preOrderMessage = document.querySelector('.pre-order__message');
if (deliveryAccordion) {
if (ispreorder === 'true') {
preOrderMessage.innerHTML = preorderDisplayMessage;
if (deliveryAccordion.classList.contains('d-none')) {
deliveryAccordion.classList.remove('d-none');
}
} else if (!deliveryAccordion.classList.contains('d-none')) {
deliveryAccordion.classList.add('d-none');
}
} // eslint-disable-next-line jquery/no-class
if (!Object(_util_domutils__WEBPACK_IMPORTED_MODULE_2__["isLG"])()) {
// eslint-disable-next-line jquery/no-class
jquery__WEBPACK_IMPORTED_MODULE_0___default()('body,html').removeClass('overflow-text');
}
Object(_components_stickyHeaderScroll__WEBPACK_IMPORTED_MODULE_5__["default"])();
const isSizeEL = el && el.classList.contains('select-dropdown__list-item');
if (isSizeEL || isActiveATBMsg && el.dataset.attr === 'color') {
if (index >= 0) {
// eslint-disable-next-line jquery/no-class
jquery__WEBPACK_IMPORTED_MODULE_0___default()('.add-to-bag-msg').eq(index).addClass('active');
} else {
// eslint-disable-next-line jquery/no-class
jquery__WEBPACK_IMPORTED_MODULE_0___default()('.add-to-bag-msg').addClass('active');
}
} // eslint-disable-next-line jquery/no-class
const isNotify = el && el.querySelector('#notify-btn');
if (isNotify) {
// eslint-disable-next-line jquery/no-class
if (index >= 0) {
// eslint-disable-next-line jquery/no-class
jquery__WEBPACK_IMPORTED_MODULE_0___default()('.add-to-bag-msg').eq(index).removeClass('active');
} else {
// eslint-disable-next-line jquery/no-class
jquery__WEBPACK_IMPORTED_MODULE_0___default()('.add-to-bag-msg').removeClass('active');
}
if (index >= 0) {
// eslint-disable-next-line jquery/no-class
jquery__WEBPACK_IMPORTED_MODULE_0___default()('.continuity-flyout__pane').removeClass('show'); // eslint-disable-next-line jquery/no-class
jquery__WEBPACK_IMPORTED_MODULE_0___default()('.continuity-flyout__pane').eq(index).addClass('show');
} else {
// eslint-disable-next-line jquery/no-class
jquery__WEBPACK_IMPORTED_MODULE_0___default()('.continuity-flyout__pane').addClass('show');
}
}
jquery__WEBPACK_IMPORTED_MODULE_0___default()('.sizeguidelabel .close-icon, #sizeGuideAccordion, .continuity-flyout__close').on('click', () => {
// eslint-disable-next-line jquery/no-class
jquery__WEBPACK_IMPORTED_MODULE_0___default()('.select-dropdown__list,.select-dropdown__button').removeClass('active'); // eslint-disable-next-line jquery/no-class
if (!Object(_util_domutils__WEBPACK_IMPORTED_MODULE_2__["isLG"])()) {
// eslint-disable-next-line jquery/no-class
jquery__WEBPACK_IMPORTED_MODULE_0___default()('body,html').removeClass('overflow-text');
}
});
};
const handleErrorField = data => {
data.forEach(attrObj => {
const attrContainer = document.querySelector(`${SELECTORS.ATTRIBUTE}--${attrObj.id}`);
if (attrContainer) {
const attrErrorContainer = attrContainer.querySelector(SELECTORS.ATTRIBUTE_ERROR);
attrContainer.classList.add(CLASSES.ATTRIBUTE_HAS_ERROR);
if (attrErrorContainer) {
attrErrorContainer.innerHTML = attrObj.message;
}
}
});
};
const handleErrorFieldForMultipleFields = (data, attributeContainer) => {
data.forEach(attrObj => {
const attrContainer = attributeContainer.find(`${SELECTORS.ATTRIBUTE}--${attrObj.id}`);
const attrErrorContainer = attrContainer.find(SELECTORS.ATTRIBUTE_ERROR);
attrContainer.addClass(CLASSES.ATTRIBUTE_HAS_ERROR);
if (attrErrorContainer) {
attrErrorContainer.html(attrObj.message);
}
});
};
_base__WEBPACK_IMPORTED_MODULE_1__["default"].colorAttribute = () => {};
_base__WEBPACK_IMPORTED_MODULE_1__["default"].selectAttribute = () => {
Object(_util_domutils__WEBPACK_IMPORTED_MODULE_2__["onEvent"])(document, 'click', SELECTORS.ATTRIBUTE_VALUE, async e => {
e.preventDefault();
const value = e.delegateTarget;
if (value.dataset.action) {
handleAttributeChange(value);
}
});
Object(_util_domutils__WEBPACK_IMPORTED_MODULE_2__["onEvent"])(document, 'change', SELECTORS.ATTRIBUTE_DROPDOWN, async e => {
const dropdown = e.delegateTarget;
if (dropdown.value) {
handleAttributeChange(dropdown);
}
});
};
_base__WEBPACK_IMPORTED_MODULE_1__["default"].appendAttributeValuesToAddRequest = () => {
jquery__WEBPACK_IMPORTED_MODULE_0___default()(document).on('updateAddToCartFormData', (e, form) => {
const selectedValues = document.querySelectorAll(SELECTORS.SELECTED_ATTRIBUTE_VALUE);
const selectedValuesMap = Array.from(selectedValues).reduce((map, attrValue) => Object.assign(map, {
[attrValue.dataset.attr]: attrValue.dataset.value
}), {});
form.selectedValues = JSON.stringify(selectedValuesMap);
});
};
_base__WEBPACK_IMPORTED_MODULE_1__["default"].handlePostCartAdd = () => {
// eslint-disable-next-line no-unused-vars
let lastClickedButton = null;
jquery__WEBPACK_IMPORTED_MODULE_0___default()(document).on('updateAddToCartFormData', (e, data) => {
if (!data.error) {
lastClickedButton = e.target;
}
}).on('product:afterAddToCart', (e, data) => {
const $button = jquery__WEBPACK_IMPORTED_MODULE_0___default()(lastClickedButton); // eslint-disable-next-line jquery/no-closest
const parent = $button.closest('.set-item');
if (parent.length > 0) {
parent.find('.add-to-bag-msg').removeClass('active');
} else {
// eslint-disable-next-line jquery/no-class
jquery__WEBPACK_IMPORTED_MODULE_0___default()('.add-to-bag-msg').removeClass('active');
}
if (data && !data.error) {
// eslint-disable-next-line jquery/no-find, jquery/no-parents
let notification = $button.parents(SELECTORS.DETAILS).find(SELECTORS.ADD_TO_BASKET_NOTIFICATION);
if (notification.length > 1) {
// eslint-disable-next-line jquery/no-find, jquery/no-parents
notification = $button.parents(SELECTORS.SET_DETAILS).find(SELECTORS.ADD_TO_BASKET_NOTIFICATION);
}
if (notification) {
notification.removeClass('d-none');
setTimeout(() => {
notification.addClass('d-none');
}, CONSTANTS.ADD_NOTIFICATION_DISPLAY_TIME);
}
}
if (data && data.attributeErrors) {
// eslint-disable-next-line jquery/no-parents
let attributeContainer = $button.parents(SELECTORS.DETAILS);
if (attributeContainer.length > 1) {
// eslint-disable-next-line jquery/no-parents
attributeContainer = $button.parents(SELECTORS.SET_DETAILS);
handleErrorFieldForMultipleFields(data.attributeErrors, attributeContainer);
} else {
handleErrorField(data.attributeErrors);
}
}
});
};
_base__WEBPACK_IMPORTED_MODULE_1__["default"].handlePostWishlistAdd = () => {
document.addEventListener('product:addedToWishlist', () => {
const notification = document.querySelector(SELECTORS.ADD_TO_WISHLIST_NOTIFICATION);
if (notification) {
notification.classList.remove('d-none');
setTimeout(() => {
notification.classList.add('d-none');
}, CONSTANTS.ADD_NOTIFICATION_DISPLAY_TIME);
}
});
};
_base__WEBPACK_IMPORTED_MODULE_1__["default"].styleFlyouts = () => {
const toggleOpenedClass = add => {
const container = document.querySelector(SELECTORS.DETAILS);
if (container) {
container.classList.toggle('flyout-open', !!add);
}
};
document.addEventListener(_components_flyoutUnderHeader__WEBPACK_IMPORTED_MODULE_6__["EVENTS"].FLYOUT_OPEN, toggleOpenedClass.bind(null, true));
document.addEventListener(_components_flyoutUnderHeader__WEBPACK_IMPORTED_MODULE_6__["EVENTS"].FLYOUT_CLOSE, toggleOpenedClass.bind(null, false));
};
_base__WEBPACK_IMPORTED_MODULE_1__["default"].selectVariationPrompt = () => {
const attributeContainer = document.querySelector(SELECTORS.ATTRIBUTES_CONTAINER);
if (attributeContainer && attributeContainer.dataset.attributeErrors) {
const data = Object(_util_domutils__WEBPACK_IMPORTED_MODULE_2__["getJSONData"])(attributeContainer, 'attributeErrors');
if (Object.keys(data).length > 0) {
handleErrorField(data);
}
}
};
_base__WEBPACK_IMPORTED_MODULE_1__["default"].initSizeConversions = _components_sizeConversions__WEBPACK_IMPORTED_MODULE_4__["default"];
/* harmony default export */ __webpack_exports__["default"] = (_base__WEBPACK_IMPORTED_MODULE_1__["default"]);
/***/ }),
/***/ "./cartridges/app_tfg/cartridge/client/default/js/product/components/attributes.js":
/*!*****************************************************************************************!*\
!*** ./cartridges/app_tfg/cartridge/client/default/js/product/components/attributes.js ***!
\*****************************************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _components_tooltip__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../components/tooltip */ "./cartridges/app_tfg/cartridge/client/default/js/components/tooltip.js");
const SELECTORS = {
ATTRIBUTE_TOOLTIP: '.product-detail__attribute__value[data-tippy-content]'
};
/* harmony default export */ __webpack_exports__["default"] = (() => {
Object(_components_tooltip__WEBPACK_IMPORTED_MODULE_0__["default"])(SELECTORS.ATTRIBUTE_TOOLTIP);
});
/***/ }),
/***/ "./cartridges/app_tfg/cartridge/client/default/js/product/components/imageCarousel.js":
/*!********************************************************************************************!*\
!*** ./cartridges/app_tfg/cartridge/client/default/js/product/components/imageCarousel.js ***!
\********************************************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! jquery */ "./node_modules/jquery/dist/jquery.js");
/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _util_domutils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../util/domutils */ "./cartridges/app_tfg/cartridge/client/default/js/util/domutils.js");
/* harmony import */ var _thirdParty_bootstrap_carouselSwipe__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../thirdParty/bootstrap/carouselSwipe */ "./cartridges/app_tfg/cartridge/client/default/js/thirdParty/bootstrap/carouselSwipe.js");
/* harmony import */ var _imageGallery__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./imageGallery */ "./cartridges/app_tfg/cartridge/client/default/js/product/components/imageGallery.js");
const GLOBALS = {
CAROUSELS: []
};
const CLASSES = {
CAROUSEL: 'carousel'
};
const SELECTORS = {
CAROUSEL_CONTAINER: '.primary-images__carousel',
QUICKVIEW_MODAL: '#quickViewModal'
};
const clearCarousel = carouselElement => {
if (GLOBALS.CAROUSELS.length) {
const currentCarousel = GLOBALS.CAROUSELS.find(carousel => carousel === carouselElement);
const currentCarouselIndex = GLOBALS.CAROUSELS.findIndex(carousel => carousel === carouselElement);
if (currentCarousel) {
currentCarousel.classList.remove(CLASSES.CAROUSEL);
jquery__WEBPACK_IMPORTED_MODULE_0___default()(currentCarousel).carousel('dispose');
GLOBALS.CAROUSELS.splice(currentCarouselIndex, 1);
}
}
};
const disableCarousel = carouselElement => {
carouselElement.dataset.swipeDisabled = 'true';
};
const enableCarousel = carouselElement => {
carouselElement.dataset.swipeDisabled = 'false';
};
const initQuickviewCleanup = carouselElement => {
const quickViewModal = document.querySelector(SELECTORS.QUICKVIEW_MODAL);
if (quickViewModal) {
jquery__WEBPACK_IMPORTED_MODULE_0___default()(quickViewModal).on('hidden.bs.modal', clearCarousel.bind(null, carouselElement));
}
};
const initCarousel = carouselElement => {
carouselElement.classList.add(CLASSES.CAROUSEL);
GLOBALS.CAROUSELS.push(jquery__WEBPACK_IMPORTED_MODULE_0___default()(carouselElement).carousel({
interval: false
})[0]);
Object(_util_domutils__WEBPACK_IMPORTED_MODULE_1__["addUniqueEventListener"])(document, 'product:beforeAttributeSelect', clearCarousel.bind(null, carouselElement));
Object(_util_domutils__WEBPACK_IMPORTED_MODULE_1__["addUniqueEventListener"])(document, _imageGallery__WEBPACK_IMPORTED_MODULE_3__["EVENTS"].PINCH_ZOOM_START, disableCarousel.bind(null, carouselElement));
Object(_util_domutils__WEBPACK_IMPORTED_MODULE_1__["addUniqueEventListener"])(document, _imageGallery__WEBPACK_IMPORTED_MODULE_3__["EVENTS"].PINCH_ZOOM_END, enableCarousel.bind(null, carouselElement));
jquery__WEBPACK_IMPORTED_MODULE_0___default()(carouselElement).on('slid.bs.carousel', () => {
_imageGallery__WEBPACK_IMPORTED_MODULE_3__["GLOBALS"].PINCH_ZOOM.forEach(pinchZoomObj => {
pinchZoomObj.update({
type: 'resize'
});
});
});
initQuickviewCleanup(carouselElement);
};
/* harmony default export */ __webpack_exports__["default"] = (forceCarousel => {
const isProductSet = document.querySelector('.product-set-detail') !== null;
const carousels = Array.from(document.querySelectorAll(SELECTORS.CAROUSEL_CONTAINER));
carousels.forEach(carousel => {
if (!Object(_util_domutils__WEBPACK_IMPORTED_MODULE_1__["isLG"])() || forceCarousel || isProductSet) {
initCarousel(carousel);
Object(_thirdParty_bootstrap_carouselSwipe__WEBPACK_IMPORTED_MODULE_2__["default"])(carousel, {});
} else {
clearCarousel(carousel);
}
});
});
/***/ }),
/***/ "./cartridges/app_tfg/cartridge/client/default/js/product/components/imageGallery.js":
/*!*******************************************************************************************************!*\
!*** ./cartridges/app_tfg/cartridge/client/default/js/product/components/imageGallery.js + 5 modules ***!
\*******************************************************************************************************/
/*! exports provided: GLOBALS, EVENTS, PDP_GALLERY_EVENTS, initImageGallery */
/*! ModuleConcatenation bailout: Cannot concat with ./cartridges/app_tfg/cartridge/client/default/js/product/components/videoPlayer.js because of ./cartridges/app_tfg/cartridge/client/default/js/product/detail.js */
/*! ModuleConcatenation bailout: Cannot concat with ./cartridges/app_tfg/cartridge/client/default/js/util/domutils.js */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, "GLOBALS", function() { return /* binding */ GLOBALS; });
__webpack_require__.d(__webpack_exports__, "EVENTS", function() { return /* binding */ EVENTS; });
__webpack_require__.d(__webpack_exports__, "PDP_GALLERY_EVENTS", function() { return /* binding */ PDP_GALLERY_EVENTS; });
__webpack_require__.d(__webpack_exports__, "initImageGallery", function() { return /* binding */ initImageGallery; });
// CONCATENATED MODULE: ./node_modules/lightgallery/lightgallery.es5.js
/*!
* lightgallery | 2.7.1 | January 11th 2023
* http://www.lightgalleryjs.com/
* Copyright (c) 2020 Sachin Neravath;
* @license GPLv3
*/
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
var __assign = function() {
__assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
function __spreadArrays() {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
}
/**
* List of lightGallery events
* All events should be documented here
* Below interfaces are used to build the website documentations
* */
var lGEvents = {
afterAppendSlide: 'lgAfterAppendSlide',
init: 'lgInit',
hasVideo: 'lgHasVideo',
containerResize: 'lgContainerResize',
updateSlides: 'lgUpdateSlides',
afterAppendSubHtml: 'lgAfterAppendSubHtml',
beforeOpen: 'lgBeforeOpen',
afterOpen: 'lgAfterOpen',
slideItemLoad: 'lgSlideItemLoad',
beforeSlide: 'lgBeforeSlide',
afterSlide: 'lgAfterSlide',
posterClick: 'lgPosterClick',
dragStart: 'lgDragStart',
dragMove: 'lgDragMove',
dragEnd: 'lgDragEnd',
beforeNextSlide: 'lgBeforeNextSlide',
beforePrevSlide: 'lgBeforePrevSlide',
beforeClose: 'lgBeforeClose',
afterClose: 'lgAfterClose',
rotateLeft: 'lgRotateLeft',
rotateRight: 'lgRotateRight',
flipHorizontal: 'lgFlipHorizontal',
flipVertical: 'lgFlipVertical',
autoplay: 'lgAutoplay',
autoplayStart: 'lgAutoplayStart',
autoplayStop: 'lgAutoplayStop',
};
var lightGalleryCoreSettings = {
mode: 'lg-slide',
easing: 'ease',
speed: 400,
licenseKey: '0000-0000-000-0000',
height: '100%',
width: '100%',
addClass: '',
startClass: 'lg-start-zoom',
backdropDuration: 300,
container: '',
startAnimationDuration: 400,
zoomFromOrigin: true,
hideBarsDelay: 0,
showBarsAfter: 10000,
slideDelay: 0,
supportLegacyBrowser: true,
allowMediaOverlap: false,
videoMaxSize: '1280-720',
loadYouTubePoster: true,
defaultCaptionHeight: 0,
ariaLabelledby: '',
ariaDescribedby: '',
resetScrollPosition: true,
hideScrollbar: false,
closable: true,
swipeToClose: true,
closeOnTap: true,
showCloseIcon: true,
showMaximizeIcon: false,
loop: true,
escKey: true,
keyPress: true,
trapFocus: true,
controls: true,
slideEndAnimation: true,
hideControlOnEnd: false,
mousewheel: false,
getCaptionFromTitleOrAlt: true,
appendSubHtmlTo: '.lg-sub-html',
subHtmlSelectorRelative: false,
preload: 2,
numberOfSlideItemsInDom: 10,
selector: '',
selectWithin: '',
nextHtml: '',
prevHtml: '',
index: 0,
iframeWidth: '100%',
iframeHeight: '100%',
iframeMaxWidth: '100%',
iframeMaxHeight: '100%',
download: true,
counter: true,
appendCounterTo: '.lg-toolbar',
swipeThreshold: 50,
enableSwipe: true,
enableDrag: true,
dynamic: false,
dynamicEl: [],
extraProps: [],
exThumbImage: '',
isMobile: undefined,
mobileSettings: {
controls: false,
showCloseIcon: false,
download: false,
},
plugins: [],
strings: {
closeGallery: 'Close gallery',
toggleMaximize: 'Toggle maximize',
previousSlide: 'Previous slide',
nextSlide: 'Next slide',
download: 'Download',
playVideo: 'Play video',
},
};
function initLgPolyfills() {
(function () {
if (typeof window.CustomEvent === 'function')
return false;
function CustomEvent(event, params) {
params = params || {
bubbles: false,
cancelable: false,
detail: null,
};
var evt = document.createEvent('CustomEvent');
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
return evt;
}
window.CustomEvent = CustomEvent;
})();
(function () {
if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.msMatchesSelector ||
Element.prototype.webkitMatchesSelector;
}
})();
}
var lgQuery = /** @class */ (function () {
function lgQuery(selector) {
this.cssVenderPrefixes = [
'TransitionDuration',
'TransitionTimingFunction',
'Transform',
'Transition',
];
this.selector = this._getSelector(selector);
this.firstElement = this._getFirstEl();
return this;
}
lgQuery.generateUUID = function () {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = (Math.random() * 16) | 0, v = c == 'x' ? r : (r & 0x3) | 0x8;
return v.toString(16);
});
};
lgQuery.prototype._getSelector = function (selector, context) {
if (context === void 0) { context = document; }
if (typeof selector !== 'string') {
return selector;
}
context = context || document;
var fl = selector.substring(0, 1);
if (fl === '#') {
return context.querySelector(selector);
}
else {
return context.querySelectorAll(selector);
}
};
lgQuery.prototype._each = function (func) {
if (!this.selector) {
return this;
}
if (this.selector.length !== undefined) {
[].forEach.call(this.selector, func);
}
else {
func(this.selector, 0);
}
return this;
};
lgQuery.prototype._setCssVendorPrefix = function (el, cssProperty, value) {
// prettier-ignore
var property = cssProperty.replace(/-([a-z])/gi, function (s, group1) {
return group1.toUpperCase();
});
if (this.cssVenderPrefixes.indexOf(property) !== -1) {
el.style[property.charAt(0).toLowerCase() + property.slice(1)] = value;
el.style['webkit' + property] = value;
el.style['moz' + property] = value;
el.style['ms' + property] = value;
el.style['o' + property] = value;
}
else {
el.style[property] = value;
}
};
lgQuery.prototype._getFirstEl = function () {
if (this.selector && this.selector.length !== undefined) {
return this.selector[0];
}
else {
return this.selector;
}
};
lgQuery.prototype.isEventMatched = function (event, eventName) {
var eventNamespace = eventName.split('.');
return event
.split('.')
.filter(function (e) { return e; })
.every(function (e) {
return eventNamespace.indexOf(e) !== -1;
});
};
lgQuery.prototype.attr = function (attr, value) {
if (value === undefined) {
if (!this.firstElement) {
return '';
}
return this.firstElement.getAttribute(attr);
}
this._each(function (el) {
el.setAttribute(attr, value);
});
return this;
};
lgQuery.prototype.find = function (selector) {
return $LG(this._getSelector(selector, this.selector));
};
lgQuery.prototype.first = function () {
if (this.selector && this.selector.length !== undefined) {
return $LG(this.selector[0]);
}
else {
return $LG(this.selector);
}
};
lgQuery.prototype.eq = function (index) {
return $LG(this.selector[index]);
};
lgQuery.prototype.parent = function () {
return $LG(this.selector.parentElement);
};
lgQuery.prototype.get = function () {
return this._getFirstEl();
};
lgQuery.prototype.removeAttr = function (attributes) {
var attrs = attributes.split(' ');
this._each(function (el) {
attrs.forEach(function (attr) { return el.removeAttribute(attr); });
});
return this;
};
lgQuery.prototype.wrap = function (className) {
if (!this.firstElement) {
return this;
}
var wrapper = document.createElement('div');
wrapper.className = className;
this.firstElement.parentNode.insertBefore(wrapper, this.firstElement);
this.firstElement.parentNode.removeChild(this.firstElement);
wrapper.appendChild(this.firstElement);
return this;
};
lgQuery.prototype.addClass = function (classNames) {
if (classNames === void 0) { classNames = ''; }
this._each(function (el) {
// IE doesn't support multiple arguments
classNames.split(' ').forEach(function (className) {
if (className) {
el.classList.add(className);
}
});
});
return this;
};
lgQuery.prototype.removeClass = function (classNames) {
this._each(function (el) {
// IE doesn't support multiple arguments
classNames.split(' ').forEach(function (className) {
if (className) {
el.classList.remove(className);
}
});
});
return this;
};
lgQuery.prototype.hasClass = function (className) {
if (!this.firstElement) {
return false;
}
return this.firstElement.classList.contains(className);
};
lgQuery.prototype.hasAttribute = function (attribute) {
if (!this.firstElement) {
return false;
}
return this.firstElement.hasAttribute(attribute);
};
lgQuery.prototype.toggleClass = function (className) {
if (!this.firstElement) {
return this;
}
if (this.hasClass(className)) {
this.removeClass(className);
}
else {
this.addClass(className);
}
return this;
};
lgQuery.prototype.css = function (property, value) {
var _this = this;
this._each(function (el) {
_this._setCssVendorPrefix(el, property, value);
});
return this;
};
// Need to pass separate namespaces for separate elements
lgQuery.prototype.on = function (events, listener) {
var _this = this;
if (!this.selector) {
return this;
}
events.split(' ').forEach(function (event) {
if (!Array.isArray(lgQuery.eventListeners[event])) {
lgQuery.eventListeners[event] = [];
}
lgQuery.eventListeners[event].push(listener);
_this.selector.addEventListener(event.split('.')[0], listener);
});
return this;
};
// @todo - test this
lgQuery.prototype.once = function (event, listener) {
var _this = this;
this.on(event, function () {
_this.off(event);
listener(event);
});
return this;
};
lgQuery.prototype.off = function (event) {
var _this = this;
if (!this.selector) {
return this;
}
Object.keys(lgQuery.eventListeners).forEach(function (eventName) {
if (_this.isEventMatched(event, eventName)) {
lgQuery.eventListeners[eventName].forEach(function (listener) {
_this.selector.removeEventListener(eventName.split('.')[0], listener);
});
lgQuery.eventListeners[eventName] = [];
}
});
return this;
};
lgQuery.prototype.trigger = function (event, detail) {
if (!this.firstElement) {
return this;
}
var customEvent = new CustomEvent(event.split('.')[0], {
detail: detail || null,
});
this.firstElement.dispatchEvent(customEvent);
return this;
};
// Does not support IE
lgQuery.prototype.load = function (url) {
var _this = this;
fetch(url)
.then(function (res) { return res.text(); })
.then(function (html) {
_this.selector.innerHTML = html;
});
return this;
};
lgQuery.prototype.html = function (html) {
if (html === undefined) {
if (!this.firstElement) {
return '';
}
return this.firstElement.innerHTML;
}
this._each(function (el) {
el.innerHTML = html;
});
return this;
};
lgQuery.prototype.append = function (html) {
this._each(function (el) {
if (typeof html === 'string') {
el.insertAdjacentHTML('beforeend', html);
}
else {
el.appendChild(html);
}
});
return this;
};
lgQuery.prototype.prepend = function (html) {
this._each(function (el) {
el.insertAdjacentHTML('afterbegin', html);
});
return this;
};
lgQuery.prototype.remove = function () {
this._each(function (el) {
el.parentNode.removeChild(el);
});
return this;
};
lgQuery.prototype.empty = function () {
this._each(function (el) {
el.innerHTML = '';
});
return this;
};
lgQuery.prototype.scrollTop = function (scrollTop) {
if (scrollTop !== undefined) {
document.body.scrollTop = scrollTop;
document.documentElement.scrollTop = scrollTop;
return this;
}
else {
return (window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop ||
0);
}
};
lgQuery.prototype.scrollLeft = function (scrollLeft) {
if (scrollLeft !== undefined) {
document.body.scrollLeft = scrollLeft;
document.documentElement.scrollLeft = scrollLeft;
return this;
}
else {
return (window.pageXOffset ||
document.documentElement.scrollLeft ||
document.body.scrollLeft ||
0);
}
};
lgQuery.prototype.offset = function () {
if (!this.firstElement) {
return {
left: 0,
top: 0,
};
}
var rect = this.firstElement.getBoundingClientRect();
var bodyMarginLeft = $LG('body').style().marginLeft;
// Minus body margin - https://stackoverflow.com/questions/30711548/is-getboundingclientrect-left-returning-a-wrong-value
return {
left: rect.left - parseFloat(bodyMarginLeft) + this.scrollLeft(),
top: rect.top + this.scrollTop(),
};
};
lgQuery.prototype.style = function () {
if (!this.firstElement) {
return {};
}
return (this.firstElement.currentStyle ||
window.getComputedStyle(this.firstElement));
};
// Width without padding and border even if box-sizing is used.
lgQuery.prototype.width = function () {
var style = this.style();
return (this.firstElement.clientWidth -
parseFloat(style.paddingLeft) -
parseFloat(style.paddingRight));
};
// Height without padding and border even if box-sizing is used.
lgQuery.prototype.height = function () {
var style = this.style();
return (this.firstElement.clientHeight -
parseFloat(style.paddingTop) -
parseFloat(style.paddingBottom));
};
lgQuery.eventListeners = {};
return lgQuery;
}());
function $LG(selector) {
initLgPolyfills();
return new lgQuery(selector);
}
var defaultDynamicOptions = [
'src',
'sources',
'subHtml',
'subHtmlUrl',
'html',
'video',
'poster',
'slideName',
'responsive',
'srcset',
'sizes',
'iframe',
'downloadUrl',
'download',
'width',
'facebookShareUrl',
'tweetText',
'iframeTitle',
'twitterShareUrl',
'pinterestShareUrl',
'pinterestText',
'fbHtml',
'disqusIdentifier',
'disqusUrl',
];
// Convert html data-attribute to camalcase
function convertToData(attr) {
// FInd a way for lgsize
if (attr === 'href') {
return 'src';
}
attr = attr.replace('data-', '');
attr = attr.charAt(0).toLowerCase() + attr.slice(1);
attr = attr.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
return attr;
}
var utils = {
/**
* get possible width and height from the lgSize attribute. Used for ZoomFromOrigin option
*/
getSize: function (el, container, spacing, defaultLgSize) {
if (spacing === void 0) { spacing = 0; }
var LGel = $LG(el);
var lgSize = LGel.attr('data-lg-size') || defaultLgSize;
if (!lgSize) {
return;
}
var isResponsiveSizes = lgSize.split(',');
// if at-least two viewport sizes are available
if (isResponsiveSizes[1]) {
var wWidth = window.innerWidth;
for (var i = 0; i < isResponsiveSizes.length; i++) {
var size_1 = isResponsiveSizes[i];
var responsiveWidth = parseInt(size_1.split('-')[2], 10);
if (responsiveWidth > wWidth) {
lgSize = size_1;
break;
}
// take last item as last option
if (i === isResponsiveSizes.length - 1) {
lgSize = size_1;
}
}
}
var size = lgSize.split('-');
var width = parseInt(size[0], 10);
var height = parseInt(size[1], 10);
var cWidth = container.width();
var cHeight = container.height() - spacing;
var maxWidth = Math.min(cWidth, width);
var maxHeight = Math.min(cHeight, height);
var ratio = Math.min(maxWidth / width, maxHeight / height);
return { width: width * ratio, height: height * ratio };
},
/**
* @desc Get transform value based on the imageSize. Used for ZoomFromOrigin option
* @param {jQuery Element}
* @returns {String} Transform CSS string
*/
getTransform: function (el, container, top, bottom, imageSize) {
if (!imageSize) {
return;
}
var LGel = $LG(el).find('img').first();
if (!LGel.get()) {
return;
}
var containerRect = container.get().getBoundingClientRect();
var wWidth = containerRect.width;
// using innerWidth to include mobile safari bottom bar
var wHeight = container.height() - (top + bottom);
var elWidth = LGel.width();
var elHeight = LGel.height();
var elStyle = LGel.style();
var x = (wWidth - elWidth) / 2 -
LGel.offset().left +
(parseFloat(elStyle.paddingLeft) || 0) +
(parseFloat(elStyle.borderLeft) || 0) +
$LG(window).scrollLeft() +
containerRect.left;
var y = (wHeight - elHeight) / 2 -
LGel.offset().top +
(parseFloat(elStyle.paddingTop) || 0) +
(parseFloat(elStyle.borderTop) || 0) +
$LG(window).scrollTop() +
top;
var scX = elWidth / imageSize.width;
var scY = elHeight / imageSize.height;
var transform = 'translate3d(' +
(x *= -1) +
'px, ' +
(y *= -1) +
'px, 0) scale3d(' +
scX +
', ' +
scY +
', 1)';
return transform;
},
getIframeMarkup: function (iframeWidth, iframeHeight, iframeMaxWidth, iframeMaxHeight, src, iframeTitle) {
var title = iframeTitle ? 'title="' + iframeTitle + '"' : '';
return "\n \n
";
},
getImgMarkup: function (index, src, altAttr, srcset, sizes, sources) {
var srcsetAttr = srcset ? "srcset=\"" + srcset + "\"" : '';
var sizesAttr = sizes ? "sizes=\"" + sizes + "\"" : '';
var imgMarkup = "\n \n " + (dummyImg || '') + "\n ![](\"")
\n
";
},
getFocusableElements: function (container) {
var elements = container.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
var visibleElements = [].filter.call(elements, function (element) {
var style = window.getComputedStyle(element);
return style.display !== 'none' && style.visibility !== 'hidden';
});
return visibleElements;
},
/**
* @desc Create dynamic elements array from gallery items when dynamic option is false
* It helps to avoid frequent DOM interaction
* and avoid multiple checks for dynamic elments
*
* @returns {Array} dynamicEl
*/
getDynamicOptions: function (items, extraProps, getCaptionFromTitleOrAlt, exThumbImage) {
var dynamicElements = [];
var availableDynamicOptions = __spreadArrays(defaultDynamicOptions, extraProps);
[].forEach.call(items, function (item) {
var dynamicEl = {};
for (var i = 0; i < item.attributes.length; i++) {
var attr = item.attributes[i];
if (attr.specified) {
var dynamicAttr = convertToData(attr.name);
var label = '';
if (availableDynamicOptions.indexOf(dynamicAttr) > -1) {
label = dynamicAttr;
}
if (label) {
dynamicEl[label] = attr.value;
}
}
}
var currentItem = $LG(item);
var alt = currentItem.find('img').first().attr('alt');
var title = currentItem.attr('title');
var thumb = exThumbImage
? currentItem.attr(exThumbImage)
: currentItem.find('img').first().attr('src');
dynamicEl.thumb = thumb;
if (getCaptionFromTitleOrAlt && !dynamicEl.subHtml) {
dynamicEl.subHtml = title || alt || '';
}
dynamicEl.alt = alt || title || '';
dynamicElements.push(dynamicEl);
});
return dynamicElements;
},
isMobile: function () {
return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
},
/**
* @desc Check the given src is video
* @param {String} src
* @return {Object} video type
* Ex:{ youtube : ["//www.youtube.com/watch?v=c0asJgSyxcY", "c0asJgSyxcY"] }
*
* @todo - this information can be moved to dynamicEl to avoid frequent calls
*/
isVideo: function (src, isHTML5VIdeo, index) {
if (!src) {
if (isHTML5VIdeo) {
return {
html5: true,
};
}
else {
console.error('lightGallery :- data-src is not provided on slide item ' +
(index + 1) +
'. Please make sure the selector property is properly configured. More info - https://www.lightgalleryjs.com/demos/html-markup/');
return;
}
}
var youtube = src.match(/\/\/(?:www\.)?youtu(?:\.be|be\.com|be-nocookie\.com)\/(?:watch\?v=|embed\/)?([a-z0-9\-\_\%]+)([\&|?][\S]*)*/i);
var vimeo = src.match(/\/\/(?:www\.)?(?:player\.)?vimeo.com\/(?:video\/)?([0-9a-z\-_]+)(.*)?/i);
var wistia = src.match(/https?:\/\/(.+)?(wistia\.com|wi\.st)\/(medias|embed)\/([0-9a-z\-_]+)(.*)/);
if (youtube) {
return {
youtube: youtube,
};
}
else if (vimeo) {
return {
vimeo: vimeo,
};
}
else if (wistia) {
return {
wistia: wistia,
};
}
},
};
// @ref - https://stackoverflow.com/questions/3971841/how-to-resize-images-proportionally-keeping-the-aspect-ratio
// @ref - https://2ality.com/2017/04/setting-up-multi-platform-packages.html
// Unique id for each gallery
var lgId = 0;
var LightGallery = /** @class */ (function () {
function LightGallery(element, options) {
this.lgOpened = false;
this.index = 0;
// lightGallery modules
this.plugins = [];
// false when lightGallery load first slide content;
this.lGalleryOn = false;
// True when a slide animation is in progress
this.lgBusy = false;
this.currentItemsInDom = [];
// Scroll top value before lightGallery is opened
this.prevScrollTop = 0;
this.bodyPaddingRight = 0;
this.isDummyImageRemoved = false;
this.dragOrSwipeEnabled = false;
this.mediaContainerPosition = {
top: 0,
bottom: 0,
};
if (!element) {
return this;
}
lgId++;
this.lgId = lgId;
this.el = element;
this.LGel = $LG(element);
this.generateSettings(options);
this.buildModules();
// When using dynamic mode, ensure dynamicEl is an array
if (this.settings.dynamic &&
this.settings.dynamicEl !== undefined &&
!Array.isArray(this.settings.dynamicEl)) {
throw 'When using dynamic mode, you must also define dynamicEl as an Array.';
}
this.galleryItems = this.getItems();
this.normalizeSettings();
// Gallery items
this.init();
this.validateLicense();
return this;
}
LightGallery.prototype.generateSettings = function (options) {
// lightGallery settings
this.settings = __assign(__assign({}, lightGalleryCoreSettings), options);
if (this.settings.isMobile &&
typeof this.settings.isMobile === 'function'
? this.settings.isMobile()
: utils.isMobile()) {
var mobileSettings = __assign(__assign({}, this.settings.mobileSettings), this.settings.mobileSettings);
this.settings = __assign(__assign({}, this.settings), mobileSettings);
}
};
LightGallery.prototype.normalizeSettings = function () {
if (this.settings.slideEndAnimation) {
this.settings.hideControlOnEnd = false;
}
if (!this.settings.closable) {
this.settings.swipeToClose = false;
}
// And reset it on close to get the correct value next time
this.zoomFromOrigin = this.settings.zoomFromOrigin;
// At the moment, Zoom from image doesn't support dynamic options
// @todo add zoomFromOrigin support for dynamic images
if (this.settings.dynamic) {
this.zoomFromOrigin = false;
}
if (!this.settings.container) {
this.settings.container = document.body;
}
// settings.preload should not be grater than $item.length
this.settings.preload = Math.min(this.settings.preload, this.galleryItems.length);
};
LightGallery.prototype.init = function () {
var _this = this;
this.addSlideVideoInfo(this.galleryItems);
this.buildStructure();
this.LGel.trigger(lGEvents.init, {
instance: this,
});
if (this.settings.keyPress) {
this.keyPress();
}
setTimeout(function () {
_this.enableDrag();
_this.enableSwipe();
_this.triggerPosterClick();
}, 50);
this.arrow();
if (this.settings.mousewheel) {
this.mousewheel();
}
if (!this.settings.dynamic) {
this.openGalleryOnItemClick();
}
};
LightGallery.prototype.openGalleryOnItemClick = function () {
var _this = this;
var _loop_1 = function (index) {
var element = this_1.items[index];
var $element = $LG(element);
// Using different namespace for click because click event should not unbind if selector is same object('this')
// @todo manage all event listners - should have namespace that represent element
var uuid = lgQuery.generateUUID();
$element
.attr('data-lg-id', uuid)
.on("click.lgcustom-item-" + uuid, function (e) {
e.preventDefault();
var currentItemIndex = _this.settings.index || index;
_this.openGallery(currentItemIndex, element);
});
};
var this_1 = this;
// Using for loop instead of using bubbling as the items can be any html element.
for (var index = 0; index < this.items.length; index++) {
_loop_1(index);
}
};
/**
* Module constructor
* Modules are build incrementally.
* Gallery should be opened only once all the modules are initialized.
* use moduleBuildTimeout to make sure this
*/
LightGallery.prototype.buildModules = function () {
var _this = this;
this.settings.plugins.forEach(function (plugin) {
_this.plugins.push(new plugin(_this, $LG));
});
};
LightGallery.prototype.validateLicense = function () {
if (!this.settings.licenseKey) {
console.error('Please provide a valid license key');
}
else if (this.settings.licenseKey === '0000-0000-000-0000') {
console.warn("lightGallery: " + this.settings.licenseKey + " license key is not valid for production use");
}
};
LightGallery.prototype.getSlideItem = function (index) {
return $LG(this.getSlideItemId(index));
};
LightGallery.prototype.getSlideItemId = function (index) {
return "#lg-item-" + this.lgId + "-" + index;
};
LightGallery.prototype.getIdName = function (id) {
return id + "-" + this.lgId;
};
LightGallery.prototype.getElementById = function (id) {
return $LG("#" + this.getIdName(id));
};
LightGallery.prototype.manageSingleSlideClassName = function () {
if (this.galleryItems.length < 2) {
this.outer.addClass('lg-single-item');
}
else {
this.outer.removeClass('lg-single-item');
}
};
LightGallery.prototype.buildStructure = function () {
var _this = this;
var container = this.$container && this.$container.get();
if (container) {
return;
}
var controls = '';
var subHtmlCont = '';
// Create controls
if (this.settings.controls) {
controls = "\n ";
}
if (this.settings.appendSubHtmlTo !== '.lg-item') {
subHtmlCont =
'';
}
var addClasses = '';
if (this.settings.allowMediaOverlap) {
// Do not remove space before last single quote
addClasses += 'lg-media-overlap ';
}
var ariaLabelledby = this.settings.ariaLabelledby
? 'aria-labelledby="' + this.settings.ariaLabelledby + '"'
: '';
var ariaDescribedby = this.settings.ariaDescribedby
? 'aria-describedby="' + this.settings.ariaDescribedby + '"'
: '';
var containerClassName = "lg-container " + this.settings.addClass + " " + (document.body !== this.settings.container ? 'lg-inline' : '');
var closeIcon = this.settings.closable && this.settings.showCloseIcon
? ""
: '';
var maximizeIcon = this.settings.showMaximizeIcon
? ""
: '';
var template = "\n \n \n\n
\n ";
$LG(this.settings.container).append(template);
if (document.body !== this.settings.container) {
$LG(this.settings.container).css('position', 'relative');
}
this.outer = this.getElementById('lg-outer');
this.$lgComponents = this.getElementById('lg-components');
this.$backdrop = this.getElementById('lg-backdrop');
this.$container = this.getElementById('lg-container');
this.$inner = this.getElementById('lg-inner');
this.$content = this.getElementById('lg-content');
this.$toolbar = this.getElementById('lg-toolbar');
this.$backdrop.css('transition-duration', this.settings.backdropDuration + 'ms');
var outerClassNames = this.settings.mode + " ";
this.manageSingleSlideClassName();
if (this.settings.enableDrag) {
outerClassNames += 'lg-grab ';
}
this.outer.addClass(outerClassNames);
this.$inner.css('transition-timing-function', this.settings.easing);
this.$inner.css('transition-duration', this.settings.speed + 'ms');
if (this.settings.download) {
this.$toolbar.append("");
}
this.counter();
$LG(window).on("resize.lg.global" + this.lgId + " orientationchange.lg.global" + this.lgId, function () {
_this.refreshOnResize();
});
this.hideBars();
this.manageCloseGallery();
this.toggleMaximize();
this.initModules();
};
LightGallery.prototype.refreshOnResize = function () {
if (this.lgOpened) {
var currentGalleryItem = this.galleryItems[this.index];
var __slideVideoInfo = currentGalleryItem.__slideVideoInfo;
this.mediaContainerPosition = this.getMediaContainerPosition();
var _a = this.mediaContainerPosition, top_1 = _a.top, bottom = _a.bottom;
this.currentImageSize = utils.getSize(this.items[this.index], this.outer, top_1 + bottom, __slideVideoInfo && this.settings.videoMaxSize);
if (__slideVideoInfo) {
this.resizeVideoSlide(this.index, this.currentImageSize);
}
if (this.zoomFromOrigin && !this.isDummyImageRemoved) {
var imgStyle = this.getDummyImgStyles(this.currentImageSize);
this.outer
.find('.lg-current .lg-dummy-img')
.first()
.attr('style', imgStyle);
}
this.LGel.trigger(lGEvents.containerResize);
}
};
LightGallery.prototype.resizeVideoSlide = function (index, imageSize) {
var lgVideoStyle = this.getVideoContStyle(imageSize);
var currentSlide = this.getSlideItem(index);
currentSlide.find('.lg-video-cont').attr('style', lgVideoStyle);
};
/**
* Update slides dynamically.
* Add, edit or delete slides dynamically when lightGallery is opened.
* Modify the current gallery items and pass it via updateSlides method
* @note
* - Do not mutate existing lightGallery items directly.
* - Always pass new list of gallery items
* - You need to take care of thumbnails outside the gallery if any
* - user this method only if you want to update slides when the gallery is opened. Otherwise, use `refresh()` method.
* @param items Gallery items
* @param index After the update operation, which slide gallery should navigate to
* @category lGPublicMethods
* @example
* const plugin = lightGallery();
*
* // Adding slides dynamically
* let galleryItems = [
* // Access existing lightGallery items
* // galleryItems are automatically generated internally from the gallery HTML markup
* // or directly from galleryItems when dynamic gallery is used
* ...plugin.galleryItems,
* ...[
* {
* src: 'img/img-1.png',
* thumb: 'img/thumb1.png',
* },
* ],
* ];
* plugin.updateSlides(
* galleryItems,
* plugin.index,
* );
*
*
* // Remove slides dynamically
* galleryItems = JSON.parse(
* JSON.stringify(updateSlideInstance.galleryItems),
* );
* galleryItems.shift();
* updateSlideInstance.updateSlides(galleryItems, 1);
* @see Demo
*/
LightGallery.prototype.updateSlides = function (items, index) {
if (this.index > items.length - 1) {
this.index = items.length - 1;
}
if (items.length === 1) {
this.index = 0;
}
if (!items.length) {
this.closeGallery();
return;
}
var currentSrc = this.galleryItems[index].src;
this.galleryItems = items;
this.updateControls();
this.$inner.empty();
this.currentItemsInDom = [];
var _index = 0;
// Find the current index based on source value of the slide
this.galleryItems.some(function (galleryItem, itemIndex) {
if (galleryItem.src === currentSrc) {
_index = itemIndex;
return true;
}
return false;
});
this.currentItemsInDom = this.organizeSlideItems(_index, -1);
this.loadContent(_index, true);
this.getSlideItem(_index).addClass('lg-current');
this.index = _index;
this.updateCurrentCounter(_index);
this.LGel.trigger(lGEvents.updateSlides);
};
// Get gallery items based on multiple conditions
LightGallery.prototype.getItems = function () {
// Gallery items
this.items = [];
if (!this.settings.dynamic) {
if (this.settings.selector === 'this') {
this.items.push(this.el);
}
else if (this.settings.selector) {
if (typeof this.settings.selector === 'string') {
if (this.settings.selectWithin) {
var selectWithin = $LG(this.settings.selectWithin);
this.items = selectWithin
.find(this.settings.selector)
.get();
}
else {
this.items = this.el.querySelectorAll(this.settings.selector);
}
}
else {
this.items = this.settings.selector;
}
}
else {
this.items = this.el.children;
}
return utils.getDynamicOptions(this.items, this.settings.extraProps, this.settings.getCaptionFromTitleOrAlt, this.settings.exThumbImage);
}
else {
return this.settings.dynamicEl || [];
}
};
LightGallery.prototype.shouldHideScrollbar = function () {
return (this.settings.hideScrollbar &&
document.body === this.settings.container);
};
LightGallery.prototype.hideScrollbar = function () {
if (!this.shouldHideScrollbar()) {
return;
}
this.bodyPaddingRight = parseFloat($LG('body').style().paddingRight);
var bodyRect = document.documentElement.getBoundingClientRect();
var scrollbarWidth = window.innerWidth - bodyRect.width;
$LG(document.body).css('padding-right', scrollbarWidth + this.bodyPaddingRight + 'px');
$LG(document.body).addClass('lg-overlay-open');
};
LightGallery.prototype.resetScrollBar = function () {
if (!this.shouldHideScrollbar()) {
return;
}
$LG(document.body).css('padding-right', this.bodyPaddingRight + 'px');
$LG(document.body).removeClass('lg-overlay-open');
};
/**
* Open lightGallery.
* Open gallery with specific slide by passing index of the slide as parameter.
* @category lGPublicMethods
* @param {Number} index - index of the slide
* @param {HTMLElement} element - Which image lightGallery should zoom from
*
* @example
* const $dynamicGallery = document.getElementById('dynamic-gallery-demo');
* const dynamicGallery = lightGallery($dynamicGallery, {
* dynamic: true,
* dynamicEl: [
* {
* src: 'img/1.jpg',
* thumb: 'img/thumb-1.jpg',
* subHtml: '\n\n
\n \n
\n \n " + (this.settings.appendSubHtmlTo === '.lg-outer'
? subHtmlCont
: '') + "\n \n
\n " + controls + "\n \n " + (this.settings.appendSubHtmlTo === '.lg-sub-html'
? subHtmlCont
: '') + "\n
\n Image 1 title
Image 1 descriptions.
', * }, * ... * ], * }); * $dynamicGallery.addEventListener('click', function () { * // Starts with third item.(Optional). * // This is useful if you want use dynamic mode with * // custom thumbnails (thumbnails outside gallery), * dynamicGallery.openGallery(2); * }); * */ LightGallery.prototype.openGallery = function (index, element) { var _this = this; if (index === void 0) { index = this.settings.index; } // prevent accidental double execution if (this.lgOpened) return; this.lgOpened = true; this.outer.removeClass('lg-hide-items'); this.hideScrollbar(); // Add display block, but still has opacity 0 this.$container.addClass('lg-show'); var itemsToBeInsertedToDom = this.getItemsToBeInsertedToDom(index, index); this.currentItemsInDom = itemsToBeInsertedToDom; var items = ''; itemsToBeInsertedToDom.forEach(function (item) { items = items + (""); }); this.$inner.append(items); this.addHtml(index); var transform = ''; this.mediaContainerPosition = this.getMediaContainerPosition(); var _a = this.mediaContainerPosition, top = _a.top, bottom = _a.bottom; if (!this.settings.allowMediaOverlap) { this.setMediaContainerPosition(top, bottom); } var __slideVideoInfo = this.galleryItems[index].__slideVideoInfo; if (this.zoomFromOrigin && element) { this.currentImageSize = utils.getSize(element, this.outer, top + bottom, __slideVideoInfo && this.settings.videoMaxSize); transform = utils.getTransform(element, this.outer, top, bottom, this.currentImageSize); } if (!this.zoomFromOrigin || !transform) { this.outer.addClass(this.settings.startClass); this.getSlideItem(index).removeClass('lg-complete'); } var timeout = this.settings.zoomFromOrigin ? 100 : this.settings.backdropDuration; setTimeout(function () { _this.outer.addClass('lg-components-open'); }, timeout); this.index = index; this.LGel.trigger(lGEvents.beforeOpen); // add class lg-current to remove initial transition this.getSlideItem(index).addClass('lg-current'); this.lGalleryOn = false; // Store the current scroll top value to scroll back after closing the gallery.. this.prevScrollTop = $LG(window).scrollTop(); setTimeout(function () { // Need to check both zoomFromOrigin and transform values as we need to set set the // default opening animation if user missed to add the lg-size attribute if (_this.zoomFromOrigin && transform) { var currentSlide_1 = _this.getSlideItem(index); currentSlide_1.css('transform', transform); setTimeout(function () { currentSlide_1 .addClass('lg-start-progress lg-start-end-progress') .css('transition-duration', _this.settings.startAnimationDuration + 'ms'); _this.outer.addClass('lg-zoom-from-image'); }); setTimeout(function () { currentSlide_1.css('transform', 'translate3d(0, 0, 0)'); }, 100); } setTimeout(function () { _this.$backdrop.addClass('in'); _this.$container.addClass('lg-show-in'); }, 10); setTimeout(function () { if (_this.settings.trapFocus && document.body === _this.settings.container) { _this.trapFocus(); } }, _this.settings.backdropDuration + 50); // lg-visible class resets gallery opacity to 1 if (!_this.zoomFromOrigin || !transform) { setTimeout(function () { _this.outer.addClass('lg-visible'); }, _this.settings.backdropDuration); } // initiate slide function _this.slide(index, false, false, false); _this.LGel.trigger(lGEvents.afterOpen); }); if (document.body === this.settings.container) { $LG('html').addClass('lg-on'); } }; /** * Note - Changing the position of the media on every slide transition creates a flickering effect. * Therefore, The height of the caption is calculated dynamically, only once based on the first slide caption. * if you have dynamic captions for each media, * you can provide an appropriate height for the captions via allowMediaOverlap option */ LightGallery.prototype.getMediaContainerPosition = function () { if (this.settings.allowMediaOverlap) { return { top: 0, bottom: 0, }; } var top = this.$toolbar.get().clientHeight || 0; var subHtml = this.outer.find('.lg-components .lg-sub-html').get(); var captionHeight = this.settings.defaultCaptionHeight || (subHtml && subHtml.clientHeight) || 0; var thumbContainer = this.outer.find('.lg-thumb-outer').get(); var thumbHeight = thumbContainer ? thumbContainer.clientHeight : 0; var bottom = thumbHeight + captionHeight; return { top: top, bottom: bottom, }; }; LightGallery.prototype.setMediaContainerPosition = function (top, bottom) { if (top === void 0) { top = 0; } if (bottom === void 0) { bottom = 0; } this.$content.css('top', top + 'px').css('bottom', bottom + 'px'); }; LightGallery.prototype.hideBars = function () { var _this = this; // Hide controllers if mouse doesn't move for some period setTimeout(function () { _this.outer.removeClass('lg-hide-items'); if (_this.settings.hideBarsDelay > 0) { _this.outer.on('mousemove.lg click.lg touchstart.lg', function () { _this.outer.removeClass('lg-hide-items'); clearTimeout(_this.hideBarTimeout); // Timeout will be cleared on each slide movement also _this.hideBarTimeout = setTimeout(function () { _this.outer.addClass('lg-hide-items'); }, _this.settings.hideBarsDelay); }); _this.outer.trigger('mousemove.lg'); } }, this.settings.showBarsAfter); }; LightGallery.prototype.initPictureFill = function ($img) { if (this.settings.supportLegacyBrowser) { try { picturefill({ elements: [$img.get()], }); } catch (e) { console.warn('lightGallery :- If you want srcset or picture tag to be supported for older browser please include picturefil javascript library in your document.'); } } }; /** * @desc Create image counter * Ex: 1/10 */ LightGallery.prototype.counter = function () { if (this.settings.counter) { var counterHtml = "\n " + (this.index + 1) + " /\n " + this.galleryItems.length + "
";
this.outer.find(this.settings.appendCounterTo).append(counterHtml);
}
};
/**
* @desc add sub-html into the slide
* @param {Number} index - index of the slide
*/
LightGallery.prototype.addHtml = function (index) {
var subHtml;
var subHtmlUrl;
if (this.galleryItems[index].subHtmlUrl) {
subHtmlUrl = this.galleryItems[index].subHtmlUrl;
}
else {
subHtml = this.galleryItems[index].subHtml;
}
if (!subHtmlUrl) {
if (subHtml) {
// get first letter of sub-html
// if first letter starts with . or # get the html form the jQuery object
var fL = subHtml.substring(0, 1);
if (fL === '.' || fL === '#') {
if (this.settings.subHtmlSelectorRelative &&
!this.settings.dynamic) {
subHtml = $LG(this.items)
.eq(index)
.find(subHtml)
.first()
.html();
}
else {
subHtml = $LG(subHtml).first().html();
}
}
}
else {
subHtml = '';
}
}
if (this.settings.appendSubHtmlTo !== '.lg-item') {
if (subHtmlUrl) {
this.outer.find('.lg-sub-html').load(subHtmlUrl);
}
else {
this.outer.find('.lg-sub-html').html(subHtml);
}
}
else {
var currentSlide = $LG(this.getSlideItemId(index));
if (subHtmlUrl) {
currentSlide.load(subHtmlUrl);
}
else {
currentSlide.append("" + subHtml + "
");
}
}
// Add lg-empty-html class if title doesn't exist
if (typeof subHtml !== 'undefined' && subHtml !== null) {
if (subHtml === '') {
this.outer
.find(this.settings.appendSubHtmlTo)
.addClass('lg-empty-html');
}
else {
this.outer
.find(this.settings.appendSubHtmlTo)
.removeClass('lg-empty-html');
}
}
this.LGel.trigger(lGEvents.afterAppendSubHtml, {
index: index,
});
};
/**
* @desc Preload slides
* @param {Number} index - index of the slide
* @todo preload not working for the first slide, Also, should work for the first and last slide as well
*/
LightGallery.prototype.preload = function (index) {
for (var i = 1; i <= this.settings.preload; i++) {
if (i >= this.galleryItems.length - index) {
break;
}
this.loadContent(index + i, false);
}
for (var j = 1; j <= this.settings.preload; j++) {
if (index - j < 0) {
break;
}
this.loadContent(index - j, false);
}
};
LightGallery.prototype.getDummyImgStyles = function (imageSize) {
if (!imageSize)
return '';
return "width:" + imageSize.width + "px;\n margin-left: -" + imageSize.width / 2 + "px;\n margin-top: -" + imageSize.height / 2 + "px;\n height:" + imageSize.height + "px";
};
LightGallery.prototype.getVideoContStyle = function (imageSize) {
if (!imageSize)
return '';
return "width:" + imageSize.width + "px;\n height:" + imageSize.height + "px";
};
LightGallery.prototype.getDummyImageContent = function ($currentSlide, index, alt) {
var $currentItem;
if (!this.settings.dynamic) {
$currentItem = $LG(this.items).eq(index);
}
if ($currentItem) {
var _dummyImgSrc = void 0;
if (!this.settings.exThumbImage) {
_dummyImgSrc = $currentItem.find('img').first().attr('src');
}
else {
_dummyImgSrc = $currentItem.attr(this.settings.exThumbImage);
}
if (!_dummyImgSrc)
return '';
var imgStyle = this.getDummyImgStyles(this.currentImageSize);
var dummyImgContent = "\n
";
this.core.outer.addClass('lg-has-thumb');
if (this.settings.appendThumbnailsTo === '.lg-components') {
this.core.$lgComponents.append(html);
}
else {
this.core.outer.append(html);
}
this.$thumbOuter = this.core.outer.find('.lg-thumb-outer').first();
this.$lgThumb = this.core.outer.find('.lg-thumb').first();
if (this.settings.animateThumb) {
this.core.outer
.find('.lg-thumb')
.css('transition-duration', this.core.settings.speed + 'ms')
.css('width', this.thumbTotalWidth + 'px')
.css('position', 'relative');
}
this.setThumbItemHtml(this.core.galleryItems);
};
Thumbnail.prototype.enableThumbDrag = function () {
var _this = this;
var thumbDragUtils = {
cords: {
startX: 0,
endX: 0,
},
isMoved: false,
newTranslateX: 0,
startTime: new Date(),
endTime: new Date(),
touchMoveTime: 0,
};
var isDragging = false;
this.$thumbOuter.addClass('lg-grab');
this.core.outer
.find('.lg-thumb')
.first()
.on('mousedown.lg.thumb', function (e) {
if (_this.thumbTotalWidth > _this.thumbOuterWidth) {
// execute only on .lg-object
e.preventDefault();
thumbDragUtils.cords.startX = e.pageX;
thumbDragUtils.startTime = new Date();
_this.thumbClickable = false;
isDragging = true;
// ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723
_this.core.outer.get().scrollLeft += 1;
_this.core.outer.get().scrollLeft -= 1;
// *
_this.$thumbOuter
.removeClass('lg-grab')
.addClass('lg-grabbing');
}
});
this.$LG(window).on("mousemove.lg.thumb.global" + this.core.lgId, function (e) {
if (!_this.core.lgOpened)
return;
if (isDragging) {
thumbDragUtils.cords.endX = e.pageX;
thumbDragUtils = _this.onThumbTouchMove(thumbDragUtils);
}
});
this.$LG(window).on("mouseup.lg.thumb.global" + this.core.lgId, function () {
if (!_this.core.lgOpened)
return;
if (thumbDragUtils.isMoved) {
thumbDragUtils = _this.onThumbTouchEnd(thumbDragUtils);
}
else {
_this.thumbClickable = true;
}
if (isDragging) {
isDragging = false;
_this.$thumbOuter.removeClass('lg-grabbing').addClass('lg-grab');
}
});
};
Thumbnail.prototype.enableThumbSwipe = function () {
var _this = this;
var thumbDragUtils = {
cords: {
startX: 0,
endX: 0,
},
isMoved: false,
newTranslateX: 0,
startTime: new Date(),
endTime: new Date(),
touchMoveTime: 0,
};
this.$lgThumb.on('touchstart.lg', function (e) {
if (_this.thumbTotalWidth > _this.thumbOuterWidth) {
e.preventDefault();
thumbDragUtils.cords.startX = e.targetTouches[0].pageX;
_this.thumbClickable = false;
thumbDragUtils.startTime = new Date();
}
});
this.$lgThumb.on('touchmove.lg', function (e) {
if (_this.thumbTotalWidth > _this.thumbOuterWidth) {
e.preventDefault();
thumbDragUtils.cords.endX = e.targetTouches[0].pageX;
thumbDragUtils = _this.onThumbTouchMove(thumbDragUtils);
}
});
this.$lgThumb.on('touchend.lg', function () {
if (thumbDragUtils.isMoved) {
thumbDragUtils = _this.onThumbTouchEnd(thumbDragUtils);
}
else {
_this.thumbClickable = true;
}
});
};
// Rebuild thumbnails
Thumbnail.prototype.rebuildThumbnails = function () {
var _this = this;
// Remove transitions
this.$thumbOuter.addClass('lg-rebuilding-thumbnails');
setTimeout(function () {
_this.thumbTotalWidth =
_this.core.galleryItems.length *
(_this.settings.thumbWidth + _this.settings.thumbMargin);
_this.$lgThumb.css('width', _this.thumbTotalWidth + 'px');
_this.$lgThumb.empty();
_this.setThumbItemHtml(_this.core.galleryItems);
_this.animateThumb(_this.core.index);
}, 50);
setTimeout(function () {
_this.$thumbOuter.removeClass('lg-rebuilding-thumbnails');
}, 200);
};
// @ts-check
Thumbnail.prototype.setTranslate = function (value) {
this.$lgThumb.css('transform', 'translate3d(-' + value + 'px, 0px, 0px)');
};
Thumbnail.prototype.getPossibleTransformX = function (left) {
if (left > this.thumbTotalWidth - this.thumbOuterWidth) {
left = this.thumbTotalWidth - this.thumbOuterWidth;
}
if (left < 0) {
left = 0;
}
return left;
};
Thumbnail.prototype.animateThumb = function (index) {
this.$lgThumb.css('transition-duration', this.core.settings.speed + 'ms');
if (this.settings.animateThumb) {
var position = 0;
switch (this.settings.currentPagerPosition) {
case 'left':
position = 0;
break;
case 'middle':
position =
this.thumbOuterWidth / 2 - this.settings.thumbWidth / 2;
break;
case 'right':
position = this.thumbOuterWidth - this.settings.thumbWidth;
}
this.translateX =
(this.settings.thumbWidth + this.settings.thumbMargin) * index -
1 -
position;
if (this.translateX > this.thumbTotalWidth - this.thumbOuterWidth) {
this.translateX = this.thumbTotalWidth - this.thumbOuterWidth;
}
if (this.translateX < 0) {
this.translateX = 0;
}
this.setTranslate(this.translateX);
}
};
Thumbnail.prototype.onThumbTouchMove = function (thumbDragUtils) {
thumbDragUtils.newTranslateX = this.translateX;
thumbDragUtils.isMoved = true;
thumbDragUtils.touchMoveTime = new Date().valueOf();
thumbDragUtils.newTranslateX -=
thumbDragUtils.cords.endX - thumbDragUtils.cords.startX;
thumbDragUtils.newTranslateX = this.getPossibleTransformX(thumbDragUtils.newTranslateX);
// move current slide
this.setTranslate(thumbDragUtils.newTranslateX);
this.$thumbOuter.addClass('lg-dragging');
return thumbDragUtils;
};
Thumbnail.prototype.onThumbTouchEnd = function (thumbDragUtils) {
thumbDragUtils.isMoved = false;
thumbDragUtils.endTime = new Date();
this.$thumbOuter.removeClass('lg-dragging');
var touchDuration = thumbDragUtils.endTime.valueOf() -
thumbDragUtils.startTime.valueOf();
var distanceXnew = thumbDragUtils.cords.endX - thumbDragUtils.cords.startX;
var speedX = Math.abs(distanceXnew) / touchDuration;
// Some magical numbers
// Can be improved
if (speedX > 0.15 &&
thumbDragUtils.endTime.valueOf() - thumbDragUtils.touchMoveTime < 30) {
speedX += 1;
if (speedX > 2) {
speedX += 1;
}
speedX =
speedX +
speedX * (Math.abs(distanceXnew) / this.thumbOuterWidth);
this.$lgThumb.css('transition-duration', Math.min(speedX - 1, 2) + 'settings');
distanceXnew = distanceXnew * speedX;
this.translateX = this.getPossibleTransformX(this.translateX - distanceXnew);
this.setTranslate(this.translateX);
}
else {
this.translateX = thumbDragUtils.newTranslateX;
}
if (Math.abs(thumbDragUtils.cords.endX - thumbDragUtils.cords.startX) <
this.settings.thumbnailSwipeThreshold) {
this.thumbClickable = true;
}
return thumbDragUtils;
};
Thumbnail.prototype.getThumbHtml = function (thumb, index) {
var slideVideoInfo = this.core.galleryItems[index].__slideVideoInfo || {};
var thumbImg;
if (slideVideoInfo.youtube) {
if (this.settings.loadYouTubeThumbnail) {
thumbImg =
'//img.youtube.com/vi/' +
slideVideoInfo.youtube[1] +
'/' +
this.settings.youTubeThumbSize +
'.jpg';
}
else {
thumbImg = thumb;
}
}
else {
thumbImg = thumb;
}
return "\n
\n \n \n
";
};
Thumbnail.prototype.getThumbItemHtml = function (items) {
var thumbList = '';
for (var i = 0; i < items.length; i++) {
thumbList += this.getThumbHtml(items[i].thumb, i);
}
return thumbList;
};
Thumbnail.prototype.setThumbItemHtml = function (items) {
var thumbList = this.getThumbItemHtml(items);
this.$lgThumb.html(thumbList);
};
Thumbnail.prototype.setAnimateThumbStyles = function () {
if (this.settings.animateThumb) {
this.core.outer.addClass('lg-animate-thumb');
}
};
// Manage thumbnail active calss
Thumbnail.prototype.manageActiveClassOnSlideChange = function () {
var _this = this;
// manage active class for thumbnail
this.core.LGel.on(lg_thumbnail_es5_lGEvents.beforeSlide + ".thumb", function (event) {
var $thumb = _this.core.outer.find('.lg-thumb-item');
var index = event.detail.index;
$thumb.removeClass('active');
$thumb.eq(index).addClass('active');
});
};
// Toggle thumbnail bar
Thumbnail.prototype.toggleThumbBar = function () {
var _this = this;
if (this.settings.toggleThumb) {
this.core.outer.addClass('lg-can-toggle');
this.core.$toolbar.append('');
this.core.outer
.find('.lg-toggle-thumb')
.first()
.on('click.lg', function () {
_this.core.outer.toggleClass('lg-components-open');
});
}
};
Thumbnail.prototype.thumbKeyPress = function () {
var _this = this;
this.$LG(window).on("keydown.lg.thumb.global" + this.core.lgId, function (e) {
if (!_this.core.lgOpened || !_this.settings.toggleThumb)
return;
if (e.keyCode === 38) {
e.preventDefault();
_this.core.outer.addClass('lg-components-open');
}
else if (e.keyCode === 40) {
e.preventDefault();
_this.core.outer.removeClass('lg-components-open');
}
});
};
Thumbnail.prototype.destroy = function () {
if (this.settings.thumbnail) {
this.$LG(window).off(".lg.thumb.global" + this.core.lgId);
this.core.LGel.off('.lg.thumb');
this.core.LGel.off('.thumb');
this.$thumbOuter.remove();
this.core.outer.removeClass('lg-has-thumb');
}
};
return Thumbnail;
}());
/* harmony default export */ var lg_thumbnail_es5 = (Thumbnail);
//# sourceMappingURL=lg-thumbnail.es5.js.map
// CONCATENATED MODULE: ./node_modules/lightgallery/plugins/video/lg-video.es5.js
/*!
* lightgallery | 2.7.1 | January 11th 2023
* http://www.lightgalleryjs.com/
* Copyright (c) 2020 Sachin Neravath;
* @license GPLv3
*/
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
var lg_video_es5_assign = function() {
lg_video_es5_assign = Object.assign || function __assign(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
}
return t;
};
return lg_video_es5_assign.apply(this, arguments);
};
var videoSettings = {
autoplayFirstVideo: true,
youTubePlayerParams: false,
vimeoPlayerParams: false,
wistiaPlayerParams: false,
gotoNextSlideOnVideoEnd: true,
autoplayVideoOnSlide: false,
videojs: false,
videojsTheme: '',
videojsOptions: {},
};
/**
* List of lightGallery events
* All events should be documented here
* Below interfaces are used to build the website documentations
* */
var lg_video_es5_lGEvents = {
afterAppendSlide: 'lgAfterAppendSlide',
init: 'lgInit',
hasVideo: 'lgHasVideo',
containerResize: 'lgContainerResize',
updateSlides: 'lgUpdateSlides',
afterAppendSubHtml: 'lgAfterAppendSubHtml',
beforeOpen: 'lgBeforeOpen',
afterOpen: 'lgAfterOpen',
slideItemLoad: 'lgSlideItemLoad',
beforeSlide: 'lgBeforeSlide',
afterSlide: 'lgAfterSlide',
posterClick: 'lgPosterClick',
dragStart: 'lgDragStart',
dragMove: 'lgDragMove',
dragEnd: 'lgDragEnd',
beforeNextSlide: 'lgBeforeNextSlide',
beforePrevSlide: 'lgBeforePrevSlide',
beforeClose: 'lgBeforeClose',
afterClose: 'lgAfterClose',
rotateLeft: 'lgRotateLeft',
rotateRight: 'lgRotateRight',
flipHorizontal: 'lgFlipHorizontal',
flipVertical: 'lgFlipVertical',
autoplay: 'lgAutoplay',
autoplayStart: 'lgAutoplayStart',
autoplayStop: 'lgAutoplayStop',
};
var param = function (obj) {
return Object.keys(obj)
.map(function (k) {
return encodeURIComponent(k) + '=' + encodeURIComponent(obj[k]);
})
.join('&');
};
var paramsToObject = function (url) {
var paramas = url
.slice(1)
.split('&')
.map(function (p) { return p.split('='); })
.reduce(function (obj, pair) {
var _a = pair.map(decodeURIComponent), key = _a[0], value = _a[1];
obj[key] = value;
return obj;
}, {});
return paramas;
};
var getYouTubeParams = function (videoInfo, youTubePlayerParamsSettings) {
if (!videoInfo.youtube)
return '';
var slideUrlParams = videoInfo.youtube[2]
? paramsToObject(videoInfo.youtube[2])
: '';
// For youtube first params gets priority if duplicates found
var defaultYouTubePlayerParams = {
wmode: 'opaque',
autoplay: 0,
mute: 1,
enablejsapi: 1,
};
var playerParamsSettings = youTubePlayerParamsSettings || {};
var youTubePlayerParams = lg_video_es5_assign(lg_video_es5_assign(lg_video_es5_assign({}, defaultYouTubePlayerParams), playerParamsSettings), slideUrlParams);
var youTubeParams = "?" + param(youTubePlayerParams);
return youTubeParams;
};
var isYouTubeNoCookie = function (url) {
return url.includes('youtube-nocookie.com');
};
var getVimeoURLParams = function (defaultParams, videoInfo) {
if (!videoInfo || !videoInfo.vimeo)
return '';
var urlParams = videoInfo.vimeo[2] || '';
var defaultPlayerParams = defaultParams && Object.keys(defaultParams).length !== 0
? '&' + param(defaultParams)
: '';
// Support private video
var urlWithHash = videoInfo.vimeo[0].split('/').pop() || '';
var urlWithHashWithParams = urlWithHash.split('?')[0] || '';
var hash = urlWithHashWithParams.split('#')[0];
var isPrivate = videoInfo.vimeo[1] !== hash;
if (isPrivate) {
urlParams = urlParams.replace("/" + hash, '');
}
urlParams =
urlParams[0] == '?' ? '&' + urlParams.slice(1) : urlParams || '';
// For vimeo last params gets priority if duplicates found
var vimeoPlayerParams = "?autoplay=0&muted=1" + (isPrivate ? "&h=" + hash : '') + defaultPlayerParams + urlParams;
return vimeoPlayerParams;
};
/**
* Video module for lightGallery
* Supports HTML5, YouTube, Vimeo, wistia videos
*
*
* @ref Wistia
* https://wistia.com/support/integrations/wordpress(How to get url)
* https://wistia.com/support/developers/embed-options#using-embed-options
* https://wistia.com/support/developers/player-api
* https://wistia.com/support/developers/construct-an-embed-code
* http://jsfiddle.net/xvnm7xLm/
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
* https://wistia.com/support/embed-and-share/sharing-videos
* https://private-sharing.wistia.com/medias/mwhrulrucj
*
* @ref Youtube
* https://developers.google.com/youtube/player_parameters#enablejsapi
* https://developers.google.com/youtube/iframe_api_reference
* https://developer.chrome.com/blog/autoplay/#iframe-delegation
*
* @ref Vimeo
* https://stackoverflow.com/questions/10488943/easy-way-to-get-vimeo-id-from-a-vimeo-url
* https://vimeo.zendesk.com/hc/en-us/articles/360000121668-Starting-playback-at-a-specific-timecode
* https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters
*/
var Video = /** @class */ (function () {
function Video(instance) {
// get lightGallery core plugin instance
this.core = instance;
this.settings = lg_video_es5_assign(lg_video_es5_assign({}, videoSettings), this.core.settings);
return this;
}
Video.prototype.init = function () {
var _this = this;
/**
* Event triggered when video url found without poster
* Append video HTML
* Play if autoplayFirstVideo is true
*/
this.core.LGel.on(lg_video_es5_lGEvents.hasVideo + ".video", this.onHasVideo.bind(this));
this.core.LGel.on(lg_video_es5_lGEvents.posterClick + ".video", function () {
var $el = _this.core.getSlideItem(_this.core.index);
_this.loadVideoOnPosterClick($el);
});
this.core.LGel.on(lg_video_es5_lGEvents.slideItemLoad + ".video", this.onSlideItemLoad.bind(this));
// @desc fired immediately before each slide transition.
this.core.LGel.on(lg_video_es5_lGEvents.beforeSlide + ".video", this.onBeforeSlide.bind(this));
// @desc fired immediately after each slide transition.
this.core.LGel.on(lg_video_es5_lGEvents.afterSlide + ".video", this.onAfterSlide.bind(this));
};
/**
* @desc Event triggered when a slide is completely loaded
*
* @param {Event} event - lightGalley custom event
*/
Video.prototype.onSlideItemLoad = function (event) {
var _this = this;
var _a = event.detail, isFirstSlide = _a.isFirstSlide, index = _a.index;
// Should check the active slide as well as user may have moved to different slide before the first slide is loaded
if (this.settings.autoplayFirstVideo &&
isFirstSlide &&
index === this.core.index) {
// Delay is just for the transition effect on video load
setTimeout(function () {
_this.loadAndPlayVideo(index);
}, 200);
}
// Should not call on first slide. should check only if the slide is active
if (!isFirstSlide &&
this.settings.autoplayVideoOnSlide &&
index === this.core.index) {
this.loadAndPlayVideo(index);
}
};
/**
* @desc Event triggered when video url or poster found
* Append video HTML is poster is not given
* Play if autoplayFirstVideo is true
*
* @param {Event} event - Javascript Event object.
*/
Video.prototype.onHasVideo = function (event) {
var _a = event.detail, index = _a.index, src = _a.src, html5Video = _a.html5Video, hasPoster = _a.hasPoster;
if (!hasPoster) {
// All functions are called separately if poster exist in loadVideoOnPosterClick function
this.appendVideos(this.core.getSlideItem(index), {
src: src,
addClass: 'lg-object',
index: index,
html5Video: html5Video,
});
// Automatically navigate to next slide once video reaches the end.
this.gotoNextSlideOnVideoEnd(src, index);
}
};
/**
* @desc fired immediately before each slide transition.
* Pause the previous video
* Hide the download button if the slide contains YouTube, Vimeo, or Wistia videos.
*
* @param {Event} event - Javascript Event object.
* @param {number} prevIndex - Previous index of the slide.
* @param {number} index - Current index of the slide
*/
Video.prototype.onBeforeSlide = function (event) {
if (this.core.lGalleryOn) {
var prevIndex = event.detail.prevIndex;
this.pauseVideo(prevIndex);
}
};
/**
* @desc fired immediately after each slide transition.
* Play video if autoplayVideoOnSlide option is enabled.
*
* @param {Event} event - Javascript Event object.
* @param {number} prevIndex - Previous index of the slide.
* @param {number} index - Current index of the slide
* @todo should check on onSlideLoad as well if video is not loaded on after slide
*/
Video.prototype.onAfterSlide = function (event) {
var _this = this;
var _a = event.detail, index = _a.index, prevIndex = _a.prevIndex;
// Do not call on first slide
var $slide = this.core.getSlideItem(index);
if (this.settings.autoplayVideoOnSlide && index !== prevIndex) {
if ($slide.hasClass('lg-complete')) {
setTimeout(function () {
_this.loadAndPlayVideo(index);
}, 100);
}
}
};
Video.prototype.loadAndPlayVideo = function (index) {
var $slide = this.core.getSlideItem(index);
var currentGalleryItem = this.core.galleryItems[index];
if (currentGalleryItem.poster) {
this.loadVideoOnPosterClick($slide, true);
}
else {
this.playVideo(index);
}
};
/**
* Play HTML5, Youtube, Vimeo or Wistia videos in a particular slide.
* @param {number} index - Index of the slide
*/
Video.prototype.playVideo = function (index) {
this.controlVideo(index, 'play');
};
/**
* Pause HTML5, Youtube, Vimeo or Wistia videos in a particular slide.
* @param {number} index - Index of the slide
*/
Video.prototype.pauseVideo = function (index) {
this.controlVideo(index, 'pause');
};
Video.prototype.getVideoHtml = function (src, addClass, index, html5Video) {
var video = '';
var videoInfo = this.core.galleryItems[index]
.__slideVideoInfo || {};
var currentGalleryItem = this.core.galleryItems[index];
var videoTitle = currentGalleryItem.title || currentGalleryItem.alt;
videoTitle = videoTitle ? 'title="' + videoTitle + '"' : '';
var commonIframeProps = "allowtransparency=\"true\"\n frameborder=\"0\"\n scrolling=\"no\"\n allowfullscreen\n mozallowfullscreen\n webkitallowfullscreen\n oallowfullscreen\n msallowfullscreen";
if (videoInfo.youtube) {
var videoId = 'lg-youtube' + index;
var youTubeParams = getYouTubeParams(videoInfo, this.settings.youTubePlayerParams);
var isYouTubeNoCookieURL = isYouTubeNoCookie(src);
var youtubeURL = isYouTubeNoCookieURL
? '//www.youtube-nocookie.com/'
: '//www.youtube.com/';
video = "";
}
else if (videoInfo.vimeo) {
var videoId = 'lg-vimeo' + index;
var playerParams = getVimeoURLParams(this.settings.vimeoPlayerParams, videoInfo);
video = "";
}
else if (videoInfo.wistia) {
var wistiaId = 'lg-wistia' + index;
var playerParams = param(this.settings.wistiaPlayerParams);
playerParams = playerParams ? '?' + playerParams : '';
video = "";
}
else if (videoInfo.html5) {
var html5VideoMarkup = '';
for (var i = 0; i < html5Video.source.length; i++) {
html5VideoMarkup += "