Riflette il tuo stile,
Personalizza la tua versione di The Frame
Studio di design The Frame
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" 75" 85"
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', '75inch', '85inch'];
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/global/hq/vd/lifestyle-tvs/the-frame/design/2025-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/global/hq/vd/lifestyle-tvs/the-frame/design/2025-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/global/hq/vd/lifestyle-tvs/the-frame/design/2025-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/it/lifestyle-tvs/the-frame/design/04-2025/' + 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';
document.querySelector('.prevRoomBtn').setAttribute('an-la','customize your own version of the frame:keep designing')
}else{
_this.innerText = 'Preview room';
document.querySelector('.prevRoomBtn').setAttribute('an-la','customize your own version of the frame:preview room')
}
}
function reset(){
document.querySelectorAll('[name=optionSelectUiRadio-theme]')[0].dispatchEvent(new MouseEvent('click'));
document.querySelectorAll('[name=optionSelectUiRadio-art]')[0].dispatchEvent(new MouseEvent('click'));
document.querySelectorAll('[name=optionSelectUiRadio-mat]')[0].dispatchEvent(new MouseEvent('click'));
document.querySelectorAll('[name=optionSelectUiRadio-wallColor]')[0].dispatchEvent(new MouseEvent('click'));
document.querySelectorAll('[name=optionSelectUiRadio-matColor]')[2].dispatchEvent(new MouseEvent('click'));
document.querySelectorAll('#slidecontainer-selectSize .unit button')[6].dispatchEvent(new MouseEvent('click'));
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
}
The Frame, elegante in ogni ambiente
Acquista The Frame e i suoi accessori
