`; newCameraImagesWrap.classList.add('rawcode-compare-specs__item-wrap'); newCameraImagesWrap.innerHTML = cameraImageListHTML; cameraItemWraps[0].remove(true); cameraWrap.prepend(newCameraImagesWrap); }; const setDefaultProduct = function () { let activeCount = 0; let isURL = window.location.search; let URLParms = new URLSearchParams(isURL); let parmModelList = [URLParms.get('fg07column1'), URLParms.get('fg07column2')] let defaultModelCode = utils.getModelCodeList(compareRawcode.els.selectBoxCta, parmModelList); let aiSection = compareRawcode.els.sectionList.ai251h; let aiValueList = aiSection.querySelectorAll('.rawcode-compare-specs__value'); aiValueList.forEach(valueList => { valueList.setAttribute('role', 'list'); }); interface.setProjectVariData() .then(() => { let isDevice = utils.getDevice(); let productLength = 2; let drawUi = new compareRawcode.drawHandler.drawUi; let successModelList = []; compareRawcode.isDevice = isDevice; for (let requestIndex = 0; requestIndex < defaultModelCode.length; requestIndex++) { interface.getProductData({ specCode: defaultModelCode[requestIndex].spec, searchCode: defaultModelCode[requestIndex].search, productLength: productLength }) .then((data) => { compareRawcode.productData[data.modelCode] = data.productData; successModelList.push(data.modelCode); let isProductData = compareRawcode.productData[defaultModelCode[requestIndex].spec]; drawUi.subHeadline(isProductData); drawUi.tooltip(isProductData, requestIndex); drawUi.setItemText(isProductData, requestIndex, this); drawUi.icon(isProductData, requestIndex, data.modelCode); drawUi.headline(compareRawcode.productData[successModelList[0]], requestIndex); if (activeCount == defaultModelCode.length - 1) { setTimeout(() => { // drawUi.videoIcon(); bottomDisclaimer.setDisclaimerData(); drawUi.bottomDisclaimer(); drawUi.sup(); drawUi.checkNullValueColumnItems(); setLayout(); setTimeout(() => { drawUi.addItemBlindText(); setKeySpecs(); }, 300); compareRawcode.setDefaultProduct = true; }, 300); } activeCount++; }) .catch(() => { activeCount++; }); } }) }; const video = { setScene: function (target) { let videoEls = compareRawcode.els.ai251h.items[0][0]; for (let i = 0; i < videoEls.length; i++) { let isVideoEl = videoEls[i].itemIcon; isVideoEl.scene = new utils.SCROLLER({ trackElement: isVideoEl, useFixed: false }); } }, play: function () { let videoEls = compareRawcode.els.ai251h.items[0][0]; for (let i = 0; i < videoEls.length; i++) { let isVideoEl = videoEls[i].itemIcon; isVideoEl.scene.trackAnimation(function () { if (this.progress > 10 && this.progress < 50) { if (isVideoEl.readyState > 3 && isVideoEl.paused) { if (isVideoEl.paused) isVideoEl.play(); window.removeEventListener('scroll', video.play); } else { isVideoEl.addEventListener('canplay', function () { if (isVideoEl.paused) isVideoEl.play(); window.removeEventListener('scroll', video.play); }); } } }); } } } const uiEvent = { setSelectBox: function () { let selectBox = compareRawcode.els.selectBox; for (let i = 0; i < selectBox.length; i++) { selectBox[i].columnIndex = i; } }, selectBox: function (e) { let selectOptins = e.target.options[e.target.selectedIndex]; let searchCode = selectOptins.value; let modelCode = searchCode.slice(0, 7); let targetModelCode = modelCode == 'SM-F900' ? 'SM-F907' : modelCode; let drawUi = new compareRawcode.drawHandler.drawUi; let productData = compareRawcode.productData[targetModelCode]; let columnIndex = e.target.columnIndex; switch (productData) { case undefined: interface.getProductData({ specCode: targetModelCode, searchCode: searchCode }) .then((data) => { compareRawcode.productData[data.modelCode] = data.productData; drawUi.allItemHide(columnIndex); setTimeout(() => { drawUi.headline(data.productData, columnIndex); bottomDisclaimer.setDisclaimerData(); drawUi.bottomDisclaimer(); drawUi.removeItemBlindText(); drawUi.sup(); drawUi.setItemText(data.productData, columnIndex, this); drawUi.checkNullValueColumnItems(); drawUi.tooltip(data.productData, columnIndex); drawUi.icon(data.productData, columnIndex, data.modelCode); drawUi.allItemShow(columnIndex); setTimeout(() => { drawUi.addItemBlindText(); setKeySpecs(); }, 300); }, 300); }); break; default: drawUi.allItemHide(columnIndex); setTimeout(() => { drawUi.headline(productData, columnIndex); bottomDisclaimer.setDisclaimerData(); drawUi.bottomDisclaimer(); drawUi.removeItemBlindText(); drawUi.sup(); drawUi.setItemText(productData, columnIndex, this); drawUi.checkNullValueColumnItems(); drawUi.tooltip(productData, columnIndex, targetModelCode); drawUi.icon(productData, columnIndex, targetModelCode); drawUi.allItemShow(columnIndex); setTimeout(() => { drawUi.addItemBlindText(); setKeySpecs(); }, 300); }, 300); break; } }, tooltip: function (e) { let contentWrap = compareRawcode.els.rawcodeCompareWrap; let targetEl = e.target; let findTooltip = targetEl.tooltip; const eventHandler = { add: function (targetEl) { targetEl.addEventListener('keydown', eventList.hide); targetEl.addEventListener('focusout', eventList.hide); targetEl.textWrap.addEventListener('mouseleave', eventList.hide); }, remove: function (isTarget) { isTarget.setAttribute('disabled', ''); isTarget.removeEventListener('keydown', eventList.hide); isTarget.removeEventListener('focusout', eventList.hide); isTarget.textWrap.removeEventListener('mouseleave', eventList.hide); setTimeout(() => { isTarget.removeAttribute('disabled'); }, 100); } } const eventList = { setEventTarget: function (event) { if (!!event) { let keydown = event.type == 'keydown'; let click = event.type == 'click'; let isTooltipArea = targetEl.classList.contains(compareRawcode.commonData.selectorList.items.itemTooltipText); if (isTooltipArea) return; if (keydown && event.keyCode != 27) return; return isTarget = click ? contentWrap.isVisibleTooltip : targetEl; } else { return isTarget = document.querySelector(`.${tooltipOpenClass}`); } }, setTagging: function (targetEl, string, replaceString) { let isAriaLabel = targetEl.getAttribute('aria-label'); if (!!!window.compareText) return; if (!!!window.compareText[string]) return; if (!!!window.compareText[replaceString]) return; targetEl.setAttribute('aria-label', isAriaLabel.replace(window.compareText[string], window.compareText[replaceString])); }, show: function () { let ctaDisabled = targetEl.disabled; let isOpenTooltip = document.querySelector(`.${tooltipOpenClass}`); if (targetEl.classList.contains(tooltipOpenClass)) return; if (ctaDisabled) return; if (!!isOpenTooltip) eventList.hide(); eventList.setTagging(targetEl, 'open', 'opened'); targetEl.classList.add(tooltipOpenClass); if (compareRawcode.isDevice == 'pc') { eventHandler.add(targetEl); } else if (compareRawcode.osInfo.aos) { targetEl.focus(); contentWrap.isFocusEl = targetEl; } contentWrap.isVisibleTooltipWrap = targetEl.wrap; contentWrap.isVisibleTooltip = targetEl; }, hide: function (e) { let isTarget = eventList.setEventTarget(e); if (!!!isTarget) return; eventList.setTagging(isTarget, 'opened', 'open'); isTarget.classList.remove(tooltipOpenClass); if (compareRawcode.isDevice == 'pc') { eventHandler.remove(isTarget); } else if (compareRawcode.osInfo.aos) { contentWrap.isFocusEl.focus(); contentWrap.isFocusEl = contentWrap.isVisibleTooltip; } contentWrap.isVisibleTooltipWrap = undefined; contentWrap.isVisibleTooltip = undefined; } } switch (e.type) { case 'click': if (contentWrap.isVisibleTooltip == targetEl) return; if (findTooltip) { eventList.hide(e); eventList.show(); } else { if (!!contentWrap.isFocusEl && compareRawcode.isDevice != 'pc' && compareRawcode.osInfo.aos) { contentWrap.isFocusEl.focus(); } if (!!!contentWrap.isVisibleTooltip) return; eventList.hide(e); } break; case 'focusin': case 'mouseover': if (findTooltip) { eventList.show(); targetEl.focus(); } break; } return eventList; }, resetTooltip: function () { let isOpenTooltip = document.querySelector(`.${tooltipOpenClass}`); let contentWrap = compareRawcode.els.rawcodeCompareWrap; if (!!!isOpenTooltip) return; isOpenTooltip.classList.remove(tooltipOpenClass); isOpenTooltip.blur(); contentWrap.isFocusEl = undefined; contentWrap.isVisibleTooltipWrap = undefined; contentWrap.isVisibleTooltip = undefined; }, getNavHeight: function () { let navHeight = 0; let navigation = document.querySelector('.pd-g-header-navigation') || document.querySelector('#subnav') || document.querySelector('.sticky-menu') || document.querySelector('.pd-g-floating-nav'); if (!!navigation) { if (navigation.classList.contains('pd-g-header-navigation')) { const headerNav = navigation.querySelector('.pd-header-navigation'); const menuWrap = headerNav.querySelector('.pd-header-navigation__menu-wrap'); navHeight = headerNav.clientHeight + menuWrap.clientHeight; } else { navHeight = navigation.clientHeight; } } return navHeight; }, clickReturnCta: function () { let target = this; if (target.disclaimer.classList.contains('is-active')) { target.disclaimer.classList.remove('is-active'); } window.scrollTo(0, 0); setTimeout(() => { window.scrollTo(0, target.supTop); target.sup.focus(); }, 10); }, clickSup: function (e) { e.preventDefault(); e.stopPropagation(); if (!e.target.matches('.click_sup')) return; let destIndex = parseFloat(e.target.innerText); let disclaimerWrap = document.querySelector('#desc-section .rawcode-compare-specs__bottom-disclaimer'); let disclaimer = disclaimerWrap.querySelector(`[data-sup=sup-${destIndex}]`); let disclaimerReturnCta = disclaimer.querySelector('button'); disclaimerReturnCta.addEventListener('click', uiEvent.clickReturnCta); disclaimerReturnCta.disclaimer = disclaimer; disclaimerReturnCta.sup = e.target; disclaimerReturnCta.supTop = window.pageYOffset; // remove active disclaimerReturnCta.addEventListener('focusout', function () { setTimeout(function () { if (disclaimerReturnCta.disclaimer.classList.contains('is-active')) { disclaimerReturnCta.disclaimer.classList.remove('is-active'); } }, 200); }); // active + focus if (!disclaimer.classList.contains('is-active')) { disclaimer.classList.add('is-active'); } utils.centeredFocus.call(disclaimerReturnCta); disclaimerReturnCta.focus(); }, }; const fillText = { setScene: function (target) { target.scene = new utils.SCROLLER({ trackElement: target, useFixed: false }); }, setScrollEvent: function (target, sectionName, columnIndex) { let isWeight = utils.setKey(sectionName) == 'weightsize'; let parent = isWeight ? target.parentElement.parentElement : target.parentElement; let iconElList = parent.querySelectorAll('.rawcode-compare-specs__icon'); let iconEl = iconElList.length > 1 ? iconElList[columnIndex] : iconElList[0]; let isTitle = target.classList.contains('rawcode-compare-specs__title'); if (isWeight && !!isTitle) target.classList.remove('is-fill-text'); target.scrollEvent = function () { target.scene.trackAnimation(function () { if (this.progress > 20 && this.progress < 70) { for (let i = 0; i < 3; i++) { let isNotActive = !target.classList.contains('is-fill-text-active'); if (isNotActive) { if (!!isNotActive && !isTitle) target.classList.add('is-fill-text-active'); if (!!iconEl) { iconEl.classList.add('is-fill-icon'); iconEl.style.transition = '.3s filter .6s'; iconEl.style.filter = 'invert(40%) sepia(74%) saturate(1836%) hue-rotate(195deg)'; } } } } }) }; }, reset: function (target, sectionName, columnIndex) { let isWeight = utils.setKey(sectionName) == 'weightsize'; let parent = isWeight ? target.parentElement.parentElement : target.parentElement; let iconElList = parent.querySelectorAll('.rawcode-compare-specs__icon'); let iconEl = iconElList.length > 1 ? iconElList[columnIndex] : iconElList[0]; if (!!target) { target.scene = null; target.classList.remove('is-fill-text-active'); flagship.compareRawcode.eventHandler.fillText.deActive(target); } if (!!iconEl) { iconEl.style.transition = ''; iconEl.style.filter = ''; iconEl.classList.remove('is-fill-icon'); } } }; const drawDisclaimer = function () { let drawUi = new compareRawcode.drawHandler.drawUi; bottomDisclaimer.setDisclaimerData(); drawUi.bottomDisclaimer(); drawUi.sup(); }; const contrast = (function () { let els = {}; const utils = { setCookie: function (name, value, day) { let date = new Date(); date.setTime(date.getTime() + day * 60 * 60 * 24 * 1000); document.cookie = name + '=' + value + '; exprires=' + date.toUTCString() + '; path=/'; }, getCookie: function (name) { let value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)'); return value ? value[2] : null; } } const init = function () { els.section = document.querySelector('.dotcom-footer-module__area .high-contrast') || document.querySelector('.high-contrast'); if (!!els.section) { setElements(); bindEvents(); } }; const setElements = function () { els.defaultBtn = els.section.querySelector('.high-contrast__btn--default'); els.defaultBtnTitle = els.defaultBtn.getAttribute('title').trim(); els.contrastBtn = els.section.querySelector('.high-contrast__btn--contrast'); els.contrastBtnTitle = els.contrastBtn.getAttribute('title').trim(); els.cookieName = 'highContrastMode'; }; const bindEvents = function () { window.addEventListener('load', onLoadHandler); if (!!els.defaultBtn) els.defaultBtn.addEventListener('click', onClickDefaultBtn); if (!!els.contrastBtn) els.contrastBtn.addEventListener('click', onClickContrastBtn); }; const onLoadHandler = function () { activeContrast(); }; const onClickDefaultBtn = function (e) { e.preventDefault(); utils.setCookie(els.cookieName, '0', 1); activeContrast(); }; const onClickContrastBtn = function (e) { e.preventDefault(); utils.setCookie(els.cookieName, '1', 1); activeContrast(); }; const activeContrast = function () { let cookieValue = utils.getCookie(els.cookieName); let blindText = document.createElement('span'); blindText.classList.add('blind'); if (cookieValue && cookieValue.length && cookieValue == '1') { document.documentElement.classList.add('color_yb'); if (!!!els.contrastBtn.querySelector('span')) { els.contrastBtn.appendChild(blindText); if (!!els.defaultBtn.querySelector('span')) els.defaultBtn.querySelector('span').remove(); } } else { document.documentElement.classList.remove('color_yb'); if (!!!els.defaultBtn.querySelector('span')) { els.defaultBtn.appendChild(blindText); if (!!els.contrastBtn.querySelector('span')) els.contrastBtn.querySelector('span').remove(); } } }; return { init: init } })(); return { bottomDisclaimer: bottomDisclaimer, setBottomCommonDisclaimer: setBottomCommonDisclaimer, setDefaultProduct: setDefaultProduct, video: video, setSelectBox: uiEvent.setSelectBox, selectBox: uiEvent.selectBox, tooltip: uiEvent.tooltip, resetTooltip: uiEvent.resetTooltip, clickSup: uiEvent.clickSup, fillText: fillText, drawDisclaimer: drawDisclaimer, contrast: contrast, setCameraLayout: setCameraLayout } })(); })(); (function () { window.flagship = window.flagship || {}; window.flagship.compareRawcode = window.flagship.compareRawcode || {}; window.flagship.compareRawcode.els = window.flagship.compareRawcode.els || {}; window.flagship.compareRawcode.eventHandler = (function () { let compareRawcode = window.flagship.compareRawcode; let utils = compareRawcode.utils; let eventList = compareRawcode.eventList; const selectBox = function () { eventList.setSelectBox(); for (let i = 0; i < 2; i++) { compareRawcode.els.selectBox[i].addEventListener('change', (e) => { eventList.selectBox(e); }) }; }; const openAllTechSpecs = function () { const allSpecsCta = document.querySelector('.rawcode-compare-specs__cta'); const allSpecsWrap = document.querySelector('.rawcode-compare-specs__all-specs'); allSpecsCta.addEventListener('click', function () { if (allSpecsWrap.style.display == 'block') { allSpecsWrap.style.display = 'none'; allSpecsCta.classList.remove('is-active'); allSpecsCta.setAttribute('aria-expanded', 'false'); } else { allSpecsWrap.style.display = 'block'; allSpecsCta.classList.add('is-active'); allSpecsCta.setAttribute('aria-expanded', 'true'); } }); } const videoIcon = function () { eventList.video.setScene(); setTimeout(() => { eventList.video.play(); }, 300); window.addEventListener('scroll', eventList.video.play); }; const sup = function () { compareRawcode.els.contentsArea.addEventListener('click', eventList.clickSup); }; const tooltip = { click: function () { let allTooltipIcon = compareRawcode.els.allTooltipIcon; for (let i = 0; i < allTooltipIcon.length; i++) { allTooltipIcon[i].removeEventListener('focusin', eventList.tooltip); } compareRawcode.els.contentWrap.removeEventListener('mouseover', eventList.tooltip); compareRawcode.els.contentWrap.addEventListener('click', eventList.tooltip); }, mouse: function () { compareRawcode.els.contentWrap.removeEventListener('click', eventList.tooltip); compareRawcode.els.contentWrap.addEventListener('mouseover', eventList.tooltip); }, focus: function () { let allTooltipIcon = compareRawcode.els.allTooltipIcon; compareRawcode.els.contentWrap.removeEventListener('click', eventList.tooltip); for (let i = 0; i < allTooltipIcon.length; i++) { allTooltipIcon[i].addEventListener('focusin', eventList.tooltip); } }, init: function () { if (utils.getDevice() == 'pc') { tooltip.focus(); tooltip.mouse(); } else { tooltip.click(); } } } const fillText = { active: function (target) { window.addEventListener('scroll', target.scrollEvent); }, deActive: function (target) { window.removeEventListener('scroll', target.scrollEvent); target.scrollEvent = null; } } const focusIn = function () { compareRawcode.els.rawcodeWrap.addEventListener('focusin', e => { if (e.target.tagName === 'BUTTON' || 'A') utils.centeredFocus.call(e.target); }); } const resize = function () { window.addEventListener('resize', function () { if (!!!compareRawcode.setDefaultProduct) return; let isDevice = utils.getDevice(); if (!!compareRawcode.isDevice && compareRawcode.isDevice != isDevice) { eventList.drawDisclaimer(); if (utils.getDevice() == 'pc') { tooltip.focus(); tooltip.mouse(); } else { tooltip.click(); eventList.selectBox({ target: compareRawcode.els.selectBox[0] }); eventList.selectBox({ target: compareRawcode.els.selectBox[1] }); } } compareRawcode.isDevice = isDevice; }) } return { selectBox: selectBox, openAllTechSpecs: openAllTechSpecs, videoIcon: videoIcon, sup: sup, tooltip: tooltip, fillText: fillText, focusIn: focusIn, resize: resize, } })(); })(); (function () { window.flagship.upgrade = window.flagship.upgrade || {}; window.flagship.upgrade.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 () { let compareRawcode = window.flagship.compareRawcode; let utils = compareRawcode.utils; let eventList = compareRawcode.eventList; let eventHandler = compareRawcode.eventHandler; eventList.setCameraLayout(); compareRawcode.els = utils.setElements.init(); eventList.setBottomCommonDisclaimer(); eventList.setDefaultProduct(); eventHandler.openAllTechSpecs(); eventHandler.selectBox(); // eventHandler.videoIcon(); // eventHandler.tooltip.init(); eventHandler.resize(); eventHandler.focusIn(); eventList.contrast.init(); })(); ; (function () { window.flagship = window.flagship || {}; window.flagship.upgrade = window.flagship.upgrade || {}; window.flagship.upgrade.settings = (function () { const utils = window.flagship.common.utils, resize = window.flagship.common.resize; let els = {}; const init = function () { els.upgrade = document.querySelector('#upgrade'); els.videoWrap = document.querySelectorAll('.js-video-wrap'); if (!!els.upgrade) { bindEvents(); } }; const bindEvents = function () { eventList.setResize(); eventList.addLoadStatusClass(); eventList.setImageLoader(); eventList.setVideoLoader(); eventList.setVideoTheme(); eventList.isZoom(); eventHandler.load(); eventHandler.hashchange(); eventHandler.resize(); }; const eventHandler = { load: function () { window.addEventListener('DOMContentLoaded', eventList.anchorPosition) }, hashchange: function () { window.addEventListener('hashchange', eventList.anchorPosition) }, resize: function () { window.addEventListener('resize', eventList.isZoom); }, }; const eventList = { setResize: function () { resize.init([{ resolution: 1920, resolutionName: 'desktop', eventFunction: '' }, { resolution: 1023, resolutionName: 'tablet', eventFunction: '' }, { resolution: 767, resolutionName: 'mobile', eventFunction: '' }, { resolution: 320, resolutionName: 'mobileS', eventFunction: '' }], 200); }, addLoadStatusClass: function () { if (utils.isLowNetwork()) document.documentElement.classList.add('low_network'); document.documentElement.classList.add('load'); }, setImageLoader: function () { window.imageLoader = utils.mediaLoader({ lazyClass: '.js-img-src', responsiveClass: '.js-res-img', preset: '?imbypass=true', loadOption: [{ resolution: 1920, attribute: 'data-src-pc' }, { resolution: 1023, attribute: 'data-src-tb' }, { resolution: 767, attribute: 'data-src-mo' }, { resolution: 360, attribute: 'data-src-mo-s' }], visiblePoint: 2 }); window.bgLoader = utils.mediaLoader({ type: 'bgImage', lazyClass: '.js-bg-img', loadOption: [{ resolution: 1920, attribute: '', bgOpts: '' }], visiblePoint: 2 }); }, setVideoLoader: function () { window.videoLoader = utils.mediaLoader({ type: 'video', lazyClass: '.js-video-src', responsiveClass: '.js-res-video', preset: '?imbypass=true', loadOption: [{ resolution: 1920, attribute: 'data-video-src-pc' }, { resolution: 1023, attribute: 'data-video-src-tb' }, { resolution: 767, attribute: 'data-video-src-mo' }, { resolution: 360, attribute: 'data-video-src-mo-s' }], visiblePoint: 1, endCallback: function (video) { if (!!video.videoHandler && !video.videoHandler.wrap.classList.contains('is-loaded')) { video.videoHandler.wrap.classList.add('is-loaded'); } } }); window.mp4VideoLoader = utils.mediaLoader({ type: 'mp4Video', lazyClass: '.js-mp4-video-src', responsiveClass: '.js-res-video', preset: '?imbypass=true', loadOption: [{ resolution: 1920, attribute: 'data-video-src-pc' }, { resolution: 1023, attribute: 'data-video-src-tb' }, { resolution: 767, attribute: 'data-video-src-mo' }, { resolution: 360, attribute: 'data-video-src-mo-s' }], visiblePoint: 1, endCallback: function (video) { if (!!video.videoHandler && !video.videoHandler.wrap.classList.contains('is-loaded')) { video.videoHandler.wrap.classList.add('is-loaded'); } } }); }, setVideoTheme: function () { for (let i = 0; i < els.videoWrap.length; i++) { let colorType = els.videoWrap[i].getAttribute('data-theme-type'); if (colorType === 'white') { els.videoWrap[i].classList.add('common-video--white'); } else if (colorType === 'black') { els.videoWrap[i].classList.add('common-video--black'); } } }, anchorPosition: function () { if (window.location.hash != '') { let hash = location.hash.split('#')[1], hashSection = document.querySelector('#contents #' + hash), hashTimeout = null; clearTimeout(hashTimeout); hashTimeout = setTimeout(function () { let sectionTop = hashSection.getBoundingClientRect().top, navHeight = utils.getNavHeight(), selectHeight = document.querySelector('.fg07-spec-compare__selector').clientHeight; hashScroll = window.pageYOffset + sectionTop - navHeight - selectHeight; window.scrollTo(0, hashScroll); }, 1500); } }, isZoom: function () { let zoomLevel = 100 / ((window.innerWidth / window.outerWidth) * 100); if (zoomLevel != 1) { document.documentElement.classList.add('browser-zoomed-with-subfixel'); } else { document.documentElement.classList.remove('browser-zoomed-with-subfixel'); } if (zoomLevel > 1.7) { document.documentElement.classList.add('browser-zoomed-175'); } else { document.documentElement.classList.remove('browser-zoomed-175'); } if (zoomLevel > 3) { document.documentElement.classList.add('browser-zoomed-300'); } else { document.documentElement.classList.remove('browser-zoomed-300'); } if (zoomLevel > 4) { document.documentElement.classList.add('browser-zoomed-400'); } else { document.documentElement.classList.remove('browser-zoomed-400'); } }, }; return { init: init } })(); })(); ; (function () { window.flagship.upgrade = window.flagship.upgrade || {}; window.flagship.upgrade.carousel = (function () { const utils = window.flagship.common.utils, Swiper = window.flagship.Swiper, data = window.flagship.upgrade.commonData; let els = {}, thisInfo, isParentCarousel, parentIndex = 0, childCarousels = []; const init = function () { els.carousels = document.querySelectorAll('.js-common-carousel'); if (els.carousels.length > 0) { setElements(); setProperty(); bindEvents(); } }; const setElements = function () { els.parentCarousel = document.querySelector('.js-parent-carousel'); els.parentSlide = els.parentCarousel.querySelectorAll('.js-parent-slide'); els.cxpHeadline = els.parentCarousel.querySelectorAll('.js-blind-headline'); }; const setProperty = function () { els.carousels.forEach(carousel => { carousel.swiperEls = {}; carousel.swiperEls.container = carousel.querySelector('.swiper-container'); carousel.swiperEls.container.swiperInfo = {}; carousel.swiperEls.scrollbar = carousel.querySelector('.swiper-scrollbar'); carousel.swiperEls.pagination = carousel.querySelector('.common-carousel__pagination'); carousel.videoEls = {} carousel.videoEls.videoWrap = carousel.querySelectorAll('.js-video-wrap'); carousel.videoEls.videoWrap.forEach(videoWrap => { videoWrap.video = videoWrap.querySelector('.js-res-video'); videoWrap.controller = videoWrap.querySelector('.js-video-control'); videoWrap.controller.video = videoWrap.video; }); }); }; const bindEvents = function () { swiperEvents.set(); eventList.setScene(); eventHandler.click(); eventHandler.scroll(); }; const eventHandler = { click: function () { els.carousels.forEach(carousel => { carousel.videoEls.videoWrap.forEach(videoWrap => { videoWrap.controller.addEventListener('click', eventList.clickVideoCta); }); }); }, scroll: function () { window.addEventListener('scroll', eventList.scroll); } }; const eventList = { clickVideoCta: function (e) { const clickVideo = e.currentTarget.video; clickVideo.paused ? eventList.playVideo(clickVideo) : clickVideo.pause(); }, setScene: function () { SCROLLER({ trackElement: els.parentCarousel }); }, scroll: function () { if (!data.viewCase) return; const activeVideoWrap = thisInfo.activeSlide.querySelector('.js-video-wrap'); const videoHandler = activeVideoWrap && activeVideoWrap.video.videoHandler; if (!!videoHandler) { els.parentCarousel.scroller.trackAnimation(function () { videoHandler.scrollActive(this.progress); }); } }, setVideo: function () { thisInfo.visibleSlides.forEach(visibleSlide => { visibleSlide.forEach(slide => { const videoWrap = slide.querySelector('.js-video-wrap'); const videoHandler = videoWrap && videoWrap.video.videoHandler; if (videoWrap && !videoHandler) { utils.videoHandler({ playType: 'scrollPlay', startPoint: (data.currDevice.indexOf('mobile') > -1) ? 30 : 30, reversePoint: (data.currDevice.indexOf('mobile') > -1) ? 60 : 60, wrap: videoWrap, video: videoWrap.video, controller: videoWrap.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'); } this.removeEventListener('timeupdate', this.timeupdateEvent); } } this.video.addEventListener('timeupdate', this.video.timeupdateEvent); this.video.removeEventListener('canplay', eventList.playVideoOnce); }, pauseCallback: function () { setTagging.play(this.controller); } }); } }); }); }, slideVideoPlay: function () { thisInfo.visibleSlides.forEach(visibleSlide => { visibleSlide.forEach(slide => { const video = slide.querySelector('.js-res-video'); if (!video) return; if (thisInfo.activeSlide === slide) { eventList.playVideo(video) } else { if (!video.paused) eventList.resetVideo(video); else video.pause(); } }); }); }, playVideoOnce: function () { this.play(); }, playVideo: function (video) { if (!video) return; if (video.readyState == 4) { video.play(); } else { video.load(); video.addEventListener('canplay', function () { this.play(); }, { once: true }); } }, resetVideo: function (video) { if (!!video && !video.paused) { video.pause(); video.currentTime = 0; } } }; const swiperEvents = { set: function () { const parentCarousel = new Swiper(els.parentCarousel, { init: false, slidesPerView: 'auto', effect: 'fade', fadeEffect: { crossFade: true, }, pagination: { clickable: true, el: '.upgrade-tab__list', bulletClass: 'upgrade-tab__item', bulletActiveClass: 'is-active', renderBullet: (index, className) => { els.parentSlide = els.parentCarousel.querySelectorAll('.js-parent-slide'); const dataTabname = els.parentSlide[index].dataset.tabName; const tagging = { omniType: 'microsite_gallery', actionType: 'gallery', contentType: 'feature gallery', taggingValue: `upgrade:slct:${dataTabname.toLowerCase().replace(' ', '-')}` } els.cxpHeadline[index].innerText = dataTabname; return ( `` ); } }, a11y: false, }); parentCarousel.on('update', swiperEvents.update); parentCarousel.on('slideChange', swiperEvents.slideChange); els.carousels.forEach(carousel => { const childCarousel = new Swiper(carousel.swiperEls.container, { slidesPerView: 'auto', scrollbar: { el: carousel.swiperEls.scrollbar, draggable: true, }, pagination: { el: carousel.swiperEls.pagination, clickable: true, bulletClass: 'common-carousel__pagination-bullet', bulletActiveClass: 'is-active', renderBullet: function (index, className) { const tagging = { omniType: 'microsite_gallery', actionType: 'gallery', contentType: 'feature gallery', taggingValue: '' }; return ( `

