')); } } } } return { init: init, } })(); })(); ; (function () { window.flagship.features.colorsViewer = (function () { const utils = window.flagship.common.utils, resize = window.flagship.common.resize, isLow = utils.isLowNetwork(); let els = {}, currDevice = resize.checkResolution() || '', pdViewer, isPresetOpenDown, isIntroEnd; const init = function () { els.viewerBtn = document.querySelector('.viewer-btn'); els.section = document.querySelector('.js-colors'); els.popup = document.querySelector('.js-viewer'); // viewer els.viewerParent = document.querySelector('.features-colors__viewer360-content'); if (!!isLow) { if (!els.viewerBtn) return; els.currentWrap = els.popup; setElements(); popupEvents.set(); bindEvents(); } else { if (!els.section) return; els.currentWrap = els.section; setElements(); bindEvents(); insertViewer(); } }; const setElements = function () { els.wrapEl = document.querySelector('#wrap'); els.contents = document.querySelector('#contents'); // viewer els.viewerSection = els.section.querySelector('.js-colors-viewer'); // viewer controls els.penBtn = els.currentWrap.querySelector('.js-pen-btn'); els.resetBtn = els.currentWrap.querySelector('.js-reset-btn'); // angle preset els.presetOpen = els.currentWrap.querySelector('.js-preset-open'); els.presetClose = els.currentWrap.querySelector('.js-preset-close'); els.presetLayer = els.currentWrap.querySelector('.js-preset-layer'); els.angleCta = els.currentWrap.querySelectorAll('.js-angle-cta'); }; const insertViewer = function () { const viewerAssetsPath = `/samsung/resources/global/galaxy-s25-ultra/common/viewer/`; const viewerBackupPath = `/samsung/resources/global/galaxy-s25-ultra/common/vendor/viewer/assets/`; const viewerInitModel = els.viewerSection.getAttribute('data-product-name') || 'galaxy-s25-ultra'; const viewerInitColor = els.viewerSection.getAttribute('data-product-color') || 'titanium-silverblue'; const viewerOptions = { assetsPath: viewerAssetsPath, backupPath: viewerBackupPath, bgcolor: 'transparent', gestureGuide: null, useZoom: false, usePan: false, x: -180, y: 0, minAngleX: -180, minAngleY: -90, maxAngleX: 180, maxAngleY: 90, zoom: currDevice === 'mobile' ? 95 : 'tablet' ? 90 : 55 }; const modelOptionList = [{ modelName: viewerInitModel, autoRotation: null, color: viewerInitColor, screen: true, screenMode: 'on', statusToggle: false, rotation: { x: 0, y: 0, z: 0 }, position: { x: 0, y: 0, z: 0 }, introPose: '20251h', introPoseOnce: '', introPoseHold: 5, introPoseHoldLimit: 9999, }, ]; insertViewerHTML(els.viewerParent) .then(() => { PDVIEWER.makeViewer(null, viewerOptions, modelOptionList); pdViewer = PDVIEWER.getViewer(); eventHandler.doubleClick(); els.viewerParent.isActivePen = modelOptionList[0].statusToggle ? true : false; // Viewer Loader image lazy load imageLoader.getLazyMedia(); imageLoader.setLazyMedia(); }); } const insertViewerHTML = function (targetEl) { return new Promise((res) => { const target = targetEl ? targetEl : document.body; const viewrHTML = ` `; target.insertAdjacentHTML('beforeend', viewrHTML); res(); }); }; const bindEvents = function () { eventHandler.load(); eventHandler.viewerEvents(); eventHandler.click(); eventHandler.mousedown(); eventHandler.mouseup(); if (!isLow) { eventList.setScene(); } }; const eventHandler = { load: function () { window.addEventListener('DOMContentLoaded', eventList.load, { once: true }); }, viewerEvents: function () { window.addEventListener('viewerLoadEnd', eventList.viewerLoadEnd); window.addEventListener('introPoseEnd', eventList.introPoseEnd); }, click: function () { els.penBtn && els.penBtn.addEventListener('click', eventList.clickPen); els.resetBtn && els.resetBtn.addEventListener('click', eventList.clickReset); els.presetOpen && els.presetOpen.addEventListener('click', eventList.openPresetPopup); for (let i = 0; i < els.angleCta.length; i++) { els.angleCta[i].addEventListener('click', eventList.setAngle); } els.contents.addEventListener('click', function (e) { if (e.target.classList.contains('js-reset-btn') || e.target.classList.contains('js-fold-btn') || e.target.classList.contains('js-preset-open') || e.target.closest('.js-preset-layer')) return; eventList.closePresetPopup(); }); }, mousedown: function () { els.presetOpen.addEventListener('mousedown', eventList.presetOpenDown); els.presetOpen.addEventListener('touchstart', eventList.presetOpenDown); }, mouseup: function () { els.presetOpen.addEventListener('mouseup', eventList.presetOpenUp); els.presetOpen.addEventListener('touchend', eventList.presetOpenUp); }, doubleClick: function () { if (!pdViewer || !pdViewer.viewer.domElement) return; pdViewer.viewer.domElement.addEventListener('dblclick', eventList.doubleClick); }, presetOpen: function () { window.addEventListener('focusin', eventList.focusInPreset); }, presetClose: function () { window.removeEventListener('focusin', eventList.focusInPreset); } }; const eventList = { load: function () { if (!!!isLow) { accessibility.pen.ariaLabel(); eventList.activePen(); } }, viewerLoadEnd: function () { pdViewer.hideLoader(); eventList.setViewerAltText(); eventList.runIntroPose(); }, introPoseEnd: function () { isIntroEnd = true; }, setScene: function () { els.sceneObj = SCROLLER({ trackElement: els.section, useFixed: false }); }, runIntroPose: function () { if (!isLow && els.viewerParent) { pdViewer.runIntroPoseAll(); } }, doubleClick: function () { if (!pdViewer.viewer.isInit || !isIntroEnd) return; if (pdViewer.getStatusToggleState() !== els.viewerParent.isActivePen) { els.viewerParent.isActivePen = pdViewer.getStatusToggleState(); eventList.activePen(); } }, clickPen: function () { if (!pdViewer.viewer.isInit || !isIntroEnd) return; if (!pdViewer.getStatusToggleState() || !els.viewerParent.isActivePen) { pdViewer.statusToggleActive(); els.viewerParent.isActivePen = true; pdViewer.setStatusToggle(true); } else { pdViewer.statusToggleInactive(); els.viewerParent.isActivePen = false; pdViewer.setStatusToggle(false); } accessibility.pen.ariaLabel(); eventList.activePen(); accessibility.pen.tagging(); }, clickReset: function () { if (!isIntroEnd) return; pdViewer.reset(); }, presetOpenDown: function () { isPresetOpenDown = true; }, presetOpenUp: function () { isPresetOpenDown = false; }, focusInPreset: function () { if (isPresetOpenDown) return; const isAngleCtaFocus = Array.from(els.angleCta).find((el) => el === document.activeElement); if (els.presetClose !== document.activeElement && !isAngleCtaFocus) { eventList.closePresetPopup(); } }, openPresetPopup: function () { if (!els.presetLayer.classList.contains('is-active')) { els.presetOpen.classList.add('is-open'); els.presetLayer.classList.add('is-active'); els.presetOpen.setAttribute('aria-expanded', true); els.presetClose.focus(); eventHandler.presetOpen(); } else { eventList.closePresetPopup(); } els.presetClose && els.presetClose.addEventListener('click', eventList.closePresetPopup); }, closePresetPopup: function (e) { if (els.presetLayer.classList.contains('is-active')) { els.presetOpen.classList.remove('is-open'); els.presetLayer.classList.remove('is-active'); els.presetOpen.setAttribute('aria-expanded', false); if (e && e.target.classList.contains('js-preset-close')) { els.presetOpen.focus(); } eventHandler.presetClose(); } }, activePen: function () { if (!isIntroEnd) return; if (!els.viewerParent.isActivePen) { if (els.penBtn.classList.contains('is-active-pen')) els.penBtn.classList.remove('is-active-pen'); els.penBtn.classList.add('is-inactive-pen'); } else { if (els.penBtn.classList.contains('is-inactive-pen')) els.penBtn.classList.remove('is-inactive-pen'); els.penBtn.classList.add('is-active-pen'); } }, setAngle: function () { if (!isIntroEnd) return; let target = this, targetAngle = target.getAttribute('data-js-angle'); pdViewer.setModelDirection(targetAngle); accessibility.selected(target); }, setViewerAltText: function () { let altText = ''; if (typeof LOCAL_VARI != 'undefined' && !!LOCAL_VARI) { const activeModel = els.viewerSection.getAttribute('data-product-name'); altText = activeModel === 'galaxy-s25-ultra' ? LOCAL_VARI.viewer.altText : ''; } pdViewer.setCanvasAltText(altText); } }; const accessibility = { pen: { ariaLabel: function () { if (!els.viewerParent.isActivePen) { els.penBtn.setAttribute('aria-label', `${els.penBtn.getAttribute('data-pen-on')}`); } else { els.penBtn.setAttribute('aria-label', `${els.penBtn.getAttribute('data-pen-off')}`); } }, tagging: function () { let dataOmni = els.penBtn.getAttribute('data-omni'), gaLa = els.penBtn.getAttribute('ga-la'); if (!els.viewerParent.isActivePen) { els.penBtn.setAttribute('data-omni', dataOmni.replace('pen-off', 'pen-on')); els.penBtn.setAttribute('ga-la', gaLa.replace('pen-off', 'pen-on')); } else { els.penBtn.setAttribute('data-omni', dataOmni.replace('pen-on', 'pen-off')); els.penBtn.setAttribute('ga-la', gaLa.replace('pen-on', 'pen-off')); } }, }, selected: function (target) { for (let i = 0; i < els.angleCta.length; i++) { els.angleCta[i].removeAttribute('title'); if (els.angleCta[i].classList.contains('is-selected')) { els.angleCta[i].classList.remove('is-selected'); } } if (!target.classList.contains('is-selected')) { target.classList.add('is-selected'); } if (typeof LOCAL_VARI != 'undefined' && !!LOCAL_VARI) { target.setAttribute('title', LOCAL_VARI.selected); } else { target.setAttribute('title', 'Selected'); } } }; return { init: init } })(); })(); (function () { window.flagship.features.colors = (function () { const init = function () { let colorchips = document.querySelectorAll('.js-colorchip'); for (let i = 0; i < colorchips.length; i++) { colorchips[i].type = colorchips[i].parentElement.classList.contains('js-popup-colorchip') ? 'popup' : 'colors'; colorchips[i].isStatic = colorchips[i].parentElement.getAttribute('data-static'); flagship.features.colorchip(colorchips[i]); } } return { init: init } })(); window.flagship.features.colorchip = function (colorchipWrap) { const utils = window.flagship.common.utils, resize = window.flagship.common.resize; let els = {}, activeClass = 'is-active', middleClass = 'is-middle', endClass = 'is-end', currentDevice = resize.checkResolution(), prevDevice = null, currentSlidesPerView = currentDevice.indexOf('mobile') > -1 ? 5 : 7, isIntroEnd = utils.isLowNetwork ? true : false; const init = function () { els.section = document.querySelector('.js-colors'); els.popup = document.querySelector('.js-viewer'); if (colorchipWrap.type == 'popup') { colorchipWrap.contentWrap = els.popup; } else { colorchipWrap.contentWrap = els.section; } setElements(); setProperty(); bindEvents(); }; const setElements = function () { // panel els.panelWrap = els.section.querySelector('.js-panel-wrap'); els.panelItems = els.panelWrap.querySelectorAll('.js-panel-item'); // colorchip els.swiperContainer = colorchipWrap.querySelector('.js-colorchip-container'); els.colorchipButtons = colorchipWrap.querySelectorAll('.js-colorchip-button'); els.swiperArrowWrap = colorchipWrap.querySelector('.js-arrow-wrap'); els.swiperNextArrow = colorchipWrap.querySelector('.js-colorchip-next'); els.swiperPrevArrow = colorchipWrap.querySelector('.js-colorchip-prev'); els.colorchipNames = colorchipWrap.querySelectorAll('.js-colorchip-name'); // viewer els.viewerSection = els.section.querySelector('.js-colors-viewer'); els.viewerWrap = els.viewerSection.querySelector('.features-colors__viewer360-content'); }; const setProperty = function () { for (let i = 0; i < els.colorchipButtons.length; i++) { els.colorchipButtons[i].index = i; } }; const bindEvents = function () { eventList.checkColorchipSwiper(); if (colorchipWrap.type != 'popup') eventList.setColors(0); eventHandler.click(); eventHandler.keydown(); resize.add(eventList.resize); eventHandler.scroll(); eventHandler.viewerEvents(); }; const eventHandler = { click: function () { for (let i = 0; i < els.colorchipButtons.length; i++) { els.colorchipButtons[i].addEventListener('click', eventList.clickColorchip); } els.swiperNextArrow.addEventListener('click', accessibility.clickArrow); els.swiperPrevArrow.addEventListener('click', accessibility.clickArrow); }, keydown: function () { els.swiperNextArrow.addEventListener('keydown', accessibility.clickArrow); els.swiperPrevArrow.addEventListener('keydown', accessibility.clickArrow); }, scroll: function () { window.addEventListener('scroll', eventList.scroll); }, viewerEvents: function () { window.addEventListener('introPoseEnd', eventList.introPoseEnd); } }; const eventList = { scroll: function () { let winOffsetBottom = window.pageYOffset + window.innerHeight, kv = document.querySelector('.features-kv'), kvHeight = kv.getBoundingClientRect().height + utils.getNavHeight(); if (winOffsetBottom >= kvHeight) { // bg load colorchipWrap.bgImgs = colorchipWrap.querySelectorAll('.js-bg-img'); if (!!colorchipWrap.bgImgs) bgLoader.setResponsiveMedia(colorchipWrap.bgImgs); window.removeEventListener('scroll', eventList.scroll); } }, checkColorchipSwiper: function () { let colorchipSwiperLength = currentDevice.indexOf('mobile') > -1 ? 6 : 8; if (els.colorchipButtons.length >= colorchipSwiperLength) { if (els.swiperArrowWrap.style.display == 'none') { els.swiperArrowWrap.style.display = ''; } swiperEvents.set(); } else { if (els.swiperArrowWrap.style.display != 'none') { els.swiperArrowWrap.style.display = 'none'; } if (els.colorchipSwiper != null) { swiperEvents.destroy(); } } }, setColors: function (activeIndex) { eventList.setColorchip(activeIndex); eventList.setPanel(activeIndex); eventList.setColorName(activeIndex); // viewer if (PDVIEWER.getViewer()) { eventList.setViewerColor(activeIndex) } }, resize: function (currRes) { currentDevice = currRes; if (currentDevice !== prevDevice) { currentSlidesPerView = currentDevice.indexOf('mobile') > -1 ? 5 : 7; prevDevice = currentDevice; eventList.checkColorchipSwiper(); } }, clickColorchip: async function () { if (!isIntroEnd) return; if (!utils.isLowNetwork() && PDVIEWER.getViewer()) { if (PDVIEWER.getViewer().viewer.isChanging) return; if (PDVIEWER.getViewer().viewer.viewerModel.isMixerRun) return; } const targetColor = this; eventList.setColors(targetColor.index); }, setViewerColor: async function (activeIndex) { const modelName = els.viewerSection.getAttribute('data-product-name'); const colorName = els.colorchipButtons[activeIndex].getAttribute('data-colors'); await PDVIEWER.getViewer().changeColor(modelName, colorName); }, setColorchip: function (activeIndex) { let targetcolorchipButton = els.colorchipButtons[activeIndex]; for (let i = 0; i < els.colorchipButtons.length; i++) { els.colorchipButtons[i].classList.remove(activeClass); els.colorchipButtons[i].removeAttribute('title'); } if (!targetcolorchipButton.classList.contains(activeClass)) { targetcolorchipButton.classList.add(activeClass); accessibility.selected(targetcolorchipButton); } }, setPanel: function (activeIndex) { if (!colorchipWrap.isStatic) return; for (let i = 0; i < els.panelItems.length; i++) { if (els.panelItems[i].classList.contains(activeClass)) { els.panelItems[i].classList.remove(activeClass); els.panelItems[i].setAttribute('aria-hidden', true); } } if (!els.panelItems[activeIndex].classList.contains(activeClass)) { els.panelItems[activeIndex].classList.add(activeClass); els.panelItems[activeIndex].setAttribute('aria-hidden', false); } }, setColorName: function (activeIndex) { for (let i = 0; i < els.colorchipNames.length; i++) { if (i !== activeIndex) { utils.onAccessibility(els.colorchipNames[i]); } if (els.colorchipNames[i].classList.contains(activeClass)) { els.colorchipNames[i].classList.remove(activeClass); } } if (!els.colorchipNames[activeIndex].classList.contains(activeClass)) { els.colorchipNames[activeIndex].classList.add(activeClass); utils.offAccessibility(els.colorchipNames[activeIndex]); } }, introPoseEnd: function () { isIntroEnd = true; } }; const swiperEvents = { set: function () { if (els.colorchipSwiper == null) { els.colorchipSwiper = new Swiper(els.swiperContainer, { init: false, navigation: { nextEl: els.swiperNextArrow, prevEl: els.swiperPrevArrow, }, slidesPerView: currentSlidesPerView, speed: 300, }); els.colorchipSwiper.on('init', swiperEvents.init); els.colorchipSwiper.on('slideChange', swiperEvents.slideChange); els.colorchipSwiper.init(); } }, init: function () { let notification = this.el.querySelector('.swiper-notification'); if (!!notification) this.el.removeChild(notification); els.swiperPrevArrow.removeAttribute('aria-label'); els.swiperPrevArrow.removeAttribute('role'); els.swiperNextArrow.removeAttribute('aria-label'); els.swiperNextArrow.removeAttribute('role'); accessibility.colorchip(els.colorchipSwiper); accessibility.colorchipArrow(els.colorchipSwiper); }, slideChange: function () { accessibility.colorchip(els.colorchipSwiper); accessibility.colorchipArrow(els.colorchipSwiper); }, destroy: function () { els.colorchipSwiper.destroy(true); els.colorchipSwiper = null; }, }; const accessibility = { clickArrow: function (e) { let arrowTimeout = null, arrowStyleTimeout = null; if ((e.type == 'keydown' && e.keyCode == 13) || e.type == 'click') { e.preventDefault(); if (els.colorchipSwiper.isBeginning && !els.colorchipSwiper.isEnd) { els.swiperPrevArrow.style.setProperty('display', 'block'); els.swiperContainer.parentElement.classList.remove(middleClass); els.swiperContainer.parentElement.classList.remove(endClass); clearTimeout(arrowTimeout); arrowTimeout = setTimeout(function () { els.swiperNextArrow.focus(); }, 300); clearTimeout(arrowStyleTimeout); arrowStyleTimeout = setTimeout(function () { els.swiperPrevArrow.style.display = ''; }, 400); } else if (!els.colorchipSwiper.isBeginning && els.colorchipSwiper.isEnd) { els.swiperNextArrow.style.setProperty('display', 'block'); els.swiperContainer.parentElement.classList.remove(middleClass); els.swiperContainer.parentElement.classList.add(endClass); clearTimeout(arrowTimeout); arrowTimeout = setTimeout(function () { els.swiperPrevArrow.focus(); }, 300); clearTimeout(arrowStyleTimeout); arrowStyleTimeout = setTimeout(function () { els.swiperNextArrow.style.display = ''; }, 400); } if (!els.colorchipSwiper.isBeginning && !els.colorchipSwiper.isEnd) { els.swiperContainer.parentElement.classList.remove(endClass); els.swiperContainer.parentElement.classList.add(middleClass); } } }, colorchip: function (swiperObj) { let isNotActivedColorchips = null; for (let i = 0; i < swiperObj.slides.length; i++) { if (currentDevice.indexOf('mobile') > -1) { isNotActivedColorchips = (i != swiperObj.activeIndex) && (i > swiperObj.activeIndex + 4) || (swiperObj.activeIndex > i); } else { isNotActivedColorchips = (i != swiperObj.activeIndex) && (i > swiperObj.activeIndex + 6) || (swiperObj.activeIndex > i); } if (isNotActivedColorchips) { utils.onAccessibility(swiperObj.slides[i]); setTimeout(function () { utils.onAccessibility(swiperObj.slides[i]); }, 300); } else { utils.offAccessibility(swiperObj.slides[i]); setTimeout(function () { utils.offAccessibility(swiperObj.slides[i]); }, 300); } } }, colorchipArrow: function (swiperObj) { if (swiperObj.isBeginning && !swiperObj.isEnd) { utils.onAccessibility(els.swiperPrevArrow); utils.offAccessibility(els.swiperNextArrow); } else if (!swiperObj.isBeginning && !swiperObj.isEnd) { utils.offAccessibility(els.swiperPrevArrow); utils.offAccessibility(els.swiperNextArrow); } else { utils.onAccessibility(els.swiperNextArrow); utils.offAccessibility(els.swiperPrevArrow); } }, selected: function (target) { if (typeof LOCAL_VARI != 'undefined' && !!LOCAL_VARI) { target.setAttribute('title', LOCAL_VARI.selected); } else { target.setAttribute('title', 'Selected'); } } }; return init(colorchipWrap); }; })(); (function () { window.flagship.features.compares = (function () { const init = function () { const compares = document.querySelectorAll('.js-compare'); for (let i = 0; i < compares.length; i++) { compares[i].type = compares[i].getAttribute('data-compare-type') || null; flagship.features.compare(compares[i]); } } return { init: init } })(); window.flagship.features.compare = function (compareWrap) { const resize = window.flagship.common.resize, compareOption = window.flagship.features.compareOption; let els = {}, prevDevice = null, currDevice = resize.checkResolution(), oldValue = null, isMousedown = false, currentModelData = 'S25U'; const compareData = { 'SM-S918': { modelName: 'galaxy-s23-ultra', modelText: 'Galaxy S23 Ultra', modelCode: 'S23U', weight: { A: 234, B: 233, }, thickness: 8.9, mp: 12, hrs: { A: 26, B: 26 } }, 'SM-S908': { modelName: 'galaxy-s22-ultra', modelText: 'Galaxy S22 Ultra', modelCode: 'S22U', weight: { A: 229, B: 228, }, thickness: 8.9, mp: 12, hrs: { A: 20, B: 22 } }, 'SM-G998': { modelName: 'galaxy-s21-ultra-5g', modelText: 'Galaxy S21 Ultra 5G', modelCode: 'S21U', weight: { A: 229, B: 227, }, thickness: 8.9, mp: 12, hrs: { A: 22, B: 22 } } } const init = function () { els.section = compareWrap; if (!!els.section) { setElements(); setProperty(); bindEvents(); eventList.setCompareVari(); eventList.getDeviceInfo().then((modelCode) => { if (!modelCode || !Object.keys(compareData).find((sku) => sku === modelCode)) { modelCode = 'SM-G998'; } eventList.selectItem(modelCode); eventList.setDefault(modelCode); }); } }; const setElements = function () { els.dropdown = els.section.querySelector('.js-dropdown'); if (els.section.type === 'camera') { els.compareMp = els.section.querySelector('.js-mp-value'); els.cameraUnits = els.section.querySelectorAll('.js-camera-unit'); els.ultraWideTexts = els.section.querySelectorAll('.js-copy-ultrawide'); } else if (els.section.type === 'design') { els.compareThickness = els.section.querySelector('.js-thickness-value'); els.compareWeight = els.section.querySelector('.js-weight-value'); els.thicknessUnits = els.section.querySelectorAll('.js-thickness-unit'); els.weightUnits = els.section.querySelectorAll('.js-weight-unit'); els.thicknessTexts = els.section.querySelectorAll('.js-copy-thickness'); els.weightTexts = els.section.querySelectorAll('.js-copy-weight'); } else if (els.section.type === 'battery') { els.compareHrs = els.section.querySelector('.js-hrs-value'); els.batteryUnits = els.section.querySelectorAll('.js-battery-unit'); els.playbackTexts = els.section.querySelectorAll('.js-copy-playback'); } }; const setProperty = function () { els.dropdown.selectBox = els.dropdown.querySelector('.js-select-box'); els.dropdown.button = els.dropdown.querySelector('.js-select-button'); els.dropdown.list = els.dropdown.querySelector('.js-select-list'); els.dropdown.listItem = els.dropdown.list.querySelectorAll('.js-select-item'); if (els.section.type === 'camera') { for (let i = 0; i < els.ultraWideTexts.length; i++) { els.ultraWideTexts[i].key = 'ultraWide'; els.ultraWideTexts[i].defaultText = 'Ultra Wide Camera'; } for (let i = 0; i < els.cameraUnits.length; i++) { els.cameraUnits[i].key = 'mp'; els.cameraUnits[i].defaultText = 'MP'; } } else if (els.section.type === 'design') { for (let i = 0; i < els.thicknessTexts.length; i++) { els.thicknessTexts[i].key = 'thickness'; els.thicknessTexts[i].defaultText = 'Thickness'; } for (let i = 0; i < els.thicknessUnits.length; i++) { els.thicknessUnits[i].key = 'mm'; els.thicknessUnits[i].defaultText = 'mm'; } for (let i = 0; i < els.weightTexts.length; i++) { els.weightTexts[i].key = 'weight'; els.weightTexts[i].defaultText = 'Weight'; } for (let i = 0; i < els.weightUnits.length; i++) { els.weightUnits[i].key = 'g'; els.weightUnits[i].defaultText = 'g'; } } else if (els.section.type == 'battery') { for (let i = 0; i < els.playbackTexts.length; i++) { els.playbackTexts[i].key = 'playback'; els.playbackTexts[i].defaultText = 'video Playback'; } for (let i = 0; i < els.batteryUnits.length; i++) { els.batteryUnits[i].key = 'hrs'; els.batteryUnits[i].defaultText = 'hrs'; } } }; const bindEvents = function () { resize.add(eventList.resize); eventHandler.click(); eventHandler.mousedown(); eventHandler.mouseup(); eventHandler.change(); eventHandler.resize(); eventHandler.offFocusSelect() }; const eventHandler = { click: function () { els.section.addEventListener('click', function (event) { const isButton = event.target.classList.contains('js-select-button'); const isOption = event.target.classList.contains('js-select-item'); if (isButton) { eventHandler.dropdownClickCheck(event); eventList.dropdowntoggle(event); accessibility.changeAriaHidden(); } else if (isOption) { eventList.clickCompareModel(event.target); eventList.clickOption(event.target); eventList.dropdownClose(); accessibility.dropdownFocus(); } }); els.dropdown.selectBox.addEventListener("click", eventList.clickSelect) }, change: function () { els.dropdown.selectBox.addEventListener('change', function (event) { eventList.clickOption(event.target); eventList.changeSelectBox(event.target); }); }, resize: function () { window.addEventListener('resize', function () { accessibility.changeAriaHidden(); }); }, mousedown: function () { els.dropdown.button.addEventListener('mousedown', function () { isMousedown = true; }); }, mouseup: function () { els.dropdown.button.addEventListener('mouseup', function () { isMousedown = false; }); }, dropdownClickCheck: function () { document.addEventListener('click', eventList.checkDropdownClick); }, offDropdownClickCheck: function () { document.removeEventListener('click', eventList.checkDropdownClick); }, onFocusInDropdown: function () { eventHandler.offFocusInDropdown(); document.addEventListener('focusin', eventList.focusInDropdown); }, offFocusInDropdown: function () { document.removeEventListener('focusin', eventList.focusInDropdown); }, offFocusSelect: function () { els.dropdown.selectBox.addEventListener('blur', eventList.offFocusSelect) } } const eventList = { isDropdownSelect: function () { return els.dropdown.selectBox.clientHeight > 0; }, dropdowntoggle: function (event) { let isExpanded = event.target.getAttribute('aria-expanded') === 'true'; event.target.setAttribute('aria-expanded', !isExpanded); if (!isExpanded) { event.target.classList.add('is-active'); eventHandler.onFocusInDropdown(); setTagging.close(event.target); } else { event.target.classList.remove('is-active'); setTagging.open(event.target); } }, checkDropdownClick: function (event) { const isButton = event.target.classList.contains('js-select-button'); const isOption = event.target.classList.contains('js-select-item'); if (!isButton && !isOption) { eventList.dropdownClose(); } }, dropdownClose: function () { els.dropdown.button.setAttribute('aria-expanded', 'false'); els.dropdown.button.classList.remove('is-active'); if (!(els.dropdown.button.getAttribute('aria-expanded') === 'true')) { setTagging.open(els.dropdown.button); } eventHandler.mouseup(); eventHandler.offDropdownClickCheck(); eventHandler.offFocusInDropdown(); accessibility.changeAriaHidden(); }, focusInDropdown: function (event) { const isInList = event.target.closest('.js-select-list'); const isButton = event.target.classList.contains('js-select-button'); if (!isInList && !(isButton && isMousedown)) { eventList.dropdownClose(); } }, clickOption: function (target) { const targetParent = target.closest('.js-dropdown'); targetParent.selectBoxButton = targetParent.querySelector('.js-select-button'); if (eventList.isDropdownSelect()) { const selectIndex = targetParent.selectBox.selectedIndex, optionList = targetParent.selectBox.options; Array.from(optionList).forEach(option => option.removeAttribute('selected')); optionList[selectIndex].setAttribute('selected', true) targetParent.button.textContent = optionList[selectIndex].textContent; } else { const selectItemDataValue = target.getAttribute('data-value'); Array.from(targetParent.selectBox.children).forEach((optionEl) => { const value = optionEl.getAttribute('value'); if (value !== selectItemDataValue) { optionEl.removeAttribute('selected'); } else { optionEl.setAttribute('selected', 'true'); } }); targetParent.selectBox.value = selectItemDataValue; targetParent.button.textContent = target.textContent; } }, setDefault: function (modelValue) { const { modelText } = compareData[modelValue]; els.dropdown.button.innerText = modelText; accessibility.changeAriaHidden(); }, getModelData: function (value) { const { modelCode } = compareData[value]; return modelCode; }, matchItems: function (modelValue) { const compareModelData = eventList.getModelData(modelValue); const modelMatchData = compareModelData + 'to' + currentModelData; eventList.changeDescription(modelMatchData, modelValue); }, changeDescription: function (modelMatchData, modelValue) { const textLists = els.section.querySelectorAll('.js-change-description'); if (textLists) { textLists.forEach((list) => { const matchDataItems = list.dataset.case.split(' '); const isMatched = matchDataItems.some(item => item === modelMatchData); !isMatched ? accessibility.ariaHiddenTrue(list) : accessibility.ariaHiddenFalse(list); if (isMatched && !oldValue) { list.classList.add('is-init'); } else if (oldValue) { if (oldValue == modelValue) return; list.classList.remove('is-active'); list.classList.remove('is-show'); list.classList.remove('is-init'); if (isMatched) { accessibility.ariaHiddenFalse(list); list.classList.add('is-show'); setTimeout(function () { list.classList.add('is-active'); }) } } }) } }, clickCompareModel: function (optionEl) { const modelValue = optionEl.getAttribute('data-value') || ''; eventList.selectItem(modelValue); }, changeSelectBox: function (selectEl) { const selectedEl = Array.from(selectEl.childNodes).find((el) => el.selected); const modelValue = selectedEl.value; eventList.selectItem(modelValue); }, resize: function (currRes) { currDevice = currRes; if (currDevice != prevDevice) { eventList.responsive(); prevDevice = currDevice; } eventList.dropdownClose(); els.dropdown.selectBox.classList.remove("is-active"); }, responsive: function () {}, getDeviceInfo: function () { return new Promise((resolve, reject) => { if (navigator.userAgentData) { navigator.userAgentData.getHighEntropyValues(['model']).then((uaData) => { const modelCode = uaData.model ? uaData.model.slice(0, 7) : null; resolve(modelCode); }).catch((err) => reject(err)); } else { const compareModelList = Object.keys(compareData); const sku = compareModelList.find((sku) => navigator.userAgent.includes(sku)); resolve(sku); } }); }, setCompareVari: function () { let targetTexts = []; if (els.section.type === 'design') { targetTexts = targetTexts.concat(Array.from(els.thicknessUnits)) .concat(Array.from(els.weightUnits)) .concat(Array.from(els.thicknessTexts)) .concat(Array.from(els.weightTexts)); } else if (els.section.type === 'camera') { targetTexts = Array.from(els.cameraUnits) .concat(Array.from(els.ultraWideTexts)); } else if (els.section.type === 'battery') { targetTexts = Array.from(els.batteryUnits) .concat(Array.from(els.playbackTexts)); } targetTexts.forEach((el) => { const { key, defaultText } = el; if (typeof COMPARE_VARI != 'undefined' && !!COMPARE_VARI) { el.innerText = COMPARE_VARI[key] || defaultText; } else { el.innerText = defaultText; } }); }, setCompareValueText: function (modelValue) { const { thickness, weight, mp, hrs } = compareData[modelValue]; if (els.section.type === 'design') { const weightType = weight[compareOption.type] ? weight[compareOption.type] : weight['B']; els.compareThickness.innerText = thickness; els.compareWeight.innerText = weightType; } else if (els.section.type === 'camera') { els.compareMp.innerText = mp; } else if (els.section.type === 'battery') { const hrsType = hrs[compareOption.type] ? hrs[compareOption.type] : hrs['B']; els.compareHrs.innerText = hrsType; } }, selectItem: function (modelValue) { eventList.setCompareValueText(modelValue); accessibility.changeSelected(modelValue); eventList.matchItems(modelValue); if (oldValue && oldValue !== modelValue) { const textAreaList = els.section.querySelectorAll('.js-text-change'); textAreaList.forEach((textEl) => textEl.classList.remove('is-active')); setTimeout(() => textAreaList.forEach((textEl) => textEl.classList.add('is-active')), 0); } oldValue = modelValue; }, clickSelect: function () { els.dropdown.selectBox.classList.toggle("is-active"); }, offFocusSelect: function () { if (els.dropdown.selectBox.classList.contains("is-active")) { els.dropdown.selectBox.classList.remove("is-active"); } } }; const accessibility = { changeSelected: function (modelCode) { const targetOption = Array.from(els.dropdown.selectBox.options).find((optionEl) => optionEl.getAttribute('value') === modelCode); const targetDropdownList = els.dropdown.list; const targetDropdownItem = targetDropdownList.querySelectorAll('.js-select-item'); const target = Array.from(targetDropdownItem).find((el) => el.getAttribute('data-value') === modelCode); targetOption.setAttribute('selected', true); for (let i = 0; i < els.dropdown.selectBox.options.length; i++) { const optionValue = els.dropdown.selectBox.options[i].getAttribute('value'); if (optionValue !== modelCode) { els.dropdown.selectBox.options[i].removeAttribute('selected'); } else { els.dropdown.selectBox.options[i].setAttribute('selected', true) } } for (let i = 0; i < targetDropdownItem.length; i++) { if (targetDropdownItem[i] !== target) { targetDropdownItem[i].removeAttribute('title'); } else { accessibility.selected(target); } } }, changeAriaHidden: function () { eventList.isDropdownSelect(); if (eventList.isDropdownSelect()) { accessibility.ariaHiddenTrue(els.dropdown.list); accessibility.ariaHiddenTrue(els.dropdown.button); if (els.dropdown.selectBox.hasAttribute('aria-hidden')) { accessibility.ariaHiddenFalse(els.dropdown.selectBox); } } else { const isOpened = els.dropdown.button.getAttribute('aria-expanded') === 'true'; setTimeout(() => { // Console warning on aria-hidden on focus element accessibility.ariaHiddenTrue(els.dropdown.selectBox); accessibility.ariaHiddenFalse(els.dropdown.button); if (isOpened) { accessibility.ariaHiddenFalse(els.dropdown.list); } else { accessibility.ariaHiddenTrue(els.dropdown.list); } }); } }, ariaHiddenTrue: function (element) { element.setAttribute('aria-hidden', true); element.setAttribute('tabindex', '-1'); }, ariaHiddenFalse: function (element) { element.removeAttribute('aria-hidden'); element.removeAttribute('tabindex'); }, dropdownFocus: function () { els.dropdown.button.focus(); }, selected: function (target) { if (typeof LOCAL_VARI != 'undefined' && !!LOCAL_VARI) { target.setAttribute('title', LOCAL_VARI.selected); } else { target.setAttribute('title', 'Selected'); } } } const setTagging = { open: function (target) { if (target.hasAttribute('data-omni')) { let dataOmni = target.getAttribute('data-omni').toLowerCase(); target.setAttribute('data-omni', dataOmni.replace('close', 'open')); } if (target.hasAttribute('ga-la')) { let gaLa = target.getAttribute('ga-la').toLowerCase(); target.setAttribute('ga-la', gaLa.replace('close', 'open')); } }, close: function (target) { if (target.hasAttribute('data-omni')) { let dataOmni = target.getAttribute('data-omni').toLowerCase(); target.setAttribute('data-omni', dataOmni.replace('open', 'close')); } if (target.hasAttribute('ga-la')) { let gaLa = target.getAttribute('ga-la').toLowerCase(); target.setAttribute('ga-la', gaLa.replace('open', 'close')); } } }; return init(compareWrap); }; })(); (function () { window.flagship = window.flagship || {}; window.flagship.features = window.flagship.features || {}; window.flagship.features.display = (function () { const utils = window.flagship.common.utils; const resize = window.flagship.common.resize; let els = {}; let objs = {}; let status = {}; let currDevice = resize.checkResolution(); let prevDevice = null; const init = function () { els.section = document.querySelector('.features-display'); if (!!els.section) { setElements(); setStatus(); bindEvents(); } }; const setElements = function () { els.resizeTimeout = null; els.displayBarWrap = els.section.querySelector('.features-display__bar'); els.displayBar = els.displayBarWrap.querySelector('.features-display__bar-line'); els.displayImage = els.section.querySelector('.features-display__image'); els.displayCoverImage = els.section.querySelector('.features-display__cover'); els.isGrab = false; els.isAction = false; els.displayCoverLeftWrap = els.section.querySelector('.features-display__tap--left'); els.displayCoverLeftBtn = els.section.querySelector('.features-display__tap--left button'); els.displayCoverRightBtn = els.section.querySelector('.features-display__tap--right button'); els.controller = els.section.querySelector('.features-display__button'); els.imgWrap = els.section.querySelector('.features-display__image-inner'); els.tabWrap = els.section.querySelector('.features-display__tap-wrap'); maxPercent = currDevice === 'mobileS' ? 0.797 : currDevice === 'mobile' ? 0.835 : 0.984; minPercent = currDevice === 'mobileS' ? 0.201 : currDevice === 'mobile' ? 0.155 : 0.015; }; const setStatus = function () { status.isTabMove = false; }; const bindEvents = function () { window.addEventListener('DOMContentLoaded', onLoadHandler, { once: true }); window.addEventListener('scroll', onScrollHandler); els.section.addEventListener('click', grabEventHandler.onMoveEvent); els.section.addEventListener('mousedown', grabEventHandler.onStart); els.section.addEventListener('mousemove', grabEventHandler.onMove); els.section.addEventListener('mouseup', grabEventHandler.onEnd); els.section.addEventListener('mouseleave', grabEventHandler.onEnd); els.section.addEventListener('touchstart', grabEventHandler.onStart); els.section.addEventListener('touchmove', grabEventHandler.onMove); els.section.addEventListener('touchend', grabEventHandler.onEnd); els.section.addEventListener('touchcancel', grabEventHandler.onEnd); els.section.addEventListener('touchmove', grabEventHandler.moveDisabled); els.section.addEventListener('mousemove', grabEventHandler.moveDisabled); els.section.addEventListener('click', grabEventHandler.moveDisabled); resize.add(onResizeHandler); }; const setAnimations = function () { let minValue = currDevice.indexOf('mobile') > -1 ? 27.5 : 25; let maxValue = currDevice.indexOf('mobile') > -1 ? 72.5 : 75; TweenMax.set(els.controller, { left: `${minValue}%`, ease: Power2.easeOut }); TweenMax.set(els.displayBar, { left: `${minValue}%`, ease: Power2.easeOut }); TweenMax.set(els.displayCoverImage, { width: `${minValue}%`, ease: Power2.easeOut }); objs.barAnim = new TimelineLite(); objs.barAnim .to(els.displayBar, 1, { left: `${maxValue}%`, ease: Power2.easeOut }) .to(els.displayBar, 1, { left: 50 + '%', ease: Power2.easeOut }); objs.buttonAnim = new TimelineLite(); objs.buttonAnim .to(els.controller, 1, { left: `${maxValue}%`, ease: Power2.easeOut }) .to(els.controller, 1, { left: 50 + '%', ease: Power2.easeOut }); objs.imgAnim = new TimelineLite(); objs.imgAnim .to(els.displayCoverImage, 1, { width: `${maxValue}%`, ease: Power2.easeOut }) .to(els.displayCoverImage, 1, { width: 50 + '%', ease: Power2.easeOut }); TweenMax.set(els.displayCoverLeftWrap, { width: `${minValue}%`, ease: Power2.easeOut }); objs.imgAnim = new TimelineLite(); objs.imgAnim .to(els.displayCoverLeftWrap, 1, { width: `${maxValue}%`, ease: Power2.easeOut }) .to(els.displayCoverLeftWrap, 1, { width: 50 + '%', ease: Power2.easeOut }); }; const onLoadHandler = function () { onScrollHandler(); }; const onResizeHandler = function (currRes) { currDevice = currRes; clearTimeout(els.resizeTimeout); els.resizeTimeout = setTimeout(function () { onScrollHandler(); }, 150); if (currDevice != prevDevice) { onResponsiveHandler(); prevDevice = currDevice; } }; const onResponsiveHandler = function () { maxPercent = currDevice === 'mobileS' ? 0.797 : currDevice === 'mobile' ? 0.835 : 0.984; minPercent = currDevice === 'mobileS' ? 0.201 : currDevice === 'mobile' ? 0.155 : 0.015; TweenMax.set(els.displayBar, { left: 50 + '%' }); TweenMax.set(els.controller, { left: 50 + '%' }); TweenMax.set(els.displayCoverImage, { width: 50 + '%' }); TweenMax.set(els.displayCoverLeftWrap, { width: 50 + '%' }); }; const onScrollHandler = function () { let winOffsetTop = window.pageYOffset + utils.getNavHeight(); let winOffsetBottom = window.pageYOffset + window.innerHeight; let targetRect = els.displayImage.getBoundingClientRect(); let targetOffsetTop = window.pageYOffset + targetRect.top; let targetOffsetBottom = window.pageYOffset + targetRect.bottom; if ((winOffsetBottom - (window.innerHeight * 0.25) > targetOffsetTop && winOffsetTop + (window.innerHeight * 0.25) < targetOffsetBottom) && !els.isAction) { setAnimations(); els.isAction = true; } }; const grabEventHandler = { onStart: function (e) { e.target.matches('.features-display__button') && (els.isGrab = true); }, onEnd: function () { els.isGrab = false; }, onMove: function (e) { if (els.isGrab) { e && e.preventDefault(); let wrapRect = els.displayBarWrap.getBoundingClientRect(); let wrapMaxWidth = wrapRect.width * maxPercent; let wrapMinWidth = wrapRect.width * minPercent; let xPosition = !e.touches ? e.pageX : e.touches[0].pageX; let barPosition = xPosition - wrapRect.left; if (barPosition > wrapMaxWidth) barPosition = wrapMaxWidth; else if (barPosition < wrapMinWidth) barPosition = wrapMinWidth; let barPercent = ((barPosition / wrapRect.width) * 100); els.displayBar.style.left = barPercent + '%'; els.controller.style.left = barPercent + '%'; els.displayCoverImage.style.width = barPercent + '%'; grabEventHandler.setArrowSize(barPercent); } }, onMoveEvent: function (e) { let wrapRect = els.displayBarWrap.getBoundingClientRect(); let wrapMaxWidth = wrapRect.width * maxPercent; let wrapMinWidth = wrapRect.width * minPercent; let barRect = els.displayBar.getBoundingClientRect(); let barPosition = barRect.left - wrapRect.left; let moveValue = Math.ceil(wrapMaxWidth / ((currDevice.indexOf('desktop') > -1) ? 8 : 5.5)); let isMove = e.target.classList.contains('features-display__tap-button') || e.target.classList.contains('features-display__button'); if (isMove) { status.isTabMove = true; if (e.type == 'click' && e.target.classList.contains('features-display__tap-button')) { let leftBtn = 'features-display__tap--left'; let rightBtn = 'features-display__tap--right'; if (e.target.parentElement.classList.contains(leftBtn)) { barPosition -= moveValue; } else if (e.target.parentElement.classList.contains(rightBtn)) { barPosition += moveValue; } } if (e.target.classList.contains('features-display__button') && (e.keyCode == 39 || e.keyCode == 37)) { e && e.preventDefault(); if (e.keyCode == 39) barPosition += moveValue; else if (e.keyCode == 37) barPosition -= moveValue; } if (barPosition < wrapMinWidth) barPosition = wrapMinWidth; else if (barPosition > wrapMaxWidth) barPosition = wrapMaxWidth; let barPercent = ((barPosition / wrapRect.width) * 100); TweenMax.to(els.displayBar, 0.3, { left: barPercent + '%', ease: Power2.easeOut }); TweenMax.to(els.controller, 0.3, { left: barPercent + '%', ease: Power2.easeOut }); TweenMax.to(els.displayCoverImage, 0.3, { width: barPercent + '%', ease: Power2.easeOut }); grabEventHandler.setArrowSize(barPercent); } }, moveDisabled: function () { const controllerObserver = new MutationObserver(() => { setTimeout(() => { const leftValue = els.controller.style.left; // 최신 left 값 가져오기 if (leftValue >= Math.trunc(maxPercent * 100) + "%") { els.displayCoverRightBtn.disabled = true; if(els.displayCoverRightBtn.disabled == true) { utils.onAccessibility(els.displayCoverRightBtn); els.displayCoverLeftBtn.focus(); } } else if (leftValue == minPercent * 100 + "%") { els.displayCoverLeftBtn.disabled = true; if(els.displayCoverLeftBtn.disabled == true) { utils.onAccessibility(els.displayCoverLeftBtn); els.displayCoverRightBtn.focus(); } } else { els.displayCoverRightBtn.removeAttribute("disabled"); els.displayCoverLeftBtn.removeAttribute("disabled"); utils.offAccessibility(els.displayCoverRightBtn); utils.offAccessibility(els.displayCoverLeftBtn); } }, 0); }); controllerObserver.observe(els.controller, { attributes: true, attributeFilter: ['style'] }); }, setArrowSize: function (barPercent) { let imgWidth = els.imgWrap.getBoundingClientRect().width; let tabWidth = els.tabWrap.getBoundingClientRect().width; let imgValue = imgWidth * (barPercent * (1 / 100)); let tabValue = (imgWidth - tabWidth) / 2; let moveTabBtnValue = Math.floor(imgValue - tabValue); if (status.isTabMove) { TweenMax.to(els.displayCoverLeftWrap, 0.3, { width: moveTabBtnValue + 'px', ease: Power2.easeOut }); status.isTabMove = false; } else { els.displayCoverLeftWrap.style.width = moveTabBtnValue + 'px'; } } }; return { init: init } })(); })(); ; (function () { window.flagship.features.faq = (function () { const resize = window.flagship.common.resize, utils = window.flagship.common.utils; let els = {}, prevDevice = null, currDevice = resize.checkResolution(); const init = function () { els.section = document.querySelector('.js-faq'); if (!!els.section) { setElements(); bindEvents(); } }; const setElements = function () { els.faqList = els.section.querySelector('.js-faq-list'); }; const bindEvents = function () { resize.add(eventList.resize); eventList.setAccordion(); }; const eventList = { resize: function (currRes) { currDevice = currRes; if (currDevice != prevDevice) { eventList.responsive(); prevDevice = currDevice; } }, responsive: function () { let isOpenedItems = els.faqList.querySelectorAll('.js-faq-item.is-open'); if (isOpenedItems.length > 0) { for (let i = 0; i < isOpenedItems.length; i++) { let isOpenedItemContent = isOpenedItems[i].querySelector('.js-faq-answer'), clientHeight = isOpenedItemContent.children[0].clientHeight; isOpenedItemContent.style.height = `${clientHeight}px`; } } }, setAccordion: function () { els.accordion = new window.flagship.common.accordion({ wrap: els.faqList, classList: { item: 'js-faq-item', button: 'js-faq-open', contents: 'js-faq-answer', activeClass: 'is-open' }, open: { start: function (target) { let targetInnerCta = target.querySelector('.js-featue-cta'); if (targetInnerCta) targetInnerCta.addEventListener('click', accessibility.moveFocus); } } }); els.accordion.init(); }, }; const accessibility = { moveFocus: function (e) { if (this.getAttribute('href').indexOf('#') > -1) { e.preventDefault(); let sectionId = this.getAttribute('href'), section = document.querySelector(`${sectionId}`), sectionTop = section.getBoundingClientRect().top, movePosition = (sectionTop + window.pageYOffset) - utils.getNavHeight(), clickable = section.querySelectorAll('a, button'), title = section.querySelector('h2') || section.querySelector('h3'); if (!!title) { let _focusOut = function () { title.removeAttribute('tabindex'); title.removeEventListener('focusout', _focusOut); }; title.addEventListener('focusout', _focusOut); title.setAttribute('tabindex', 0); title.focus(); } else { clickable[0].focus(); } window.scrollTo(0, movePosition); } } }; return { init: init } })(); })(); (function () { window.flagship = window.flagship || {}; window.flagship.features = window.flagship.features || {}; window.flagship.features.highResolution = (function () { const utils = window.flagship.common.utils, resize = window.flagship.common.resize; let els = {}; const init = function () { els.section = document.querySelector('.js-high-resolution'); els.cropWrap = document.querySelectorAll('.js-crop-wrap'); if (!!els.section) { setElements(); setProperty(); bindEvents(); } }; const setElements = function () { els.cropButtons = els.section.querySelectorAll('.js-crop-button'); els.cropImages = els.section.querySelectorAll('.js-img-crop'); els.swiperContainers = els.section.querySelectorAll('.swiper-container'); }; const bindEvents = function () { eventList.setSwiper(); eventList.setScene(); eventHandler.click(); eventHandler.scroll(); accessibility.set(); }; const setProperty = function () { const _buttonProperty = function (section) { let buttonProperty = { swiperContainer: section.querySelector('.swiper-container'), cropButtons: section.querySelectorAll('.js-crop-button'), cropImages: section.querySelectorAll('.js-img-crop') } for (let i = 0; i < buttonProperty.cropButtons.length; i++) { buttonProperty.cropButtons[i].property = buttonProperty; } }; const _swiperProperty = function (section) { let swiperProperty = { swiperContainer: section.querySelector('.swiper-container'), cropButtons: section.querySelectorAll('.js-crop-button'), } swiperProperty.swiperContainer.property = swiperProperty; } for (let i = 0; i < els.cropWrap.length; i++) { _buttonProperty(els.cropWrap[i]); _swiperProperty(els.cropWrap[i]); } }; const eventHandler = { click: function () { els.cropButtons.forEach(function (button) { button.addEventListener('click', eventList.clickcropButton); }) }, scroll: function () { window.addEventListener('scroll', eventList.autoSlide); } }; const eventList = { autoSlide: function () { els.scene.trackAnimation(function () { let progress = this.progress let startProgress = resize.checkResolution() == 'desktop' ? 28 : 32; if (progress > startProgress && progress < 50) { setTimeout(function () { els.swiperContainers[0].swiper.slideTo(1, 800); }, 300) window.removeEventListener('scroll', eventList.autoSlide); } }); }, setScene: function () { els.scene = SCROLLER({ trackElement: els.section, useFixed: false }); }, setSwiper: function () { for (let i = 0; i < els.swiperContainers.length; i++) { els.swiperContainers[i] = new Swiper(els.swiperContainers[i], { speed: 300, on: { slideChange: function () { let self = this; let swiperContainer = self.el; let targetButton = swiperContainer.property.cropButtons[self.activeIndex] eventList.addActiveClass(targetButton); accessibility.change(targetButton); } } }) } }, addActiveClass: function (targetButton) { let cropButtons = targetButton.property.cropButtons; for (let i = 0; i < cropButtons.length; i++) { if (cropButtons[i].classList.contains('is-active')) { cropButtons[i].classList.remove('is-active'); } } targetButton.classList.add('is-active'); }, slideMoveto: function (targetButton) { let targetButtonIndex = targetButton.getAttribute('data-index'); targetButton.property.swiperContainer.swiper.slideTo(targetButtonIndex); }, clickcropButton: function () { let targetButton = this; eventList.slideMoveto(targetButton); } }; const accessibility = { set: function () { els.cropImages.forEach(function (item) { if (item.classList.contains('swiper-slide-active')) { utils.offAccessibility(item); } else { utils.onAccessibility(item) } }) els.cropButtons.forEach(function (button) { if (button.classList.contains('is-active')) { if (typeof LOCAL_VARI != 'undefined' && !!LOCAL_VARI) { button.setAttribute('title', LOCAL_VARI.selected) } else { button.setAttribute('title', 'selected') } } }) }, change: function (targetButton) { let targetButtonIndex = targetButton.getAttribute('data-index'); targetButton.property.cropImages.forEach(function (item) { if (item.classList.contains('swiper-slide-active')) { utils.onAccessibility(item); } utils.offAccessibility(targetButton.property.cropImages[targetButtonIndex]); }) if (typeof LOCAL_VARI != 'undefined' && !!LOCAL_VARI) { for (let i = 0; i < targetButton.property.cropButtons.length; i++) { if (targetButton.property.cropButtons[i].getAttribute('title') == LOCAL_VARI.selected) targetButton.property.cropButtons[i].removeAttribute('title') } targetButton.setAttribute('title', LOCAL_VARI.selected); } else { for (let i = 0; i < targetButton.property.cropButtons.length; i++) { if (targetButton.property.cropButtons[i].getAttribute('title') == 'selected') targetButton.property.cropButtons[i].removeAttribute('title') } targetButton.setAttribute('title', 'selected'); } } }; return { init: init, }; })(); })(); (function () { window.flagship = window.flagship || {}; window.flagship.features = window.flagship.features || {}; window.flagship.features.highlightsZone = (function () { const utils = window.flagship.common.utils; const resize = window.flagship.common.resize; const Swiper = window.flagship.Swiper; let els = {}; let prevDevice; let swiperObj = {}; let pointerOffset = {}; let currDevice = resize.checkResolution(); let ctaPlayStatus = true; let scrollProgress = null; let lowNetwork = document.documentElement.classList.contains('low_network'); const init = function () { els.section = document.querySelector('.features-highlights'); if (!!els.section) { setElements(); setProperty(); bindEvents(); } }; const setElements = function () { els.mainContainer = els.section.querySelector('.js-highlights-main-container'); els.mainSwiperSlides = els.mainContainer.querySelectorAll('.swiper-slide'); els.mediaWrap = els.mainContainer.querySelectorAll('.features-highlights__content'); els.indication = els.section.querySelector('.common-carousel__pagination'); els.prevArrow = els.mainContainer.parentElement.querySelector('.swiper-button-prev'); els.nextArrow = els.mainContainer.parentElement.querySelector('.swiper-button-next'); els.featureTagging = els.mainContainer.getAttribute('data-tagging-feature'); els.scrollbar = els.section.querySelector('.js-highlights-scrollbar'); }; const setProperty = function () { els.mainContainer.autoPlay = true; for (let i = 0; i < els.mediaWrap.length; i++) { els.mediaWrap[i].isVideo = els.mediaWrap[i].classList.contains('is-video'); els.mediaWrap[i].isImage = els.mediaWrap[i].classList.contains('is-image'); if (els.mediaWrap[i].isVideo) { els.mediaWrap[i].videoWrap = els.mediaWrap[i].querySelector('.js-video-wrap'); els.mediaWrap[i].video = els.mediaWrap[i].querySelector('.common-video__video'); els.mediaWrap[i].coverImageHighband = els.mediaWrap[i].querySelector('.common-video__cover-image--highband'); els.mediaWrap[i].coverImageLowband = els.mediaWrap[i].querySelector('.common-video__cover-image--lowband'); els.mediaWrap[i].controller = els.mediaWrap[i].querySelector('.js-video-control'); els.mediaWrap[i].controller.video = els.mediaWrap[i].video; els.mediaWrap[i].progressBar = els.mediaWrap[i].querySelector('.common-video__control-progress-bar'); els.mediaWrap[i].startPoint = els.mediaWrap[i].getAttribute('data-start-point'); els.mediaWrap[i].reversePoint = els.mediaWrap[i].getAttribute('data-reverse-point'); els.mediaWrap[i].moStartPoint = els.mediaWrap[i].getAttribute('data-mo-start-point'); els.mediaWrap[i].moReversePoint = els.mediaWrap[i].getAttribute('data-mo-reverse-point'); } else if (els.mediaWrap[i].isImage) { els.mediaWrap[i].img = els.mediaWrap[i].querySelector('.js-image-wrap > img'); } } }; const bindEvents = function () { eventList.load(); eventHandler.click(); eventHandler.scroll(); eventHandler.flickSwiper(); resize.add(eventList.resize); }; const eventHandler = { flickSwiper: function () { els.mainContainer.addEventListener('touchstart', function (e) { pointerOffset.start = null; pointerOffset.current = null; pointerOffset.start = e.touches[0].clientX; els.mainContainer.addEventListener('touchmove', eventList.getPointerMoveSize); }); els.mainContainer.addEventListener('touchend', function () { if (pointerOffset.start == null) return; els.mainContainer.autoPlay = false; els.mainContainer.removeEventListener('touchmove', eventList.getPointerMoveSize); }); els.mainContainer.addEventListener('mousedown', function (e) { pointerOffset.start = null; pointerOffset.current = null; pointerOffset.start = e.offsetX; els.mainContainer.addEventListener('mousemove', eventList.getPointerMoveSize); }); els.mainContainer.addEventListener('mouseup', function () { els.mainContainer.autoPlay = false; els.mainContainer.removeEventListener('mousemove', eventList.getPointerMoveSize); }); els.mainContainer.addEventListener('mouseleave', function () { if (pointerOffset.start == null) return; pointerOffset.start = null; pointerOffset.current = null; els.mainContainer.removeEventListener('mousemove', eventList.getPointerMoveSize); }); els.scrollbar.addEventListener('mousedown', function () { els.mainContainer.autoPlay = false; }); els.scrollbar.addEventListener('mouseleave', function () { els.mainContainer.autoPlay = false; }); }, click: function () { for (let i = 0; i < els.mediaWrap.length; i++) { if (els.mediaWrap[i].isVideo) { els.mediaWrap[i].controller.addEventListener('click', eventList.clickVideoCta); els.mediaWrap[i].controller.addEventListener('click', eventList.stopAutoPlay); } } if (els.prevArrow && els.nextArrow) { els.nextArrow.addEventListener('click', function (e) { eventList.stopAutoPlay(e); eventList.swiperArrow(e); }); els.prevArrow.addEventListener('click', function (e) { eventList.stopAutoPlay(e); eventList.swiperArrow(e); }); } els.scrollbar.addEventListener('click', function (e) { eventList.stopAutoPlay(e); }); }, scroll: function () { window.addEventListener('scroll', eventList.scroll); } } const eventList = { load: function () { swiperEvents.set(); swiperObj.main.init(); eventList.setVideo(); eventList.setScene(); eventList.scroll(); }, resize: function () { currDevice = resize.checkResolution(); if (prevDevice != currDevice) { eventList.responsive(); prevDevice = currDevice; } }, responsive: function () { swiperObj.main.slideTo(0, false); }, setVideo: function () { for (let i = 0; i < els.mediaWrap.length; i++) { if (els.mediaWrap[i].isVideo) { utils.videoHandler({ playType: 'scrollPlay', startPoint: (currDevice.indexOf('mobile') > -1) ? els.mediaWrap[i].moStartPoint : els.mediaWrap[i].startPoint, reversePoint: (currDevice.indexOf('mobile') > -1) ? els.mediaWrap[i].moReversePoint : els.mediaWrap[i].reversePoint, wrap: els.mediaWrap[i].videoWrap, video: els.mediaWrap[i].video, controller: els.mediaWrap[i].controller, playCallback: function () { setTagging.pause(this.controller); this.video.timeupdateEvent = function () { if (this.currentTime > 0) { if (!this.videoHandler.wrap.classList.contains('is-started', 'is-playing')) { this.videoHandler.wrap.classList.add('is-started', 'is-playing'); } eventList.setProgerssDuration(i); this.removeEventListener('timeupdate', this.timeupdateEvent); } } this.video.addEventListener('timeupdate', this.video.timeupdateEvent); this.video.removeEventListener('canplay', eventList.playVideoOnce); }, pauseCallback: function () { setTagging.play(this.controller); }, endCallback: function () { eventList.autoSlideNext(1000); } }); } } }, autoSlideNext: function (time) { if (els.mainContainer.autoPlay) { if (scrollProgress > 40 && scrollProgress < 55) { clearTimeout(swiperObj.main.videoTiming); swiperObj.main.videoTiming = setTimeout(() => { swiperObj.main.slideNext(); }, time); } else { clearTimeout(swiperObj.main.videoTiming); } } }, playVideoOnce: function () { this.play(); }, playVideo: function (video) { for (let i = 0; i < els.mediaWrap.length; i++) { if (els.mediaWrap[i].isVideo && video.readyState >= 1) { video.play(); } else { video.addEventListener('canplay', eventList.playVideoOnce, { once: true }); } } }, clickVideoCta: function (e) { if (e.target == e.currentTarget) { if (e.currentTarget.video.paused) { eventList.playVideo(e.currentTarget.video); ctaPlayStatus = true; } else { e.currentTarget.video.pause(); ctaPlayStatus = false; } } }, stopAutoPlay: function (e) { if (e.target.classList.contains('js-video-control') || e.target.classList.contains('swiper-button-next') || e.target.classList.contains('swiper-button-prev') || e.target.classList.contains('common-carousel__pagination-button') || e.target.classList.contains('js-highlights-scrollbar') ) { els.mainContainer.autoPlay = false; } }, swiperArrowVisibility: function () { let mainSlidesLength = els.mainSwiperSlides.length - 1; let mainSwiper = swiperObj.main; let prevArrow = mainSwiper.previousIndex > mainSwiper.realIndex; let nextArrow = mainSwiper.previousIndex < mainSwiper.realIndex; if (els.prevArrow && els.nextArrow) { if (prevArrow) { if (mainSwiper.realIndex == (mainSlidesLength - 1)) { if (els.nextArrow.style.display == 'none') els.nextArrow.style.display = ''; } else if (mainSwiper.realIndex == 0) { els.prevArrow.style.display = 'none'; } } if (nextArrow) { if (mainSwiper.realIndex == 1) { if (els.prevArrow.style.display == 'none') els.prevArrow.style.display = ''; } else if (mainSwiper.realIndex == mainSlidesLength) { els.nextArrow.style.display = 'none'; } } } }, swiperArrow: function (e) { let mainSwiper = swiperObj.main; let mainSlidesLength = els.mainSwiperSlides.length - 1; let prevArrow = e.target.classList.contains('swiper-button-prev'); let nextArrow = e.target.classList.contains('swiper-button-next'); if (prevArrow) { clearTimeout(swiperObj.main.videoTiming); mainSwiper.slidePrev(); if (mainSwiper.realIndex == 0) { setTimeout(() => { els.nextArrow.blur(); els.nextArrow.focus(); }, 300); } } if (nextArrow) { clearTimeout(swiperObj.main.videoTiming); mainSwiper.slideNext(); if (mainSwiper.realIndex == mainSlidesLength) { setTimeout(() => { els.prevArrow.blur(); els.prevArrow.focus(); }, 300); } } }, scroll: function () { let isIndex = swiperObj.main.realIndex; els.section.scene.trackAnimation(function () { scrollProgress = this.progress; if (els.mediaWrap[isIndex].isVideo) { let isMainVideoHandler = els.mediaWrap[isIndex].video.videoHandler; if (!lowNetwork && ctaPlayStatus) isMainVideoHandler.scrollActive(scrollProgress); } else if (els.mediaWrap[isIndex].isImage) { eventList.slideVideoPlay(); } }) }, slideVideoPlay: function () { let isIndex = swiperObj.main.realIndex; if (els.mediaWrap[isIndex].isVideo) { let isMainVideoHandler = els.mediaWrap[isIndex].video.videoHandler; isMainVideoHandler.eventList.reset.call(isMainVideoHandler); els.mediaWrap[isIndex].videoWrap.classList.remove('is-started'); setTimeout(function () { if (ctaPlayStatus) { eventList.playVideo(els.mediaWrap[isIndex].video); setTimeout(function () { if (els.mainContainer.autoPlay) isMainVideoHandler.controller.blur(); if (els.mainContainer.autoPlay) isMainVideoHandler.controller.focus(); if (isIndex == (swiperObj.main.slides.length)) { els.mainContainer.autoPlay = false; } }, 900); } }, 50); } else if (els.mediaWrap[isIndex].isImage && ctaPlayStatus) { eventList.autoSlideNext(3000); } }, setProgerssDuration: function (index) { let isDuration = els.mediaWrap[index].video.duration; if (!!!els.mediaWrap[index].durationSet) { els.mediaWrap[index].progressBar.style.animationDuration = `${isDuration}s`; els.mediaWrap[index].durationSet = true; } }, setMedia: function (index) { let videoLength = els.mainSwiperSlides.length - 1; let isIndex = index + 1; let loadIndex = isIndex < videoLength ? isIndex : videoLength; let mainVideoloadComplateLength = els.mainContainer.querySelectorAll('.is-video-load-complete').length - 1; for (let i = 0; i <= loadIndex; i++) { if (els.mediaWrap[i].isVideo) { if (mainVideoloadComplateLength != videoLength && !els.mediaWrap[i].video.classList.contains('is-video-load-complete')) { if (!els.mediaWrap[i].video.classList.contains('is-mp4video-load-complete')) { if (!!els.mediaWrap[i].video) videoLoader.setResponsiveMedia([els.mediaWrap[i].video]); if (!lowNetwork) { if (!!els.mediaWrap[i].coverImageHighband) imageLoader.setResponsiveMedia([els.mediaWrap[i].coverImageHighband]); } else { if (!!els.mediaWrap[i].coverImageLowband) imageLoader.setResponsiveMedia([els.mediaWrap[i].coverImageLowband]); } } } } } }, pauseVideo: function (swiper) { for (let i = 0; i < swiper.slides.length; i++) { if (els.mediaWrap[i].isVideo) { let slideVideo = swiper.slides[i].querySelector('video'); if (!slideVideo.paused) { slideVideo.pause(); } } } }, getCarouselSizeInfo: function (swiper) { let slideLength = swiper.slides.length; let slideWidth = swiper.slides[0].clientWidth; let slideMargin = parseInt(window.getComputedStyle(swiper.slides[0]).margin.split(' ')[1]); let slideSize = slideWidth + slideMargin; let maxMoveSize = ((slideSize * slideLength) - slideMargin) - swiper.wrapperEl.clientWidth; let viewWidth = swiper.wrapperEl.clientWidth; let viewLength = parseInt((viewWidth + slideMargin) / slideSize); let lastBeforeSize = slideLength == 2 ? 0 : Math.abs((maxMoveSize - slideSize)) + Math.abs((viewWidth - slideWidth)); let isMoveSize = Math.abs(parseInt(window.getComputedStyle(swiper.wrapperEl).transform.split(',')[4])); return { slideWidth: slideWidth, slideMargin: slideMargin, slideSize: slideSize, maxMoveSize: maxMoveSize, viewWidth: viewWidth, viewLength: viewLength, lastBeforeSize: lastBeforeSize, isMoveSize: isMoveSize } }, setScene: function () { els.section.scene = SCROLLER({ trackElement: els.section, useFixed: false }); }, getPointerMoveSize: function (e) { if (!!e.touches) { pointerOffset.current = e.touches[0].clientX; } else { pointerOffset.current = e.offsetX; } } } const swiperEvents = { set: function () { if (swiperObj.main == null) { swiperObj.main = new Swiper(els.mainContainer, { init: false, speed: 600, slidesPerView: 'auto', scrollbar: { el: els.scrollbar, }, pagination: { el: els.indication, clickable: true, renderBullet: function (index, className) { const slide = this.slides[index]; const slideTitle = slide.getAttribute('data-slide-title') || ''; const tagging = { omniType: "microsite_gallery", actionType: "gallery", contentType: "feature gallery", taggingValue: els.featureTagging + ":sldr-dots:" + `${index + 1}` } this.slideTitle = slideTitle; return `

