1$(function () { 2 Browser.init(); 3 Common.init(); 4 // SliderList.init(); 5 //TitleHight.init(); 6 CategoryPage.init(); 7 ProductPage.init(); 8 ResultPage.init(); 9 ShowSlider.init(); 10}); 11 12$(function () { 13 function sliderSetting() { 14 var width = $(window).width(); 15 if (width <= 768) { 16 $("#header").removeClass("fixed"); 17 } else { 18 $("#header").addClass("fixed"); 19 } 20 } 21 sliderSetting(); 22 $(window).resize(function () { 23 sliderSetting(); 24 }); 25}); 26 27var Common = { 28 init: function () { 29 Common.eventTracking(); 30 Common.productsMenu(); 31 //Common.fixedNav(); 32 Common.drawerNav(); 33 Common.titvertical(); 34 Common.pageTop(); 35 Common.smoothScroll(); 36 Common.searchBox(); 37 Common.tab(); 38 Common.anchor(); 39 Common.showMenu(); 40 Common.menuSub(); 41 }, 42 43 eventTracking: function () { 44 var pcData = "data-pc-tmevent"; 45 var spData = "data-sp-tmevent"; 46 var $pc = $("[" + pcData + "]"); 47 var $sp = $("[" + spData + "]"); 48 var tag; 49 $pc.each(function () { 50 var self = $(this); 51 self.on({ 52 click: function () { 53 if (Browser.responsivePCSP === "pc") { 54 tag = self.attr(pcData); 55 } else { 56 tag = self.attr(spData); 57 } 58 tmEvent(tag); 59 }, 60 }); 61 }); 62 }, 63 productsMenu: function () { 64 // $('#header .hover').each(function(){ 65 // var chaffle = new Chaffle(this); 66 // $(this).on({ 67 // 'mouseenter' : function(){ 68 // if ( Browser.responsivePCSP === 'pc' ) { 69 // $(this).width( $(this).width() ); 70 // chaffle.init(); 71 // Browser.addResizeHandler(function(){ 72 // $('#header .hover').css({'width':'auto'}); 73 // }); 74 // } 75 // } 76 // }); 77 // }); 78 79 // new SimpleBar(document.getElementById('products-list-body'), { 80 // autoHide: false 81 // }); 82 83 var header_height = $("#header").innerHeight(); 84 var st = 0; 85 $("#header nav ul > li").on({ 86 mouseenter: function () { 87 if (Browser.responsive === "pc" && $(this).hasClass("products")) { 88 $(this).addClass("on"); 89 tmEvent("PC ããããã>ååãæ¢ããã¦ã¹ãªã¼ãã¼"); 90 91 st = Browser.scrollY; 92 $("body,html").css({ overflow: "hidden", height: "100%" }); 93 var products_list_y = $("#header .products-list").position().top; 94 var header_y = Browser.scrollY; 95 if (header_y > 88) { 96 header_y = 88; 97 } 98 $("#header .products-list").height( 99 Browser.windowHeight - products_list_y - 80 + 88 100 ); 101 $("#header") 102 .velocity("stop") 103 .velocity( 104 { height: Browser.windowHeight + 88 }, 105 { duration: 100 }, 106 { easing: [0.19, 1, 0.22, 1] } 107 ); 108 109 $("#header .products-list").scrollTop(0); 110 } 111 }, 112 mouseleave: function () { 113 $(this).removeClass("on"); 114 if (Browser.responsive === "pc" && $(this).hasClass("products")) { 115 $("body,html").scrollTop(st); 116 $("body,html").css({ overflow: "visible", height: "auto" }); 117 $("#header") 118 .velocity("stop") 119 .velocity( 120 { height: header_height }, 121 { duration: 150 }, 122 { easing: [0.19, 1, 0.22, 1] } 123 ); 124 $("#header .products-list a .en").css({ 125 width: "auto", 126 height: "auto", 127 }); 128 } 129 }, 130 }); 131 132 $("#header .products-list a .en").each(function () { 133 var chaffle = new Chaffle(this); 134 $(this) 135 .closest("a") 136 .on({ 137 mouseenter: function () { 138 if (Browser.responsive === "pc") { 139 $(this).find(".en").width($(this).find(".en").width()); 140 $(this).find(".en").height($(this).find(".en").height());
141 chaffle.init(); 142 } 143 }, 144 }); 145 }); 146 }, 147 fixedNav: function () { 148 Browser.addScrollHandler(function () { 149 if (Browser.responsive === "pc") { 150 if (Browser.scrollY > 88) { 151 if (!$("#header").hasClass("fixed")) { 152 $("#header").removeClass("absolute"); 153 $("#header").addClass("fixed"); 154 } 155 } else { 156 if ($("#header").hasClass("fixed")) { 157 $("#header").addClass("absolute"); 158 $("#header").removeClass("fixed"); 159 } 160 } 161 } 162 }); 163 Browser.addResizeHandler(function () { 164 if (Browser.responsive !== "pc") { 165 $("#header").removeClass("absolute"); 166 $("#header").removeClass("fixed"); 167 } 168 }); 169 }, 170 drawerNav: function () { 171 var st = 0; 172 $("#drawer-btn").on("click", function () { 173 if (!$("#drawer-content").hasClass("on")) { 174 tmEvent("SPã¡ãã¥ã¼>ã¡ãã¥ã¼ãã¿ã³"); 175 st = Browser.scrollY; 176 $("#drawer-content").addClass("on"); 177 $("#drawer-content").scrollTop(0); 178 $("body,html").css({ overflow: "hidden", height: "100%" }); 179 $("#drawer-btn") 180 .velocity("stop") 181 .velocity( 182 { 183 translateX: "100px", 184 }, 185 { 186 duration: 100, 187 easing: [0.19, 1, 0.22, 1], 188 complete: function () { 189 $("#drawer-btn").addClass("close"); 190 $("#drawer-btn p").html("CLOSE"); 191 $("#drawer-btn").velocity( 192 { 193 translateX: "0px", 194 }, 195 { 196 duration: 100, 197 easing: [0.19, 1, 0.22, 1], 198 } 199 ); 200 }, 201 } 202 ); 203 } else { 204 tmEvent("SPã¡ãã¥ã¼>ã¡ãã¥ã¼ãã¿ã³éãã"); 205 $("#drawer-content").removeClass("on"); 206 $("body,html").css({ overflow: "visible", height: "auto" }); 207 $("body,html").scrollTop(st); 208 $("#drawer-btn") 209 .velocity("stop") 210 .velocity( 211 { 212 translateX: "100px", 213 }, 214 { 215 duration: 100, 216 easing: [0.19, 1, 0.22, 1], 217 complete: function () { 218 $("#drawer-btn").removeClass("close"); 219 $("#drawer-btn p").html("MENU"); 220 $("#drawer-btn").velocity( 221 { 222 translateX: "0px", 223 }, 224 { 225 duration: 100, 226 easing: [0.19, 1, 0.22, 1], 227 } 228 ); 229 }, 230 } 231 ); 232 } 233 }); 234 var timer = false; 235 Browser.addScrollHandler(function () { 236 if (Browser.responsivePCSP === "sp") { 237 if (timer !== false) { 238 clearTimeout(timer); 239 } 240 if ($("#drawer-btn").hasClass("hidden")) { 241 $("#drawer-btn").removeClass("hidden"); 242 } 243 timer = setTimeout(function () { 244 if (Browser.scrollY > 0 && !$("#drawer-btn").hasClass("close")) { 245 $("#drawer-btn").addClass("hidden"); 246 } 247 }, 1000); 248 } 249 }); 250 $(".content-wrapper").on("touchstart", function () { 251 if (Browser.responsivePCSP === "sp") { 252 $("#drawer-btn").removeClass("hidden"); 253 } 254 }); 255 }, 256 titvertical: function () { 257 $(".tit-vertical").each(function () { 258 var self = $(this); 259 var h = self.find("p").width(); 260 self.height(h); 261 }); 262 }, 263 pageTop: function () { 264 var limit = 0; 265 var bottom = $("#footer").innerHeight() - 125; 266 var top = 0; 267 if ($(".ContentsKv").length) { 268 top = $(".top-mainvis-block").height() - Browser.windowHeight * 0.5 + 100; 269 } else { 270 top = 0; 271 } 272 if ($("#breadcrumbs").length) { 273 bottom += $("#breadcrumbs").innerHeight() + 25; 274 } 275 Browser.addScrollHandler(pagetopFunc); 276 function pagetopFunc() { 277 if (Browser.responsivePCSP === "pc") { 278 limit = $("body").innerHeight() - bottom - Browser.windowHeight + 10; 279 280 if (Browser.scrollY > top) { 281 if (!$("#pagetop").hasClass("show")) { 282 $("#pagetop").addClass("show"); 283 $("#pagetop") 284 .velocity("stop") 285 .velocity( 286 { bottom: 10 },
287 { duration: 500, easing: [0.19, 1, 0.22, 1] } 288 ); 289 } 290 if (Browser.scrollY > limit) { 291 $("#pagetop") 292 .velocity("stop") 293 .css({ position: "absolute", bottom: bottom }); 294 } else { 295 $("#pagetop") 296 .velocity("stop") 297 .css({ position: "fixed", bottom: 10 }); 298 } 299 } else { 300 if ($("#pagetop").hasClass("show")) { 301 $("#pagetop").removeClass("show"); 302 $("#pagetop") 303 .velocity("stop") 304 .velocity( 305 { bottom: -150 }, 306 { duration: 500, easing: [0.19, 1, 0.22, 1] } 307 ); 308 } 309 } 310 } else if (Browser.responsivePCSP === "sp") { 311 if (Browser.scrollY > 50) { 312 if (!$("#pagetop").hasClass("show")) { 313 $("#pagetop").addClass("show"); 314 } 315 } else { 316 if ($("#pagetop").hasClass("show")) { 317 $("#pagetop").removeClass("show"); 318 } 319 } 320 } 321 } 322 pagetopFunc(); 323 324 $("#pagetop").on("click", function () { 325 $("body").velocity("scroll", { 326 duration: 1000, 327 easing: [0.19, 1, 0.22, 1], 328 }); 329 $(this).removeClass("show"); 330 }); 331 }, 332 333 //========== smoothScroll ==========// 334 smoothScroll: function () { 335 if (Browser.responsive === "pc") { 336 var urlHash = location.hash; 337 338 if (urlHash) { 339 $("body,html").stop().scrollTop(0); 340 341 if ($(".slick-wrapper").length) { 342 var slickLength = $(".slick-wrapper").length; 343 $(".slick-wrapper").each(function (i) { 344 $(this).on("init", function (slick) { 345 if (slickLength - 1 <= i) { 346 setTimeout(function () { 347 scrollToAnker(urlHash); 348 }, 500); 349 } 350 }); 351 }); 352 } else { 353 scrollToAnker(urlHash); 354 } 355 } 356 357 $('a[href^="#"]').click(function () { 358 // ã¡ã¿ã©ãã¼ãã¼ã¸åé¿ 359 if ($(this).hasClass("js-modal")) { 360 return; 361 } 362 var href = $(this).attr("href"); 363 364 var hash = href === "#" || href === "" ? "html" : href; 365 366 scrollToAnker(hash); 367 368 return false; 369 }); 370 371 function scrollToAnker(hash) { 372 var target = $(hash); 373 target.velocity("stop").velocity("scroll", { 374 duration: 1000, 375 // offset: -88, 376 offset: -10, 377 easing: [0.19, 1, 0.22, 1], 378 }); 379 } 380 } else if (Browser.responsive === "sp") { 381 $('a[href^="#"]').click(function () { 382 if ($(this).hasClass("js-modal")) { 383 return; 384 } 385 var href = $(this).attr("href"); 386 var target = $(href === "#" || href === "" ? "html" : href); 387 target.velocity("stop").velocity("scroll", { 388 duration: 1000, 389 // offset: 0, 390 offset: -10, 391 easing: [0.19, 1, 0.22, 1], 392 }); 393 return false; 394 }); 395 } 396 }, 397 398 searchBox: function () { 399 $(".search").on("click", function () { 400 var self = $(this); 401 var searchBody = self.find(".searchBody"); 402 self.addClass("show"); 403 searchBody.addClass("show"); 404 searchBody.find("input.iSearchAssist").focus(); 405 $(document).on("click touchend", function (event) { 406 if (!$(event.target).closest(".search").length) { 407 self.removeClass("show"); 408 searchBody.removeClass("show"); 409 } 410 }); 411 }); 412 $(".search-home").click(function () { 413 var self = $(this); 414 var searchBody = self.find(".searchBody"); 415 self.addClass("show"); 416 searchBody.addClass("show"); 417 searchBody.find("input.iSearchAssist").focus(); 418 $(document).on("click touchend", function (event) { 419 if (!$(event.target).closest(".search-home").length) { 420 self.removeClass("show"); 421 searchBody.removeClass("show"); 422 } 423 }); 424 }); 425 }, 426 removehash: function () { 427 var uri = window.location.toString(); 428 if (uri.indexOf("#") > 0) { 429 var clean_uri = uri.substring(0, uri.indexOf("#")); 430 window.history.replaceState({}, document.title, clean_uri); 431 } 432 }, 433 tab: function () { 434 $(".js-tab a").on("click", function (e) { 435 e.preventDefault(); 436 let target = $(this).attr("href").split("#")[1]; 437 $(this).parent().addClass("active").siblings().removeClass("active"); 438 $('[data-id="' + target + '"]') 439 .addClass("is-active") 440 .siblings() 441 .removeClass("is-active"); 442 history.pushState({}, "", "#" + target); 443 $(".tab-content-close").addClass("is-active"); 444 $(".tab-content-back").addClass("is-active"); 445 }); 446 447 if ($(".js-tab").length) { 448 if (location.hash) { 449 $(".js-tab li a[href='" + location.hash + "']").trigger("click"); 450 $(".archive-tab li span[data-hash='" + location.hash + "']").trigger( 451 "click" 452 ); 453 $(".p-pagi a").each(function (i, a) { 454 $(a).attr( 455 "href", 456 $(a).attr("href") + "#" + $(a).parents(".tab-box").attr("data-id") 457 ); 458 }); 459 } else { 460 if ($(window).width() > 767) { 461 $(".js-tab li:first-child a").trigger("click"); 462 } 463 history.replaceState(null, null, " "); 464 } 465 } 466 }, 467 menuSub: function () { 468 $(document).on("click", ".js-menu-sub .menu-link", function (e) { 469 $(".menu-sub").slideToggle(200); 470 $(this).parent().toggleClass("is-sub"); 471 if ($(window).width() > 767) { 472 $(".box-overlay--sub").toggleClass("is-active"); 473 $("body").stop().toggleClass("menu-open"); 474 } 475 }); 476 $(document).on("click", ".js-menu-sub-close", function (e) { 477 $(".js-menu-sub").removeClass("is-sub"); 478 $(".menu-sub").slideUp(200); 479 $(".box-overlay--sub").removeClass("is-active"); 480 $("body").removeClass("menu-open"); 481 Common.removehash(); 482 }); 483 484 $(document).on("click", ".js-search", function (e) { 485 $(".p-search__box").slideToggle(200); 486 $(".box-overlay--search").toggleClass("is-active"); 487 }); 488 489 $(document).on("click", ".js-search-close", function (e) {
490 $(".p-search__box").slideUp(200); 491 $(".box-overlay--search").removeClass("is-active"); 492 }); 493 494 $(document).on("click", ".js-tab-content-back", function (e) { 495 $(".tab-box").hide(); 496 $(".tab-box").removeClass("is-active"); 497 $(".tab-content-close").removeClass("is-active"); 498 $(".tab-content-back").removeClass("is-active"); 499 Common.removehash(); 500 }); 501 }, 502 showMenu: function () { 503 $(document).on("click", ".js-menu", function (e) { 504 $(this).toggleClass("is-active"); 505 $(".box-overlay--sub").toggleClass("is-active"); 506 if ($(window).width() < 769) { 507 $("body").stop().toggleClass("menu-open"); 508 $(".p-header__menu").slideToggle(300); 509 } 510 $(".tab-box").removeClass("is-active"); 511 $(".menu-sub").slideUp(200); 512 $(".js-menu-sub").removeClass("is-sub"); 513 Common.removehash(); 514 }); 515 $(".js-header-menu-close").on("click", function (e) { 516 $(".box-overlay--sub").removeClass("is-active"); 517 $(".js-menu").removeClass("is-active"); 518 if ($(window).width() < 769) { 519 $("body").stop().removeClass("menu-open"); 520 $(".p-header__menu").slideUp(200); 521 } 522 $(".tab-box").removeClass("is-active"); 523 $(".menu-sub").slideUp(200); 524 $(".js-menu-sub").removeClass("is-sub"); 525 Common.removehash(); 526 }); 527 }, 528 anchor: function () { 529 $('.anchor-link').click(function () { 530 if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { 531 var target = $(this.hash); 532 target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 533 534 $(".anchor-link.is-active").removeClass("is-active"); 535 $(this).addClass("is-active"); 536 537 if (target.length) { 538 $('html,body').animate({ 539 scrollTop: target.offset().top 540 }, 1000); 541 return false; 542 } 543 } 544 }); 545 $(window).scroll(function () { 546 let scroll_top = $(this).scrollTop(); 547 $('.aside-menu li a').each(function () { 548 let currentLink = $(this); 549 let target = $(this).attr('href'); 550 551 if ($(target).length > 0) { 552 let elm = $(target); 553 if (elm.offset().top <= scroll_top + (window.innerHeight / 2) && (elm.offset().top + elm.height()) > scroll_top) { 554 $('.aside-menu li a').removeClass("is-active"); 555 currentLink.addClass("is-active"); 556 } 557 else { 558 currentLink.removeClass("is-active"); 559 } 560 } 561 }) 562 }); 563 $(window).scroll(function () { 564 let scroll_top = $(this).scrollTop(); 565 $('.sec-nav__menu li a').each(function () { 566 let currentLink = $(this); 567 let target = $(this).attr('href'); 568 569 if ($(target).length > 0) { 570 let elm = $(target); 571 if (elm.offset().top <= scroll_top + (window.innerHeight / 2) && (elm.offset().top + elm.height()) > scroll_top) { 572 $('.sec-nav__menu li a').removeClass("is-active"); 573 currentLink.addClass("is-active"); 574 } 575 else { 576 currentLink.removeClass("is-active"); 577 } 578 } 579 }) 580 }); 581 }, 582}; 583 584var TopPage = { 585 first: false, 586 init: function () { 587 $("html,body").animate({ scrollTop: 0 }, "1"); 588 589 TopPage.news(); 590 TopPage.loading(); 591 }, 592 loading: function () { 593 $(".top-mainvis-block").css({ height: $(window).height() }); 594 $("body").imagesLoaded({ background: ".ContentsKvMainInner" }, function () { 595 setTimeout(function () { 596 new ContentsSlider(); 597 new TwitterInfo(); 598 new StylingList(); 599 if (Browser.responsive === "sp") { 600 if ($(".logo").hasClass("logo-2021ss")) { 601 return; 602 }
603 TopPage.intro(); 604 $.cookie("access", "on", { 605 expires: 365, 606 path: "/", 607 }); 608 } 609 }, 800); 610 }); 611 }, 612 intro: function () { 613 if ($.cookie("access") !== "on") { 614 TopPage.first = true; 615 var $intro = $("#Intro"); 616 $intro.show(); 617 var $finger = $intro.find(".finger"); 618 setTimeout(function () { 619 $finger.addClass("swipe"); 620 $intro.find("p.swipe").addClass("show"); 621 $intro.find("p.swipe span").each(function (j) { 622 var self = $(this); 623 setTimeout(function () { 624 self.addClass("show"); 625 }, 50 * j); 626 }); 627 setTimeout(function () { 628 $intro.find("p.swipe span").each(function (j) { 629 var self = $(this); 630 setTimeout(function () { 631 self.removeClass("show").addClass("hide"); 632 }, 50 * j); 633 }); 634 }, 1000); 635 }, 500); 636 setTimeout(function () { 637 $finger.addClass("scroll"); 638 $intro.find("p.scroll").addClass("show"); 639 $intro.find("p.scroll span").each(function (j) { 640 var self = $(this); 641 setTimeout(function () { 642 self.addClass("show"); 643 }, 50 * j); 644 }); 645 setTimeout(function () { 646 $intro.find("p.scroll span").each(function (j) { 647 var self = $(this); 648 setTimeout(function () { 649 self.removeClass("show").addClass("hide"); 650 }, 50 * j); 651 }); 652 }, 1000); 653 }, 2400); 654 setTimeout(function () { 655 $intro.fadeOut(700); 656 }, 4300); 657 } 658 }, 659 news: function () { 660 $(".news-section .slick-wrapper").slick({ 661 slidesToShow: 4, 662 slidesToScroll: 4, 663 infinite: true, 664 responsive: [ 665 { 666 breakpoint: 1280, 667 settings: { 668 slidesToShow: 3, 669 slidesToScroll: 3, 670 }, 671 }, 672 { 673 breakpoint: 940, 674 settings: { 675 slidesToShow: 2, 676 slidesToScroll: 2, 677 }, 678 }, 679 { 680 breakpoint: 768, 681 settings: { 682 slidesToShow: 1, 683 slidesToScroll: 1, 684 centerMode: true, 685 dots: true, 686 }, 687 }, 688 ], 689 }); 690 }, 691}; 692 693var SliderList = { 694 init: function () { 695 $(".list-slide .slick-wrapper").slick({ 696 infinite: false, 697 arrows: false, 698 slidesToShow: 1, 699 slidesToScroll: 1, 700 variableWidth: true, 701 dots: false, 702 }); 703 }, 704}; 705 706var SliderMovie = { 707 init: function () { 708 $(".movie-slider").slick({ 709 infinite: true, 710 arrows: true, 711 appendArrows: $('.movie-nav'), 712 slidesToShow: 3, 713 slidesToScroll: 1, 714 centerMode: true, 715 centerPadding: '50px', 716 nextArrow: '<span class="slick-next"><svg xmlns="http://www.w3.org/2000/svg" width="11.133" height="18.871" viewBox="0 0 11.133 18.871"><path id="é·æ¹å½¢_740" data-name="é·æ¹å½¢ 740" d="M635.739,3052.99l9,8.717-9,8.717" transform="translate(-635.043 -3052.271)" fill="none" stroke="#fff" stroke-width="2" fill-rule="evenodd"/></svg></span>', 717 prevArrow: '<span class="slick-prev"><svg xmlns="http://www.w3.org/2000/svg" width="11.133" height="18.871" viewB
717ox="0 0 11.133 18.871"><path id="é·æ¹å½¢_740" data-name="é·æ¹å½¢ 740" d="M644.739,3052.99l-9,8.717,9,8.717" transform="translate(-634.302 -3052.271)" fill="none" stroke="#fff" stroke-width="2" fill-rule="evenodd"/></svg></span>', 718 responsive: [{ 719 breakpoint: 750, 720 settings: { 721 infinite: true, 722 slidesToShow: 1, 723 centerMode: true, 724 centerPadding: '15px', 725 } 726 }] 727 }); 728 }, 729}; 730 731var ShowSlider = { 732 init: function () { 733 $('.new-movie__button').on('click', function () { 734 $(this).hide(); 735 $(this).parents('.new-movie').find('.new-movie__slider').show(); 736 SliderMovie.init(); 737 }) 738 } 739} 740 741// var TitleHight = { 742// init : function(){ 743// var h = $('#section-list ul li h3').outerHeight(); 744// $('#section-list ul li .pic').css('margin-top', -h + 'px'); 745// } 746// }; 747 748var CategoryPage = { 749 init: function () { 750 $("body.category .section-content").imagesLoaded(function () { 751 $("body.category .section-content li").each(function (i) { 752 var y = $(this).offset().top; 753 var self = $(this); 754 // if( y < Browser.windowHeight - 100 ){ 755 setTimeout(function () { 756 self.addClass("show"); 757 var $h2 = self.find("a h2"); 758 759 var line = $h2.html(); 760 var lineArray = line.split("<br>"); 761 $h2.text(""); 762 var newText = ""; 763 for (var i = 0; i < lineArray.length; i++) { 764 var text = lineArray[i]; 765 if (i > 0) { 766 newText += "<br>"; 767 } 768 text.split("").forEach(function (c) { 769 if (c === " ") { 770 c = "\u00a0"; 771 newText += c; 772 } else { 773 newText += "<span>" + c + "</span>"; 774 } 775 }); 776 } 777 $h2.html(newText); 778 $h2.find("span").each(function (j) { 779 var self = $(this); 780 setTimeout(function () { 781 self.addClass("show"); 782 }, 50 * j); 783 }); 784 }, 150 * i); 785 // } 786 }); 787 788 // Browser.addScrollHandler(function(){ 789 // $('body.category .section-content li').each(function() { 790 // var y = $(this).offset().top - Browser.windowHeight*0.5; 791 // var self = $(this); 792 // if( Browser.scrollY > y ){ 793 // if( !self.hasClass('show') ){ 794 // self.addClass('show'); 795 // var $h2 = self.find('a h2'); 796 // var text = $h2.text(); 797 // var newText = ''; 798 // $h2.text(''); 799 // text.split('').forEach(function (c) { 800 // if( c === ' ' ){ 801 // c = '\u00a0'; 802 // newText += '<br>'; 803 // }else{ 804 // newText += '<span>'+c+'</span>'; 805 // } 806 // $h2.html(newText); 807 // }); 808 // $h2.find('span').each(function(j) { 809 // var self = $(this); 810 // setTimeout(function(){ 811 // self.addClass('show'); 812 // },50*j); 813 // }); 814 // } 815 // } 816 // }); 817 // }); 818 }); 819 }, 820}; 821 822var ProductPage = { 823 init: function () { 824 ProductPage.step(); 825 ProductPage.listSlide(); 826 ProductPage.heighReplace(); 827 $(".acc-body").imagesLoaded(function () { 828 ProductPage.moreAcc(); 829 }); 830 }, 831 listSlide: function () { 832 if ($(".list-slide ul:not(.list-short)").length) { 833 var w = 0; 834 $(".list-slide ul li").each(function () { 835 w += $(this).outerWidth(true); 836 }); 837 $(".list-slide ul").scrollLeft(w - Browser.windowWidth); 838 $(".list-slide").on("touchstart", function () { 839 $(".list-slide ul").stop(); 840 }); 841 Browser.addScrollHandler(function () { 842 var t = $(".list-slide").offset().top - Browser.windowHeight * 0.85; 843 if (Browser.scrollY > t) { 844 if (!$(".list-slide").hasClass("show")) { 845 $(".list-slide").addClass("show"); 846 $(".list-slide ul").animate( 847 { scrollLeft: 0 }, 848 { duration: 1200, easing: "easeOutQuad" } 849 ); 850 } 851 } 852 }); 853 } 854 }, 855 step: function () { 856 $(".tech-section .slick-wrapper, .style-section .slick-wrapper").slick({ 857 lazyLoad: "progressive", 858 slidesToShow: 1, 859 slidesToScroll: 1, 860 infinite: true, 861 dots: true, 862 adaptiveHeight: true, 863 }); 864 }, 865 heighReplace: function () { 866 function argHeight() { 867 var setPrt = $(".detail-list"), 868 setChd = setPrt.find("li .detail-set .detail-section"); 869 var setPrt2 = $(".detail-list"), 870 setChd2 = setPrt2.find("li .box"); 871 872 prtWidth = setPrt.outerWidth(); 873 prtWidth2 = setPrt2.outerWidth(); 874 chdWidth = setChd.outerWidth(); 875 chdWidth2 = setChd2.outerWidth(); 876 setNum = Math.floor(prtWidth / chdWidth); 877 setNum2 = Math.floor(prtWidth2 / chdWidth2); 878 chdLength = setChd.length; 879 chdLength2 = setChd2.length; 880 setChd.css({ height: "auto" }); 881 setChd2.css({ height: "auto" }); 882 883 setPrt.each(function () { 884 var h = 0; 885 setChd.each(function (i) { 886 var self = $(this), 887 i = i + 1, 888 hSet = self.outerHeight(), 889 pdTop = parseInt(self.css("padding-top")), 890 pdBtm = parseInt(self.css("padding-bottom")), 891 boxSizing = self.css("box-sizing"); 892 self.addClass("heightReplace"); 893 894 if (hSet > h) { 895 h = hSet; 896 } 897 898 if (boxSizing === "border-box") { 899 setPrt.find(".heightReplace").css({ height: h }); 900 } else { 901 setPrt.find(".heightReplace").css({ height: h - (pdTop + pdBtm) }); 902 } 903 904 if (i % setNum == 0 || i == chdLength) { 905 h = 0; 906 setChd.removeClass("heightReplace"); 907 } 908 }); 909 }); 910 911 setPrt2.each(function () { 912 var h = 0; 913 setChd2.each(function (i) { 914 var self = $(this), 915 i = i + 1, 916 hSet = self.outerHeight(), 917 pdTop = parseInt(self.css("padding-top")), 918 pdBtm = parseInt(self.css("padding-bottom")), 919 boxSizing = self.css("box-sizing"); 920 self.addClass("heightReplace"); 921 922 if (hSet > h) { 923 h = hSet; 924 } 925 926 if (boxSizing === "border-box") { 927 setPrt2.find(".heightReplace").css({ height: h }); 928 } else { 929 setPrt2.find(".heightReplace").css({ height: h - (pdTop + pdBtm) }); 930 } 931 932 if (i % setNum2 == 0 || i == chdLength2) { 933 h = 0; 934 setChd2.removeClass("heightReplace"); 935 } 936 }); 937 }); 938 } 939 $(window) 940 .on("load resize", function () {
941 argHeight(); 942 }) 943 .resize(); 944 }, 945 moreAcc: function () { 946 if (Browser.responsive === "pc") { 947 // PC 948 $(".acc-body").show(); 949 950 $("#product-different .acc-body, .shop-block .acc-body") 951 .wrap("<div class='acc-body-wrapper'></div>") 952 .show(); 953 $(".acc-body-wrapper").each(function () { 954 $(this).attr("data-height", $(this).innerHeight()).hide(); 955 }); 956 957 $("#product-different .acc-btn, .shop-btn").on("click", function () { 958 var $acc_body = $(this).parent().find(".acc-body-wrapper"); 959 var h = $acc_body.attr("data-height") + "px"; 960 if (!$(this).hasClass("active")) { 961 $(this).addClass("active"); 962 $acc_body.css({ display: "block", height: 0, overflow: "hidden" }); 963 $acc_body 964 .velocity("stop") 965 .velocity({ height: h }, { duration: 500, easing: "ease-out" }); 966 } else { 967 $(this).removeClass("active"); 968 $acc_body.velocity("stop").velocity( 969 { height: 0 }, 970 { 971 duration: 500, 972 easing: "ease-out", 973 complete: function () { 974 $(this).css({ height: "auto", display: "none" }); 975 }, 976 } 977 ); 978 } 979 return false; 980 }); 981 } else if (Browser.responsive === "sp" || Browser.responsive === "tb") { 982 // SP 983 $(".acc-body").wrap("<div class='acc-body-wrapper'></div>").show(); 984 $(".acc-body-wrapper").each(function () { 985 $(this).attr("data-height", $(this).innerHeight()).hide(); 986 }); 987 $(".acc-btn, .shop-btn").on("click", function () { 988 var $acc_body = $(this).parent().find(".acc-body-wrapper"); 989 var h = $acc_body.attr("data-height") + "px"; 990 if (!$(this).hasClass("active")) { 991 $(this).addClass("active"); 992 $acc_body.css({ display: "block", height: 0, overflow: "hidden" }); 993 $acc_body 994 .velocity("stop") 995 .velocity({ height: h }, { duration: 500, easing: "ease-out" }); 996 } else { 997 $(this).removeClass("active"); 998 $acc_body.velocity("stop").velocity( 999 { height: 0 }, 1000 { 1001 duration: 500, 1002 easing: "ease-out", 1003 complete: function () { 1004 $(this).css({ height: "auto", display: "none" }); 1005 }, 1006 } 1007 ); 1008 } 1009 // $acc_body.stop(true, false).slideToggle(); 1010 // $(this).toggleClass("active"); 1011 return false; 1012 }); 1013 } 1014 }, 1015}; 1016 1017var StylingPage = { 1018 init: function () { 1019 new StylingList(); 1020 $("#StylingListWrapper").slick({ 1021 arrows: false, 1022 dots: false, 1023 draggable: false, 1024 swipe: false, 1025 }); 1026 }, 1027}; 1028 1029var ResultPage = { 1030 init: function () { 1031 var self = this; 1032 self.recommend(); 1033 self.checkbox(); 1034 }, 1035 recommend: function () { 1036 Browser.addResizeHandler(function () { 1037 if (Browser.windowWidth < 768) { 1038 if ($(".l-grid").hasClass("slick-initialized")) { 1039 $(".l-grid").slick("unslick"); 1040 } 1041 } else if (!$(".l-grid").hasClass("slick-initialized")) { 1042 $(".l-grid").slick({ 1043 slidesToShow: 7, 1044 slidesToScroll: 1, 1045 infinite: true, 1046 responsive: [ 1047 { 1048 breakpoint: 1280, 1049 settings: { 1050 slidesToShow: 5, 1051 slidesToScroll: 1, 1052 }, 1053 }, 1054 { 1055 breakpoint: 1024, 1056 settings: { 1057 slidesToShow: 4, 1058 slidesToScroll: 1, 1059 }, 1060 }, 1061 ], 1062 }); 1063 } 1064 }); 1065 }, 1066 checkbox: function () { 1067 $(".optional-params li").on("click", function () { 1068 var index = $(".optional-params li").index(this); 1069 if (index > 0) { 1070 $('.optional-params li:first-child input[type="checkbox"]').prop( 1071 "checked", 1072 false 1073 ); 1074 } else { 1075 if (!$('.optional-params li input[type="checkbox"]').prop("checked")) { 1076 $('.optional-params li input[type="checkbox"]').prop( 1077 "checked", 1078 false 1079 ); 1080 $('.optional-params li:first-child input[type="checkbox"]').prop( 1081 "checked", 1082 true 1083 ); 1084 } else { 1085 $('.optional-params li:first-child input[type="checkbox"]').prop( 1086 "checked", 1087 false 1088 ); 1089 } 1090 } 1091 }); 1092 }, 1093}; 1094 1095//=============================================== 1096// 1097// ContentsSlider 1098// 1099//=============================================== 1100ContentsSlider = function () { 1101 var self = this; 1102 self.$dispatch = $("<div>"); 1103 self.$ContentsKvWrapper = $("#ContentsKvWrapper"); 1104 self.$ContentsKvInner = $("#ContentsKvInner"); 1105 self.$ContentsBodyWrapper = $("#ContentsBodyWrapper"); 1106 self.$ContentsBodyInner = $("#ContentsBodyInner"); 1107 self.$ContentsBtns = $("#ContentsBtns"); 1108 self.$ContentsBtnsInner = $("#ContentsBtnsInner"); 1109 1110 if (self.$ContentsBodyWrapper.length === 0) return; 1111 1112 self.currentIndex = self.getHashIndex(); 1113 self.sid = 0; 1114 self.lock = false;
1115 self.scrollLock = false; 1116 self.length = self.$ContentsKvWrapper.find(".ContentsKv").length; 1117 self.btnIndex = 0; 1118 self.reload = false; 1119 self.loaded = false; 1120 self.first = false; 1121 1122 $("#ContentsBodyWrapper").imagesLoaded(function () { 1123 self.init(); 1124 }); 1125}; 1126ContentsSlider.TIME = 7000; 1127ContentsSlider.prototype = { 1128 constructor: ContentsSlider, 1129 1130 init: function () { 1131 var self = this; 1132 1133 //slick Kv 1134 self.$ContentsKvInner.slick({ 1135 infinite: true, 1136 arrows: false, 1137 dots: false, 1138 draggable: false, 1139 swipe: true, 1140 asNavFor: self.$ContentsBtnsInner, 1141 }); 1142 1143 //slick Body 1144 self.$ContentsBodyInner.slick({ 1145 infinite: true, 1146 arrows: false, 1147 dots: false, 1148 draggable: false, 1149 swipe: false, 1150 adaptiveHeight: true, 1151 fade: true, 1152 }); 1153 // self.$ContentsBodyInner.slick('slickGoTo',self.currentIndex,true); 1154 1155 //slick Btn 1156 self.$ContentsBtnsInner.slick({ 1157 infinite: true, 1158 // centerMode: true, 1159 // centerPadding: '15px', 1160 slidesToShow: 3, 1161 slidesToScroll: 1, 1162 arrows: false, 1163 dots: false, 1164 asNavFor: self.$ContentsKvInner, 1165 focusOnSelect: true, 1166 }); 1167 1168 // self.btnIndex = self.currentIndex+1; 1169 // if( self.btnIndex > self.length ){ 1170 // self.btnIndex = 0; 1171 // } 1172 // self.$ContentsBtnsInner.slick('slickGoTo',self.btnIndex,true); 1173 1174 self.$ContentsBodyWrapper.find(".ContentsBodyTitles").show(); 1175 1176 self.$ContentsKvInner.slick("slickGoTo", self.currentIndex, true); 1177 // self.setBodyHeight(); 1178 self.$ContentsKvInner.on("swipe", $.proxy(self.swipeHandler, self)); 1179 self.$ContentsKvInner.on( 1180 "afterChange", 1181 $.proxy(self.afterChangeHandler, self) 1182 ); 1183 1184 self.$ContentsKvInner.find(".ContentsKv").on({ 1185 mouseenter: function () { 1186 $(this).addClass("on"); 1187 }, 1188 mouseleave: function () { 1189 $(this).removeClass("on"); 1190 }, 1191 }); 1192 1193 self.$ContentsBtnsInner.on("swipe", $.proxy(self.swipeHandler, self)); 1194 self.$ContentsBtnsInner.on( 1195 "afterChange", 1196 $.proxy(self.afterChangeHandler, self) 1197 ); 1198 1199 // self.$ContentsBtnsInner.find('.off span').each(function(){ 1200 // var chaffle = new Chaffle(this); 1201 // $(this).on({ 1202 // 'mouseenter' : function(){ 1203 // chaffle.init(); 1204 // } 1205 // }); 1206 // }); 1207 1208 $(".top-mainvis-block").css({ height: "auto" }); 1209 1210 $(".ContentsBodyTitles p").each(function () { 1211 var chaffle = new Chaffle(this); 1212 $(window).on({ 1213 chaffleTitles: function () { 1214 chaffle.init(); 1215 }, 1216 }); 1217 }); 1218 1219 $("#loading").velocity( 1220 { opacity: 0, scale: 0 }, 1221 { 1222 duration: 300, 1223 easing: "ease-out", 1224 complete: function () { 1225 $(this).remove(); 1226 var delay = 0; 1227 if (TopPage.first) { 1228 delay = 4000; 1229 } 1230 setTimeout(function () { 1231 self.start(); 1232 }, delay); 1233 }, 1234 } 1235 ); 1236 }, 1237 1238 start: function () { 1239 var self = this; 1240 1241 $("#TwitterInfo").addClass("initialized"); 1242 1243 self.$ContentsKvInner.find(".ContentsKv").addClass("loaded"); 1244 1245 setTimeout(function () { 1246 self.$ContentsKvInner 1247 .find(".slick-current .ContentsKvInfo") 1248 .addClass("show"); 1249 self.$ContentsKvInner 1250 .find(".slick-current .ContentsKvMain") 1251 .addClass("show"); 1252 1253 self.responsiveHandler(); 1254 self.resizeHandler(); 1255 self.scrollHandler(); 1256 }, 50); 1257 1258 setTimeout(function () { 1259 self.$ContentsBtnsInner.find(".btnInner").each(function (i) { 1260 var $btnInner = $(this); 1261 setTimeout(function () { 1262 $btnInner.addClass("loaded"); 1263 }, 100 * i); 1264 }); 1265 }, 600); 1266 1267 setTimeout(function () { 1268 self.loaded = true; 1269 self.setTimer(); 1270 self.btnMotion(); 1271 self.slide("", 0); 1272 self.$ContentsBtns 1273 .find(".btn") 1274 .on("click", $.proxy(self.btnClickHandler, self)); 1275 self.responsiveHandler(); 1276 self.resizeHandler(); 1277 self.scrollHandler(); 1278 }, 900); 1279 1280 Browser.addResponsivePCSPHandler(self.responsiveHandler, self); 1281 self.responsiveHandler(); 1282 Browser.addResizeHandler(self.resizeHandler, self); 1283 self.resizeHandler(); 1284 Browser.addScrollHandler(self.scrollHandler, self); 1285 self.scrollHandler(); 1286 }, 1287 1288 responsiveHandler: function () { 1289 var self = this; 1290 1291 if (self.loaded) { 1292 self.$ContentsBtns.find(".btn").off(); 1293 self.resetTimer(); 1294 self.btnMotionStop(); 1295 } 1296 1297 var $btn = self.$ContentsBtns.find(".btn"); 1298 1299 if (Browser.responsivePCSP === "sp") { 1300 // self.$ContentsBtnsInner.find('.btn').each(function(){ 1301 // var $btn = $(this).clone(); 1302 // $btn.addClass('clone'); 1303 // self.$ContentsBtnsInner.append($btn); 1304 // }); 1305 // var w = (((230/750*100) * self.$ContentsBtns.find('.btn').length) + 0) + 'vw'; 1306 // self.$ContentsBtnsInner.width(w); 1307 // self.$ContentsBtnsInner.not('.slick-initialized').slick(); 1308 // self.$ContentsBtnsInner.not('.slick-initialized').slick({ 1309 // infinite: true, 1310 // slidesToShow: 3, 1311 // slidesToScroll: 1, 1312 // arrows : false, 1313 // dots : false, 1314 // asNavFor : self.$ContentsKvInner, 1315 // focusOnSelect: true 1316 // });
1317 $(document).off("mouseenter, mouseleave", $btn); 1318 if (self.reload) { 1319 window.location.reload(false); 1320 } 1321 // velocity-animating 1322 // self.$ContentsBtnsInner.slick('slickGoTo',self.currentIndex); 1323 } else { 1324 // self.$ContentsBtns.find('.btn').on({ 1325 // 'mouseenter' : function(){ 1326 // $(this).addClass('hover'); 1327 // }, 1328 // 'mouseleave' : function(){ 1329 // $(this).removeClass('hover'); 1330 // } 1331 // }); 1332 var h = self.$ContentsBodyWrapper 1333 .find(".ContentsBodyTitles .tit-vertical p") 1334 .width(); 1335 self.$ContentsBodyWrapper 1336 .find(".ContentsBodyTitles .tit-vertical") 1337 .height(h); 1338 1339 // self.$ContentsBtnsInner.removeAttr('style'); 1340 // self.$ContentsBtnsInner.find('.btn.clone').remove(); 1341 self.$ContentsBtnsInner.slick("unslick"); 1342 self.reload = true; 1343 } 1344 1345 //loaded 1346 if (self.loaded) { 1347 self.$ContentsBtns 1348 .find(".btn") 1349 .on("click", $.proxy(self.btnClickHandler, self)); 1350 self.slide(null, self.currentIndex); 1351 self.setTimer(); 1352 self.btnMotion(); 1353 } 1354 self.setBodyHeight(); 1355 }, 1356 1357 resizeHandler: function () { 1358 var self = this; 1359 self.responsivePCSP = ""; 1360 1361 if (Browser.responsivePCSP === "sp") { 1362 self.responsivePCSP = "sp"; 1363 var top = $("#Kv").offset().top; 1364 $("#Kv").height(Browser.windowHeight - top); 1365 var kvH = $("#Kv").height(); 1366 var marginBottom = 1367 Browser.windowHeight - $("#ContentsBtns").offset().top + 20; 1368 $("#Kv .ContentsKvMain").height(kvH - marginBottom); 1369 } else { 1370 if (self.responsivePCSP !== "pc") { 1371 } 1372 self.responsivePCSP = "pc"; 1373 $("#Kv").css({ height: "auto" }); 1374 $("#Kv .ContentsKvMain").css({ height: "auto" }); 1375 } 1376 var btnW = self.$ContentsBtnsInner.find(".btn").innerWidth() - 4; 1377 self.$ContentsBtnsInner.find(".btnInner span").width(btnW); 1378 1379 self.setBodyHeight(); 1380 }, 1381 1382 scrollHandler: function () { 1383 var self = this; 1384 var btnH = self.$ContentsBtns.height(); 1385 var btnY = self.$ContentsBtnsInner.offset().top; 1386 var contentsY = self.$ContentsBodyInner.offset().top; 1387 var wH = Browser.windowHeight; 1388 var sY = Browser.scrollY; 1389 var limitY = 1390 self.$ContentsKvWrapper.height() + self.$ContentsKvWrapper.offset().top; 1391 var offsetY = 100; 1392 //console.log(btnY >= wH+sY , btnY , wH+sY); 1393 //console.log(btnY >= sY-btnH , btnY , sY-btnH); 1394 //console.log(sY+wH,limitY); 1395 1396 if (sY + wH - offsetY > limitY) { 1397 if (!self.scrollLock) { 1398 self.resetTimer(); 1399 self.btnMotionStop(); 1400 } 1401 self.scrollLock = true; 1402 } else { 1403 if (self.scrollLock) { 1404 self.setTimer(); 1405 self.btnMotion(); 1406 } 1407 self.scrollLock = false; 1408 } 1409 1410 var count = 0; 1411 if (sY > contentsY - wH + 300) { 1412 if (!self.$ContentsBodyInner.hasClass("show")) { 1413 self.$ContentsBodyInner.addClass("show"); 1414 if (self.currentIndex === 2) { 1415 $("#StylingListInner .StylingListItem").each(function () { 1416 var x = $(this).offset().left; 1417 var w = $(this).width() * 2; 1418 if (x > -w && x < Browser.windowWidth) { 1419 // $(this).css({ transform: 'scale(0)' }); 1420 // $(this).velocity({ scale: 1.0 }, {duration:500,easing:[0.175, 0.885, 0.32,1.275], delay: 100*count}); 1421 // StylingList.pc_isLoop = true; 1422 count++; 1423 } 1424 }); 1425 } 1426 } 1427 } else { 1428 if (self.$ContentsBodyInner.hasClass("show")) { 1429 self.$ContentsBodyInner.removeClass("show"); 1430 } 1431 } 1432 1433 /* 1434 if(btnY <= wH+sY && btnY >= sY-btnH){ 1435 if(!self.scrollLock){ 1436 self.setTimer(); 1437 self.btnMotion(); 1438 } 1439 self.scrollLock = true; 1440 } else { 1441 if(self.scrollLock){ 1442 self.resetTimer(); 1443 } 1444 self.scrollLock = false;
1445 } 1446 */ 1447 }, 1448 1449 slide: function (direction, gotoIndex) { 1450 var self = this; 1451 var currentSlide = self.$ContentsKvInner.slick("slickCurrentSlide"); 1452 var h = 0; 1453 1454 if (direction === "left") { 1455 self.$ContentsBodyInner.slick("slickNext"); 1456 // self.$ContentsBodyInner.find('.ContentsBody').hide(); 1457 // self.$ContentsBodyInner.find('.ContentsBody').eq(currentSlide).css({ 'display': 'block' }); 1458 // h = self.$ContentsBodyInner.find('.ContentsBody').eq(currentSlide).height(); 1459 self.lock = true; 1460 } else if (direction === "right") { 1461 self.$ContentsBodyInner.slick("slickPrev"); 1462 // self.$ContentsBodyInner.find('.ContentsBody').hide(); 1463 // self.$ContentsBodyInner.find('.ContentsBody').eq(currentSlide).css({ 'display': 'block' }); 1464 // h = self.$ContentsBodyInner.find('.ContentsBody').eq(currentSlide).height(); 1465 self.lock = true; 1466 } 1467 if (gotoIndex >= 0) { 1468 self.$ContentsKvInner.slick("slickGoTo", gotoIndex); 1469 self.$ContentsBodyInner.slick("slickGoTo", gotoIndex); 1470 // self.$ContentsBodyInner.find('.ContentsBtnsntsBody').hide(); 1471 // self.$ContentsBodyInner.find('.ContentsBody').eq(gotoIndex).css({ 'display': 'block' }); 1472 // h = self.$ContentsBodyInner.find('.ContentsBody').eq(gotoIndex).height(); 1473 self.$ContentsBtnsInner.slick("slickGoTo", gotoIndex); 1474 self.currentIndex = gotoIndex; 1475 self.lock = true; 1476 } else { 1477 self.currentIndex = currentSlide; 1478 } 1479 1480 self.$ContentsBodyWrapper 1481 .find(".ContentsBodyTitles .tit-vertical") 1482 .each(function (i) { 1483 var index = self.currentIndex; 1484 if (index === i) { 1485 $(this).show(); 1486 var h = $(this).find("p").width(); 1487 $(this).parent().height(h); 1488 $(window).trigger("chaffleTitles"); 1489 } else { 1490 $(this).hide(); 1491 } 1492 }); 1493 1494 // self.$ContentsBodyInner.height(h); 1495 // self.lock = true; 1496 1497 self.$ContentsBtns.find(".btn").removeClass("currentBtn"); 1498 self.$ContentsBtns 1499 .find(".btn") 1500 .eq(self.currentIndex) 1501 .addClass("currentBtn"); 1502 1503 if (!self.scrollLock) { 1504 self.setTimer(); 1505 } 1506 self.setBodyHeight(); 1507 self.showMotion(); 1508 self.btnMotion(direction); 1509 }, 1510 1511 setBodyHeight: function () { 1512 var self = this; 1513 // if( self.currentIndex === 2 ){ 1514 // self.$ContentsBodyInner.css({ 'cssText': 'overflow: visible !important;' }); 1515 // self.$ContentsBodyInner.find('.slick-list').css({ 'cssText': 'overflow: visible !important;' }); 1516 // }else{ 1517 // self.$ContentsBodyInner.css({ 'cssText': 'overflow: hidden !important;' }); 1518 // self.$ContentsBodyInner.find('.slick-list').css({ 'cssText': 'overflow: hidden !important;' }); 1519 // } 1520 var h = self.$ContentsBodyInner.find(".slick-current").outerHeight(); 1521 self.$ContentsBodyInner.height(h); 1522 }, 1523 1524 showMotion: function () { 1525 var self = this; 1526 1527 self.$ContentsKvInner 1528 .find(".ContentsKv .ContentsKvMain") 1529 .removeClass("show"); 1530 self.$ContentsKvInner 1531 .find(".slick-current .ContentsKvMain") 1532 .addClass("show"); 1533 1534 self.$ContentsKvInner 1535 .find(".ContentsKv .ContentsKvInfo") 1536 .removeClass("show"); 1537 self.$ContentsKvInner 1538 .find(".slick-current .ContentsKvInfo") 1539 .addClass("show"); 1540 }, 1541 1542 swipeHandler: function (event, slick, direction) { 1543 var self = this; 1544 self.slide(direction, -1); 1545 }, 1546 1547 afterChangeHandler: function (event, slick, direction) { 1548 var self = this; 1549 self.lock = false; 1550 }, 1551 1552 setTimer: function () { 1553 var self = this; 1554 clearTimeout(self.sid); 1555 self.sid = setTimeout(function () { 1556 if (!self.scrollLock) { 1557 self.$ContentsKvInner.slick("slickNext"); 1558 self.slide("left", -1); 1559 } 1560 }, ContentsSlider.TIME); 1561 }, 1562 1563 resetTimer: function () { 1564 var self = this; 1565 clearTimeout(self.sid); 1566 }, 1567 1568 btnClickHandler: function (e) { 1569 var self = this; 1570 if (self.lock) return; 1571 var index = $(e.currentTarget).data("index"); 1572 if (self.currentIndex === index) return; 1573 self.slide(null, index); 1574 }, 1575 1576 btnMotion: function (direction) { 1577 var self = this; 1578 var currentSlide = self.$ContentsKvInner.slick("slickCurrentSlide"); 1579 var $currentBtn = $( 1580 '#ContentsBtns .btn[data-index="' + currentSlide + '"]' 1581 );
1582 var $on = $currentBtn.find(".on"); 1583 var $span = $currentBtn.find(".on span"); 1584 1585 self.btnIndex = self.currentIndex + 1; 1586 if (self.btnIndex > self.length) { 1587 self.btnIndex = 0; 1588 } 1589 1590 self.$ContentsBtnsInner.find(".on").removeClass("velocity-animating"); 1591 1592 $span.velocity("stop").css({ left: "0", right: "auto" }); 1593 $on.velocity("stop").css({ left: "0", right: "auto", width: "0%" }); 1594 $on.velocity( 1595 { width: "101%" }, 1596 { 1597 duration: 1000, 1598 easing: [0.19, 1, 0.22, 1], 1599 complete: function () { 1600 if (!self.scrollLock) { 1601 $on 1602 .css({ left: "auto", right: "0" }) 1603 .velocity( 1604 { width: "0%" }, 1605 { duration: ContentsSlider.TIME - 1000, easing: "linear" } 1606 ); 1607 $span.css({ left: "auto", right: "0" }); 1608 } 1609 }, 1610 } 1611 ); 1612 1613 self.$ContentsBtns.find(".btn").each(function () { 1614 var indx = $(this).data("index"); 1615 var $on = $('#ContentsBtns .btn[data-index="' + indx + '"]').find(".on"); 1616 var $span = $('#ContentsBtns .btn[data-index="' + indx + '"]').find( 1617 ".on span" 1618 ); 1619 if (indx !== currentSlide) { 1620 $on 1621 .velocity("stop") 1622 .css({ left: "0", right: "auto" }) 1623 .velocity( 1624 { width: "0%" }, 1625 { duration: 500, easing: [0.19, 1, 0.22, 1] } 1626 ); 1627 $span.velocity("stop").css({ left: "0", right: "auto" }); 1628 } 1629 }); 1630 if (Browser.responsivePCSP === "sp") { 1631 if (direction === "left") { 1632 // self.$ContentsBtnsInner.slick('slickNext'); 1633 } else if (direction === "right") { 1634 // self.$ContentsBtnsInner.slick('slickPrev'); 1635 } 1636 // self.$ContentsBtnsInner.slick('slickGoTo',self.btnIndex); 1637 } 1638 }, 1639 1640 btnMotionStop: function () { 1641 var self = this; 1642 var currentSlide = self.$ContentsKvInner.slick("slickCurrentSlide"); 1643 var $currentBtn = $( 1644 '#ContentsBtns .btn[data-index="' + currentSlide + '"]' 1645 ); 1646 var $on = $currentBtn.find(".on"); 1647 var $span = $currentBtn.find(".on span"); 1648 1649 $on.velocity("stop").velocity( 1650 { width: "100%" }, 1651 { 1652 duration: 500, 1653 easing: [0.19, 1, 0.22, 1], 1654 complete: function () { 1655 $on.css({ left: "0", right: "auto" }); 1656 $span.velocity("stop").css({ left: "0", right: "auto" }); 1657 }, 1658 } 1659 ); 1660 1661 self.$ContentsBtns.find(".btn").each(function (i) { 1662 var indx = $(this).data("index"); 1663 var $on = $('#ContentsBtns .btn[data-index="' + indx + '"]').find(".on"); 1664 var $span = $('#ContentsBtns .btn[data-index="' + indx + '"]').find( 1665 ".on span" 1666 ); 1667 if (indx !== currentSlide) { 1668 $on 1669 .velocity("stop") 1670 .css({ left: "0", right: "auto" }) 1671 .velocity({ width: "0%" }, { duration: 10 }); 1672 $span.velocity("stop").css({ left: "0", right: "auto" }); 1673 } 1674 }); 1675 }, 1676 1677 getHashIndex: function () { 1678 var self = this; 1679 var hash = window.location.hash.replace("#", ""); 1680 if (!hash) return 0; 1681 1682 var idx = 0; 1683 self.$ContentsBtns.find(".btn").each(function () { 1684 if ($(this).data("id") === hash) { 1685 idx = $(this).data("index"); 1686 } 1687 }); 1688 1689 return idx; 1690 }, 1691}; 1692 1693//=============================================== 1694// 1695// StylingList 1696// 1697//=============================================== 1698StylingList = function () { 1699 var self = this; 1700 self.$dispatch = $("<div>"); 1701 self.$StylingList = $("#StylingList"); 1702 self.$StylingListWrapper = $("#StylingListWrapper"); 1703 self.$StylingListInner = $("#StylingListInner"); 1704 self.$StylingListArrowLeft = $("#StylingListArrowLeft"); 1705 self.$StylingListArrowRight = $("#StylingListArrowRight"); 1706 //self.$StylingListDots = $('#StylingListDots'); 1707 1708 if (self.$StylingList.length === 0) return; 1709 1710 self.a = []; 1711 self.touchstart_func = $.proxy(self.sp_touchstart, self); 1712 self.touchmove_func = $.proxy(self.sp_touchmove, self); 1713 self.touchend_func = $.proxy(self.sp_touchend, self); 1714 1715 self.$StylingListInnerGroup; 1716 self.$StylingListInnerGroupLeft; 1717 self.$StylingListInnerGroupCenter; 1718 self.$StylingListInnerGroupRight; 1719 1720 self.allItem = []; 1721 self.allItemLength = 0; 1722 1723 $.getJSON("/js/json/top-styling.json", function (data) { 1724 for (var i in data) { 1725 self.allItem.push(data[i]); 1726 } 1727 self.shuffle(self.allItem); 1728 self.allItemLength = self.allItem.length; 1729 self.init(); 1730 Browser.addResponsivePCSPHandler(self.responsiveHandler, self); 1731 self.responsiveHandler(); 1732 }); 1733}; 1734StylingList.prototype = { 1735 constructor: StylingList, 1736 1737 init: function () { 1738 var self = this; 1739 }, 1740 1741 shuffle: function (array) { 1742 var self = this; 1743 var m = array.length, 1744 t, 1745 i; 1746 while (m) { 1747 i = Math.floor(Math.random() * m--); 1748 t = array[m]; 1749 array[m] = array[i]; 1750 array[i] = t; 1751 } 1752 return array; 1753 }, 1754 1755 responsiveHandler: function () { 1756 var self = this; 1757 1758 self.$StylingListInner.empty(); 1759 //self.$StylingListDots.empty(); 1760 self.$StylingListArrowLeft.off(); 1761 self.$StylingListArrowRight.off(); 1762 self.$StylingListInner.removeAttr("style"); 1763 self.pc_isLoop = false;
1764 self.pc_groupWidth = 0; 1765 self.pc_x = 0; 1766 self.pc_move = -1; 1767 self.sp_movementX = 0; 1768 self.$StylingListInner[0].removeEventListener( 1769 "touchstart", 1770 self.touchstart_func 1771 ); 1772 self.itemWidth = 320; 1773 self.displayNumPC = 0; 1774 self.displayNumSP = 5; 1775 self.displayStart = 0; 1776 self.displayEnd = 0; 1777 1778 if (Browser.responsivePCSP === "sp") { 1779 self.sp_init(); 1780 self.$StylingListInner[0].addEventListener( 1781 "touchstart", 1782 self.touchstart_func, 1783 false 1784 ); 1785 self.$StylingListArrowLeft.on("click", function () { 1786 self.sp_movemotion("left"); 1787 }); 1788 self.$StylingListArrowRight.on("click", function () { 1789 self.sp_movemotion("right"); 1790 }); 1791 } else { 1792 self.pc_init(); 1793 self.$StylingListArrowLeft.on("click", function () { 1794 self.pc_move = -30; 1795 }); 1796 self.$StylingListArrowRight.on("click", function () { 1797 self.pc_move = 35; 1798 }); 1799 } 1800 }, 1801 1802 pc_init: function () { 1803 var self = this; 1804 var pos = ["left", "center", "right"]; 1805 self.displayNumPC = Math.ceil($(window).width() / self.itemWidth) + 2; 1806 self.displayStart = 0; 1807 self.displayEnd = self.displayNumPC; 1808 self.$StylingListInner.append('<div class="StylingListInnerGroup"></div>'); 1809 self.$StylingListInnerGroup = self.$StylingListInner.find( 1810 ".StylingListInnerGroup" 1811 ); 1812 for (var v = 0; v < self.displayNumPC; v++) { 1813 var url = self.allItem[v].url; 1814 var thumb = self.allItem[v].thumb; 1815 var item = 1816 '<a href="' + 1817 url + 1818 '" class="StylingListItem"><img src="' + 1819 thumb + 1820 '"></a>'; 1821 self.$StylingListInnerGroup.append(item); 1822 } 1823 self.$StylingListInnerGroup.find("a").each(function (i) { 1824 var pos = self.itemWidth * i; 1825 $(this).css({ 1826 position: "absolute", 1827 transform: "translateX(" + pos + "px)", 1828 }); 1829 $(this).attr("data-pos", pos); 1830 $(this).attr("data-num", i); 1831 $(this) 1832 .find("img") 1833 .one("load", function () { 1834 $(this).parent().addClass("loaded"); 1835 }); 1836 }); 1837 1838 self.pc_groupWidth = self.$StylingListInnerGroup.width(); 1839 1840 // self.$StylingListInner.find('.StylingListItem').each(function() { 1841 // $(this).addClass('hide'); 1842 // }); 1843 1844 self.pc_isLoop = true; 1845 window.requestAnimationFrame($.proxy(self.pc_update, self)); 1846 }, 1847 1848 pc_update: function () { 1849 var self = this; 1850 self.pc_move += (-1 - self.pc_move) * 0.1; 1851 self.pc_x += self.pc_move; 1852 // if(self.pc_x < -self.itemWidth*2){ 1853 // self.pc_x = 0; 1854 // } else if(self.pc_x > self.pc_groupLeftWidth+self.itemWidth*2){ 1855 // self.pc_x = 0; 1856 // } 1857 // self.$StylingListInner.css('transform', 'translateX(' + self.pc_x + 'px)'); 1858 self.$StylingListInnerGroup.find(".StylingListItem").each(function () { 1859 var $this = $(this); 1860 var x = Number($this.attr("data-pos")); 1861 var pos = x + self.pc_move; 1862 1863 $this.css("transform", "translateX(" + pos + "px)").attr("data-pos", pos); 1864 if (x > -self.itemWidth && x < Browser.windowWidth + self.itemWidth) { 1865 $this.removeClass("hide"); 1866 $this.addClass("show"); 1867 } 1868 if (x < -self.itemWidth) { 1869 // if( !$this.hasClass('hide') ){ 1870 $this.addClass("hide"); 1871 $this.removeClass("show, loaded"); 1872 1873 var endX = Number( 1874 self.$StylingListInnerGroup 1875 .find(".StylingListItem") 1876 .eq(self.displayNumPC - 1) 1877 .attr("data-pos") 1878 ); 1879 $this
1880 .css("transform", "translateX(" + endX + self.itemWidth + "px)") 1881 .attr("data-pos", endX + self.itemWidth); 1882 1883 var endNum = self.$StylingListInnerGroup 1884 .find(".StylingListItem") 1885 .eq(self.displayNumPC - 1) 1886 .attr("data-num"); 1887 var addNum = Number(endNum) + 1; 1888 if (addNum >= self.allItemLength) { 1889 addNum = 0; 1890 } 1891 var url = self.allItem[addNum].url; 1892 var thumb = self.allItem[addNum].thumb; 1893 $this.attr("data-num", addNum); 1894 1895 $this.attr("href", url); 1896 $this.find("img").attr("src", ""); 1897 $this.find("img").attr("src", thumb); 1898 $this.find("img").one("load", function () { 1899 $(this).parent().addClass("loaded"); 1900 }); 1901 self.$StylingListInnerGroup.append($this); 1902 // } 1903 } else if (x > Browser.windowWidth + self.itemWidth) { 1904 if (self.pc_move > -1) { 1905 $this.addClass("hide"); 1906 $this.removeClass("show, loaded"); 1907 1908 var startX = Number( 1909 self.$StylingListInnerGroup 1910 .find(".StylingListItem") 1911 .eq(0) 1912 .attr("data-pos") 1913 ); 1914 $this 1915 .css("transform", "translateX(" + startX - self.itemWidth + "px)") 1916 .attr("data-pos", startX - self.itemWidth); 1917 1918 var startNum = self.$StylingListInnerGroup 1919 .find(".StylingListItem") 1920 .eq(0) 1921 .attr("data-num"); 1922 var addNum = Number(startNum) - 1; 1923 if (addNum < 0) { 1924 addNum = self.allItemLength - 1; 1925 } 1926 var url = self.allItem[addNum].url; 1927 var thumb = self.allItem[addNum].thumb; 1928 $this.attr("data-num", addNum); 1929 1930 $this.attr("href", url); 1931 $this.find("img").attr("src", ""); 1932 $this.find("img").attr("src", thumb); 1933 $this.find("img").one("load", function () { 1934 $(this).parent().addClass("loaded"); 1935 }); 1936 self.$StylingListInnerGroup.prepend($this); 1937 } 1938 } 1939 }); 1940 1941 if (self.pc_isLoop) { 1942 window.requestAnimationFrame($.proxy(self.pc_update, self)); 1943 } 1944 }, 1945 1946 sp_init: function () { 1947 var self = this; 1948 self.displayEnd = self.displayNumSP; 1949 for (var i = 0; i < self.displayNumSP; i++) { 1950 var url = self.allItem[i].url; 1951 var thumb = self.allItem[i].thumb; 1952 var item = 1953 '<a href="' + 1954 url + 1955 '" class="StylingListItem" data-index="' + 1956 i + 1957 '"><img src="' + 1958 thumb + 1959 '"></a>'; 1960 self.$StylingListInner.append(item); 1961 } 1962 self.$StylingListInner.find("a").each(function (i) { 1963 $(this) 1964 .find("img") 1965 .css({ 1966 left: Math.floor(Math.random() * 50 - 25), 1967 top: Math.floor(Math.random() * 50 - 25), 1968 transform: 1969 "scale(" + (1 - (self.displayNumSP - 1) * 0.05 + 0.05 * i) + ")", 1970 }); 1971 }); 1972 1973 $("body").append('<div id="log"></div>'); 1974 $("#log").css({ position: "fixed", top: 0, left: 0, "z-index": 99999 }); 1975 }, 1976 1977 sp_touchstart: function (e) { 1978 var self = this; 1979 1980 window.addEventListener("touchmove", self.touchmove_func, false); 1981 window.addEventListener("touchend", self.touchend_func, false); 1982 1983 self.startlayerX = self.getLayerX(e); 1984 self.startlayerY = self.getLayerY(e); 1985 self.no_scroll(); 1986 1987 var $a = self.$StylingListInner 1988 .find("a") 1989 .eq(self.$StylingListInner.find("a").length - 1); 1990 $a.velocity("stop").velocity( 1991 { scale: 1.05 }, 1992 { duration: 300, easing: [0.175, 0.885, 0.32, 1.275] } 1993 ); 1994 }, 1995 1996 sp_touchmove: function (e) { 1997 var self = this; 1998 var layerX = self.getLayerX(e); 1999 var layerY = self.getLayerY(e); 2000 self.sp_movementX = layerX - self.startlayerX; 2001 self.sp_movementY = layerY - self.startlayerY; 2002 var $a = self.$StylingListInner 2003 .find("a") 2004 .eq(self.$StylingListInner.find("a").length - 1); 2005 $a.css({ left: self.sp_movementX, top: self.sp_movementY }); 2006 $a.find("img").css({ 2007 transform: "rotate(" + self.sp_movementX * 0.1 + "deg)", 2008 }); 2009 }, 2010 2011 sp_touchend: function (e) { 2012 var self = this; 2013 window.removeEventListener("touchmove", self.touchmove_func); 2014 window.removeEventListener("touchend", self.touchend_func); 2015 2016 var limit = 120; 2017 var rl = ""; 2018 var tb = ""; 2019 if (self.sp_movementX > limit) { 2020 rl = "right"; 2021 } else if (self.sp_movementX < -limit) { 2022 rl = "left"; 2023 } 2024 if (self.sp_movementY > limit) { 2025 tb = "top"; 2026 } else if (self.sp_movementY < -limit) { 2027 tb = "bottom"; 2028 } 2029 2030 if (self.sp_movementX > limit) { 2031 self.sp_movemotion(rl, tb); 2032 } else if (self.sp_movementX < -limit) { 2033 self.sp_movemotion(rl, tb); 2034 } else { 2035 self.sp_movemotion(""); 2036 } 2037 2038 self.return_scroll(); 2039 }, 2040 2041 sp_movemotion: function (rl, tb) { 2042 var self = this; 2043 2044 var $a = self.$StylingListInner 2045 .find("a") 2046 .eq(self.$StylingListInner.find("a").length - 1); 2047 2048 var top = 0; 2049 var left = 0; 2050 if (tb === "top") { 2051 top = $a.position().top + self.sp_movementY * 2; 2052 } else if (tb === "bottom") { 2053 top = $a.position().top + self.sp_movementY * 2; 2054 } 2055 2056 if (rl === "right") { 2057 left = Browser.windowWidth; 2058 } else if (rl === "left") { 2059 left = -Browser.windowWidth; 2060 } 2061 if (left === 0) { 2062 $a.velocity("stop").velocity(
2063 { left: 0, top: 0, scale: 1 }, 2064 { duration: 300, easing: [0.175, 0.885, 0.32, 1.275] } 2065 ); 2066 } else { 2067 $a.velocity("stop").velocity( 2068 { left: left, top: top }, 2069 { 2070 duration: 300, 2071 complete: function () { 2072 self.displayEnd += 1; 2073 if (self.displayEnd > self.allItemLength - 1) { 2074 self.displayEnd = 0; 2075 } 2076 2077 var $img = $a.find("img"); 2078 2079 $a.removeAttr("style"); 2080 $img.removeAttr("style"); 2081 $img.css({ 2082 left: Math.floor(Math.random() * 20 - 10), 2083 top: Math.floor(Math.random() * 50 - 25), 2084 }); 2085 var link = self.allItem[self.displayEnd].url; 2086 var thumb = self.allItem[self.displayEnd].thumb; 2087 $a.attr("href", link); 2088 $img.attr("src", ""); 2089 $img.attr("src", thumb); 2090 $img.css({ opacity: 0, transform: "scale(0.8)" }); 2091 2092 self.$StylingListInner.prepend($a); 2093 self.$StylingListInner.find(".StylingListItem").each(function (i) { 2094 $(this) 2095 .find("img") 2096 .velocity( 2097 { 2098 opacity: 1, 2099 scale: 1 - (self.displayNumSP - 1) * 0.05 + 0.05 * i, 2100 }, 2101 { 2102 duration: 300, 2103 easing: [0.175, 0.885, 0.32, 1.275], 2104 delay: 75 * (self.displayNumSP - 1) - 100 * i, 2105 } 2106 ); 2107 }); 2108 }, 2109 } 2110 ); 2111 } 2112 }, 2113 2114 sp_dots_update: function () { 2115 var self = this; 2116 2117 var $a = self.$StylingListInner 2118 .find("a") 2119 .eq(self.$StylingListInner.find("a").length - 1); 2120 var index = $a.data("reverseindex"); 2121 2122 self.$StylingListDots.find(".StylingListDot").each(function (i) { 2123 if (i === index) { 2124 $(this).addClass("current"); 2125 } else { 2126 $(this).removeClass("current"); 2127 } 2128 }); 2129 }, 2130 2131 getLayerX: function (e) { 2132 var self = this; 2133 if (e.type === "touchstart" || e.type === "touchmove") { 2134 //console.log(e.touches[0].pageX ,self.$scrollbox.offset().left ); 2135 return e.touches[0].pageX - self.$StylingListInner.offset().left; 2136 } else { 2137 return e.layerX; 2138 } 2139 }, 2140 2141 getLayerY: function (e) { 2142 var self = this; 2143 if (e.type === "touchstart" || e.type === "touchmove") { 2144 //console.log(e.touches[0].pageX ,self.$scrollbox.offset().left ); 2145 return e.touches[0].pageY - self.$StylingListInner.offset().top; 2146 } else { 2147 return e.layerY; 2148 } 2149 }, 2150 2151 preventDefault: function (event) { 2152 event.preventDefault(); 2153 }, 2154 2155 no_scroll: function () { 2156 var self = this; 2157 //$(document).on(scroll_event,function(e){e.preventDefault();}); 2158 // $(document).on('touchmove.noScroll', { passive: false }, function(e) {e.preventDefault();}); 2159 document.addEventListener("touchmove", self.preventDefault, { 2160 passive: false, 2161 }); 2162 }, 2163 2164 return_scroll: function () { 2165 var self = this; 2166 //$(document).off(scroll_event); 2167 // $(document).off('.noScroll'); 2168 document.removeEventListener("touchmove", self.preventDefault, { 2169 passive: false, 2170 }); 2171 }, 2172}; 2173 2174//=============================================== 2175// 2176// TwitterInfo 2177// 2178//=============================================== 2179TwitterInfo = function () { 2180 var self = this; 2181 2182 self.$TwitterInfo = $("#TwitterInfo"); 2183 if (self.$TwitterInfo.length === 0) return; 2184 2185 self.$list = self.$TwitterInfo.find(".list"); 2186 2187 self.data; 2188 self.sId; 2189 self.currentIndex = 0; 2190 self.init(); 2191}; 2192TwitterInfo.URL = "/localdata/twitter/twitter.json"; 2193TwitterInfo.API = "/api/get/twitter.php"; 2194TwitterInfo.TIMER_DURATION = 5000; 2195TwitterInfo.MOVE_DURATION = 1000; 2196TwitterInfo.prototype = { 2197 constructor: TwitterInfo, 2198 init: function () { 2199 var self = this; 2200 self.load(); 2201 }, 2202 2203 load: function () { 2204 var self = this; 2205 $.ajax({ 2206 url: TwitterInfo.URL, 2207 dataType: "json", 2208 success: function (data) { 2209 self.data = data; 2210 self.initHtml(); 2211 //console.log("DATA_LOAD_SUCCESS : " + url); 2212 }, 2213 error: function (data) { 2214 //console.log("DATA_LOAD_FAIL : " + url); 2215 }, 2216 }); 2217 2218 $.ajax({ 2219 url: TwitterInfo.API, 2220 dataType: "json", 2221 success: function (data) { }, 2222 error: function (data) { }, 2223 }); 2224 }, 2225 2226 initHtml: function () { 2227 var self = this; 2228 var $txtNew = self.createTxt( 2229 self.currentIndex, 2230 self.data[self.currentIndex] 2231 ); 2232 2233 $txtNew.css({ left: 0, top: 0 }); 2234 self.$list.append($txtNew); 2235 2236 Browser.addResizeHandler(self.resizeHandler, self); 2237 self.resizeHandler(); 2238 2239 Browser.addResponsivePCSPHandler(self.responsiveHandler, self); 2240 self.responsiveHandler(); 2241 }, 2242 2243 createTxt: function (index, d) { 2244 var self = this; 2245 var mojicount = self.map(Browser.windowWidth, 768, 1100, 30, 52); 2246 return $( 2247 '<p class="txt" data-index=' + 2248 index + 2249 "><span>" + 2250 d.created_at + 2251 '</span> <a href="' + 2252 d.detail_url + 2253 '" target="_blank" class="text" onclick="tmEvent(\'ãããtwitter' + 2254 index + 2255 "');\">" + 2256 self.convertTenTen(d.text, mojicount) + 2257 "</a></p>" 2258 ); 2259 }, 2260 2261 resizeHandler: function () { 2262 var self = this; 2263 if (Browser.responsivePCSP !== "pc") return; 2264 2265 var mojicount = self.map(Browser.windowWidth, 768, 1100, 30, 52); 2266 2267 self.$list.find(".txt").each(function () { 2268 var index = $(this).data("index"); 2269 $(this) 2270 .find(".text") 2271 .each(function () { 2272 var d = self.data[index]; 2273 $(this).text(self.convertTenTen(d.text, mojicount)); 2274 }); 2275 }); 2276 }, 2277 2278 responsiveHandler: function () { 2279 var self = this; 2280 clearInterval(self.sId); 2281 2282 //INIT 2283 if (Browser.responsivePCSP === "pc") { 2284 self.sId = setInterval( 2285 $.proxy(self.timerHandler, self), 2286 TwitterInfo.TIMER_DURATION 2287 ); 2288 } else { 2289 } 2290 }, 2291 2292 timerHandler: function () { 2293 var self = this; 2294 self.currentIndex++; 2295 if (self.currentIndex >= self.data.length) { 2296 self.currentIndex = 0; 2297 } 2298 self.slide(); 2299 }, 2300 2301 slide: function () { 2302 var self = this; 2303 2304 var $txtOld = self.$list.find(".txt"); 2305 var $txtNew = self.createTxt( 2306 self.currentIndex, 2307 self.data[self.currentIndex] 2308 ); 2309 2310 function anime1() { 2311 var d = new $.Deferred(); 2312 $txtOld 2313 .stop() 2314 .velocity(
2315 { left: 0, top: 0, opacity: 0 }, 2316 TwitterInfo.MOVE_DURATION, 2317 "easeInQuad" 2318 ); 2319 2320 self.$list.append($txtNew); 2321 $txtNew 2322 .stop() 2323 .delay(TwitterInfo.MOVE_DURATION) 2324 .css({ left: 0, top: 30, opacity: 0 }) 2325 .velocity( 2326 { left: 0, top: 0, opacity: 1 }, 2327 TwitterInfo.MOVE_DURATION, 2328 "easeOutExpo" 2329 ) 2330 .queue(function () { 2331 d.resolve(); 2332 $(this).dequeue(); 2333 }); 2334 return d.promise(); 2335 } 2336 2337 function animeend() { 2338 var d = new $.Deferred(); 2339 var len = self.$list.find(".txt").length; 2340 self.$list.find(".txt").each(function (i) { 2341 if (i === len - 1) { 2342 } else { 2343 $(this).remove(); 2344 } 2345 }); 2346 2347 return d.promise(); 2348 } 2349 2350 anime1().then(animeend); 2351 }, 2352 2353 map: function (value, inputMin, inputMax, outputMin, outputMax, clamp) { 2354 var self = this; 2355 var outVal = 2356 ((value - inputMin) / (inputMax - inputMin)) * (outputMax - outputMin) + 2357 outputMin; 2358 if (clamp) { 2359 if (outputMax < outputMin) { 2360 if (outVal < outputMax) outVal = outputMax; 2361 else if (outVal > outputMin) outVal = outputMin; 2362 } else { 2363 if (outVal > outputMax) outVal = outputMax; 2364 else if (outVal < outputMin) outVal = outputMin; 2365 } 2366 } 2367 //if(outVal < outputMin) outVal = outputMin; 2368 //if(outVal > outputMax) outVal = outputMax; 2369 return outVal; 2370 }, 2371 2372 convertTenTen: function (str, max) { 2373 var self = this; 2374 if (str.length <= max) { 2375 return str; 2376 } else { 2377 return str.substr(0, max) + "..."; 2378 } 2379 }, 2380}; 2381 2382//=============================================== 2383// 2384// Browser 2385// 2386//=============================================== 2387var Browser = function () { }; 2388//---------------------------------------- 2389// STATIC MEMBER 2390//---------------------------------------- 2391Browser.isIE = false; 2392Browser.isIE6 = false; 2393Browser.isIE7 = false; 2394Browser.isIE8 = false; 2395Browser.isIE9 = false;
2396Browser.isFF = false; 2397Browser.isFF35 = false; 2398Browser.isOpera = false; 2399Browser.isChrome = false; 2400Browser.isSafari = false; 2401Browser.isiPhone = false; 2402Browser.isiPad = false; 2403Browser.isiPod = false; 2404Browser.isAndroid = false; 2405 2406Browser.isCanvas = false; 2407Browser.isTransform = false; 2408Browser.isTransition = false; 2409Browser.isSp = false; 2410 2411Browser.scrollX = 0; 2412Browser.scrollY = 0; 2413Browser.scrollYPercent = 0; 2414Browser.windowWidth = 0; 2415Browser.windowHeight = 0; 2416Browser.windowWidthHalf = 0; 2417Browser.windowHeightHalf = 0; 2418Browser.documentWidth = 0; 2419Browser.documentHeight = 0; 2420Browser.scrollRate = 0; 2421 2422Browser.resizeFunction = []; 2423Browser.responsiveFunction = []; 2424Browser.responsivePCSPFunction = []; 2425Browser.scrollFunction = []; 2426 2427Browser.responsive = "pc"; 2428Browser.responsivePCSP = "pc"; 2429Browser.transitionend = 2430 "oTransitionEnd mozTransitionEnd webkitTransitionEnd transitionend"; 2431Browser.animationend = "webkitAnimationEnd animationend"; 2432Browser.scrollEvent = 2433 "onwheel" in document 2434 ? "wheel" 2435 : "onmousewheel" in document 2436 ? "mousewheel" 2437 : "DOMMouseScroll"; 2438 2439//Browser.RESPONSIVE_DIVIDE_WIDTH1 = 640; 2440//Browser.RESPONSIVE_DIVIDE_WIDTH2 = 980; 2441//---------------------------------------- 2442//PRIVATE STATIC METHOD 2443//---------------------------------------- 2444Browser._getScrollPosition = function () { 2445 var obj = new Object(); 2446 obj.x = document.documentElement.scrollLeft || document.body.scrollLeft; 2447 obj.y = document.documentElement.scrollTop || document.body.scrollTop; 2448 return obj; 2449}; 2450Browser._getScreenSize = function () { 2451 var obj = new Object(); 2452 if (!Browser.isSafari && !Browser.isOpera) { 2453 obj.width = 2454 document.documentElement.clientWidth || 2455 document.body.clientWidth || 2456 document.body.scrollWidth; 2457 obj.height = 2458 document.documentElement.clientHeight || 2459 document.body.clientHeight || 2460 document.body.scrollHeight; 2461 } else { 2462 obj.width = window.innerWidth; 2463 obj.height = window.innerHeight; 2464 } 2465 obj.widthHalf = parseInt(obj.width / 2); 2466 obj.heightHalf = parseInt(obj.height / 2); 2467 return obj; 2468}; 2469Browser._getDocumentSize = function () { 2470 var obj = new Object(); 2471 obj.width = document.documentElement.scrollWidth || document.body.scrollWidth; 2472 obj.height = 2473 document.documentElement.scrollHeight || document.body.scrollHeight; 2474 return obj; 2475}; 2476Browser._scrollHandler = function () { 2477 var scrollPosition = Browser._getScrollPosition(); 2478 Browser.scrollX = scrollPosition.x; 2479 Browser.scrollY = scrollPosition.y; 2480 Browser.scrollYPercent = 2481 Browser.windowWidth !== 0 ? Browser.scrollY / Browser.windowWidth : 0; 2482 Browser.scrollRate = 2483 Browser.scrollY / (Browser.documentHeight - Browser.windowHeight); 2484 for (var i = 0; i < Browser.scrollFunction.length; i++) { 2485 Browser.scrollFunction[i].fn.apply(Browser.scrollFunction[i].scope); 2486 } 2487}; 2488Browser._resizeHandler = function () { 2489 var screenSize = Browser._getScreenSize(); 2490 Browser.windowWidth = screenSize.width; 2491 Browser.windowHeight = screenSize.height; 2492 Browser.windowWidthHalf = screenSize.widthHalf; 2493 Browser.windowHeightHalf = screenSize.heightHalf; 2494 var documentSize = Browser._getDocumentSize(); 2495 Browser.documentWidth = documentSize.width; 2496 Browser.documentHeight = documentSize.height; 2497 for (var i = 0; i < Browser.resizeFunction.length; i++) { 2498 Browser.resizeFunction[i].fn.apply(Browser.resizeFunction[i].scope); 2499 } 2500 2501 //PC TB SP 2502 //if(Browser.windowWidth <= Browser.RESPONSIVE_DIVIDE_WIDTH1){ 2503 if (window.matchMedia && window.matchMedia("(max-width:640px)").matches) { 2504 if (Browser.responsive !== "sp") { 2505 Browser.responsive = "sp"; 2506 for (var i = 0; i < Browser.responsiveFunction.length; i++) { 2507 Browser.responsiveFunction[i].fn.apply( 2508 Browser.responsiveFunction[i].scope 2509 ); 2510 } 2511 } 2512 //} else if( 2513 // Browser.windowWidth > Browser.RESPONSIVE_DIVIDE_WIDTH1 2514 // && Browser.windowWidth <= Browser.RESPONSIVE_DIVIDE_WIDTH2 2515 //){ 2516 } else if ( 2517 window.matchMedia && 2518 window.matchMedia("(min-width: 768px) and (max-width: 979px)").matches 2519 ) { 2520 if (Browser.responsive !== "tb") { 2521 Browser.responsive = "tb"; 2522 for (var i = 0; i < Browser.responsiveFunction.length; i++) { 2523 Browser.responsiveFunction[i].fn.apply( 2524 Browser.responsiveFunction[i].scope 2525 ); 2526 } 2527 } 2528 } else { 2529 if (Browser.responsive !== "pc") { 2530 Browser.responsive = "pc"; 2531 for (var i = 0; i < Browser.responsiveFunction.length; i++) { 2532 Browser.responsiveFunction[i].fn.apply( 2533 Browser.responsiveFunction[i].scope 2534 ); 2535 } 2536 } 2537 } 2538 2539 //PC SP 2540 if (window.matchMedia && window.matchMedia("(max-width:767px)").matches) { 2541 if (Browser.responsivePCSP !== "sp") { 2542 Browser.responsivePCSP = "sp"; 2543 for (var i = 0; i < Browser.responsivePCSPFunction.length; i++) { 2544 Browser.responsivePCSPFunction[i].fn.apply( 2545 Browser.responsivePCSPFunction[i].scope 2546 ); 2547 } 2548 } 2549 } else { 2550 if (Browser.responsivePCSP !== "pc") { 2551 Browser.responsivePCSP = "pc"; 2552 for (var i = 0; i < Browser.responsivePCSPFunction.length; i++) { 2553 Browser.responsivePCSPFunction[i].fn.apply( 2554 Browser.responsivePCSPFunction[i].scope 2555 ); 2556 } 2557 } 2558 } 2559}; 2560 2561//---------------------------------------- 2562//PUBLIC STATIC METHOD 2563//---------------------------------------- 2564Browser.init = function () { 2565 Browser.initUA(); 2566 2567 $(window).scroll(Browser._scrollHandler); 2568 Browser._scrollHandler(); 2569 2570 // $(window).resize(); 2571 $(window).on("orientationchange resize", function () { 2572 setTimeout(function () { 2573 Browser._resizeHandler(); 2574 }, 0); 2575 }); 2576 Browser._resizeHandler(); 2577}; 2578Browser.initUA = function () { 2579 var userAgent = window.navigator.userAgent.toLowerCase(); 2580 var appVersion = window.navigator.appVersion.toLowerCase(); 2581 2582 if (userAgent.indexOf("msie") > -1) { 2583 Browser.isIE = true; 2584 if (appVersion.indexOf("msie 6.0") > -1) { 2585 Browser.isIE6 = true; 2586 } else if (appVersion.indexOf("msie 7.0") > -1) { 2587 Browser.isIE7 = true; 2588 } else if (appVersion.indexOf("msie 8.0") > -1) { 2589 Browser.isIE8 = true; 2590 } else if (appVersion.indexOf("msie 9.0") > -1) { 2591 Browser.isIE9 = true; 2592 } 2593 } else if (userAgent.indexOf("trident") > -1) { 2594 Browser.isIE = true; 2595 } else if (userAgent.indexOf("firefox") > -1) { 2596 Browser.isFF = true; 2597 var version = parseFloat(userAgent.match(/firefox\/(\d+\.\d+)/)[1]); 2598 Browser.isFF35 = version >= 3.5; 2599 } else if (userAgent.indexOf("iphone") > -1) { 2600 Browser.isiPhone = true; 2601 } else if (userAgent.indexOf("ipod") > -1) { 2602 Browser.isiPod = true; 2603 } else if (userAgent.indexOf("ipad") > -1) { 2604 Browser.isiPad = true; 2605 } else if (userAgent.indexOf("android") > -1) { 2606 Browser.isAndroid = true; 2607 } else if (userAgent.indexOf("opera") > -1) { 2608 Browser.isOpera = true; 2609 } else if (userAgent.indexOf("chrome") > -1) { 2610 Browser.isChrome = true; 2611 } else if (userAgent.indexOf("safari") > -1) { 2612 Browser.isSafari = true; 2613 } 2614 2615 var el = $("<div>"); 2616 Browser.isCanvas = 2617 !this.isIE6 && 2618 !this.isIE7 && 2619 !this.isIE8 && 2620 !this.isiPhone && 2621 !this.isiPod && 2622 !this.isAndroid; 2623 //this.isTransition = (!this.isIE6 && !this.isIE7 && !this.isIE8 && !this.isIE9 && !this.isiPhone && !this.isiPod && !this.isAndroid); 2624 Browser.isTransform = typeof el.css("transform") === "string"; 2625 Browser.isTransition = typeof el.css("transitionProperty") === "string"; 2626 Browser.isSp = this.isiPhone || this.isiPod || this.isAndroid; 2627}; 2628Browser.addResizeHandler = function (func, scope) { 2629 if (typeof func === "function") { 2630 Browser.resizeFunction.push({ fn: func, scope: scope }); 2631 } 2632}; 2633Browser.removeResizeHandler = function (func) { 2634 if (typeof func === "function") { 2635 for (i = 0; i <= Browser.resizeFunction.length - 1; i++) { 2636 var f = Browser.resizeFunction[i].fn; 2637 if (f === func) { 2638 Browser.resizeFunction.splice(i, 1); 2639 } 2640 } 2641 } 2642}; 2643Browser.addResponsiveHandler = function (func, scope) { 2644 if (typeof func === "function") { 2645 Browser.responsiveFunction.push({ fn: func, scope: scope }); 2646 } 2647}; 2648Browser.removeResponsiveHandler = function (func) { 2649 if (typeof func === "function") { 2650 for (i = 0; i <= Browser.responsiveFunction.length - 1; i++) { 2651 var f = Browser.responsiveFunction[i].fn; 2652 if (f === func) { 2653 Browser.responsiveFunction.splice(i, 1); 2654 } 2655 } 2656 } 2657}; 2658Browser.addResponsivePCSPHandler = function (func, scope) { 2659 if (typeof func === "function") { 2660 Browser.responsivePCSPFunction.push({ fn: func, scope: scope }); 2661 } 2662}; 2663Browser.removeResponsivePCSPHandler = function (func) { 2664 if (typeof func === "function") { 2665 for (i = 0; i <= Browser.responsivePCSPFunction.length - 1; i++) { 2666 var f = Browser.responsivePCSPFunction[i].fn; 2667 if (f === func) { 2668 Browser.responsivePCSPFunction.splice(i, 1); 2669 } 2670 } 2671 } 2672}; 2673 2674Browser.addScrollHandler = function (func, scope) { 2675 if (typeof func === "function") { 2676 Browser.scrollFunction.push({ fn: func, scope: scope }); 2677 } 2678}; 2679Browser.removeScrollHandler = function (func) { 2680 if (typeof func === "function") { 2681 for (i = 0; i <= Browser.scrollFunction.length - 1; i++) { 2682 var f = Browser.scrollFunction[i].fn; 2683 if (f === func) { 2684 Browser.scrollFunction.splice(i, 1); 2685 } 2686 } 2687 } 2688}; 2689Browser.resize = function () { 2690 Browser._resizeHandler(); 2691}; 2692Browser.setViewportiPad = function () { 2693 if (!Browser.isiPad) return; 2694 var metalist = document.getElementsByTagName("meta"); 2695 for (var i = 0; i < metalist.length; i++) { 2696 var name = metalist[i].getAttribute("name"); 2697 if (name && name.toLowerCase() === "viewport") { 2698 metalist[i].setAttribute("content", "width=1024px,user-scalable=no"); 2699 break; 2700 } 2701 } 2702 Browser.resize(); 2703}; 2704Browser.webgl = (function () { 2705 try { 2706 var canvas = document.createElement("canvas"); 2707 return !!( 2708 window.WebGLRenderingContext && 2709 (canvas.getContext("webgl") || canvas.getContext("experimental-webgl")) 2710 ); 2711 } catch (e) { 2712 return false;
2713 } 2714})(); 2715 2716document.addEventListener('DOMContentLoaded', () => { 2717 document.querySelectorAll('.no-copy').forEach(el => { 2718 el.addEventListener('contextmenu', e => e.preventDefault()); 2719 el.addEventListener('dragstart', e => e.preventDefault()); 2720 el.addEventListener('keydown', e => { 2721 if (e.key === 'ContextMenu' || (e.shiftKey && e.key === 'F10')) e.preventDefault(); 2722 }); 2723 }); 2724});
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.