' + '
';\n }\n\n if (this.s.appendSubHtmlTo === '.lg-sub-html') {\n subHtmlCont = '';\n }\n\n template = '' + this.s.prevHtml + '
' + '' + this.s.nextHtml + '
' + '' + '
';\n\n document.body.insertAdjacentHTML('beforeend', template);\n this.outer = document.querySelector('.lg-outer');\n this.___slide = this.outer.querySelectorAll('.lg-item');\n\n if (this.s.useLeft) {\n _lgUtils2.default.addClass(this.outer, 'lg-use-left');\n\n // Set mode lg-slide if use left is true;\n this.s.mode = 'lg-slide';\n } else {\n _lgUtils2.default.addClass(this.outer, 'lg-use-css3');\n }\n\n // For fixed height gallery\n _this.setTop();\n _lgUtils2.default.on(window, 'resize.lg orientationchange.lg', function () {\n setTimeout(function () {\n _this.setTop();\n }, 100);\n });\n\n // add class lg-current to remove initial transition\n _lgUtils2.default.addClass(this.___slide[this.index], 'lg-current');\n\n // add Class for css support and transition mode\n if (this.doCss()) {\n _lgUtils2.default.addClass(this.outer, 'lg-css3');\n } else {\n _lgUtils2.default.addClass(this.outer, 'lg-css');\n\n // Set speed 0 because no animation will happen if browser doesn't support css3\n this.s.speed = 0;\n }\n\n _lgUtils2.default.addClass(this.outer, this.s.mode);\n\n if (this.s.enableDrag && this.items.length > 1) {\n _lgUtils2.default.addClass(this.outer, 'lg-grab');\n }\n\n if (this.s.showAfterLoad) {\n _lgUtils2.default.addClass(this.outer, 'lg-show-after-load');\n }\n\n if (this.doCss()) {\n var inner = this.outer.querySelector('.lg-inner');\n _lgUtils2.default.setVendor(inner, 'TransitionTimingFunction', this.s.cssEasing);\n _lgUtils2.default.setVendor(inner, 'TransitionDuration', this.s.speed + 'ms');\n }\n\n setTimeout(function () {\n _lgUtils2.default.addClass(document.querySelector('.lg-backdrop'), 'in');\n });\n\n setTimeout(function () {\n _lgUtils2.default.addClass(_this.outer, 'lg-visible');\n }, this.s.backdropDuration);\n\n if (this.s.download) {\n this.outer.querySelector('.lg-toolbar').insertAdjacentHTML('beforeend', '');\n }\n\n // Store the current scroll top value to scroll back after closing the gallery..\n this.prevScrollTop = document.documentElement.scrollTop || document.body.scrollTop;\n };\n\n // For fixed height gallery\n Plugin.prototype.setTop = function () {\n if (this.s.height !== '100%') {\n var wH = window.innerHeight;\n var top = (wH - parseInt(this.s.height, 10)) / 2;\n var lGallery = this.outer.querySelector('.lg');\n if (wH >= parseInt(this.s.height, 10)) {\n lGallery.style.top = top + 'px';\n } else {\n lGallery.style.top = '0px';\n }\n }\n };\n\n // Find css3 support\n Plugin.prototype.doCss = function () {\n // check for css animation support\n var support = function support() {\n var transition = ['transition', 'MozTransition', 'WebkitTransition', 'OTransition', 'msTransition', 'KhtmlTransition'];\n var root = document.documentElement;\n var i = 0;\n for (i = 0; i < transition.length; i++) {\n if (transition[i] in root.style) {\n return true;\n }\n }\n };\n\n if (support()) {\n return true;\n }\n\n return false;\n };\n\n /**\n * @desc Check the given src is video\n * @param {String} src\n * @return {Object} video type\n * Ex:{ youtube : [\"//www.youtube.com/watch?v=c0asJgSyxcY\", \"c0asJgSyxcY\"] }\n */\n Plugin.prototype.isVideo = function (src, index) {\n\n var html;\n if (this.s.dynamic) {\n html = this.s.dynamicEl[index].html;\n } else {\n html = this.items[index].getAttribute('data-html');\n }\n\n if (!src && html) {\n return {\n html5: true\n };\n }\n\n var youtube = src.match(/\\/\\/(?:www\\.)?youtu(?:\\.be|be\\.com|be-nocookie\\.com)\\/(?:watch\\?v=|embed\\/)?([a-z0-9\\-\\_\\%]+)/i);\n var vimeo = src.match(/\\/\\/(?:www\\.)?vimeo.com\\/([0-9a-z\\-_]+)/i);\n var dailymotion = src.match(/\\/\\/(?:www\\.)?dai.ly\\/([0-9a-z\\-_]+)/i);\n var vk = src.match(/\\/\\/(?:www\\.)?(?:vk\\.com|vkontakte\\.ru)\\/(?:video_ext\\.php\\?)(.*)/i);\n\n if (youtube) {\n return {\n youtube: youtube\n };\n } else if (vimeo) {\n return {\n vimeo: vimeo\n };\n } else if (dailymotion) {\n return {\n dailymotion: dailymotion\n };\n } else if (vk) {\n return {\n vk: vk\n };\n }\n };\n\n /**\n * @desc Create image counter\n * Ex: 1/10\n */\n Plugin.prototype.counter = function () {\n if (this.s.counter) {\n this.outer.querySelector(this.s.appendCounterTo).insertAdjacentHTML('beforeend', '' + '
' + '' + list + '
' + '' + controls + subHtmlCont + '' + (parseInt(this.index, 10) + 1) + ' / ' + this.items.length + '
');\n }\n };\n\n /**\n * @desc add sub-html into the slide\n * @param {Number} index - index of the slide\n */\n Plugin.prototype.addHtml = function (index) {\n var subHtml = null;\n var currentEle;\n if (this.s.dynamic) {\n subHtml = this.s.dynamicEl[index].subHtml;\n } else {\n currentEle = this.items[index];\n subHtml = currentEle.getAttribute('data-sub-html');\n if (this.s.getCaptionFromTitleOrAlt && !subHtml) {\n subHtml = currentEle.getAttribute('title');\n if (subHtml && currentEle.querySelector('img')) {\n subHtml = currentEle.querySelector('img').getAttribute('alt');\n }\n }\n }\n\n if (typeof subHtml !== 'undefined' && subHtml !== null) {\n\n // get first letter of subhtml\n // if first letter starts with . or # get the html form the jQuery object\n var fL = subHtml.substring(0, 1);\n if (fL === '.' || fL === '#') {\n if (this.s.subHtmlSelectorRelative && !this.s.dynamic) {\n subHtml = currentEle.querySelector(subHtml).innerHTML;\n } else {\n subHtml = document.querySelector(subHtml).innerHTML;\n }\n }\n } else {\n subHtml = '';\n }\n\n if (this.s.appendSubHtmlTo === '.lg-sub-html') {\n this.outer.querySelector(this.s.appendSubHtmlTo).innerHTML = subHtml;\n } else {\n this.___slide[index].insertAdjacentHTML('beforeend', subHtml);\n }\n\n // Add lg-empty-html class if title doesn't exist\n if (typeof subHtml !== 'undefined' && subHtml !== null) {\n if (subHtml === '') {\n _lgUtils2.default.addClass(this.outer.querySelector(this.s.appendSubHtmlTo), 'lg-empty-html');\n } else {\n _lgUtils2.default.removeClass(this.outer.querySelector(this.s.appendSubHtmlTo), 'lg-empty-html');\n }\n }\n\n _lgUtils2.default.trigger(this.el, 'onAfterAppendSubHtml', {\n index: index\n });\n };\n\n /**\n * @desc Preload slides\n * @param {Number} index - index of the slide\n */\n Plugin.prototype.preload = function (index) {\n var i = 1;\n var j = 1;\n for (i = 1; i <= this.s.preload; i++) {\n if (i >= this.items.length - index) {\n break;\n }\n\n this.loadContent(index + i, false, 0);\n }\n\n for (j = 1; j <= this.s.preload; j++) {\n if (index - j < 0) {\n break;\n }\n\n this.loadContent(index - j, false, 0);\n }\n };\n\n /**\n * @desc Load slide content into slide.\n * @param {Number} index - index of the slide.\n * @param {Boolean} rec - if true call loadcontent() function again.\n * @param {Boolean} delay - delay for adding complete class. it is 0 except first time.\n */\n Plugin.prototype.loadContent = function (index, rec, delay) {\n\n var _this = this;\n var _hasPoster = false;\n var _img;\n var _src;\n var _poster;\n var _srcset;\n var _sizes;\n var _html;\n var getResponsiveSrc = function getResponsiveSrc(srcItms) {\n var rsWidth = [];\n var rsSrc = [];\n for (var i = 0; i < srcItms.length; i++) {\n var __src = srcItms[i].split(' ');\n\n // Manage empty space\n if (__src[0] === '') {\n __src.splice(0, 1);\n }\n\n rsSrc.push(__src[0]);\n rsWidth.push(__src[1]);\n }\n\n var wWidth = window.innerWidth;\n for (var j = 0; j < rsWidth.length; j++) {\n if (parseInt(rsWidth[j], 10) > wWidth) {\n _src = rsSrc[j];\n break;\n }\n }\n };\n\n if (_this.s.dynamic) {\n\n if (_this.s.dynamicEl[index].poster) {\n _hasPoster = true;\n _poster = _this.s.dynamicEl[index].poster;\n }\n\n _html = _this.s.dynamicEl[index].html;\n _src = _this.s.dynamicEl[index].src;\n\n if (_this.s.dynamicEl[index].responsive) {\n var srcDyItms = _this.s.dynamicEl[index].responsive.split(',');\n getResponsiveSrc(srcDyItms);\n }\n\n _srcset = _this.s.dynamicEl[index].srcset;\n _sizes = _this.s.dynamicEl[index].sizes;\n } else {\n\n if (_this.items[index].getAttribute('data-poster')) {\n _hasPoster = true;\n _poster = _this.items[index].getAttribute('data-poster');\n }\n\n _html = _this.items[index].getAttribute('data-html');\n _src = _this.items[index].getAttribute('href') || _this.items[index].getAttribute('data-src');\n\n if (_this.items[index].getAttribute('data-responsive')) {\n var srcItms = _this.items[index].getAttribute('data-responsive').split(',');\n getResponsiveSrc(srcItms);\n }\n\n _srcset = _this.items[index].getAttribute('data-srcset');\n _sizes = _this.items[index].getAttribute('data-sizes');\n }\n\n //if (_src || _srcset || _sizes || _poster) {\n\n var iframe = false;\n if (_this.s.dynamic) {\n if (_this.s.dynamicEl[index].iframe) {\n iframe = true;\n }\n } else {\n if (_this.items[index].getAttribute('data-iframe') === 'true') {\n iframe = true;\n }\n }\n\n var _isVideo = _this.isVideo(_src, index);\n if (!_lgUtils2.default.hasClass(_this.___slide[index], 'lg-loaded')) {\n if (iframe) {\n _this.___slide[index].insertAdjacentHTML('afterbegin', '');\n } else if (_hasPoster) {\n var videoClass = '';\n if (_isVideo && _isVideo.youtube) {\n videoClass = 'lg-has-youtube';\n } else if (_isVideo && _isVideo.vimeo) {\n videoClass = 'lg-has-vimeo';\n } else {\n videoClass = 'lg-has-html5';\n }\n\n _this.___slide[index].insertAdjacentHTML('beforeend', '
');\n _lgUtils2.default.trigger(_this.el, 'hasVideo', {\n index: index,\n src: _src,\n html: _html\n });\n } else {\n _this.___slide[index].insertAdjacentHTML('beforeend', '
' + '
';\n\n switch (this.core.s.vimeoThumbSize) {\n case 'thumbnail_large':\n vimeoErrorThumbSize = '640';\n break;\n case 'thumbnail_medium':\n vimeoErrorThumbSize = '200x150';\n break;\n case 'thumbnail_small':\n vimeoErrorThumbSize = '100x75';\n }\n\n utils.addClass(_this.core.outer, 'lg-has-thumb');\n\n _this.core.outer.querySelector('.lg').insertAdjacentHTML('beforeend', html);\n\n _this.thumbOuter = _this.core.outer.querySelector('.lg-thumb-outer');\n _this.thumbOuterWidth = _this.thumbOuter.offsetWidth;\n\n if (_this.core.s.animateThumb) {\n _this.core.outer.querySelector('.lg-thumb').style.width = _this.thumbTotalWidth + 'px';\n _this.core.outer.querySelector('.lg-thumb').style.position = 'relative';\n }\n\n if (this.core.s.animateThumb) {\n _this.thumbOuter.style.height = _this.core.s.thumbContHeight + 'px';\n }\n\n function getThumb(src, thumb, index) {\n var isVideo = _this.core.isVideo(src, index) || {};\n var thumbImg;\n var vimeoId = '';\n\n if (isVideo.youtube || isVideo.vimeo || isVideo.dailymotion) {\n if (isVideo.youtube) {\n if (_this.core.s.loadYoutubeThumbnail) {\n thumbImg = '//img.youtube.com/vi/' + isVideo.youtube[1] + '/' + _this.core.s.youtubeThumbSize + '.jpg';\n } else {\n thumbImg = thumb;\n }\n } else if (isVideo.vimeo) {\n if (_this.core.s.loadVimeoThumbnail) {\n thumbImg = '//i.vimeocdn.com/video/error_' + vimeoErrorThumbSize + '.jpg';\n vimeoId = isVideo.vimeo[1];\n } else {\n thumbImg = thumb;\n }\n } else if (isVideo.dailymotion) {\n if (_this.core.s.loadDailymotionThumbnail) {\n thumbImg = '//www.dailymotion.com/thumbnail/video/' + isVideo.dailymotion[1];\n } else {\n thumbImg = thumb;\n }\n }\n } else {\n thumbImg = thumb;\n }\n\n thumbList += '' + '
' + '\r\n
`;\r\n const container = document.createElement('div');\r\n container.classList.add('c-productgrid__item');\r\n container.dataset.productId = item;\r\n container.dataset.productFavoritesListItem = '';\r\n container.innerHTML = htmlString.trim();\r\n\r\n grid.appendChild(container);\r\n });\r\n new SvgIcon().init();\r\n }\r\n\r\n // shows the favorite toggles in the product list items or on detail page\r\n async renderFavoriteToggles() {\r\n const { toggleModuleList } = this.config;\r\n\r\n toggleModuleList().forEach(_element => {\r\n const element = _element;\r\n const { initialized } = element.dataset;\r\n if (initialized != null && initialized) return;\r\n\r\n element.dataset.initialized = true;\r\n\r\n this.initialStatus(element);\r\n element.classList.remove('hidden');\r\n this.handleClick(element);\r\n });\r\n }\r\n\r\n // checks if element is inside favoriteListArray, then set as active item\r\n initialStatus(_element) {\r\n const element = _element;\r\n const checkbox = element.querySelector('input[type=\"checkbox\"]');\r\n const { favoriteListArray } = this.config;\r\n\r\n if (!checkbox && checkbox.value) {\r\n return;\r\n }\r\n\r\n const productItemcode = checkbox.value;\r\n if (favoriteListArray.includes(productItemcode)) {\r\n checkbox.checked = true;\r\n }\r\n }\r\n\r\n // handle the onclick of the favorite toggle\r\n handleClick(_element) {\r\n const element = _element;\r\n const checkbox = element.querySelector('input[type=\"checkbox\"]');\r\n\r\n if (!checkbox && checkbox.value) {\r\n return;\r\n }\r\n\r\n checkbox.addEventListener('change', () => {\r\n const productItemcode = checkbox.value;\r\n if (checkbox.checked) {\r\n this.addFavorite(productItemcode, element);\r\n } else {\r\n this.removeFavorite(productItemcode, element);\r\n if (checkbox.dataset.parentId) {\r\n this.removeFavorite(checkbox.dataset.parentId, element, true);\r\n }\r\n }\r\n\r\n // trigger favorite amount to display new value\r\n this.renderFavoriteAmount();\r\n });\r\n }\r\n\r\n init() {\r\n const { token } = this.config;\r\n\r\n const initialSetup = () => {\r\n // if my account favorite module is present, render the product list\r\n this.renderFavoriteProductList();\r\n\r\n // if any product favorite toggle module is present, render render the handler\r\n this.renderFavoriteToggles();\r\n\r\n // counts favorite list and display amount in navbar\r\n this.renderFavoriteAmount();\r\n };\r\n\r\n // check if user is logged in\r\n if (token) {\r\n this.getFavorites()\r\n .then(data => {\r\n if (data != null) {\r\n // sets global value to create or update a user preference row in the database\r\n this.config.hasPreferenceObject = true;\r\n }\r\n let mergedList = data || [];\r\n\r\n if (!window.isImpersonating) {\r\n // merge cookie data and database data\r\n mergedList = data ? utils.mergeArrays(data, getFavoriteCookie()) : getFavoriteCookie();\r\n\r\n // if cookie data and database data are not identical, then update the database with the merged data\r\n if (data != null && data.length !== getFavoriteCookie().length) {\r\n this.updateFavoritesList(mergedList);\r\n }\r\n\r\n // update cookie\r\n setFavoriteCookie(mergedList);\r\n }\r\n\r\n // set merged arrays as globaly variable\r\n this.config.favoriteListArray = mergedList;\r\n\r\n // trigger all initial functions\r\n initialSetup();\r\n })\r\n .catch(e => {\r\n console.error(e);\r\n });\r\n } else {\r\n // get array from cookie and set as globaly variable\r\n this.config.favoriteListArray = getFavoriteCookie();\r\n\r\n // trigger all initial functions\r\n initialSetup();\r\n }\r\n }\r\n}\r\n\r\nexport default ProductFavorite;\r\n","class ResultPagination {\r\n constructor(options = {}) {\r\n this.config = {\r\n moduleList: document.querySelectorAll('[data-module=\"ResultPagination\"]'),\r\n ...options\r\n };\r\n }\r\n\r\n static addSeparator(current, page, offset) {\r\n const separator = `...`;\r\n return Math.abs(page - current) > offset ? separator : null;\r\n }\r\n\r\n static generatePaginationArray(pages, current) {\r\n const maxNumberOfElements = 5;\r\n const firstPage = 1;\r\n const lastPage = pages;\r\n const offset = Math.ceil(maxNumberOfElements / 2);\r\n const offsetLeft = [...Array(offset).keys()]\r\n .map(\r\n value =>\r\n Math.abs(value - current) <= firstPage || Math.abs(value - current) === current\r\n ? null\r\n : Math.abs(value - current)\r\n )\r\n .reverse();\r\n const offsetRight = [...Array(offset).keys()].map(\r\n value => (current + value >= lastPage || current + value === current ? null : current + value)\r\n );\r\n\r\n const array = [\r\n firstPage,\r\n ResultPagination.addSeparator(current, firstPage, offset),\r\n ...offsetLeft,\r\n current !== firstPage && current !== lastPage ? current : null,\r\n ...offsetRight,\r\n ResultPagination.addSeparator(current, lastPage, offset),\r\n lastPage\r\n ];\r\n\r\n return array.filter(item => item !== null).map(item => ({\r\n value: item,\r\n isSelected: item === current\r\n }));\r\n }\r\n\r\n static paginationArray(data) {\r\n const { total, perPage, current = 1 } = data;\r\n const pages = Math.ceil(total / perPage);\r\n\r\n if (Number.isNaN(total)) throw new Error('Total param should be number');\r\n if (Number.isNaN(perPage)) throw new Error('perPage param should be number');\r\n\r\n const array = ResultPagination.generatePaginationArray(pages, current);\r\n\r\n return array;\r\n }\r\n\r\n static generateElements(array, prevText, nextText) {\r\n const urlParams = new URLSearchParams(window.location.search);\r\n const currentPage = urlParams.get('page') ? Number(urlParams.get('page')) : 1;\r\n\r\n const items = array.map(item => {\r\n const newUrlParams = urlParams;\r\n newUrlParams.set('page', item.value);\r\n const url = `?${newUrlParams.toString()}`;\r\n const isActive = item.value === currentPage;\r\n if (Number.isInteger(item.value)) {\r\n return `\r\n ${itemCodeText}: ${item}
${itemRemovedText}\r\n
\r\n ${itemRemovedText}\r\n
\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n \r\n
\r\n\r\n - ${items.join('')}