Galaxy Z Flip5 | Kamera, Spezifikationen & Display | Samsung AT (2024)

'; } }, }); } }, init: function() { let notification = this.el.querySelector('.swiper-notification'); this.el.removeChild(notification); els.nextArrow.removeAttribute('aria-label'); els.nextArrow.removeAttribute('role'); els.prevArrow.removeAttribute('aria-label'); els.prevArrow.removeAttribute('role'); objs.swiper.on('slideChange', eventList.swiper.slideChange); objs.swiper.on('transitionEnd', eventList.swiper.transitionEnd); objs.swiper.on('touchMove', eventList.swiper.touchMove); objs.swiper.on('touchEnd', eventList.swiper.touchEnd); els.bullets = objs.swiper.pagination.bullets; for (let i = 0; i < els.bullets.length; i++) { els.bullets[i].addEventListener('click', function() { objs.swiper.slideTo(i); }); } eventList.setVideo(); eventList.scroll(); accessibility.slide(); accessibility.pagination.label(); accessibility.pagination.tagging(); }, slideChange: function() { let activeIndex = objs.swiper.activeIndex; let nextIndex = (activeIndex == (objs.swiper.slides.length - 1)) ? null : activeIndex + 1; if (nextIndex != null) { if (nextIndex == 2) { eventList.lazyLoad(els.videoWrap[nextIndex]); } else if (nextIndex == 3) { eventList.lazyLoad(els.videoWrap[nextIndex]); } } // video objs[`video_${status.prevIndex}`].eventList.reset.call(objs[`video_${status.prevIndex}`]); objs[`video_${status.prevIndex}`].video.removeEventListener('canplay', objs[`video_${status.prevIndex}`].video.play); if (!!status.isAuto) { if (objs[`video_${activeIndex}`] != undefined && objs[`video_${activeIndex}`].video.readyState >= 4) { objs[`video_${activeIndex}`].video.play(); } else { objs[`video_${activeIndex}`].video.addEventListener('canplay', function() { this.play(); }); } } // set autoplay if (objs.swiper.activeIndex == (objs.swiper.slides.length - 1)) status.isLast = true; accessibility.slide(); accessibility.pagination.label(); status.prevIndex = activeIndex; }, transitionEnd: function() { let activeController = objs[`video_${objs.swiper.activeIndex}`].controller; let isArrow = document.activeElement.classList.contains('swiper-button-next') || document.activeElement.classList.contains('swiper-button-prev'); let isBullet = document.activeElement.classList.contains('swiper-pagination-bullet'); if (!!isArrow || !!isBullet) return; activeController.focus(); }, touchMove: function() { objs.swiper.off('transitionEnd', eventList.swiper.transitionEnd); }, touchEnd: function() { objs.swiper.on('transitionEnd', eventList.swiper.transitionEnd); }, }, setVideo: function() { for (let i = 0; i < els.videoWrap.length; i++) { objs[`video_${i}`] = newVideoHandler({ playType: 'scrollPlay', wrap: els.videoWrap[i], video: els.videoWrap[i].querySelector('video'), controller: els.videoControlCta[i], startPoint: status.currentDevice.indexOf('mobile') > -1 ? 25 : 35, reversePoint: status.currentDevice.indexOf('mobile') > -1 ? 65 : 75, resetCallback: function() { if (this.wrap.classList.contains('is-completed')) { this.wrap.classList.remove('is-completed'); } }, playCallback: function() { accessibility.controlTagging.play(objs[`video_${i}`].wrap.control); }, pauseCallback: function() { accessibility.controlTagging.pause(objs[`video_${i}`].wrap.control); }, endCallback: function() { if (!this.wrap.classList.contains('is-completed')) { this.wrap.classList.add('is-completed'); } if (!status.isAuto || !!status.isLast) return; setTimeout(() => { objs.swiper.slideNext(500); }, 300); } }); } }, setScene: function() { objs.scene = SCROLLER({ trackElement: els.carouselWrap, useFixed: false }); }, onLoad: function() { status.currentDevice = resize.checkResolution(); if (!!utils.isLowNetwork()) status.isAuto = false; eventList.swiper.set(); objs.swiper.on('init', eventList.swiper.init); objs.swiper.init(); }, onResize: function(currRes) { status.currentDevice = currRes; }, scroll: function() { objs.scene.trackAnimation(function() { if (!status.isAuto) return; objs[`video_${objs.swiper.activeIndex}`].scrollActive(this.progress); }); }, lazyLoad: function(videoWrap) { videoLoader.setResponsiveMedia([videoWrap.querySelector('video')], function(target) { if (!target.videoHandler.wrap.classList.add('is-loaded')) target.videoHandler.wrap.classList.add('is-loaded'); }); let image = videoWrap.querySelectorAll('img'); imageLoader.setResponsiveMedia(image); }, setVideoStatus: function() { let activeIndex = els.videoControlCta.indexOf(this); if (!objs[`video_${activeIndex}`].video.paused) { objs[`video_${activeIndex}`].video.pause(); if (!utils.isLowNetwork()) status.isAuto = false; } else { objs[`video_${activeIndex}`].video.play(); if (!utils.isLowNetwork()) status.isAuto = true; } }, setArrowFocus: function(e) { status.arrowFocusTimeout = null; if ((e.type == 'keydown' && e.keyCode == 13) || e.type == 'click') { e.preventDefault(); clearTimeout(status.arrowFocusTimeout); status.arrowFocusTimeout = setTimeout(() => { if (objs.swiper.isBeginning && !objs.swiper.isEnd) { els.nextArrow.focus(); } else if (!objs.swiper.isBeginning && objs.swiper.isEnd) { els.prevArrow.focus(); } }, 300); } }, pauseVideo: function() { if (!objs[`video_${objs.swiper.activeIndex}`].video.paused) { objs[`video_${objs.swiper.activeIndex}`].video.pause(); if (!utils.isLowNetwork()) status.isAuto = false; } } }; const accessibility = { slide: function() { for (let i = 0; i < objs.swiper.slides.length; i++) { if (i != objs.swiper.activeIndex) { utils.onAccessibility(objs.swiper.slides[i]); } else { utils.offAccessibility(objs.swiper.slides[i]); } } }, pagination: { label: function() { for (let i = 0; i < els.bullets.length; i++) { let slideTitle = objs.swiper.slides[i].getAttribute('data-slide-name'); if (i === objs.swiper.realIndex) { if (typeof LOCAL_VARI != 'undefined' && !!LOCAL_VARI) { els.bullets[i].setAttribute('aria-label', `Slide${i+1}: ${slideTitle} ${LOCAL_VARI.selected.toLowerCase()}`); } else { els.bullets[i].setAttribute('aria-label', `Slide${i+1}: ${slideTitle} selected`); } } else { els.bullets[i].setAttribute('aria-label', `Slide${i+1}: ${slideTitle}`); } } }, tagging: function() { for (let i = 0; i < els.bullets.length; i++) { let tagging = { 'data-omni-type': 'microsite_pcontentinter', 'data-omni': 'galaxy-z-flip5:highlights:overview:index:', 'ga-ca': 'indication', 'ga-ac': 'carousel', 'ga-la': 'galaxy-z-flip5:highlights:overview:index:', }; Object.keys(tagging).forEach(function(key) { if (key == 'data-omni' || key == 'ga-la') { els.bullets[i].setAttribute(key, tagging[key] + (i + 1)); } else { els.bullets[i].setAttribute(key, tagging[key]); } }); } }, }, controlTagging: { pause: function(control) { if (!!control) { let dataOmni = control.getAttribute('data-omni'), gaLa = control.getAttribute('ga-la'); control.setAttribute('data-omni', dataOmni.replace('pause', 'play')); control.setAttribute('ga-la', gaLa.replace('pause', 'play')); } }, play: function(control) { if (!!control) { let dataOmni = control.getAttribute('data-omni'), gaLa = control.getAttribute('ga-la'); control.setAttribute('data-omni', dataOmni.replace('play', 'pause')); control.setAttribute('ga-la', gaLa.replace('play', 'pause')); } }, } }; return { init: init } })();})(); (function () { window.flagship = window.flagship || {}; window.flagship.highlights = window.flagship.highlights || {}; window.flagship.highlights.cameraVideo = (function () { var els = {}, objs = {}, utils = window.flagship.common.utils; var init = function () { els.section = document.querySelector(".highlights-video"); if (!!els.section) { setElements(); objList.setVideo(); objList.setScene(); bindEvents(); } }; var setElements = function () { els.scrollVideoWrap = els.section.querySelector(".common-video"); els.scrollVideo = els.section.querySelector( ".common-video__figure>video" ); els.scrollController = els.section.querySelector( ".common-video__control" ); els.scrollControllerBlindText = els.scrollController.querySelector(".blind"); }; var bindEvents = function () { window.addEventListener("scroll", handlerList.scroll); els.scrollController.addEventListener("click", handlerList.videoCta); handlerList.scroll(); }; var objList = { setVideo: function () { objs.cameraVideo = ANIUTIL.videoHandler({ playType: "scrollPlay", startPoint: 8, wrap: els.scrollVideoWrap, video: els.scrollVideo, resetCallback: function () { if (els.scrollVideoWrap.classList.contains("is-completed")) { els.scrollVideoWrap.classList.remove("is-completed"); } }, playCallback: function () { els.scrollControllerBlindText.innerText = "pause"; setTagging.pause(); }, pauseCallback: function () { els.scrollControllerBlindText.innerText = "Abspielen"; setTagging.play(); }, endCallback: function () { if (!els.scrollVideoWrap.classList.contains("is-completed")) { els.scrollVideoWrap.classList.add("is-completed"); } }, }); }, setScene: function () { objs.scene = SCROLLER({ trackElement: els.scrollVideo, useFixed: false, resize: utils.detector.isTouchDevice ? false : true, }); }, }; var handlerList = { scroll: function () { objs.scene.trackAnimation(function () { objs.cameraVideo.scrollActive(this.progress); }); }, videoCta: function () { if (els.scrollVideo.paused) { els.scrollVideo.play(); } else { els.scrollVideo.pause(); } }, }; var setTagging = { play: function () { if (els.scrollController.hasAttribute("data-omni")) { var dataOmni = els.scrollController .getAttribute("data-omni") .toLowerCase(); els.scrollController.setAttribute( "data-omni", dataOmni.replace("pause", "Abspielen") ); } if (els.scrollController.hasAttribute("ga-la")) { var gaLa = els.scrollController .getAttribute("ga-la") .toLowerCase(); els.scrollController.setAttribute( "ga-la", gaLa.replace("pause", "Abspielen") ); } }, pause: function () { if (els.scrollController.hasAttribute("data-omni")) { var dataOmni = els.scrollController .getAttribute("data-omni") .toLowerCase(); els.scrollController.setAttribute( "data-omni", dataOmni.replace("Abspielen", "pause") ); } if (els.scrollController.hasAttribute("ga-la")) { var gaLa = els.scrollController .getAttribute("ga-la") .toLowerCase(); els.scrollController.setAttribute( "ga-la", gaLa.replace("Abspielen", "pause") ); } }, }; return { init: init, }; })(); })(); (function () { window.flagship = window.flagship || {}; window.flagship.highlights = window.flagship.highlights || {}; window.flagship.highlights.colors = (function () { var els = {}, status = {}; var init = function () { els.section = document.querySelector(".highlights-colors"); if (!!els.section) { setElements(); bindEvents(); } }; var setElements = function () { els.colors = els.section.querySelectorAll( ".highlights-colors__tab-button" ); els.colorName = els.section.querySelectorAll( ".highlights-colors__tab-name" ); els.panel = els.section.querySelectorAll( ".highlights-colors__tab-panel--side .highlights-colors__image-wrap" ); els.popupBtn = els.section.querySelector(".common-cta-encased"); //swiper els.swiper = null; els.swiperContainer = els.section.querySelector(".swiper-container"); status.isClick = false; }; var bindEvents = function () { window.addEventListener("DOMContentLoaded", onLoadHandler, { once: true, }); window.addEventListener("scroll", onLoadHandler); for (var i = 0; i < els.colors.length; i++) { els.colors[i].index = i; els.colors[i].addEventListener("click", onClickColorItem); } }; var onLoadHandler = function () { setSwiper(); }; var onClickColorItem = function () { var target = this; status.isClick = true; handlerList.colorchip(target); handlerList.colorName(target); handlerList.panel(target); handlerList.slideTo(target); }; var handlerList = { colorchip: function (target) { var oldColor = els.section.querySelector( ".highlights-colors__tab .is-active" ); if (!target.classList.contains("is-active")) { oldColor.classList.remove("is-active"); oldColor.setAttribute("aria-selected", false); target.classList.add("is-active"); target.setAttribute("aria-selected", true); } }, colorName: function (target) { var oldColorName = els.section.querySelector( ".highlights-colors__tab-names .is-active" ), index = target.index; if (!els.colorName[index].classList.contains("is-active")) { oldColorName.classList.remove("is-active"); oldColorName.setAttribute("aria-hidden", true); els.colorName[index].classList.add("is-active"); els.colorName[index].setAttribute("aria-hidden", false); } }, panel: function (target) { var oldPanel = els.section.querySelector( ".highlights-colors__tab-panel-group .is-active" ), index = target.index; if (!els.panel[index].classList.contains("is-active")) { oldPanel.classList.remove("is-active"); els.panel[index].classList.add("is-active"); els.popupBtn.setAttribute( "data-model-color", els.panel[index].getAttribute("id") ); } }, slideTo: function (target) { var index = target.index; els.swiper.slideTo(index + 1, 500, false); status.isClick = false; }, setPopupBtnColor: function (target) { els.popupBtn.setAttribute( "data-model-color", target.getAttribute("id") ); }, }; var swiperEvents = { init: function () { var notification = this.el.querySelector(".swiper-notification"); if (!!notification) this.el.removeChild(notification); var activeIndex = this.activeIndex, activeSlide = this.slides[activeIndex]; (activeSlideImg = this.slides[this.activeIndex].querySelectorAll("img")), (prevSlideImg = this.slides[this.activeIndex - 1].querySelectorAll("img")), (nextIndex = this.activeIndex < this.slides.length - 1 ? this.activeIndex + 1 : 0), (nextSlide = this.slides[nextIndex]), (nextSlideImg = nextSlide.querySelectorAll("img")); if ( activeSlideImg[0] && !activeSlideImg[0].classList.contains("is-img-load-complete") ) { imageLoader.setResponsiveMedia(activeSlideImg); } if ( prevSlideImg[0] && !prevSlideImg[0].classList.contains("is-img-load-complete") ) { imageLoader.setResponsiveMedia(prevSlideImg); } if ( nextSlideImg[0] && !nextSlideImg[0].classList.contains("is-img-load-complete") ) { imageLoader.setResponsiveMedia(nextSlideImg); } accessibility.slide(); handlerList.setPopupBtnColor(activeSlide); }, slideChange: function () { var activeIndex = els.swiper.realIndex, activeSlide = this.slides[activeIndex + 1], activeSlideImg = els.swiper.slides[els.swiper.activeIndex].querySelectorAll( "img" ), nextIndex = this.activeIndex < this.slides.length - 1 ? this.activeIndex + 1 : 0, nextSlideImg = this.slides[nextIndex].querySelectorAll("img"); if (!status.isClick) { handlerList.colorchip(els.colors[activeIndex]); handlerList.colorName(els.colors[activeIndex]); handlerList.panel(els.colors[activeIndex]); handlerList.setPopupBtnColor(this.slides[els.swiper.activeIndex]); } if (!activeSlideImg[0].classList.contains("is-img-load-complete")) { imageLoader.setResponsiveMedia(activeSlideImg); } if (!nextSlideImg[0].classList.contains("is-img-load-complete")) { imageLoader.setResponsiveMedia(nextSlideImg); } accessibility.slide(); handlerList.setPopupBtnColor(activeSlide); }, slideChangeTransitionEnd: function () { status.isClick = false; }, }; var setSwiper = function () { var windowOffsetTop = window.pageYOffset, windowOffsetBottom = windowOffsetTop + window.innerHeight, targetOffsetTop = windowOffsetTop + els.section.getBoundingClientRect().top; if (els.swiper == null && windowOffsetBottom >= targetOffsetTop) { els.swiper = new Swiper(els.swiperContainer, { init: false, slidesPerView: "auto", loop: true, loopedSlides: 1, }); els.swiper.on("init", swiperEvents.init); els.swiper.on("slideChange", swiperEvents.slideChange); els.swiper.on( "slideChangeTransitionEnd", swiperEvents.slideChangeTransitionEnd ); els.swiper.init(); } }; var accessibility = { slide: function () { for (var i = 0; i < els.swiper.slides.length; i++) { if (i != els.swiper.activeIndex) { els.swiper.slides[i].setAttribute("aria-hidden", true); } else { els.swiper.slides[i].setAttribute("aria-hidden", false); } } }, }; return { init: init, }; })(); })(); (function () { window.flagship = window.flagship || {}; window.flagship.highlights = window.flagship.highlights || {}; window.flagship.highlights.customization = (function () { var els = {}, status = {}, utils = window.flagship.common.utils, agent = navigator.userAgent.toLowerCase(), maxOs = agent.indexOf("mac os") > -1, touchDevice = "ontouchstart" in window || (window.DocumentTouch && document instanceof window.DocumentTouch), resize = window.flagship.common.resize; var init = function () { els.section = document.querySelector(".highlights-customization"); if (!!els.section) { setElements(); bindEvents(); } }; var setElements = function () { els.uiTabBtns = els.section.querySelectorAll('.highlights-customization__ui-tab-btn'); els.uiContent = els.section.querySelector('.highlights-customization__ui-content-wrap'); els.clockUi = els.section.querySelector('.highlights-customization__ui-content--clock'); els.widgetUi = els.section.querySelector('.highlights-customization__ui-content--widget'); els.widgetUiList = Array.prototype.slice.call(els.widgetUi.querySelectorAll('.highlights-customization__ui-item')); els.clockUiList = Array.prototype.slice.call(els.clockUi.querySelectorAll('.highlights-customization__ui-item')); els.clockDisplay = els.section.querySelector( ".highlights-customization__display--clock" ); els.widgetDisplay = els.section.querySelector( ".highlights-customization__display--widget" ); els.clockDisplayItem = els.clockDisplay.querySelectorAll( ".highlights-customization__display-item" ); els.widgetDisplayItem = els.widgetDisplay.querySelectorAll( ".highlights-customization__display-item" ); }; var bindEvents = function () { window.addEventListener("DOMContentLoaded", handlerList.load, { once: true, }); els.uiTabBtns[0].addEventListener("click", handlerList.clockTab); els.uiTabBtns[1].addEventListener("click", handlerList.widgetTab); if (!maxOs && !touchDevice) { els.uiContent.addEventListener( "mouseenter", function () { scrollController.destroy(true); }, { capture: true, } ); els.uiContent.addEventListener( "mouseleave", function () { scrollController.init({ speed: 120, duration: 0.5, }); }, { capture: true, } ); } resize.add(handlerList.checkMobile); }; var setSwiper = function() { els.scrollbar = els.isUiWrap.querySelector('.highlights-customization__scrollbar'); if (els.swiper == null) { els.swiper = new Swiper(els.isUiWrap, { init: false, slidesPerView: 'auto', observer: true, observeParents: true, observeSlideChildren: true, scrollbar: { el: els.scrollbar, draggable: true, hide: false, } }); els.swiper.on('init', function() { var notification = this.el.querySelector('.swiper-notification'); this.el.removeChild(notification); }); els.swiper.init(); } }; var destroySwiper = function() { if (els.swiper != null) { els.swiper.scrollbar.dragEl.style = ''; els.swiper.scrollbar.destroy(true); els.swiper.destroy(true); els.swiper = null; } }; var handlerList = { load: function () { status.currentTab = "clock"; status.prevTab = els.uiTabBtns[0]; for (var i = 0; i < els.clockDisplayItem.length; i++) { utils.onAccessibility(els.clockDisplayItem[i]); } for (var i = 0; i < els.widgetDisplayItem.length; i++) { utils.onAccessibility(els.widgetDisplayItem[i]); } tabEvents.initTab(); }, checkMobile: function() { if (resize.checkResolution().indexOf('mobile') > -1) { setSwiper(); } else { destroySwiper(); } }, widgetTab: function () { if (this.classList.contains("is-active")) return; tabEvents.removeActive(); status.currentTab = "widget"; tabEvents.changeTab(this); imageLoader.setResponsiveMedia( els.widgetUi.querySelectorAll("img") ); status.prevTab = this; }, clockTab: function () { if (this.classList.contains("is-active")) return; tabEvents.removeActive(); status.currentTab = "clock"; tabEvents.changeTab(this); status.prevTab = this; }, clickUi: function () { var self = this, currentIndex = els.isUi.indexOf(self); if (self.classList.contains("is-active")) return; clearTimeout(status.clickTimeout); status.clickTimeout = setTimeout(function () { tabEvents.removeActive(); accessibility.setTitle(self.querySelector("button")); self.classList.add("is-active"); els.isDisplay[currentIndex].classList.add("is-active"); utils.offAccessibility(els.isDisplay[currentIndex]); status.prevIndex = currentIndex; }, 200); }, }; var tabEvents = { initTab: function () { status.prevIndex = 0; status.prevDisplayWrap = els.isDisplayWrap; status.prevUiWrap = els.isUiWrap; destroySwiper(); tabEvents.getElement(); tabEvents.initTabTitle(); tabEvents.firstAddActive(); tabEvents.bindClickUi(); accessibility.uiItem(); handlerList.checkMobile(); }, changeTab: function (currentTab) { if (resize.checkResolution().indexOf("mobile") > -1) els.uiContent.scrollLeft = -1; tabEvents.initTab(currentTab); status.prevTab.classList.remove("is-active"); status.prevDisplayWrap.classList.remove("is-active"); status.prevUiWrap.classList.remove("is-visible"); status.prevUiWrap.classList.remove("is-active"); currentTab.classList.add("is-active"); els.isUiWrap.classList.add("is-visible"); setTimeout(function () { els.isUiWrap.classList.add("is-active"); }, 100); setTimeout(function () { if (resize.checkResolution().indexOf("mobile") > -1) els.uiContent.scrollLeft = 0; }, 200); els.isDisplayWrap.classList.add("is-active"); }, getElement: function () { els.isUiWrap = status.currentTab == "clock" ? els.clockUi : els.widgetUi; els.isUi = status.currentTab == "clock" ? els.clockUiList : els.widgetUiList; els.isDisplayWrap = status.currentTab == "clock" ? els.clockDisplay : els.widgetDisplay; els.isDisplay = status.currentTab == "clock" ? els.clockDisplayItem : els.widgetDisplayItem; }, removeActive: function () { els.isUi[status.prevIndex].classList.remove("is-active"); els.isUi[status.prevIndex] .querySelector("button") .removeAttribute("title"); els.isDisplay[status.prevIndex].classList.remove("is-active"); utils.onAccessibility(els.isDisplay[status.prevIndex]); }, firstAddActive: function () { els.isUi[0].classList.add("is-active"); accessibility.setTitle(els.isUi[0].querySelector("button")); els.isDisplay[0].classList.add("is-active"); utils.offAccessibility(els.isDisplay[0]); }, bindClickUi: function () { for (var i = 0; i < els.isUi.length; i++) { els.isUi[i].addEventListener("click", handlerList.clickUi); } }, initTabTitle: function () { if (status.currentTab === "clock") { els.uiTabBtns[1].removeAttribute("title"); accessibility.setTitle(els.uiTabBtns[0]); } else { els.uiTabBtns[0].removeAttribute("title"); accessibility.setTitle(els.uiTabBtns[1]); } }, }; var accessibility = { uiItem: function () { if (status.currentTab === "clock") { utils.onAccessibility(els.widgetUi); utils.offAccessibility(els.clockUi); } else { utils.onAccessibility(els.clockUi); utils.offAccessibility(els.widgetUi); } }, setTitle: function (button) { if (typeof LOCAL_VARI != "undefined" && !!LOCAL_VARI) { button.setAttribute("title", LOCAL_VARI.selected); } else { button.setAttribute("title", "Selected"); } }, }; return { init: init, }; })(); })(); (function () { window.flagship = window.flagship || {}; window.flagship.highlights = window.flagship.highlights || {}; window.flagship.highlights.design = (function () { var els = {}, objs = {}, utils = window.flagship.common.utils, resize = window.flagship.common.resize; currDevice = resize.checkResolution(); var init = function () { els.section = document.querySelector(".highlights-design"); if (!!els.section) { setElements(); objList.setVideo(); objList.setScene(); bindEvents(); } }; var setElements = function () { els.scrollVideoWrap = els.section.querySelector(".common-video"); els.scrollVideo = els.section.querySelector( ".common-video__figure>video" ); els.scrollController = els.section.querySelector( ".common-video__control" ); els.scrollControllerBlindText = els.scrollController.querySelector(".blind"); }; var bindEvents = function () { window.addEventListener("scroll", handlerList.scroll); els.scrollController.addEventListener("click", handlerList.videoCta); handlerList.scroll(); resize.add(onResizeHandler); }; var onResizeHandler = function (currRes) { currDevice = currRes; }; var objList = { setVideo: function () { objs.designVideo = ANIUTIL.videoHandler({ playType: "scrollPlay", startPoint: currDevice.indexOf("mobile") > -1 ? 21 : 24, reversePoint: currDevice.indexOf("mobile") > -1 ? 82 : 80, wrap: els.scrollVideoWrap, video: els.scrollVideo, resetCallback: function () { if (els.scrollVideoWrap.classList.contains("is-completed")) { els.scrollVideoWrap.classList.remove("is-completed"); } }, playCallback: function () { els.scrollControllerBlindText.innerText = "pause"; setTagging.pause(); }, pauseCallback: function () { els.scrollControllerBlindText.innerText = "Abspielen"; setTagging.play(); }, endCallback: function () { if (!els.scrollVideoWrap.classList.contains("is-completed")) { els.scrollVideoWrap.classList.add("is-completed"); } }, }); }, setScene: function () { objs.scene = SCROLLER({ trackElement: els.scrollVideo, useFixed: false, resize: utils.detector.isTouchDevice ? false : true, }); }, }; var handlerList = { scroll: function () { objs.scene.trackAnimation(function () { objs.designVideo.scrollActive(this.progress); }); }, videoCta: function () { if (els.scrollVideo.paused) { els.scrollVideo.play(); } else { els.scrollVideo.pause(); } }, }; var setTagging = { play: function () { if (els.scrollController.hasAttribute("data-omni")) { var dataOmni = els.scrollController .getAttribute("data-omni") .toLowerCase(); els.scrollController.setAttribute( "data-omni", dataOmni.replace("pause", "Abspielen") ); } if (els.scrollController.hasAttribute("ga-la")) { var gaLa = els.scrollController .getAttribute("ga-la") .toLowerCase(); els.scrollController.setAttribute( "ga-la", gaLa.replace("pause", "Abspielen") ); } }, pause: function () { if (els.scrollController.hasAttribute("data-omni")) { var dataOmni = els.scrollController .getAttribute("data-omni") .toLowerCase(); els.scrollController.setAttribute( "data-omni", dataOmni.replace("Abspielen", "pause") ); } if (els.scrollController.hasAttribute("ga-la")) { var gaLa = els.scrollController .getAttribute("ga-la") .toLowerCase(); els.scrollController.setAttribute( "ga-la", gaLa.replace("Abspielen", "pause") ); } }, }; return { init: init, }; })(); })(); (function () { window.flagship = window.flagship || {}; window.flagship.highlights = window.flagship.highlights || {}; window.flagship.highlights.durability = (function () { var els = {}, utils = window.flagship.common.utils; var init = function () { els.section = document.querySelector(".highlights-durability"); if (!!els.section) { setElements(); setProperty(); bindEvents(); } }; var setElements = function () { els.durabilityItemWrap = els.section.querySelector( ".highlights-durability__list" ); els.durabilityItem = els.section.querySelectorAll( ".highlights-durability__item" ); }; var setProperty = function () { for (var i = 0; i < els.durabilityItem.length; i++) { els.durabilityItem[i].btn = els.durabilityItem[i].querySelector( ".highlights-durability__item-button" ); els.durabilityItem[i].desc = els.durabilityItem[i].querySelector( ".highlights-durability__item-description" ); els.durabilityItem[i].img = els.durabilityItem[i].querySelector( ".highlights-durability__item-image" ); if (!els.durabilityItem[i].classList.contains("is-open")) utils.onAccessibility(els.durabilityItem[i].img); } }; var bindEvents = function () { window.addEventListener("DOMContentLoaded", onLoadHandler, { once: true, }); for (var i = 0; i < els.durabilityItem.length; i++) { els.durabilityItem[i].btn.addEventListener("click", onClickItemBtn); } }; var onLoadHandler = function () { els.durabilityItem[0].desc.style.display = "block"; }; var onClickItemBtn = function () { var currentItem = this.parentElement.parentElement, oldItem = els.durabilityItemWrap.querySelector(".is-open"), dataOmni = this.getAttribute("data-omni"), gaLa = this.getAttribute("ga-la"); if ( currentItem != oldItem && !currentItem.classList.contains("is-open") ) { oldItem.setAttribute("aria-expanded", false); utils.onAccessibility(oldItem.img); this.setAttribute("aria-expanded", true); utils.offAccessibility(currentItem.img); $(oldItem.desc).slideUp(300); $(currentItem.desc).slideDown(300); setTimeout(function () { oldItem.classList.remove("is-open"); currentItem.classList.add("is-open"); }, 100); this.setAttribute("data-omni", dataOmni.replace("open", "close")); this.setAttribute("ga-la", gaLa.replace("open", "close")); } }; return { init: init, }; })(); })(); (function () { window.flagship = window.flagship || {}; window.flagship.highlights = window.flagship.highlights || {}; window.flagship.highlights.excellence = (function () { var els = {}, objs = {}, resize = window.flagship.common.resize, utils = window.flagship.common.utils, currDevice = null, prevDevice = null; var init = function () { els.section = document.querySelector(".highlights-excellence"); if (!!els.section) { setElements(); setProperty(); bindEvents(); } }; var setElements = function () { els.contentWrap = document.querySelector("#wrap"); els.sceneTrack = els.section.querySelector( ".highlights-excellence__fixed-track" ); els.sceneFixed = els.section.querySelector( ".highlights-excellence__fixed-item" ); els.item = els.section.querySelectorAll( ".highlights-excellence__item" ); els.accBanner = document.querySelector(".highlights-accessories"); // swiper els.swiper = null; els.swiperEl = els.section.querySelector( ".highlights-excellence__carousel" ); els.swiperSlides = els.swiperEl.querySelectorAll( ".highlights-excellence__item" ); els.swiperNavArrowNext = els.swiperEl.querySelector( ".swiper-button-next" ); els.swiperNavArrowPrev = els.swiperEl.querySelector( ".swiper-button-prev" ); els.arrowTimeout = null; els.orientationTimeout = null; }; var setProperty = function () { for (var i = 0; i < els.item.length; i++) { var clickable = els.item[i].querySelectorAll("a, button"); if (clickable.length > 0) { for (var j = 0; j < clickable.length; j++) { clickable[j].item = els.item[i]; clickable[j].addEventListener('keydown', onFocusClickable); } } } }; var objList = { setScene: function () { if (objs.scene == null) { objs.scene = SCROLLER({ trackElement: els.sceneTrack, fixedElement: els.sceneFixed, useFixed: utils.detector.isIEorEdge < 0 ? false : true, useSticky: utils.detector.isIEorEdge < 0 ? true : false, trackHeight: 1.5, correction: -1, useStrictMode: false, }); } }, }; var bindEvents = function () { window.addEventListener("DOMContentLoaded", onLoadHandler, { once: true, }); window.addEventListener("scroll", scrollerHandlerList.onScroller); window.addEventListener("orientationchange", function () { clearTimeout(els.orientationTimeout); els.orientationTimeout = setTimeout(function () { checkBrokenFixed(); setCard(); }, 1000); }); els.swiperNavArrowNext.addEventListener( "click", swiperEvents.onClickArrow ); els.swiperNavArrowNext.addEventListener( "keydown", swiperEvents.onClickArrow ); els.swiperNavArrowPrev.addEventListener( "click", swiperEvents.onClickArrow ); els.swiperNavArrowPrev.addEventListener( "keydown", swiperEvents.onClickArrow ); resize.add(onResizeHandler); }; var onLoadHandler = function () { currDevice = resize.checkResolution(); prevDevice = currDevice; setTimeout(function () { checkBrokenFixed(); setCard(); }, 100); }; var onResizeHandler = function (currRes) { currDevice = currRes; if (currDevice != prevDevice) { onResponsiveHandler(); prevDevice = currDevice; } else if (!utils.detector.isTouchDevice) { checkBrokenFixed(); } setCard(); }; var onResponsiveHandler = function () { if (currDevice.indexOf("mobile") > -1) { els.accBanner.style.marginTop = ""; } checkBrokenFixed(); }; var setCard = function () { var slideMargin = parseInt( window.getComputedStyle(els.swiperSlides[0]).marginLeft ), slideWidth = els.swiperSlides[0].clientWidth + slideMargin * 2, slideWrapWidth = slideWidth * els.swiperSlides.length, innerWidth = els.section.querySelector(".common-inner").clientWidth, contentWrapWidth = els.contentWrap.clientWidth, currSize = (contentWrapWidth - innerWidth) / 2, SlideTotalSize = slideWrapWidth + currSize; if (document.documentElement.classList.contains("is-broken-fixed")) { scrollerHandlerList.destroyScroller(); if (els.swiper != null) swiperEvents.destroy(); } else { if (currDevice.indexOf("mobile") == -1) { if (els.swiper != null) swiperEvents.destroy(); if (els.item.length > 3 || contentWrapWidth < SlideTotalSize) { objList.setScene(); scrollerHandlerList.onScroller(); } else { scrollerHandlerList.destroyScroller(); } } else { scrollerHandlerList.destroyScroller(); setSwiper(); } } }; // scroller var scrollerHandlerList = { onScroller: function () { if (objs.scene != null) { if ( !document.documentElement.classList.contains("is-broken-fixed") ) { var outerHeight = els.sceneFixed.clientHeight, innerHeight = els.sceneFixed.querySelector(".common-inner").clientHeight, accMarginTop = (outerHeight - innerHeight) / 2 - utils.getNavHeight(), accValue = accMarginTop < 0 ? 0 : accMarginTop; els.accBanner.style.marginTop = -accValue + "px"; } objs.scene.trackAnimation(function () { if (this.progress > -10 && this.progress < 100) { var slideMargin = parseInt( window.getComputedStyle(els.swiperSlides[0]).marginLeft ), slideWidth = els.swiperSlides[0].clientWidth + slideMargin * 2, slideWrapWidth = slideWidth * els.swiperSlides.length, innerWidth = els.section.querySelector(".common-inner").clientWidth, contentWrapWidth = els.contentWrap.clientWidth, moveSize = slideWrapWidth - contentWrapWidth, currSize = contentWrapWidth - innerWidth, slideValue = moveSize + currSize; transValue = ANIUTIL.calRange({ targetValue: slideValue, progress: this.progress, startPoint: 0, endPoint: 20, }); var tweener = new TweenMax(els.swiperEl, 0.2, { x: transValue * (utils.isRTL() ? 1 : -1) + "px", ease: "none", }); tweener.updateTo( { x: transValue * (utils.isRTL() ? 1 : -1) + "px", }, true ); } }); } }, destroyScroller: function () { if (objs.scene != null) { objs.scene.destroy(true, true); objs.scene = null; els.swiperEl.style = ""; els.sceneTrack.style = ""; } }, }; // swiper var setSwiper = function () { if (els.swiper == null) { els.swiper = new Swiper(els.swiperEl, { init: false, centeredSlides: true, slidesPerView: "auto", navigation: { nextEl: els.swiperNavArrowNext, prevEl: els.swiperNavArrowPrev, }, }); els.swiper.init(); els.swiper.on("init", swiperEvents.init); els.swiper.on("slideChange", swiperEvents.slideChange); } }; var swiperEvents = { init: function () { var notification = this.el.querySelector(".swiper-notification"); if (!!notification) this.el.removeChild(notification); setAccessibility.slide(); setAccessibility.arrow(); }, slideChange: function () { setAccessibility.slide(); setAccessibility.arrow(); }, destroy: function () { if (els.swiper != null) { els.swiper.destroy(true); els.swiper = null; } }, onClickArrow: function (e) { if ( (e.type == "keydown" && e.keyCode == 13) || (e.type == "click" && document.documentElement.classList.contains("isTouchDevice")) ) { e.preventDefault(); clearTimeout(els.arrowTimeout); els.arrowTimeout = setTimeout(function () { if (els.swiper.isBeginning && !els.swiper.isEnd) { els.swiperNavArrowNext.focus(); } else if (!els.swiper.isBeginning && els.swiper.isEnd) { els.swiperNavArrowPrev.focus(); } }, 300); } }, }; var setAccessibility = { slide: function () { for (var i = 0; i < els.swiper.slides.length; i++) { if (i != els.swiper.snapIndex) { utils.onAccessibility(els.swiper.slides[i]); } else { utils.offAccessibility(els.swiper.slides[i]); } } }, arrow: function () { if (els.swiper.isBeginning && !els.swiper.isEnd) { utils.offAccessibility(els.swiperNavArrowNext); utils.onAccessibility(els.swiperNavArrowPrev); } else if (!els.swiper.isBeginning && els.swiper.isEnd) { utils.offAccessibility(els.swiperNavArrowPrev); utils.onAccessibility(els.swiperNavArrowNext); } else { utils.offAccessibility(els.swiperNavArrowNext); utils.offAccessibility(els.swiperNavArrowPrev); } }, }; var checkBrokenFixed = function () { if (currDevice.indexOf("mobile") == -1) { var widHeight = window.innerHeight - utils.getNavHeight(), headLineHeight = els.sceneFixed.querySelector( ".common-sub-headline" ).clientHeight, carouselMarginTop = parseInt( window.getComputedStyle(els.swiperEl).marginTop ), itemHeightArr = [], maxHeight = null, cardHeight = null; for (var i = 0; i < els.swiperSlides.length; i++) { itemHeightArr.push(els.swiperSlides[i].clientHeight); } maxHeight = itemHeightArr.reduce(function (prev, itemArr) { return Math.max(prev, itemArr); }); cardHeight = maxHeight; totalHeight = headLineHeight + carouselMarginTop + cardHeight; if (widHeight <= totalHeight) { document.documentElement.classList.add("is-broken-fixed"); } else { document.documentElement.classList.remove("is-broken-fixed"); } } else { document.documentElement.classList.remove("is-broken-fixed"); } }; var onFocusClickable = function(e) { var targetItem = this.item, targetIndex = [].indexOf.call(els.swiperSlides, targetItem); if (objs.scene != null) { var startScroll = els.sceneTrack.getBoundingClientRect().top + window.pageYOffset, maxScroll = startScroll + (parseInt(window.getComputedStyle(els.sceneTrack).height) / 2); els.sceneFixed.scrollLeft = 0; if (e.type == 'keydown' && targetIndex >= 3) { window.scrollTo(0, maxScroll); } else { window.scrollTo(0, startScroll); } } }; return { init: init, }; })(); })(); (function () { window.flagship = window.flagship || {}; window.flagship.highlights = window.flagship.highlights || {}; window.flagship.highlights.exclusive = (function () { var els = {}; var init = function () { els.section = document.querySelector(".highlights-exclusive"); if (!!els.section) { setElements(); bindEvents(); } }; var setElements = function () { els.colors = els.section.querySelectorAll( ".highlights-exclusive__tab-button" ); els.panel = els.section.querySelectorAll( ".highlights-exclusive__tab-panel" ); els.colorName = els.section.querySelectorAll( ".highlights-exclusive__tab-name" ); els.popupBtn = els.section.querySelector(".common-cta-encased"); }; var bindEvents = function () { for (var i = 0; i < els.colors.length; i++) { els.colors[i].index = i; els.colors[i].addEventListener("click", onClickColorItem); if (els.colors[i].classList.contains("is-active")) { els.popupBtn.setAttribute( "data-model-color", els.panel[els.colors[i].index].getAttribute("id") ); } } }; var onClickColorItem = function () { var oldColor = els.section.querySelector( ".highlights-exclusive__tab .is-active" ), oldPanel = els.section.querySelector( ".highlights-exclusive__tab-panel-group .is-active" ), oldColorName = els.section.querySelector( ".highlights-exclusive__tab-names .is-active" ), index = this.index; // colorchip if (!this.classList.contains("is-active")) { oldColor.classList.remove("is-active"); oldColor.setAttribute("aria-selected", false); this.classList.add("is-active"); this.setAttribute("aria-selected", true); } // panel if (!els.panel[index].classList.contains("is-active")) { oldPanel.classList.remove("is-active"); oldPanel.setAttribute("aria-hidden", true); els.panel[index].classList.add("is-active"); els.panel[index].setAttribute("aria-hidden", false); els.popupBtn.setAttribute( "data-model-color", els.panel[index].getAttribute("id") ); } if (!els.colorName[index].classList.contains("is-active")) { oldColorName.classList.remove("is-active"); oldColorName.setAttribute("aria-hidden", true); els.colorName[index].classList.add("is-active"); els.colorName[index].setAttribute("aria-hidden", false); } }; return { init: init, }; })(); })(); (function () { window.flagship = window.flagship || {}; window.flagship.highlights = window.flagship.highlights || {}; window.flagship.highlights.faq = (function () { var els = {}, utils = window.flagship.common.utils; var init = function () { els.section = document.querySelector(".highlights-faq"); if (!!els.section) { setElements(); bindEvents(); } }; var setElements = function () { els.faqItems = els.section.querySelectorAll(".highlights-faq__item"); }; var bindEvents = function () { for (var i = 0; i < els.faqItems.length; i++) { els.faqItems[i].arrowBtn = els.faqItems[i].querySelector( ".highlights-faq__item button" ); els.faqItems[i].arrowBtn.index = i; els.faqItems[i].answer = els.faqItems[i].querySelector( ".highlights-faq__answer" ); els.faqItems[i].cta = els.faqItems[i].querySelector( ".highlights-faq__cta" ); els.faqItems[i].arrowBtn.addEventListener("click", onClickFaqBtn); if (els.faqItems[i].cta) { els.faqItems[i].cta.addEventListener("click", onClickFaqCta); } } }; var onClickFaqBtn = function () { var index = this.index, parentWrap = els.faqItems[index], dataOmni = this.getAttribute("data-omni"), gaLa = this.getAttribute("ga-la"), self = this; if (!parentWrap.classList.contains("is-open")) { parentWrap.classList.add("is-open"); $(parentWrap.answer).stop().slideDown(300); this.setAttribute("aria-expanded", true); setTimeout(function () { self.setAttribute("data-omni", dataOmni.replace("open", "close")); self.setAttribute("ga-la", gaLa.replace("open", "close")); }, 50); } else { parentWrap.classList.remove("is-open"); $(parentWrap.answer).stop().slideUp(250); this.setAttribute("aria-expanded", false); setTimeout(function () { self.setAttribute("data-omni", dataOmni.replace("close", "open")); self.setAttribute("ga-la", gaLa.replace("close", "open")); }, 50); } }; var onClickFaqCta = function (e) { if (this.getAttribute("href").indexOf("#") == 0) { e.preventDefault(); var faqId = this.getAttribute("href").split("#")[1], section = document.querySelector("#" + faqId), sectionTop = section.getBoundingClientRect().top, navHeight = utils.getNavHeight(), faqScroll = window.pageYOffset + sectionTop - navHeight, sectionTimeout = null; clearTimeout(sectionTimeout); sectionTimeout = setTimeout(function () { if (!!section.querySelectorAll("button, a")[0]) { section.querySelectorAll("button, a")[0].focus(); } else { section .querySelector(".common-eyebrow") .setAttribute("tabindex", 0); section.querySelector(".common-eyebrow").focus(); section .querySelector(".common-eyebrow") .addEventListener("focusout", function () { section .querySelector(".common-eyebrow") .removeAttribute("tabindex"); }); } }, 20); window.scrollTo(0, faqScroll); } }; return { init: init, }; })(); })(); (function () { window.flagship = window.flagship || {}; window.flagship.highlights = window.flagship.highlights || {}; window.flagship.highlights.flexpanel = (function () { var els = {}, objs = {}, utils = window.flagship.common.utils, resize = window.flagship.common.resize; currDevice = resize.checkResolution(); var init = function () { els.section = document.querySelector(".highlights-flex-mode"); if (!!els.section) { setElements(); objList.setVideo(); objList.setScene(); bindEvents(); } }; var setElements = function () { els.scrollVideoWrap = els.section.querySelector(".js-scroll-video"); els.scrollVideo = els.section.querySelector( ".js-scroll-video .common-video__figure>video" ); els.scrollController = els.section.querySelector( ".js-scroll-video .common-video__control" ); els.scrollControllerBlindText = els.scrollController.querySelector(".blind"); }; var bindEvents = function () { window.addEventListener("scroll", handlerList.scroll); els.scrollController.addEventListener("click", handlerList.videoCta); handlerList.scroll(); resize.add(onResizeHandler); }; var onResizeHandler = function (currRes) { currDevice = currRes; }; var objList = { setVideo: function () { objs.flexpanelVideo = ANIUTIL.videoHandler({ playType: "scrollPlay", startPoint: 10, reversePoint: currDevice.indexOf("mobile") > -1 ? 76 : 87, wrap: els.scrollVideoWrap, video: els.scrollVideo, resetCallback: function () { if (els.scrollVideoWrap.classList.contains("is-completed")) { els.scrollVideoWrap.classList.remove("is-completed"); } }, playCallback: function () { els.scrollControllerBlindText.innerText = "pause"; setTagging.pause(); }, pauseCallback: function () { els.scrollControllerBlindText.innerText = "Abspielen"; setTagging.play(); }, endCallback: function () { if (!els.scrollVideoWrap.classList.contains("is-completed")) { els.scrollVideoWrap.classList.add("is-completed"); } }, }); }, setScene: function () { objs.scene = SCROLLER({ trackElement: els.scrollVideo, useFixed: false, resize: utils.detector.isTouchDevice ? false : true, }); }, }; var handlerList = { scroll: function () { objs.scene.trackAnimation(function () { objs.flexpanelVideo.scrollActive(this.progress); }); }, videoCta: function () { if (els.scrollVideo.paused) { els.scrollVideo.play(); } else { els.scrollVideo.pause(); } }, }; var setTagging = { play: function () { if (els.scrollController.hasAttribute("data-omni")) { var dataOmni = els.scrollController .getAttribute("data-omni") .toLowerCase(); els.scrollController.setAttribute( "data-omni", dataOmni.replace("pause", "Abspielen") ); } if (els.scrollController.hasAttribute("ga-la")) { var gaLa = els.scrollController .getAttribute("ga-la") .toLowerCase(); els.scrollController.setAttribute( "ga-la", gaLa.replace("pause", "Abspielen") ); } }, pause: function () { if (els.scrollController.hasAttribute("data-omni")) { var dataOmni = els.scrollController .getAttribute("data-omni") .toLowerCase(); els.scrollController.setAttribute( "data-omni", dataOmni.replace("Abspielen", "pause") ); } if (els.scrollController.hasAttribute("ga-la")) { var gaLa = els.scrollController .getAttribute("ga-la") .toLowerCase(); els.scrollController.setAttribute( "ga-la", gaLa.replace("Abspielen", "pause") ); } }, }; return { init: init, }; })(); })(); (function () { window.flagship = window.flagship || {}; window.flagship.highlights = window.flagship.highlights || {}; window.flagship.highlights.flexwindowBig = (function () { var els = {}, objs = {}, utils = window.flagship.common.utils, resize = window.flagship.common.resize; currDevice = resize.checkResolution(); var init = function () { els.section = document.querySelector( ".highlights-flexwindow__scroll-video" ); if (!!els.section) { setElements(); objList.setVideo(); objList.setScene(); bindEvents(); } }; var setElements = function () { els.scrollVideoWrap = els.section.querySelector(".js-scroll-video"); els.scrollVideo = els.section.querySelector( ".js-scroll-video .common-video__figure>video" ); els.scrollController = els.section.querySelector( ".js-scroll-video .common-video__control" ); els.scrollControllerBlindText = els.scrollController.querySelector(".blind"); }; var bindEvents = function () { window.addEventListener("scroll", handlerList.scroll); els.scrollController.addEventListener("click", handlerList.videoCta); handlerList.scroll(); resize.add(onResizeHandler); }; var onResizeHandler = function (currRes) { currDevice = currRes; }; var objList = { setVideo: function () { objs.flexwindowBigVideo = ANIUTIL.videoHandler({ playType: "scrollPlay", startPoint: 26, reversePoint: currDevice.indexOf("mobile") > -1 ? 54 : 77, wrap: els.scrollVideoWrap, video: els.scrollVideo, resetCallback: function () { if (els.scrollVideoWrap.classList.contains("is-completed")) { els.scrollVideoWrap.classList.remove("is-completed"); } }, playCallback: function () { els.scrollControllerBlindText.innerText = "pause"; setTagging.pause(); }, pauseCallback: function () { els.scrollControllerBlindText.innerText = "Abspielen"; setTagging.play(); }, endCallback: function () { if (!els.scrollVideoWrap.classList.contains("is-completed")) { els.scrollVideoWrap.classList.add("is-completed"); } }, }); }, setScene: function () { objs.scene = SCROLLER({ trackElement: els.scrollVideo, useFixed: false, resize: utils.detector.isTouchDevice ? false : true, }); }, }; var handlerList = { scroll: function () { objs.scene.trackAnimation(function () { objs.flexwindowBigVideo.scrollActive(this.progress); }); }, videoCta: function () { if (els.scrollVideo.paused) { els.scrollVideo.play(); } else { els.scrollVideo.pause(); } }, }; var setTagging = { play: function () { if (els.scrollController.hasAttribute("data-omni")) { var dataOmni = els.scrollController .getAttribute("data-omni") .toLowerCase(); els.scrollController.setAttribute( "data-omni", dataOmni.replace("pause", "Abspielen") ); } if (els.scrollController.hasAttribute("ga-la")) { var gaLa = els.scrollController .getAttribute("ga-la") .toLowerCase(); els.scrollController.setAttribute( "ga-la", gaLa.replace("pause", "Abspielen") ); } }, pause: function () { if (els.scrollController.hasAttribute("data-omni")) { var dataOmni = els.scrollController .getAttribute("data-omni") .toLowerCase(); els.scrollController.setAttribute( "data-omni", dataOmni.replace("Abspielen", "pause") ); } if (els.scrollController.hasAttribute("ga-la")) { var gaLa = els.scrollController .getAttribute("ga-la") .toLowerCase(); els.scrollController.setAttribute( "ga-la", gaLa.replace("Abspielen", "pause") ); } }, }; return { init: init, }; })(); })(); (function () { window.flagship = window.flagship || {}; window.flagship.highlights = window.flagship.highlights || {}; window.flagship.highlights.flexwindowGesture = (function () { var els = {}, objs = {}, utils = window.flagship.common.utils; var init = function () { els.section = document.querySelector( ".highlights-flexwindow__item--gesture" ); if (!!els.section) { setElements(); objList.setVideo(); objList.setScene(); bindEvents(); } }; var setElements = function () { els.scrollVideoWrap = els.section.querySelector(".js-scroll-video"); els.scrollVideo = els.section.querySelector( ".js-scroll-video .common-video__figure>video" ); els.scrollController = els.section.querySelector( ".js-scroll-video .common-video__control" ); els.scrollControllerBlindText = els.scrollController.querySelector(".blind"); }; var bindEvents = function () { window.addEventListener("scroll", handlerList.scroll); els.scrollController.addEventListener("click", handlerList.videoCta); handlerList.scroll(); }; var objList = { setVideo: function () { objs.flexwindowGestureVideo = ANIUTIL.videoHandler({ playType: "scrollPlay", startPoint: 10, reversePoint: 84, wrap: els.scrollVideoWrap, video: els.scrollVideo, resetCallback: function () { if (els.scrollVideoWrap.classList.contains("is-completed")) { els.scrollVideoWrap.classList.remove("is-completed"); } }, playCallback: function () { els.scrollControllerBlindText.innerText = "pause"; setTagging.pause(); }, pauseCallback: function () { els.scrollControllerBlindText.innerText = "Abspielen"; setTagging.play(); }, endCallback: function () { if (!els.scrollVideoWrap.classList.contains("is-completed")) { els.scrollVideoWrap.classList.add("is-completed"); } }, }); }, setScene: function () { objs.scene = SCROLLER({ trackElement: els.scrollVideo, useFixed: false, resize: utils.detector.isTouchDevice ? false : true, }); }, }; var handlerList = { scroll: function () { objs.scene.trackAnimation(function () { objs.flexwindowGestureVideo.scrollActive(this.progress); }); }, videoCta: function () { if (els.scrollVideo.paused) { els.scrollVideo.play(); } else { els.scrollVideo.pause(); } }, }; var setTagging = { play: function () { if (els.scrollController.hasAttribute("data-omni")) { var dataOmni = els.scrollController .getAttribute("data-omni") .toLowerCase(); els.scrollController.setAttribute( "data-omni", dataOmni.replace("pause", "Abspielen") ); } if (els.scrollController.hasAttribute("ga-la")) { var gaLa = els.scrollController .getAttribute("ga-la") .toLowerCase(); els.scrollController.setAttribute( "ga-la", gaLa.replace("pause", "Abspielen") ); } }, pause: function () { if (els.scrollController.hasAttribute("data-omni")) { var dataOmni = els.scrollController .getAttribute("data-omni") .toLowerCase(); els.scrollController.setAttribute( "data-omni", dataOmni.replace("Abspielen", "pause") ); } if (els.scrollController.hasAttribute("ga-la")) { var gaLa = els.scrollController .getAttribute("ga-la") .toLowerCase(); els.scrollController.setAttribute( "ga-la", gaLa.replace("Abspielen", "pause") ); } }, }; return { init: init, }; })(); })(); (function () { window.flagship = window.flagship || {}; window.flagship.highlights = window.flagship.highlights || {}; window.flagship.highlights.flexwindowMap = (function () { var els = {}, objs = {}, utils = window.flagship.common.utils; var init = function () { els.section = document.querySelector( ".highlights-flexwindow__item--map" ); if (!!els.section) { setElements(); objList.setVideo(); objList.setScene(); bindEvents(); } }; var setElements = function () { els.scrollVideoWrap = els.section.querySelector(".js-scroll-video"); els.scrollVideo = els.section.querySelector( ".js-scroll-video .common-video__figure>video" ); els.scrollController = els.section.querySelector( ".js-scroll-video .common-video__control" ); els.scrollControllerBlindText = els.scrollController.querySelector(".blind"); }; var bindEvents = function () { window.addEventListener("scroll", handlerList.scroll); els.scrollController.addEventListener("click", handlerList.videoCta); handlerList.scroll(); }; var objList = { setVideo: function () { objs.flexwindowMapVideo = ANIUTIL.videoHandler({ playType: "scrollPlay", startPoint: 10, reversePoint: 84, wrap: els.scrollVideoWrap, video: els.scrollVideo, resetCallback: function () { if (els.scrollVideoWrap.classList.contains("is-completed")) { els.scrollVideoWrap.classList.remove("is-completed"); } }, playCallback: function () { els.scrollControllerBlindText.innerText = "pause"; setTagging.pause(); }, pauseCallback: function () { els.scrollControllerBlindText.innerText = "Abspielen"; setTagging.play(); }, endCallback: function () { if (!els.scrollVideoWrap.classList.contains("is-completed")) { els.scrollVideoWrap.classList.add("is-completed"); } }, }); }, setScene: function () { objs.scene = SCROLLER({ trackElement: els.scrollVideo, useFixed: false, resize: utils.detector.isTouchDevice ? false : true, }); }, }; var handlerList = { scroll: function () { objs.scene.trackAnimation(function () { objs.flexwindowMapVideo.scrollActive(this.progress); }); }, videoCta: function () { if (els.scrollVideo.paused) { els.scrollVideo.play(); } else { els.scrollVideo.pause(); } }, }; var setTagging = { play: function () { if (els.scrollController.hasAttribute("data-omni")) { var dataOmni = els.scrollController .getAttribute("data-omni") .toLowerCase(); els.scrollController.setAttribute( "data-omni", dataOmni.replace("pause", "Abspielen") ); } if (els.scrollController.hasAttribute("ga-la")) { var gaLa = els.scrollController .getAttribute("ga-la") .toLowerCase(); els.scrollController.setAttribute( "ga-la", gaLa.replace("pause", "Abspielen") ); } }, pause: function () { if (els.scrollController.hasAttribute("data-omni")) { var dataOmni = els.scrollController .getAttribute("data-omni") .toLowerCase(); els.scrollController.setAttribute( "data-omni", dataOmni.replace("Abspielen", "pause") ); } if (els.scrollController.hasAttribute("ga-la")) { var gaLa = els.scrollController .getAttribute("ga-la") .toLowerCase(); els.scrollController.setAttribute( "ga-la", gaLa.replace("Abspielen", "pause") ); } }, }; return { init: init, }; })(); })(); (function () { window.flagship = window.flagship || {}; window.flagship.highlights = window.flagship.highlights || {}; window.flagship.highlights.viewer = (function () { var els = {}, status = {}, resize = window.flagship.common.resize, utils = window.flagship.common.utils, currDevice = resize.checkResolution(); var init = function () { els.viewerBtns = document.querySelectorAll(".viewer-btn"); if (els.viewerBtns.length > 0) { setElements(); setStatus(); setPopup(); bindEvents(); } }; var setElements = function () { els.wrapEl = document.querySelector("#wrap"); els.contents = document.querySelector("#contents"); // popup els.popup = document.querySelector(".highlights-viewer"); els.popupContents = els.popup.querySelector( ".common-popup__contents" ); els.popupInner = els.popup.querySelector(".common-popup__inner"); els.popupWrap = els.popup.querySelector(".common-popup__wrap"); els.closeCta = els.popup.querySelector(".common-popup__close-cta"); els.viewerWrap = els.popup.querySelector(".highlights-viewer__wrap"); els.viewerContainer = els.popup.querySelector( ".highlights-viewer__container" ); els.viewerIframe = els.popup.querySelector( ".highlights-viewer__container-viewer" ); // popup-scroll els.popupScroll = els.popup.querySelector( ".highlights-viewer__scroll" ); els.popupScrollUpBtn = els.popup.querySelector( ".highlights-viewer__scroll-btn--up" ); els.popupScrollDownBtn = els.popup.querySelector( ".highlights-viewer__scroll-btn--down" ); // infoPopup els.infoBtn = els.popup.querySelector( ".highlights-viewer__title-cta" ); els.infoCloseBtn = els.popup.querySelector( ".highlights-viewer__header-close-cta" ); els.infoDimmed = els.popup.querySelector( ".highlights-viewer__dimmed" ); // timeout els.resizeTimeout = null; els.resizeInnerTimeout = null; // viewer els.viewerOpener = null; els.viewerModel = ""; els.viewerColor = ""; els.customizationList = document.querySelectorAll('.highlights-customization__ui-content'); }; var setStatus = function () { status.viewerBaseUrl = "//www.samsung.com/global/galaxy/3d-360/viewer/?"; status.defaultParams = "&gesture_guide=0"; status.defaultParams += "&bgcolor=transparent"; status.defaultParams += "&skin=colorlayer"; status.defaultParams += "&theme=roundlayer"; status.defaultParams += "&intro=1"; status.defaultParams += "&ruler=1"; status.defaultParams += "&breakpoint_criteria=outer"; status.defaultParams += "&breakpoint_desktop_width=1024"; status.defaultParams += "&intro_pose=2"; status.defaultParams += "&intro_pose_once=1"; status.defaultParams += "&intro_pose_hold=1"; status.moPoseReady = false; status.isExclusive = false; status.isHash = false; }; var bindEvents = function () { window.addEventListener("DOMContentLoaded", onLoadHandler, { once: true, }); window.addEventListener("message", onReceiveV3DMessage, false); //els.popupContents.addEventListener('scroll', onScrollPopupContents); els.viewerIframe.addEventListener( "DOMContentLoaded", viewerEvents.onLoadLayerPopupIframe ); els.popupScroll.addEventListener( "click", layerPopupScrollHandler.onClickLayerScroll ); resize.add(onResizeHandler); }; var onLoadHandler = function () { setViewerWrap.innerWrapHeight(); setViewerWrap.layerScroll(); }; var onResizeHandler = function (currRes) { currDevice = currRes; if (utils.detector.isTouchDevice && !utils.detector.isIosDevice) setViewerWrap.innerWrapHeight(); setViewerWrap.layerScroll(); }; var setViewerWrap = { innerWrapHeight: function () { clearTimeout(els.resizeInnerTimeout); els.resizeInnerTimeout = setTimeout(function () { if (els.popupInner) { els.popupInner.style.height = parseInt(window.innerHeight * 0.9) + "px"; } }, 0); }, layerScroll: function () { clearTimeout(els.resizeTimeout); els.resizeTimeout = setTimeout(function () { layerPopupScrollHandler.setLayerScroll(); }, 300); }, }; var setPopup = function () { for (var i = 0; i < els.viewerBtns.length; i++) { utils.layerPopup({ layerPopup: els.popup, openerEvent: { element: els.viewerBtns[i], }, closeCta: els.closeCta, moveTarget: document.documentElement, contents: els.contents, show: { start: function (target) { els.popup.classList.add("is-init"); viewerEvents.show(target.openerCta); }, end: function () { if (utils.detector.isIosDevice) els.popup.style.display = "block"; els.popup.classList.add("is-open"); if (els.popup.classList.contains("is-info-open")) { setTimeout(function () { els.infoCloseBtn.focus(); }, 500); } }, }, hide: { start: function(target) { if (utils.detector.isIosDevice) target.openerCta.style.display = ''; target.openerCta.focus(); els.popup.classList.remove("is-open"); }, end: function () { setTimeout(function () { els.popup.classList.remove("is-init"); }, 300); viewerEvents.hide(); // customization accessibility set if (!els.customizationList[0].classList.contains('is-active')) { utils.onAccessibility(els.customizationList[0]); } else { utils.onAccessibility(els.customizationList[1]); } } } }); } }; var viewerEvents = { show: function (viewerOpener) { if (viewerOpener.classList.contains("viewer-btn")) { status.isHash = false; els.viewerOpener = viewerOpener; } else { status.isHash = true; if (window.location.hash == "#colors-see-in-360") { els.viewerOpener = els.viewerBtns[0]; } else { els.viewerOpener = els.viewerBtns[1]; } } status.isExclusive = els.viewerOpener.getAttribute("data-hash") == "online-exclusive-color-see-in-360" ? true : false; els.viewerModel = els.viewerOpener.getAttribute("data-model-name"); els.viewerColor = els.viewerOpener.getAttribute("data-model-color"); els.viewerIframe.setAttribute("src", getViewerUrl()); if (currDevice.indexOf("mobile") > -1 || currDevice == "tablet") { viewerEvents.infoPopupShow(); } els.infoBtn.addEventListener("click", function () { viewerEvents.infoPopupShow(); setTimeout(function () { els.infoCloseBtn.focus(); }, 400); }); els.popupWrap.addEventListener( "click", viewerEvents.onclickViewerDimmed ); }, hide: function () { els.viewerModel = ""; els.viewerIframe.setAttribute("src", "about:blank"); if (status.isHash) { setTimeout(function () { els.viewerOpener.focus(); }, 300); } }, infoPopupShow: function () { if (!els.popup.classList.contains("is-info-open")) { els.popup.classList.add("is-info-open"); els.infoCloseBtn.addEventListener( "click", viewerEvents.infoPopupHide ); els.infoDimmed.addEventListener( "click", viewerEvents.infoPopupHide ); setTimeout(function () { els.closeCta.setAttribute("tabindex", -1); els.closeCta.setAttribute("aria-hidden", true); els.infoBtn.setAttribute("tabindex", -1); els.infoBtn.setAttribute("aria-hidden", true); els.viewerContainer.setAttribute("tabindex", -1); els.viewerContainer.setAttribute("aria-hidden", true); }, 100); } }, infoPopupHide: function () { if (els.popup.classList.contains("is-info-open")) { els.popup.classList.remove("is-info-open"); setTimeout(function () { els.infoBtn.focus(); }, 300); setTimeout(function () { els.closeCta.removeAttribute("tabindex"); els.closeCta.removeAttribute("aria-hidden"); els.infoBtn.removeAttribute("tabindex"); els.infoBtn.removeAttribute("aria-hidden"); els.viewerContainer.removeAttribute("tabindex"); els.viewerContainer.removeAttribute("aria-hidden"); }, 100); } }, onclickViewerDimmed: function (e) { if (e.currentTarget == e.target) { if (utils.detector.isIosDevice) els.viewerOpener.style.display = ''; els.popup.classList.remove("is-open"); document.documentElement.classList.remove("is-layer-open"); document.documentElement.style.overflow = ""; utils.visibleScroll(); utils.onAccessibility(els.popup); utils.offAccessibility(document.querySelector("#wrap")); setTimeout(function () { els.viewerOpener.focus(); }, 300); els.viewerModel = ""; els.viewerIframe.setAttribute("src", "about:blank"); setTimeout(function () { els.popup.classList.remove("is-init"); }, 300); // customization accessibility set if (!els.customizationList[0].classList.contains('is-active')) { utils.onAccessibility(els.customizationList[0]); } else { utils.onAccessibility(els.customizationList[1]); } } }, onLoadLayerPopupIframe: function () { if ( document.documentElement.classList.contains("color_yb") || (utils.getCookie("highContrastMode") != null && utils.getCookie("highContrastMode") == 1) ) { els.viewerIframe.contentWindow.postMessage( "V3D.highContrast.on", "*" ); setTimeout(function () { els.viewerIframe.contentWindow.postMessage( "V3D.highContrast.on", "*" ); }, 300); } }, }; var layerPopupScrollHandler = { setLayerScroll: function () { if (!els.popupContents) return; if ( els.popupContents.scrollHeight > els.popupContents.clientHeight ) { utils.offAccessibility(els.popupScroll); els.popupScroll && els.popupScroll.classList.add("is-scroll-btn"); } else { utils.onAccessibility(els.popupScroll); els.popupScroll && els.popupScroll.classList.remove("is-scroll-btn"); } }, onScrollPopupContents: function () { onUpdateLayerScroll(false); }, onClickLayerScroll: function (e) { e && e.preventDefault(); if (e.target.matches(".highlights-viewer__scroll-btn")) { var scrollDown = e.target.classList.contains( "highlights-viewer__scroll-btn--down" ), $popupContents = $(els.popupContents); if (scrollDown) { $popupContents.stop().animate( { scrollTop: $popupContents.scrollTop() + 100, }, { duration: 300, complete: function () { layerPopupScrollHandler.onUpdateLayerScroll(true); }, } ); } else { $popupContents.stop().animate( { scrollTop: $popupContents.scrollTop() - 100, }, { duration: 300, complete: function () { layerPopupScrollHandler.onUpdateLayerScroll(true); }, } ); } } }, onUpdateLayerScroll: function (isClicked) { var offsetTop = els.popupContents.scrollTop, layerBottom = els.popupContents.scrollHeight - els.popupContents.clientHeight; els.popupScrollUpBtn.removeAttribute("tabindex"); els.popupScrollUpBtn.removeAttribute("aria-hidden"); els.popupScrollUpBtn.removeAttribute("disabled"); els.popupScrollDownBtn.removeAttribute("tabindex"); els.popupScrollDownBtn.removeAttribute("aria-hidden"); els.popupScrollDownBtn.removeAttribute("disabled"); if (offsetTop == 0) { isClicked && els.popupScrollDownBtn && els.popupScrollDownBtn.focus(); els.popupScrollUpBtn.setAttribute("tabindex", "-1"); els.popupScrollUpBtn.setAttribute("aria-hidden", "true"); els.popupScrollUpBtn.setAttribute("disabled", "disabled"); } else if (offsetTop >= layerBottom - 1) { isClicked && els.popupScrollUpBtn && els.popupScrollUpBtn.focus(); els.popupScrollDownBtn.setAttribute("tabindex", "-1"); els.popupScrollDownBtn.setAttribute("aria-hidden", "true"); els.popupScrollDownBtn.setAttribute("disabled", "disabled"); } }, }; var onReceiveV3DMessage = function (e) { if (e.data == "V3D.state.popOpen") { if (currDevice.indexOf("mobile") > -1 || currDevice == "tablet") { if (els.closeCta) { if (!els.popupWrap.classList.contains("is-popup-opened")) els.popupWrap.classList.add("is-popup-opened"); els.closeCta.setAttribute("tabindex", "-1"); els.closeCta.setAttribute("aria-hidden", "true"); els.closeCta.setAttribute("disabled", "disabled"); } if (els.infoBtn) { els.infoBtn.setAttribute("tabindex", "-1"); els.infoBtn.setAttribute("aria-hidden", "true"); } } } else if (e.data == "V3D.state.popClose") { if (currDevice.indexOf("mobile") > -1 || currDevice == "tablet") { if (els.closeCta) { if (els.popupWrap.classList.contains("is-popup-opened")) els.popupWrap.classList.remove("is-popup-opened"); els.closeCta.removeAttribute("tabindex"); els.closeCta.removeAttribute("aria-hidden"); els.closeCta.removeAttribute("disabled"); } if (els.infoBtn) { els.infoBtn.removeAttribute("tabindex"); els.infoBtn.removeAttribute("aria-hidden"); } } } else if (e.data == "V3D.state.introPose.ready") { if (currDevice.indexOf("desktop") > -1) { els.viewerIframe && els.viewerIframe.contentWindow.postMessage( "V3D.introPose.run", "*" ); } status.moPoseReady = true; setTimeout(function () { status.moPoseReady = false; }, 2000); } else if (e.data == "V3D.state.localData.ready") { els.viewerIframe && els.viewerIframe.contentWindow.postMessage( JSON.stringify(V3DLOCALDATA), "*" ); } }; var getViewerUrl = function () { var viewerUrl = status.viewerBaseUrl; // model_name viewerUrl += "model_name=" + els.viewerModel; // only exclusive color status.isExclusive && (viewerUrl += "&exclusive_mode=1"); if ( document.documentElement.classList.contains("color_yb") || (utils.getCookie("highContrastMode") != null && utils.getCookie("highContrastMode") == 1) ) { viewerUrl += "&highcontrast=1"; } else { viewerUrl += "&highcontrast=0"; } // RTL utils.isRTL() && (viewerUrl += "&rtl=1"); viewerUrl += status.defaultParams; viewerUrl += "#color=" + (els.viewerColor ? els.viewerColor : "null"); return viewerUrl; }; return { init: init, }; })(); })(); (function () { window.flagship = window.flagship || {}; window.flagship.highlights = window.flagship.highlights || {}; window.flagship.highlights.ytPopup = (function () { var els = {}, utils = window.flagship.common.utils; var init = function () { els.layerPopup = document.querySelector(".youtube-layer-popup"); if (!!els.layerPopup) { setElements(); setPopup(); els.layerPopup.addEventListener("click", eventList.clickDimmed); } }; var setElements = function () { els.contents = document.querySelector("#contents"); els.openCtas = document.querySelectorAll(".js-youtube-popup"); els.closeCta = document.querySelector( ".youtube-layer-popup__close-cta" ); els.ytIframe = els.layerPopup.querySelector( ".youtube-layer-popup__iframe > iframe" ); els.ytDesc = els.layerPopup.querySelector(".youtube-player__desc"); }; var setPopup = function () { for (var i = 0; i < els.openCtas.length; i++) { utils.layerPopup({ layerPopup: els.layerPopup, openerEvent: { element: els.openCtas[i], }, closeCta: els.closeCta, moveTarget: document.documentElement, contents: els.contents, show: { start: function () { els.layerPopup.removeAttribute("tabindex"); els.layerPopup.removeAttribute("aria-hidden"); els.layerPopup.classList.add("is-yt-open"); }, end: function (target) { eventList.setYoutube(target); target.openerCta.blur(); }, }, hide: { start: function(target) { if (utils.detector.isIosDevice) target.openerCta.style.display = ''; els.layerPopup.setAttribute('tabindex', -1); els.layerPopup.setAttribute('aria-hidden', true); els.layerPopup.classList.remove('is-yt-open'); }, end: function(target) { eventList.clearYoutube(); target.openerCta.focus(); // customization accessibility set var uiList = document.querySelectorAll('.highlights-customization__ui-content'); if (!uiList[0].classList.contains('is-active')) { utils.onAccessibility(uiList[0]); } else { utils.onAccessibility(uiList[1]); } }, }, }); } }; var eventList = { setYoutube: function (target) { var 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; els.OpenerTarget = opener; }, clearYoutube: function () { els.ytIframe.removeAttribute("src"); els.ytDesc.innerHTML = ""; }, clickDimmed: function (e) { if ( e.target.classList.contains("youtube-layer-popup__inner") || e.target.classList.contains("youtube-layer-popup__close-area") ) { if (utils.detector.isIosDevice) els.OpenerTarget.style.display = ""; els.layerPopup.classList.remove("is-yt-open"); document.documentElement.classList.remove("is-layer-open"); document.documentElement.style.overflow = ""; utils.visibleScroll(); utils.onAccessibility(els.layerPopup); utils.offAccessibility(document.querySelector("#wrap")); setTimeout(function () { els.OpenerTarget.focus(); }, 300); eventList.clearYoutube(); } }, }; return { init: init, }; })(); })(); (function () { window.flagship = window.flagship || {}; window.flagship.highlights = window.flagship.highlights || {}; window.flagship.highlights.sidebar = (function () { var els = {}, objs = {}, utils = window.flagship.common.utils; var init = function () { els.contents = document.querySelector("#contents"); if (!!els.contents) { setElements(); setScene(); bindEvents(); } }; var setElements = function () { els.kv = els.contents.querySelector(".highlights-kv"); els.sidebar = els.contents.querySelector(".highlights-sidebar"); els.sidebarBtn = els.sidebar.querySelector( ".highlights-sidebar__cta" ); els.sidebarBtnBlindText = els.sidebar.querySelector( ".highlights-sidebar__cta .blind" ); els.sidebarList = els.sidebar.querySelector( ".highlights-sidebar__list" ); els.sidebarListItem = els.sidebarList.querySelectorAll( ".highlights-sidebar__item" ); els.durability = els.contents.querySelector(".highlights-durability"); els.footer = document.querySelector(".common-bottom-disclaimer"); // settimeout els.scrollTimeout = null; }; var bindEvents = function () { window.addEventListener("scroll", scrollHandler); els.sidebarBtn.addEventListener( "click", sidebarEvents.sidebarOnClick ); for (var i = 0; i < els.sidebarListItem.length; i++) { els.sidebarListItem[i].addEventListener( "click", sidebarEvents.itemOnClick ); } }; var setScene = function () { objs.scene = SCROLLER({ trackElement: els.contents, useFixed: false, useStrictMode: false, }); }; var scrollHandler = function () { objs.scene.trackAnimation(function () { var kvBottom = this.winScrollTop + els.kv.getBoundingClientRect().bottom - utils.getNavHeight(), footerTop = this.winScrollTop + els.footer.getBoundingClientRect().top + window.innerHeight / 2, self = this; var _highlighting = function () { for (var i = 0; i < els.sidebarListItem.length; i++) { var targetId = els.sidebarListItem[i] .querySelector("a") .getAttribute("href") .split("#")[1], target = els.contents.querySelector("#" + targetId), targetOffetTop = self.winScrollTop + target.getBoundingClientRect().top, targetOffetBottom = self.winScrollTop + target.getBoundingClientRect().bottom - window.innerHeight / 2, durabilityTop = self.winScrollTop + els.durability.getBoundingClientRect().top + window.innerHeight / 2, oldActiveItem = els.sidebarList.querySelector(".is-active"); if ( self.winScrollBottom >= targetOffetTop && self.winScrollTop <= targetOffetBottom ) { if (!els.sidebarListItem[i].classList.contains("is-active")) { if (oldActiveItem) oldActiveItem.classList.remove("is-active"); els.sidebarListItem[i].classList.add("is-active"); } } if (self.winScrollBottom >= durabilityTop) { if (els.sidebarListItem[i].classList.contains("is-active")) { els.sidebarListItem[i].classList.remove("is-active"); } } } }; if (self.wheelDirection == "up") { if (self.winScrollTop >= kvBottom) { els.sidebar.classList.add("is-active"); els.sidebarBtn.removeAttribute("tabindex"); els.sidebarBtn.removeAttribute("aria-hidden"); } else { hideSidebar(); } } else { hideSidebar(); } _highlighting(); }); }; var hideSidebar = function () { if (els.sidebar.classList.contains("is-active")) { els.sidebar.classList.remove("is-active"); els.sidebarBtn.setAttribute("tabindex", -1); els.sidebarBtn.setAttribute("aria-hidden", true); sidebarEvents.sidebarClose(); } }; var sidebarEvents = { sidebarOnClick: function () { if (!els.sidebar.classList.contains("is-open")) { sidebarEvents.sidebarOpen(); } else { sidebarEvents.sidebarClose(); } }, sidebarOpen: function () { els.sidebar.classList.add("is-open"); accessibility.off(); setTimeout(function () { window.addEventListener("click", sidebarEvents.outsideOnClick); }, 50); }, sidebarClose: function () { els.sidebar.classList.remove("is-open"); accessibility.on(); window.removeEventListener("click", sidebarEvents.outsideOnClick); }, outsideOnClick: function (e) { var sidebar = e.target.matches( ".highlights-sidebar__button>button" ); if (!sidebar) { sidebarEvents.sidebarClose(); } }, itemOnClick: function (e) { e.preventDefault(); var oldItem = els.sidebarList.querySelector(".is-active"), self = this; var _moveSection = function () { var navHeight = utils.getNavHeight(), sectionId = self .querySelector("a") .getAttribute("href") .split("#")[1], section = document.querySelector("#" + sectionId), sectionTop = section.getBoundingClientRect().top, sectionScroll = window.pageYOffset + sectionTop - navHeight, sectionTimeout = null; clearTimeout(sectionTimeout); sectionTimeout = setTimeout(function () { var eyeBrow = section.querySelector(".common-text"); clickAble = section.querySelectorAll("a, button")[0]; if (!!eyeBrow) { var focusOutEvent = function () { eyeBrow.removeAttribute("tabindex"); eyeBrow.removeEventListener("focusout", focusOutEvent); }; eyeBrow.addEventListener("focusout", focusOutEvent); eyeBrow.setAttribute("tabindex", 0); eyeBrow.focus(); } else { clickAble.focus(); } window.scrollTo(0, sectionScroll); }, 30); setTimeout(function () { hideSidebar(); }, 60); }; if (!this.classList.contains("is-active")) { if (oldItem && oldItem.classList.contains("is-active")) { oldItem.classList.remove("is-active"); } this.classList.add("is-active"); } _moveSection(); }, }; var accessibility = { on: function () { els.sidebarList.setAttribute("aria-hidden", true); els.sidebarList.setAttribute("tabindex", -1); var openText = els.sidebarBtn.getAttribute("data-open-text"); els.sidebarBtnBlindText.innerText = openText; setTagging.close(); for (var i = 0; i < els.sidebarListItem.length; i++) { els.sidebarListItem[i] .querySelector("a") .setAttribute("tabindex", "-1"); } }, off: function () { els.sidebarList.setAttribute("aria-hidden", false); els.sidebarList.removeAttribute("tabindex"); var closeText = els.sidebarBtn.getAttribute("data-close-text"); els.sidebarBtnBlindText.innerText = closeText; setTagging.open(); for (var i = 0; i < els.sidebarListItem.length; i++) { els.sidebarListItem[i] .querySelector("a") .removeAttribute("tabindex"); } }, }; var setTagging = { open: function () { var dataOmni = els.sidebarBtn.getAttribute("data-omni"), gaLa = els.sidebarBtn.getAttribute("ga-la"); setTimeout(function () { els.sidebarBtn.setAttribute( "data-omni", dataOmni.replace("open", "close") ); els.sidebarBtn.setAttribute( "ga-la", gaLa.replace("open", "close") ); }, 50); }, close: function () { var dataOmni = els.sidebarBtn.getAttribute("data-omni"), gaLa = els.sidebarBtn.getAttribute("ga-la"); setTimeout(function () { els.sidebarBtn.setAttribute( "data-omni", dataOmni.replace("close", "open") ); els.sidebarBtn.setAttribute( "ga-la", gaLa.replace("close", "open") ); }, 50); }, }; return { init: init, }; })(); })(); (function () { window.flagship.common.resize.bindEvent(); var initComponents = function() { flagship.highlights.ai.init(); flagship.highlights.colors.init(); flagship.highlights.customization.init(); flagship.highlights.cameraVideo.init(); flagship.highlights.design.init(); flagship.highlights.durability.init(); flagship.highlights.excellence.init(); flagship.highlights.exclusive.init(); flagship.highlights.faq.init(); flagship.highlights.flexpanel.init(); flagship.highlights.flexwindowBig.init(); flagship.highlights.flexwindowGesture.init(); flagship.highlights.flexwindowMap.init(); flagship.highlights.viewer.init(); flagship.highlights.ytPopup.init(); flagship.highlights.sidebar.init();}; initComponents(); })(); });