');\n }\n OneTrust.UpdateConsent(\"Category\",\"C0003:1\"); \n }\n });\n }\n\n _getDomElements() {\n return {\n $updateConsent: this._$rootElement.find(config.selectors.updateConsent),\n $openCenter: $(config.selectors.openCenter),\n };\n }\n}\n\nmoduleRegistry.registerModule('OneTrustOverlay', OneTrustOverlay);\nmoduleRegistry.autoApplyModule('OneTrustOverlay', config.selectors.root);","import moduleRegistry from '../module-registry/module-registry';\r\n\r\nconst config = {\r\n selectors: {\r\n root: '.overlay-footer',\r\n shareCta: '.overlay-footer__share',\r\n tooltip: '.overlay-footer__tooltip',\r\n },\r\n classNames: {\r\n overlayTooltipVisible: 'overlay-footer__tooltip--visible',\r\n },\r\n};\r\n\r\nexport class OverlayFooter {\r\n constructor($rootElement) {\r\n this._$rootElement = $rootElement;\r\n this._elements = null;\r\n }\r\n\r\n init() {\r\n this._elements = this._getDomElements();\r\n this._addEventListeners();\r\n }\r\n\r\n _getDomElements() {\r\n return {\r\n $shareCta: this._$rootElement.find(config.selectors.shareCta),\r\n $tooltip: this._$rootElement.find(config.selectors.tooltip),\r\n };\r\n }\r\n\r\n _addEventListeners() {\r\n const _this = this;\r\n\r\n this._elements.$shareCta.on('click', () => {\r\n window.navigator.clipboard.writeText(this._elements.$shareCta[0].attributes.data.value);\r\n const $tooltip = $(_this._elements.$tooltip);\r\n $tooltip.height(64);\r\n setTimeout(function () {\r\n $tooltip.height(0);\r\n }, 2000);\r\n });\r\n }\r\n}\r\n\r\nmoduleRegistry.registerModule('OverlayFooter', OverlayFooter);\r\nmoduleRegistry.autoApplyModule('OverlayFooter', config.selectors.root);\r\n","import moduleRegistry from '../module-registry/module-registry';\r\n\r\nconst config = {\r\n selectors: {\r\n root: '.paralax-section',\r\n },\r\n classNames: {\r\n inViewport: 'paralax-section--in-viewport'\r\n },\r\n dataAttributes: {\r\n smartedit: 'smartedit',\r\n },\r\n minPadding: 0,\r\n maxPadding: 130,\r\n translateTreshold: 0.2,\r\n maxTransitionDuration: 4,\r\n scrollDistanceTrigger: 1,\r\n};\r\n\r\nexport class ParalaxSection {\r\n constructor($rootElement) {\r\n this._$rootElement = $rootElement;\r\n this._elements = null;\r\n this._isTransformed = false;\r\n this._prevPadding = 0;\r\n this.padding = 0;\r\n }\r\n\r\n static _canTransform = true;\r\n\r\n\r\n init() {\r\n this._elements = this._getDomElements();\r\n\r\n const child = document.querySelectorAll(config.selectors.root);\r\n for (const paralaxElement of child) {\r\n const children = $(paralaxElement.children);\r\n let myDivObjBgColor = children.css(\"background-color\");\r\n\r\n if(children.hasClass('anchor-section')) {\r\n const subChildren = $(children.children());\r\n myDivObjBgColor = subChildren.css(\"background-color\");\r\n }\r\n\r\n if($(children[0]).hasClass('edit-area')) {\r\n const subChildren =$(children[1]);\r\n myDivObjBgColor = subChildren.css(\"background-color\");\r\n }\r\n \r\n const element = $(paralaxElement);\r\n element.css(\"background-color\", myDivObjBgColor);\r\n }\r\n\r\n const smartedit = $('body').data(config.dataAttributes.smartedit);\r\n // edit-area\r\n\r\n if(smartedit !== true && smartedit !== 'true') {\r\n this._addEventListeners();\r\n \r\n const elementTop = this._$rootElement.offset().top;\r\n const elementBottom = elementTop + this._$rootElement.outerHeight();\r\n const elementMiddle = elementTop + (elementBottom - elementTop) / 2;\r\n const elementHeight = elementBottom - elementTop;\r\n \r\n const viewportTop = $(window).scrollTop();\r\n const viewportBottom = viewportTop + $(window).height();\r\n const viewportMiddle = viewportTop + (viewportBottom - viewportTop) / 2;\r\n\r\n const difference = elementMiddle - viewportMiddle;\r\n\r\n const factor = (difference / (elementHeight / 2)) / 2;\r\n\r\n // initialization rules\r\n if(factor > 1) {\r\n // elements below viewport\r\n this._$rootElement.css('opacity', '0');\r\n this._$rootElement.css('padding-top', config.maxPadding);\r\n } else if(factor < -1) {\r\n // elements above viewport\r\n this._$rootElement.css('opacity', '1');\r\n this._$rootElement.css('padding-top', 0);\r\n } else {\r\n // elements in viewport\r\n this._$rootElement.css('opacity', '1');\r\n this._$rootElement.css('padding-top', 0);\r\n }\r\n }\r\n\r\n }\r\n\r\n _getDomElements() {\r\n return {\r\n\r\n }\r\n }\r\n\r\n _addEventListeners() {\r\n let prevViewportTop = $(window).scrollTop();\r\n let prevTimeStamp = new Date().getTime();\r\n \r\n $(window).on('scroll', (e) => {\r\n if (!ParalaxSection._canTransform) return;\r\n\r\n const timeStamp = new Date().getTime();\r\n const viewportTop = $(window).scrollTop();\r\n const difference = viewportTop - prevViewportTop;\r\n const positiveDifference = Math.sqrt(difference * difference);\r\n const scrollingDown = difference > 0;\r\n\r\n if (positiveDifference > config.scrollDistanceTrigger) {\r\n prevViewportTop = viewportTop;\r\n prevTimeStamp = timeStamp;\r\n this._adjustPadding(scrollingDown);\r\n }\r\n });\r\n }\r\n\r\n static setCanTransform(bool) {\r\n ParalaxSection._canTransform = bool;\r\n }\r\n\r\n _adjustPadding(scrollingDown) {\r\n const elementTop = this._$rootElement.offset().top;\r\n const elementBottom = elementTop + this._$rootElement.outerHeight();\r\n const elementMiddle = elementTop + (elementBottom - elementTop) / 2;\r\n const elementHeight = elementBottom - elementTop;\r\n\r\n const viewportTop = $(window).scrollTop();\r\n const viewportBottom = viewportTop + $(window).height();\r\n const viewportMiddle = viewportTop + (viewportBottom - viewportTop) / 2;\r\n\r\n const difference = elementMiddle - viewportBottom;\r\n\r\n // do nothing when element is not in viewport\r\n // if(Math.sqrt(difference * difference) > viewportBottom - viewportTop) return;\r\n\r\n // number indicating element position\r\n // x > 1: viewport above element\r\n // x = 1: element top at viewport bottom \r\n // x = 0: viewport middle === element middle \r\n // x = -1: element bottom at viewport top\r\n // x < -1: below element\r\n const factor = (difference / (elementHeight / 2));\r\n\r\n // handle opacity independant\r\n if(factor > 1) {\r\n this._$rootElement.css('opacity', '0');\r\n } else if(factor < -1) {\r\n this._$rootElement.css('opacity', '1');\r\n } else {\r\n this._$rootElement.css('opacity', '1');\r\n this._$rootElement.css('transition', `opacity 0.2s ease-in, padding ${this._calcTransitionDuration(0)}s ease`);\r\n }\r\n\r\n\r\n // 0.5 means element top or bottom is at viewport middle\r\n if( 1 > factor && factor > 0.5 && scrollingDown) {\r\n // coming from top\r\n // console.log('coming from top - shrink');\r\n const newFactor = (factor - 0.5) * 2;\r\n\r\n const padding = config.minPadding + config.maxPadding - (1 - newFactor) * (config.maxPadding);\r\n\r\n // console.log('calculated padding', padding);\r\n\r\n\r\n if(this.padding !== 0 && padding > this.padding) return;\r\n\r\n \r\n this._$rootElement.css('transition', `opacity 0.2s ease-in, padding ${this._calcTransitionDuration(padding)}s ease`);\r\n this._$rootElement.css('padding-top', padding);\r\n this.padding = padding;\r\n\r\n return;\r\n }\r\n\r\n if(!scrollingDown && 1 < factor && this.padding !== this.maxPadding) {\r\n this._$rootElement.css('padding-top', config.maxPadding);\r\n this.padding = config.maxPadding;\r\n }\r\n }\r\n\r\n _calcTransitionDuration(padding) {\r\n const difference = this._prevPadding - padding;\r\n const factor = difference / config.maxPadding;\r\n const positiveFactor = Math.sqrt(factor * factor);\r\n\r\n return positiveFactor * config.maxTransitionDuration;\r\n }\r\n}\r\n\r\nmoduleRegistry.registerModule('ParalaxSection', ParalaxSection);\r\nmoduleRegistry.autoApplyModule('ParalaxSection', config.selectors.root);\r\n","/* eslint-disable class-methods-use-this */\r\n/* eslint-disable import/prefer-default-export */\r\nimport { Breakpoints } from '../breakpoints/breakpoints';\r\nimport moduleRegistry from '../module-registry/module-registry';\r\n\r\nconst config = {\r\n selectors: {\r\n root: '.search-bar',\r\n input: '.search-bar__text-input',\r\n fakeInput: '.search-bar__fake-input',\r\n overlay: '.search-bar__overlay',\r\n clearInput: '.search-bar__clear-search-icon',\r\n searchButton: '.search-bar__cta',\r\n suggestionList: '.search-bar__suggestion-list',\r\n errorMessage: '.search-bar__error-message',\r\n closeOverlay: '.search-bar__overlay-close-btn',\r\n overlayContainer: '.search-bar__overlay-container',\r\n overlayInfoWrapper: '.search-bar__overlay-info-wrapper',\r\n\r\n },\r\n classNames: {\r\n input: 'search-bar__text-input',\r\n fakeInputError: 'search-bar__fake-input--error',\r\n fakeInputFocus: 'search-bar__fake-input--focus',\r\n suggestionListItem: 'search-bar__suggestion-list-item',\r\n suggestionListItemLink: 'search-bar__suggestion-list-item-link',\r\n overlayContainer: 'search-bar__overlay-container--mobile-suggestions',\r\n },\r\n htmlElements: {\r\n highlightingOpeneningTag: '
',\r\n highlightingClosingTag: '',\r\n },\r\n};\r\n\r\nexport class SearchBar {\r\n constructor($rootElement) {\r\n this._$rootElement = $rootElement;\r\n this._elements = null;\r\n this.isMobileOrTabletScreen = false;\r\n this.suggestions = [];\r\n }\r\n\r\n init() {\r\n this._elements = this._getDomElements();\r\n this._addEventListeners();\r\n this._inputValue = '';\r\n }\r\n\r\n _getDomElements() {\r\n return {\r\n $input: this._$rootElement.find(config.selectors.input),\r\n $fakeInput: this._$rootElement.find(config.selectors.fakeInput),\r\n $overlay: this._$rootElement.find(config.selectors.overlay),\r\n $clearInput: this._$rootElement.find(config.selectors.clearInput),\r\n $searchButton: this._$rootElement.find(config.selectors.searchButton),\r\n $suggestionList: this._$rootElement.find(config.selectors.suggestionList),\r\n $errorMessage: this._$rootElement.find(config.selectors.errorMessage),\r\n $closeOverlay: this._$rootElement.find(config.selectors.closeOverlay),\r\n $overlayContainer: this._$rootElement.find(config.selectors.overlayContainer),\r\n $overlayInfoWrapper: this._$rootElement.find(config.selectors.overlayInfoWrapper),\r\n };\r\n }\r\n\r\n _addEventListeners() {\r\n this._getScreenSize();\r\n this._showClearIconOnDesktopScreens();\r\n this._clearInput();\r\n this._searchButtonHandler();\r\n this._openOverlayOnTabletAndMobileScreens();\r\n this._closeOverlay();\r\n this._searchOnEnter();\r\n\r\n $(window).on('resize', () => {\r\n this._getScreenSize();\r\n });\r\n\r\n this._elements.$input.on('input', (e) => {\r\n this._inputValue = e.currentTarget.value;\r\n this._elements.$fakeInput.removeClass(config.classNames.fakeInputError);\r\n this._elements.$errorMessage.hide();\r\n\r\n if (this._inputValue.length > 2) {\r\n this._getSearchSuggestions(this._inputValue);\r\n } else if (this._inputValue.length === 0) {\r\n this._elements.$clearInput.hide();\r\n this._elements.$suggestionList.hide();\r\n } else {\r\n this._resetSuggestions();\r\n }\r\n });\r\n }\r\n\r\n _getScreenSize() {\r\n if (Breakpoints.isBreakpoint('xs') || Breakpoints.isBreakpoint('sm')) {\r\n this.isMobileOrTabletScreen = true;\r\n } else {\r\n this.isMobileOrTabletScreen = false;\r\n }\r\n }\r\n\r\n _showClearIconOnDesktopScreens() {\r\n this._elements.$input.on('input', () => {\r\n this._elements.$clearInput.show();\r\n });\r\n }\r\n\r\n _clearInput() {\r\n this._elements.$clearInput.on('click', () => {\r\n this._elements.$input.val('');\r\n this.suggestions = [];\r\n this._elements.$suggestionList.hide();\r\n this._elements.$suggestionList.html('');\r\n this._elements.$overlayInfoWrapper.show();\r\n this._elements.$overlayContainer.removeClass(config.classNames.overlayContainer);\r\n\r\n if (!this.isMobileOrTabletScreen) {\r\n this._elements.$clearInput.hide();\r\n }\r\n\r\n this._elements.$input.focus();\r\n });\r\n }\r\n\r\n _openOverlayOnTabletAndMobileScreens() {\r\n this._elements.$input.on('click', () => {\r\n if (this.isMobileOrTabletScreen) {\r\n this._elements.$overlay.show(250);\r\n this._elements.$input.focus();\r\n this._elements.$overlayContainer.addClass(config.classNames.overlayContainer);\r\n setTimeout(() => {\r\n this._elements.$clearInput.show();\r\n }, 250);\r\n } else {\r\n this._elements.$fakeInput.addClass(config.classNames.fakeInputFocus);\r\n }\r\n });\r\n\r\n this._elements.$input.focusout(() => {\r\n this._elements.$fakeInput.removeClass(config.classNames.fakeInputFocus);\r\n });\r\n }\r\n\r\n _closeOverlay() {\r\n this._elements.$closeOverlay.on('click', () => {\r\n this._elements.$overlay.hide(250);\r\n\r\n if (this.isMobileOrTabletScreen) {\r\n this._elements.$clearInput.hide();\r\n this._resetSuggestions();\r\n this._elements.$input.val('');\r\n }\r\n });\r\n }\r\n\r\n async _getSearchSuggestions(searchVal) {\r\n const suggestionsAPIUrl = `${this._$rootElement[0].getAttribute('data-suggestions')}?term=${searchVal}`;\r\n\r\n try {\r\n const filteredList = await this._getData(suggestionsAPIUrl);\r\n\r\n this._resetSuggestions();\r\n\r\n const formattedFilteredList = (typeof (filteredList) === 'string') ? JSON.parse(filteredList) : filteredList;\r\n\r\n if (formattedFilteredList.length === 0) {\r\n // TODO - ? Error message - no entries found ?\r\n } else {\r\n this.suggestions = formattedFilteredList;\r\n this._highlightingSuggestions(searchVal);\r\n }\r\n } catch (err) {\r\n // console.log(err);\r\n }\r\n }\r\n\r\n _resetSuggestions() {\r\n this.suggestions = [];\r\n this._elements.$suggestionList.html('');\r\n this._elements.$suggestionList.hide();\r\n }\r\n\r\n _getData(url) {\r\n return $.ajax({\r\n url,\r\n type: 'GET',\r\n });\r\n }\r\n\r\n _highlightingSuggestions(searchVal) {\r\n const { suggestions } = this;\r\n let startIndex = null;\r\n let endIndex = null;\r\n const manipulatedStrings = [];\r\n\r\n suggestions.forEach((item) => {\r\n const lowercasedResultString = item.value.toLowerCase();\r\n const loweredCaseSearchVal = searchVal.toLowerCase();\r\n\r\n if (lowercasedResultString.indexOf(loweredCaseSearchVal) > -1) {\r\n const searchValLength = searchVal.length;\r\n startIndex = lowercasedResultString.indexOf(loweredCaseSearchVal);\r\n endIndex = startIndex + searchValLength;\r\n // eslint-disable-next-line max-len\r\n manipulatedStrings.push(this._createSuggestionItem(this._manipulateString(startIndex, endIndex, item.value), item.value));\r\n }\r\n });\r\n if (manipulatedStrings.length === 0) {\r\n this._elements.$errorMessage.show();\r\n this._elements.$fakeInput.addClass(config.classNames.fakeInputError);\r\n } else {\r\n this._elements.$suggestionList.append(manipulatedStrings.join(''));\r\n this._elements.$overlayInfoWrapper.hide();\r\n $('.search-bar__suggestions').show();\r\n this._elements.$suggestionList.show();\r\n }\r\n }\r\n\r\n _createSuggestionItem(string, value) {\r\n return `\r\n
\r\n \r\n ${string}\r\n \r\n \r\n `;\r\n }\r\n\r\n _manipulateString(startIndex, endIndex, string) {\r\n return `${string.slice(startIndex - startIndex, startIndex)}${config.htmlElements.highlightingOpeneningTag}${string.slice(startIndex, endIndex)}${config.htmlElements.highlightingClosingTag}${string.slice(endIndex)}`;\r\n }\r\n\r\n // TODO add error message if no results found\r\n\r\n _searchButtonHandler() {\r\n this._elements.$searchButton.on('click', () => {\r\n window.open(`${this._$rootElement[0].getAttribute('data-search')}?keyword=${this._inputValue}&action=search&search_mode=website`, '_self');\r\n this._elements.$errorMessage.hide();\r\n this._elements.$fakeInput.removeClass(config.classNames.fakeInputError);\r\n });\r\n }\r\n\r\n _searchOnEnter() {\r\n this._elements.$input[0].addEventListener('keypress', (event) => {\r\n if (event.key === 'Enter') {\r\n event.preventDefault();\r\n this._elements.$searchButton.click();\r\n }\r\n });\r\n }\r\n\r\n _showHideErrorMessage() {\r\n if (this.suggestions.length === 0) {\r\n this._elements.$errorMessage.show();\r\n this._elements.$fakeInput.addClass(config.classNames.fakeInputError);\r\n } else {\r\n this._elements.$errorMessage.hide();\r\n this._elements.$fakeInput.removeClass(config.classNames.fakeInputError);\r\n }\r\n }\r\n}\r\n\r\nmoduleRegistry.registerModule('SearchBar', SearchBar);\r\nmoduleRegistry.autoApplyModule('SearchBar', config.selectors.root);\r\n","import moduleRegistry from '../module-registry/module-registry';\n\nconst config = {\n openCloseDelayMs: 20,\n selectors: {\n share: '.share',\n shareHead: '.share__head',\n shareLinks: '.share__links',\n shareWrapper: '.share__wrapper',\n },\n classNames: {\n shareWrapperActive: 'share__wrapper--active',\n shareHeadActive: 'share__head--active',\n shareLinksActive: 'share__links--active',\n },\n};\n\nclass Share {\n constructor($rootElement) {\n this._$rootElement = $rootElement;\n this._elements = null;\n this._isVisible = false;\n }\n\n init() {\n this._elements = this._getDomElements();\n this._addEventListeners();\n\n this._initShariff();\n }\n\n async _initShariff() {\n // fetch data\n const finishedSplittedUrl = this._extractIsoAndLanguageFromUrl();\n let data;\n\n if(window.location.hostname === 'localhost') {\n data = await $.get('/assets/shariff.json'); \n } else {\n try {\n data = await $.get( `/${finishedSplittedUrl.isoCode}/${finishedSplittedUrl.languageSelected}/shariff.json`);\n } catch (error) {\n data = \n [\n {\n \"icon\": \"mail\",\n \"country\": \"\"\n },\n {\n \"icon\": \"twitter\",\n \"country\": \"\"\n },\n {\n \"icon\": \"facebook\",\n \"country\": \"\"\n },\n {\n \"icon\": \"linkedin\",\n \"country\": \"\"\n },\n {\n \"icon\": \"whatsapp\",\n \"country\": \"\"\n },\n {\n \"icon\": \"xing\",\n \"country\": \"\"\n }\n ];\n }\n }\n\n const services = [];\n\n data.forEach(element => {\n if(element.country === '') {\n services.push(element.icon);\n return;\n }\n\n const isos = element.country.split(';');\n\n if(isos.includes(finishedSplittedUrl.isoCode.toUpperCase())) {\n services.push(element.icon);\n }\n \n });\n\n const lang = this._elements.$shareLinks.data('lang');\n\n // init shariff\n new Shariff(this._elements.$shareLinks, {\n services: services,\n orientation: 'vertical',\n theme: 'white',\n mailUrl: 'mailto:',\n lang: lang,\n });\n }\n\n /**\n * Returns an object contain the required\n * DOM elements as jQuery objects\n * @returns {object} - An object contain the DOM elements\n */\n _getDomElements() {\n const elements = {\n $shareHeads: this._$rootElement.find(config.selectors.shareHead),\n $shareLinks: this._$rootElement.find(config.selectors.shareLinks),\n $shareWrapper: this._$rootElement.find(config.selectors.shareWrapper),\n };\n\n return elements;\n }\n\n _show() {\n this._elements.$shareLinks.addClass(config.classNames.shareLinksActive);\n this._elements.$shareHeads.addClass(config.classNames.shareHeadActive);\n this._elements.$shareWrapper.addClass(config.classNames.shareWrapperActive);\n }\n\n _hide() {\n this._elements.$shareLinks.removeClass(config.classNames.shareLinksActive);\n this._elements.$shareHeads.removeClass(config.classNames.shareHeadActive);\n this._elements.$shareWrapper.removeClass(config.classNames.shareWrapperActive);\n }\n\n _extractIsoAndLanguageFromUrl() {\n const currentUrl = window.location.pathname;\n const splittedUrl = currentUrl.split('/')\n const splittedIsoCode = splittedUrl[1]\n const splittedLanguage = splittedUrl[2]\n return {\n isoCode: splittedIsoCode,\n languageSelected: splittedLanguage\n }\n }\n\n _addEventListeners() {\n this._elements.$shareHeads.click((e) => {\n e.stopPropagation();\n\n if (!this._isVisible) {\n this._show();\n } else {\n this._hide();\n }\n\n this._isVisible = !this._isVisible;\n });\n\n this._elements.$shareHeads.on('keydown', (e) => {\n if (e.keyCode !== 13) return;\n\n e.stopPropagation();\n\n if (!this._isVisible) {\n this._show();\n } else {\n this._hide();\n }\n\n this._isVisible = !this._isVisible;\n });\n\n this._elements.$shareWrapper.click((e) => {\n e.stopPropagation();\n });\n\n $(document).click(() => {\n this._hide();\n this._isVisible = false;\n });\n }\n}\n\nmoduleRegistry.registerModule('Share', Share);\nmoduleRegistry.autoApplyModule('Share', config.selectors.share);\n","import moduleRegistry from '../module-registry/module-registry';\r\n\r\nconst config = {\r\n selectors: {\r\n root: '.slim-hero__video',\r\n video: '.video-js',\r\n playPauseBtn: '.slim-hero__play-pause-btn',\r\n playPauseBtnIcon: '.slim-hero__play-pause-btn-icon',\r\n videoWrapper: '.slim-hero__video-wrapper',\r\n imageWrapper: '.slim-hero__image-wrapper',\r\n },\r\n classNames: {\r\n playIcon: 'slim-hero__play-pause-btn-icon--play',\r\n pauseIcon: 'slim-hero__play-pause-btn-icon--pause',\r\n },\r\n dataAttributes: {\r\n autoplay: 'autoplay',\r\n },\r\n pauseIconCircle: '
![\"Play](\"assets/icons/pauseCircle.svg\")
',\r\n pauseIconCircleWhite: '
![\"Play](\"assets/icons/pauseCircleWhite.svg\")
',\r\n playIconPaths: '
',\r\n};\r\n\r\nclass SlimHero {\r\n constructor($rootElement) {\r\n this._$rootElement = $rootElement;\r\n this._elements = null;\r\n }\r\n\r\n init() {\r\n this._elements = this._getDomElements();\r\n\r\n if(this._elements.$video.length === 0) {\r\n this._elements.$playPauseBtn.hide();\r\n }\r\n\r\n this._addEventListeners();\r\n this._screenClick();\r\n this._elements.$playPauseBtnIcon.addClass(config.classNames.playIcon);\r\n this._autoPlayVideo();\r\n }\r\n\r\n _getDomElements() {\r\n return {\r\n $video: this._$rootElement.find(config.selectors.video),\r\n $playPauseBtn: this._$rootElement.find(config.selectors.playPauseBtn),\r\n $playPauseBtnIcon: this._$rootElement.find(config.selectors.playPauseBtnIcon),\r\n $videoWrapper: this._$rootElement.find(config.selectors.videoWrapper),\r\n $imageWrapper: this._$rootElement.find(config.selectors.imageWrapper),\r\n };\r\n }\r\n\r\n _addEventListeners() {\r\n this._elements.$playPauseBtn.on('click', () => {\r\n this._playPauseHandler();\r\n });\r\n }\r\n\r\n // eslint-disable-next-line class-methods-use-this\r\n _autoPlayVideo() {\r\n if (this._elements.$video.data(config.dataAttributes.autoplay)) {\r\n this._muteVideo();\r\n this._playPauseHandler();\r\n }\r\n }\r\n\r\n _muteVideo() {\r\n const videoSettings = this._elements.$video[0];\r\n videoSettings.player.muted(true);\r\n }\r\n\r\n _playPauseHandler() {\r\n const videoSettings = this._elements.$video[0];\r\n if (videoSettings.player.paused()) {\r\n this._elements.$imageWrapper.hide();\r\n this._elements.$videoWrapper.show();\r\n videoSettings.player.play();\r\n this._elements.$playPauseBtnIcon.removeClass(config.classNames.playIcon);\r\n this._elements.$playPauseBtnIcon.addClass(config.classNames.pauseIcon);\r\n } else {\r\n videoSettings.player.pause();\r\n this._elements.$playPauseBtnIcon.addClass(config.classNames.playIcon);\r\n this._elements.$playPauseBtnIcon.removeClass(config.classNames.pauseIcon);\r\n // this._elements.$playPauseBtnIcon.addClass(config.classNames.playIcon);\r\n // this._elements.$playPauseBtnIcon.html(config.playIconPaths);\r\n }\r\n }\r\n\r\n _screenClick() {\r\n const videoSettings = this._elements.$video[0];\r\n\r\n this._elements.$video.on('click', (e) => {\r\n e.preventDefault();\r\n if (videoSettings.player.paused()) {\r\n this._elements.$imageWrapper.hide();\r\n this._elements.$videoWrapper.show();\r\n videoSettings.player.play();\r\n this._elements.$playPauseBtnIcon.removeClass(config.classNames.playIcon);\r\n this._elements.$playPauseBtnIcon.addClass(config.classNames.pauseIcon);\r\n } else {\r\n videoSettings.player.pause();\r\n this._elements.$playPauseBtnIcon.addClass(config.classNames.playIcon);\r\n this._elements.$playPauseBtnIcon.removeClass(config.classNames.pauseIcon);\r\n }\r\n });\r\n }\r\n}\r\n\r\nmoduleRegistry.registerModule('SlimHero', SlimHero);\r\nmoduleRegistry.autoApplyModule('SlimHero', config.selectors.root);\r\n","import moduleRegistry from '../module-registry/module-registry';\r\n\r\nconst config = {\r\n selectors: {\r\n root: '.speciality-hero__video',\r\n video: '.video-js',\r\n playPauseBtn: '.speciality-hero__play-pause-btn',\r\n playPauseBtnIcon: '.speciality-hero__play-pause-btn-icon',\r\n videoWrapper: '.speciality-hero__video-wrapper',\r\n imageWrapper: '.speciality-hero__visual',\r\n videoTextblock: '.speciality-hero__textblock'\r\n },\r\n classNames: {\r\n playIcon: 'speciality-hero__play-pause-btn-icon--play',\r\n pauseIcon: 'speciality-hero__play-pause-btn-icon--pause',\r\n hiddenControls: 'speciality-hero__textblock--hidden-control'\r\n },\r\n dataAttributes: {\r\n autoplay: 'autoplay',\r\n },\r\n pauseIconCircle: '
',\r\n pauseIconCircleWhite: '
',\r\n playIconPaths: '
',\r\n};\r\n\r\nclass SpecialityHero {\r\n constructor($rootElement) {\r\n this._$rootElement = $rootElement;\r\n this._elements = null;\r\n this._videoVisible = false;\r\n }\r\n\r\n init() {\r\n this._elements = this._getDomElements();\r\n\r\n if(this._elements.$video.length === 0) {\r\n this._elements.$playPauseBtn.hide(); \r\n }\r\n\r\n this._addEventListeners();\r\n this._screenClick();\r\n this._elements.$playPauseBtnIcon.addClass(config.classNames.playIcon);\r\n this._autoPlayVideo();\r\n this._hidePlayPauseBtn();\r\n }\r\n\r\n _getDomElements() {\r\n return {\r\n $video: this._$rootElement.find(config.selectors.video),\r\n $playPauseBtn: this._$rootElement.find(config.selectors.playPauseBtn),\r\n $playPauseBtnIcon: this._$rootElement.find(config.selectors.playPauseBtnIcon),\r\n $videoWrapper: this._$rootElement.find(config.selectors.videoWrapper),\r\n $imageWrapper: this._$rootElement.find(config.selectors.imageWrapper),\r\n };\r\n }\r\n\r\n _addEventListeners() {\r\n const videoSettings = this._elements.$video[0];\r\n const _this = this;\r\n \r\n this._elements.$playPauseBtn.on('click', () => {\r\n this._playPauseHandler();\r\n });\r\n\r\n // only show video if it can be played, else stay on image\r\n if(videoSettings && videoSettings.player) {\r\n videoSettings.player.on(\"play\", function () {\r\n if(!_this._videoVisible) {\r\n _this._elements.$imageWrapper.hide();\r\n _this._elements.$videoWrapper.show();\r\n _this._videoVisible = true;\r\n }\r\n });\r\n }\r\n \r\n }\r\n\r\n // eslint-disable-next-line class-methods-use-this\r\n _autoPlayVideo() {\r\n const videoSettings = this._elements.$video[0];\r\n if (this._elements.$video.data(config.dataAttributes.autoplay)) {\r\n this._muteVideo();\r\n this._playPauseHandler();\r\n videoSettings.player.on(\"ended\", function () {\r\n //loop if video ended\r\n videoSettings.player.play();\r\n });\r\n }\r\n }\r\n\r\n _muteVideo() {\r\n const videoSettings = this._elements.$video[0];\r\n videoSettings.player.muted(true);\r\n }\r\n\r\n _playPauseHandler() {\r\n const videoSettings = this._elements.$video[0];\r\n\r\n if (videoSettings.player.paused()) {\r\n videoSettings.player.play();\r\n\r\n this._elements.$playPauseBtnIcon.removeClass(config.classNames.playIcon);\r\n this._elements.$playPauseBtnIcon.addClass(config.classNames.pauseIcon);\r\n } else {\r\n videoSettings.player.pause();\r\n this._elements.$playPauseBtnIcon.addClass(config.classNames.playIcon);\r\n this._elements.$playPauseBtnIcon.removeClass(config.classNames.pauseIcon);\r\n }\r\n }\r\n\r\n _screenClick() {\r\n const videoSettings = this._elements.$video[0];\r\n\r\n this._elements.$video.on('click', (e) => {\r\n e.preventDefault();\r\n if (videoSettings.player.paused()) {\r\n videoSettings.player.play();\r\n\r\n this._elements.$playPauseBtnIcon.removeClass(config.classNames.playIcon);\r\n this._elements.$playPauseBtnIcon.addClass(config.classNames.pauseIcon);\r\n } else {\r\n videoSettings.player.pause();\r\n this._elements.$playPauseBtnIcon.addClass(config.classNames.playIcon);\r\n this._elements.$playPauseBtnIcon.removeClass(config.classNames.pauseIcon);\r\n }\r\n });\r\n }\r\n\r\n _hidePlayPauseBtn() {\r\n const videoElements = $(this._elements.$video)\r\n for (let index = 0; index < videoElements.length; index++) {\r\n const videoElement = videoElements[index];\r\n \r\n if($(videoElement).data(config.dataAttributes.autoplay)) {\r\n $(videoElement).closest(config.selectors.root).find(config.selectors.videoTextblock).addClass(config.classNames.hiddenControls)\r\n }else {\r\n $(videoElement).closest(config.selectors.root).find(config.selectors.videoTextblock).removeClass(config.classNames.hiddenControls)\r\n }\r\n }\r\n }\r\n}\r\n\r\nmoduleRegistry.registerModule('SpecialityHero', SpecialityHero);\r\nmoduleRegistry.autoApplyModule('SpecialityHero', config.selectors.root);\r\n","import moduleRegistry from '../module-registry/module-registry';\r\n\r\n\r\nconst config = {\r\n selectors: {\r\n root: '.sticky-section',\r\n stickyBar: '.sticky-section__bar',\r\n stickyBarItems: '.sticky-section__bar-items',\r\n stickyBarItem: '.sticky-section__bar-item',\r\n stickySectionContent: '.sticky-section__content',\r\n stickySectionContentWrapper: '.sticky-section__content-wrapper',\r\n stickyBarItemsWrapper: '.sticky-section__bar-items-wrapper',\r\n arrowLeft: '.sticky-section__bar-arrow-left',\r\n arrowRight: '.sticky-section__bar-arrow-right'\r\n },\r\n classNames: {\r\n stickyBarItemActive: 'sticky-section__bar-item--active',\r\n stickySectionContentVisible: 'sticky-section__content--visible',\r\n stickySectionBarSticky: 'sticky-section__bar--sticky',\r\n stickyBarUp: 'sticky-section__bar--up',\r\n stickyBarDown: 'sticky-section__bar--down',\r\n stickyBarTransition: 'sticky-section__bar--transition',\r\n arrowLeftVisible: 'sticky-section__bar-arrow-left--visible',\r\n arrowRightVisible: 'sticky-section__bar-arrow-right--visible',\r\n stickyBarItemsWrapperRight: 'sticky-section__bar-items-wrapper--right',\r\n\r\n },\r\n dataAttributes: {\r\n stickySectionId: 'sticky-section-id',\r\n smartedit: 'smartedit',\r\n }\r\n};\r\n\r\nexport class StickySection {\r\n constructor($rootElement) {\r\n this._$rootElement = $rootElement;\r\n this._elements = null;\r\n this._initialStickyBarTop = 0;\r\n this._canChangeState = true;\r\n this._lastWindowTop = 0;\r\n this._isSticky = false;\r\n this._enabledArrows = false;\r\n this._currentIndex = 0;\r\n this._currentTranslateX = 0;\r\n this._touchStart = 0;\r\n this._delta = 0;\r\n }\r\n\r\n static _canBecomeSticky = true;\r\n\r\n init() {\r\n this._elements = this._getDomElements();\r\n this._elements.$stickyBarItems.html(this._createStickyBarItemHtml());\r\n\r\n const smartedit = $('body').data(config.dataAttributes.smartedit);\r\n\r\n if(smartedit === true || smartedit === 'true') {\r\n StickySection._canBecomeSticky = false;\r\n }\r\n\r\n // append dynamic content to elements\r\n this._elements.$stickyBarItem = this._$rootElement.find(config.selectors.stickyBarItem);\r\n\r\n this._initialStickyBarTop = this._elements.$stickyBar.offset().top;\r\n this._lastWindowTop = $(window).scrollTop();\r\n this._addEventListeners();\r\n this.checkSticky();\r\n\r\n // this._elements.$stickySectionContent.each((i,item) => {\r\n // const $item = $(item);\r\n\r\n // if(i !== 0) {\r\n // $item.height(0);\r\n // }\r\n // });\r\n\r\n if(this._elements.$stickyBarItems.width()+30 > $( document).width() || this._elements.$stickyBarItems.width() > 1270) {\r\n this._enableArrows();\r\n this._enabledArrows = true;\r\n }\r\n\r\n const urlParams = new URLSearchParams(window.location.search);\r\n const section = urlParams.get('section');\r\n const _this = this;\r\n\r\n if(section) {\r\n _this._elements.$stickyBarItem.removeClass(config.classNames.stickyBarItemActive);\r\n _this._elements.$stickySectionContent.removeClass(config.classNames.stickySectionContentVisible);\r\n\r\n if(!_this._$rootElement.hasClass('sticky-section--was-clicked')) {\r\n _this._$rootElement.addClass('sticky-section--was-clicked');\r\n }\r\n\r\n const $section = _this._$rootElement.find(`.sticky-section__content[data-sticky-section-id=\"${section}\"]`);\r\n const $item = _this._$rootElement.find(`.sticky-section__bar-item[data-sticky-section-id=\"${section}\"]`);\r\n const child = _this._findFirstColoredChild($section[0]);\r\n\r\n $item.addClass(config.classNames.stickyBarItemActive);\r\n\r\n \r\n\r\n if(smartedit !== true && smartedit !== 'true') {\r\n _this._elements.$stickySectionContentWrapper.css('background-color', $(child).css('background-color'));\r\n }\r\n \r\n let number = 0;\r\n\r\n if(_this._enabledArrows) {\r\n let index = 0;\r\n _this._elements.$stickyBar.find(config.selectors.stickyBarItem).each((i, el) => {\r\n if(el === $item[0]) {\r\n index = i;\r\n }\r\n\r\n if(index === 0) {\r\n if(i === 0) {\r\n number += $(el).width()+ 19.95;\r\n } else {\r\n number += $(el).width() + 19.95;\r\n } \r\n }\r\n });\r\n\r\n // special cases\r\n if(index === 0) {\r\n const containerWidth = _this._$rootElement.find('.sticky-section__bar-container').width();\r\n const max = _this._elements.$stickyBarItems.width() - containerWidth;\r\n\r\n _this._elements.$stickyBarItemsWrapper.css(\"transform\", \"translate(\"+ (max) +\"px)\");\r\n _this._currentTranslateX = max;\r\n } else if(index === _this._elements.$stickyBar.find(config.selectors.stickyBarItem).length - 1) {\r\n _this._elements.$stickyBarItemsWrapper.css(\"transform\", \"translate(\"+ (0) +\"px)\");\r\n _this._currentTranslateX = 0;\r\n } else {\r\n // default case\r\n const containerWidth = _this._$rootElement.find('.sticky-section__bar-container').width();\r\n const max = _this._elements.$stickyBarItems.width() - containerWidth;\r\n number = _this._elements.$stickyBarItemsWrapper.width() - number - containerWidth;\r\n number += 30;\r\n const activeElementWidth = $(_this._elements.$stickyBar.find(config.selectors.stickyBarItem)[index]).width() + 19.95;\r\n const previousElementWidth = $(_this._elements.$stickyBar.find(config.selectors.stickyBarItem)[index-1]).width() + 19.95;\r\n\r\n if(containerWidth > activeElementWidth + previousElementWidth) {\r\n number += previousElementWidth;\r\n }\r\n\r\n if(number > max) {\r\n number = max;\r\n }\r\n \r\n if(number < 0) {\r\n _this._elements.$stickyBarItemsWrapper.css(\"transform\", \"translate(\"+ (0) +\"px)\");\r\n _this._currentTranslateX = 0;\r\n } else {\r\n _this._elements.$stickyBarItemsWrapper.css(\"transform\", \"translate(\"+ (number) +\"px)\");\r\n _this._currentTranslateX = number;\r\n }\r\n }\r\n\r\n _this._updateArrows();\r\n }\r\n \r\n \r\n\r\n setTimeout(() => {\r\n _this._elements.$stickySectionContent.height(0);\r\n $section.height($section[0].scrollHeight);\r\n \r\n if(!(smartedit === true || smartedit === 'true')) {\r\n window.scrollTo({\r\n top: $item.closest('.sticky-section')[0].offsetTop - $item.closest('.sticky-section__bar')[0].getBoundingClientRect().height + 150,\r\n left: 0,\r\n behavior: \"smooth\",\r\n });\r\n }\r\n\r\n _this._becomeSticky();\r\n\r\n setTimeout(() => {\r\n $section.addClass(config.classNames.stickySectionContentVisible);\r\n }, 5);\r\n }, 650); \r\n }\r\n\r\n }\r\n\r\n _getDomElements() {\r\n return {\r\n $stickyBar: this._$rootElement.find(config.selectors.stickyBar),\r\n $stickyBarItems: this._$rootElement.find(config.selectors.stickyBarItems),\r\n $stickyBarItem: null,\r\n $stickySectionContent: this._$rootElement.find(config.selectors.stickySectionContent), \r\n $stickySectionContentWrapper: this._$rootElement.find(config.selectors.stickySectionContentWrapper), \r\n $stickyBarItemsWrapper: this._$rootElement.find(config.selectors.stickyBarItemsWrapper), \r\n $arrowLeft: this._$rootElement.find(config.selectors.arrowLeft), \r\n $arrowRight: this._$rootElement.find(config.selectors.arrowRight), \r\n };\r\n }\r\n\r\n _addEventListeners() {\r\n const _this = this;\r\n\r\n _this._elements.$arrowLeft.on('click', () => {\r\n _this._onLeftArrowClick();\r\n });\r\n\r\n _this._elements.$arrowRight.on('click', () => {\r\n _this._onRightArrowClick();\r\n });\r\n\r\n _this._elements.$stickyBar.find(config.selectors.stickyBarItem).on('click', function () {\r\n const smartedit = $('body').data(config.dataAttributes.smartedit);\r\n\r\n if(!_this._$rootElement.hasClass('sticky-section--was-clicked')) {\r\n _this._$rootElement.addClass('sticky-section--was-clicked');\r\n const el = _this._elements.$stickySectionContent[0];\r\n $(el).height(el.scrollHeight);\r\n }\r\n \r\n const $el = $(this);\r\n const id = $el.data(config.dataAttributes.stickySectionId);\r\n\r\n _this._updateUrl(id);\r\n\r\n\r\n if(!(smartedit === true || smartedit === 'true')) {\r\n window.scrollTo({\r\n top: $el.closest('.sticky-section')[0].offsetTop - $el.closest('.sticky-section__bar')[0].getBoundingClientRect().height,\r\n left: 0,\r\n behavior: \"smooth\",\r\n });\r\n }\r\n \r\n \r\n _this._elements.$stickyBarItem.removeClass(config.classNames.stickyBarItemActive);\r\n $el.addClass(config.classNames.stickyBarItemActive);\r\n\r\n _this._elements.$stickySectionContent.removeClass(config.classNames.stickySectionContentVisible);\r\n\r\n const $section = _this._$rootElement.find(`.sticky-section__content[data-sticky-section-id=\"${id}\"]`);\r\n\r\n const child = _this._findFirstColoredChild($section[0]);\r\n\r\n if(smartedit !== true && smartedit !== 'true') {\r\n _this._elements.$stickySectionContentWrapper.css('background-color', $(child).css('background-color'));\r\n }\r\n \r\n let number = 0;\r\n\r\n if(_this._enabledArrows) {\r\n let index = 0;\r\n _this._elements.$stickyBar.find(config.selectors.stickyBarItem).each((i, el) => {\r\n if(el === this) {\r\n index = i;\r\n }\r\n\r\n if(index === 0) {\r\n if(i === 0) {\r\n number += $(el).width()+ 19.95;\r\n } else {\r\n number += $(el).width() + 19.95;\r\n } \r\n }\r\n });\r\n\r\n // special cases\r\n if(index === 0) {\r\n const containerWidth = _this._$rootElement.find('.sticky-section__bar-container').width();\r\n const max = _this._elements.$stickyBarItems.width() - containerWidth;\r\n\r\n _this._elements.$stickyBarItemsWrapper.css(\"transform\", \"translate(\"+ (max) +\"px)\");\r\n _this._currentTranslateX = max;\r\n \r\n } else if(index === _this._elements.$stickyBar.find(config.selectors.stickyBarItem).length - 1) {\r\n _this._elements.$stickyBarItemsWrapper.css(\"transform\", \"translate(\"+ (0) +\"px)\");\r\n _this._currentTranslateX = 0;\r\n } else {\r\n // default case\r\n const containerWidth = _this._$rootElement.find('.sticky-section__bar-container').width();\r\n const max = _this._elements.$stickyBarItems.width() - containerWidth;\r\n number = _this._elements.$stickyBarItemsWrapper.width() - number - containerWidth;\r\n number += 30;\r\n const activeElementWidth = $(_this._elements.$stickyBar.find(config.selectors.stickyBarItem)[index]).width() + 19.95;\r\n const previousElementWidth = $(_this._elements.$stickyBar.find(config.selectors.stickyBarItem)[index-1]).width() + 19.95;\r\n\r\n if(containerWidth > activeElementWidth + previousElementWidth) {\r\n number += previousElementWidth;\r\n }\r\n\r\n if(number > max) {\r\n number = max;\r\n }\r\n \r\n if(number < 0) {\r\n _this._elements.$stickyBarItemsWrapper.css(\"transform\", \"translate(\"+ (0) +\"px)\");\r\n _this._currentTranslateX = 0;\r\n } else {\r\n _this._elements.$stickyBarItemsWrapper.css(\"transform\", \"translate(\"+ (number) +\"px)\");\r\n _this._currentTranslateX = number;\r\n }\r\n }\r\n\r\n _this._updateArrows();\r\n }\r\n \r\n \r\n\r\n setTimeout(() => {\r\n _this._elements.$stickySectionContent.height(0);\r\n $section.height($section[0].scrollHeight);\r\n \r\n\r\n setTimeout(() => {\r\n $section.addClass(config.classNames.stickySectionContentVisible);\r\n }, 5);\r\n }, 650); \r\n });\r\n var dwidth = $(window).width();\r\n\r\n $(window).on('resize', () => {\r\n var wwidth = $(window).width();\r\n if(dwidth !== wwidth) {\r\n this._lastWindowTop = $(window).scrollTop();\r\n if(this._elements.$stickyBarItems.width()+30 > $( document).width() || this._elements.$stickyBarItems.width() > 1270) {\r\n if( !this._enabledArrows){ \r\n this._enableArrows(); \r\n this._enabledArrows = true;\r\n } else {\r\n this._onLeftArrowClick();\r\n this._enabledArrows = true;\r\n }\r\n } else {\r\n if( this._enabledArrows){\r\n this._disableArrows(); \r\n this._enabledArrows = false;\r\n }\r\n }\r\n }\r\n });\r\n\r\n $(window).on('scroll', () => {\r\n const elementTop = this._elements.$stickyBar.offset().top;\r\n const elementHeight = this._elements.$stickyBar.height();\r\n const elementBottom = elementTop + elementHeight;\r\n\r\n const $activeContent = this._$rootElement.find(`.${config.classNames.stickySectionContentVisible}`);\r\n const contentTop = this._$rootElement.offset().top;\r\n const contentBottom = contentTop + this._$rootElement.height();\r\n\r\n const windowTop = $(window).scrollTop();\r\n const topDifference = elementTop - contentTop;\r\n // console.log(contentTop);\r\n\r\n\r\n // scroll bottom\r\n if (this._lastWindowTop < windowTop) {\r\n $(_this._elements.$stickyBar).removeClass(config.classNames.stickyBarTransition)\r\n $(_this._elements.$stickyBar).removeClass(config.classNames.stickyBarUp);\r\n \r\n if(windowTop >= elementTop && !(windowTop >= elementBottom) && !(elementBottom >= contentBottom)) {\r\n this._becomeSticky();\r\n // console.log('sticky');\r\n }\r\n\r\n if (windowTop > contentBottom && this._isSticky) {\r\n \r\n this._becomeUnsticky(windowTop - contentTop);\r\n }\r\n } \r\n\r\n // scroll top\r\n else if (this._lastWindowTop > windowTop) {\r\n if( $(_this._elements.$stickyBar).hasClass(config.classNames.stickySectionBarSticky)){\r\n \r\n $(_this._elements.$stickyBar).addClass(config.classNames.stickyBarUp)\r\n $(_this._elements.$stickyBar).addClass(config.classNames.stickyBarTransition)\r\n } else {\r\n $(_this._elements.$stickyBar).removeClass(config.classNames.stickyBarUp)\r\n }\r\n\r\n \r\n if (windowTop < elementTop && elementTop > contentTop) {\r\n \r\n \r\n this._becomeSticky();\r\n \r\n }\r\n \r\n \r\n \r\n if ((windowTop + 110) <= contentTop) {\r\n \r\n this._becomeUnsticky(0);\r\n }\r\n }\r\n\r\n this._lastWindowTop = windowTop;\r\n }); \r\n \r\n this._elements.$stickyBarItemsWrapper.on('dragstart', () => {\r\n\r\n });\r\n\r\n this._elements.$stickyBarItemsWrapper.on('dragend', () => {\r\n\r\n });\r\n\r\n // track touchstart and delta positions\r\n this._elements.$stickyBarItemsWrapper.on('touchmove', (e) => {\r\n const position = (e.changedTouches[0].clientX - window.innerWidth / 2) * 0.5;\r\n\r\n if(this._touchStart === 0) {\r\n this._touchStart = position\r\n }\r\n \r\n this._delta = position;\r\n });\r\n\r\n // trigger function depending on resulting positions & reset positions after\r\n this._elements.$stickyBarItemsWrapper.on(\"touchend\", () => {\r\n if(this._enabledArrows) {\r\n if(this._delta - this._touchStart > 0) {\r\n _this._onLeftArrowClick();\r\n } else {\r\n _this._onRightArrowClick();\r\n }\r\n \r\n this._touchStart = 0;\r\n }\r\n \r\n });\r\n }\r\n\r\n _enableArrows() {\r\n let left = $(document).width() - 30;\r\n\r\n if(left > 1270) {\r\n left = 1270;\r\n }\r\n\r\n this._currentTranslateX = this._elements.$stickyBarItems.width() - left;\r\n\r\n this._elements.$arrowLeft.removeClass(config.classNames.arrowLeftVisible);\r\n this._elements.$arrowRight.addClass(config.classNames.arrowRightVisible);\r\n this._elements.$stickyBarItemsWrapper.addClass(config.classNames.stickyBarItemsWrapperRight);\r\n this._elements.$stickyBarItemsWrapper.css(\"transform\", \"translate(\"+ ((this._currentTranslateX)) +\"px)\");\r\n }\r\n\r\n _disableArrows() {\r\n this._currentTranslateX = 0;\r\n this._elements.$arrowLeft.removeClass(config.classNames.arrowLeftVisible);\r\n this._elements.$arrowRight.removeClass(config.classNames.arrowRightVisible);\r\n this._elements.$stickyBarItemsWrapper.removeClass(config.classNames.stickyBarItemsWrapperRight);\r\n this._elements.$stickyBarItemsWrapper.css(\"transform\", \"translate(0px)\");\r\n }\r\n\r\n _onLeftArrowClick() {\r\n \r\n\r\n let left = $(document).width() - 30;\r\n\r\n if(left > 1270) {\r\n left = 1270;\r\n }\r\n\r\n this._currentTranslateX += $(document).width() / 2 - 30;\r\n\r\n const max = this._elements.$stickyBarItems.width() - left;\r\n\r\n if(this._currentTranslateX > max) {\r\n this._currentTranslateX = max;\r\n }\r\n\r\n \r\n this._elements.$stickyBarItemsWrapper.css(\"transform\", \"translate(\"+ ((this._currentTranslateX)) +\"px)\");\r\n this._updateArrows();\r\n }\r\n\r\n _onRightArrowClick() {\r\n let left = $(document).width() + 30;\r\n\r\n if(left > 1270) {\r\n left = 1270;\r\n }\r\n\r\n const max = this._elements.$stickyBarItems.width() - left;\r\n\r\n if(this._elements.$stickyBarItems.width() > $(document).width() * 2) {\r\n this._currentTranslateX -= $(document).width() / 2 + 30;\r\n\r\n if(this._currentTranslateX < 0) {\r\n this._currentTranslateX = 0;\r\n }\r\n } else {\r\n this._currentTranslateX = 0;\r\n }\r\n\r\n this._elements.$stickyBarItemsWrapper.css(\"transform\", `translate(${this._currentTranslateX}px)`);\r\n this._updateArrows();\r\n }\r\n\r\n _updateArrows() {\r\n let left = $(document).width() - 30;\r\n\r\n if(left > 1270) {\r\n left = 1270;\r\n }\r\n\r\n const max = this._elements.$stickyBarItems.width() - left;\r\n\r\n if(this._currentTranslateX === 0) {\r\n this._elements.$arrowRight.removeClass(config.classNames.arrowRightVisible);\r\n this._elements.$arrowLeft.addClass(config.classNames.arrowLeftVisible);\r\n } else if(this._currentTranslateX >= max) {\r\n this._elements.$arrowRight.addClass(config.classNames.arrowRightVisible);\r\n this._elements.$arrowLeft.removeClass(config.classNames.arrowLeftVisible);\r\n } else {\r\n this._elements.$arrowRight.addClass(config.classNames.arrowRightVisible);\r\n this._elements.$arrowLeft.addClass(config.classNames.arrowLeftVisible);\r\n }\r\n }\r\n\r\n _becomeSticky() {\r\n if (!StickySection._canBecomeSticky) return;\r\n\r\n this._isSticky = true;\r\n this._elements.$stickyBar.addClass(config.classNames.stickySectionBarSticky);\r\n this._elements.$stickyBar.css('position', 'fixed');\r\n \r\n\r\n this._elements.$stickyBar.css('top', 0);\r\n // ParalaxSection.setCanTransform(false);\r\n \r\n }\r\n\r\n _becomeUnsticky(top) {\r\n this._isSticky = false;\r\n this._elements.$stickyBar.removeClass(config.classNames.stickySectionBarSticky);\r\n this._elements.$stickyBar.css('position', 'absolute');\r\n this._elements.$stickyBar.css('top', top);\r\n // ParalaxSection.setCanTransform(true);\r\n }\r\n\r\n _createStickyBarItemHtml() {\r\n let html = '';\r\n let defaultActive = 0;\r\n if(this._elements.$stickyBarItems[0].attributes.defaultActive !== undefined) {\r\n defaultActive = Number(this._elements.$stickyBarItems[0].attributes.defaultActive.value);\r\n }\r\n\r\n this._elements.$stickySectionContent.each((i, el) => {\r\n const $el = $(el);\r\n const id = $el.data(config.dataAttributes.stickySectionId);\r\n \r\n const active = i === defaultActive ? ` ${config.classNames.stickyBarItemActive}` : '';\r\n\r\n html += `\r\n
\r\n ${id}\r\n \r\n `;\r\n });\r\n\r\n return html;\r\n }\r\n\r\n static setCanBecomneSticky(bool) {\r\n StickySection._canBecomeSticky = bool;\r\n }\r\n\r\n checkSticky(){\r\n // console.log(this._isSticky, $('.navigation').hasClass('navigation--scrollup'))\r\n // if(this._isSticky && $('.navigation--scrollup')){\r\n // this._elements.$stickyBar.css('top', '110px');\r\n // }\r\n }\r\n\r\n _findFirstColoredChild(element) {\r\n // Überprüfen, ob das aktuelle Element eine Hintergrundfarbe hat\r\n const bgColor = window.getComputedStyle(element).getPropertyValue('background-color');\r\n const isColored = bgColor !== 'rgba(0, 0, 0, 0)' && bgColor !== 'transparent';\r\n \r\n if (isColored) {\r\n // Wenn das aktuelle Element eine Hintergrundfarbe hat, geben Sie es zurück\r\n return element;\r\n } else {\r\n // Durchlaufen Sie alle Kindknoten und rufen Sie die Funktion rekursiv auf\r\n for (let i = 0; i < element.children.length; i++) {\r\n if(i === 0) {\r\n const coloredChild = this._findFirstColoredChild(element.children[i]);\r\n \r\n if (coloredChild) {\r\n // Wenn ein gefärbtes Kind gefunden wurde, geben Sie es zurück\r\n return coloredChild;\r\n }\r\n }\r\n \r\n }\r\n }\r\n \r\n // Wenn kein gefärbtes Kind gefunden wurde, geben Sie null zurück\r\n return null;\r\n }\r\n\r\n _updateUrl(id) {\r\n history.pushState({}, \"\", `${window.location.pathname}?section=${encodeURIComponent(id)}`);\r\n }\r\n}\r\n\r\nmoduleRegistry.registerModule('StickySection', StickySection);\r\nmoduleRegistry.autoApplyModule('StickySection', config.selectors.root);\r\n","import moduleRegistry from '../module-registry/module-registry';\r\n\r\nconst config = {\r\n selectors: {\r\n root: '.textblock',\r\n headlineContent: '.textblock__headline-content',\r\n headlineText: '.textblock__headline-text',\r\n headlineIcon: '.textblock__headline-icon',\r\n },\r\n};\r\n\r\nclass Textblock {\r\n constructor($rootElement) {\r\n this._$rootElement = $rootElement;\r\n this._elements = null;\r\n this.hasBr = false;\r\n }\r\n\r\n init() {\r\n this._elements = this._getDomElements();\r\n this._calculateSpaceFromStringEndToRight();\r\n\r\n $(window).on('resize', () => {\r\n this._calculateSpaceFromStringEndToRight();\r\n })\r\n\r\n // checking if there is a
tag in headline\r\n\r\n }\r\n\r\n _getDomElements() {\r\n return {\r\n $headlineContent: this._$rootElement.find(config.selectors.headlineContent),\r\n $headlineText: this._$rootElement.find(config.selectors.headlineText),\r\n $headlineIcon: this._$rootElement.find(config.selectors.headlineIcon),\r\n };\r\n }\r\n\r\n // Calculate left space from Headline to the right border\r\n _calculateSpaceFromStringEndToRight() {\r\n // this if condition is needed in case there is no headline icon\r\n // or even no headline in textblock\r\n if (this._elements.$headlineContent.html()?.indexOf('textblock__headline-icon') === undefined || this._elements.$headlineContent.html()?.indexOf('textblock__headline-icon') === -1) {\r\n return;\r\n } else {\r\n // getting widths\r\n // console.log('it is running');\r\n const textblockWidth = this._$rootElement[0].scrollWidth;\r\n const headlineText = this._elements.$headlineText;\r\n const headlineWidth = headlineText[0].offsetWidth;\r\n\r\n // calculating width difference between textblock (root) and headline\r\n const differenceOfWidth = textblockWidth - headlineWidth;\r\n\r\n const lastWord = this._getLastWordOfHeadline(headlineText);\r\n // inserts last word and icon into dom, to get width\r\n const lastWordWithIcon = this._elements.$headlineIcon.html(lastWord + this._elements.$headlineIcon.html())[0].offsetWidth;\r\n // removes last word of icon span after calculation is done\r\n this._elements.$headlineIcon.html(this._elements.$headlineIcon.html().replace(lastWord, ''));\r\n\r\n // if there is a br-tag and enough space in first line to fir last word and icon = remove br-tag\r\n if (headlineText.html().indexOf('
') !== -1 && differenceOfWidth > lastWordWithIcon) {\r\n this._resetString(headlineText.html());\r\n }\r\n\r\n // 28 to make sure the icon never stands alone - Icon width = 16px, icon margin-left: 5px\r\n if (differenceOfWidth < 28 && headlineText.html().indexOf('
') === -1 ) {\r\n if (lastWord.length !== 0) {\r\n const headlineTextLength = headlineText.html().length;\r\n const headlineWithoutLastWord = headlineTextLength - lastWord.length;\r\n\r\n // string without last word\r\n const headlineSliced = headlineText.html().slice(0, headlineWithoutLastWord);\r\n\r\n // building string with break\r\n const newHeadlineHtml = headlineSliced + '
' + lastWord;\r\n\r\n this._elements.$headlineText.html(newHeadlineHtml);\r\n }\r\n }\r\n\r\n }\r\n }\r\n\r\n _getLastWordOfHeadline(headlineText) {\r\n let lastWord = '';\r\n\r\n headlineText.each((index, item) => {\r\n const headlineTextSplit = item.innerText.split(\" \");\r\n lastWord = headlineTextSplit[headlineTextSplit.length - 1];\r\n });\r\n\r\n return lastWord;\r\n }\r\n\r\n _resetString(headlineText) {\r\n if (headlineText.indexOf('
') !== -1) {\r\n this._elements.$headlineText.html(headlineText.replace('
', ''));\r\n }\r\n }\r\n}\r\n\r\nmoduleRegistry.registerModule('Textblock', Textblock);\r\nmoduleRegistry.autoApplyModule('Textblock', config.selectors.root);\r\n","/* eslint-disable prefer-arrow-callback */\r\nimport { Breakpoints } from '../breakpoints/breakpoints';\r\nimport { DragBar } from '../drag-bar/drag-bar';\r\nimport moduleRegistry from '../module-registry/module-registry';\r\n\r\nconst config = {\r\n selectors: {\r\n root: '.timeline',\r\n content: '.timeline__content',\r\n yearline: '.timeline__yearline',\r\n items: '.timeline__items',\r\n item: '.timeline__item',\r\n itemYearIndicator: '.timeline__yearline',\r\n yearControl: '.timeline__year-control',\r\n timelineInner: '.timeline__inner',\r\n fixedYearCentury: '.timeline__fixed-year-century-inner',\r\n fixedYearDecade: '.timeline__fixed-year-decade-inner',\r\n fixedYearDecadeText: '.timeline__fixed-year-decade-inner',\r\n intro: '.timeline__intro',\r\n controlBtn: '.drag-bar__control-btn',\r\n },\r\n dataAttributes: {\r\n items: 'items',\r\n year: 'year',\r\n },\r\n classNames: {\r\n translated: 'timeline__content--translated',\r\n prevItem: 'timeline__item--prev',\r\n fixedYearDecadeHidden: 'timeline__fixed-year-decade-inner--hidden',\r\n fixedYearDecadeShowTransition: 'timeline__fixed-year-decade-inner--show-transition',\r\n fixedYearCenturyHidden: 'timeline__fixed-year-century-inner--hidden',\r\n fixedYearCenturyShowTransition: 'timeline__fixed-year-century-inner--show-transition',\r\n introHidden: 'timeline__intro--hidden',\r\n },\r\n};\r\n\r\nclass Timeline {\r\n constructor($rootElement) {\r\n this._$rootElement = $rootElement;\r\n this._elements = null;\r\n this._items = [];\r\n this._years = [];\r\n this._decades = [];\r\n this._centurys = [];\r\n this._currentYear = 0;\r\n this._previousCentury = 0;\r\n this._lastCentury = 0;\r\n this._lastDecade = 0;\r\n this._currentDecade = 0;\r\n this._currentCentury = 0;\r\n this._currentIndex = 0;\r\n this._activeIndex = 0;\r\n this._translate = 0;\r\n this._itemWidth = 0;\r\n this._itemMarginRight = 0;\r\n this._yearLineItemLineLeft = 0;\r\n this._centuryWidth = 0;\r\n this._previousGoTo = 0;\r\n this._isLeft = true;\r\n this._decadeWidth = 0;\r\n this._lastClickCentury = 0;\r\n this._animationLength = 750;\r\n this._lineOffset = 20;\r\n this._yearEndMarker = '';\r\n \r\n // mobile variables\r\n this._touchStart = 0;\r\n this._delta = 0;\r\n this._isBeingTouched = false;\r\n }\r\n\r\n init() {\r\n const smartedit = $('body').data('smartedit');\r\n\r\n if(smartedit === true || smartedit === 'true') {\r\n return;\r\n }\r\n \r\n this._yearEndMarker = this._$rootElement.data('year-end-marker');\r\n this._elements = this._getDomElements();\r\n // this._elements.$items.slick(config.sliderConfig);\r\n this._extractYearsAndDecades();\r\n\r\n\r\n // create draggable div\r\n this._calcItemWidth();\r\n\r\n const itemHTML = this._elements.$items[0].innerHTML;\r\n\r\n let draggable = `\r\n
\r\n ${itemHTML}\r\n
\r\n `;\r\n\r\n this._elements.$items.html(draggable);\r\n \r\n this._activeIndex = 0;\r\n this._elements.$items.find(config.selectors.item).find('img').attr('draggable', false);\r\n this._calcItemMarginRight();\r\n this._generateYearline();\r\n this._addEventListeners();\r\n this._initBar();\r\n this._setItemsHeight();\r\n this._elements.$fixedYearCentury.html(this._centurys[0]);\r\n this._centuryWidth = this._elements.$fixedYearCentury.width();\r\n this._elements.$fixedYearDecade.html(this._decades[0]);\r\n this._decadeWidth = this._$rootElement.find('.timeline__fixed-year-decade').width();\r\n this._currentCentury = this._centurys[0];\r\n this._currentDecade = this._decades[0];\r\n this._setYearlineItemLeft();\r\n }\r\n\r\n _getDomElements() {\r\n return {\r\n $content: this._$rootElement.find(config.selectors.content),\r\n $yearline: this._$rootElement.find(config.selectors.yearline),\r\n $items: this._$rootElement.find(config.selectors.items),\r\n $item: this._$rootElement.find(config.selectors.item),\r\n $yearControl: this._$rootElement.find(config.selectors.yearControl),\r\n $timelineInner: this._$rootElement.find(config.selectors.timelineInner),\r\n $fixedYearCentury: this._$rootElement.find(config.selectors.fixedYearCentury),\r\n $fixedYearDecade: this._$rootElement.find(config.selectors.fixedYearDecade),\r\n $fixedYearDecadeText: this._$rootElement.find(config.selectors.fixedYearDecadeText),\r\n $intro: this._$rootElement.find(config.selectors.intro),\r\n };\r\n }\r\n\r\n _addEventListeners() {\r\n const _this = this;\r\n\r\n // x value to calculate scroll distance since mousedown\r\n let lastPageX = 0;\r\n\r\n // and additional translate value with which we start to calculate\r\n let startTranslate = 0;\r\n\r\n // mobile device handler\r\n this._$rootElement.find('.timeline__draggable').on('touchstart', () => this._onTouchStart());\r\n this._$rootElement.find('.timeline__draggable').on('touchmove', (e) => this._onTouchMove(e));\r\n\r\n // desktop drag handler\r\n this._$rootElement.find('.timeline__draggable').on('mousedown', function(e){\r\n\r\n if(Breakpoints.isBreakpoint('xs') || Breakpoints.isBreakpoint('sm')) {\r\n return;\r\n }\r\n\r\n if(_this._isTouchDevice() || _this._isBeingTouched) return;\r\n // console.log('mousedown');\r\n lastPageX = 0;\r\n startTranslate = _this._translate;\r\n // console.log('startTranslate: ', startTranslate);\r\n\r\n _this._$rootElement.find('.timeline__fixed-year-century').css('opacity', `1`);\r\n _this._$rootElement.find('.timeline__year-line-item-decade').css('transition', `none`);\r\n\r\n // cancel when mouseup\r\n $(this).one('mouseup', function(e) {\r\n // console.log('mouseup');\r\n $(this).off('mousemove');\r\n\r\n _this._goToFromClick();\r\n });\r\n\r\n let previousDifference = 0;\r\n let isLeft = false;\r\n\r\n $(this).on('mousemove', function(e){\r\n if(lastPageX === 0) {\r\n lastPageX = e.pageX;\r\n }\r\n\r\n const difference = lastPageX - e.pageX;\r\n isLeft = difference - previousDifference > 0;\r\n const translateX = -difference - startTranslate > 0 ? 0 : -difference - startTranslate;\r\n _this._translate = translateX;\r\n\r\n // console.log('scroll distance', _this._getPositiveScrollDistanceFromContent());\r\n\r\n // if(_this._getPositiveScrollDistanceFromContent() > 30) {\r\n // const currentItem = _this._$rootElement.find(`.timeline__year-line-item[data-index=\"${_this._activeIndex}\"]`);\r\n // if(currentItem.hasClass('timeline__year-line-item--no-century')) {\r\n // currentItem.find('.timeline__year-line-item-century').css('width', 0);\r\n // }\r\n // }\r\n\r\n if(_this._translate !== 0 && _this._translate > (Math.ceil(_this._decadeWidth) + this._lineOffset)) {\r\n // console.log('line hits century');\r\n }\r\n\r\n _this._updateActiveIndexByPosition();\r\n _this._updateIntroOpacity();\r\n _this._updateDecadeOpacity();\r\n _this._updateDragbar();\r\n _this._updateTranslations();\r\n _this._updateFixedYearState();\r\n\r\n previousDifference = difference;\r\n }); \r\n });\r\n\r\n $('body').on('click', function(e) {\r\n _this._$rootElement.find('.timeline__draggable').off('mousemove');\r\n });\r\n\r\n $(window).on('resize', () => {\r\n if(this._isTouchDevice() || this._isBeingTouched) return;\r\n\r\n this._setControlBtnWidth();\r\n this._setItemsHeight();\r\n this._calcItemWidth();\r\n this._calcItemMarginRight();\r\n this._updateIntroOpacity();\r\n this._updateTranslations();\r\n this._goTo();\r\n });\r\n }\r\n\r\n _onTouchMove(e) {\r\n if(!this._isBeingTouched) return;\r\n\r\n const position = (e.changedTouches[0].clientX - window.innerWidth / 2) * 0.5;\r\n\r\n if(this._touchStart === 0) {\r\n this._touchStart = position\r\n }\r\n\r\n this._delta = position; \r\n }\r\n\r\n _onTouchStart() {\r\n if(!this._isBeingTouched) {\r\n this._$rootElement.find('.timeline__draggable').one(\"touchend\", () => this._onTouchEnd());\r\n }\r\n \r\n this._isBeingTouched = true;\r\n }\r\n\r\n _onTouchEnd() {\r\n if(!this._isBeingTouched) return;\r\n \r\n if(this._delta - this._touchStart > 0) {\r\n if(this._activeIndex > 0) {\r\n this._activeIndex = this._activeIndex - 1;\r\n this._goToFromClick(true);\r\n }\r\n } else {\r\n if(this._activeIndex < this._elements.$item.length - 1) {\r\n this._activeIndex = this._activeIndex + 1;\r\n this._goToFromClick(true);\r\n }\r\n }\r\n\r\n this._touchStart = 0;\r\n\r\n setTimeout(() => {\r\n this._isBeingTouched = false; \r\n }, this._animationLength)\r\n \r\n }\r\n\r\n _calcItemWidth() {\r\n const itemWidth = $(this._elements.$items[0]).width();\r\n this._elements.$items.find(config.selectors.item).width(itemWidth);\r\n this._itemWidth = itemWidth;\r\n }\r\n\r\n _calcItemMarginRight() {\r\n const itemMarginString = this._elements.$items.find(config.selectors.item).css('marginRight');\r\n this._itemMarginRight = Number(itemMarginString.substring(0, itemMarginString.length - 2));\r\n }\r\n\r\n _setYearlineItemLeft() {\r\n this._$rootElement.find('.timeline__year-line-item').each((i, el) => {\r\n const $el = $(el);\r\n const centuryWidth = $el.find('.timeline__year-line-item-century').width() || 0;\r\n const decadeWidth = $el.find('.timeline__year-line-item-decade').width() || 0;\r\n const combinedWidth = centuryWidth + decadeWidth;\r\n const width = combinedWidth === 0 ? this._itemMarginRight + this._itemWidth + this._lineOffset : this._itemMarginRight + this._itemWidth - combinedWidth - this._lineOffset;\r\n const left = combinedWidth === 0 ? combinedWidth : combinedWidth + 10;\r\n this._yearLineItemLineLeft = left;\r\n this._yearLineItemLineWidth = width;\r\n $el.find('.timeline__year-line-item-line').css('width', width);\r\n $el.lineWidth = width;\r\n $el.find('.timeline__year-line-item-line').css('right', combinedWidth === 0 ? 0 : this._lineOffset);\r\n });\r\n }\r\n\r\n _updateActiveIndexByPosition() {\r\n const oldIndex = this._activeIndex;\r\n this._activeIndex = this._getActiveIndexByPosition();\r\n\r\n if(oldIndex !== this._activeIndex) {\r\n // console.log('index changed while dragging');\r\n }\r\n }\r\n\r\n _getActiveIndexByPosition() {\r\n return Math.ceil(this._translate / Math.ceil(this._itemWidth + this._itemMarginRight)) * -1;\r\n }\r\n\r\n _updateIntroOpacity() {\r\n let introOpacityFactor = this._translate / (this._itemMarginRight + this._itemWidth) * -1;\r\n introOpacityFactor = 1 - (introOpacityFactor > 1 ? 1 : introOpacityFactor);\r\n this._elements.$intro.css('opacity', introOpacityFactor);\r\n }\r\n\r\n _updateDecadeOpacity() {\r\n const activeIndex = this._getActiveIndexByPosition();\r\n const currentItem = this._$rootElement.find(`.timeline__year-line-item[data-index=\"${activeIndex}\"]`);\r\n\r\n if(activeIndex === 0) {\r\n let decadeOpacityFactor = 1 - ((this._translate % ((this._itemWidth + this._itemMarginRight))) / (-100))\r\n currentItem.find('.timeline__year-line-item-decade').css('opacity', decadeOpacityFactor);\r\n currentItem.find('.timeline__year-line-item-line').css('opacity', decadeOpacityFactor); \r\n } else {\r\n let decadeOpacityFactor = 1 - ((this._translate % ((this._itemWidth + this._itemMarginRight) * activeIndex)) / (-100 * activeIndex))\r\n currentItem.find('.timeline__year-line-item-decade').css('opacity', decadeOpacityFactor); \r\n currentItem.find('.timeline__year-line-item-line').css('opacity', decadeOpacityFactor); \r\n }\r\n } \r\n\r\n _updateDragbar() {\r\n const $bar = this._elements.$yearControl.find(DragBar.getClassname());\r\n DragBar.setIndex($bar, this._activeIndex); \r\n }\r\n\r\n _getScrollDistanceFromContent() {\r\n const factor = (this._itemWidth + this._itemMarginRight) * this._activeIndex;\r\n if(factor === 0) {\r\n return this._translate;\r\n } else {\r\n return this._translate % ((this._itemWidth + this._itemMarginRight) * this._activeIndex);\r\n }\r\n }\r\n\r\n _getPositiveScrollDistanceFromContent() {\r\n return this._getScrollDistanceFromContent() * -1;\r\n }\r\n\r\n _updateTranslations() {\r\n const activeIndex = this._getActiveIndexByPosition();\r\n const prevItem = this._$rootElement.find(`.timeline__year-line-item[data-index=\"${activeIndex - 1}\"]`);\r\n const currentItem = this._$rootElement.find(`.timeline__year-line-item[data-index=\"${activeIndex}\"]`);\r\n const nextItem = this._$rootElement.find(`.timeline__year-line-item[data-index=\"${activeIndex + 1}\"]`);\r\n\r\n let additionalTranslate = this._$rootElement.find('.timeline__fixed-year-century').width() + this._elements.$intro.width() - this._itemWidth;\r\n additionalTranslate = additionalTranslate * (this._translate % (this._itemWidth + this._itemMarginRight) / (this._itemWidth + this._itemMarginRight));\r\n\r\n // apply transformations\r\n this._$rootElement.find('.timeline__year-line-root').css('transform', `translateX(${this._translate}px)`); \r\n this._$rootElement.find('.timeline__draggable').css('transform', `translateX(${this._translate}px)`); \r\n\r\n if(additionalTranslate < -5) {\r\n nextItem.find('.timeline__year-line-item-decade').css('transform', `translateX(${additionalTranslate * -1}px)`); \r\n nextItem.find('.timeline__year-line-item-century').css('transform', `translateX(${additionalTranslate * -1}px)`); \r\n }\r\n \r\n\r\n if(nextItem.hasClass('timeline__year-line-item--no-decade')) {\r\n currentItem.find('.timeline__year-line-item-line').css('right', `${additionalTranslate}px`);\r\n } else {\r\n currentItem.find('.timeline__year-line-item-line').css('right', `${additionalTranslate + this._lineOffset}px`);\r\n }\r\n \r\n currentItem.find('.timeline__year-line-item-line').css('width', `${this._yearLineItemLineWidth + (additionalTranslate) - this._lineOffset}px`); \r\n\r\n prevItem.find('.timeline__year-line-item-line').css('right', this._lineOffset);\r\n prevItem.find('.timeline__year-line-item-line').css('width', `${this._yearLineItemLineWidth - this._lineOffset * (this._activeIndex - 1)}px`); \r\n }\r\n\r\n _updateFixedYearState() {\r\n const nextItem = this._$rootElement.find(`.timeline__year-line-item[data-index=\"${this._activeIndex + 1}\"]`);\r\n const currentItem = this._$rootElement.find(`.timeline__year-line-item[data-index=\"${this._activeIndex}\"]`);\r\n\r\n this._currentCentury = currentItem.data('century');\r\n this._currentDecade = currentItem.data('decade');\r\n\r\n this._$rootElement.find('.timeline__fixed-year-century').html(this._currentCentury);\r\n this._$rootElement.find('.timeline__fixed-year-decade').html(this._currentDecade);\r\n \r\n if(nextItem.hasClass('timeline__year-line-item--no-decade')) {\r\n this._$rootElement.find('.timeline__fixed-year-decade').css('opacity', 1);\r\n } else {\r\n this._$rootElement.find('.timeline__fixed-year-decade').css('opacity', 0);\r\n }\r\n\r\n if(!nextItem.hasClass('timeline__year-line-item--no-century')) {\r\n this._$rootElement.find('.timeline__fixed-year-decade').css('opacity', 1);\r\n } else {\r\n \r\n }\r\n\r\n if(!nextItem.hasClass('timeline__year-line-item--no-decade') && !nextItem.hasClass('timeline__year-line-item--no-century')) {\r\n this._$rootElement.find('.timeline__fixed-year-decade').css('opacity', 0);\r\n this._$rootElement.find('.timeline__fixed-year-century').css('opacity', 0);\r\n // currentItem.find('.timeline__year-line-item-century').css('width', 'auto');\r\n currentItem.find('.timeline__year-line-item-decade').css('transform', 'none');\r\n }\r\n }\r\n\r\n _goToNew() {\r\n // console.log('_goToNew', this._activeIndex);\r\n const index = this._getActiveIndexByPosition();\r\n const currentItem = this._$rootElement.find(`.timeline__year-line-item[data-index=\"${index}\"]`);\r\n const marginFactor = this._itemMarginRight;\r\n const totalMargin = marginFactor * this._activeIndex;\r\n const totalItems = this._itemWidth * this._activeIndex;\r\n const total = totalItems + totalMargin + this._elements.$intro.width() - this._itemWidth;\r\n \r\n\r\n const difference = this._activeIndex === 0 ? -this._translate : -this._translate - total;\r\n const step = difference / 1000;\r\n\r\n this._updateDragbar();\r\n this._currentCentury = currentItem.data('century');\r\n this._currentDecade = currentItem.data('decade');\r\n\r\n let i = 0;\r\n for(let i = 0; i < 100; i++) {\r\n setTimeout(() => {\r\n this._translate += step;\r\n this._updateIntroOpacity();\r\n this._updateDecadeOpacity(); \r\n this._updateTranslations();\r\n this._updateFixedYearState();\r\n\r\n if(i === 99) {\r\n this._$rootElement.find('.timeline__fixed-year-century').html(this._currentCentury);\r\n this._$rootElement.find('.timeline__fixed-year-decade').html(this._currentDecade);\r\n }\r\n }, i)\r\n }\r\n\r\n }\r\n\r\n _goToFromClick(registerTouchEnd = false) {\r\n // isLeft means new index is higher\r\n const isLeft = this._activeIndex > this._previousGoTo;\r\n this._updateDragbar();\r\n\r\n const itemWidth = this._itemWidth;\r\n const draggable = this._$rootElement.find('.timeline__draggable');\r\n const yearlineRoot = this._$rootElement.find('.timeline__year-line-root');\r\n const currentItem = this._$rootElement.find(`.timeline__year-line-item[data-index=\"${this._activeIndex}\"]`);\r\n const prevItem = this._$rootElement.find(`.timeline__year-line-item[data-index=\"${this._activeIndex - 1}\"]`);\r\n const nextItem = this._$rootElement.find(`.timeline__year-line-item[data-index=\"${this._activeIndex + 1}\"]`);\r\n\r\n const currentDecade = currentItem.find('.timeline__year-line-item-decade');\r\n // currentItem.find('.timeline__year-line-item-line').css('left', this._centuryWidth + currentDecade.width());\r\n\r\n this._activateTransitions();\r\n\r\n this._lastDecade = this._currentDecade;\r\n this._lastCentury = this._currentCentury;\r\n this._currentCentury = currentItem.data('century');\r\n this._currentDecade = currentItem.data('decade');\r\n\r\n // handle decade & century opacity & line width\r\n if(isLeft) {\r\n if(this._activeIndex === 0) {\r\n this._$rootElement.find('.timeline__year-line-item').each((i, el) => {\r\n if(i === this._activeIndex) {\r\n $(el).find('.timeline__year-line-item-line').css('width', this._yearLineItemLineWidth + this._lineOffset); \r\n }\r\n });\r\n } else {\r\n this._$rootElement.find('.timeline__year-line-item').each((i, el) => {\r\n if(i < this._activeIndex) {\r\n // for all previous items, we let the decade fade out\r\n $(el).find('.timeline__year-line-item-decade').css('opacity', 0);\r\n\r\n // for all previous items, we let the line fade out\r\n $(el).find('.timeline__year-line-item-line').css('opacity', 0);\r\n\r\n // for all previous items, we let the line shrink\r\n $(el).find('.timeline__year-line-item-line').css('width', 0);\r\n } else if(i === this._activeIndex) {\r\n // for the active element, if it has a decade, we need to apply additional translation\r\n // for the active element, we need to adjust the line so it fits\r\n if(!$(el).hasClass('timeline__year-line-item--no-decade') && !$(el).hasClass('timeline__year-line-item--no-century')) {\r\n // if the yearline item which gets active doesnt have a century, but a decade, we need additional translate for its decade\r\n let additionalTranslate = 0;\r\n \r\n if(Breakpoints.isBreakpoint('xs') || Breakpoints.isBreakpoint('sm')) {\r\n\r\n } else {\r\n additionalTranslate += this._elements.$intro.width() - itemWidth;\r\n }\r\n \r\n $(el).find('.timeline__year-line-item-century').css('transform', `translateX(${additionalTranslate}px)`);\r\n $(el).find('.timeline__year-line-item-decade').css('transform', `translateX(${additionalTranslate}px)`);\r\n $(el).find('.timeline__year-line-item-line').css('width', this._yearLineItemLineWidth - this._lineOffset);\r\n } else if(!$(el).hasClass('timeline__year-line-item--no-decade') && $(el).hasClass('timeline__year-line-item--no-century')) {\r\n // if the yearline item which gets active doesnt have a century, but a decade, we need additional translate for its decade\r\n let additionalTranslate = this._centuryWidth;\r\n \r\n if(Breakpoints.isBreakpoint('xs') || Breakpoints.isBreakpoint('sm')) {\r\n\r\n } else {\r\n additionalTranslate += this._elements.$intro.width() - itemWidth;\r\n }\r\n \r\n $(el).find('.timeline__year-line-item-decade').css('transform', `translateX(${additionalTranslate}px)`);\r\n $(el).find('.timeline__year-line-item-line').css('width', this._yearLineItemLineWidth - this._lineOffset);\r\n\r\n } else {\r\n $(el).find('.timeline__year-line-item-line').css('width', $(el).lineWidth); \r\n }\r\n\r\n $(el).find('.timeline__year-line-item-line').css('opacity', 1);\r\n }\r\n\r\n // since we were going from low to high (isLeft), next items shouldnt need to get touched \r\n });\r\n }\r\n \r\n // if the decade changes, we need to hide the fixed decade\r\n if(this._currentDecade != this._lastDecade) {\r\n this._$rootElement.find('.timeline__fixed-year-decade').css('opacity', 0);\r\n }\r\n\r\n // if the century changes, we need to hide the fixed century\r\n if(this._currentCentury != this._lastCentury) {\r\n this._$rootElement.find('.timeline__fixed-year-century').css('opacity', 0);\r\n }\r\n } else {\r\n if(this._activeIndex === 0) {\r\n this._$rootElement.find('.timeline__year-line-item').each((i, el) => {\r\n // remove translation from all decades\r\n $(el).find('.timeline__year-line-item-decade').css('transform', `translateX(0)`);\r\n\r\n // for all items, we let the decade fade in\r\n $(el).find('.timeline__year-line-item-decade').css('opacity', 1);\r\n\r\n // for all items, we let the line fade in\r\n $(el).find('.timeline__year-line-item-line').css('opacity', 1);\r\n\r\n if(i === this._activeIndex) {\r\n $(el).find('.timeline__year-line-item-line').css('width', this._yearLineItemLineWidth); \r\n } else {\r\n // for all items, we let the line expand\r\n if($(el).hasClass('timeline__year-line-item--no-century') && $(el).hasClass('timeline__year-line-item--no-decade')) {\r\n const width = this._yearLineItemLineWidth + this._decadeWidth + this._centuryWidth + this._lineOffset;\r\n\r\n $(el).find('.timeline__year-line-item-line').css('width', width); \r\n } else if($(el).hasClass('timeline__year-line-item--no-century')) {\r\n const width = this._yearLineItemLineWidth + this._decadeWidth;\r\n $(el).find('.timeline__year-line-item-line').css('width', width); \r\n }\r\n }\r\n });\r\n } else {\r\n this._$rootElement.find('.timeline__year-line-item').each((i, el) => {\r\n if(i > this._activeIndex) {\r\n // for all next items, we set the default decade position\r\n $(el).find('.timeline__year-line-item-decade').css('transform', `translateX(0)`);\r\n\r\n // for all next items, we set the default century position\r\n $(el).find('.timeline__year-line-item-century').css('transform', `translateX(0)`);\r\n \r\n // for all next items, we let the decade fade in\r\n $(el).find('.timeline__year-line-item-decade').css('opacity', 1);\r\n\r\n // for all next items, we let the line fade in\r\n $(el).find('.timeline__year-line-item-line').css('opacity', 1);\r\n\r\n // for all next items, handle line width\r\n if($(el).hasClass('timeline__year-line-item--no-decade') && $(el).hasClass('timeline__year-line-item--no-century')) {\r\n const width = this._yearLineItemLineWidth + this._decadeWidth + this._centuryWidth + this._lineOffset * 2;\r\n $(el).find('.timeline__year-line-item-line').css('width', width);\r\n } else if($(el).hasClass('timeline__year-line-item--no-century')) {\r\n const width = this._yearLineItemLineWidth + this._centuryWidth;\r\n $(el).find('.timeline__year-line-item-line').css('width', width);\r\n } else {\r\n const width = this._yearLineItemLineWidth;\r\n $(el).find('.timeline__year-line-item-line').css('width', width);\r\n }\r\n } else if(i === this._activeIndex) {\r\n // for the active element, if id has a decade, we need to apply additional translation\r\n // for the active element, we need to adjust the line so it fits\r\n if(!$(el).hasClass('timeline__year-line-item--no-decade')) {\r\n // if the yearline item which gets active doesnt have a century, but a decade, we need additional translate for its decade\r\n let additionalTranslate = this._$rootElement.find('.timeline__fixed-year-century').width();\r\n \r\n if(Breakpoints.isBreakpoint('xs') || Breakpoints.isBreakpoint('sm')) {\r\n\r\n } else {\r\n additionalTranslate += this._elements.$intro.width() - itemWidth;\r\n }\r\n \r\n $(el).find('.timeline__year-line-item-decade').css('transform', `translateX(${additionalTranslate}px)`);\r\n }\r\n\r\n $(el).find('.timeline__year-line-item-line').css('opacity', 1);\r\n // $(el).find('.timeline__year-line-item-line').css('width', this._yearLineItemLineWidth );\r\n $(el).find('.timeline__year-line-item-line').css('width', this._yearLineItemLineWidth - this._lineOffset);\r\n }\r\n\r\n // since we were going from high to low (isLeft), previous items shouldnt need to get touched \r\n });\r\n }\r\n }\r\n\r\n // special reoutine to handle same index from drag event \r\n if(this._activeIndex === this._previousGoTo) {\r\n this._$rootElement.find('.timeline__year-line-item').each((i, el) => {\r\n if(i === this._activeIndex) {\r\n //start proof: if we clicked twice, proof if century changed and change opacity for line-item-decade (CL)\r\n if(this._lastCentury === this._currentCentury ) {\r\n $(el).find('.timeline__year-line-item-decade').css('opacity', 0);\r\n $(el).find('.timeline__year-line-item-decade').css('transform', `translateX(0px)`);\r\n\r\n } else {\r\n $(el).find('.timeline__year-line-item-decade').css('opacity', 1);\r\n }\r\n //end proof\r\n\r\n // $(el).find('.timeline__year-line-item-decade').css('opacity', 1);\r\n\r\n $(el).find('.timeline__year-line-item-line').css('opacity', 1);\r\n\r\n const width = this._yearLineItemLineWidth;\r\n\r\n $(el).find('.timeline__year-line-item-line').css('width', width); \r\n $(el).find('.timeline__year-line-item-line').css('right', 0); \r\n } \r\n });\r\n }\r\n\r\n // perform translations\r\n if(this._activeIndex === 0) {\r\n draggable.css('transform', `translateX(0px)`);\r\n yearlineRoot.css('transform', `translateX(0px)`);\r\n this._elements.$intro.css('opacity', 1);\r\n this._translate = 0;\r\n } else {\r\n this._elements.$intro.css('opacity', 0);\r\n const marginFactor = this._itemMarginRight;\r\n const totalMargin = marginFactor * this._activeIndex;\r\n const totalItems = itemWidth * this._activeIndex;\r\n let total = totalItems + totalMargin;\r\n \r\n if(Breakpoints.isBreakpoint('xs') || Breakpoints.isBreakpoint('sm')) {\r\n\r\n } else {\r\n total += this._elements.$intro.width() - itemWidth;\r\n\r\n }\r\n\r\n this._translate = total;\r\n draggable.css('transform', `translateX(${-total}px)`);\r\n yearlineRoot.css('transform', `translateX(${-total}px)`);\r\n }\r\n\r\n\r\n\r\n // if(this._activeIndex === 0) {\r\n // draggable.css('transform', `translateX(0px)`);\r\n // yearlineRoot.css('transform', `translateX(0px)`);\r\n // this._elements.$intro.css('opacity', 1);\r\n // this._translate = 0;\r\n // } else {\r\n // this._elements.$intro.css('opacity', 0);\r\n // const marginFactor = this._itemMarginRight;\r\n // const totalMargin = marginFactor * this._activeIndex;\r\n // const totalItems = itemWidth * this._activeIndex;\r\n // const total = totalItems + totalMargin + this._elements.$intro.width() - itemWidth;\r\n // this._translate = total;\r\n \r\n // this._$rootElement.find('.timeline__year-line-item-line').css('right', 0);\r\n\r\n // this._$rootElement.find('.timeline__year-line-item').each((i, el) => {\r\n // if (i === this._activeIndex) return;\r\n // const $el = $(el);\r\n // const centuryWidth = $el.find('.timeline__year-line-item-century').width() || 0;\r\n // const decadeWidth = $el.find('.timeline__year-line-item-decade').width() || 0;\r\n // const combinedWidth = centuryWidth + decadeWidth;\r\n // const left = combinedWidth === 0 ? combinedWidth : combinedWidth + 10;\r\n // this._yearLineItemLineLeft = left;\r\n // console.log('left', left);\r\n // // $el.find('.timeline__year-line-item-line').css('left', left);\r\n // });\r\n\r\n // draggable.css('transform', `translateX(${-total}px)`);\r\n // yearlineRoot.css('transform', `translateX(${-total}px)`);\r\n\r\n \r\n // prevItem.find('.timeline__year-line-item-decade').css('opacity', `0`);\r\n\r\n // if(currentItem.hasClass('timeline__year-line-item--no-century') && currentItem.hasClass('timeline__year-line-item--no-decade')) {\r\n // this._$rootElement.find('.timeline__fixed-year-decade').css('opacity', 1);\r\n // this._$rootElement.find('.timeline__fixed-year-century').css('opacity', 1);\r\n // } else if (currentItem.hasClass('timeline__year-line-item--no-century') && !currentItem.hasClass('timeline__year-line-item--no-decade')) {\r\n // this._$rootElement.find('.timeline__fixed-year-decade').css('opacity', 0);\r\n // this._$rootElement.find('.timeline__fixed-year-century').css('opacity', 1);\r\n // } else if (!currentItem.hasClass('timeline__year-line-item--no-century') && !currentItem.hasClass('timeline__year-line-item--no-decade')) {\r\n // this._$rootElement.find('.timeline__fixed-year-decade').css('opacity', 0);\r\n // this._$rootElement.find('.timeline__fixed-year-century').css('opacity', 0);\r\n // }\r\n\r\n // if(currentItem.hasClass('timeline__year-line-item--no-century')) {\r\n // if(!currentItem.hasClass('timeline__year-line-item--no-decade')) {\r\n // // if the yearline item which gets active doesnt have a century, but a decade, we need additional translate for its decade\r\n // const additionalTranslate = this._$rootElement.find('.timeline__fixed-year-century').width() + this._elements.$intro.width() - itemWidth;\r\n // currentItem.find('.timeline__year-line-item-decade').css('transform', `translateX(${additionalTranslate}px)`);\r\n // // prevItem.addClass('timeline__year-line-item--hide-line');\r\n // // this._$rootElement.find('.timeline__fixed-year-decade').css('opacity', 0);\r\n // } else {\r\n // // this._$rootElement.find('.timeline__fixed-year-decade').css('opacity', 1);\r\n // }\r\n // } else {\r\n // if(!currentItem.hasClass('timeline__year-line-item--no-decade')) {\r\n // // if the yearline item which gets active has a century, we need to hide the fixed century\r\n // this._$rootElement.find('.timeline__fixed-year-century').css('opacity', 0);\r\n // // this._$rootElement.find('.timeline__fixed-year-decade').css('opacity', 0);\r\n // const additionalTranslate = this._elements.$intro.width() - itemWidth; \r\n // currentItem.find('.timeline__year-line-item-decade').css('transform', `translateX(${additionalTranslate}px)`);\r\n // currentItem.find('.timeline__year-line-item-century').css('transform', `translateX(${additionalTranslate}px)`);\r\n // } else {\r\n // // this._$rootElement.find('.timeline__fixed-year-decade').css('opacity', 1);\r\n // }\r\n // }\r\n // }\r\n\r\n // // remove additional translation from all other inactive items\r\n // this._$rootElement.find('.timeline__year-line-item').each((i, el) => {\r\n // if(i===this._activeIndex) {\r\n // $(el).addClass('timeline__year-line-item--active');\r\n // $(el).removeClass('timeline__year-line-item--hide-line');\r\n\r\n // } else {\r\n // $(el).removeClass('timeline__year-line-item--active');\r\n\r\n // if(i >= this._activeIndex) {\r\n // $(el).removeClass('timeline__year-line-item--hide-line');\r\n // $(el).find('.timeline__year-line-item-decade').css('opacity', `1`);\r\n // }\r\n\r\n // if(i > this._activeIndex) {\r\n // $(el).find('.timeline__year-line-item-decade').css('transform', `translateX(0)`);\r\n // $(el).find('.timeline__year-line-item-century').css('transform', `translateX(0)`);\r\n // }\r\n\r\n // if(i < this._activeIndex) {\r\n // $(el).find('.timeline__year-line-item-decade').css('transform', `translateX(0)`);\r\n // }\r\n // }\r\n // });\r\n this._updateFixedYearHtml();\r\n\r\n setTimeout(() => {\r\n this._deactivateTransitions();\r\n\r\n if(registerTouchEnd) {\r\n // this._$rootElement.find('.timeline__draggable').one(\"touchend\", () => this._onTouchEnd());\r\n }\r\n \r\n\r\n // since the screen isnt in any interaction now, we can show the fixed year indicators\r\n this._$rootElement.find('.timeline__fixed-year-century').css('opacity', 1);\r\n this._$rootElement.find('.timeline__fixed-year-decade').css('opacity', 1);\r\n this._$rootElement.find('.timeline__year-line-item-line').css('opacity', 1);\r\n\r\n if(currentItem.data('index') === this._elements.$item.length - 1) {\r\n currentItem.find('.timeline__year-line-item-decade').css('opacity', 0);\r\n }\r\n }, this._animationLength);\r\n\r\n this._previousGoTo = this._activeIndex;\r\n }\r\n\r\n _activateTransitions() {\r\n const draggable = this._$rootElement.find('.timeline__draggable');\r\n const yearlineRoot = this._$rootElement.find('.timeline__year-line-root');\r\n\r\n this._$rootElement.find('.timeline__year-line-item-decade').css('transition', `transform ${this._animationLength / 1000}s ease-in-out, opacity ${this._animationLength / 1000}s ease-in-out`);\r\n this._$rootElement.find('.timeline__year-line-item-century').css('transition', `transform ${this._animationLength / 1000}s ease-in-out, opacity ${this._animationLength / 1000}s ease-in-out`);\r\n draggable.css('transition', `transform ${this._animationLength / 1000}s ease-in-out`);\r\n yearlineRoot.css('transition', `transform ${this._animationLength / 1000}s ease-in-out`);\r\n this._elements.$intro.css('transition', `opacity ${this._animationLength / 1000}s ease-in-out`);\r\n this._$rootElement.find('.timeline__year-line-item-line').css('transition', `width ${this._animationLength / 1000}s ease-in-out, right ${this._animationLength / 1000}s ease-in-out`);\r\n }\r\n\r\n _deactivateTransitions() {\r\n const draggable = this._$rootElement.find('.timeline__draggable');\r\n const yearlineRoot = this._$rootElement.find('.timeline__year-line-root');\r\n\r\n yearlineRoot.css('transition', `none`);\r\n draggable.css('transition', `none`);\r\n this._$rootElement.find('.timeline__year-line-item-line').css('transition', 'none');\r\n this._$rootElement.find('.timeline__year-line-item-decade').css('transition', 'none');\r\n this._$rootElement.find('.timeline__year-line-item-century').css('transition', 'none');\r\n this._elements.$intro.css('transition', 'none');\r\n this._$rootElement.find('.timeline__fixed-year-century').css('transition', 'none');\r\n this._$rootElement.find('.timeline__fixed-year-decade').css('transition', 'none');\r\n }\r\n\r\n _updateFixedYearHtml() {\r\n this._$rootElement.find('.timeline__fixed-year-century').html(this._currentCentury);\r\n this._$rootElement.find('.timeline__fixed-year-decade').html(this._currentDecade);\r\n }\r\n\r\n // fired when clicked on navi items and on mouseup after dragging\r\n _goTo(registerTouchEnd = false) {\r\n const isLeft = this._activeIndex > this._previousGoTo;\r\n\r\n this._updateDragbar();\r\n\r\n const itemWidth = this._itemWidth;\r\n const draggable = this._$rootElement.find('.timeline__draggable');\r\n const yearlineRoot = this._$rootElement.find('.timeline__year-line-root');\r\n const currentItem = this._$rootElement.find(`.timeline__year-line-item[data-index=\"${this._activeIndex}\"]`);\r\n const prevItem = this._$rootElement.find(`.timeline__year-line-item[data-index=\"${this._activeIndex - 1}\"]`);\r\n const nextItem = this._$rootElement.find(`.timeline__year-line-item[data-index=\"${this._activeIndex + 1}\"]`);\r\n\r\n const currentDecade = currentItem.find('.timeline__year-line-item-decade');\r\n // currentItem.find('.timeline__year-line-item-line').css('left', this._centuryWidth + currentDecade.width());\r\n\r\n // activate transitions\r\n this._$rootElement.find('.timeline__year-line-item-decade').css('transition', `transform 1s ease-in-out, opacity 0.4s ease`);\r\n this._$rootElement.find('.timeline__year-line-item-century').css('transition', `transform 1s ease-in-out, opacity 0.4s ease`);\r\n draggable.css('transition', `transform 1s ease-in-out`);\r\n yearlineRoot.css('transition', `transform 1s ease-in-out`);\r\n this._elements.$intro.css('transition', 'opacity 0.65s ease');\r\n this._$rootElement.find('.timeline__year-line-item-line').css('transition', 'left 0.65s ease, right 0.65s ease');\r\n\r\n const lastCentury = this._currentCentury;\r\n const lastDecade = this._currentDecade;\r\n\r\n this._currentCentury = currentItem.data('century');\r\n this._currentDecade = currentItem.data('decade');\r\n\r\n if(this._activeIndex === 0) {\r\n draggable.css('transform', `translateX(0px)`);\r\n yearlineRoot.css('transform', `translateX(0px)`);\r\n this._elements.$intro.css('opacity', 1);\r\n this._translate = 0;\r\n } else {\r\n this._elements.$intro.css('opacity', 0);\r\n const marginFactor = this._itemMarginRight;\r\n const totalMargin = marginFactor * this._activeIndex;\r\n const totalItems = itemWidth * this._activeIndex;\r\n const total = totalItems + totalMargin + this._elements.$intro.width() - itemWidth;\r\n this._translate = total;\r\n \r\n this._$rootElement.find('.timeline__year-line-item-line').css('right', 0);\r\n\r\n this._$rootElement.find('.timeline__year-line-item').each((i, el) => {\r\n if (i === this._activeIndex) return;\r\n const $el = $(el);\r\n const centuryWidth = $el.find('.timeline__year-line-item-century').width() || 0;\r\n const decadeWidth = $el.find('.timeline__year-line-item-decade').width() || 0;\r\n const combinedWidth = centuryWidth + decadeWidth;\r\n const left = combinedWidth === 0 ? combinedWidth : combinedWidth + 10;\r\n this._yearLineItemLineLeft = left;\r\n // $el.find('.timeline__year-line-item-line').css('left', left);\r\n });\r\n\r\n draggable.css('transform', `translateX(${-total}px)`);\r\n yearlineRoot.css('transform', `translateX(${-total}px)`);\r\n\r\n \r\n prevItem.find('.timeline__year-line-item-decade').css('opacity', `0`);\r\n\r\n if(currentItem.hasClass('timeline__year-line-item--no-century') && currentItem.hasClass('timeline__year-line-item--no-decade')) {\r\n this._$rootElement.find('.timeline__fixed-year-decade').css('opacity', 1);\r\n this._$rootElement.find('.timeline__fixed-year-century').css('opacity', 1);\r\n } else if (currentItem.hasClass('timeline__year-line-item--no-century') && !currentItem.hasClass('timeline__year-line-item--no-decade')) {\r\n this._$rootElement.find('.timeline__fixed-year-decade').css('opacity', 0);\r\n this._$rootElement.find('.timeline__fixed-year-century').css('opacity', 1);\r\n } else if (!currentItem.hasClass('timeline__year-line-item--no-century') && !currentItem.hasClass('timeline__year-line-item--no-decade')) {\r\n this._$rootElement.find('.timeline__fixed-year-decade').css('opacity', 0);\r\n this._$rootElement.find('.timeline__fixed-year-century').css('opacity', 0);\r\n }\r\n\r\n if(currentItem.hasClass('timeline__year-line-item--no-century')) {\r\n if(!currentItem.hasClass('timeline__year-line-item--no-decade')) {\r\n // if the yearline item which gets active doesnt have a century, but a decade, we need additional translate for its decade\r\n const additionalTranslate = this._$rootElement.find('.timeline__fixed-year-century').width() + this._elements.$intro.width() - itemWidth;\r\n currentItem.find('.timeline__year-line-item-decade').css('transform', `translateX(${additionalTranslate}px)`);\r\n // prevItem.addClass('timeline__year-line-item--hide-line');\r\n // this._$rootElement.find('.timeline__fixed-year-decade').css('opacity', 0);\r\n } else {\r\n // this._$rootElement.find('.timeline__fixed-year-decade').css('opacity', 1);\r\n }\r\n } else {\r\n if(!currentItem.hasClass('timeline__year-line-item--no-decade')) {\r\n // if the yearline item which gets active has a century, we need to hide the fixed century\r\n this._$rootElement.find('.timeline__fixed-year-century').css('opacity', 0);\r\n // this._$rootElement.find('.timeline__fixed-year-decade').css('opacity', 0);\r\n const additionalTranslate = this._elements.$intro.width() - itemWidth; \r\n currentItem.find('.timeline__year-line-item-decade').css('transform', `translateX(${additionalTranslate}px)`);\r\n currentItem.find('.timeline__year-line-item-century').css('transform', `translateX(${additionalTranslate}px)`);\r\n } else {\r\n // this._$rootElement.find('.timeline__fixed-year-decade').css('opacity', 1);\r\n }\r\n }\r\n }\r\n\r\n // remove additional translation from all other inactive items\r\n this._$rootElement.find('.timeline__year-line-item').each((i, el) => {\r\n if(i===this._activeIndex) {\r\n $(el).addClass('timeline__year-line-item--active');\r\n $(el).removeClass('timeline__year-line-item--hide-line');\r\n\r\n } else {\r\n $(el).removeClass('timeline__year-line-item--active');\r\n\r\n if(i >= this._activeIndex) {\r\n $(el).removeClass('timeline__year-line-item--hide-line');\r\n $(el).find('.timeline__year-line-item-decade').css('opacity', `1`);\r\n }\r\n\r\n if(i > this._activeIndex) {\r\n $(el).find('.timeline__year-line-item-decade').css('transform', `translateX(0)`);\r\n $(el).find('.timeline__year-line-item-century').css('transform', `translateX(0)`);\r\n }\r\n\r\n if(i < this._activeIndex) {\r\n $(el).find('.timeline__year-line-item-decade').css('transform', `translateX(0)`);\r\n }\r\n }\r\n });\r\n\r\n setTimeout(() => {\r\n yearlineRoot.css('transition', `none`);\r\n draggable.css('transition', `none`);\r\n this._$rootElement.find('.timeline__fixed-year-century').html(this._currentCentury);\r\n this._$rootElement.find('.timeline__fixed-year-decade').html(this._currentDecade);\r\n this._$rootElement.find('.timeline__fixed-year-century').css('opacity', 1);\r\n // this._$rootElement.find('.timeline__fixed-year-decade').css('opacity', 1);\r\n this._$rootElement.find('.timeline__year-line-item-decade').css('opacity', 1);\r\n this._$rootElement.find('.timeline__year-line-item-line').css('transition', 'none');\r\n this._elements.$intro.css('transition', 'none');\r\n this._$rootElement.find('.timeline__fixed-year-century').css('transition', 'none');\r\n this._$rootElement.find('.timeline__fixed-year-decade').css('transition', 'none');\r\n\r\n if(registerTouchEnd) {\r\n // this._$rootElement.find('.timeline__draggable').one(\"touchend\", () => this._onTouchEnd());\r\n }\r\n \r\n }, 1000);\r\n }\r\n\r\n _updateYearControl(index) {\r\n const $items = this._$rootElement.find(config.selectors.yearControlItem);\r\n $items.removeClass(config.classNames.yearControlItemActive);\r\n $items.removeClass(config.classNames.yearControlItemPreActive);\r\n this._elements.$yearControlBtn.css('left', `${index * 75}px`);\r\n\r\n $items.each((i, item) => {\r\n if (i === this._activeIndex) {\r\n $(item).addClass(config.classNames.yearControlItemActive);\r\n } else if (i <= this._activeIndex) {\r\n $(item).addClass(config.classNames.yearControlItemPreActive);\r\n }\r\n i++;\r\n });\r\n }\r\n\r\n _extractYearsAndDecades() {\r\n this._elements.$item.each((index, item) => {\r\n const $item = $(item);\r\n const year = $item.data(config.dataAttributes.year);\r\n const decade = this._getDecadeFromYear(year);\r\n const century = this._getCenturyFromYear(year);\r\n\r\n if (!this._years.includes(year)) this._years.push(year);\r\n if (!this._decades.includes(decade)) this._decades.push(decade);\r\n if (!this._centurys.includes(century)) this._centurys.push(century);\r\n });\r\n }\r\n\r\n _generateYearIndicators() {\r\n this._$rootElement.find(config.selectors.item).each((i, el) => {\r\n const $el = $(el);\r\n\r\n const $yearIndicator = $el.find(config.selectors.itemYearIndicator);\r\n const year = $el.data(config.dataAttributes.year);\r\n\r\n $yearIndicator.html(this._generateYearIndicatorForItem(year));\r\n });\r\n }\r\n\r\n _generateYearlineItem(year, isLast) {\r\n if (isNaN(year) || isLast) {\r\n return `\r\n
\r\n ${year}\r\n \r\n
\r\n `;\r\n }\r\n const firstPart = this._getCenturyFromYear(year);\r\n const secondPart = this._getDecadeFromYear(year);\r\n\r\n const centuryChange = this._lastCentury !== 0 && firstPart !== this._lastCentury;\r\n const decadeChange = this._lastDecade === 0 || secondPart !== this._lastDecade;\r\n\r\n this._lastDecade = secondPart;\r\n this._lastCentury = firstPart;\r\n\r\n return `\r\n
\r\n ${centuryChange ? `${firstPart}` : ''}\r\n ${decadeChange ? `${secondPart}` : ''}\r\n \r\n
\r\n `;\r\n }\r\n\r\n _getCenturyFromYear(year) {\r\n return year.toString().substring(0, 2);\r\n }\r\n\r\n _getDecadeFromYear(year, isLastElement = false) {\r\n if(isNaN(year)) {\r\n return year.toString().substring(2);\r\n }\r\n\r\n if(isLastElement) {\r\n return year.toString().substring(2) + this._yearEndMarker;\r\n }\r\n\r\n return year.toString().substring(2,3) + '0' + this._yearEndMarker;\r\n }\r\n\r\n _generateYearline() {\r\n let lastCentury = 0;\r\n let lastDecade = 0;\r\n const size = this._elements.$item.length;\r\n \r\n this._elements.$item.each((i, el) => {\r\n const $el = $(el);\r\n const year = $el.data(config.dataAttributes.year);\r\n const century = this._getCenturyFromYear(year);\r\n let decade = this._getDecadeFromYear(year);\r\n\r\n if(i === this._elements.$item.length-1) {\r\n decade = this._getDecadeFromYear(year, true)\r\n }\r\n\r\n let html = '';\r\n\r\n \r\n html = `\r\n
\r\n `;\r\n \r\n // generate a century at item position\r\n html += `\r\n \r\n ${century}\r\n \r\n `;\r\n \r\n \r\n if(decade !== lastDecade) {\r\n // generate a decade at item position\r\n html += `\r\n \r\n ${decade}\r\n \r\n `;\r\n }\r\n \r\n html += `\r\n \r\n \r\n \r\n `;\r\n \r\n html += '
';\r\n\r\n \r\n\r\n this._$rootElement.find('.timeline__year-line-root').append(html);\r\n\r\n lastCentury = century;\r\n lastDecade = decade;\r\n // $el.append(this._generateYearlineItem(year));\r\n });\r\n\r\n // this._elements.$yearline.html(html);\r\n }\r\n\r\n _initBar() {\r\n // create bar and append into dom\r\n const barHtml = DragBar.createLabeledHtml(this._years);\r\n this._elements.$yearControl.html(barHtml);\r\n\r\n // select bar and register callback\r\n const $bar = this._elements.$yearControl.find(DragBar.getClassname());\r\n\r\n DragBar.init($bar, (index) => {\r\n this._activeIndex = index; \r\n\r\n this._goToFromClick();\r\n \r\n });\r\n\r\n this._setControlBtnWidth();\r\n }\r\n\r\n _setControlBtnWidth() {\r\n const $bar = this._elements.$yearControl.find(DragBar.getClassname());\r\n const controlBar = $bar.find(config.selectors.controlBtn);\r\n controlBar.width($bar.width() / this._elements.$item.length);\r\n }\r\n\r\n _setItemsHeight() {\r\n if (Breakpoints.isBreakpoint('xs') || Breakpoints.isBreakpoint('sm') || Breakpoints.isBreakpoint('md') ) {\r\n setTimeout(() => {\r\n this._elements.$timelineInner.height('auto');\r\n }, 500);\r\n } else {\r\n \r\n setTimeout(() => {\r\n const sliderHeight = 750;\r\n this._elements.$timelineInner.height(`${sliderHeight}px`);\r\n }, 500);\r\n }\r\n }\r\n\r\n _isTouchDevice() {\r\n return (('ontouchstart' in window) ||\r\n (navigator.maxTouchPoints > 0) ||\r\n (navigator.msMaxTouchPoints > 0));\r\n }\r\n}\r\n\r\nmoduleRegistry.registerModule('Timeline', Timeline);\r\nmoduleRegistry.autoApplyModule('Timeline', config.selectors.root);\r\n","import moduleRegistry from '../module-registry/module-registry';\r\n\r\nconst config = {\r\n selectors: {\r\n root: '.video-round',\r\n controls: '.video__controls',\r\n videoComponent: '.video',\r\n video: '.video__video',\r\n videoMobile: '.video__video-mobile',\r\n videoWrapper: '.video__wrapper',\r\n videoRoundWrapper: '.video-round__video-wrapper',\r\n activateButton: '.video-round__icon-button',\r\n activateButtonWrapper: '.video-round__icon-button-wrapper',\r\n backdrop: '.video-round__backdrop',\r\n closeButton: '.video__close-button',\r\n playPauseBtn: '.video__play-pause',\r\n\r\n },\r\n classNames: {\r\n videoHide: 'video__video--hidden',\r\n videoWrapperSmall: 'video__wrapper--small',\r\n iconButtonWrapper: 'video-round__icon-button-wrapper--hidden',\r\n videoFullsizeWrapper: 'video-round__video-wrapper--full-size',\r\n videoFullscreen: 'video--fullscreen',\r\n videoControlsHidden: 'video__controls--hidden',\r\n },\r\n playIcon: '
',\r\n pauseIcon: '
',\r\n};\r\n\r\nclass VideoRound {\r\n constructor($rootElement) {\r\n this._$rootElement = $rootElement;\r\n this._elements = null;\r\n }\r\n\r\n init() {\r\n this._elements = this._getDomElements();\r\n\r\n if(this._elements.$video.length === 0) {\r\n this._elements.$activateButtonWrapper.hide();\r\n }\r\n\r\n this._elements.$videoWrapper.addClass(config.classNames.videoWrapperSmall);\r\n this._elements.$video.addClass(config.classNames.videoHide);\r\n this._elements.$videoMobile.addClass(config.classNames.videoHide);\r\n this._fullSizedVideo();\r\n this._closeVideo();\r\n }\r\n\r\n _getDomElements() {\r\n return {\r\n $body: $('body'),\r\n $html: $('html'),\r\n $controls: this._$rootElement.find(config.selectors.controls),\r\n $video: this._$rootElement.find(config.selectors.video),\r\n $videoMobile: this._$rootElement.find(config.selectors.videoMobile),\r\n $videoComponent: this._$rootElement.find(config.selectors.videoComponent),\r\n $videoWrapper: this._$rootElement.find(config.selectors.videoWrapper),\r\n $activateButton: this._$rootElement.find(config.selectors.activateButton),\r\n $activateButtonWrapper: this._$rootElement.find(config.selectors.activateButtonWrapper),\r\n $videoRoundWrapper: this._$rootElement.find(config.selectors.videoRoundWrapper),\r\n $backdrop: this._$rootElement.find(config.selectors.backdrop),\r\n $closeButton: this._$rootElement.find(config.selectors.closeButton),\r\n $playPauseBtn: this._$rootElement.find(config.selectors.playPauseBtn),\r\n };\r\n }\r\n\r\n // eslint-disable-next-line class-methods-use-this\r\n _addEventListeners() {\r\n }\r\n\r\n _removeStandardControls() {\r\n const videoWorks = !!document.createElement('video').canPlayType;\r\n\r\n if (videoWorks) {\r\n this._elements.$video[0].controls = false;\r\n this._elements.$controls.removeClass('hidden');\r\n }\r\n }\r\n\r\n _fullSizedVideo() {\r\n this._elements.$activateButtonWrapper.on('click', () => {\r\n this._elements.$video.removeClass(config.classNames.videoHide);\r\n this._elements.$videoMobile.removeClass(config.classNames.videoHide);\r\n this._elements.$videoWrapper.removeClass(config.classNames.videoWrapperSmall);\r\n this._elements.$controls.removeClass(config.classNames.videoControlsHidden);\r\n this._elements.$backdrop[0].style.opacity = '1';\r\n this._elements.$backdrop[0].style.visibility = 'visible';\r\n this._elements.$video[0].style.opacity = '1';\r\n this._elements.$video[0].style.visibility = 'visible';\r\n this._elements.$html.addClass('body--no-scroll');\r\n // this._elements.$video.show();\r\n this._elements.$videoMobile.show();\r\n this._elements.$activateButtonWrapper.addClass(config.classNames.iconButtonWrapper);\r\n this._elements.$video[0].player.play();\r\n\r\n // html.style.overflow = \"hidden\"\r\n // main.style.overflow = \"hidden\"\r\n // body.style.overflow = \"hidden\"\r\n });\r\n }\r\n\r\n _closeVideo() {\r\n const videoSettings = this._elements.$video[0];\r\n // eslint-disable-next-line no-unused-vars\r\n this._elements.$closeButton.on('click', (e) => {\r\n // this._elements.$video.hide();\r\n this._elements.$videoMobile.hide();\r\n this._elements.$video.addClass(config.classNames.videoHide);\r\n this._elements.$videoMobile.addClass(config.classNames.videoHide);\r\n this._elements.$videoWrapper.addClass(config.classNames.videoWrapperSmall);\r\n this._elements.$controls.addClass(config.classNames.videoControlsHidden);\r\n this._elements.$videoComponent.removeClass(config.classNames.videoFullscreen);\r\n this._elements.$activateButtonWrapper.removeClass(config.classNames.iconButtonWrapper);\r\n this._elements.$backdrop[0].style.opacity = '0';\r\n this._elements.$backdrop[0].style.visibility = 'hidden';\r\n this._elements.$video[0].style.opacity = '0';\r\n this._elements.$video[0].style.visibility = 'hidden';\r\n this._elements.$html.removeClass('body--no-scroll');\r\n videoSettings.player.pause();\r\n this._elements.$playPauseBtn.html(config.playIcon);\r\n });\r\n }\r\n}\r\n\r\nmoduleRegistry.registerModule('VideoRound', VideoRound);\r\nmoduleRegistry.autoApplyModule('VideoRound', config.selectors.root);\r\n","import moduleRegistry from '../module-registry/module-registry';\r\n\r\nconst config = {\r\n selectors: {\r\n root: '.video',\r\n video: '.video-js',\r\n videoCustomControls: '.video__controls',\r\n playPauseBtn: '.video__play-pause',\r\n seekslider: '.video__seekslider',\r\n currentTime: '.video__currentTime',\r\n durationTime: '.video__durationTime',\r\n volume: '.video__volume',\r\n fullscreen: '.video__fullscreen',\r\n captions: '.video__captions',\r\n thumbnail: '.video__thumbnail',\r\n thumbnailTimer: '.video__thumbnail-timer',\r\n\r\n volumeMute: '.video__volume--mute',\r\n volume25: '.video__volume--25',\r\n volume50: '.video__volume--50',\r\n volume75: '.video__volume--75',\r\n volume100: '.video__volume--100',\r\n },\r\n classNames: {\r\n fullscreen: 'video--fullscreen',\r\n overlay: 'gallery__main-slide-visual',\r\n },\r\n playIcon: '
Play',\r\n pauseIcon: '
Pause'\r\n};\r\n\r\nclass Video {\r\n constructor($rootElement) {\r\n this._$rootElement = $rootElement;\r\n this._elements = null;\r\n\r\n this._playPauseHandler = this._playPauseHandler.bind(this);\r\n //this._captionsHandler = this._captionsHandler.bind(this);\r\n this._seeksliderThumbnailOnHover = this._seeksliderTimerOnHover.bind(this);\r\n }\r\n\r\n init() {\r\n this._elements = this._getDomElements();\r\n this._playPauseHandler();\r\n this._seeksliderChangeHandler();\r\n // this._seeksliderTimeUpdate();\r\n this._setVolume();\r\n this._setFullscreen();\r\n this._screenClick();\r\n this._createMenuItems();\r\n this._seeksliderTimerOnHover();\r\n // Funkction for video thumbnail base set-up\r\n // this._renderThumbnail();\r\n \r\n }\r\n\r\n _getDomElements() {\r\n return {\r\n $video: this._$rootElement.find(config.selectors.video),\r\n $videoCustomControls: this._$rootElement.find(config.selectors.videoCustomControls),\r\n $playPauseBtn: this._$rootElement.find(config.selectors.playPauseBtn),\r\n $seekslider: this._$rootElement.find(config.selectors.seekslider),\r\n $currentTime: this._$rootElement.find(config.selectors.currentTime),\r\n $durationTime: this._$rootElement.find(config.selectors.durationTime),\r\n $fullscreen: this._$rootElement.find(config.selectors.fullscreen),\r\n $captions: this._$rootElement.find(config.selectors.captions),\r\n $volume: this._$rootElement.find(config.selectors.volume),\r\n $volumeMute: this._$rootElement.find(config.selectors.volumeMute),\r\n $volume25: this._$rootElement.find(config.selectors.volume25),\r\n $volume50: this._$rootElement.find(config.selectors.volume50),\r\n $volume75: this._$rootElement.find(config.selectors.volume75),\r\n $volume100: this._$rootElement.find(config.selectors.volume100),\r\n $thumbnail: this._$rootElement.find(config.selectors.thumbnail),\r\n $thumbnailTimer: this._$rootElement.find(config.selectors.thumbnailTimer),\r\n };\r\n }\r\n\r\n _playPauseHandler() {\r\n const videoSettings = this._elements.$video[0];\r\n\r\n if(videoSettings && videoSettings.player) {\r\n this._seeksliderTimeUpdate(videoSettings);\r\n\r\n videoSettings.player.on('play', () => {\r\n this._elements.$playPauseBtn.html(config.pauseIcon);\r\n });\r\n }\r\n\r\n this._elements.$playPauseBtn.on('click', (e) => {\r\n if (videoSettings.player.paused()) {\r\n this._seeksliderTimeUpdate(videoSettings);\r\n videoSettings.player.play();\r\n this._elements.$playPauseBtn.html(config.pauseIcon);\r\n } else {\r\n videoSettings.player.pause();\r\n this._elements.$playPauseBtn.html(config.playIcon);\r\n }\r\n });\r\n\r\n \r\n }\r\n\r\n _seeksliderChangeHandler() {\r\n\r\n this._elements.$seekslider.on('change', () => {\r\n const videoSettings = this._elements.$video[0];\r\n\r\n const seekTo = videoSettings.player.duration() * (this._elements.$seekslider[0].value / 100);\r\n videoSettings.player.currentTime(seekTo);\r\n })\r\n }\r\n\r\n _seeksliderTimerOnHover() {\r\n const videoSettings = this._elements.$video[0];\r\n const progressBar = this._elements.$seekslider;\r\n const thumbnail = this._elements.$thumbnail;\r\n let mouseHoverTime = 0;\r\n thumbnail.hide();\r\n\r\n progressBar.on('mouseover', () => {\r\n thumbnail.show();\r\n })\r\n\r\n progressBar.on('mouseleave', () => {\r\n thumbnail.hide();\r\n })\r\n\r\n progressBar.mousemove((e) => {\r\n const mousePositionX = e.pageX;\r\n const progressBarPosition = progressBar[0].getBoundingClientRect();\r\n const mouseTime = (mousePositionX - progressBarPosition.x) / progressBarPosition.width * videoSettings.duration;\r\n mouseHoverTime = Math.floor((mouseTime * 100) / 100) / 100;\r\n if (parseFloat(mouseHoverTime).toFixed(2) < 0.00) {\r\n thumbnail.hide();\r\n return;\r\n }\r\n this._elements.$thumbnailTimer.html(parseFloat(mouseHoverTime).toFixed(2));\r\n thumbnail.css({'top':progressBarPosition.y,'left':(mousePositionX - progressBarPosition.x), 'position':'absolute', 'border':'1px solid black', 'padding':'5px', 'border-radius': '5px'});\r\n // this._renderThumbnail();\r\n });\r\n }\r\n\r\n // Gets canvas elements and renders a piece of the running video in thunmbnail element\r\n /*_renderThumbnail() {\r\n const video = document.querySelector(config.selectors.video);\r\n const processor = {};\r\n\r\n const timerCallback = () => {\r\n if (this.video.paused || this.video.ended) {\r\n return;\r\n }\r\n computeFrame();\r\n setTimeout(() => {\r\n timerCallback();\r\n }, 0);\r\n };\r\n\r\n video.addEventListener('loadeddata', () => {\r\n console.log('doLoad');\r\n this.video = video;\r\n\r\n this.c1 = document.getElementById('c1');\r\n this.ctx1 = this.c1.getContext('2d');\r\n\r\n this.c2 = document.getElementById('c2');\r\n this.ctx2 = this.c2.getContext('2d');\r\n\r\n console.log('canvas - c1: ', this.c1);\r\n console.log('canvas - ctx1: ', this.ctx1);\r\n\r\n console.log('canvas - c2: ', this.c2);\r\n console.log('canvas - ctx2: ', this.ctx2);\r\n\r\n video.addEventListener('play', () => {\r\n this.width = video.videoWidth / 2;\r\n this.height = video.videoHeight / 2;\r\n timerCallback();\r\n }, false);\r\n });\r\n\r\n const computeFrame = () => {\r\n console.log('computeFrame');\r\n this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);\r\n const frame = this.ctx1.getImageData(0, 0, this.width, this.height);\r\n const length = frame.data.length;\r\n const data = frame.data;\r\n\r\n for (let i = 0; i < length; i += 4) {\r\n const red = data[i + 0];\r\n const green = data[i + 1];\r\n const blue = data[i + 2];\r\n if (green > 100 && red > 100 && blue < 43) {\r\n data[i + 3] = 0;\r\n }\r\n }\r\n this.ctx2.putImageData(frame, 0, 0);\r\n };\r\n }*/\r\n\r\n _seeksliderTimeUpdate(videoSettings) {\r\n videoSettings.player.on('timeupdate', () => {\r\n if (videoSettings.player.ended()) {\r\n videoSettings.player.pause();\r\n return;\r\n };\r\n const newTime = videoSettings.player.currentTime() * (100 / videoSettings.player.duration());\r\n this._elements.$seekslider[0].value = newTime;\r\n let curmins = Math.floor(videoSettings.player.currentTime() / 60);\r\n let cursecs = Math.floor(videoSettings.player.currentTime() - curmins * 60);\r\n let durmins = Math.floor(videoSettings.player.duration() / 60);\r\n let dursecs = Math.floor(videoSettings.player.duration() - durmins * 60);\r\n if(cursecs < 10){ cursecs = \"0\"+cursecs; }\r\n if(dursecs < 10){ dursecs = \"0\"+dursecs; }\r\n if(curmins < 10){ curmins = \"0\"+curmins; }\r\n if(durmins < 10){ durmins = \"0\"+durmins; }\r\n this._elements.$currentTime.html(curmins+\":\"+cursecs);\r\n this._elements.$durationTime.html(durmins+\":\"+dursecs);\r\n })\r\n }\r\n\r\n _setVolume() {\r\n const videoSettings = this._elements.$video[0];\r\n \r\n this._elements.$volume.on('click', (e) => {\r\n \r\n const volumeValue = e.currentTarget.value / 100;\r\n \r\n if (volumeValue === 0) {\r\n videoSettings.player.volume(.25);\r\n this._elements.$volumeMute.hide();\r\n this._elements.$volume25.show();\r\n } else if (volumeValue === .25) {\r\n videoSettings.player.volume(.5);\r\n this._elements.$volume25.hide();\r\n this._elements.$volume50.show();\r\n } else if (volumeValue === .50) {\r\n videoSettings.player.volume(.75);\r\n this._elements.$volume50.hide();\r\n this._elements.$volume75.show();\r\n } else if (volumeValue === .75) {\r\n videoSettings.player.volume(1);\r\n this._elements.$volume75.hide();\r\n this._elements.$volume100.show();\r\n } else if (volumeValue === 1) {\r\n videoSettings.player.volume(0);\r\n this._elements.$volume100.hide();\r\n this._elements.$volumeMute.show();\r\n }\r\n })\r\n }\r\n\r\n _setFullscreen() {\r\n const videoSettings = this._elements.$video[0];\r\n this._elements.$fullscreen.on('click', () => {\r\n \r\n if (!this._$rootElement.parent().hasClass(config.classNames.overlay)) {\r\n if (this._$rootElement.hasClass(config.classNames.fullscreen)) {\r\n this._$rootElement.removeClass(config.classNames.fullscreen);\r\n this._$rootElement.find('.video__fullscreen-icon').removeClass('icon-arrowShrink').addClass('icon-StateDark13');\r\n } else {\r\n this._$rootElement.addClass(config.classNames.fullscreen)\r\n this._$rootElement.find('.video__fullscreen-icon').removeClass('icon-StateDark13').addClass('icon-arrowShrink');\r\n // this._elements.$backdrop.addClass('');\r\n }\r\n }\r\n\r\n\r\n });\r\n }\r\n\r\n _screenClick() {\r\n const videoSettings = this._elements.$video[0];\r\n this._elements.$video.on('click', (e) => {\r\n const videoPaused = this._elements.$video.hasClass('vjs-paused');\r\n\r\n if (videoPaused) {\r\n videoSettings.player.play();\r\n this._seeksliderTimeUpdate(videoSettings);\r\n this._elements.$playPauseBtn.html(config.pauseIcon);\r\n } else {\r\n videoSettings.player.pause();\r\n this._elements.$playPauseBtn.html(config.playIcon);\r\n }\r\n })\r\n }\r\n\r\n\r\n\r\n _createMenuItems(id, lang, label) {\r\n const videoSettings = this._elements.$video[0];\r\n const captionsMenuButtons = [];\r\n const listItem = document.createElement('li');\r\n const button = listItem.appendChild(document.createElement('button'));\r\n button.setAttribute('id', id);\r\n button.classList.add('video__captions-button');\r\n if (lang?.length > 0) button.setAttribute('lang', lang);\r\n button.value = label;\r\n button.setAttribute('data-state', 'inactive');\r\n button.appendChild(document.createTextNode(label));\r\n\r\n $(button).on('click', (v, i, a) => {\r\n captionsMenuButtons.map(() => {\r\n captionsMenuButtons[i].setAttribute('data-state', 'inactive');\r\n });\r\n const lang = this.getAttribute('lang');\r\n for (let i = 0; i < videoSettings.textTracks.length; i++) {\r\n if (videoSettings.textTracks[i].language == lang) {\r\n videoSettings.textTracks[i].mode = 'showing';\r\n this.setAttribute('data-sate', 'active');\r\n } else {\r\n videoSettings.textTracks[i].mode = 'hidden';\r\n }\r\n }\r\n $('video__captions-menu')[0].style.display = 'none';\r\n });\r\n captionsMenuButtons.push(button);\r\n return listItem;\r\n\r\n }\r\n}\r\n\r\nmoduleRegistry.registerModule('Video', Video);\r\nmoduleRegistry.autoApplyModule('Video', config.selectors.root);","import moduleRegistry from '../module-registry/module-registry';\n\nconst config = {\n selectors: {\n root: '.legal-overlay',\n checkbox: '.legal-overlay__checkbox',\n openBox: '.legal-overlay--open'\n },\n ids: {\n submit: 'cookie-confirm-btn',\n cancle: 'cookie-cancel-btn'\n },\n class: {\n rootOpen: 'legal-overlay--open'\n }\n \n};\n\nclass LegalOverlay {\n constructor($rootElement) {\n this._$rootElement = $rootElement;\n }\n\n init() {\n this._elements = this._getDomElements();\n this._addEventListeners();\n \n $(config.selectors.root).addClass('legal-overlay--open')\n if($(config.selectors.root).hasClass('legal-overlay--open')) {\n $('body').addClass('body--no-scroll')\n }\n }\n\n _getDomElements() {\n return {\n $root: this._$rootElement.find(config.selectors.root),\n $submit: document.getElementById(config.ids.submit),\n $cancle: document.getElementById(config.ids.cancle),\n $checkbox: this._$rootElement.find(config.selectors.checkbox),\n $openBox: this._$rootElement.find(config.selectors.openBox)\n };\n }\n\n _addEventListeners() {\n $(this._elements.$submit).on('click', (event) => {\n event.stopPropagation();\n if(!$(this._elements.$checkbox).checked) {\n $(this._elements.$checkbox).addClass('required')\n }else {\n $(this._elements.$checkbox).removeClass('required')\n $('body').removeClass('body--no-scroll')\n }\n })\n\n $(this._elements.$cancle).on('click', (event) => {\n event.stopPropagation();\n $('body').removeClass('body--no-scroll')\n })\n\n\n $(this._elements.$checkbox).on('click', (event) => {\n \n if($(this._elements.$checkbox)) {\n $(this._elements.$checkbox).removeClass('required')\n }\n \n })\n }\n\n \n}\n\nmoduleRegistry.registerModule('LegalOverlay', LegalOverlay);\nmoduleRegistry.autoApplyModule('LegalOverlay', config.selectors.root);","import { Breakpoints } from '../breakpoints/breakpoints';\r\nimport moduleRegistry from '../module-registry/module-registry';\r\n\r\nconst config = {\r\n selectors: {\r\n root: '.carousel-hero',\r\n slides: '.carousel-hero__slides',\r\n slide: '.carousel-hero__slide',\r\n next: '.carousel-hero__next',\r\n prev: '.carousel-hero__prev',\r\n nextSlide: '.carousel-hero__slide--next',\r\n prevSlide: '.carousel-hero__slide--prev',\r\n dots: '.carousel-hero__dots',\r\n dot: '.carousel-hero__dot',\r\n greyDot: '.carousel-hero__dot-grey',\r\n activeDot: '.carousel-hero__dot--active',\r\n playPauseBtn: '.carousel-hero__play-pause-btn',\r\n playPauseBtnIcon: '.carousel-hero__play-pause-btn-icon',\r\n playPauseBtnImageVideoTile: '.image-video-tile__play-pause-btn-icon',\r\n\r\n },\r\n classNames: {\r\n header: 'carousel-hero--header',\r\n slideDotActive: 'carousel-hero__dot--active',\r\n slideDotsPaused: 'carousel-hero__dots--paused',\r\n btnPlaying: 'carousel-hero__play-pause-btn--playing',\r\n slideActive: 'carousel-hero__slide--active',\r\n slidePrev: 'carousel-hero__slide--prev',\r\n slideNext: 'carousel-hero__slide--next',\r\n playIcon: 'icon-TickCirclePlay3',\r\n pauseIcon: 'icon-TickCirclePause3',\r\n imageVideoTilePlayIcon: 'image-video-tile__play-pause-btn-icon--play',\r\n imageVideoTilePauseIcon: 'image-video-tile__play-pause-btn-icon--pause',\r\n },\r\n dataAttributes: {\r\n slides: 'slides',\r\n slide: 'slide',\r\n dotnumber: 'dotnumber',\r\n imageLength: 'image-length',\r\n },\r\n sliderConfig: {\r\n arrows: false,\r\n dots: false,\r\n infinite: true,\r\n speed: 750,\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n mobileFirst: true,\r\n autoplay: true,\r\n autoplaySpeed: 4000,\r\n responsive: [\r\n {\r\n breakpoint: Breakpoints.BREAKPOINTS.SM,\r\n settings: {\r\n arrows: false,\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n centerMode: true,\r\n centerPadding: '8.33%',\r\n },\r\n },\r\n ],\r\n },\r\n sliderConfigHero: {\r\n arrows: false,\r\n dots: false,\r\n infinite: true,\r\n speed: 750,\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n mobileFirst: true,\r\n autoplay: false,\r\n autoplaySpeed: 4000,\r\n responsive: [\r\n {\r\n breakpoint: Breakpoints.BREAKPOINTS.SM,\r\n settings: {\r\n arrows: false,\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n centerMode: true,\r\n },\r\n },\r\n ],\r\n },\r\n sliderConfigProducts: {\r\n dots: false,\r\n arrows: false,\r\n infinite: true,\r\n speed: 750,\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n mobileFirst: true,\r\n autoplay: false,\r\n autoplaySpeed: 2500,\r\n centerPadding: '8.33%',\r\n responsive: [\r\n {\r\n breakpoint: Breakpoints.BREAKPOINTS.LG,\r\n settings: {\r\n arrows: false,\r\n slidesToShow: 1,\r\n slidesToScroll: 1,\r\n centerMode: true,\r\n centerPadding: '8.33%',\r\n },\r\n \r\n }\r\n ],\r\n },\r\n};\r\n\r\nclass CarouselHero {\r\n constructor($rootElement) {\r\n this._$rootElement = $rootElement;\r\n this._elements = null;\r\n this._isPaused = false;\r\n this._slides = [];\r\n this._currentSlide = 0;\r\n this._isInitialized = false;\r\n this._nextSlides = [];\r\n this._prevSlides = [];\r\n this._doneFix = false;\r\n this._imageDuration = 5000;\r\n this._currentTime = 0;\r\n this._timer = null;\r\n this._isPlaying = false;\r\n }\r\n\r\n async init() {\r\n const _this = this;\r\n this._elements = this._getDomElements();\r\n\r\n if (this._$rootElement.hasClass(config.classNames.header)) {\r\n this._elements.$slides.slick(config.sliderConfigHero);\r\n } else if (this._$rootElement.hasClass('carousel-hero--products')) {\r\n this._elements.$slides.slick(config.sliderConfigProducts);\r\n } else {\r\n this._elements.$slides.slick(config.sliderConfig);\r\n }\r\n\r\n if(this._$rootElement.hasClass(config.classNames.header)) {\r\n // read data attribute\r\n if(this._$rootElement.data(config.dataAttributes.imageLength)) {\r\n this._imageDuration = this._$rootElement.data(config.dataAttributes.imageLength) || 5000;\r\n }\r\n\r\n _this._updateDots(0);\r\n _this._updateClasses();\r\n _this._onSlideChange();\r\n\r\n this._elements.$slides.on('beforeChange', async (event, slick, currentSlide, nextSlide) => {\r\n clearInterval(_this._timer);\r\n _this._isPlaying = true;\r\n _this._currentSlide = nextSlide;\r\n _this._updateDots(nextSlide);\r\n _this._updateClasses();\r\n _this._onSlideChange();\r\n });\r\n\r\n this._elements.$next.on('click', () => {\r\n this._pauseAllVideos();\r\n this._isPlaying = false;\r\n this._elements.$slides.slick('slickNext');\r\n });\r\n \r\n this._elements.$prev.on('click', () => {\r\n this._pauseAllVideos();\r\n this._isPlaying = false;\r\n\r\n if (this._currentSlide === 0) {\r\n this._goToSlide(this._elements.$slide.length - 1);\r\n } else {\r\n this._elements.$slides.slick('slickPrev');\r\n }\r\n });\r\n\r\n this._elements.$greyDot.on('click', (e) => {\r\n this._isPlaying = false;\r\n const $currentTarget = $(e.currentTarget);\r\n const dotnumber = $currentTarget[0].lastElementChild.getAttribute('data-dotnumber');\r\n this._goToSlide(dotnumber);\r\n });\r\n } else {\r\n this._addEventListeners();\r\n this._updateDots(0);\r\n this._updateClasses();\r\n }\r\n\r\n this._isInitialized = true;\r\n }\r\n\r\n _getDomElements() {\r\n return {\r\n $slides: this._$rootElement.find(config.selectors.slides),\r\n $slide: this._$rootElement.find(config.selectors.slide),\r\n $next: this._$rootElement.find(config.selectors.next),\r\n $prev: this._$rootElement.find(config.selectors.prev),\r\n $dots: this._$rootElement.find(config.selectors.dots),\r\n $dot: this._$rootElement.find(config.selectors.dot),\r\n $greyDot: this._$rootElement.find(config.selectors.greyDot),\r\n $playPauseBtn: this._$rootElement.find(config.selectors.playPauseBtn),\r\n $playPauseBtnIcon: this._$rootElement.find(config.selectors.playPauseBtnIcon),\r\n };\r\n }\r\n\r\n _addEventListeners() {\r\n const _this = this;\r\n this._elements.$playPauseBtn.on('click', () => {\r\n this._isPaused = !this._isPaused;\r\n const $btn = this._$rootElement.find(config.selectors.playPauseBtn);\r\n if (this._isPaused) {\r\n this._elements.$slides.slick('slickPause');\r\n $btn.removeClass(config.classNames.btnPlaying);\r\n this._elements.$playPauseBtnIcon.removeClass(config.classNames.pauseIcon);\r\n this._elements.$playPauseBtnIcon.addClass(config.classNames.playIcon);\r\n this._elements.$dots.addClass(config.classNames.slideDotsPaused);\r\n } else {\r\n this._elements.$slides.slick('slickPlay');\r\n $btn.addClass(config.classNames.btnPlaying);\r\n this._elements.$playPauseBtnIcon.removeClass(config.classNames.playIcon);\r\n this._elements.$playPauseBtnIcon.addClass(config.classNames.pauseIcon);\r\n this._elements.$dots.removeClass(config.classNames.slideDotsPaused);\r\n }\r\n });\r\n\r\n this._elements.$greyDot.on('click', (e) => {\r\n const $currentTarget = $(e.currentTarget);\r\n const dotnumber = $currentTarget[0].lastElementChild.getAttribute('data-dotnumber');\r\n this._goToSlide(dotnumber);\r\n });\r\n\r\n this._elements.$next.on('click', () => {\r\n const videoSettings = this._$rootElement.find('.slick-current').find('.video-js')[0];\r\n if (videoSettings) {\r\n videoSettings.player.pause();\r\n $(config.selectors.playPauseBtnImageVideoTile).removeClass(config.classNames.pauseImageVideoTile)\r\n $(config.selectors.playPauseBtnImageVideoTile).addClass(config.classNames.playImageVideoTile)\r\n }\r\n this._elements.$slides.slick('slickNext');\r\n });\r\n\r\n this._elements.$prev.on('click', () => {\r\n const videoSettings = this._$rootElement.find('.slick-current').find('.video-js')[0];\r\n if (videoSettings) {\r\n videoSettings.player.pause();\r\n $(config.selectors.playPauseBtnImageVideoTile).removeClass(config.classNames.pauseImageVideoTile)\r\n $(config.selectors.playPauseBtnImageVideoTile).addClass(config.classNames.playImageVideoTile)\r\n }\r\n if (this._currentSlide === 0) {\r\n this._goToSlide(2);\r\n } else {\r\n this._elements.$slides.slick('slickPrev');\r\n }\r\n });\r\n\r\n this._$rootElement.find(config.selectors.slide).on('click', (x) => {\r\n const $slide = x.currentTarget.attributes.class.value;\r\n if ($slide.includes(config.classNames.slideNext)) {\r\n this._elements.$slides.slick('slickNext');\r\n } else if ($slide.includes(config.classNames.slidePrev)) {\r\n if (this._currentSlide === 0) {\r\n this._goToSlide(2);\r\n } else {\r\n this._elements.$slides.slick('slickPrev');\r\n }\r\n }\r\n });\r\n\r\n this._$rootElement.on('beforeChange', (event, slick, currentSlide, nextSlide) => {\r\n _this._currentSlide = nextSlide;\r\n _this._updateDots(nextSlide);\r\n _this._updateClasses();\r\n });\r\n\r\n this._$rootElement.on('breakpoint', (event, slick, currentSlide, nextSlide) => {\r\n _this._updateClasses();\r\n });\r\n }\r\n\r\n _pauseAllVideos() {\r\n this._$rootElement.find('.video-js').each((i, video) => {\r\n if(video && video.player) {\r\n video.player.pause();\r\n }\r\n });\r\n }\r\n\r\n _onVideoTimerTick() {\r\n const $currentSlide = $(this._elements.$slide[this._currentSlide]);\r\n const $video = $currentSlide.find('.video-js');\r\n const videoDuration = $video[0].player.duration() * 1000;\r\n const currentTime = $video[0].player.currentTime() * 1000;\r\n\r\n if(currentTime >= videoDuration) {\r\n clearInterval(this._timer);\r\n this._isPlaying = false;\r\n this._elements.$slides.slick('slickNext');\r\n\r\n return;\r\n }\r\n\r\n if(this._isPlaying) {\r\n this._currentTime = currentTime;\r\n }\r\n }\r\n\r\n _onImageTimerTick() {\r\n if((this._currentTime * 1000) >= this._imageDuration) {\r\n clearInterval(this._timer);\r\n this._isPlaying = false;\r\n this._elements.$slides.slick('slickNext');\r\n \r\n\r\n return;\r\n }\r\n \r\n if(this._isPlaying) {\r\n this._currentTime += 1;\r\n }\r\n }\r\n\r\n async _onSlideChange() {\r\n const _this = this;\r\n const $currentSlide = $(this._elements.$slide[this._currentSlide]);\r\n const $video = $currentSlide.find('.video-js');\r\n\r\n const isVideo = !($video.length === 0);\r\n this._pauseAllVideos();\r\n \r\n if(isVideo) {\r\n $currentSlide.find('.image-video-tile__play-pause-btn-icon').removeClass(config.classNames.imageVideoTilePlayIcon);\r\n $currentSlide.find('.image-video-tile__play-pause-btn-icon').addClass(config.classNames.imageVideoTilePauseIcon);\r\n\r\n \r\n\r\n try {\r\n $video.find('video')[0].removeAttribute(\"loop\");\r\n $video[0].removeAttribute(\"loop\");\r\n $video[0].player.loop(false);\r\n $video[0].player.muted(true);\r\n \r\n const promise = await $video[0].player.play();\r\n\r\n $currentSlide.find('.image-video-tile__image-wrapper').hide();\r\n $currentSlide.find('.image-video-tile__video-wrapper').show();\r\n $currentSlide.find('.image-video-tile__play-pause-btn-icon').removeClass(config.classNames.imageVideoTilePlayIcon);\r\n $currentSlide.find('.image-video-tile__play-pause-btn-icon').addClass(config.classNames.imageVideoTilePauseIcon);\r\n\r\n this._isPlaying = true;\r\n \r\n\r\n this._timer = setInterval(async function () {\r\n _this._onVideoTimerTick();\r\n }, 10);\r\n } catch (error) {\r\n // console.log('error', error);\r\n this._currentTime = 0;\r\n this._isPlaying = true;\r\n this._timer = setInterval(async function () {\r\n _this._onImageTimerTick();\r\n }, 1000);\r\n }\r\n } else {\r\n this._currentTime = 0;\r\n this._isPlaying = true;\r\n this._timer = setInterval(async function () {\r\n _this._onImageTimerTick();\r\n }, 1000);\r\n }\r\n }\r\n\r\n \r\n\r\n _updateClasses() {\r\n let $currentEl = null;\r\n this._prevSlides = [];\r\n this._nextSlides = [];\r\n \r\n\r\n this._$rootElement.find(config.selectors.slide).each((i, el) => {\r\n const $el = $(el);\r\n $el.removeClass(config.classNames.slidePrev);\r\n $el.removeClass(config.classNames.slideNext);\r\n $el.removeClass(config.classNames.slideActive);\r\n\r\n if (this._currentSlide === i) {\r\n $currentEl = $el;\r\n }\r\n\r\n if (this._isInitialized && this._currentSlide === 0 && $el.data('slick-index') === 3) {\r\n $el.addClass(config.classNames.slideActive);\r\n // this._$rootElement.find('[data-slick-index=1]').addClass(config.classNames.slidePrev);\r\n this._$rootElement.find('[data-slick-index=2]').addClass(config.classNames.slidePrev);\r\n this._$rootElement.find('[data-slick-index=4]').addClass(config.classNames.slidePrev);\r\n return;\r\n }\r\n\r\n if ($el.data('slick-index') < this._currentSlide) {\r\n if(!$el.hasClass(config.selectors.nextSlide)) {\r\n $el.addClass(config.classNames.slidePrev);\r\n this._prevSlides.push($el);\r\n }\r\n } else if (this._currentSlide === $el.data('slick-index')) {\r\n $el.addClass(config.classNames.slideActive);\r\n } else if ($el.data('slick-index') > this._currentSlide) {\r\n $el.addClass(config.classNames.slideNext);\r\n this._nextSlides.push($el);\r\n }\r\n });\r\n\r\n this._doneFix = true;\r\n }\r\n\r\n _updateDots(index) {\r\n const $items = this._$rootElement.find(config.selectors.dot);\r\n $items.removeClass(config.classNames.slideDotActive);\r\n $($items[index % $items.length]).addClass(config.classNames.slideDotActive);\r\n }\r\n\r\n _goToSlide(dotnumber) {\r\n this._currentSlide = dotnumber;\r\n this._elements.$slides.slick('slickGoTo', dotnumber);\r\n }\r\n}\r\n\r\nmoduleRegistry.registerModule('CarouselHero', CarouselHero);\r\nmoduleRegistry.autoApplyModule('CarouselHero', config.selectors.root);\r\n","import moduleRegistry from './module-registry/module-registry';\r\n\r\n// // Online-Catalogue\r\n// import '../../online-cataloge-pages/scripts/modules/main';\r\n\r\n// static imports start\r\n\r\nimport './scrolling/scrolling';\r\n\r\n// static imports end\r\n\r\nimport './abbreviation/abbreviation';\r\nimport './accordion-modul/accordion-modul';\r\nimport './anchor-section-bar/anchor-section-bar';\r\nimport './article-header/article-header';\r\nimport './bar-carousel/bar-carousel';\r\nimport './card-tiles/card-tiles';\r\nimport './category-overview/category-overview';\r\nimport './contact-accordion/contact-accordion';\r\nimport './cta-button/cta-button';\r\nimport './detail-form/detail-form';\r\nimport './directory/directory';\r\nimport './editorial/editorial';\r\nimport './footer/footer';\r\nimport './gallery/gallery';\r\nimport './image-slider/image-slider';\r\nimport './image-video-tile/image-video-tile';\r\nimport './interactive-launcher/interactive-launcher';\r\nimport './intro/intro';\r\nimport './language-form/language-form';\r\nimport './lightbox-slider/lightbox-slider';\r\nimport './location-map/location-map';\r\nimport './media/media';\r\nimport './navigation/navigation';\r\nimport './navigation/navigation-link-groups';\r\nimport './number-overview/number-overview';\r\nimport './one-trust-overlay/one-trust-overlay';\r\nimport './overlay-footer/overlay-footer';\r\nimport './overlay/overlay';\r\nimport './paralax-section/paralax-section';\r\nimport './search-bar/search-bar';\r\nimport './share/share';\r\nimport './slim-hero/slim-hero';\r\nimport './speciality-hero/speciality-hero';\r\nimport './sticky-section/sticky-section';\r\nimport './textblock/textblock';\r\nimport './timeline/timeline';\r\nimport './video-round/video-round';\r\nimport './video/video';\r\nimport './legal-overlay/legal-overlay';\r\n// import './large-image-video-tile-hero/large-image-video-tile-hero';\r\n\r\n// need to be after image video tile\r\nimport './carousel-hero/carousel-hero';\r\n// should be last\r\n// import './hover-icon/hover-icon';\r\n\r\nwindow.client = {\r\n moduleRegistry,\r\n};\r\n\r\n(() => {\r\n const navigatorUserAgentToLowerCase = window.navigator.userAgent.toLowerCase();\r\n const isChrome = navigatorUserAgentToLowerCase.indexOf('chrome');\r\n // eslint-disable-next-line no-unused-vars\r\n const isFirefox = navigatorUserAgentToLowerCase.indexOf('firefox');\r\n const isSafari = navigatorUserAgentToLowerCase.indexOf('safari');\r\n\r\n if (isSafari !== -1 && isChrome === -1) {\r\n document.body.setAttribute('class', 'safari');\r\n }\r\n})();\r\n\r\n/**\r\n // eslint-disable-next-line max-len, max-len\r\n * @description This function initializes Events for\r\n * buttons which should initialize the contact vue app\r\n * @author ALI\r\n */\r\n(() => {\r\n const $el = $('*[data-specialist]');\r\n\r\n $el.on('click', (e) => {\r\n console.log(e);\r\n const speciality = $el.data('specialist');\r\n const tabIndex = $el.data('tab-index') || 0;\r\n const prefilledSpeciality = $el.data('prefilled-speciality') || '';\r\n\r\n if (speciality) {\r\n window.dispatchEvent(new CustomEvent('ContactAppInit', { detail: { initialTabIndex: tabIndex, speciality: speciality, prefilledSpeciality: prefilledSpeciality } }));\r\n\r\n const html = `
\r\n \r\n `;\r\n\r\n $(e.currentTarget).append(html);\r\n }\r\n });\r\n})();\r\n"]}