1document.addEventListener("DOMContentLoaded", function () { 2 console.log("dom loaded"); 3 4 snapStart(); 5}); 6 7/* eslint-disable no-undef */ 8 9function extractProductNoFromURL(url) { 10 // URLì '/' 문ìë¡ ë¶í 11 const parts = url.split("/"); 12 13 // 'product' ë¤ìì ì¤ë ë ë²ì§¸ ì«ì ë¶ë¶ì ì°¾ì 14 let productIndex = parts.indexOf("product"); 15 if (productIndex !== -1 && parts.length > productIndex + 2) { 16 const potentialProductNo = parts[productIndex + 2]; 17 if (/^\d+$/.test(potentialProductNo)) { 18 return potentialProductNo; 19 } 20 } 21 22 // ìí ë²í¸ë¥¼ ì°¾ì§ ëª»í ê²½ì° 23 return null; 24} 25 26function getProductId() { 27 const metaTag = document.querySelector('meta[property="product:productId"]'); 28 return metaTag ? metaTag.getAttribute("content") : null; 29} 30 31function snapStart() { 32 let snap_mall_id = ""; 33 let snap_product_id = ""; 34 35 if (typeof CAFE24 !== "undefined") { 36 snap_mall_id = CAFE24?.SHOP?.getMallID(); 37 } 38 39 const fullURL = window.location.href; 40 snap_product_id = extractProductNoFromURL(fullURL); 41 42 if (snap_product_id == null) { 43 //urlìì product_noê° ê°ì ¸ì¤ê¸° 44 const url_full = new URL(fullURL); 45 const searchParams = new URLSearchParams(url_full.search); 46 snap_product_id = searchParams.get("product_no"); 47 } 48 49 if (snap_product_id == null) { 50 snap_product_id = getProductId(); 51 } 52 53 let snap_class_name = document.getElementById("app-3cuniverse-snap"); 54 const hasSnapClass = snap_class_name.querySelector(".snap_wrap") !== null; 55 if (hasSnapClass) { 56 return; 57 } 58 59 let is_snap_auto_Running = 0; 60 let snap_swiper = null; 61 62 function loadExternalResources() { 63 const resources = [ 64 { type: "script", src: "https://snapbox.ai/swiper.js" }, 65 { type: "link", href: "https://snapbox.ai/swiper.css" }, 66 { type: "link", href: "https://snapbox.ai/snap.css" }, 67 ]; 68 69 resources.forEach((resource) => { 70 const element = document.createElement(resource.type); 71 if (resource.type === "script") { 72 element.src = resource.src; 73 } else { 74 element.href = resource.href; 75 element.rel = "stylesheet"; 76 element.type = "text/css"; 77 } 78 document.querySelector("head").appendChild(element); 79 }); 80 } 81 82 if (snap_class_name != null) { 83 loadExternalResources(); 84 85 const snap_classes = snap_class_name.classList; 86 let snap_code = ""; 87 let snap_product_code = ""; 88 89 snap_classes.forEach((element) => { 90 if (element.includes("code_")) { 91 snap_code = element.replace("code_", ""); 92 } 93 if (element.includes("product_")) { 94 snap_product_code = snap_product_id; 95 } 96 }); 97 98 let snap_location = window.location; 99 let hostname = snap_location.hostname; 100 if (hostname.includes("diamondlayla.com")) { 101 console.log("dia"); 102 let styleSheet = document.createElement("style"); 103 styleSheet.type = "text/css"; 104 styleSheet.innerText = ` 105 .swiper-button-next::after, 106 .swiper-button-prev::after { 107 display: none; 108 } 109 `; 110 document.head.appendChild(styleSheet); 111 112 // Apply styles to swiper buttons 113 const swiperButtonPrev = document.querySelectorAll( 114 ".swiper-button-prev, .swiper-rtl .swiper-button-next" 115 ); 116 const swiperButtonNext = document.querySelectorAll( 117 ".swiper-button-next, .swiper-rtl .swiper-button-prev" 118 ); 119 120 swiperButtonPrev.forEach(function (button) { 121 button.style.left = "0"; 122 button.style.position = "absolute"; 123 }); 124 125 swiperButtonNext.forEach(function (button) { 126 button.style.right = "0"; 127 button.style.position = "absolute"; 128 }); 129 } 130 131 let snapPhotos = []; 132 let snapArchivePhotos = []; 133 134 let snap_original_height = 0; 135 136 let scrollY = 0; 137 let body_original_height = ""; 138 139 let preload_img = null; 140 141 let snap_check_is_main = 0; 142 let snap_check_archive = 0; 143 144 let snap_setting = null; 145 let main_snap = null; 146 let snap_brand_name = ""; 147 let snap_is_connected = 0; 148 let is_snap_scrolling = false; 149 150 let snap_copy_items = null; 151 152 let snap_auto_interval_id; 153 154 let is_snap_auto_scroll = 0; 155 let is_first_auto_scroll = true; 156 157 let is_mobile = window.innerWidth < 720; 158 159 const snapbox_m_header = document.getElementById("m_header") ?? 0; 160 const snapbox_naver_pay = document.querySelectorAll(".naverpay") ?? 0; 161 const snapbox_header_wrap_outer = 162 document.getElementById("header_wrap_outer") ?? 0; 163 // let snapbox_channel_talk = 0; 164 165 const hideTopMenuWhenPopup = () => { 166 if (snapbox_m_header) { 167 snapbox_m_header.style.visibility = "hidden"; 168 } 169 if (snapbox_naver_pay) { 170 snapbox_naver_pay.forEach((element) => { 171 element.style.visibility = "hidden"; 172 }); 173 } 174 if (snapbox_header_wrap_outer) { 175 snapbox_header_wrap_outer.style.visibility = "hidden"; 176 } 177 }; 178 179 const showTopMenuWhenPopup = () => { 180 if (snapbox_m_header) { 181 snapbox_m_header.style.visibility = "visible"; 182 } 183 if (snapbox_naver_pay) { 184 snapbox_naver_pay.forEach((element) => { 185 element.style.visibility = "visible"; 186 }); 187 } 188 if (snapbox_header_wrap_outer) { 189 snapbox_header_wrap_outer.style.visibility = "visible"; 190 } 191 }; 192 193 const photoCancel = () => { 194 if (snap_check_is_main == 1 && is_snap_auto_scroll == 1) { 195 autoScroll(100); 196 } 197 198 showTopMenuWhenPopup(); 199 200 let snap_extend = document.getElementsByClassName("snap_extend")[0]; 201 if (snap_extend.style.display == "flex") { 202 snap_extend.style.display = "none"; 203 204 muteAllSlide(); 205 206 document 207 .getElementsByTagName("body")[0] 208 .style.removeProperty("overflow"); 209 if (body_original_height) { 210 document.getElementsByTagName("body")[0].style.height = 211 body_original_height; 212 } else { 213 document 214 .getElementsByTagName("body")[0] 215 .style.removeProperty("height"); 216 } 217 window.scrollTo(0, scrollY); 218 } 219 }; 220 221 function autoScroll(speed) { 222 if (is_snap_auto_Running == 0) { 223 is_snap_auto_Running = 1; 224 snap_auto_interval_id = setInterval(() => { 225 // console.log("auto scroll"); 226 const scrollableDiv = document.querySelector(".snap_main_slide"); 227 scrollableDiv.style.scrollBehavior = "smooth"; 228 const snap_slide = document.getElementsByClassName("snap_main_slide"); 229 const snap_feed = document.querySelector(".snap_main_feed"); 230 231 let width = 0; 232 if (is_mobile == false) { 233 // width = snap_feed.offsetWidth + 15.5; 234 width = snap_feed.getBoundingClientRect().width + 16; 235 // console.log(width); 236 } else { 237 if (is_first_auto_scroll) { 238 let main_left_mobile = main_snap.main_left_mobile; 239 if (main_left_mobile == 0 || main_left_mobile == null) { 240 main_left_mobile = 15; 241 } 242 width = 243 snap_feed.getBoundingClientRect().width + 10 + main_left_mobile; 244 245 is_first_auto_scroll = false;
246 } else { 247 width = snap_feed.getBoundingClientRect().width + 10; 248 } 249 } 250 251 snap_slide[0].scrollLeft += width; 252 }, 2000); 253 } 254 } 255 256 async function doesURLExist(url) { 257 return fetch(url, { 258 method: "HEAD", // 리ìì¤ì í¤ëë§ ê°ì ¸ì´ 259 mode: "no-cors", // CORS ì ì± ì 무ì (ì´ ìµì ì ì¬ì©íë©´ ìëµ ìíë§ íì¸ ê°ë¥) 260 }) 261 .then((response) => { 262 // console.log(response); 263 if (response.type) { 264 return true; // URLì´ ì¡´ì¬ 265 } else { 266 return false; // URLì´ ì¡´ì¬íì§ ìê±°ë ë¤ë¥¸ ì¤ë¥ ìí ì½ë ë°í 267 } 268 }) 269 .catch((error) => { 270 return false; // ë¤í¸ìí¬ ì¤ë¥ ëë ìì² ìì²´ì ì¤ë¥ 271 }); 272 } 273 274 function playCurrentSlide() { 275 setTimeout(() => { 276 muteAllSlide(); 277 const videos = document.querySelectorAll(".snapbox_extend_video"); 278 if (!videos[snap_swiper.activeIndex]) return; 279 280 const currentVideo = videos[snap_swiper.activeIndex]; 281 const slidePhotos = snapPhotos[snap_swiper.activeIndex]; 282 const currentIndex = slidePhotos.current_index; 283 284 if (slidePhotos.photos[currentIndex]?.is_video === 1) { 285 // if (!currentVideo.paused) { 286 currentVideo.muted = false; 287 currentVideo.play(); 288 // } 289 } 290 }, 100); 291 } 292 293 function muteAllSlide() { 294 const videos = document.querySelectorAll(".snapbox_extend_video"); 295 videos.forEach((video) => { 296 video.muted = true; 297 if (!video.paused) { 298 video.pause(); 299 } 300 }); 301 } 302 303 function saveClickLogs(snap_photo_id) { 304 fetch( 305 "https://api.snapbox.ai/api/v1/snaps/clicks" + 306 // "http://localhost:8000/api/v1/snaps/clicks" + 307 "?" + 308 new URLSearchParams({ 309 code: snap_code, 310 product: snap_product_code, 311 cafe24: snap_mall_id, 312 url: window.location.href, 313 snap_photo_id: snap_photo_id, 314 }) 315 ); 316 } 317 318 // ì í¸ë¦¬í° í¨ìë¤ 319 const createElementWithClass = (tag, className) => { 320 const element = document.createElement(tag); 321 if (className) element.classList.add(className); 322 return element; 323 }; 324 325 const createVideoElement = (source, options = {}) => { 326 const video = createElementWithClass("video"); 327 const sourceEl = document.createElement("source"); 328 sourceEl.src = source; 329 sourceEl.type = "video/mp4"; 330 331 video.setAttribute("playsinline", ""); 332 video.setAttribute("webkit-playsinline", ""); 333 video.preload = "auto"; 334 video.autoplay = true; 335 video.muted = true; 336 video.loop = true; 337 video.style.width = "100%"; 338 video.style.height = "100%"; 339 video.style.objectFit = "cover"; 340 341 if (options.isExtended) { 342 video.style.position = "relative"; 343 video.style.aspectRatio = "10/16"; 344 video.classList.add("snapbox_extend_video"); 345 } else { 346 video.classList.add("snapbox_video_player"); 347 } 348 349 video.appendChild(sourceEl); 350 return video; 351 }; 352 353 let photoClick = (index) => { 354 const snap_photo_id = snapPhotos[index]?.id ?? 0; 355 if (snap_photo_id > 0) { 356 saveClickLogs(snap_photo_id); 357 } 358 359 if (snap_check_is_main == 1 && is_snap_auto_scroll == 1) { 360 is_snap_auto_Running = 0; 361 clearInterval(snap_auto_interval_id); 362 } 363 364 if (snap_check_is_main == 1 && main_snap.main_type == "link") { 365 doesURLExist(snapPhotos[index].link).then((exists) => { 366 if (exists) { 367 location.href = snapPhotos[index].link; 368 } 369 }); 370 } else { 371 if (is_snap_scrolling == false) { 372 if (snap_swiper == null) { 373 loadSnapSwipe(); 374 } 375 376 try { 377 snap_swiper.slideTo(index); 378 379 preload_img = new Image(); 380 preload_img.src = snapPhotos[snap_swiper.activeIndex].photos[1] 381 ? snapPhotos[snap_swiper.activeIndex].photos[1].photo 382 : ""; 383 384 scrollY = window.scrollY; 385 386 let snap_extend = document.getElementsByClassName("snap_extend")[0]; 387 388 hideTopMenuWhenPopup(); 389 390 snap_extend.style.display = "flex"; 391 body_original_height = 392 document.getElementsByTagName("body")[0].style.height; 393 document.getElementsByTagName("body")[0].style.overflow = "hidden"; 394 document.getElementsByTagName("body")[0].style.height = "100%"; 395 } catch (err) { 396 // console.log("photoClick error", err); 397 } 398 } 399 } 400 401 playCurrentSlide(); 402 }; 403 404 let verticalPhotoClick = (index) => { 405 if (snap_swiper == null) { 406 loadSnapSwipe(); 407 } 408
409 try { 410 const snap_photo_id = snapPhotos[index]?.id ?? 0; 411 if (snap_photo_id > 0) { 412 saveClickLogs(snap_photo_id); 413 } 414 snap_swiper.slideTo(index); 415 416 preload_img = new Image(); 417 preload_img.src = snapPhotos[snap_swiper.activeIndex].photos[1] 418 ? snapPhotos[snap_swiper.activeIndex].photos[1].photo 419 : ""; 420 421 scrollY = window.scrollY; 422 423 let snap_extend = document.getElementsByClassName("snap_extend")[0]; 424 425 snap_extend.style.display = "flex"; 426 427 //íì ì´ ì´ë¦´ ë ìë¨ ë©ë´ ì¨ê¸°ê¸° 428 hideTopMenuWhenPopup(); 429 430 body_original_height = 431 document.getElementsByTagName("body")[0].style.height; 432 document.getElementsByTagName("body")[0].style.overflow = "hidden"; 433 document.getElementsByTagName("body")[0].style.height = "100%"; 434 } catch (err) { 435 console.log("verticalPhotoClick error", err); 436 } 437 playCurrentSlide(); 438 }; 439 440 const openSnapboxPhoto = () => { 441 // ì¤íí ì½ë 442 const url = new URL(window.location.href); 443 const urlParams = url.searchParams; 444 const snapbox_photo_id = urlParams.get("snapbox_photo_id"); 445 446 if (snapbox_photo_id) { 447 let attempt = 0; // ìë íì를 ì ì¥í ë³ì 448 const maxAttempts = 5; // ìµë ìë íì 449 450 const intervalId = setInterval(() => { 451 attempt++; 452 console.log(`attempt ${attempt}`); 453 454 if (snapPhotos.length > 0) { 455 snapPhotos.forEach((photo, index) => { 456 if (photo.id == snapbox_photo_id) { 457 photoClick(index); 458 clearInterval(intervalId); 459 } 460 }); 461 } 462 463 // ìµë ìë íìì ëë¬íë©´ ì¤ì§ 464 if (attempt >= maxAttempts) { 465 clearInterval(intervalId); 466 console.log("timer ìë£"); 467 } 468 }, 1000); 469 } 470 }; 471 472 const loadContents = () => { 473 if (snap_check_is_main == 1) { 474 try { 475 const snap_wrap = document.createElement("div"); 476 snap_wrap.classList.add("snap_main_wrap"); 477 478 const snap_title = document.createElement("div"); 479 snap_title.classList.add("snap_main_title"); 480 481 const title_img = document.createElement("img"); 482 if (is_mobile == false) { 483 title_img.src = "https://snapbox.ai/logo_brandsnap_m.png"; 484 } else { 485 title_img.src = "https://snapbox.ai/logo_brandsnap_m_m.png"; 486 } 487 snap_title.appendChild(title_img); 488 489 snap_wrap.appendChild(snap_title); 490 491 if (main_snap) { 492 is_snap_auto_scroll = main_snap.main_auto_scroll; 493 if (is_mobile == false) { 494 let snap_main_width = main_snap.main_width 495 ? main_snap.main_width 496 : 1000; 497 498 let snap_width_type = main_snap.main_width_type 499 ? main_snap.main_width_type 500 : "px"; 501 let snap_max_width = snap_main_width + snap_width_type; 502 snap_wrap.style.maxWidth = snap_max_width; 503 504 if (main_snap.main_align == "left") { 505 snap_wrap.style.margin = "0"; 506 } else { 507 snap_wrap.style.margin = "0 auto"; 508 } 509 } 510 } 511 512 if (main_snap) { 513 if (is_mobile == false) { 514 if (main_snap.main_title_pc_unuse == 0) { 515 if (main_snap.main_title_pc != "https://www.snapbox.ai/") { 516 title_img.src = main_snap.main_title_pc; 517 } else { 518 snap_wrap.removeChild(snap_title); 519 } 520 if (main_snap.main_title_width_pc) { 521 title_img.style.width = main_snap.main_title_width_pc + "px"; 522 } 523 } 524 } else { 525 snap_title.style.marginLeft = main_snap.main_left_mobile 526 ? main_snap.main_left_mobile + "px" 527 : 15 + "px"; 528 529 if (main_snap.main_title_mobile_unuse == 0) { 530 if (main_snap.main_title_mobile != "https://www.snapbox.ai/") { 531 title_img.src = main_snap.main_title_mobile; 532 } else { 533 snap_wrap.removeChild(snap_title); 534 } 535 536 if (main_snap.main_title_width_mobile) { 537 title_img.style.width = 538 main_snap.main_title_width_mobile + "px"; 539 } 540 } 541 } 542 } 543 544 const snap_slide = document.createElement("div"); 545 snap_slide.classList.add("snap_main_slide"); 546 547 snapPhotos.forEach((photo, p_index) => { 548 photo.current_index = 0; 549 const snap_feed = document.createElement("div"); 550 snap_feed.classList.add("snap_main_feed"); 551 snap_feed.style.position = "relative"; 552 553 const href = document.createElement("a"); 554 href.classList.add("snap_feed_a"); 555 556 if (main_snap) { 557 if (is_mobile == false) { 558 snap_feed.style.height = main_snap.main_height 559 ? main_snap.main_height + "px" 560 : "420px"; 561 } else { 562 if (main_snap.main_height_mobile) { 563 snap_feed.style.height = main_snap.main_height_mobile + "px"; 564 } 565 } 566 if (is_mobile == false) { 567 let radius = main_snap.main_radius ?? 0;
568 href.style.borderRadius = radius + "px"; 569 } else { 570 let radius_mobile = main_snap.main_radius_mobile ?? 0; 571 href.style.borderRadius = radius_mobile + "px"; 572 } 573 574 if (is_mobile) { 575 if (p_index == 0) { 576 snap_feed.style.marginLeft = main_snap.main_left_mobile 577 ? main_snap.main_left_mobile + "px" 578 : 15 + "px"; 579 } 580 } 581 } 582 583 href.onclick = function () { 584 //console.log("parent clicked"); 585 photoClick(p_index); 586 }; 587 588 const img = document.createElement("img"); 589 590 img.src = photo.photos[0].photo; 591 592 const is_video = photo.photos[0].is_video; 593 594 const title_pc = photo.title_pc; 595 const title_mobile = photo.title_mobile; 596 const option_pc = photo.option_pc?.trim(); 597 const option_mobile = photo.option_mobile?.trim(); 598 const option_s_pc = photo.option_s_pc?.trim(); 599 const option_s_mobile = photo.option_s_mobile?.trim(); 600 const check_pc_option = photo.check_pc_option; 601 602 const div_info = document.createElement("div"); 603 div_info.classList.add("snapai_info"); 604 605 const div_title = document.createElement("div"); 606 div_title.classList.add("snapai_option_title"); 607 608 const div_option01 = document.createElement("div"); 609 div_option01.classList.add("snapai_option01"); 610 611 const div_option02 = document.createElement("div"); 612 div_option02.classList.add("snapai_option02"); 613 614 if (check_pc_option == 1) { 615 if (is_mobile == false) { 616 div_title.textContent = title_pc; 617 div_option01.textContent = option_pc; 618 div_option02.textContent = option_s_pc; 619 } else { 620 div_title.textContent = title_mobile; 621 div_option01.textContent = option_mobile; 622 div_option02.textContent = option_s_mobile; 623 } 624 } else { 625 div_title.textContent = title_mobile; 626 div_option01.textContent = option_mobile; 627 div_option02.textContent = option_s_mobile; 628 } 629
630 if (title_mobile || (check_pc_option == 1 && title_pc)) { 631 div_info.appendChild(div_title); 632 } 633 634 if (option_mobile || (check_pc_option == 1 && option_pc)) { 635 let checkNoReturn = title_pc?.includes("\n"); 636 if (checkNoReturn) { 637 div_title.classList.add("two_lines"); 638 } 639 div_info.appendChild(div_option01); 640 641 // div_title.classList.add("hidden"); 642 } 643 644 if (option_s_mobile || (check_pc_option == 1 && option_s_pc)) { 645 div_info.appendChild(div_option02); 646 } 647 648 const snap_photo_bg = document.createElement("div"); 649 snap_photo_bg.classList.add("bg_gra"); 650 651 if (is_video === 1) { 652 const video = document.createElement("video"); 653 const source = document.createElement("source"); 654 source.src = photo.photos[0].photo; 655 source.type = "video/mp4"; 656 657 video.setAttribute("playsinline", ""); 658 video.setAttribute("webkit-playsinline", ""); 659 660 video.preload = "auto"; 661 video.autoplay = true; 662 video.muted = true; 663 video.style.width = "100%"; 664 video.style.height = "100%"; 665 video.style.objectFit = "cover"; 666 667 video.classList.add("snapbox_video_player"); 668 669 video.appendChild(source); 670 671 href.appendChild(video); 672 } else { 673 href.appendChild(img); 674 }
675 href.appendChild(snap_photo_bg); 676 href.appendChild(div_info); 677 snap_feed.appendChild(href); 678 snap_slide.appendChild(snap_feed); 679 }); 680 681 snap_wrap.appendChild(snap_slide); 682 683 const snap_link = document.createElement("div"); 684 snap_link.classList.add("snap_link"); 685 686 const snap_link_a = document.createElement("a"); 687 if (snap_brand_name && snap_is_connected == 1) { 688 snap_link_a.href = 689 "https://snapbox.ai/" + snap_brand_name + "_official"; 690 } else { 691 if (snap_check_is_main == 0) { 692 snap_link_a.href = "https://snapbox.ai"; 693 } 694 } 695 696 snap_link_a.target = "_blank"; 697 snap_link_a.textContent = "SNAP"; 698 699 snap_link.appendChild(snap_link_a); 700 snap_wrap.appendChild(snap_link); 701 702 const snap_arrow = document.createElement("div"); 703 snap_arrow.classList.add("snap_main_arrow"); 704 const snap_before = document.createElement("button"); 705 snap_before.classList.add("snap_main_before"); 706 snap_before.addEventListener("click", snapMainBefore); 707 const chevron_left = document.createElement("span"); 708 chevron_left.classList.add("material-symbols-outlined"); 709 chevron_left.textContent = "chevron_left"; 710 711 const snap_next = document.createElement("button"); 712 snap_next.classList.add("snap_main_next"); 713 snap_next.addEventListener("click", snapMainNext); 714 const navigate_next = document.createElement("span"); 715 navigate_next.classList.add("material-symbols-outlined"); 716 navigate_next.textContent = "navigate_next"; 717 718 snap_before.appendChild(chevron_left); 719 snap_arrow.appendChild(snap_before); 720 721 snap_next.appendChild(navigate_next); 722 snap_arrow.appendChild(snap_next); 723 724 snap_wrap.appendChild(snap_arrow); 725 document.getElementById("app-3cuniverse-snap").appendChild(snap_wrap); 726 727 const snap_extend = document.createElement("div"); 728 snap_extend.classList.add("snap_extend"); 729 snap_extend.style.display = "none"; 730 const snap_extend_child = document.createElement("div"); 731 snap_extend_child.classList.add("img_slide"); 732 // snap_extend_child.addEventListener('click', photoCancel) 733 const extend_button_div = document.createElement("div"); 734 extend_button_div.classList.add("button"); 735 extend_button_div.setAttribute("id", "snap_close_button"); 736 const extend_button = document.createElement("button"); 737 const snap_extend_span = document.createElement("span"); 738 snap_extend_span.classList.add("material-symbols-outlined"); 739 snap_extend_span.textContent = "close"; 740 741 snap_extend_span.addEventListener("click", photoCancel); 742 743 extend_button.appendChild(snap_extend_span); 744 extend_button_div.appendChild(extend_button); 745 snap_extend_child.appendChild(extend_button_div); 746 747 const button_slide = document.createElement("div"); 748 button_slide.classList.add("button_slide"); 749 750 const button_slide_left = document.createElement("button"); 751 const button_slide_right = document.createElement("button"); 752 753 button_slide_left.addEventListener("click", popupLeft); 754 button_slide_right.addEventListener("click", popupRight); 755 756 const button_left_span = document.createElement("span"); 757 button_left_span.classList.add("material-symbols-outlined"); 758 button_left_span.textContent = "chevron_left"; 759 760 const button_right_span = document.createElement("span"); 761 button_right_span.classList.add("material-symbols-outlined"); 762 button_right_span.textContent = "navigate_next"; 763 764 snap_extend.appendChild(button_slide); 765 button_slide.appendChild(button_slide_left); 766 button_slide.appendChild(button_slide_right); 767 button_slide_left.appendChild(button_left_span); 768 button_slide_right.appendChild(button_right_span); 769 770 const swiper_div = document.createElement("div"); 771 swiper_div.classList.add("swiper"); 772 swiper_div.classList.add("swiper-container"); 773
774 swiper_div.setAttribute("id", "snapSwiper"); 775 776 const swiper_wrapper_div = document.createElement("div"); 777 swiper_wrapper_div.classList.add("swiper-wrapper"); 778 779 let index = 0; 780 snapPhotos.forEach((snap_photos) => { 781 const swiper_slide_div = document.createElement("div"); 782 swiper_slide_div.classList.add("swiper-slide"); 783 784 const extend_photo_div = document.createElement("div"); 785 extend_photo_div.classList.add("snap_photo"); 786 787 const contentsCheckbox = document.createElement("input"); 788 contentsCheckbox.type = "checkbox"; 789 contentsCheckbox.classList.add("snap_extend_txt"); 790 contentsCheckbox.id = "contents" + index; 791 792 var checkboxLabel = document.createElement("label"); 793 checkboxLabel.htmlFor = "contents" + index; 794 checkboxLabel.classList.add("snap_extend_info"); 795 796 index++; 797 798 const option_pc = snap_photos.option_pc?.trim(); 799 const option_mobile = snap_photos.option_mobile?.trim(); 800 const option_s_pc = snap_photos.option_s_pc?.trim(); 801 const option_s_mobile = snap_photos.option_s_mobile?.trim(); 802 const check_pc_option = snap_photos.check_pc_option; 803 804 const p_option = document.createElement("p"); 805 const span_option = document.createElement("span"); 806 807 if (check_pc_option == 1) { 808 if (is_mobile == false) { 809 span_option.textContent = option_pc; 810 } else { 811 span_option.textContent = option_mobile; 812 } 813 } else { 814 span_option.textContent = option_mobile; 815 } 816 817 p_option.appendChild(span_option); 818 checkboxLabel.appendChild(p_option); 819 820 const p_option_s = document.createElement("p"); 821 const span_option_s = document.createElement("span"); 822 823 if (check_pc_option == 1) { 824 if (is_mobile == false) { 825 span_option_s.textContent = option_s_pc; 826 } else { 827 span_option_s.textContent = option_s_mobile; 828 } 829 } else { 830 span_option_s.textContent = option_s_mobile; 831 } 832 833 p_option_s.appendChild(span_option_s); 834 checkboxLabel.appendChild(p_option_s); 835 836 const contents_div = document.createElement("div"); 837 let contents = snap_photos.contents; 838 839 contents_div.textContent = contents; 840 contents_div.classList.add("div_contents"); 841 checkboxLabel.appendChild(contents_div); 842 843 extend_photo_div.appendChild(contentsCheckbox); 844 extend_photo_div.appendChild(checkboxLabel); 845 846 const snap_photo_bg = document.createElement("div"); 847 snap_photo_bg.classList.add("bg_gra"); 848 849 const snapbox_extend_photo = document.createElement("img"); 850 snapbox_extend_photo.src = snap_photos.photos[0].photo; 851 snapbox_extend_photo.classList.add("snapbox_extend_photo"); 852
853 extend_photo_div.appendChild(snap_photo_bg); 854 855 let is_video = snap_photos.photos[0].is_video; 856 857 const snapbox_extend_video = createVideoElement( 858 snap_photos.photos[0].photo, 859 { 860 isExtended: true, 861 } 862 ); 863 864 extend_photo_div.appendChild(snapbox_extend_photo); 865 extend_photo_div.appendChild(snapbox_extend_video); 866 867 if (is_video === 1) { 868 snapbox_extend_photo.style.display = "none"; 869 snapbox_extend_video.style.display = "block"; 870 } else { 871 snapbox_extend_video.style.display = "none"; 872 snapbox_extend_photo.style.display = "block"; 873 } 874 875 swiper_slide_div.appendChild(extend_photo_div); 876 swiper_wrapper_div.appendChild(swiper_slide_div); 877 878 addPhotoBgClickEvent( 879 snap_photo_bg, 880 snap_photos, 881 snapbox_extend_photo, 882 snapbox_extend_video 883 ); 884 885 const button_photo = document.createElement("div"); 886 button_photo.classList.add("button_photo"); 887 888 const button_photo_left = document.createElement("button"); 889 const button_photo_right = document.createElement("button"); 890 891 const button_photo_left_span = document.createElement("span"); 892 button_photo_left_span.classList.add("material-symbols-outlined"); 893 button_photo_left_span.textContent = "chevron_left"; 894 895 const button_photo_right_span = document.createElement("span"); 896 button_photo_right_span.classList.add("material-symbols-outlined"); 897 button_photo_right_span.textContent = "navigate_next"; 898 899 extend_photo_div.appendChild(button_photo); 900 button_photo.appendChild(button_photo_left); 901 button_photo.appendChild(button_photo_right); 902 button_photo_left.appendChild(button_photo_left_span); 903 button_photo_right.appendChild(button_photo_right_span); 904 905 const dotted = document.createElement("div"); 906 dotted.classList.add("dotted"); 907 908 snap_photos.photos.forEach((photo, index) => { 909 const dotted_div = document.createElement("div"); 910 if (index == 0) { 911 dotted_div.classList.add("on"); 912 } 913 914 dotted.appendChild(dotted_div); 915 }); 916 extend_photo_div.appendChild(dotted); 917 // }) 918 }); 919 920 swiper_div.appendChild(swiper_wrapper_div); 921 snap_extend_child.appendChild(swiper_div); 922 923 snap_extend.appendChild(snap_extend_child); 924 document 925 .getElementById("app-3cuniverse-snap") 926 .appendChild(snap_extend); 927 928 console.log("refresh"); 929 930 addOutsideClickEvent(); 931 932 window.addEventListener("orientationchange", function () { 933 if (window.screen.height > window.screen.width) { 934 console.log("change"); 935 936 let snap_feed_list = 937 document.getElementsByClassName("snap_main_feed"); 938 for (var i = 0; i < snap_feed_list.length; i++) { 939 snap_feed_list[i].style.height = snap_original_height + "px"; 940 } 941 } 942 }); 943 944 //ëììì ë§ì°ì¤ì¤ë² ì´ë²¤í¸ ì¶ê° 945 946 snap_original_height = 947 document.getElementsByClassName("snap_main_feed")[0].offsetHeight; 948 949 const scrollableDiv = document.querySelector(".snap_main_slide"); 950 951 let isMouseDown = false; 952 let startX; 953 let scrollLeft; 954 955 scrollableDiv.addEventListener("mousedown", (e) => { 956 const scrollableDiv = document.querySelector(".snap_main_slide"); 957 scrollableDiv.style.scrollBehavior = "auto"; 958 isMouseDown = true; 959 startX = e.pageX; 960 scrollLeft = scrollableDiv.scrollLeft; 961 scrollableDiv.style.cursor = "grabbing"; 962 scrollableDiv.style.userSelect = "none"; // prevent text selection 963 }); 964 965 scrollableDiv.addEventListener("mouseup", () => { 966 isMouseDown = false;
967 scrollableDiv.style.cursor = "grab"; 968 scrollableDiv.style.userSelect = "auto"; 969 }); 970 971 scrollableDiv.addEventListener("mousemove", (e) => { 972 const scrollableDiv = document.querySelector(".snap_main_slide"); 973 scrollableDiv.style.scrollBehavior = "auto"; 974 if (!isMouseDown) return; 975 e.preventDefault(); 976 const x = e.pageX; 977 const distanceMoved = x - startX; 978 scrollableDiv.scrollLeft = scrollLeft - distanceMoved * 2; 979 980 if (is_snap_auto_scroll) { 981 clearInterval(snap_auto_interval_id); 982 is_snap_auto_Running = 0; 983 } 984 }); 985 let scrollTimeout; 986 987 scrollableDiv.addEventListener("scroll", function () { 988 // console.log("ì¤í¬ë¡¤ ì¤" + scrollableDiv.scrollLeft); 989 990 const snap_feed = document.querySelector(".snap_main_feed"); 991 let snap_width = snap_feed.getBoundingClientRect().width; 992 993 const snap_feed_all = document.querySelectorAll(".snap_main_feed"); 994 995 let total = snap_width * snap_feed_all.length; 996 let current_scroll_left = scrollableDiv.scrollLeft; 997 998 if ( 999 current_scroll_left > total / 2 || 1000 scrollableDiv.offsetWidth > total / 2 1001 ) { 1002 let main_slide_div = document.querySelector(".snap_main_slide"); 1003 let snap_children = main_slide_div.children; 1004 1005 if (snap_copy_items == null) { 1006 snap_copy_items = Array.from(snap_children).map((child) => 1007 child.cloneNode(true) 1008 ); 1009 } else { 1010 snap_copy_items = Array.from(snap_copy_items).map((child) => 1011 child.cloneNode(true) 1012 ); 1013 } 1014 1015 snap_copy_items.forEach((child, index) => { 1016 let child_href = child.children[0]; 1017 1018 var videoChildren = child_href.querySelectorAll( 1019 ".snapbox_video_player" 1020 ); 1021 1022 // ì íë ìì ììì ëí ìì ìí 1023 videoChildren.forEach(function (child) { 1024 child.muted = true; 1025 child.loop = true; 1026 }); 1027 1028 child_href.onclick = function () { 1029 console.log("parent clicked"); 1030 photoClick(index); 1031 }; 1032 main_slide_div.appendChild(child); 1033 }); 1034 } 1035 1036 // ì¤í¬ë¡¤ì´ ê°ì§ë ëë§ë¤ 기존ì íì´ë¨¸ë¥¼ í´ë¦¬ì´í©ëë¤. 1037 clearTimeout(scrollTimeout); 1038 1039 is_snap_scrolling = true; 1040 1041 // ìë¡ì´ íì´ë¨¸ë¥¼ ì¤ì í©ëë¤. 1042 scrollTimeout = setTimeout(function () { 1043 // console.log("ì¤í¬ë¡¤ ì¤ì§ë¨"); 1044 is_snap_scrolling = false; 1045 if (is_snap_auto_scroll == 1) { 1046 autoScroll(100); 1047 } 1048 }, 400); // 150ms ëì ì¶ê° ì¤í¬ë¡¤ì´ ê°ì§ëì§ ìì¼ë©´ ì¤í¬ë¡¤ì´ ì¤ì§ëìë¤ê³ íë¨í©ëë¤. 1049 }); 1050 } catch (err) { 1051 console.log("loadContents error", err); 1052 } 1053 if (is_snap_auto_scroll == 1) { 1054 autoScroll(100); 1055 } 1056 loadSnapSwipe(); 1057 //ìì¸ì¤ë 1058 } else { 1059 try { 1060 const snap_wrap = document.createElement("div"); 1061 snap_wrap.classList.add("snap_wrap"); 1062 1063 const snap_title = document.createElement("div"); 1064 snap_title.classList.add("snap_title"); 1065 1066 const title_img = document.createElement("img"); 1067 if (is_mobile == false) { 1068 title_img.src = "https://snapbox.ai/logo_brandsnap_d.png"; 1069 } else { 1070 title_img.src = "https://snapbox.ai/logo_brandsnap_d_m.png"; 1071 } 1072 1073 if (snap_setting) { 1074 if (is_mobile == false) { 1075 if (snap_setting.main_title_pc_unuse == 0) { 1076 if (snap_setting.main_title_pc != "https://www.snapbox.ai/") { 1077 title_img.src = snap_setting.main_title_pc; 1078 } else { 1079 snap_wrap.removeChild(snap_title); 1080 } 1081 if (snap_setting.main_title_width_pc) { 1082 title_img.style.width = 1083 snap_setting.main_title_width_pc + "px"; 1084 } 1085 } 1086 } else { 1087 snap_title.style.marginLeft = snap_setting.main_left_mobile 1088 ? snap_setting.main_left_mobile + "px" 1089 : 15 + "px"; 1090 1091 if (snap_setting.main_title_mobile_unuse == 0) { 1092 if ( 1093 snap_setting.main_title_mobile != "https://www.snapbox.ai/" 1094 ) { 1095 title_img.src = snap_setting.main_title_mobile; 1096 } else { 1097 snap_wrap.removeChild(snap_title); 1098 } 1099 1100 if (snap_setting.main_title_width_mobile) { 1101 title_img.style.width = 1102 snap_setting.main_title_width_mobile + "px"; 1103 } 1104 } 1105 } 1106 } 1107 1108 snap_title.appendChild(title_img); 1109 1110 snap_wrap.appendChild(snap_title); 1111 1112 const snap_slide = document.createElement("div"); 1113 snap_slide.classList.add("snap_slide"); 1114 1115 snapPhotos.forEach((photo, p_index) => { 1116 photo.current_index = 0; 1117 const snap_feed = document.createElement("div"); 1118 snap_feed.classList.add("snap_feed"); 1119 snap_feed.style.position = "relative"; 1120 1121 const href = document.createElement("a"); 1122 href.classList.add("snap_feed_a"); 1123 1124 href.onclick = function (event) { 1125 event.stopPropagation(); 1126 console.log("parent clicked"); 1127 photoClick(p_index); 1128 }; 1129 1130 if (snap_setting) { 1131 if (is_mobile == false) { 1132 let radius = snap_setting.main_radius ?? 0;
1133 href.style.borderRadius = radius + "px"; 1134 1135 if (snap_setting.main_height_pc) { 1136 snap_feed.style.height = snap_setting.main_height_pc + "px"; 1137 } 1138 } else { 1139 let radius_mobile = snap_setting.main_radius_mobile ?? 0; 1140 href.style.borderRadius = radius_mobile + "px"; 1141 1142 if (snap_setting.main_height_mobile) { 1143 snap_feed.style.height = 1144 snap_setting.main_height_mobile + "px"; 1145 } 1146 1147 let main_contents_mobile_width = 1148 snap_setting.main_contents_mobile_width ?? 45; 1149 1150 snap_feed.style.flex = `0 0 calc(${main_contents_mobile_width}% - 20px)`; 1151 } 1152 } 1153 1154 const img = document.createElement("img"); 1155 1156 img.src = photo.photos[0].photo; 1157 const is_video = photo.photos[0].is_video; 1158 1159 const title_pc = photo.title_pc; 1160 const title_mobile = photo.title_mobile; 1161 const option_pc = photo.option_pc?.trim(); 1162 const option_mobile = photo.option_mobile?.trim(); 1163 const option_s_pc = photo.option_s_pc?.trim(); 1164 const option_s_mobile = photo.option_s_mobile?.trim(); 1165 const check_pc_option = photo.check_pc_option; 1166 1167 const div_info = document.createElement("div"); 1168 div_info.classList.add("snapai_info"); 1169 1170 if (snap_setting) { 1171 if (is_mobile == false) { 1172 const text_align_left_pc = snap_setting.text_align_left_pc; 1173 if (text_align_left_pc === 0) { 1174 div_info.style.textAlign = "center"; 1175 } else { 1176 div_info.style.textAlign = "left"; 1177 } 1178 1179 let snap_main_width = snap_setting.main_width 1180 ? snap_setting.main_width 1181 : 100; 1182 1183 let snap_width_type = snap_setting.main_width_type 1184 ? snap_setting.main_width_type 1185 : "%"; 1186 let snap_max_width = snap_main_width + snap_width_type; 1187 snap_wrap.style.maxWidth = snap_max_width; 1188 } else { 1189 const text_align_left_mobile = 1190 snap_setting.text_align_left_mobile; 1191 if (text_align_left_mobile === 0) { 1192 div_info.style.textAlign = "center"; 1193 } else { 1194 div_info.style.textAlign = "left"; 1195 } 1196 } 1197 } 1198 1199 const div_title = document.createElement("div"); 1200 div_title.classList.add("snapai_option_title"); 1201 1202 const div_option01 = document.createElement("div"); 1203 div_option01.classList.add("snapai_option01"); 1204 1205 const div_option02 = document.createElement("div"); 1206 div_option02.classList.add("snapai_option02"); 1207 1208 if (check_pc_option == 1) { 1209 if (is_mobile == false) { 1210 div_title.textContent = title_pc; 1211 div_option01.textContent = option_pc; 1212 div_option02.textContent = option_s_pc; 1213 } else { 1214 div_title.textContent = title_mobile; 1215 div_option01.textContent = option_mobile; 1216 div_option02.textContent = option_s_mobile; 1217 } 1218 } else { 1219 div_title.textContent = title_mobile; 1220 div_option01.textContent = option_mobile; 1221 div_option02.textContent = option_s_mobile; 1222 } 1223
1224 if (title_mobile || (check_pc_option == 1 && title_pc)) { 1225 div_info.appendChild(div_title); 1226 } 1227 1228 if (option_mobile || (check_pc_option == 1 && option_pc)) { 1229 let checkNoReturn = title_pc?.includes("\n"); 1230 if (checkNoReturn) { 1231 div_title.classList.add("two_lines"); 1232 } 1233 div_info.appendChild(div_option01); 1234 1235 // div_title.classList.add("hidden"); 1236 } 1237 1238 if (option_s_mobile || (check_pc_option == 1 && option_s_pc)) { 1239 div_info.appendChild(div_option02); 1240 } 1241 1242 const snap_photo_bg = document.createElement("div"); 1243 snap_photo_bg.classList.add("bg_gra"); 1244 1245 if (is_video === 1) { 1246 const video = document.createElement("video"); 1247 const source = document.createElement("source"); 1248 source.src = photo.photos[0].photo; 1249 source.type = "video/mp4"; 1250 1251 video.setAttribute("playsinline", ""); 1252 video.setAttribute("webkit-playsinline", ""); 1253 video.preload = "auto"; 1254 video.autoplay = true; 1255 video.muted = true; 1256 video.loop = true; 1257 video.style.width = "100%"; 1258 video.style.height = "100%"; 1259 video.style.objectFit = "cover"; 1260 1261 video.classList.add("snapbox_video_player"); 1262 1263 video.appendChild(source); 1264 href.appendChild(video); 1265 } else { 1266 href.appendChild(img); 1267 } 1268
1269 href.appendChild(snap_photo_bg); 1270 href.appendChild(div_info); 1271 snap_feed.appendChild(href); 1272 snap_slide.appendChild(snap_feed); 1273 }); 1274 1275 snap_wrap.appendChild(snap_slide); 1276 // Append the p element to the body: 1277 1278 const snap_link = document.createElement("div"); 1279 snap_link.classList.add("snap_link"); 1280 1281 const snap_link_a = document.createElement("a"); 1282 snap_link_a.href = "https://snapbox.ai/brand"; 1283 snap_link_a.target = "_blank"; 1284 snap_link_a.textContent = "SNAPBOX"; 1285 1286 snap_link.appendChild(snap_link_a); 1287 snap_wrap.appendChild(snap_link); 1288 1289 const snap_arrow = document.createElement("div"); 1290 snap_arrow.classList.add("snap_arrow"); 1291 const snap_before = document.createElement("button"); 1292 snap_before.classList.add("snap_before"); 1293 snap_before.addEventListener("click", snapBefore); 1294 const chevron_left = document.createElement("span"); 1295 chevron_left.classList.add("material-symbols-outlined"); 1296 chevron_left.textContent = "chevron_left"; 1297 1298 const snap_next = document.createElement("button"); 1299 snap_next.classList.add("snap_next"); 1300 snap_next.addEventListener("click", snapNext); 1301 const navigate_next = document.createElement("span"); 1302 navigate_next.classList.add("material-symbols-outlined"); 1303 navigate_next.textContent = "navigate_next"; 1304 1305 snap_before.appendChild(chevron_left); 1306 snap_arrow.appendChild(snap_before); 1307 1308 snap_next.appendChild(navigate_next); 1309 snap_arrow.appendChild(snap_next); 1310 1311 snap_class_name.style.width = "100%"; 1312 1313 snap_wrap.appendChild(snap_arrow); 1314 document.getElementById("app-3cuniverse-snap").appendChild(snap_wrap); 1315 1316 const snap_extend = document.createElement("div"); 1317 snap_extend.classList.add("snap_extend"); 1318 snap_extend.style.display = "none"; 1319 const snap_extend_child = document.createElement("div"); 1320 snap_extend_child.classList.add("img_slide"); 1321 const extend_button_div = document.createElement("div"); 1322 extend_button_div.classList.add("button"); 1323 extend_button_div.setAttribute("id", "snap_close_button"); 1324 const extend_button = document.createElement("button"); 1325 const snap_extend_span = document.createElement("span"); 1326 snap_extend_span.classList.add("material-symbols-outlined"); 1327 snap_extend_span.textContent = "close"; 1328 1329 snap_extend_span.addEventListener("click", photoCancel); 1330 1331 extend_button.appendChild(snap_extend_span); 1332 extend_button_div.appendChild(extend_button); 1333 snap_extend_child.appendChild(extend_button_div); 1334 1335 const button_slide = document.createElement("div"); 1336 button_slide.classList.add("button_slide"); 1337 1338 const button_slide_left = document.createElement("button"); 1339 const button_slide_right = document.createElement("button"); 1340 1341 button_slide_left.addEventListener("click", popupLeft); 1342 button_slide_right.addEventListener("click", popupRight); 1343 1344 const button_left_span = document.createElement("span"); 1345 button_left_span.classList.add("material-symbols-outlined"); 1346 button_left_span.textContent = "chevron_left"; 1347 1348 const button_right_span = document.createElement("span"); 1349 button_right_span.classList.add("material-symbols-outlined"); 1350 button_right_span.textContent = "navigate_next"; 1351 1352 button_slide_left.appendChild(button_left_span); 1353 button_slide_right.appendChild(button_right_span); 1354 button_slide.appendChild(button_slide_left); 1355 button_slide.appendChild(button_slide_right); 1356 snap_extend.appendChild(button_slide); 1357 1358 const swiper_div = document.createElement("div"); 1359 swiper_div.classList.add("swiper"); 1360 swiper_div.classList.add("swiper-container");
1361 swiper_div.setAttribute("id", "snapSwiper"); 1362 1363 const swiper_wrapper_div = document.createElement("div"); 1364 swiper_wrapper_div.classList.add("swiper-wrapper"); 1365 1366 let index = 0; 1367 snapPhotos.forEach((snap_photos) => { 1368 // snap_photos.photos.forEach((photo) => { 1369 const swiper_slide_div = document.createElement("div"); 1370 swiper_slide_div.classList.add("swiper-slide"); 1371 1372 const extend_photo_div = document.createElement("div"); 1373 extend_photo_div.classList.add("snap_photo"); 1374 1375 const contentsCheckbox = document.createElement("input"); 1376 contentsCheckbox.type = "checkbox"; 1377 contentsCheckbox.classList.add("snap_extend_txt"); 1378 contentsCheckbox.id = "contents" + index; 1379 1380 var checkboxLabel = document.createElement("label"); 1381 checkboxLabel.htmlFor = "contents" + index; 1382 checkboxLabel.classList.add("snap_extend_info"); 1383 1384 index++; 1385 1386 const option_pc = snap_photos.option_pc?.trim(); 1387 const option_mobile = snap_photos.option_mobile?.trim(); 1388 const option_s_pc = snap_photos.option_s_pc?.trim(); 1389 const option_s_mobile = snap_photos.option_s_mobile?.trim(); 1390 const check_pc_option = snap_photos.check_pc_option; 1391 1392 const p_option = document.createElement("p"); 1393 const span_option = document.createElement("span"); 1394 1395 if (check_pc_option == 1) { 1396 if (is_mobile == false) { 1397 span_option.textContent = option_pc; 1398 } else { 1399 span_option.textContent = option_mobile; 1400 } 1401 } else { 1402 span_option.textContent = option_mobile; 1403 } 1404 1405 p_option.appendChild(span_option); 1406 checkboxLabel.appendChild(p_option); 1407 1408 const p_option_s = document.createElement("p"); 1409 const span_option_s = document.createElement("span"); 1410 1411 if (check_pc_option == 1) { 1412 if (is_mobile == false) { 1413 span_option_s.textContent = option_s_pc; 1414 } else { 1415 span_option_s.textContent = option_s_mobile; 1416 } 1417 } else { 1418 span_option_s.textContent = option_s_mobile; 1419 } 1420 1421 p_option_s.appendChild(span_option_s); 1422 checkboxLabel.appendChild(p_option_s); 1423 1424 const contents_div = document.createElement("div"); 1425 let contents = snap_photos.contents; 1426 contents_div.textContent = contents; 1427 contents_div.classList.add("div_contents"); 1428 checkboxLabel.appendChild(contents_div); 1429 1430 extend_photo_div.appendChild(contentsCheckbox); 1431 extend_photo_div.appendChild(checkboxLabel); 1432 1433 const snap_photo_bg = document.createElement("div"); 1434 snap_photo_bg.classList.add("bg_gra"); 1435 1436 const snapbox_extend_photo = document.createElement("img"); 1437 snapbox_extend_photo.src = snap_photos.photos[0].photo; 1438 snapbox_extend_photo.classList.add("snapbox_extend_photo"); 1439
1440 extend_photo_div.appendChild(snap_photo_bg); 1441 1442 let is_video = snap_photos.photos[0].is_video; 1443 1444 const snapbox_extend_video = createVideoElement( 1445 snap_photos.photos[0].photo, 1446 { 1447 isExtended: true, 1448 } 1449 ); 1450 1451 extend_photo_div.appendChild(snapbox_extend_photo); 1452 extend_photo_div.appendChild(snapbox_extend_video); 1453 1454 if (is_video === 1) { 1455 snapbox_extend_photo.style.display = "none"; 1456 snapbox_extend_video.style.display = "block"; 1457 } else { 1458 snapbox_extend_video.style.display = "none"; 1459 snapbox_extend_photo.style.display = "block"; 1460 } 1461 1462 swiper_slide_div.appendChild(extend_photo_div); 1463 swiper_wrapper_div.appendChild(swiper_slide_div); 1464 1465 addPhotoBgClickEvent( 1466 snap_photo_bg, 1467 snap_photos, 1468 snapbox_extend_photo, 1469 snapbox_extend_video 1470 ); 1471 1472 const button_photo = document.createElement("div"); 1473 button_photo.classList.add("button_photo"); 1474 1475 const button_photo_left = document.createElement("button"); 1476 const button_photo_right = document.createElement("button"); 1477 1478 const button_photo_left_span = document.createElement("span"); 1479 button_photo_left_span.classList.add("material-symbols-outlined"); 1480 button_photo_left_span.textContent = "chevron_left"; 1481 1482 const button_photo_right_span = document.createElement("span"); 1483 button_photo_right_span.classList.add("material-symbols-outlined"); 1484 button_photo_right_span.textContent = "navigate_next"; 1485 1486 extend_photo_div.appendChild(button_photo); 1487 button_photo.appendChild(button_photo_left); 1488 button_photo.appendChild(button_photo_right); 1489 button_photo_left.appendChild(button_photo_left_span); 1490 button_photo_right.appendChild(button_photo_right_span); 1491 1492 const dotted = document.createElement("div"); 1493 dotted.classList.add("dotted"); 1494 1495 snap_photos.photos.forEach((photo, index) => { 1496 const dotted_div = document.createElement("div"); 1497 if (index == 0) { 1498 dotted_div.classList.add("on"); 1499 } 1500 1501 dotted.appendChild(dotted_div); 1502 }); 1503 extend_photo_div.appendChild(dotted); 1504 }); 1505 1506 swiper_div.appendChild(swiper_wrapper_div); 1507 snap_extend_child.appendChild(swiper_div); 1508 1509 snap_extend.appendChild(snap_extend_child); 1510 document 1511 .getElementById("app-3cuniverse-snap") 1512 .appendChild(snap_extend); 1513 1514 console.log("refresh"); 1515 1516 window.addEventListener("orientationchange", function () { 1517 if (window.screen.height > window.screen.width) { 1518 console.log("change"); 1519 1520 let snap_feed_list = document.getElementsByClassName("snap_feed"); 1521 for (var i = 0; i < snap_feed_list.length; i++) { 1522 snap_feed_list[i].style.height = snap_original_height + "px"; 1523 } 1524 } 1525 }); 1526 1527 addOutsideClickEvent(); 1528 loadSnapSwipe(); 1529 openSnapboxPhoto(); 1530 1531 snap_original_height = 1532 document.getElementsByClassName("snap_feed")[0].offsetHeight; 1533 console.log("offset" + snap_original_height); 1534 1535 const scrollableDiv = document.querySelector(".snap_slide"); 1536 1537 let isMouseDown = false; 1538 let startX; 1539 let scrollLeft; 1540 1541 scrollableDiv.addEventListener("mousedown", (e) => { 1542 const scrollableDiv = document.querySelector(".snap_slide"); 1543 scrollableDiv.style.scrollBehavior = "auto"; 1544 isMouseDown = true; 1545 startX = e.pageX; 1546 scrollLeft = scrollableDiv.scrollLeft; 1547 scrollableDiv.style.cursor = "grabbing"; 1548 scrollableDiv.style.userSelect = "none"; // prevent text selection 1549 }); 1550 1551 scrollableDiv.addEventListener("mouseup", (event) => { 1552 isMouseDown = false;
1553 scrollableDiv.style.cursor = "grab"; 1554 scrollableDiv.style.userSelect = "auto"; 1555 1556 if (is_snap_scrolling) { 1557 event.preventDefault(); 1558 } 1559 }); 1560 1561 scrollableDiv.addEventListener("mousemove", (e) => { 1562 const scrollableDiv = document.querySelector(".snap_slide"); 1563 scrollableDiv.style.scrollBehavior = "auto"; 1564 if (!isMouseDown) return; 1565 e.preventDefault(); 1566 const x = e.pageX; 1567 const distanceMoved = x - startX; 1568 scrollableDiv.scrollLeft = scrollLeft - distanceMoved * 2; 1569 }); 1570 1571 let scrollTimeout; 1572 1573 scrollableDiv.addEventListener("scroll", function () { 1574 // ì¤í¬ë¡¤ì´ ê°ì§ë ëë§ë¤ 기존ì íì´ë¨¸ë¥¼ í´ë¦¬ì´í©ëë¤. 1575 clearTimeout(scrollTimeout); 1576 1577 is_snap_scrolling = true; 1578 1579 // ìë¡ì´ íì´ë¨¸ë¥¼ ì¤ì í©ëë¤. 1580 scrollTimeout = setTimeout(function () { 1581 // console.log("ì¤í¬ë¡¤ ì¤ì§ë¨"); 1582 is_snap_scrolling = false; 1583 }, 400); // 150ms ëì ì¶ê° ì¤í¬ë¡¤ì´ ê°ì§ëì§ ìì¼ë©´ ì¤í¬ë¡¤ì´ ì¤ì§ëìë¤ê³ íë¨í©ëë¤. 1584 }); 1585 } catch (err) { 1586 console.log("loadContents error", err); 1587 } 1588 } 1589 }; 1590 1591 const addOutsideClickEvent = () => { 1592 document.querySelector("body").addEventListener("click", function (e) { 1593 if (e.target.className === "snap_extend") { 1594 photoCancel(); 1595 e.stopPropagation(); 1596 } else if (e.target.className === "button_slide") { 1597 photoCancel(); 1598 e.stopPropagation(); 1599 } else if (e.target.className === "snap_wrap") { 1600 e.stopPropagation(); 1601 } else if (e.target.className === "snap_main_wrap") { 1602 e.stopPropagation(); 1603 } else if (e.target.className === "snap_slide") { 1604 e.stopPropagation(); 1605 } else if (e.target.className === "snap_main_slide") { 1606 e.stopPropagation(); 1607 } else if (e.target.tagName === "DIV") { 1608 e.stopPropagation(); 1609 } 1610 }); 1611 }; 1612 1613 const loadArchiveContents = () => { 1614 if (snap_check_archive == 1) { 1615 try { 1616 const createElementWithClass = (tag, className) => { 1617 const element = document.createElement(tag); 1618 element.classList.add(className); 1619 return element; 1620 }; 1621 1622 const createImageElement = (src, className) => { 1623 const img = createElementWithClass("img", className); 1624 img.src = src; 1625 return img; 1626 }; 1627 1628 const createSnapPageFeed = (photo) => { 1629 const feed = createElementWithClass("div", "snappage_feed"); 1630 const link = createElementWithClass("a", "snappage_a"); 1631 link.href = photo.product_url; 1632 1633 const product = createElementWithClass("div", "snappage_product"); 1634 // product.textContent = photo.product_name; 1635 1636 const image = createImageElement(photo.photo, "snappage_image"); 1637 1638 const plus_icon = snap_setting?.plus_icon ?? 1; 1639 const dash_line = snap_setting?.dash_line ?? 1; 1640 1641 if (plus_icon == 1) { 1642 const feed_button = createElementWithClass("div", "feed_button"); 1643 feed.appendChild(feed_button); 1644 } 1645 1646 link.append(product, image); 1647 1648 feed.appendChild(link); 1649 1650 const snappage_content = createElementWithClass( 1651 "div", 1652 "snappage_content" 1653 ); 1654 1655 const detail_size = createElementWithClass("div", "detail_size"); 1656 const size = createElementWithClass("span", "size"); 1657 size.textContent = photo.product_option; 1658 const product_name = createElementWithClass("div", "product_name"); 1659 product_name.textContent = photo.product_name; 1660 1661 const product_info = createElementWithClass("div", "product_info"); 1662 product_info.textContent = photo.product_info; 1663 feed.appendChild(snappage_content); 1664 1665 snappage_content.appendChild(detail_size); 1666 1667 snappage_content.appendChild(product_name); 1668 if (dash_line == 1) { 1669 const line = createElementWithClass("span", "line"); 1670 snappage_content.appendChild(line); 1671 } 1672 1673 snappage_content.appendChild(product_info); 1674 detail_size.appendChild(size); 1675 1676 return feed; 1677 }; 1678 1679 const snapPageWrap = createElementWithClass("div", "snappage_wrap"); 1680 const snapPageList = createElementWithClass("div", "snappage_list"); 1681 1682 snapArchivePhotos.forEach((photo) => { 1683 snapPageList.appendChild(createSnapPageFeed(photo)); 1684 }); 1685 1686 snapPageWrap.append(snapPageList); 1687 1688 document 1689 .getElementById("app-3cuniverse-snap") 1690 .appendChild(snapPageWrap); 1691 } catch (err) { 1692 console.log("loadArchiveContents error", err); 1693 } 1694 } 1695 }; 1696 1697 const addPhotoBgClickEvent = ( 1698 snap_photo_bg, 1699 snap_photos, 1700 snapbox_extend_photo, 1701 snapbox_extend_video 1702 ) => { 1703 snap_photo_bg.addEventListener("click", (e) => { 1704 e.stopPropagation(); 1705 console.log("-----------"); 1706 1707 let half_width = 0; 1708 half_width = snapbox_extend_video.offsetWidth / 2; 1709 if (half_width == 0) half_width = snapbox_extend_photo.offsetWidth / 2; 1710 1711 if (e.offsetX > half_width) { 1712 let count = snap_swiper.slides.length; 1713 if (snap_swiper.activeIndex <= count - 1) { 1714 uncheckContents(); 1715 1716 let slidePhotos = snapPhotos[snap_swiper.activeIndex]; 1717 if (snap_photos.current_index < slidePhotos.photos.length - 1) { 1718 snap_photos.current_index++; 1719 const current_index = snap_photos.current_index; 1720 const is_video = snap_photos.photos[current_index].is_video; 1721 if (is_video === 1) { 1722 snapbox_extend_video.src = 1723 snap_photos.photos[current_index].photo; 1724 snapbox_extend_photo.style.display = "none"; 1725 snapbox_extend_video.style.display = "block"; 1726 } else { 1727 snapbox_extend_photo.src = 1728 snap_photos.photos[current_index].photo; 1729 snapbox_extend_video.style.display = "none"; 1730 snapbox_extend_photo.style.display = "block"; 1731 } 1732 preload_img = new Image(); 1733 preload_img.src = snap_photos.photos[current_index + 1] 1734 ? snap_photos.photos[current_index + 1].photo 1735 : ""; 1736 moveRight(); 1737 } else { 1738 if (snap_swiper.activeIndex < snap_swiper.slides.length - 1) { 1739 snap_swiper.slideTo(snap_swiper.activeIndex + 1); 1740 } 1741 } 1742 } 1743 } else if (e.offsetX < half_width) { 1744 uncheckContents(); 1745 1746 if (snap_photos.current_index >= 1) { 1747 snap_photos.current_index--; 1748 const current_index = snap_photos.current_index; 1749 const is_video = snap_photos.photos[current_index].is_video; 1750 if (is_video === 1) { 1751 snapbox_extend_video.src = 1752 snap_photos.photos[current_index].photo; 1753 snapbox_extend_photo.style.display = "none"; 1754 snapbox_extend_video.style.display = "block"; 1755 } else { 1756 snapbox_extend_photo.src = 1757 snap_photos.photos[current_index].photo; 1758 snapbox_extend_video.style.display = "none"; 1759 snapbox_extend_photo.style.display = "block"; 1760 } 1761 moveLeft(); 1762 } else { 1763 if (snap_swiper.activeIndex > 0) { 1764 snap_swiper.slideTo(snap_swiper.activeIndex - 1); 1765 } 1766 } 1767 } 1768 playCurrentSlide(); 1769 }); 1770 }; 1771 1772 const loadVerticalMobileContents = () => { 1773 const snap_wrap = document.createElement("div"); 1774 snap_wrap.classList.add("snap_wrap"); 1775 1776 const snap_title = document.createElement("div"); 1777 snap_title.classList.add("snap_title"); 1778 1779 const title_img = document.createElement("img"); 1780 title_img.src = "https://snapbox.ai/logo_brandsnap_d_m.png"; 1781 1782 if (snap_setting) { 1783 snap_title.style.marginLeft = snap_setting.main_left_mobile 1784 ? snap_setting.main_left_mobile + "px" 1785 : 15 + "px"; 1786 1787 snap_title.style.width = "auto"; 1788 1789 if (snap_setting.main_title_mobile_unuse == 0) { 1790 if (snap_setting.main_title_mobile != "https://www.snapbox.ai/") { 1791 title_img.src = snap_setting.main_title_mobile; 1792 } else { 1793 snap_wrap.removeChild(snap_title); 1794 } 1795 1796 if (snap_setting.main_title_width_mobile) { 1797 title_img.style.width = snap_setting.main_title_width_mobile + "px"; 1798 } 1799 } 1800 } 1801 1802 snap_title.appendChild(title_img); 1803
1804 try { 1805 const createElementWithClass = (tag, className) => { 1806 const element = document.createElement(tag); 1807 element.classList.add(className); 1808 return element; 1809 }; 1810 1811 const createContentsElement = (item, className) => { 1812 console.log(item); 1813 let contents; 1814 if (item.photos[0]?.is_video === 1) { 1815 contents = createElementWithClass("video", className); 1816 const source = document.createElement("source"); 1817 source.src = item.photos[0]?.photo; 1818 source.type = "video/mp4"; 1819 1820 contents.setAttribute("playsinline", ""); 1821 contents.setAttribute("webkit-playsinline", ""); 1822 1823 contents.preload = "auto"; 1824 contents.autoplay = true; 1825 contents.muted = true; 1826 contents.loop = true; 1827 contents.style.width = "100%"; 1828 // contents.style.height = "100%"; 1829 contents.style.objectFit = "cover"; 1830 1831 contents.classList.add("snapbox_video_player"); 1832 1833 contents.appendChild(source); 1834 } else { 1835 contents = createElementWithClass("img", className); 1836 } 1837 contents.src = item.photos[0]?.photo; 1838 return contents; 1839 }; 1840 1841 const createSnapPageFeed = ( 1842 item, 1843 index, 1844 vertical_mobile_row_contents 1845 ) => { 1846 const feed = createElementWithClass("div", "snappage_feed"); 1847 const link = createElementWithClass("a", "snappage_a"); 1848 // link.href = item.link; 1849 1850 feed.onclick = () => verticalPhotoClick(index); 1851 1852 const product = createElementWithClass("div", "snappage_product"); 1853 1854 const contents = createContentsElement(item, "snappage_image"); 1855 1856 if (snap_setting) { 1857 let radius_mobile = snap_setting.main_radius_mobile ?? 0; 1858 feed.style.borderRadius = radius_mobile + "px"; 1859 } 1860 1861 if (index >= vertical_mobile_row_contents * 2) { 1862 feed.style.display = "none"; 1863 } 1864 1865 link.append(product, contents); 1866 1867 feed.appendChild(link); 1868 1869 const snappage_content = createElementWithClass( 1870 "div", 1871 "snappage_content" 1872 ); 1873 1874 if (snap_setting) { 1875 const text_align_left_mobile = snap_setting.text_align_left_mobile; 1876 let vertical_mobile_text_display = 1877 snap_setting.vertical_mobile_text_display ?? 1; 1878 if (text_align_left_mobile === 0) { 1879 snappage_content.style.textAlign = "center"; 1880 } else { 1881 snappage_content.style.textAlign = "left"; 1882 } 1883 1884 if ( 1885 vertical_mobile_row_contents >= 3 && 1886 vertical_mobile_text_display === 0 1887 ) { 1888 snappage_content.style.display = "none"; 1889 } 1890 } 1891 1892 const detail_size = createElementWithClass("div", "detail_size"); 1893 const size = createElementWithClass("span", "size"); 1894 size.textContent = item.option_mobile; 1895 const product_name = createElementWithClass("div", "product_name"); 1896 product_name.textContent = item.title_mobile; 1897 1898 const product_info = createElementWithClass("div", "product_info"); 1899 product_info.textContent = item.option_s_mobile; 1900 feed.appendChild(snappage_content); 1901 1902 snappage_content.appendChild(detail_size); 1903 1904 snappage_content.appendChild(product_name); 1905 1906 snappage_content.appendChild(product_info); 1907 detail_size.appendChild(size); 1908 1909 return feed; 1910 }; 1911 1912 const snapPageWrap = createElementWithClass("div", "snappage_wrap"); 1913 const snapPageList = createElementWithClass("div", "snappage_list"); 1914 1915 let vertical_mobile_row_contents = 2; 1916 1917 if (snap_setting) { 1918 let vertical_mobile_padding = 1919 snap_setting.vertical_mobile_padding ?? 0; 1920 let vertical_mobile_row_gap = 1921 snap_setting.vertical_mobile_row_gap ?? 4; 1922 let vertical_mobile_column_gap = 1923 snap_setting.vertical_mobile_column_gap ?? 4; 1924 vertical_mobile_row_contents = 1925 snap_setting.vertical_mobile_row_contents ?? 2; 1926 1927 snapPageList.style.paddingLeft = vertical_mobile_padding + "px"; 1928 snapPageList.style.paddingRight = vertical_mobile_padding + "px"; 1929 snapPageList.style.gridRowGap = vertical_mobile_row_gap + "px"; 1930 snapPageList.style.gridColumnGap = vertical_mobile_column_gap + "px"; 1931 snapPageList.style.gridTemplateColumns = 1932 "repeat(" + vertical_mobile_row_contents + ", 1fr)"; 1933 } 1934 1935 snapPhotos.forEach((item, index) => { 1936 snapPageList.appendChild( 1937 createSnapPageFeed(item, index, vertical_mobile_row_contents) 1938 ); 1939 }); 1940 1941 snapPageWrap.appendChild(snap_title); 1942 snapPageWrap.append(snapPageList); 1943 1944 const snap_link = document.createElement("div"); 1945 snap_link.classList.add("snap_link"); 1946 1947 const vertical_mobile_padding = 1948 snap_setting.vertical_mobile_padding ?? 0; 1949 snap_link.style.marginRight = vertical_mobile_padding + "px"; 1950 1951 const snap_link_a = document.createElement("a"); 1952 snap_link_a.href = "https://snapbox.ai/brand"; 1953 snap_link_a.target = "_blank"; 1954 snap_link_a.textContent = "SNAPBOX"; 1955 1956 snap_link.appendChild(snap_link_a); 1957 snapPageWrap.append(snap_link); 1958 1959 if (snapPhotos.length > vertical_mobile_row_contents * 2) { 1960 const div_more = createElementWithClass("div", "snappage_dropdown"); 1961 const button_more = createElementWithClass( 1962 "button", 1963 "snappage_dropdown-btn" 1964 ); 1965 1966 button_more.addEventListener("click", () => { 1967 button_more.classList.toggle("active"); 1968 1969 const feeds = document.querySelectorAll(".snappage_feed"); 1970 feeds.forEach((feed, index) => { 1971 if (index >= vertical_mobile_row_contents * 2) { 1972 feed.style.display = 1973 feed.style.display === "none" ? "block" : "none"; 1974 } 1975 }); 1976 }); 1977 1978 button_more.textContent = "ì¤íì¼ ë보기"; 1979 div_more.appendChild(button_more); 1980 snapPageWrap.appendChild(div_more); 1981 } 1982 1983 document 1984 .getElementById("app-3cuniverse-snap") 1985 .appendChild(snapPageWrap); 1986 1987 try { 1988 snapPhotos.forEach((photo, p_index) => { 1989 photo.current_index = 0; 1990 }); 1991 1992 const snap_arrow = document.createElement("div"); 1993 snap_arrow.classList.add("snap_arrow"); 1994 const snap_before = document.createElement("button"); 1995 snap_before.classList.add("snap_before"); 1996 snap_before.addEventListener("click", snapBefore); 1997 const chevron_left = document.createElement("span"); 1998 chevron_left.classList.add("material-symbols-outlined"); 1999 chevron_left.textContent = "chevron_left"; 2000 2001 const snap_next = document.createElement("button"); 2002 snap_next.classList.add("snap_next"); 2003 snap_next.addEventListener("click", snapNext); 2004 const navigate_next = document.createElement("span"); 2005 navigate_next.classList.add("material-symbols-outlined"); 2006 navigate_next.textContent = "navigate_next"; 2007 2008 snap_before.appendChild(chevron_left); 2009 snap_arrow.appendChild(snap_before); 2010 2011 snap_next.appendChild(navigate_next); 2012 snap_arrow.appendChild(snap_next); 2013 2014 snap_wrap.appendChild(snap_arrow); 2015 2016 snap_class_name.style.width = "100%"; 2017 2018 document.getElementById("app-3cuniverse-snap").appendChild(snap_wrap); 2019 2020 const snap_extend = document.createElement("div"); 2021 snap_extend.classList.add("snap_extend"); 2022 snap_extend.style.display = "none"; 2023 const snap_extend_child = document.createElement("div"); 2024 snap_extend_child.classList.add("img_slide"); 2025 // snap_extend_child.addEventListener('click', photoCancel) 2026 const extend_button_div = document.createElement("div"); 2027 extend_button_div.classList.add("button"); 2028 extend_button_div.setAttribute("id", "snap_close_button"); 2029 const extend_button = document.createElement("button"); 2030 const snap_extend_span = document.createElement("span"); 2031 snap_extend_span.classList.add("material-symbols-outlined"); 2032 snap_extend_span.textContent = "close"; 2033 2034 snap_extend_span.addEventListener("click", photoCancel); 2035 2036 extend_button.appendChild(snap_extend_span); 2037 extend_button_div.appendChild(extend_button); 2038 snap_extend_child.appendChild(extend_button_div); 2039 2040 const button_slide = document.createElement("div"); 2041 button_slide.classList.add("button_slide"); 2042 2043 const button_slide_left = document.createElement("button"); 2044 const button_slide_right = document.createElement("button"); 2045 2046 button_slide_left.addEventListener("click", popupLeft); 2047 button_slide_right.addEventListener("click", popupRight); 2048 2049 const button_left_span = document.createElement("span"); 2050 button_left_span.classList.add("material-symbols-outlined"); 2051 button_left_span.textContent = "chevron_left"; 2052 2053 const button_right_span = document.createElement("span"); 2054 button_right_span.classList.add("material-symbols-outlined"); 2055 button_right_span.textContent = "navigate_next"; 2056 2057 snap_extend.appendChild(button_slide); 2058 button_slide.appendChild(button_slide_left); 2059 button_slide.appendChild(button_slide_right); 2060 button_slide_left.appendChild(button_left_span); 2061 button_slide_right.appendChild(button_right_span); 2062 2063 const swiper_div = document.createElement("div"); 2064 swiper_div.classList.add("swiper"); 2065 swiper_div.classList.add("swiper-container"); 2066
2067 swiper_div.setAttribute("id", "snapSwiper"); 2068 2069 const swiper_wrapper_div = document.createElement("div"); 2070 swiper_wrapper_div.classList.add("swiper-wrapper"); 2071 2072 let index = 0; 2073 snapPhotos.forEach((snap_photos) => { 2074 // snap_photos.photos.forEach((photo) => { 2075 const swiper_slide_div = document.createElement("div"); 2076 swiper_slide_div.classList.add("swiper-slide"); 2077 2078 const extend_photo_div = document.createElement("div"); 2079 extend_photo_div.classList.add("snap_photo"); 2080 2081 const contentsCheckbox = document.createElement("input"); 2082 contentsCheckbox.type = "checkbox"; 2083 contentsCheckbox.classList.add("snap_extend_txt"); 2084 contentsCheckbox.id = "contents" + index; 2085 2086 var checkboxLabel = document.createElement("label"); 2087 checkboxLabel.htmlFor = "contents" + index; 2088 checkboxLabel.classList.add("snap_extend_info"); 2089 2090 index++; 2091 2092 const option_pc = snap_photos.option_pc?.trim(); 2093 const option_mobile = snap_photos.option_mobile?.trim(); 2094 const option_s_pc = snap_photos.option_s_pc?.trim(); 2095 const option_s_mobile = snap_photos.option_s_mobile?.trim(); 2096 const check_pc_option = snap_photos.check_pc_option; 2097 2098 const p_option = document.createElement("p"); 2099 const span_option = document.createElement("span"); 2100 2101 if (check_pc_option == 1) { 2102 if (is_mobile == false) { 2103 span_option.textContent = option_pc; 2104 } else { 2105 span_option.textContent = option_mobile; 2106 } 2107 } else { 2108 span_option.textContent = option_mobile; 2109 } 2110 2111 p_option.appendChild(span_option); 2112 checkboxLabel.appendChild(p_option); 2113 2114 const p_option_s = document.createElement("p"); 2115 const span_option_s = document.createElement("span"); 2116 2117 if (check_pc_option == 1) { 2118 if (is_mobile == false) { 2119 span_option_s.textContent = option_s_pc; 2120 } else { 2121 span_option_s.textContent = option_s_mobile; 2122 } 2123 } else { 2124 span_option_s.textContent = option_s_mobile; 2125 } 2126 2127 p_option_s.appendChild(span_option_s); 2128 checkboxLabel.appendChild(p_option_s); 2129 2130 const contents_div = document.createElement("div"); 2131 let contents = snap_photos.contents; 2132 contents_div.textContent = contents; 2133 contents_div.classList.add("div_contents"); 2134 checkboxLabel.appendChild(contents_div); 2135 2136 extend_photo_div.appendChild(contentsCheckbox); 2137 extend_photo_div.appendChild(checkboxLabel); 2138 2139 const snap_photo_bg = document.createElement("div"); 2140 snap_photo_bg.classList.add("bg_gra"); 2141 2142 const snapbox_extend_photo = document.createElement("img"); 2143 snapbox_extend_photo.src = snap_photos.photos[0].photo; 2144 snapbox_extend_photo.classList.add("snapbox_extend_photo"); 2145
2146 extend_photo_div.appendChild(snap_photo_bg); 2147 2148 let is_video = snap_photos.photos[0].is_video; 2149 2150 // const snapbox_extend_video = document.createElement("video"); 2151 2152 const snapbox_extend_video = createVideoElement( 2153 snap_photos.photos[0].photo, 2154 { 2155 isExtended: true, 2156 } 2157 ); 2158 2159 extend_photo_div.appendChild(snapbox_extend_photo); 2160 extend_photo_div.appendChild(snapbox_extend_video); 2161 2162 if (is_video === 1) { 2163 snapbox_extend_photo.style.display = "none"; 2164 snapbox_extend_video.style.display = "block"; 2165 } else { 2166 snapbox_extend_video.style.display = "none"; 2167 snapbox_extend_photo.style.display = "block"; 2168 } 2169 2170 swiper_slide_div.appendChild(extend_photo_div); 2171 swiper_wrapper_div.appendChild(swiper_slide_div); 2172 2173 addPhotoBgClickEvent( 2174 snap_photo_bg, 2175 snap_photos, 2176 snapbox_extend_photo, 2177 snapbox_extend_video 2178 ); 2179 2180 const button_photo = document.createElement("div"); 2181 button_photo.classList.add("button_photo"); 2182 2183 const button_photo_left = document.createElement("button"); 2184 const button_photo_right = document.createElement("button"); 2185 2186 const button_photo_left_span = document.createElement("span"); 2187 button_photo_left_span.classList.add("material-symbols-outlined"); 2188 button_photo_left_span.textContent = "chevron_left"; 2189 2190 const button_photo_right_span = document.createElement("span"); 2191 button_photo_right_span.classList.add("material-symbols-outlined"); 2192 button_photo_right_span.textContent = "navigate_next"; 2193 2194 extend_photo_div.appendChild(button_photo); 2195 button_photo.appendChild(button_photo_left); 2196 button_photo.appendChild(button_photo_right); 2197 button_photo_left.appendChild(button_photo_left_span); 2198 button_photo_right.appendChild(button_photo_right_span); 2199 2200 const dotted = document.createElement("div"); 2201 dotted.classList.add("dotted"); 2202 2203 snap_photos.photos.forEach((photo, index) => { 2204 const dotted_div = document.createElement("div"); 2205 if (index == 0) { 2206 dotted_div.classList.add("on"); 2207 } 2208 2209 dotted.appendChild(dotted_div); 2210 }); 2211 extend_photo_div.appendChild(dotted); 2212 // }) 2213 }); 2214 2215 swiper_div.appendChild(swiper_wrapper_div); 2216 snap_extend_child.appendChild(swiper_div); 2217 2218 snap_extend.appendChild(snap_extend_child); 2219 document 2220 .getElementById("app-3cuniverse-snap") 2221 .appendChild(snap_extend); 2222 2223 console.log("refresh"); 2224 2225 addOutsideClickEvent(); 2226 } catch (err) { 2227 console.log("loadContents error", err); 2228 } 2229 } catch (err) { 2230 console.log("loadVerticalMobileContents error", err); 2231 } 2232 openSnapboxPhoto(); 2233 }; 2234 2235 try { 2236 fetch( 2237 "https://api.snapbox.ai/api/v1/snaps/service" + 2238 // "http://localhost:8000/api/v1/snaps/service" + 2239 "?" + 2240 new URLSearchParams({ 2241 code: snap_code, 2242 product: snap_product_code, 2243 cafe24: snap_mall_id, 2244 url: window.location.href, 2245 }) 2246 ) 2247 .then((response) => response.json()) 2248 .then(function (res) { 2249 // data를 ìëµ ë°ì íì ë¡ì§ 2250 snap_check_archive = res.is_archive; 2251 2252 // ì ë ¬ í¨ì 2253 const sortByIdAndOrder = (a, b) => { 2254 // 먼ì orderë¡ ë´ë¦¼ì°¨ì ì ë ¬ 2255 if (a.order !== b.order) { 2256 return a.order - b.order; 2257 } 2258 // idê° ê°ì ê²½ì° orderë¡ ì¤ë¦ì°¨ì ì ë ¬ 2259 return b.id - a.id; 2260 }; 2261 2262 snap_setting = res.setting; 2263 2264 if (snap_check_archive == 1) { 2265 snapArchivePhotos = res.photo[0]?.photos; 2266 if (snapArchivePhotos.length > 0) { 2267 snapArchivePhotos = snapArchivePhotos.sort(sortByIdAndOrder); 2268 loadArchiveContents(); 2269 } 2270 } else { 2271 let tempPhotos = res.photo; 2272 2273 const direction_vertical_mobile = 2274 snap_setting?.direction_vertical_mobile ?? 0; 2275 if (direction_vertical_mobile == 1 && is_mobile) { 2276 snapPhotos = [...tempPhotos]; 2277 loadVerticalMobileContents(); 2278 } else { 2279 snap_check_is_main = res.is_main; 2280 main_snap = res.main_snap; 2281 snap_brand_name = res.brand_name; 2282 snap_is_connected = res.magazine?.is_connected; 2283 tempPhotos.forEach((item) => { 2284 if (item.photos.length == 0) { 2285 //ì¬ì§ì´ ìì¼ë©´ delete item 2286 tempPhotos.splice(tempPhotos.indexOf(item), 1); 2287 } 2288 }); 2289 snapPhotos = tempPhotos; 2290 2291 if (snapPhotos) { 2292 loadContents(); 2293 } 2294 } 2295 } 2296 }) 2297 .catch((error) => { 2298 console.log("get error", error); 2299 }); 2300 } catch (err) { 2301 console.log("fetch error", err); 2302 } 2303 2304 const loadSnapSwipe = () => { 2305 if (snap_swiper == null) {
2306 snap_swiper = new SnapSwiper("#snapSwiper", { 2307 spaceBetween: 0, 2308 speed: 400, 2309 // loop: true, 2310 // initialSlide: index 2311 on: { 2312 slideChange: function () { 2313 //ì´ë²¤í¸ ëë 조건문ì¼ë¡ ì´ì©íë©´ ëë¤. 2314 // swiper.params.speed = 300 2315 2316 uncheckContents(); 2317 2318 playCurrentSlide(); 2319 }, 2320 2321 init: function () { 2322 console.log("swiper initialized"); 2323 }, 2324 }, 2325 }); 2326 } 2327 }; 2328 2329 const uncheckContents = () => { 2330 var checkboxes = document.getElementsByClassName("snap_extend_txt"); 2331 for (var i = 0; i < checkboxes.length; i++) { 2332 checkboxes[i].checked = false; 2333 } 2334 }; 2335 2336 const popupLeft = () => { 2337 if (snap_swiper.activeIndex > 0) { 2338 snap_swiper.slideTo(snap_swiper.activeIndex - 1); 2339 uncheckContents(); 2340 2341 const current = snapPhotos[snap_swiper.activeIndex].current_index; 2342 2343 const is_video = 2344 snapPhotos[snap_swiper.activeIndex].photos[current].is_video; 2345 2346 const snapbox_extend_video = document.getElementsByClassName( 2347 "snapbox_extend_video" 2348 ); 2349 2350 const snapbox_extend_photo = document.getElementsByClassName( 2351 "snapbox_extend_photo" 2352 ); 2353 2354 let video = snapbox_extend_video[snap_swiper.activeIndex]; 2355 let image = snapbox_extend_photo[snap_swiper.activeIndex]; 2356 2357 if (is_video === 1) { 2358 video.src = snapPhotos[snap_swiper.activeIndex].photos[current].photo; 2359 image.style.display = "none"; 2360 video.style.display = "block"; 2361 } else { 2362 image.src = snapPhotos[snap_swiper.activeIndex].photos[current].photo; 2363 video.style.display = "none"; 2364 image.style.display = "block"; 2365 } 2366 } 2367 }; 2368 2369 const popupRight = () => { 2370 if (snap_swiper.activeIndex < snap_swiper.slides.length - 1) { 2371 snap_swiper.slideTo(snap_swiper.activeIndex + 1); 2372 uncheckContents(); 2373 2374 const current = snapPhotos[snap_swiper.activeIndex].current_index; 2375 2376 const is_video = 2377 snapPhotos[snap_swiper.activeIndex].photos[current].is_video; 2378 2379 const snapbox_extend_video = document.getElementsByClassName( 2380 "snapbox_extend_video" 2381 ); 2382 2383 const snapbox_extend_photo = document.getElementsByClassName( 2384 "snapbox_extend_photo" 2385 ); 2386 2387 let video = snapbox_extend_video[snap_swiper.activeIndex]; 2388 let image = snapbox_extend_photo[snap_swiper.activeIndex]; 2389 2390 if (is_video === 1) { 2391 video.src = snapPhotos[snap_swiper.activeIndex].photos[current].photo; 2392 image.style.display = "none"; 2393 video.style.display = "block"; 2394 } else { 2395 image.src = snapPhotos[snap_swiper.activeIndex].photos[current].photo; 2396 video.style.display = "none"; 2397 image.style.display = "block"; 2398 } 2399 2400 preload_img = new Image(); 2401 preload_img.src = snapPhotos[snap_swiper.activeIndex].photos[ 2402 current + 1 2403 ] 2404 ? snapPhotos[snap_swiper.activeIndex].photos[current + 1].photo 2405 : ""; 2406 } 2407 }; 2408 2409 const moveRight = () => { 2410 const dotted = document.getElementsByClassName("dotted"); 2411 let children = dotted[snap_swiper.activeIndex].childNodes; 2412 const current_index = snapPhotos[snap_swiper.activeIndex].current_index; 2413 children.forEach((element, childIndex) => { 2414 element.classList.remove("on"); 2415 if (childIndex === current_index) { 2416 element.classList.add("on"); 2417 } 2418 }); 2419 }; 2420 const moveLeft = () => { 2421 const dotted = document.getElementsByClassName("dotted"); 2422 let children = dotted[snap_swiper.activeIndex].childNodes; 2423 const current_index = snapPhotos[snap_swiper.activeIndex].current_index; 2424 children.forEach((element, childIndex) => { 2425 element.classList.remove("on"); 2426 if (childIndex === current_index) { 2427 element.classList.add("on"); 2428 } 2429 }); 2430 }; 2431 2432 const snapBefore = () => { 2433 const scrollableDiv = document.querySelector(".snap_slide"); 2434 scrollableDiv.style.scrollBehavior = "smooth"; 2435 const snap_slide = document.getElementsByClassName("snap_slide"); 2436 const snap_feed = document.getElementsByClassName("snap_feed"); 2437 const width = snap_feed[0].offsetWidth + 15.5; 2438 snap_slide[0].scrollLeft -= width; 2439 }; 2440 2441 const snapNext = () => { 2442 const scrollableDiv = document.querySelector(".snap_slide"); 2443 scrollableDiv.style.scrollBehavior = "smooth"; 2444 const snap_slide = document.getElementsByClassName("snap_slide"); 2445 const snap_feed = document.getElementsByClassName("snap_feed"); 2446 const width = snap_feed[0].offsetWidth + 15.5; 2447 snap_slide[0].scrollLeft += width; 2448 }; 2449 2450 const snapMainBefore = () => { 2451 if (snap_check_is_main == 1 && is_snap_auto_scroll == 1) { 2452 is_snap_auto_Running = 0; 2453 clearInterval(snap_auto_interval_id); 2454 } 2455 const scrollableDiv = document.querySelector(".snap_main_slide"); 2456 scrollableDiv.style.scrollBehavior = "smooth"; 2457 const snap_slide = document.getElementsByClassName("snap_main_slide"); 2458 const snap_feed = document.getElementsByClassName("snap_main_feed"); 2459 const width = snap_feed[0].offsetWidth + 15.5; 2460 snap_slide[0].scrollLeft -= width; 2461 }; 2462 2463 const snapMainNext = () => { 2464 if (snap_check_is_main == 1 && is_snap_auto_scroll == 1) { 2465 is_snap_auto_Running = 0; 2466 clearInterval(snap_auto_interval_id); 2467 } 2468 const scrollableDiv = document.querySelector(".snap_main_slide"); 2469 scrollableDiv.style.scrollBehavior = "smooth"; 2470 const snap_slide = document.getElementsByClassName("snap_main_slide"); 2471 const snap_feed = document.getElementsByClassName("snap_main_feed"); 2472 const width = snap_feed[0].offsetWidth + 15.5; 2473 snap_slide[0].scrollLeft += width; 2474 }; 2475 } 2476}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.