`; } }, a11y: false, }); swiperObj.main.on('init', swiperEvents.init); swiperObj.main.on('slideChange', swiperEvents.slideChange); swiperObj.main.on('transitionEnd', swiperEvents.transitionEnd); swiperObj.main.on('paginationUpdate', swiperEvents.paginationUpdate); } if (els.prevArrow) { els.prevArrow.style.display = 'none'; } }, init: function () { if (els.prevArrow && els.nextArrow) { let isNextArrow = this.el.parentElement.querySelector('.swiper-button-next'); let isPrevArrow = this.el.parentElement.querySelector('.swiper-button-prev'); isNextArrow.removeAttribute('aria-label'); isNextArrow.removeAttribute('role'); isPrevArrow.removeAttribute('aria-label'); isPrevArrow.removeAttribute('role'); } accessibility.slide(this); }, paginationUpdate: function () { const bullets = this.pagination.bullets; const slides = this.slides; for (let i = 0; i < bullets.length; i++) { const slideTitle = i < slides.length ? this.slides[i].getAttribute('data-slide-title') : ""; const bullet = bullets[i]; const button = bullet.querySelector('button'); const isActive = bullet.classList.contains('swiper-pagination-bullet-active'); const selected = isActive ? ` ${LOCAL_VARI.selected}` : ''; button.setAttribute('aria-label', `${LOCAL_VARI.slide}${i + 1}${selected}: ${slideTitle}`); } }, slideChange: function () { accessibility.slide(this); eventList.pauseVideo(this); if (this.realIndex > 0) eventList.setMedia(this.realIndex); if (!lowNetwork) eventList.slideVideoPlay(); eventList.swiperArrowVisibility(); }, transitionEnd: function () { setTimeout(() => { let carouselInfo = eventList.getCarouselSizeInfo(this); let lastIndex = this.slides.length - 1; let lastSlide = this.slides[lastIndex]; let lastBeforeSlide = this.slides[lastIndex - 1]; let secondSlide = this.slides[lastIndex - 2]; let lastSlideIsVideo = lastSlide.querySelector('.features-highlights__content.is-video'); let lastBeforeSlideIsVideo = lastBeforeSlide.querySelector('.features-highlights__content.is-video'); let isIndex = swiperObj.main.previousIndex; let isMoveSize = currDevice != 'mobile' ? carouselInfo.isMoveSize : carouselInfo.isMoveSize + Math.abs(carouselInfo.slideMargin); if (els.mediaWrap[isIndex].isVideo) els.mediaWrap[isIndex].video.pause(); if (carouselInfo.lastBeforeSize + (carouselInfo.slideWidth / 2) < isMoveSize && carouselInfo.maxMoveSize - (carouselInfo.slideWidth / 2) <= isMoveSize) { if (currDevice.indexOf('mobile') > -1) { eventList.pauseVideo(this); if (!lowNetwork && ctaPlayStatus && lastSlideIsVideo) { lastSlide.querySelector('video').play(); } lastSlide.classList.add('swiper-slide-active'); lastBeforeSlide.classList.add('swiper-slide-prev'); lastSlide.classList.remove('swiper-slide-next'); lastBeforeSlide.classList.remove('swiper-slide-active'); secondSlide.classList.remove('swiper-slide-prev'); if (els.nextArrow) { if (els.nextArrow.style.display != 'none') { els.nextArrow.style.display = 'none'; setTimeout(() => { els.prevArrow.blur(); els.prevArrow.focus(); }, 300); } } utils.offAccessibility(this.slides[lastIndex]); utils.onAccessibility(this.slides[lastIndex - 1]); } } else if (carouselInfo.lastBeforeSize <= carouselInfo.isMoveSize) { if (currDevice.indexOf('mobile') > -1) { eventList.pauseVideo(this); if (!lowNetwork && ctaPlayStatus && lastBeforeSlideIsVideo) { lastBeforeSlide.querySelector('video').play(); } lastSlide.classList.add('swiper-slide-next'); lastBeforeSlide.classList.add('swiper-slide-active'); secondSlide.classList.add('swiper-slide-prev'); lastSlide.classList.remove('swiper-slide-active'); lastBeforeSlide.classList.remove('swiper-slide-prev'); if (els.nextArrow) { if (els.nextArrow.style.display == 'none') els.nextArrow.style.display = ''; } utils.onAccessibility(this.slides[lastIndex]); utils.offAccessibility(this.slides[lastIndex - 1]); } } }, 0); }, destroy: function (swiper) { if (swiper != null) { swiper.navigation.destroy(true); swiper.destroy(true); swiper = null; } } }; const setTagging = { play: function (targetController) { if (targetController.hasAttribute('data-omni')) { let dataOmni = targetController.getAttribute('data-omni').toLowerCase(); targetController.setAttribute('data-omni', dataOmni.replace('pause', 'play')); } if (targetController.hasAttribute('ga-la')) { let gaLa = targetController.getAttribute('ga-la').toLowerCase(); targetController.setAttribute('ga-la', gaLa.replace('pause', 'play')); } }, pause: function (targetController) { if (targetController.hasAttribute('data-omni')) { let dataOmni = targetController.getAttribute('data-omni').toLowerCase(); targetController.setAttribute('data-omni', dataOmni.replace('play', 'pause')); } if (targetController.hasAttribute('ga-la')) { let gaLa = targetController.getAttribute('ga-la').toLowerCase(); targetController.setAttribute('ga-la', gaLa.replace('play', 'pause')); } } }; const accessibility = { slide: function (swiper) { for (let i = 0; i < swiper.slides.length; i++) { if (i != swiper.activeIndex) { utils.onAccessibility(swiper.slides[i]); } else { utils.offAccessibility(swiper.slides[i]); } } } }; return { init: init, }; })(); })(); ; (function () { window.flagship.features.kv = (function () { let els = {} const init = function () { els.section = document.querySelector('.js-kv'); els.hasOffer = document.querySelector('.feature-kv__anchor'); if (!!els.section && !!els.hasOffer) { setElements(); bindEvents(); } }; const setElements = function () { els.kvDropdown = els.section.querySelector('.js-kv-dropdown'); els.kvDropdownItem = els.section.querySelector('.features-kv__description'); els.kvDropdownSpan = els.section.querySelector('.js-button-text'); els.kvDropdownDataOmni = els.kvDropdown.getAttribute('data-omni'); els.kvDropdownGaLa = els.kvDropdown.getAttribute('ga-la'); }; const bindEvents = function () { eventHandler.click(); eventList.defaultText(); }; const eventHandler = { click: function () { els.kvDropdown.addEventListener('click', eventList.click); } } const eventList = { defaultText: function () { const openText = els.kvDropdownSpan.getAttribute('data-open-text'); els.kvDropdownSpan.textContent = openText; }, click: function () { const openText = els.kvDropdownSpan.getAttribute('data-open-text'); const closeText = els.kvDropdownSpan.getAttribute('data-close-text'); if (els.kvDropdownItem.classList.contains('is-open')) { els.kvDropdownItem.classList.remove('is-open'); els.kvDropdown.classList.remove('is-active'); els.kvDropdown.setAttribute('ga-la', els.kvDropdownDataOmni.replace('close', 'open')); els.kvDropdown.setAttribute('data-omni', els.kvDropdownGaLa.replace('close', 'open')); els.kvDropdownSpan.textContent = openText; } else { els.kvDropdownItem.classList.add('is-open'); els.kvDropdown.classList.add('is-active'); els.kvDropdown.setAttribute('ga-la', els.kvDropdownDataOmni.replace('open', 'close')); els.kvDropdown.setAttribute('data-omni', els.kvDropdownGaLa.replace('open', 'close')); els.kvDropdownSpan.textContent = closeText; } } }; return { init: init } })(); })(); (function () { window.flagship.features.portrait = (function () { const utils = window.flagship.common.utils, resize = window.flagship.common.resize; let els = {}; let currDevice = resize.checkResolution(); const init = function () { els.section = document.querySelector('.js-portrait'); if (!!els.section) { setElements(); bindEvents(); } }; const setElements = function () { els.portrait = els.section.querySelector('.js-image'); els.portraitImage = els.portrait.querySelector('img'); }; const bindEvents = function () { eventList.setScene(); eventHandler.scroll(); resize.add(eventList.resize); }; const eventHandler = { scroll: function () { window.addEventListener('scroll', eventList.scroll); } }; const eventList = { resize: function (currRes) { currDevice = currRes; }, scroll: function () { if (els.section.scene != null) { els.section.scene.trackAnimation(function () { let progress = this.progress; if (progress < 0) { els.section.classList.remove('is-active'); } if (progress >= 20) { els.section.classList.add('is-active'); } }) } }, setScene: function () { if (els.section.scene == null) { els.section.scene = SCROLLER({ trackElement: els.section, useFixed: false, useStrictMode: false }) } } }; return { init: init } })(); })(); (function () { window.flagship.features.proVisual = (function () { const utils = window.flagship.common.utils, resize = flagship.common.resize; let els = {}; let prevDevice = null; let currDevice = resize.checkResolution(); const init = function () { els.section = document.querySelector('.features-provisual-engine'); if (!!els.section) { setElements(); bindEvents(); } }; const setElements = function () { els.cameraVideo = els.section.querySelector('.features-provisual-engine__video video'); els.cameraDevice = els.section.querySelector('.js-provisual-engine-device'); els.cameraSpec = document.querySelectorAll('.features-provisual-engine__spec-item'); els.rearSpecListHeight = els.section.querySelector('.features-provisual-engine__spec-rear>.features-provisual-engine__spec-item:last-child'); els.frontSpecListHeight = els.section.querySelector('.features-provisual-engine__spec-front>.features-provisual-engine__spec-item:last-child'); }; const bindEvents = function () { resize.add(eventList.resize); eventList.setDeviceScene(); eventList.setTextScene(); eventHandler.scroll(); }; const eventHandler = { scroll: function () { window.addEventListener('scroll', function () { eventList.deviceMotion(); eventList.textMotion(); }) } }; const eventList = { resize: function (currRes) { currDevice = currRes; if (currDevice != prevDevice) { prevDevice = currDevice; eventList.textMotion(); } }, setDeviceScene: function () { els.cameraDevice.scene = SCROLLER({ trackElement: els.cameraDevice, resize: utils.detector.isTouchDevice ? false : true, useFixed: false }); }, setTextScene: function () { for (let i = 0; i < els.cameraSpec.length; i++) { els.cameraSpec[i].scene = SCROLLER({ trackElement: els.cameraSpec[i], useFixed: false }); } }, deviceMotion: function () { els.cameraDevice.scene.trackAnimation(function () { let deviceStartPoint = currDevice.indexOf('mobile') > -1 ? 20 : 15; if (this.progress == 0) { if (els.cameraDevice.classList.contains('is-active')) { els.cameraDevice.classList.remove('is-active'); } } if (this.progress >= deviceStartPoint) { if (!els.cameraDevice.classList.contains('is-active')) { els.cameraDevice.classList.add('is-active'); } } }); }, textMotion: function () { let firstTextNum = currDevice.indexOf('mobile') > -1 ? 0 : 1; for (let i = firstTextNum; i < els.cameraSpec.length; i++) { els.cameraSpec[i].scene.trackAnimation(function () { if (10 <= this.progress && this.progress <= 100) { if (!els.cameraSpec[i].classList.contains('is-active')) { els.cameraSpec[i].classList.add('is-active'); } } if (this.progress == 0) { if (els.cameraSpec[i].classList.contains('is-active')) { els.cameraSpec[i].classList.remove('is-active'); } if (!(currDevice.indexOf('mobile') > -1) && els.cameraSpec[0].classList.contains('is-active')) { els.cameraSpec[0].classList.remove('is-active'); } } }); } } }; return { init: init } })(); })(); (function () { window.flagship.features.howtoPopup = (function () { const utils = window.flagship.common.utils; const Swiper = window.flagship.Swiper; resize = window.flagship.common.resize; let els = {}; let currDevice = resize.checkResolution(); prevDevice = null, currOpener = null; const init = function () { els.layerPopup = document.querySelector('.js-howto-popup'); if (!!els.layerPopup) { setElements(); setAttribute(); bindEvents(); eventList.setPopup(); } }; const setElements = function () { els.contents = document.querySelector('#contents'); els.openCtas = document.querySelectorAll('.js-howto-popup-opener'); els.openCta = document.querySelectorAll("[data-howto-slide]:not(.js-howto-popup [data-howto-slide])"); // popup content els.closeCta = document.querySelectorAll('.js-howto-popup-close-cta'); els.ytIframe = els.layerPopup.querySelector('iframe'); els.ytDesc = els.layerPopup.querySelector('.js-howto-popup-youtube-desc'); els.dimmed = els.layerPopup.querySelector('.js-howto-popup-dimmed'); // swiper els.swiperContainer = els.layerPopup.querySelector('.swiper-container'); els.featureTagging = els.swiperContainer.getAttribute('data-tagging-feature'); els.buttonWrap = els.swiperContainer.querySelectorAll('.swiper-slide'); els.thumbList = els.swiperContainer.querySelectorAll("[data-howto-slide]"); els.arrowWrap = els.swiperContainer.querySelector('.js-howto-popup-arrow-wrap'); els.indication = els.swiperContainer.querySelector('.common-carousel__pagination'); els.scrollbar = els.swiperContainer.querySelector('.js-howto-popup-scrollbar'); }; const setAttribute = function () { els.openCta.forEach((cta)=> { const howtoAtrr = cta.getAttribute("data-howto-slide"); els.thumbList.forEach((thumb)=>{ if(thumb.getAttribute("data-howto-slide") === howtoAtrr) { thumb.openerCta = cta; thumb.button = thumb.querySelector('button'); thumb.button.openerCta = thumb.openerCta; cta.thumb = thumb; } }); }); }; const bindEvents = function () { eventHandler.buttonsClick(); resize.add(eventList.resize); }; const eventHandler = { buttonsClick: function () { for (let i = 0; i < els.buttonWrap.length; i++) { els.buttonWrap[i].button.addEventListener('click', function () { eventList.setYoutube(els.buttonWrap[i]); }); } } }; const eventList = { setPopup: function () { for (let i = 0; i < els.thumbList.length; i++) { utils.layerPopup({ layerPopup: els.layerPopup, layerPopupClass: '.js-howto-popup', openerEvent: { element: els.openCtas[i], }, closeCtas: els.closeCta, dimmed: els.dimmed, moveTarget: document.documentElement, contents: els.contents, show: { start: function (target) { let allVideos = document.querySelectorAll('video'); for (let i = 0; i < allVideos.length; i++) { if (!allVideos[i].paused) allVideos[i].pause(); } els.layerPopup.removeAttribute('aria-hidden'); els.layerPopup.removeAttribute('tabindex'); els.layerPopup.classList.add('is-init'); currOpener = target.openerCta; eventList.itemImageLoader(); swiperEventList.activeCheck(); }, end: function (target) { els.layerPopup.classList.add('is-open'); eventList.setYoutube(target); } }, hide: { start: function () { els.layerPopup.classList.remove('is-open'); }, end: function (target) { if (utils.detector.isIosDevice) target.openerCta.style.display = ''; setTimeout(function () { els.layerPopup.classList.remove('is-init'); eventList.removeYoutube(); accessibility.removeTitle(); swiperEventList.destroy(); els.layerPopup.children[0].scrollTop = 0; }, 300); } } }); } }, setYoutube: function (target) { let opener = target.openerCta, ytSrc = 'htt' + 'ps://www.youtube.com/embed/' + opener.getAttribute('data-youtube-id') + '?wmode=opaque&rel=0&enablejsapi=1&version=3&autoplay=1', ytTitle = opener.getAttribute('data-youtube-title'), ytBlind = opener.querySelector('.blind').innerHTML; els.ytIframe.setAttribute('src', ytSrc); els.ytIframe.setAttribute('title', ytTitle); els.ytDesc.innerHTML = ytBlind; let oldActive = els.swiperContainer.querySelector('.swiper-slide.is-active'); if (!!oldActive) { oldActive.classList.remove('is-active'); oldActive.button.removeAttribute('title'); } opener.thumb.classList.add('is-active'); accessibility.setTitle(opener.thumb); }, removeYoutube: function () { els.ytIframe.removeAttribute('src'); els.ytDesc.innerHTML = ''; }, resize: function (currRes) { currDevice = currRes; if (prevDevice != currDevice) { if (els.layerPopup.classList.contains('is-open')) { swiperEventList.activeCheck(); } prevDevice = currDevice; } }, itemImageLoader: function () { for (let i = 0; i < els.buttonWrap.length; i++) { if (!els.buttonWrap[i].querySelector('img').classList.contains('is-img-load-complete')) { imageLoader.setResponsiveMedia([els.buttonWrap[i].querySelector('img')]); } } } }; const swiperEventList = { set: function () { if (els.swiperContainer.swiper == null) { els.swiperContainer.swiper = new Swiper(els.swiperContainer, { init: false, slidesPerView: 'auto', scrollbar: { el: els.scrollbar, draggable: true }, pagination: { el: els.indication, clickable: true, renderBullet: function (index, className) { const slide = this.slides[index]; const slideTitle = slide.getAttribute('data-slide-title') || ''; const tagging = { omniType: "microsite_gallery", actionType: "gallery", contentType: "feature gallery", taggingValue: els.featureTagging + ":sldr-dots:" + `${index + 1}` } this.slideTitle = slideTitle; return `

