Reflects your style,
Customize your own version of The Frame
The Frame Design Studio
Document
Select size
Select bezel
Customize your screen
Preview room
Reset
Select theme
Choose wall color
close
Choose artwork
Choose mat option
Choose mat color
close
Select theme
32" 43" 50" 55" 65"
close
Buy now
`
)
})
const wallColor = document.querySelectorAll('[name=optionSelectUiRadio-wallColor]');
wallColor.forEach(item => item.addEventListener('change', this.handleWallColorChange.bind(this)));
}
}
};
bgChange.init();
const tvSizeAndBezelChange = {
init() {
this.bezelColorArr = ['brown', 'sandgold', 'teak', 'white'];
this.bezelSizeArr = ['32inch', '43inch', '50inch', '55inch', '65inch'];
this.tv = document.querySelector('.tv-wrap > .tv');
this.bezel = document.querySelector('.bezel img');
this.bezelSizeRange = document.querySelector('#bezelSizeRange');
this.bezelTypeRadio = document.querySelectorAll('[name=optionSelectUiRadio-bezel]');
this.slidecontainerBtns = document.querySelectorAll('.slidecontainer .unit button')
this.temp_sizeClass = 'size7';
this.bezelSize_idx = this.bezelSizeArr.length - 1;
this.bezelType_idx = 0;
this.bezel.src = '//images.samsung.com/is/image/samsung/assets/id/lifestyle-tvs/the-frame/design/2024-the-frame-design-f02-the-frame-design-studio-mo/bezel/85inch/2024-the-frame-design-f02-85inch-mo.png?$ORIGIN_PNG$';
this.slidecontainerBtns.forEach((slidecontainerBtn,i)=>{
slidecontainerBtn.addEventListener('click',(e)=>{
const units = document.querySelectorAll('.slidecontainer > .unit > button');
units.forEach(item => item.classList.remove('active'));
tvSizeIdx = i;
this.bezelSize_idx = i;
units[this.bezelSize_idx].classList.add('active');
const sizeClass = 'size' + Number(tvSizeIdx + 1);
if (this.temp_sizeClass) {
this.tv.classList.remove(this.temp_sizeClass);
}
this.tv.classList.add(sizeClass);
this.temp_sizeClass = sizeClass;
this.tvSizeAndBezelChange();
matSizeChange();
if(window.innerWidth < 768){
// console.log(tvSizeIdx);
if(tvSizeIdx < 2){
document.querySelector('#selButton-selectSize').classList.add('revers');
}else{
document.querySelector('#selButton-selectSize').classList.remove('revers');
}
}
})
})
// this.bezelSizeRange.addEventListener('input', (e)=>{
// const units = document.querySelectorAll('.slidecontainer > .unit > span');
// units.forEach(item => item.classList.remove('active'));
// tvSizeIdx = e.target.value - 1;
// this.bezelSize_idx = tvSizeIdx;
// units[this.bezelSize_idx].classList.add('active');
// const sizeClass = 'size' + e.target.value;
// if (this.temp_sizeClass) {
// this.tv.classList.remove(this.temp_sizeClass);
// }
// this.tv.classList.add(sizeClass);
// this.temp_sizeClass = sizeClass;
// this.tvSizeAndBezelChange();
// matSizeChange();
// if(window.innerWidth < 768){
// // console.log(tvSizeIdx);
// if(tvSizeIdx < 2){
// document.querySelector('#selButton-selectSize').classList.add('revers');
// }else{
// document.querySelector('#selButton-selectSize').classList.remove('revers');
// }
// }
// });
this.bezelTypeRadio.forEach((item,i) => {
item.addEventListener('change',()=>{
this.bezelType_idx = i;
this.tv.classList.add('bezelOn');
this.tvSizeAndBezelChange();
document.querySelector('.resetBtn').classList.add('active');
})
});
},
tvSizeAndBezelChange() {
if(this.tv.classList.contains('bezelOn')){
this.bezel.src = `//images.samsung.com/is/image/samsung/assets/id/lifestyle-tvs/the-frame/design/2024-the-frame-design-f02-the-frame-design-studio-mo/bezel/${this.bezelSizeArr[this.bezelSize_idx]}/2024-the-frame-design-f02-${this.bezelSizeArr[this.bezelSize_idx]}-${this.bezelColorArr[this.bezelType_idx]}-mo.png?$ORIGIN_PNG$?20241107`;
}else{
this.bezel.src = `//images.samsung.com/is/image/samsung/assets/id/lifestyle-tvs/the-frame/design/2024-the-frame-design-f02-the-frame-design-studio-mo/bezel/${this.bezelSizeArr[this.bezelSize_idx]}/2024-the-frame-design-f02-${this.bezelSizeArr[this.bezelSize_idx]}-mo.png?$ORIGIN_PNG$?20241107`;
}
autoArtworkChange = false;
}
};
tvSizeAndBezelChange.init();
const artChange = {
init() {
this.depths = 1;
this.art = document.querySelectorAll('.tv .inner .border .screen img');
this.artRadio = document.querySelectorAll('[name=optionSelectUiRadio-art]');
this.addEventListeners();
},
addEventListeners() {
this.artRadio.forEach(item => item.addEventListener('change', this.handleArtChange.bind(this)));
},
handleArtChange(e) {
const selectedIndex = Array.from(this.artRadio).indexOf(e.target);
// setTimeout(() => {
this.art.forEach(element => {
element.classList.remove('active');
})
this.depths++;
this.art[selectedIndex].style.zIndex = this.depths;
this.art[selectedIndex].classList.add('active');
// },400);
const imgSrc = e.target.nextElementSibling.querySelector('img').src;
this.art.src = imgSrc;
// console.log(imgSrc);
autoArtworkChange = false;
}
};
artChange.init();
const matChange = {
init(){
this.tv = document.querySelector('.tv-wrap > .tv');
this.inner = document.querySelector('.tv .inner');
this.matRadio = document.querySelectorAll('[name=optionSelectUiRadio-mat]');
this.matColorRadio = document.querySelectorAll('[name=optionSelectUiRadio-matColor]');
this.matRadio.forEach((item,i) => {
item.addEventListener('change',() => {
matSizeIdx = i;
matSizeChange();
autoArtworkChange = false;
})
});
this.matColorRadio.forEach((item,i) => {
item.addEventListener('change',() => {
document.querySelector('#tv_inner_pattern').src = '//images.samsung.com/is/image/samsung/assets/id/lifestyle-tvs/the-frame/design/2024-the-frame-design-f02-the-frame-design-studio-mo/mat/' + matPatternArr[i].filename + '?20240726'
document.querySelector('#tv_inner_pattern').addEventListener('load',()=>{
document.querySelector('.screen_inner_border').style.borderLeftColor = matPatternArr[i].L;
document.querySelector('.screen_inner_border').style.borderRightColor = matPatternArr[i].R;
document.querySelector('.screen_inner_border').style.borderTopColor = matPatternArr[i].T;
document.querySelector('.screen_inner_border').style.borderBottomColor = matPatternArr[i].B;
},{once:true})
// this.inner.style.backgroundColor = item.nextElementSibling.querySelector('.colorPick').style.backgroundColor;
})
});
}
}
matChange.init();
const uiControl = {
timer: '',
popup: '',
currentSelButton: '',
delay: 1000,
init(){
document.querySelectorAll('.selButton').forEach((_selButton) => {
_selButton.querySelector('.selPoint').addEventListener('mouseover',this.selButton_over);
_selButton.addEventListener('mouseleave',this.selButton_mouseleave);
_selButton.addEventListener('click',this.selButton_click);
})
},
remove(){
document.querySelectorAll('.selButton').forEach((_selButton) => {
_selButton.querySelector('.selPoint').removeEventListener('mouseover',this.selButton_over);
_selButton.removeEventListener('mouseleave',this.selButton_mouseleave);
_selButton.removeEventListener('click',this.selButton_click);
})
},
selButton_over(e) {
clearTimeout(this.timer);
document.querySelectorAll('.selButton').forEach((_selButton) => {
_selButton.classList.remove('hover');
});
e.target.closest('.selButton').classList.add('hover');
},
selButton_mouseleave(e){
if(e.target.closest('.selButton').classList.contains('active')){
}else{
e.target.closest('.selButton').classList.remove('hover');
}
},
selButton_click(e){
if(e.currentTarget.classList.contains('hover')){
uiControl.currentSelButton = e.target.closest('.selButton');
const selButtonId = uiControl.currentSelButton.id.replace('selButton-','');
uiControl.popup = document.querySelector('#optionSelectUi-' + selButtonId);
if(selButtonId == 'selectSize'){
uiControl.popup = document.querySelector('#slidecontainer-selectSize');
document.querySelector('#slidecontainer-selectSize').classList.add('open')
document.querySelector('#slidecontainer-selectSize .close').addEventListener('click',()=>{
document.querySelector('#slidecontainer-selectSize').classList.remove('open');
uiControl.currentSelButton.classList.remove('active');
uiControl.currentSelButton.classList.remove('hover');
uiControl.popupClose_handeler();
}, {once: true});
}else{
if(uiControl.popup){
const popupClose = uiControl.popup.querySelector('.close');
document.querySelector('#slidecontainer-selectSize').classList.remove('open');
popupClose.addEventListener('click',uiControl.popupClose_handeler);
}
}
document.querySelectorAll('.optionSelectUi-popBox').forEach((pop) => {
pop.classList.remove('open');
})
document.querySelectorAll('.selButton').forEach((_selButton) => {
_selButton.classList.remove('active');
if(_selButton == uiControl.currentSelButton){
this.timer = setTimeout(() => {
if(uiViewStatus){
_selButton.classList.remove('hover');
}
},uiControl.delay);
}else{
_selButton.classList.remove('hover');
}
})
uiControl.currentSelButton.classList.add('active');
if(uiControl.popup){
uiControl.popup.classList.add('open');
uiViewStatus = true;
}
}
},
popupClose_handeler(){
if(uiControl.popup){
uiControl.popup.classList.remove('open');
/* uiControl.currentSelButton.classList.remove('active');
uiControl.currentSelButton.classList.remove('hover'); */
uiControl.remove();
setTimeout(()=>{startAction.init();},300)
uiViewStatus = false;
}
}
}
// uiControl.init();
class ScrollControl{
constructor(scrollObject){
this.scrollObject = scrollObject;
this.scrollWrap = scrollObject.querySelector('.scrollWrap');
this.scrollWrapLabels = this.scrollWrap.querySelectorAll('label');
this.scrollObject.insertAdjacentHTML('beforeend',
`
`
)
this.scrollThumb = this.scrollObject.querySelector('.customScrollBar-scrollThumb');
this.init();
}
init(){
this.scrollObject.classList.add('scrollOn');
this.scrollWrapLabels.forEach((scrollWrapLabel)=>{
scrollWrapLabel.addEventListener('change',this.scrollWrapLabel_change.bind(this));
})
this.scrollWrap.addEventListener('scroll',this.scroll_move.bind(this));
this.scrollWrap.dispatchEvent(new Event('scroll'));
}
scroll_move(e){
const scrollPosition = e.target.scrollLeft;
const scrollWidth = e.target.scrollWidth;
const clientWidth = e.target.clientWidth;
const scrollEnd = scrollWidth - clientWidth;
const scrollThumbWidth = clientWidth - (scrollWidth - clientWidth);
const ratio = this.scrollObject.clientWidth / clientWidth;
this.scrollThumb.style.width = scrollThumbWidth * ratio + 'px';
this.scrollThumb.style.transform = `translateX(${scrollPosition * ratio}px)`;
if (scrollPosition <= 0) {
this.scrollObject.classList.add('leftEnd');
} else if (scrollPosition >= scrollEnd - 10) {
this.scrollObject.classList.add('rightEnd');
}else{
this.scrollObject.classList.remove('leftEnd');
this.scrollObject.classList.remove('rightEnd');
}
}
scrollWrapLabel_change(e){
const label = e.target.closest('label');
const scrollWrap = e.target.closest('.scrollWrap');
const scrollOffset = scrollWrap.scrollWidth - scrollWrap.offsetWidth;
const padding = 28;
const labelLeft = label.offsetLeft;
const labelWidth = label.offsetWidth;
const scrollWrapScrollLeft = scrollWrap.scrollLeft;
const scrollWrapWidth = scrollWrap.offsetWidth + scrollWrapScrollLeft;
const _labelLeft = labelLeft - padding;
const _labelRight = (labelLeft + labelWidth) + padding;
let gap = 28;
if(this.scrollObject.classList.contains('optionSelectUi-color')){
gap = 18;
}
if (_labelLeft < scrollWrapScrollLeft + 20) {
// label.style.scrollSnapAlign = 'start';
// setTimeout(()=>{
// label.style.scrollSnapAlign = '';
// },200);
// scrollWrap.scrollTo(scrollWrap.scrollLeft - labelWidth - gap,0);
scrollWrap.scrollTo(0,0);
} else if (_labelRight > scrollWrapWidth - 20) {
// label.style.scrollSnapAlign = 'end';
// setTimeout(()=>{
// label.style.scrollSnapAlign = '';
// },200);
// scrollWrap.scrollTo(scrollWrap.scrollLeft + labelWidth + gap,0);
scrollWrap.scrollTo(scrollWrapWidth,0);
}
}
}
if(window.innerWidth < 768){
var scrollControl = new ScrollControl(document.querySelector('.optionSelectUi-image.mat'));
// var scrollControl = new ScrollControl(document.querySelector('.optionSelectUi-image.art'));
var scrollControl = new ScrollControl(document.querySelector('.optionSelectUi-color.mat'));
// var scrollControl = new ScrollControl(document.querySelector('.optionSelectUi-image.theme'));
}
let temp_matSizeClass;
let matSizeClass = 'mat1';
function matSizeChange(){
const tv = document.querySelector('.tv');
const mat = document.querySelector('.tv .inner .border');
let tvSizeRatio = tvSizeArr[tvSizeIdx] / 350;
if(window.innerWidth < 720){
// 모바일
tvSizeRatio = tvSizeArr[tvSizeIdx] / 150;
}
if(matSizeClass){
temp_matSizeClass = matSizeClass;
}
matSizeClass = 'mat' + (matSizeIdx + 1);
tv.classList.remove(temp_matSizeClass);
tv.classList.add(matSizeClass);
if(window.innerWidth > 1440){
mat.style.borderWidth = (((matSizeArr[matSizeIdx] * 100) / window.innerWidth) * tvSizeRatio) + 'vw';
}else{
mat.style.borderWidth = (((matSizeArr[matSizeIdx] * 100) / 1440) * tvSizeRatio) + 'vw';
}
}
window.addEventListener('resize',()=>{
matSizeChange();
})
const roomBgClick = {
init(){
document.addEventListener('click',(e)=>{
if(e.target.classList.contains('tv-wrap') || e.target.classList.contains('tv_bezel')){
uiControl.popupClose_handeler();
}
})
}
}
roomBgClick.init();
function bezel_reset(){
const tv = document.querySelector('.tv');
const img = document.querySelector('.tv .bezel img');
tv.classList.remove('bezelOn');
tvSizeAndBezelChange.tvSizeAndBezelChange();
document.querySelectorAll('[name=optionSelectUiRadio-bezel]').forEach((item)=>{
item.checked = false;
});
document.querySelector('.resetBtn').classList.remove('active');
}
function prevRoom(_this){
const roomStage = document.querySelector('.room-stage')
roomStage.classList.toggle('previewRoom');
if(roomStage.classList.contains('previewRoom')){
_this.innerText = 'Keep designing';
}else{
_this.innerText = 'Preview room';
}
}
function reset(){
document.querySelectorAll('[name=optionSelectUiRadio-theme]')[0].click();
document.querySelectorAll('[name=optionSelectUiRadio-art]')[0].click();
document.querySelectorAll('[name=optionSelectUiRadio-mat]')[0].click();
document.querySelectorAll('[name=optionSelectUiRadio-wallColor]')[0].click();
document.querySelectorAll('[name=optionSelectUiRadio-matColor]')[2].click();
document.querySelectorAll('#slidecontainer-selectSize .unit button')[6].click();
// tvSizeAndBezelChange.bezelSizeRange.value = 7;
// tvSizeAndBezelChange.bezelSizeRange.dispatchEvent(new Event('input'))
bezel_reset();
document.querySelectorAll('.close').forEach((closeBtn)=>{
if(closeBtn.closest('.optionSelectUi-popBox, .slidecontainer').classList.contains('open')){
closeBtn.click();
}
})
if(document.querySelector('.room-stage').classList.contains('previewRoom')){
document.querySelector('.prevRoomBtn').click();
}
autoArtworkChange = true
}