` ); } }, a11y: false, }); childCarousels.push(childCarousel); childCarousel.on('update', swiperEvents.update); childCarousel.on('slideChange', swiperEvents.slideChange); }); parentCarousel.init(); // 내부 요소 보다 먼저 init하면 스와이프가 제대로 동작 하지 않음 window.flagship.upgrade.carousel.parentCarousel = parentCarousel; }, update: function () { const bullets = this.pagination.bullets; isParentCarousel = this.hostEl === els.parentCarousel; if (isParentCarousel) { parentIndex = 0; this.slideTo(0, 0); accessibility.slideTabPanal(); accessibility.parentPagination(bullets); childCarousels.forEach((childCarousel) => { childCarousel.slideTo(0, 0); childCarousel.update(); swiperEvents.setPaginationAttr(childCarousel); accessibility.childPagination(childCarousels[parentIndex].pagination.bullets); }); } else { swiperEvents.setCurrentInfo.call(this); swiperEvents.setVisibleSlide(); swiperEvents.loadMediaAssets(); swiperEvents.setActiveSlide(); accessibility.slide(); eventList.setVideo(); } }, slideChange: function () { const bullets = this.pagination.bullets; isParentCarousel = this.hostEl === els.parentCarousel; if (isParentCarousel) { parentIndex = this.activeIndex; accessibility.slide(); accessibility.parentPagination(bullets); swiperEvents.setCurrentInfo.call(childCarousels[parentIndex]); swiperEvents.setActiveSlide(); accessibility.childPagination(childCarousels[parentIndex].pagination.bullets); eventList.slideVideoPlay(); } else { swiperEvents.setCurrentInfo.call(this); swiperEvents.setActiveSlide(); accessibility.childPagination(bullets); eventList.slideVideoPlay(); } }, setCurrentInfo: function () { thisInfo = this.el.swiperInfo; thisInfo.slides = this.slides; thisInfo.activeIndex = this.activeIndex; }, setVisibleSlide: function () { thisInfo.visibleSlides = []; childCarousels.forEach((childCarousel, index) => { thisInfo.visibleSlides[index] = []; childCarousel.slides.forEach(slide => { slide.classList.contains('is-show') ? thisInfo.visibleSlides[index].push(slide) : null; }); }); }, setActiveSlide: function () { thisInfo.activeSlide = thisInfo.visibleSlides[parentIndex][thisInfo.activeIndex]; swiperEvents.setRealActive(); }, setRealActive: function () { els.allSlides = els.parentCarousel.querySelectorAll('.js-parent-slide .swiper-slide'); els.allSlides.forEach(allSlide => { allSlide.classList.remove('is-real-active'); }); if (thisInfo.activeSlide) thisInfo.activeSlide.classList.add('is-real-active'); accessibility.slide(); }, loadMediaAssets: function () { thisInfo.visibleSlides.forEach(visibleSlide => { visibleSlide.forEach(slide => { const isLoadedSlide = slide && !slide.dataset.assetsLoaded; if (isLoadedSlide) { const assets = [{ selector: '.js-res-img:not(.is-img-load-complete)', loader: imageLoader }, { selector: '.js-res-video:not(.is-video-load-complete)', loader: videoLoader } ]; assets.forEach(asset => { const assetsMediaCategory = slide.querySelectorAll(asset.selector); if (assetsMediaCategory.length > 0) { asset.loader.setResponsiveMedia(assetsMediaCategory); } }); slide.dataset.assetsLoaded = "true"; } }); }); }, setPaginationAttr: function (childCarousel) { const allSlides = childCarousel.slides, allBullets = childCarousel.pagination.bullets, dataTitleArr = [], dataFeatureNameArr = []; allSlides.forEach(slide => { if (slide.classList.contains('is-show')) { const allSlideHeadline = slide.querySelectorAll('.js-slide-headline'); allSlideHeadline.forEach(slideHeadline => { if (slideHeadline.style.display != 'none') { const clonedElement = slideHeadline.cloneNode(true); clonedElement.querySelectorAll('sup').forEach(node => node.remove()); dataTitleArr.push(clonedElement.textContent.trim()); } }); dataFeatureNameArr.push(slide.dataset.featureName); } }); allBullets.forEach((bullet, index) => { const bulletButton = bullet.children[0], taggingValue = `${FLAGSHIP_PROD_NAME}:${FLAGSHIP_PAGE_NAME}:upgrade^${dataFeatureNameArr[index]}:sldr-dots:${index + 1}`; bulletButton.setAttribute('aria-label', `${LOCAL_VARI.slide}${index + 1}: ${dataTitleArr[index]}`); bulletButton.setAttribute('data-saved-label', `${LOCAL_VARI.slide}${index + 1}: ${dataTitleArr[index]}`); bulletButton.setAttribute('data-omni', taggingValue); bulletButton.setAttribute('ga-la', taggingValue); }); }, }; 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 = { slideTabPanal: function () { els.parentSlide.forEach((element, index) => { element.setAttribute('id', `upgrade-panel-${index + 1}`); element.setAttribute('aria-labelledby', `upgrade-tab-${index + 1}`); }); }, slide: function () { els.parentSlide.forEach((slide, index) => { index === parentIndex ? utils.offAccessibility(slide) : utils.onAccessibility(slide); }); els.allSlides.forEach(allSlide => { if (allSlide.classList.contains('is-real-active')) { utils.offAccessibility(thisInfo.activeSlide) } else { utils.onAccessibility(allSlide); } }); }, parentPagination: function (bullets) { bullets.forEach((bullet, index) => { if (index == parentIndex) bullet.children[0].setAttribute('title', LOCAL_VARI.selected); else bullet.children[0].removeAttribute('title'); }); }, childPagination: function (bullets) { bullets.forEach((bullet) => { const getSavedLabel = bullet.children[0].dataset.savedLabel; if (bullet.classList.contains('is-active')) { bullet.children[0].setAttribute('aria-label', `${getSavedLabel}: ${LOCAL_VARI.selected}`); } else { bullet.children[0].setAttribute('aria-label', `${getSavedLabel}`); } }); }, }; return { init: init }; })(); })(); ; (function () { window.flagship.upgrade = window.flagship.upgrade || {}; window.flagship.upgrade.uiHandler = (function () { const utils = window.flagship.common.utils, resize = window.flagship.common.resize, data = window.flagship.upgrade.commonData; let els = {}, resetStatus = false, activeStatus = false; const init = function () { els.upgrade = document.querySelector('#upgrade'); if (!!els.upgrade) { setElements(); bindEvents(); } }; const setElements = function () { els.html = document.documentElement; els.flagshipContent = document.querySelector('.flagship-contents.compare'); els.groCtsQ6 = document.querySelectorAll('.js-cts-q6'); els.groCts24FE = document.querySelectorAll('.js-cts-24fe'); els.groCrossAppAction = document.querySelectorAll('.js-saaa'); els.boldHeadline = els.upgrade.querySelectorAll('.js-headline-bold strong'); els.upgradeBgimg = els.upgrade.querySelectorAll('.js-bg-img'); els.upgradeScroll = els.upgrade.querySelector('.js-upgrade-scroll'); }; const bindEvents = function () { eventList.setScene(); eventList.load(); eventHandler.resize(); eventHandler.scroll(); }; const eventHandler = { resize: function () { window.addEventListener('resize', eventList.resize); }, scroll: function () { window.addEventListener('scroll', eventList.scrollActive) } }; const eventList = { load: function () { eventList.setGroVisible(); eventList.setStatus(); eventList.changeStyle(); eventList.setFillText(); bgLoader.setResponsiveMedia(els.upgradeBgimg); }, resize: function () { setTimeout(() => { eventList.setStatus(); eventList.setMatchHeight(); }, 300); eventList.changeStyle(); }, setGroVisible: function () { if (!window.flagship.upgrade.VISIBLE_CTS_Q6) eventList.removeGroFeature(els.groCtsQ6); if (!window.flagship.upgrade.VISIBLE_CTS_24FE) eventList.removeGroFeature(els.groCts24FE); if (!window.flagship.upgrade.VISIBLE_CAA) eventList.removeGroFeature(els.groCrossAppAction); }, removeGroFeature: function (elements) { elements.forEach(element => element.remove()); }, setScene: function () { SCROLLER({ trackElement: els.upgradeScroll, }); }, scrollActive: function () { els.upgradeScroll.scroller.trackAnimation(function () { switch (this.wheelDirection) { case 'up': resetStatus = this.progress <= 0; activeStatus = this.progress <= 70 && this.progress > 0; break; case 'down': resetStatus = this.progress >= 80; activeStatus = this.progress > 0 && this.progress < 80; break; } if (resetStatus) els.upgradeScroll.classList.remove('is-active'); if (activeStatus) els.upgradeScroll.classList.add('is-active'); }); }, setStatus: function () { data.currDevice = resize.checkResolution(); data.lowNetwork = els.html.classList.contains('low_network'); if (data.lowNetwork) els.html.classList.remove('low_network'); }, changeStyle: function () { const getWidth = els.html.getBoundingClientRect().width; els.html.style.setProperty('--upgrade-width', `${getWidth}px`); }, setFillText: function () { els.boldHeadline.forEach(strong => { strong.classList.add('is-fill-text'); }); }, getMaxHeight: function () { const heightArr = []; els.matchHeight = els.upgrade.querySelectorAll('.is-show .js-match-height'); els.matchHeight.forEach(element => { element.style.height = ''; heightArr.push(element.clientHeight); }); return Math.max(...heightArr); }, setMatchHeight: function () { const maxHeight = eventList.getMaxHeight(); els.matchHeight.forEach(element => { element.style.height = maxHeight + 'px'; }); } }; return { init: init, matchHeight: eventList.setMatchHeight }; })(); })(); ; (function () { window.flagship.upgrade = window.flagship.upgrade || {}; window.flagship.upgrade.visibleCaseHandler = (function () { const compareEls = window.flagship.compareRawcode.els, data = window.flagship.upgrade.commonData, carousel = window.flagship.upgrade.carousel, uiHandler = window.flagship.upgrade.uiHandler; let els = {}; const init = function () { els.upgrade = document.querySelector('#upgrade'); if (!!els.upgrade) { setElements(); setProperty(); bindEvents(); } }; const setElements = function () { els.html = document.documentElement; els.viewCase = document.querySelectorAll('[data-case]'); els.changeModelName = document.querySelectorAll('.js-model-name span'); els.performance = document.querySelector('.js-upgrade-performance'); }; const setProperty = function () { data.newDeviceAll = data.newDeviceAll || []; data.oldDeviceAll = data.oldDeviceAll || {}; Object.entries(data.newDevice).forEach(([newKey, newValue]) => { data.newDeviceAll.push(newKey); data.oldDeviceAll[newKey] = newValue.hasOldDevice; }); }; const bindEvents = function () { eventHandler.changeSelect(); }; const eventHandler = { changeSelect: function () { compareEls.selectBox.forEach((element, index) => { element.addEventListener('change', function () { eventList.getCurrentModelcode(this.value, index); eventList.setVisibleCase(); }); }); } }; const eventList = { getCurrentModelcode: function (changeValue, index) { data.currentModelcode = data.currentModelcode || []; data.currentModelcode[index] = changeValue.slice(0, 7); }, getDeviceInfo: function (deviceArr) { const [column1, column2] = data.currentModelcode; const checkDeviceCase = deviceArr.includes(column1) || deviceArr.includes(column2); const deviceModelcode = checkDeviceCase ? (deviceArr.includes(column1) ? column1 : column2) : null; return checkDeviceCase ? deviceModelcode : null; }, setVisibleCase: function () { data.newModelcode = eventList.getDeviceInfo(data.newDeviceAll); data.oldModelcode = data.newModelcode ? eventList.getDeviceInfo(data.oldDeviceAll[data.newModelcode]) : null; const isShow = data.oldModelcode && data.newModelcode; if (isShow) { els.upgrade.style.display = 'block'; data.viewCase = eventList.checkDeviceType(); els.html.dataset.oldModelcode = data.oldModelcode; els.html.dataset.newModelcode = data.newModelcode; els.html.dataset.viewCase = data.viewCase; eventList.changeModelName(); eventList.changeVisibleCase(); eventList.changeSup(); if (!carousel.parentCarousel) carousel.init(); carousel.parentCarousel.update(); uiHandler.matchHeight(); } else { els.upgrade.style.display = 'none'; document.querySelectorAll('.is-upgrade-show').forEach(element => { element.classList.remove('is-upgrade-show'); }); data.viewCase = null; delete els.html.dataset.oldModelcode; delete els.html.dataset.newModelcode; delete els.html.dataset.viewCase; } }, checkDeviceType: function () { const oldStr = data.oldDevice[data.oldModelcode].prefix; const newStr = data.newDevice[data.newModelcode].suffix; return oldStr + newStr; }, changeVisibleCase: function () { els.viewCase.forEach(element => { const dataCaseArr = element.dataset.case.split(' '); const isVisible = dataCaseArr.includes(data.viewCase) ? true : false; if (element.dataset.viewModelcode) { if (element.dataset.exceptCase) { const dataExceptArr = element.dataset.exceptCase.split(' '); if (dataExceptArr.includes(data.viewCase)) { eventList.setVisibleElement(element, true); } else { eventList.changeVisibleModelcode(element, isVisible); } } else { eventList.changeVisibleModelcode(element, isVisible); } } else { eventList.setVisibleElement(element, isVisible); } }); }, changeVisibleModelcode: function (element, isVisible) { const hasOldModel = element.dataset.viewModelcode.includes(data.oldModelcode) ? true : false; const isModelVisible = isVisible && hasOldModel; eventList.setVisibleElement(element, isModelVisible); }, setVisibleElement: function (element, isVisible) { const hasSlideClass = element.classList.contains('swiper-slide'); const isBottomDisclaimer = element.classList.contains('upgrade-bottom-disclaimer__list'); const dataValueType = element.dataset.valueType; if (isVisible) { if (hasSlideClass) { element.classList.remove('is-hide'); element.classList.add('is-show'); element.parentElement.appendChild(element); } else if (isBottomDisclaimer) { element.classList.add('is-upgrade-show'); element.style.display = ''; } else { element.style.display = ''; if (dataValueType) eventList.changeValueType(element, dataValueType); } } else { if (hasSlideClass) { element.classList.remove('is-show'); element.classList.add('is-hide'); } else if (isBottomDisclaimer) { element.classList.remove('is-upgrade-show'); element.style.display = 'none'; } else { element.style.display = 'none'; } } }, changeModelName: function () { const oldModelName = data.oldDevice[data.oldModelcode].modelName; const newModelName = data.newDevice[data.newModelcode].modelName; els.changeModelName[0].innerText = oldModelName; els.changeModelName[1].innerText = newModelName; }, changeValueType: function (element, dataValueType) { const currentSpecData = data.oldDevice[data.oldModelcode].specs[data.newModelcode]; const weightIndex = window.flagship.upgrade.TYPE_WEIGHT == 'A' ? 0 : 1; const playbackIndex = window.flagship.upgrade.TYPE_BATTERY == 'A' ? 0 : window.flagship.upgrade.TYPE_BATTERY == 'B' ? 1 : window.flagship.upgrade.TYPE_BATTERY == 'C' ? 2 : window.flagship.upgrade.TYPE_BATTERY == 'D' ? 3 : null; const changeValueArea = element.querySelectorAll('.common-text span'); switch (dataValueType) { case 'playback': const copyHr = els.performance.dataset.copyHr, copyHrs = els.performance.dataset.copyHrs, changeHeading = currentSpecData['playback'][playbackIndex] === -1 ? true : false, changeHeadingModel = ' SM-N980'; if (changeHeading) { element.dataset.viewModelcode = element.dataset.viewModelcode.replace(changeHeadingModel, ''); element.nextElementSibling.dataset.viewModelcode = element.nextElementSibling.dataset.viewModelcode + changeHeadingModel; eventList.changeVisibleCase(); } else { changeValueArea[0].innerText = currentSpecData['playback'][playbackIndex]; changeValueArea[1].innerText = currentSpecData[dataValueType][playbackIndex] === 1 ? copyHr : copyHrs; } break; case 'weight': changeValueArea[0].innerText = currentSpecData['weight'][weightIndex]; break; case 'slimness weight': changeValueArea[0].innerText = currentSpecData['slimness']; changeValueArea[1].innerText = currentSpecData['weight'][weightIndex]; break; default: changeValueArea[0].innerText = currentSpecData[dataValueType]; break; } }, changeSup: function () { if (els.html.dataset.viewCase == 'StoFL6') { const changeSupElement = els.upgrade.querySelectorAll('[data-feature-name="pocketability"] .click_sup'); changeSupElement[0].dataset.supTag = 'sup-5'; } if (els.html.dataset.viewCase == 'FOtoFL6') { const changeSupElementDesign = els.upgrade.querySelectorAll('[data-feature-name="pocketability"] .click_sup'); const changeSupElementPerformance = els.upgrade.querySelectorAll('[data-feature-name="battery"][data-case="FOtoFL6 FLtoFL6"] .click_sup'); changeSupElementDesign[0].dataset.supTag = 'sup-8'; changeSupElementPerformance[0].dataset.supTag = 'sup-8'; } if (els.html.dataset.viewCase == 'FLtoFL6') { const changeSupElement = els.upgrade.querySelectorAll('[data-feature-name="pocketability"] .click_sup'); const supWrap = els.upgrade.querySelector('[data-feature-name="bigger-flex-window"] sup'); const changeInnerSupElement = supWrap.querySelectorAll('.click_sup'); changeSupElement[0].dataset.supTag = 'sup-8'; if (changeInnerSupElement.length == 5) data.savedSupElement = changeInnerSupElement; if (els.html.dataset.oldModelcode != 'SM-F731') supWrap.textContent = ''; let oldModelSupIndex; data.savedSupElement.forEach((supElement, index) => { oldModelSupIndex = els.html.dataset.oldModelcode == 'SM-F721' ? 0 : els.html.dataset.oldModelcode == 'SM-F711' ? 1 : 2; if (index == oldModelSupIndex || index == 3 || index == 4) { supWrap.append(supElement); if (index != 4) supWrap.append(','); } }); } }, }; return { init: init } })(); })(); flagship.upgrade.initialize = (function () { const init = function () { flagship.upgrade.settings.init(); flagship.upgrade.uiHandler.init(); flagship.upgrade.visibleCaseHandler.init(); flagship.upgrade.faq.init(); }; return { init: init } })(); flagship.upgrade.initialize.init(); });