`; } }, a11y: false, }); els.swiperContainer.swiper.on('init', swiperEventList.init); els.swiperContainer.swiper.on('slideChange', swiperEventList.slideChange); els.swiperContainer.swiper.on('paginationUpdate', swiperEventList.paginationUpdate); els.swiperContainer.swiper.init(); } }, destroy: function () { if (els.swiperContainer.swiper != null) { els.swiperContainer.swiper.scrollbar.dragEl.style = ''; els.swiperContainer.swiper.scrollbar.destroy(true); els.swiperContainer.swiper.navigation.destroy(true); els.swiperContainer.swiper.destroy(true); els.swiperContainer.swiper = null; } }, init: function () { let self = this, notification = self.el.querySelector('.swiper-notification'); if (!!notification) self.el.removeChild(notification); setTimeout(function () { accessibility.slide(); }, 500); }, paginationUpdate: function () { const bullets = this.pagination.bullets; const slides = this.slides; let arrSlidesTitle = []; for (let i = 0; i < slides.length; i++) { arrSlidesTitle.push(slides[i].dataset.slideTitle) } for (let i = 0; i < bullets.length; i++) { const bullet = bullets[i]; const button = bullet.querySelector('button'); const isActive = bullet.classList.contains('swiper-pagination-bullet-active'); const selected = isActive ? ` ${LOCAL_VARI.selected}` : ''; if (currDevice.indexOf('mobile') > -1) { button.setAttribute('aria-label', `${LOCAL_VARI.slide}${i + 1}${selected}: ${arrSlidesTitle[i]}, ${arrSlidesTitle[i+1]}`); } else { button.setAttribute('aria-label', `${LOCAL_VARI.slide}${i + 1}${selected}: ${arrSlidesTitle[i]}, ${arrSlidesTitle[i+1]}, ${arrSlidesTitle[i+2]}, ${arrSlidesTitle[i+3]}`); } } }, slideChange: function () { accessibility.slide(); }, activeCheck: function () { let isSlide = ((currDevice.indexOf('mobile') > -1) && (els.buttonWrap.length >= 3)) || ((currDevice.indexOf('desktop') > -1 || currDevice == 'tablet') && (els.buttonWrap.length >= 5)); if (isSlide) { els.scrollbar.style.display = 'block'; swiperEventList.set(); let buttonIndex; for(let i=0; i < els.buttonWrap.length; i++) { if (els.buttonWrap[i] === currOpener.thumb) { buttonIndex = i; } } const changeSlide = buttonIndex - 1; if (currOpener != null) { els.swiperContainer.swiper.slideTo(changeSlide, 0); } } else { els.scrollbar.style.display = 'none'; swiperEventList.destroy(); } } }; const accessibility = { setTitle: function (target) { if (typeof LOCAL_VARI != 'undefined' && !!LOCAL_VARI) { target.button.setAttribute('title', LOCAL_VARI.selected); } else { target.button.setAttribute('title', 'Selected'); } }, removeTitle: function () { for(let i = 0; i < els.buttonWrap.length; i++) { if (typeof LOCAL_VARI != 'undefined' && !!LOCAL_VARI) { els.buttonWrap[i].button.removeAttribute('title', LOCAL_VARI.selected); } else { els.buttonWrap[i].button.removeAttribute('title', 'Selected') } }; }, slide: function () { let slidePerviewValue = currDevice.indexOf('mobile') > -1 ? 2 : 4; let getPerviewIndex = function () { return slidePerviewValue - 1; } for (let i = 0; i < els.swiperContainer.swiper.slides.length; i++) { if (i >= els.swiperContainer.swiper.activeIndex && i <= (els.swiperContainer.swiper.activeIndex + getPerviewIndex())) { utils.offAccessibility(els.swiperContainer.swiper.slides[i]); } else { utils.onAccessibility(els.swiperContainer.swiper.slides[i]); } } } }; return { init: init, } })(); })(); flagship.features.initialize = (function () { window.flagship.common.resize.bindEvent(); const init = function () { flagship.features.highlightsZone.init(); flagship.features.carousel.init(); flagship.features.clickToVideo.init(); flagship.features.howtoPopup.init(); flagship.features.headline.init(); flagship.features.scrollVideo.init(); flagship.features.aiOverview.init(); flagship.features.faq.init(); flagship.features.colorsViewer.init(); flagship.features.colors.init(); flagship.features.arBanner.init(); flagship.features.accordion.init(); flagship.features.proVisual.init(); flagship.features.highResolution.init(); flagship.features.display.init(); flagship.features.portrait.init(); flagship.features.kv.init(); flagship.features.compares.init(); }; return { init: init } })(); flagship.features.initialize.init(); });