<section id="simulation" class="simulation simulation-japaneseroom">
<div class="simulation-p1">
<div
id="shopify-section-simulation-viewer-template"
class="shopify-section"
>
<div id="simulation-viewer-template">
<div class="simulation-room is-loading">
<div class="viewbox__scene" id="viewbox__scene"></div>
</div>
<div class="simulation-control__menu-overlay"></div>
</div>
</div>
</div>
<div class="simulation-floor">
<div class="simulation-floor__top" id="simulation-floor"></div>
</div>
<div class="simulation-p2">
<div class="simulation-suggest__pc" id="simulation-suggest__pc"></div>
<div
class="simulation-suggest simulation-suggest__sp empty"
id="simulation-suggest"
>
<div class="simulation-suggest__slide"></div>
<div class="simulation-suggest__controls">
<i class="icon-back simulation-suggest__prev"></i>
<div class="simulation-suggest__dots"></div>
<i class="icon-next simulation-suggest__next"></i>
</div>
</div>
</div>
</section>
<style>
.simulation {
font-size: 14px;
line-height: 21px;
font-weight: 500;
color: #5a5a5a;
display: flex;
margin: auto;
}
@media screen and (max-width: 1199.98px) {
.simulation {
flex-direction: column;
}
}
.simulation .simulation-p1 {
flex: 1;
}
@media screen and (max-width: 1199.98px) {
.simulation .simulation-p1 {
margin-bottom: 24px;
}
}
.simulation .simulation-p2 {
display: flex;
flex-direction: column;
flex: 1;
}
.simulation-suggest__pc {
display: none !important;
}
.simulation-suggest__sp {
display: flex !important;
}
@media screen and (min-width: 1200px) {
.simulation-suggest__pc {
display: flex !important;
}
.simulation-suggest__sp {
display: none !important;
}
}
.simulation .simulation-suggest {
overflow: hidden;
width: 100%;
position: relative;
display: flex;
justify-content: center;
}
@media screen and (min-width: 1200px) {
.simulation .simulation-suggest {
background-color: #fff;
box-shadow: 0px 4px 4px rgba(128, 130, 133, 0.25);
border-radius: 3px;
margin-bottom: 24px;
}
}
.simulation .simulation-suggest.empty {
opacity: 0 !important;
margin-bottom: 0 !important;
}
.simulation .simulation-suggest .simulation-suggest__slide {
padding: 0px 0 34px;
width: 100%;
display: flex;
}
.simulation .simulation-suggest .simulation-suggest__slide:empty {
padding: 12px 0;
}
@media screen and (min-width: 1200px) {
.simulation .simulation-suggest .simulation-suggest__slide:empty {
display: none;
}
}
.simulation .simulation-suggest .simulation-suggest__controls {
position: absolute;
display: flex;
bottom: 24px;
align-items: center;
bottom: 0px;
}
.simulation .simulation-suggest .simulation-suggest__dots {
flex: 1;
}
.simulation .simulation-suggest .simulation-suggest__dots ul:first-child {
display: none !important;
}
.simulation .simulation-suggest .simulation-suggest__dots ul:last-child,
.simulation .simulation-suggest .simulation-suggest__dots ul:only-child {
display: flex !important;
}
.simulation .simulation-suggest .simulation-suggest__dots li {
width: 8px;
height: 14px;
line-height: 8px;
display: flex;
align-items: center;
}
.simulation .simulation-suggest .simulation-suggest__dots li button {
line-height: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #bdbdbd;
padding: 0;
border: none;
box-shadow: none;
overflow: hidden;
transition: all 0.3s ease;
text-indent: -9999px;
}
.simulation
.simulation-suggest
.simulation-suggest__dots
li:not(:last-of-type) {
margin-right: 8px;
}
.simulation
.simulation-suggest
.simulation-suggest__dots
.slick-active
button {
background: #b77931;
}
.simulation .simulation-suggest .slick-list {
width: calc(100% - 31.5px);
margin: 0 11.5px 0 20px;
overflow: visible;
}
.simulation .simulation-suggest__wrapper--inner {
transition: all 0.15s ease;
}
.simulation .simulation-suggest__wrapper--inner:before {
transition: all 0.15s ease;
opacity: 0;
content: "";
/* No content for ::after */
width: 20px;
height: 20px;
background-image: url(https://journal.wallpaperstore.jp/wp/wp-content/uploads/2023/09/check-icon.svg);
background-size: cover;
position: absolute;
z-index: 101;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* opacity: 0.9; */
}
.simulation .simulation-suggest__wrapper--inner:after {
display: block;
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: 2px solid #b77931;
z-index: 101;
transition: all 0.15s ease;
opacity: 0;
}
.simulation .simulation-suggest__wrapper--inner.active {
box-shadow: none !important;
}
.simulation .simulation-suggest__wrapper--inner.active:before,
.simulation .simulation-suggest__wrapper--inner.active:after {
opacity: 1;
}
.simulation
.simulation-suggest
.slick-slide
.simulation-suggest__wrapper--inner.active
img {
opacity: 0.5;
transform: translate(-50%, -50%) scale(1.2);
}
.simulation
.simulation-suggest
.simulation-suggest__wrapper--image.active
+ .simulation-suggest__wrapper--image
.simulation-suggest__wrapper--inner:before,
.simulation
.simulation-suggest
.simulation-suggest__wrapper--image.active
+ .simulation-suggest__wrapper--image
.simulation-suggest__wrapper--inner:after {
opacity: 0;
}
.simulation
.simulation-suggest
.simulation-suggest__wrapper--image.active
+ .simulation-suggest__wrapper--image
.simulation-suggest__wrapper--inner
img {
opacity: 1;
transform: translate(-50%, -50%) scale(1.1);
}
.simulation .simulation-suggest .slick-arrow.slick-hidden {
display: block !important;
}
.simulation .simulation-suggest .icon-next {
cursor: pointer;
color: #b77931;
width: 16px;
height: 16px;
background-image: url(https://journal.wallpaperstore.jp/wp/wp-content/uploads/2023/09/right-1.svg);
background-size: cover;
position: absolute;
bottom: -8px;
right: -80%;
transform: translate(-50%, -50%);
}
.simulation .simulation-suggest .icon-back {
cursor: pointer;
color: #b77931;
width: 16px;
height: 16px;
background-image: url(https://journal.wallpaperstore.jp/wp/wp-content/uploads/2023/09/left.svg);
background-size: cover;
position: absolute;
bottom: -8px;
left: -40%;
transform: translate(-50%, -50%);
}
.simulation .simulation-suggest__wrapper--image {
overflow: hidden;
border-radius: 3px;
cursor: pointer;
box-shadow: 0px 4px 4px rgba(128, 130, 133, 0.25);
}
.simulation .simulation-suggest__wrapper--image:empty {
box-shadow: none;
}
.simulation
.simulation-suggest
.simulation-suggest__wrapper--image:not(:last-child) {
margin-right: 8.5px;
}
.simulation
.simulation-suggest
.simulation-suggest__wrapper--image:hover
img {
opacity: 0.5 !important;
transform: translate(-50%, -50%) scale(1.2) !important;
}
.simulation
.simulation-suggest
.simulation-suggest__wrapper--image:not(:last-child) {
margin-right: 8.5px;
}
.simulation-suggest__pc {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
margin-bottom: 10px;
}
.simulation-suggest__pc .simulation-suggest__wrapper--image {
margin-bottom: 19.9px;
text-align: center;
margin-right: 19.9px;
}
.simulation-suggest__pc .simulation-suggest__wrapper--image:nth-child(5),
.simulation-suggest__pc .simulation-suggest__wrapper--image:nth-child(10) {
margin-right: 0;
}
.simulation-suggest__pc .simulation-suggest__wrapper--image img {
width: 132px;
height: 132px;
object-fit: cover;
}
.simulation-suggest__pc .simulation-suggest__wrapper--image:hover img {
opacity: 0.5;
transform: scale(1.2);
transition: transform 0.3s, opacity 0.3s;
transform-origin: center center;
}
.simulation
.simulation-suggest
.simulation-suggest__wrapper--image
.simulation-suggest__wrapper--image-cost {
position: absolute;
bottom: 4px;
right: 4px;
color: #555;
backdrop-filter: blur(4px);
background: rgba(255, 255, 255, 0.55);
border-radius: 6px;
z-index: 100;
font-size: 10px;
line-height: 18px;
padding: 0 4px;
font-weight: 700;
}
.simulation .simulation-suggest .simulation-suggest__wrapper--inner {
width: 100%;
padding-top: 100%;
position: relative;
overflow: hidden;
}
.simulation .simulation-suggest__pc .simulation-suggest__wrapper--inner {
position: relative;
}
.simulation .simulation-suggest .simulation-suggest__wrapper--inner img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1.1);
width: 100%;
height: 100%;
object-fit: cover;
transition: all 1s ease;
}
.simulation .simulation-suggest .simulation-recommend__control--icon {
padding-left: 4px;
cursor: pointer;
}
.simulation
.simulation-suggest
.simulation-recommend__control--icon
.icon-dot,
.simulation
.simulation-suggest
.simulation-recommend__control--icon
.icon-dot_active {
font-size: 10px;
}
.simulation
.simulation-suggest
.simulation-recommend__control--icon
.active::before {
color: #b77931;
}
.simulation
.simulation-suggest
.simulation-recommend__control--icon:first-child {
padding-right: 8px;
position: relative;
top: 2px;
}
.simulation
.simulation-suggest
.simulation-recommend__control--icon:last-child {
padding-left: 16px;
position: relative;
top: 2px;
}
.simulation .simulation-suggest .slick-active button span::before {
color: #b77931 !important;
}
.simulation .simulation-suggest .icon-dot {
font-size: 8px;
}
.simulation .simulation-suggest .simulation-suggest__dots ul {
margin: 0;
}
.simulation .mb-0 {
margin-bottom: 0px !important;
}
.simulation .hidden {
display: none !important;
}
.simulation .grid {
display: grid !important;
}
.d-none {
display: none;
}
.viewbox__inner {
width: 100%;
}
.viewbox__scene {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
display: flex;
z-index: 1;
}
.viewbox__scene [src=""] {
visibility: hidden;
}
.viewbox__shadow,
.viewbox__light,
.viewbox__mask {
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.viewbox__fill,
.viewbox__name,
.viewbox__shadow,
.viewbox__light,
.viewbox__mask {
position: absolute;
display: block;
}
.viewbox__background {
z-index: 1;
width: 100%;
height: 100%;
}
.viewbox__shadow {
pointer-events: none;
z-index: 99;
}
.viewbox__light {
pointer-events: none;
z-index: 100;
background: rgba(255, 153, 0, 0.07);
}
.viewbox__name {
position: absolute;
width: 32px;
height: 32px;
z-index: 100;
transform: translate(-50%, -50%);
color: #f6f5f3;
font-style: normal;
line-height: 10px;
background: rgba(5, 5, 5, 0.25);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 400;
border: 2px solid transparent;
white-space: nowrap;
pointer-events: none;
transition: all 0.3s ease;
}
@media screen and (max-width: 767px) {
.viewbox__name {
width: 32px;
height: 32px;
font-size: 10px;
}
}
.viewbox__mask {
cursor: pointer;
z-index: 2;
-webkit-mask-size: contain;
}
.viewbox__mask:after {
position: absolute;
display: inline-block;
content: "";
width: 100%;
height: 100%;
will-change: background;
z-index: 3;
right: 0;
bottom: 0;
left: 0;
top: 0;
}
.viewbox__fill {
position: relative;
width: 150%;
height: 150%;
left: -25%;
top: -25%;
z-index: 1;
pointer-events: none;
transform-style: preserve-3d;
will-change: transform;
image-rendering: -moz-crisp-edges;
/* Firefox */
image-rendering: -o-crisp-edges;
/* Opera */
image-rendering: -webkit-optimize-contrast;
/* Webkit (non-standard naming) */
-ms-interpolation-mode: nearest-neighbor;
/* IE (non-standard property) */
}
.viewbox__fill img {
width: 100%;
height: auto;
}
.viewbox__mask.animate:after {
animation: glow 1s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
.viewbox__mask.select + .viewbox__name {
color: red;
}
.viewbox__mask.select + .viewbox__name::before {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 16px;
line-height: 32px;
z-index: 102;
color: #fff;
transition: all 0.15s ease;
opacity: 1;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.9);
}
.viewbox__mask.select + .viewbox__name::after {
content: "";
/* No content for ::after */
width: 32px;
height: 32px;
background-image: url(https://journal.wallpaperstore.jp/wp/wp-content/uploads/2023/09/check_icon_w.svg);
background-size: cover;
position: absolute;
z-index: 101;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0.9;
}
@-webkit-keyframes rotating {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.viewbox__mask:not(.select):hover + .viewbox__name {
border: 2px solid #f6f5f3;
}
.viewbox__mask + .viewbox__name {
border: none !important;
outline: none !important;
}
@keyframes glow {
0%,
100% {
background: transparent;
}
50% {
background: rgba(172, 172, 172, 0.8);
}
}
.btn-floating {
display: none;
}
@media screen and (max-width: 896px) {
.btn-floating {
display: block;
}
}
.save-simulation__btn-floating {
width: calc(100% - 32px);
height: 44px;
font-weight: 700;
margin: 0px 16px;
position: sticky;
bottom: 32px;
z-index: 8;
}
@media screen and (max-width: 896px) {
.button-PC {
display: none !important;
}
}
@media screen and (min-width: 896px) {
.button-SP {
display: none !important;
}
}
</style>
<script>
const listSuggest = [{"id":"8044460671205","handle":"alku-25133","image_url":"https://cdn.shopify.com/s/files/1/0646/0329/1877/products/FILE_LW_25133.jpg?v=1685614881","wallpaper_url":"https://cdn.shopify.com/s/files/1/0646/0329/1877/files/8044460671205_3b601c9b-ab24-40d6-a341-0c0288ebe05f.webp?v=1685584026","product_repeat_height":64,"product_para_repeat":null,"product_step_size":"","product_placement_type":"ストレート","product_paper_width":70,"product_paper_step":null,"variants":[{"id":"43948239945957","price":"￥3000~","title":"1mサンプル","quantity":0,"tracked":true,"delivery_profile":{"id":"93133242597","name":"Fee shipping","price":"￥100000~"},"allow_selling_when_out_of_stock":false},{"id":"43948239978725","price":"￥100~","title":"A4サンプル","quantity":0,"tracked":true,"delivery_profile":{"id":"93133242597","name":"Fee shipping","price":"￥100000~"},"allow_selling_when_out_of_stock":true},{"id":"44000486490341","price":"￥3000~","title":"ロール","quantity":0,"tracked":true,"delivery_profile":{"id":"89511624933","name":"General Profile","price":"￥81000~"},"allow_selling_when_out_of_stock":true}]}];
function generateJS(listSuggest) {
jQuery(document).ready(async function ($) {
document.querySelector(".simulation").style.display = "none";
let results;
const resultsLivingroom = {
id: 3,
name: "リビング",
key_name: "livingroom",
image_urls: {
room_square:
"https://fresco-content-ld-prod.s3.ap-northeast-1.amazonaws.com/living_room/living-room_square.webp",
floor_shadow:
"https://fresco-content-ld-prod.s3.ap-northeast-1.amazonaws.com/living_room/living-room_floor_shadow.webp",
floor_clipping:
"https://fresco-content-ld-prod.s3.ap-northeast-1.amazonaws.com/living_room/living-room_floor_clipping.webp",
},
surface_informations: [
{
id: 4,
room_id: 3,
surface_id: 3,
surface_type: "Wall",
transform:
"perspective(1000px) rotateZ(0deg) translateX(0px) translateY(25%) translateZ(0px) rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, 0deg)",
transform_origin: "50% 50%",
background_size: null,
clip_path: "polygon(0% 17.5%, 100% 17.5%, 100% 88.5%, 0% 88.5%)",
surface_coordinates: "50% 50%",
height: 240,
width: 340,
width_ratio: "100%",
height_ratio: "71.14%",
},
{
id: 5,
room_id: 3,
surface_id: 1,
surface_type: "Floor",
transform:
"perspective(1000px) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px) rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, 0deg)",
transform_origin: "50% 50%",
background_size: "100%",
clip_path: "polygon(0% 83.5%, 100% 83.5%, 100% 100%, 0% 100%)",
surface_coordinates: "95% 50%",
height: null,
width: null,
width_ratio: null,
height_ratio: null,
},
],
walls: [
{
id: 3,
name: "壁",
key_name: "living_wall",
type: 1,
image_urls: {
wall_shadow:
"https://fresco-content-ld-prod.s3.ap-northeast-1.amazonaws.com/living_room/living-room_wall_shadow.webp",
wall_clipping:
"https://fresco-content-ld-prod.s3.ap-northeast-1.amazonaws.com/living_room/living-room_wall_clipping.webp",
},
},
],
simulation: null,
};
const resultsJapaneseroom = {
id: 7,
name: "和室",
key_name: "japaneseroom",
image_urls: {
room_square:
"https://fresco-content-ld-prod.s3.ap-northeast-1.amazonaws.com/Japanese-style-room/jp_square.webp",
},
surface_informations: [
{
id: 14,
room_id: 7,
surface_id: 9,
surface_type: "Wall",
transform:
"perspective(1000px) rotateZ(0deg) translateX(0%) translateY(22%) translateZ(0px) rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, 0deg)",
transform_origin: "50% 50%",
background_size: null,
clip_path: "polygon(0% 13.2%, 61.2% 13.2%, 61.2% 71.1%, 0% 71.1%)",
surface_coordinates: "39.5% 15%",
height: 240,
width: 255,
width_ratio: "61.5%",
height_ratio: "58.5%",
},
{
id: 15,
room_id: 7,
surface_id: 10,
surface_type: "Wall",
transform:
"perspective(1000px) rotateZ(0.3deg) translateX(-1%) translateY(-7%) translateZ(0px) rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, -59deg)",
transform_origin: "99% 47%",
background_size: null,
clip_path:
"polygon(61.2% 13.2%, 72% 0%, 100% 0%, 100% 100%, 96% 100%, 61.2% 71.1%)",
surface_coordinates: "39.5% 76.5%",
height: 180,
width: 180,
width_ratio: "95%",
height_ratio: "105%",
},
],
walls: [
{
id: 9,
name: "壁1",
key_name: "jp_wall_1",
type: 1,
image_urls: {
wall_shadow:
"https://fresco-content-ld-prod.s3.ap-northeast-1.amazonaws.com/Japanese-style-room/jp_l-wall_shadow.webp",
wall_clipping:
"https://fresco-content-ld-prod.s3.ap-northeast-1.amazonaws.com/Japanese-style-room/jp_l-wall_clipping.webp",
},
},
{
id: 10,
name: "壁２",
key_name: "jp_wall_2",
type: 2,
image_urls: {
wall_shadow:
"https://fresco-content-ld-prod.s3.ap-northeast-1.amazonaws.com/Japanese-style-room/jp_r-wall_shadow.webp",
wall_clipping:
"https://fresco-content-ld-prod.s3.ap-northeast-1.amazonaws.com/Japanese-style-room/jp_r-wall_clipping.webp",
},
},
],
simulation: null,
};
const resultsRestroom = {
id: 5,
name: "トイレ",
key_name: "restroom",
image_urls: {
room_square:
"https://fresco-content-ld-prod.s3.ap-northeast-1.amazonaws.com/toilet/toilet_square.webp",
floor_shadow:
"https://fresco-content-ld-prod.s3.ap-northeast-1.amazonaws.com/toilet/toilet_floor_shadow.webp",
floor_clipping:
"https://fresco-content-ld-prod.s3.ap-northeast-1.amazonaws.com/toilet/toilet_floor_clipping.webp",
},
surface_informations: [
{
id: 10,
room_id: 5,
surface_id: 1,
surface_type: "Floor",
transform:
"perspective(1000px) rotateZ(-25.0deg) translateX(111.1px) translateY(144.1px) translateZ(0px) rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, 0deg)",
transform_origin: "50% 50%",
background_size: "100%",
clip_path: "polygon(68.7% 84%, 100% 92.6%, 100% 100%, 34% 100%)",
surface_coordinates: "95% 60%",
height: null,
width: null,
width_ratio: null,
height_ratio: null,
},
{
id: 8,
room_id: 5,
surface_id: 5,
surface_type: "Wall",
transform:
"perspective(1000px) rotateZ(0deg) translateX(14%) translateY(0px) translateZ(0px) rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, 44deg)",
transform_origin: "100% 50%",
background_size: null,
clip_path: "polygon(0% 0%, 68.7% 0%, 68.7% 84.2%, 0% 115.2%)",
surface_coordinates: "37% 40%",
height: 240,
width: 160,
width_ratio: "60.5%",
height_ratio: "84.5%",
},
{
id: 9,
room_id: 5,
surface_id: 6,
surface_type: "Wall",
transform:
"perspective(1000px) rotateZ(0deg) translateX(155%) translateY(-17.5%) translateZ(0px) rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, -56deg)",
transform_origin: "100% 53%",
background_size: null,
clip_path: "polygon(68.7% 0%, 100% 0%, 100% 92.7%, 68.7% 84.2%)",
surface_coordinates: "37% 84%",
height: 240,
width: 78,
width_ratio: "39.3%",
height_ratio: "112.2%",
},
],
walls: [
{
id: 5,
name: "壁1",
key_name: "toilet_wall_1",
type: 1,
image_urls: {
wall_shadow:
"https://fresco-content-ld-prod.s3.ap-northeast-1.amazonaws.com/toilet/toilet_l-wall_shadow.webp",
wall_clipping:
"https://fresco-content-ld-prod.s3.ap-northeast-1.amazonaws.com/toilet/toilet_l-wall_clipping.webp",
},
},
{
id: 6,
name: "壁２",
key_name: "toilet_wall_2",
type: 2,
image_urls: {
wall_shadow:
"https://fresco-content-ld-prod.s3.ap-northeast-1.amazonaws.com/toilet/toilet_r-wall_shadow.webp",
wall_clipping:
"https://fresco-content-ld-prod.s3.ap-northeast-1.amazonaws.com/toilet/toilet_r-wall_clipping.webp",
},
},
],
simulation: null,
};
const resultsKidroom = {
id: 1,
name: "キッズスペース",
key_name: "kidsroom",
image_urls: {
room_square:
"https://fresco-content-ld-prod.s3.ap-northeast-1.amazonaws.com/kids-space/kids-space_square.webp",
floor_shadow:
"https://fresco-content-ld-prod.s3.ap-northeast-1.amazonaws.com/kids-space/kids-space_floor_shadow.webp",
floor_clipping:
"https://fresco-content-ld-prod.s3.ap-northeast-1.amazonaws.com/kids-space/kids-space_floor_clipping.webp",
},
surface_informations: [
{
id: 1,
room_id: 1,
surface_id: 1,
surface_type: "Wall",
transform:
"perspective(1000px) rotateZ(0deg) translateX(-26.5%) translateY(13%) translateZ(0px) rotate3d(1, 0, 0, -2deg) rotate3d(0, 1, 0, -30deg)",
transform_origin: "67% 89%",
background_size: null,
clip_path: "polygon(13.4% 28.7%, 100% -9%, 100% 96.6%, 13% 82.3%)",
surface_coordinates: "50% 50%",
height: 240,
width: 345,
width_ratio: "143.75%",
height_ratio: "80%",
},
{
id: 2,
room_id: 1,
surface_id: 1,
surface_type: "Floor",
transform:
"perspective(1000px) rotateZ(0deg) translateX(0px) translateY(20.0px) translateZ(-30.0px) rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, -35.5deg)",
transform_origin: "0.0% 50.1%",
background_size: "100%",
clip_path: "polygon(0% 80%, 100% 96.6%, 100% 100%, 0% 100%)",
surface_coordinates: "94% 31%",
height: null,
width: null,
width_ratio: null,
height_ratio: null,
},
],
walls: [
{
id: 1,
name: "壁",
key_name: "kids_space_room_wall",
type: 1,
image_urls: {
wall_shadow:
"https://fresco-content-ld-prod.s3.ap-northeast-1.amazonaws.com/kids-space/kids-space_wall_shadow.webp",
wall_clipping:
"https://fresco-content-ld-prod.s3.ap-northeast-1.amazonaws.com/kids-space/kids-space_wall_clipping.webp",
},
},
],
simulation: null,
};
const isJapaneseroom = document.querySelector(".simulation-japaneseroom");
const isRestroom = document.querySelector(".simulation-restroom");
const isKidroom = document.querySelector(".simulation-kidroom");
if (isJapaneseroom) {
results = resultsJapaneseroom;
} else if (isRestroom) {
results = resultsRestroom;
} else if (isKidroom) {
results = resultsKidroom;
} else {
results = resultsLivingroom;
}
const ANIMATE_TIME = 1000;
const STEP_TYPE = "ステップ";
const WALL_WHITE_ID = "3";
const viewbox = {
response: {},
currentSimulation: {},
lightStatus: 1,
isDisable: true,
isSaveLoading: true,
// detect select wall
isWallSelected: () => !!document.querySelector(".viewbox__mask.select"),
// detect change by compare object
resetCurrentSimulation: () => {
const { id, walls } = JSON.parse(JSON.stringify(viewbox.response));
viewbox.currentSimulation = {
id,
floor: {
id: null,
image: null,
},
walls,
};
},
init: async () => {
// Call API
const response = await viewbox.callAPI();
if (response.errors) {
document.querySelector(".block_breadcrumb").style.display = "none";
document.querySelector(".simulation").style.display = "none";
document.querySelector("#page-error").style.display = "block";
return;
}
// Render scene after api successfully called
viewbox.renderStatic();
viewbox.renderWalls();
viewbox.initHandler();
document.querySelector(".simulation").style.display = "flex";
document.querySelector(".simulation").style.flexDirection = "column";
document
.querySelectorAll(".viewbox__mask")[0]
.classList.add("select");
},
callAPI: async () => {
if (results) {
// const cookie = JSON.parse(getLocalStorage(`currentSimulation-${roomName}`) || '""');
viewbox.response = results || {};
const simulationWalls = results?.simulation?.walls;
let isActive = true;
if (results.simulation)
viewbox.currentSimulation = JSON.parse(
JSON.stringify(results.simulation)
);
// else if (cookie) viewbox.currentSimulation = cookie;
else viewbox.resetCurrentSimulation();
simulationWalls?.forEach((wall) => {
if (wall.is_active === false) {
isActive = false;
}
});
}
return results;
},
renderStatic() {
const { image_urls, simulation } = viewbox.response;
if (!image_urls) return;
const container = document.getElementById("viewbox__scene");
const background = document.createElement("img");
const lightMode = simulation?.light_mode;
background.classList = "viewbox__background";
background.src = image_urls.room_square;
const light = document.createElement("div");
light.classList = "viewbox__light";
light.style.display = "none";
container.appendChild(background);
container.appendChild(light);
const lightIcon = document.querySelector("#light-simulation");
const lightLayer = document.querySelector(".viewbox__light");
if (lightMode === 2) {
lightIcon.checked = true;
lightLayer.style.display = "block";
viewbox.lightStatus = lightMode;
}
},
renderWalls() {
let currentSurfaceInformations = {};
const { surface_informations, simulation } = viewbox.response;
const { walls } = simulation || viewbox.currentSimulation;
if (!walls) return;
const allSurfaceInformations = surface_informations.filter(
(item) => item.surface_type === "Wall"
);
const allWalls = viewbox.response.walls;
walls.forEach((wall, index) => {
const { image_urls } = allWalls.filter(
(el) => el.type === wall.type
)[0];
const { wall_clipping, wall_shadow } = image_urls;
const surfaceInformations = allSurfaceInformations.filter(
(item) => item.surface_id === wall.id
);
if (simulation) {
currentSurfaceInformations = surfaceInformations.map((item) => {
let paperStep = 1;
if (wall.product_placement_type === STEP_TYPE) {
const productRepeat = wall.product_step_size.replace(
STEP_TYPE,
""
);
const repeatParameter = productRepeat.split("/");
paperStep = repeatParameter[1];
}
const bgSize =
paperStep * (wall.product_paper_width / item.width) * 100;
return {
...item,
background_size: `${bgSize}%`,
};
})[0];
} else {
currentSurfaceInformations = surfaceInformations.map((item) => {
return {
...item,
background_size: `${wall.background_size}%`,
};
})[0];
}
viewbox.renderClip(
true,
wall_clipping,
wall_shadow,
currentSurfaceInformations,
wall,
index
);
});
const viewBoxScene = document.getElementById("viewbox__scene");
const fillElementArr = document.querySelectorAll(".viewbox__fill");
function renderPerspective() {
fillElementArr.forEach((el) => {
let transformStyle = el.style.transform.split(" ");
transformStyle[0] = `perspective(${viewBoxScene.offsetWidth}px)`;
el.style.transform = transformStyle.join(" ");
});
}
renderPerspective();
new ResizeObserver(renderPerspective).observe(viewBoxScene);
},
renderClip(
isWall,
clip,
shadow,
surfaceInformations,
simulation,
index
) {
const {
transform,
transform_origin,
clip_path,
surface_type,
surface_coordinates,
background_size,
width_ratio,
height_ratio,
width,
} = surfaceInformations;
const container = document.getElementById("viewbox__scene");
const img = document.createElement("img");
const mask = document.createElement("div");
const fill = document.createElement("div");
const text = document.createElement("div");
const cord = surface_coordinates.split(" ");
const top = cord[0];
const left = cord[1];
const wallpaperUrlSimulation = simulation?.wallpaper_url;
const imageUrlSimulation = simulation?.image_url;
const imageSimulation = simulation?.image;
const urlClip = clip;
fill.classList = "viewbox__fill";
fill.style.transform = transform;
fill.style.transformOrigin = transform_origin;
fill.style.width = width_ratio;
fill.style.height = height_ratio;
fill.style.left = 0;
fill.style.top = 0;
fill.style.backgroundImage = `url(${
wallpaperUrlSimulation ||
imageUrlSimulation ||
imageSimulation ||
""
})`;
fill.style.backgroundSize = simulation
? background_size
: `${simulation.background_size}%`;
document.querySelectorAll(".viewbox__mask").forEach((e, index) => {
document.querySelectorAll(".viewbox__shadow")[index].style.opacity =
viewbox.currentSimulation.floor.id === WALL_WHITE_ID ? 0.7 : 0;
});
img.classList = "viewbox__shadow";
img.src = shadow;
text.classList = "viewbox__name";
text.innerText = isWall ? "壁" : "床";
text.style.top = top;
text.style.left = left;
mask.classList = "viewbox__mask";
mask.style["-webkit-mask-image"] = `url(${urlClip})`;
mask.style.clipPath = clip_path;
mask.setAttribute("data-type", surface_type);
mask.setAttribute("data-index", index);
mask.setAttribute("data-wall-width", width);
mask.setAttribute(
"data-paper-id",
surface_type === "Floor" ? simulation.id : simulation.product_id
);
mask.appendChild(fill);
mask.addEventListener("mouseenter", function (e) {
const target = e.target;
if (!target.classList.contains("animate")) {
target.classList.add("animate");
setTimeout(() => {
target.classList.remove("animate");
}, ANIMATE_TIME);
}
});
container.appendChild(img);
container.appendChild(mask);
container.appendChild(text);
viewbox.handleViewShadow();
},
fillImg(id, url, bgSize) {
const target = document.querySelector(".viewbox__mask.select");
target.setAttribute("data-paper-id", id);
target.firstChild.style.backgroundSize = `${bgSize}%`;
const urlImg = url;
const urlImg450 = url;
if (target.dataset.type === "Wall") {
target.firstChild.style.backgroundImage = `url(${urlImg})`;
} else if (target.dataset.type === "Floor") {
target.firstChild.style.backgroundImage = `url(${urlImg450})`;
}
if (target.dataset.type === "Wall") {
viewbox.currentSimulation.walls[target.dataset.index].product_id =
id;
viewbox.currentSimulation.walls[
target.dataset.index
].wallpaper_url = url;
viewbox.currentSimulation.walls[
target.dataset.index
].background_size = bgSize;
}
viewbox.handleViewShadow();
},
handleViewShadow: () => {
document.querySelectorAll(".viewbox__mask").forEach((e, index) => {
document.querySelectorAll(".viewbox__shadow")[index].style.opacity =
Number(e.dataset.paperId) ? 0.7 : 0;
});
},
initHandler: () => {
const viewBoxScene = document.getElementById("viewbox__scene");
viewBoxScene.onclick = viewbox.selectHandler;
},
selectHandler: (e) => {
const target = e.target;
if (!target.classList.contains("viewbox__mask")) return;
const currentSelect = document.querySelector(".viewbox__mask.select");
const floorSimulation = document.querySelector(".simulation-floor");
const wallSimulation = document.querySelector(".simulation-p2");
const paperId = target.dataset.paperId;
if (currentSelect) currentSelect.classList.remove("select");
target.classList.add("select");
wallSimulation.style.display =
target.dataset.type === "Wall" ? "flex" : "none";
floorSimulation.style.display =
target.dataset.type === "Floor" ? "flex" : "none";
if (currentSelect) currentSelect.classList.remove("select");
if (!target.isSameNode(currentSelect)) target.classList.add("select");
const currentActive = document.querySelectorAll(
".active[data-paper-id]"
);
if (currentActive)
currentActive.forEach((el) => el.classList.remove("active"));
const el = document.querySelectorAll(`[data-paper-id="${paperId}"]`);
el.forEach((e) => {
if (
e.classList.contains("viewbox__mask") ||
target.isSameNode(currentSelect)
)
return;
if (e.parentNode.dataset.slickIndex) e.parentNode.click();
e.classList.add("active");
});
const viewBoxFill = document.querySelectorAll(
".viewbox__mask.select .viewbox__fill"
)[0];
let checkBackgroungImage = viewBoxFill?.style.backgroundImage;
if (checkBackgroungImage && checkBackgroungImage !== 'url("")') {
document
.querySelectorAll(".viewbox__mask.select")[0]
?.nextElementSibling.classList.add("active");
} else {
document
.querySelectorAll(".viewbox__mask.select")[0]
?.nextElementSibling.classList.remove("active");
}
document
.querySelectorAll(".viewbox__mask.select")[0]
?.nextElementSibling.classList.remove("active");
},
};
await viewbox.init();
await renderSuggestSimulation(listSuggest);
await renderSuggestSimulationPC(listSuggest);
async function renderSuggestSimulation(suggest) {
if (!suggest || suggest.length === 0) return;
// Add blank space if remainder larger than 0
const prodPerSlide = 4;
const remainder = suggest.length % prodPerSlide;
if (remainder)
for (let i = 0; i < prodPerSlide - remainder; i++) suggest.push(null);
let container = document.querySelector(".simulation-suggest__slide");
let fragment = document.createDocumentFragment();
suggest.forEach((data) => {
let item = getItem(data);
fragment.appendChild(item);
});
container.insertBefore(fragment, container.firstChild);
await initSuggestSlickSlider(suggest.length === 4);
}
async function renderSuggestSimulationPC(suggest) {
let container2 = document.querySelector(".simulation-suggest__pc");
let fragment = document.createDocumentFragment();
suggest.forEach((data) => {
let item = getItem(data);
fragment.appendChild(item);
});
container2.insertBefore(fragment, container2.firstChild);
}
function initSuggestSlickSlider(isControlRender) {
$("#simulation-suggest .simulation-suggest__slide")
.on("init", function (event, slick) {
document
.querySelector(".simulation-suggest__slide")
.addEventListener("click", (e) => {
const target = e.target;
if (target.classList.contains("active")) return;
const index = target.classList.contains("slick-slide")
? target.dataset.slickIndex
: target.parentNode.dataset.slickIndex;
if (index >= 0) slick.slickGoTo(index);
if (target.classList.contains("slick-slide")) {
const slides = document.querySelectorAll(".slick-slide");
slides.forEach((slide) => slide.classList.remove("active"));
target.classList.add("active");
}
});
if (isControlRender) {
// Render dot
const wrapper = document.querySelector(
".simulation-suggest__dots"
);
wrapper.setAttribute("role", "tablist");
const list = document.createElement("ul");
list.classList = "slick-dots";
list.setAttribute("role", "tablist");
const item = document.createElement("li");
item.classList = "slick-active";
item.setAttribute("aria-hidden", "false");
item.setAttribute("aria-selected", "true");
item.setAttribute("aria-controls", "navigation00");
item.setAttribute("role", "presentation");
item.setAttribute("id", "slick-slide00");
const button = document.createElement("button");
button.setAttribute("type", "button");
button.setAttribute("data-role", "none");
button.setAttribute("role", "button");
button.setAttribute("tabindex", "0");
button.innerText = "1";
item.append(button);
// list.append(item);
wrapper.append(list);
// Show arrows
const arrows = document.querySelectorAll(".slick-arrow");
arrows.forEach((arrow) => {
arrow.classList.remove("slick-hidden");
});
}
})
.slick({
infinite: false,
slidesToShow: 4,
slidesToScroll: 4,
dots: true,
arrows: true,
appendDots: $(".simulation-suggest__dots"),
prevArrow: $(".simulation-suggest__prev"),
nextArrow: $(".simulation-suggest__next"),
});
$("#simulation-suggest").css("opacity", 1);
$("#simulation-suggest")[0].classList.remove("empty");
}
function getItem(data) {
let wrapper = document.createElement("div");
if (!data) return wrapper;
wrapper.className = "simulation-suggest__wrapper--image";
let inner = document.createElement("div");
let paperStep = 1;
if (data.product_placement_type === STEP_TYPE) {
const productRepeat = data.product_step_size.replace(STEP_TYPE, "");
const repeatParameter = productRepeat.split("/");
paperStep = repeatParameter[1];
}
inner.setAttribute("data-paper-id", data.id);
inner.setAttribute("data-handle", data.handle);
inner.setAttribute(
"data-paper-url",
data.wallpaper_url || data.image_url
);
inner.setAttribute("data-paper-width", data.product_paper_width);
inner.setAttribute(
"data-paper-step",
data.product_paper_step || paperStep
);
inner.classList = "simulation-suggest__wrapper--inner is-loading";
const defaultSelectedProductId = document
.querySelectorAll(".viewbox__mask.select")[0]
?.getAttribute("data-paper-id");
if (data.id === defaultSelectedProductId) {
inner.classList.add("active");
}
let img = document.createElement("img");
img.src = data.image_url;
img.alt = `log ${data.id}`;
inner.append(img);
wrapper.append(inner);
return wrapper;
}
document
.querySelector(".simulation-p2")
.addEventListener("click", (e) => {
if (e.target.classList.contains("active")) return;
const MAX_HISTORY_RECORDS = 40;
const PROD_PER_SLIDE = 4;
if (!viewbox.isWallSelected()) return;
const paperId =
e.target?.dataset?.paperId ||
e.target?.parentElement?.dataset?.paperId;
const handle =
e.target?.dataset?.handle ||
e.target?.parentElement?.dataset?.handle;
const paperURL =
e.target?.dataset?.paperUrl ||
e.target?.parentElement?.dataset?.paperUrl;
const paperWidth =
e.target?.dataset?.paperWidth ||
e.target?.parentElement?.dataset?.paperWidth;
const price =
e.target?.dataset?.price || e.target?.parentElement?.dataset?.price;
const paperStep =
e.target?.dataset?.paperStep ||
e.target?.parentElement?.dataset?.paperStep;
const wallWidth = document
.querySelector(".viewbox__mask.select")
.getAttribute("data-wall-width");
const bgSize = paperStep * (paperWidth / wallWidth) * 100;
const dataSizeDefault = e.target.dataset.sizeDefault;
if (!paperId) return;
function getSlide(isEmpty) {
const slide = document.createElement("div");
const slideInner = document.createElement("div");
const slideImg = document.createElement("img");
if (isEmpty) return slide;
slideImg.src =
e.target?.firstChild?.childNodes[1].src ||
e.target?.parentElement?.firstChild.childNodes?.[1]?.src;
slideImg.alt = `log ${paperId}`;
slideInner.classList =
"simulation-suggest__wrapper--inner is-loading";
slideInner.setAttribute("data-paper-id", paperId);
slideInner.setAttribute("data-handle", handle);
slideInner.setAttribute("data-paper-url", paperURL);
slideInner.setAttribute("data-paper-width", paperWidth);
slideInner.setAttribute("data-price", price);
slideInner.setAttribute("data-paper-step", paperStep);
slideInner.append(slideImg);
slide.classList = "simulation-suggest__wrapper--image active";
slide.setAttribute("data-size-default", dataSizeDefault);
slide.append(slideInner);
return slide;
}
// Prevent click suggest to add suggest
if (
!e.target.classList.contains("simulation-suggest__wrapper--inner")
) {
const isSuggestEmpty = document.getElementsByClassName(
"simulation-suggest empty"
).length;
// Init suggest if not shown
if (isSuggestEmpty) {
renderSuggestSimulation([
{
id: paperId,
handle: handle,
price: price,
image_url:
e.target?.firstChild?.childNodes?.[1]?.src ||
e.target?.parentElement?.firstChild?.childNodes?.[1]?.src,
wallpaper_url: paperURL,
product_paper_width: paperWidth,
product_paper_step: paperStep,
product_repeat_height: null,
product_placement_type: null,
product_step_size: null,
product_para_repeat: null,
product_roll_size: null,
},
]);
}
const loadingSlide = document.querySelector(
".simulation-suggest__wrapper--inner.is-loading"
);
if (loadingSlide) loadingSlide.classList.remove("is-loading");
const slider = $(".simulation-suggest__slide");
const dup = document.querySelector(
`.simulation-suggest__wrapper--image .simulation-suggest__wrapper--inner[data-paper-id="${paperId}"]`
);
// If duplicate exists, move it to the top
if (dup) {
dup.classList.remove("active");
const dupIndex = parseInt(dup.parentNode.dataset.slickIndex);
// If duplicate is the first item, do nothing; otherwise, duplicate
if (dupIndex) {
slider.slick("slickRemove", dupIndex);
slider.slick("slickAdd", getSlide(), null, true);
slider.slick("slickGoTo", 0);
slider.slick("refresh");
}
} else {
const allSlides =
document.querySelector(".slick-track").childNodes.length;
const allActiveSlides = document.querySelectorAll(
".simulation-suggest__wrapper--image"
).length;
const remainder = allActiveSlides % PROD_PER_SLIDE;
// If suggest reaches the records limit, remove the last one
if (allActiveSlides === MAX_HISTORY_RECORDS || remainder !== 0) {
slider.slick("slickRemove", allSlides - 1);
} else {
// Add placeholder slides
for (let i = 0; i < 3; i++)
slider.slick("slickAdd", getSlide(true), allSlides + i - 1);
}
slider.slick("slickAdd", getSlide(), null, true);
slider.slick("slickGoTo", 0);
slider.slick("refresh");
}
}
const activePapers = document.querySelectorAll(
".simulation-p2 .active"
);
activePapers.forEach((paper) => paper.classList.remove("active"));
const papers = document.querySelectorAll(
`[data-paper-id="${paperId}"]`
);
papers.forEach((paper) => {
// Scroll to active slick
if (paper.parentNode.dataset.slickIndex) paper.parentNode.click();
paper.classList.add("active");
});
document
.querySelectorAll(".viewbox__mask.select")[0]
?.nextElementSibling.classList.add("active");
viewbox.fillImg(paperId, paperURL || "", bgSize);
});
});
};
generateJS(listSuggest);
</script>
