1var BaseAnimationClass = function (_target) { 2 var parent = new SectionBaseClass(_target); 3 4 parent.onCreate = function () { 5 parent.super.onCreate(); 6 TweenMax.set(parent.target, { opacity: 0, y: 40 }); 7 }; 8 9 parent.onActive = function () { 10 TweenMax.to(parent.target, 0.8, { opacity: 1, y: 0, ease: Power2.easeOut }); 11 }; 12 13 return parent; 14}; 15 16var PartsManagerClass = function () { 17 var parent = new ThingsManagerClass(); 18 parent.onCreate = function () { 19 parent.things = []; 20 21 $(".js-anim").each(function () { 22 parent.things.push(new BaseAnimationClass($(this))); 23 }); 24 25 parent.super.onCreate(); 26 }; 27 return parent; 28}; 29 30// var MainvisualClass = function () { 31// var parent = new SectionBaseClass(".topPage .mainvisual"); 32// var CL_ACTIVE = "isActive"; 33 34// var $img, $txt, $txtBg; 35 36// var $images; 37// var INT_INTERVAL = 10000; 38// var maxNum = 0, 39// nowNum = 0, 40// prevNum = -1; 41// var timerId, 42// isTimer = false, 43// isLoop = false; 44 45// var $nav; 46// var isAnimation = false; 47 48// var rollOverTimerId; 49// var INT_ROLLOVER_INTERVAL = 250; 50 51// parent.onCreate = function () { 52// parent.super.onCreate(); 53 54// $images = $(".image_block .box", parent.target); 55 56// maxNum = $images.length; 57// nowNum = 0; 58// prevNum = -1; 59 60// TweenMax.set(parent.target, { opacity: 0 }); 61 62// $images 63// .css({ opacity: 0, "will-change": "opacity" }) 64// .eq(nowNum) 65// .css({ opacity: 1, display: "block" }); 66// $nav = $(".thum_block li", parent.target); 67// navChange(); 68// }; 69 70// parent.onResize = function (_size) { 71// var wh2 = _size.h; 72// var offset = $.extend({}, parent.target.offset()); 73// var top = Math.floor(offset.top); 74// var bottom = Math.floor(top + parent.target.outerHeight(true)); 75// parent.offset = { top: top - wh2, bottom: bottom }; 76// parent.htmlLast = $("html").outerHeight(true) - _size.h - 10; 77// }; 78 79// parent.onActive = function () { 80// TweenMax.to(parent.target, Util.BASE_TIME, { 81// ease: Util.BASE_EASING, 82// opacity: 1, 83// }); 84// }; 85 86// parent.onStart = function () { 87// isLoop = true; 88// onStartTimer(); 89// }; 90 91// parent.onStop = function () { 92// isLoop = false; 93// onStopTimer(); 94 95// TweenMax.killTweensOf($images); 96// TweenMax.set($images.eq(nowNum), { opacity: 1, "z-index": 5 }); 97// if (prevNum > -1) 98// $images.eq(prevNum).css({ "z-index": 1, display: "none" }); 99// isAnimation = false; 100// }; 101 102// parent.onChangeBreakPoint = function () { 103// $(".js-rollover", $nav).off("mouseenter").off("mouseleave"); 104// $(".js-rollover", $nav).off("click", onClick); 105 106// if (Util.isBreakpoint) { 107// $(".js-rollover", $nav).on("click", onClick); 108// } else { 109// $(".js-rollover", $nav).hover(navOnRollOver, navOnRollOut); 110// } 111// }; 112 113// function onStartTimer() { 114// if (isTimer || !isLoop) return; 115// isTimer = true; 116// timerId = setTimeout(function () { 117// onStopTimer(); 118// next(); 119// }, INT_INTERVAL); 120// } 121 122// function onStopTimer() { 123// if (!isTimer) return; 124// isTimer = false; 125// clearTimeout(timerId); 126// } 127 128// function next() { 129// var n = nowNum + 1; 130// if (n >= maxNum) n = 0; 131// move(n); 132// } 133 134// function move(_n) { 135// if (isAnimation) { 136// TweenMax.killTweensOf($images); 137// $images.eq(nowNum).css({ "z-index": 5 }); 138// $images.eq(prevNum).css({ "z-index": 1 }); 139// } 140// isAnimation = true; 141 142// prevNum = nowNum; 143 144// var $prev = $images.eq(prevNum); 145// var $next = $images.eq(_n); 146 147// nowNum = _n; 148// navChange(); 149// TweenMax.set($next, { "z-index": 10, opacity: 0, display: "block" }); 150// TweenMax.to($next, 0.6, { 151// ease: Power0.easeNone, 152// opacity: 1, 153// onComplete: function () { 154// $prev.css({ "z-index": 1, display: "none" }); 155// $next.css({ "z-index": 5 }); 156// isAnimation = false; 157// onStartTimer(); 158// }, 159// }); 160// } 161 162// function onClick() { 163// var index = $nav.index($(this).closest("li")); 164// if (nowNum === index) return; 165// actionRun(index); 166// return false;
167// } 168 169// function navOnRollOver() { 170// clearTimeout(rollOverTimerId); 171// var index = $nav.index($(this).closest("li")); 172// if (nowNum === index) return; 173// rollOverTimerId = setTimeout(function () { 174// actionRun(index); 175// }, INT_ROLLOVER_INTERVAL); 176// } 177 178// function navOnRollOut() {} 179 180// function actionRun(_index) { 181// onStopTimer(); 182// move(_index); 183// } 184 185// function navChange() { 186// $nav.removeClass(CL_ACTIVE); 187// $nav.eq(nowNum).addClass(CL_ACTIVE); 188// } 189 190// return parent; 191// }; 192 193var FeatureClass = function () { 194 var parent = new SectionBaseClass(".topPage .feature"); 195 var BOX_LENGTH = 0, 196 BOX_WIDTH = 0; 197 var CL_OFF = "off"; 198 var CL_ACTIVE = "active"; 199 var $target, 200 $items, 201 $thums, 202 $main, 203 $imgwrap, 204 $mainsInner, 205 $btnLeft, 206 $btnRight, 207 $decArrow; 208 var nowPos = 0, 209 nowNum = 0; 210 211 var isMoveAnimation = false; 212 var touchEvent = new TouchEventClass(); 213 var isBtnLeft = true, 214 isBtnRight = true; 215 var INT_TIMER_INTERVAL = 5000; 216 var timerId, 217 isTimer = false, 218 isLoop = false; 219 220 parent.onCreate = function () { 221 parent.super.onCreate(); 222 223 $target = $(".feature_inner", parent.target); 224 $decArrow = $(".dec_arrow", parent.target); 225 226 $main = $(".main", $target); 227 $mainsInner = $(".main_inner", $target); 228 $imgwrap = $(".main ul", $target); 229 $items = $(".main ul li", $target); 230 231 $thums = $(".thum ul li", $target); 232 233 nowNum = 0; 234 235 BOX_LENGTH = $items.length; 236 nowPos = 0; 237 238 $btnLeft = $(".arrow.prev", $main); 239 $btnRight = $(".arrow.next", $main); 240 241 $btnLeft.on("click", prev); 242 $btnRight.on("click", next); 243 // $("a",$thums).on("click",onClick_thums); 244 245 parent.onResize(Util.getWindowSize()); 246 moveCallback(nowNum); 247 arrowChange(nowNum); 248 thumChange(nowNum); 249 250 touchEvent.onCreate($mainsInner, true); 251 touchEvent.bind(touchEvent.EVENT_TOUCH_START, onTouchStart); 252 touchEvent.bind(touchEvent.EVENT_TOUCH_MOVE, onTouchMove); 253 touchEvent.bind(touchEvent.EVENT_TOUCH_END, onTouchEnd); 254 touchEvent.addEvent(); 255 256 TweenMax.set(parent.target, { opacity: 0, y: 40 }); 257 }; 258 259 parent.onResize = function (_size) { 260 parent.super.onResize(_size); 261 262 var size = { w: $target.width(), h: $target.height() }; 263 BOX_WIDTH = size.w; 264 $imgwrap.css({ width: BOX_WIDTH * BOX_LENGTH }); 265 266 $items.each(function (i) { 267 var _this = $(this); 268 var x = i * BOX_WIDTH; 269 _this.css({ left: x, width: BOX_WIDTH }); 270 }); 271 272 if (!isMoveAnimation) { 273 $imgwrap.css({ left: getLeft(nowNum) }); 274 } 275 }; 276 277 parent.onActive = function () { 278 TweenMax.to(parent.target, 0.8, { opacity: 1, y: 0, ease: Power2.easeOut }); 279 280 setTimeout(function () { 281 $(".css_arrow", $decArrow).addClass("isActive"); 282 }, 400); 283 }; 284 285 parent.onStart = function () { 286 isLoop = true; 287 onStartTimer(); 288 }; 289 290 parent.onStop = function () { 291 isLoop = false; 292 onStopTimer(); 293 }; 294 295 function onStartTimer() { 296 if (isTimer || !isLoop) return; 297 isTimer = true; 298 timerId = setTimeout(function () { 299 onStopTimer(); 300 301 var n = nowNum + 1; 302 if (n >= BOX_LENGTH) n = 0; 303 move(n); 304 }, INT_TIMER_INTERVAL); 305 } 306 307 function onStopTimer() { 308 if (!isTimer) return; 309 isTimer = false; 310 clearTimeout(timerId); 311 } 312 313 function onTouchStart(e, d) { 314 onStopTimer(); 315 TweenMax.killTweensOf($imgwrap); 316 isMoveAnimation = false; 317 nowPos = parseFloat($imgwrap.css("left")); 318 } 319 320 function onTouchStart(e, d) { 321 TweenMax.killTweensOf($imgwrap); 322 isMoveAnimation = false; 323 nowPos = parseFloat($imgwrap.css("left")); 324 } 325 326 function onTouchMove(e, d) { 327 var touchVar = d.data; 328 var event = d.event; 329 var direction = Util.getDirection( 330 Util.getAngle( 331 { x: touchVar.startX, y: touchVar.startY }, 332 { x: touchVar.endX, y: touchVar.endY } 333 ) 334 ); 335 336 if ( 337 Math.abs(touchVar.startY - touchVar.endY) > 100 || 338 direction === "up" || 339 direction === "down" 340 ) { 341 } else { 342 event.preventDefault(); 343 var x = touchVar.startX - touchVar.endX; 344 if ( 345 (nowNum === 0 && direction === "right") || 346 (nowNum === BOX_LENGTH - 1 && direction === "left") 347 ) 348 x *= 0.1; 349 $imgwrap.css({ left: nowPos - x }); 350 touchVar.diff = touchVar.startX - touchVar.endX; 351 } 352 } 353 354 function onTouchEnd(e, d) { 355 var touchVar = d.data; 356 var event = d.event; 357 if (touchVar.diff !== null) { 358 event.preventDefault(); 359 if (touchVar.diff > 50) { 360 next(); 361 } else if (touchVar.diff < -50) { 362 prev(); 363 } else { 364 isMoveAnimation = true; 365 TweenMax.to($imgwrap, 0.5, { 366 left: getLeft(nowNum), 367 ease: Power4.easeOut, 368 onComplete: function () { 369 wrapPositionSet(nowNum); 370 isMoveAnimation = false;
371 onStartTimer(); 372 }, 373 }); 374 } 375 } else { 376 onStartTimer(); 377 } 378 } 379 380 function onClick_thums() { 381 if (isMoveAnimation) return false; 382 var index = $thums.index($(this).closest("li")); 383 move(index); 384 return false; 385 } 386 387 function next() { 388 if (isMoveAnimation) return false; 389 var n = nowNum + 1; 390 if (n >= BOX_LENGTH - 1) n = BOX_LENGTH - 1; 391 move(n); 392 return false; 393 } 394 395 function prev() { 396 if (isMoveAnimation) return false; 397 var n = nowNum - 1; 398 if (n < 0) n = 0; 399 move(n); 400 return false; 401 } 402 403 function move(n) { 404 if (isMoveAnimation) return; 405 isMoveAnimation = true; 406 407 var x = getLeft(n); 408 nowNum = n; 409 TweenMax.to($imgwrap, 0.5, { 410 left: x, 411 ease: Power4.easeOut, 412 onComplete: function () { 413 moveCallback(n); 414 }, 415 }); 416 arrowChange(n); 417 thumChange(n); 418 } 419 420 function moveCallback(n) { 421 if (n < 0) n = BOX_LENGTH + n; 422 n = n % BOX_LENGTH; 423 wrapPositionSet(n); 424 nowNum = n; 425 isMoveAnimation = false; 426 onStartTimer(); 427 } 428 429 function wrapPositionSet(n) { 430 var x = getLeft(n); 431 TweenMax.set($imgwrap, { left: x }); 432 nowPos = x; 433 } 434 435 function getLeft(n) { 436 return BOX_WIDTH * n * -1; 437 } 438 439 function arrowChange(n) { 440 if (n <= 0) { 441 if (isBtnLeft) { 442 isBtnLeft = false; 443 $btnLeft.addClass(CL_OFF); 444 } 445 } else { 446 if (!isBtnLeft) { 447 isBtnLeft = true; 448 $btnLeft.removeClass(CL_OFF); 449 } 450 } 451 452 if (n >= BOX_LENGTH - 1) { 453 if (isBtnRight) { 454 isBtnRight = false; 455 $btnRight.addClass(CL_OFF); 456 } 457 } else { 458 if (!isBtnRight) { 459 isBtnRight = true; 460 $btnRight.removeClass(CL_OFF); 461 } 462 } 463 } 464 465 function thumChange(n) { 466 $thums.removeClass(CL_ACTIVE).eq(n).addClass(CL_ACTIVE); 467 } 468 469 return parent; 470}; 471 472var BannerBaseClass = function (_scale, _itemTarget, _markTarget, _isPc) { 473 var parent = new BaseClass(); 474 var BOX_LENGTH = 0, 475 BOX_WIDTH = 0; 476 var BOX_WIDTH_SCALE = _scale; 477 var INTERVAL = 2000; 478 var CL_ACTIVE = "active"; 479 var $target, $items, $marks, $img, $imgwrap, $imgInner; 480 var nowPos = 0, 481 nowNum = 0; 482 483 var isMoveAnimation = false; 484 var touchEvent = new TouchEventClass(); 485 var isStart = false, 486 isClickEvent = false; 487 488 var timerId, 489 isTimerFlag = false, 490 isRollOver = false; 491 var isPc = _isPc; 492 493 parent.onCreate = function () { 494 $target = $(".topPage .banner .banner_inner"); 495 496 $img = $(".img", $target); 497 $imgInner = $(".img_inner", $target); 498 $imgwrap = $(".img .ul_wrap", $target); 499 $items = $(_itemTarget, $target); 500 501 nowNum = 0; 502 BOX_LENGTH = $items.length; 503 504 nowPos = 0; 505 506 var markHtml = ""; 507 for (var i = 0; i < BOX_LENGTH; i++) markHtml += '<li><a href=""></a></li>'; 508 $(".mark ul" + _markTarget, $target).html(markHtml); 509 $marks = $(".mark ul" + _markTarget + " li", $target); 510 $("a", $marks).on("click", onClick_thums); 511 512 if (isPc) $("a", $imgwrap).hover(onRollOver, onRollOut); 513 514 touchEvent.onCreate($imgInner, true); 515 touchEvent.bind(touchEvent.EVENT_TOUCH_START, onTouchStart); 516 touchEvent.bind(touchEvent.EVENT_TOUCH_MOVE, onTouchMove); 517 touchEvent.bind(touchEvent.EVENT_TOUCH_END, onTouchEnd); 518 }; 519 520 parent.onResize = function () { 521 if (!isStart) return; 522 523 var size = { w: $target.width(), h: $target.height() }; 524 BOX_WIDTH = BOX_WIDTH_SCALE * size.w; 525 $imgwrap.css({ width: BOX_WIDTH * BOX_LENGTH }); 526 527 $items.each(function (i) { 528 var _this = $(this); 529 var x = i * BOX_WIDTH; 530 _this.css({ left: x, width: BOX_WIDTH }); 531 }); 532 533 if (!isMoveAnimation) { 534 $imgwrap.css({ left: getLeft(nowNum) }); 535 } 536 }; 537 538 parent.onStop = function () { 539 isStart = false;
540 TweenMax.killTweensOf($imgwrap); 541 isMoveAnimation = false; 542 nowPos = 0; 543 nowNum = 0; 544 $imgwrap.removeAttr("style"); 545 $items.removeAttr("style"); 546 $("a", $items).off("click", onClick_img); 547 touchEvent.removeEvent(); 548 549 timerStop(); 550 }; 551 552 parent.onStart = function () { 553 isStart = true; 554 $("a", $items).on("click", onClick_img); 555 moveCallback(nowNum); 556 markChange(nowNum); 557 parent.onResize(Util.getWindowSize()); 558 touchEvent.addEvent(); 559 560 if (parent.isImageLoad) timerStart(); 561 }; 562 563 parent.setImageLoadEnd = function () { 564 if (isStart) timerStart(); 565 }; 566 567 function timerStart() { 568 if (isTimerFlag || isRollOver || !isStart || BOX_LENGTH === 1) return; 569 isTimerFlag = true; 570 timerId = setTimeout(function () { 571 timerStop(); 572 timerNext(); 573 }, INTERVAL); 574 } 575 576 function timerStop() { 577 if (!isTimerFlag) return; 578 isTimerFlag = false; 579 clearTimeout(timerId); 580 } 581 582 function timerNext() { 583 if (isMoveAnimation) return false; 584 var n = nowNum + 1; 585 if (n >= BOX_LENGTH) n = 0; 586 timerStop(); 587 move(n); 588 return false; 589 } 590 591 function onClick_img() { 592 if (Util.isBreakpoint) { 593 } else { 594 if (!isClickEvent) return false; 595 } 596 } 597 598 function onRollOver() { 599 if (!Util.isBreakpoint) { 600 isRollOver = true; 601 timerStop(); 602 } 603 } 604 605 function onRollOut() { 606 if (!Util.isBreakpoint) { 607 isRollOver = false; 608 timerStart(); 609 } 610 } 611 612 function onTouchStart(e, d) { 613 isClickEvent = false; 614 TweenMax.killTweensOf($imgwrap); 615 isMoveAnimation = false; 616 nowPos = parseFloat($imgwrap.css("left")); 617 timerStop(); 618 } 619 620 function onTouchMove(e, d) { 621 var touchVar = d.data; 622 var event = d.event; 623 var direction = Util.getDirection( 624 Util.getAngle( 625 { x: touchVar.startX, y: touchVar.startY }, 626 { x: touchVar.endX, y: touchVar.endY } 627 ) 628 ); 629 630 if ( 631 Math.abs(touchVar.startY - touchVar.endY) > 100 || 632 direction === "up" || 633 direction === "down" 634 ) { 635 isClickEvent = true; 636 } else { 637 event.preventDefault(); 638 var x = touchVar.startX - touchVar.endX; 639 if ( 640 (nowNum === 0 && direction === "right") || 641 (nowNum === BOX_LENGTH - 1 && direction === "left") 642 ) 643 x *= 0.1; 644 $imgwrap.css({ left: nowPos - x }); 645 touchVar.diff = touchVar.startX - touchVar.endX; 646 isClickEvent = false; 647 } 648 } 649 650 function onTouchEnd(e, d) { 651 var touchVar = d.data; 652 var event = d.event; 653 if (touchVar.diff !== null) { 654 event.preventDefault(); 655 if (touchVar.diff > 50) { 656 next(); 657 } else if (touchVar.diff < -50) { 658 prev(); 659 } else { 660 if (Math.abs(touchVar.diff) < 1) isClickEvent = true; 661 isMoveAnimation = true; 662 TweenMax.to($imgwrap, 0.5, { 663 left: getLeft(nowNum), 664 ease: Power4.easeOut, 665 onComplete: function () { 666 wrapPositionSet(nowNum); 667 isMoveAnimation = false; 668 timerStart(); 669 }, 670 }); 671 } 672 } else { 673 isClickEvent = true; 674 } 675 } 676 677 function onClick_thums() { 678 if (isMoveAnimation) return false; 679 var index = $marks.index($(this).closest("li")); 680 move(index); 681 return false; 682 } 683 684 function next() { 685 if (isMoveAnimation) return false; 686 var n = nowNum + 1; 687 if (n >= BOX_LENGTH - 1) n = BOX_LENGTH - 1; 688 move(n); 689 return false; 690 } 691 692 function prev() { 693 if (isMoveAnimation) return false; 694 var n = nowNum - 1; 695 if (n < 0) n = 0; 696 move(n); 697 return false; 698 } 699 700 function move(n) { 701 if (isMoveAnimation) return; 702 isMoveAnimation = true; 703 704 var x = getLeft(n); 705 nowNum = n; 706 TweenMax.to($imgwrap, 0.5, { 707 left: x, 708 ease: Power4.easeOut, 709 onComplete: function () { 710 moveCallback(n); 711 }, 712 }); 713 markChange(n); 714 } 715 716 function moveCallback(n) { 717 if (n < 0) n = BOX_LENGTH + n; 718 n = n % BOX_LENGTH; 719 wrapPositionSet(n); 720 nowNum = n; 721 isMoveAnimation = false; 722 if (parent.isImageLoad && isStart) timerStart(); 723 } 724 725 function wrapPositionSet(n) { 726 var x = getLeft(n);
727 TweenMax.set($imgwrap, { left: x }); 728 nowPos = x; 729 } 730 731 function getLeft(n) { 732 return BOX_WIDTH * n * -1; 733 } 734 735 function markChange(n) { 736 $marks.removeClass(CL_ACTIVE).eq(n).addClass(CL_ACTIVE); 737 } 738 739 return parent; 740}; 741 742// var BannerClass = function () { 743// var parent = new ThingsManagerClass(); 744// parent.onCreate = function () { 745// parent.things.sp = new BannerBaseClass( 746// 638 / 750, 747// ".img ul li", 748// ".onlySp", 749// false 750// ); 751// parent.things.pc = new BannerBaseClass(1, ".img ul", ".onlyPc", true); 752 753// parent.super.onCreate(); 754// }; 755 756// parent.onChangeBreakPoint = function () { 757// parent.things.sp.onStop(); 758// parent.things.pc.onStop(); 759 760// if (Util.isBreakpoint) { 761// parent.things.sp.onStart(); 762// } else { 763// parent.things.pc.onStart(); 764// } 765 766// parent.super.onChangeBreakPoint(); 767// }; 768 769// parent.setImageLoadEnd = function () { 770// parent.things.sp.isImageLoad = true; 771// parent.things.pc.isImageLoad = true; 772// parent.things.sp.setImageLoadEnd(); 773// parent.things.pc.setImageLoadEnd(); 774// }; 775 776// return parent; 777// }; 778 779var ShopSearchClass = function () { 780 // var parent = new SectionBaseClass(".topPage .shop_search"); 781 var parent = new SectionBaseClass(".topPage .shop-search"); 782 var $h2, $read, $ul, $more, $arrow; 783 parent.onCreate = function () { 784 parent.super.onCreate(); 785 $h2 = $("h2", parent.target); 786 $read = $(".read", parent.target); 787 $ul = $("ul", parent.target); 788 $more = $(".btn_more", parent.target); 789 $arrow = $(".dec_arrow", parent.target); 790 791 var css = { opacity: 0, y: 40 }; 792 TweenMax.set(parent.target, css); 793 TweenMax.set($h2, css); 794 TweenMax.set($read, css); 795 TweenMax.set($ul, css); 796 TweenMax.set($more, css); 797 }; 798 799 parent.onActive = function () { 800 var time = 0.8; 801 var ease = Power2.easeOut; 802 803 TweenMax.to(parent.target, time, { opacity: 1, y: 0, ease: ease }); 804 TweenMax.to($h2, time, { delay: time * 0.5, opacity: 1, y: 0, ease: ease }); 805 TweenMax.to($read, time, { 806 delay: time * 0.8, 807 opacity: 1, 808 y: 0, 809 ease: ease, 810 }); 811 TweenMax.to($ul, time, { delay: time * 1.1, opacity: 1, y: 0, ease: ease }); 812 TweenMax.to($more, time, { 813 delay: time * 1.4, 814 opacity: 1, 815 y: 0, 816 ease: ease, 817 }); 818 819 setTimeout(function () { 820 $(".css_arrow", $arrow).addClass("isActive"); 821 }, 400); 822 }; 823 824 return parent; 825}; 826 827var InfoTabManagerClass = function () { 828 var parent = new ThingsManagerClass(); 829 var CL_ACTIVE = "active"; 830 var INT_WIDTH = 1260; 831 var $target, $nav, $spNav, $tabs; 832 833 var nowCid, 834 isAnimation = false; 835 parent.onCreate = function () { 836 $target = $(".topPage .info"); 837 $nav = $(".nav", $target); 838 $spNav = $(".sp_nav", $target); 839 $tabs = $(".tabs", $target); 840 841 $(".tabItem", $nav).on("click", onClick_nav); 842 $("select", $spNav).on("change", onChange_spNav); 843 844 nowCid = null; 845 move("news"); 846 }; 847 848 parent.onChangeBreakPoint = function () { 849 if (Util.isBreakpoint) { 850 INT_WIDTH = 666 / 2; 851 } else { 852 INT_WIDTH = 2520 / 2; 853 } 854 855 if (nowCid) { 856 if (!isAnimation) setHeight(nowCid); 857 } 858 }; 859 860 function onClick_nav() { 861 var cid = $(this).attr("data-category"); 862 move(cid); 863 return false; 864 } 865 866 function onChange_spNav() { 867 var cid = $(this).val(); 868 move(cid); 869 } 870 871 function move(_cid) { 872 if (_cid === nowCid || isAnimation) return; 873 isAnimation = true; 874 875 //TweenMax.killTweensOf($(".tab",$tabs)); 876 877 var prev = $(".tab[data-category=" + nowCid + "]", $tabs); 878 var next = $(".tab[data-category=" + _cid + "]", $tabs); 879 880 if (nowCid) { 881 TweenMax.to(prev, 0.3, { 882 ease: Power2.easeOut, 883 opacity: 0, 884 onComplete: function (a, b, c, d) { 885 prev.css({ display: "none" }); 886 }, 887 }); 888 } 889 890 TweenMax.set(next, { display: "block", opacity: 0 }); 891 892 setHeight(_cid); 893 894 TweenMax.to(next, 0.3, { 895 ease: Power2.easeOut, 896 opacity: 1, 897 onComplete: function () { 898 isAnimation = false;
899 }, 900 }); 901 902 $(".tabItem[data-category=" + nowCid + "]", $nav) 903 .closest("li") 904 .removeClass(CL_ACTIVE); 905 $(".tabItem[data-category=" + _cid + "]", $nav) 906 .closest("li") 907 .addClass(CL_ACTIVE); 908 $("select", $spNav).val(_cid); 909 910 nowCid = _cid; 911 } 912 913 function setHeight(_cid) { 914 var h = $(".tab[data-category=" + _cid + "] .tab_inner", $tabs).outerHeight( 915 true 916 ); 917 var w = $(".tab[data-category=" + _cid + "] .tab_inner", $tabs).outerWidth( 918 true 919 ); 920 var hp = (h / w) * 100 + "%"; 921 922 $tabs.css({ "padding-top": hp }); 923 } 924 925 return parent; 926}; 927 928var RecruitBoxClass = function (_target) { 929 var parent = new SectionBaseClass(_target); 930 var $img, $txt, $icon; 931 parent.onCreate = function () { 932 parent.super.onCreate(); 933 934 $img = $(".img", parent.target); 935 $txt = $(".txt", parent.target); 936 $icon = $(".icon", parent.target); 937 938 var css = { opacity: 0, y: 40 }; 939 TweenMax.set($img, css); 940 TweenMax.set($txt, css); 941 TweenMax.set($icon, css); 942 }; 943 944 parent.onActive = function () { 945 var time = 0.8; 946 var ease = Power2.easeOut; 947 948 TweenMax.to($img, time, { opacity: 1, y: 0, ease: ease }); 949 TweenMax.to($txt, time, { 950 delay: time * 0.5, 951 opacity: 1, 952 y: 0, 953 ease: ease, 954 }); 955 TweenMax.to($icon, time, { 956 delay: time * 0.5, 957 opacity: 1, 958 y: 0, 959 ease: ease, 960 }); 961 }; 962 963 return parent; 964}; 965 966// var RecruitClass = function () { 967// var parent = new ThingsManagerClass(); 968// parent.onCreate = function () { 969// $(".topPage .recruit ul li").each(function () { 970// parent.things.push(new RecruitBoxClass($(this))); 971// }); 972 973// parent.super.onCreate(); 974// }; 975 976// return parent; 977// }; 978 979// var CorporateTitleClass = function () { 980// var parent = new SectionBaseClass(".topPage .corporate .ttl"); 981// var $img, $h2; 982// parent.onCreate = function () { 983// parent.super.onCreate(); 984 985// $img = $(".img", parent.target); 986// $h2 = $("h2", parent.target); 987 988// TweenMax.set(parent.target, { opacity: 0, y: 10 }); 989// TweenMax.set($h2, { x: -10, opacity: 0 }); 990// }; 991 992// parent.onActive = function () { 993// TweenMax.to(parent.target, Util.BASE_TIME, { 994// ease: Util.BASE_EASING, 995// opacity: 1, 996// y: 0, 997// }); 998// TweenMax.to($h2, Util.BASE_TIME, { 999// delay: Util.BASE_TIME * 0.5, 1000// ease: Util.BASE_EASING, 1001// x: 0, 1002// opacity: 1, 1003// }); 1004 1005// setTimeout(function () { 1006// $(".css_arrow", $img).addClass("isActive"); 1007// }, 800); 1008// }; 1009 1010// return parent; 1011// }; 1012 1013var MovieModalClass = function () { 1014 var parent = new ModalBase("#modal_movie"); 1015 var $inner, $youtube, $paddingTarget, $window; 1016 1017 var BASE_SIZE = { w: 560, h: 315 }; 1018 var BASE_RATIO = BASE_SIZE.h / BASE_SIZE.w; 1019 parent.onCreate = function () { 1020 parent.super.onCreate(); 1021 $inner = $(".window_inner", parent.target); 1022 $paddingTarget = $(".modal_inner", parent.target); 1023 $youtube = $(".youtube", parent.target); 1024 $window = $(".window", parent.target); 1025 1026 $(".js-modal_movie").on("click", onClick); 1027 }; 1028 1029 parent.onResize = function (size) { 1030 var scale = Util.isBreakpoint ? 1 : 0.95; 1031 var width = size.w * scale; 1032 var height = width * BASE_RATIO; 1033 if (height > size.h * 0.8) { 1034 height = size.h * 0.8; 1035 width = height / BASE_RATIO; 1036 } 1037 $window.css({ width: width }); 1038 1039 var margin = (size.h - $inner.outerHeight(false)) / 2; 1040 var minMargin = 0; 1041 if (margin < minMargin) margin = minMargin; 1042 $paddingTarget.css({ "padding-top": margin, "padding-bottom": margin }); 1043 }; 1044 1045 parent.onOpen = function (vid) { 1046 $youtube.html( 1047 '<iframe src="https://www.youtube.com/embed/' + 1048 vid + 1049 '?rel=0&autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>' 1050 ); 1051 parent.super.onOpen(); 1052 }; 1053 1054 parent.onOpenBefore = function () { 1055 parent.onResize(Util.getWindowSize()); 1056 }; 1057 1058 parent.onCloseAfter = function () { 1059 $youtube.empty(); 1060 }; 1061 1062 function onClick() { 1063 var vid = $(this).attr("data-vid");
1064 parent.onOpen(vid); 1065 return false; 1066 } 1067 1068 return parent; 1069}; 1070 1071var IndexPageClass = function () { 1072 var parent = new ParentClass(); 1073 parent.parts = { 1074 header: new HeaderClass(), 1075 parts: new PartsManagerClass(), 1076 // mv: new MainvisualClass(), 1077 // banner: new BannerClass(), 1078 shopSearch: new ShopSearchClass(), 1079 // corporateTtl: new CorporateTitleClass(), 1080 infoTabs: new InfoTabManagerClass(), 1081 // recruit: new RecruitClass(), 1082 movieModal: new MovieModalClass(), 1083 }; 1084 if (document.querySelector('.topPage .feature')) { 1085 // ã»ã¬ã¯ã¿ã«ä¸è´ããDOMãåå¨ããå ´åãfeature ã追å 1086 parent.parts.feature = new FeatureClass(); 1087 } 1088 1089 var isLoadEnd = false; 1090 var isFirstImageChangeEnd = false; 1091 1092 var $preloader; 1093 1094 var isImageLoadEnd = false, 1095 isOpeningLoadEnd = false; 1096 1097 var COOKIE_OPENING_KEY = "isOpening"; 1098 var isOpening = false; 1099 1100 var opening; 1101 1102 parent.onLoad = function () { 1103 isLoadEnd = true; 1104 onImageLoadStart(); 1105 }; 1106 1107 parent.onResize = function (size) {}; 1108 1109 parent.onFirstImageChangeEnd = function () { 1110 isFirstImageChangeEnd = true; 1111 onImageLoadStart(); 1112 }; 1113 1114 function onImageLoadStart() { 1115 if (!isLoadEnd || isFirstImageChangeEnd) return; 1116 1117 var imageLoad = new ImageLoadClass(); 1118 imageLoad.bind(imageLoad.ONLOADEND, function () { 1119 isImageLoadEnd = true; 1120 loadingCheck(); 1121 }); 1122 imageLoad.onLoad(); 1123 } 1124 1125 function loadingCheck() { 1126 if (!isOpening) { 1127 if (!isImageLoadEnd) return; 1128 animationSkipComplete(); 1129 return; 1130 } 1131 if (!isImageLoadEnd || !isOpeningLoadEnd) return; 1132 1133 opening.play(); 1134 } 1135 1136 function onImageLoadEnd(k) { 1137 parent.parts[k].isImageLoad = true; 1138 parent.parts[k].setImageLoadEnd(true); 1139 parent.parts[k].onResize(Util.getWindowSize()); 1140 parent.parts[k].onScroll(Util.getScrollY()); 1141 } 1142 1143 function animationComplete() { 1144 opening.close(); 1145 opening = null; 1146 for (var k in parent.parts) onImageLoadEnd(k); 1147 } 1148 1149 function animationSkipComplete() { 1150 for (var k in parent.parts) onImageLoadEnd(k); 1151 } 1152 1153 return parent; 1154}; 1155var indexCl = new IndexPageClass(); 1156 1157var RollOverClass = function () { 1158 var time = 0.6; 1159 var ease = Power4.easeOut; 1160 var SP_BREAKPOINT = 750; 1161 function onCreate() { 1162 $(".js-rollover").hover(onRollOver, onRollOut); 1163 $(".js-rollover_vertical").hover(onRollOver_vertical, onRollOut_vertical); 1164 } 1165 1166 function onRollOver() { 1167 if (getWindowSize() <= SP_BREAKPOINT) return; 1168 1169 var t1 = $(".arrow span:nth-of-type(1)", $(this)); 1170 var t2 = $(".arrow span:nth-of-type(2)", $(this)); 1171 TweenMax.killTweensOf(t1); 1172 TweenMax.killTweensOf(t2); 1173 TweenMax.set(t1, { x: "0%" }); 1174 TweenMax.set(t2, { x: "-100%" }); 1175 TweenMax.to(t1, time, { x: "100%", ease: ease }); 1176 TweenMax.to(t2, time, { x: "0%", ease: ease }); 1177 } 1178 1179 function onRollOut() { 1180 if (getWindowSize() <= SP_BREAKPOINT) return; 1181 1182 var t1 = $(".arrow span:nth-of-type(1)", $(this)); 1183 var t2 = $(".arrow span:nth-of-type(2)", $(this)); 1184 TweenMax.killTweensOf(t1); 1185 TweenMax.killTweensOf(t2); 1186 TweenMax.set(t1, { x: "-100%" }); 1187 TweenMax.set(t2, { x: "0%" }); 1188 TweenMax.to(t1, time, { x: "0%", ease: ease }); 1189 TweenMax.to(t2, time, { x: "100%", ease: ease }); 1190 } 1191 1192 function onRollOver_vertical() { 1193 if (getWindowSize() <= SP_BREAKPOINT) return; 1194 1195 var t1 = $(".arrow span:nth-of-type(1)", $(this)); 1196 var t2 = $(".arrow span:nth-of-type(2)", $(this)); 1197 TweenMax.killTweensOf(t1); 1198 TweenMax.killTweensOf(t2); 1199 TweenMax.set(t1, { y: "0%" }); 1200 TweenMax.set(t2, { y: "100%" }); 1201 TweenMax.to(t1, time, { y: "-100%", ease: ease }); 1202 TweenMax.to(t2, time, { y: "0%", ease: ease }); 1203 } 1204 1205 function onRollOut_vertical() { 1206 if (getWindowSize() <= SP_BREAKPOINT) return; 1207 1208 var t1 = $(".arrow span:nth-of-type(1)", $(this)); 1209 var t2 = $(".arrow span:nth-of-type(2)", $(this)); 1210 TweenMax.killTweensOf(t1); 1211 TweenMax.killTweensOf(t2); 1212 TweenMax.set(t1, { y: "100%" }); 1213 TweenMax.set(t2, { y: "0%" }); 1214 TweenMax.to(t1, time, { y: "0%", ease: ease }); 1215 TweenMax.to(t2, time, { y: "-100%", ease: ease }); 1216 } 1217 1218 function getWindowSize() { 1219 var r = window.devicePixelRatio ? window.devicePixelRatio : 1; 1220 var w = window.innerWidth; 1221 var h = window.innerHeight; 1222 return { w: w, h: h, r: r }; 1223 } 1224 1225 $(onCreate); 1226 return this; 1227}; 1228var rollOverCl = new RollOverClass(); 1229 1230const modal = document.querySelector(".js-modal"); 1231const open = document.querySelector(".js-modal-open"); 1232const close = document.querySelector(".js-modal-close"); 1233const checkbox = document.getElementById("noModalReappearCheckbox"); 1234 1235// ã¢ã¼ãã«ã®ãã¼ã¸ã§ã³ãdataå±æ§ããåå¾ï¼ç»åæ´æ°æã«ãã®å¤ãå¤æ´ãããã¨ã§å ¨å¡ã«å表示ãããï¼ 1236const modalVersion = modal ? modal.getAttribute("data-modal-version") || "default" : "default"; 1237 1238// ãã¼ã¸ã§ã³ä»ãã®ãã¼ã«ã«ã¹ãã¬ã¼ã¸ãã¼ãçæ 1239const getStorageKey = (key) => `${key}_v${modalVersion}`; 1240 1241const showModal = () => { 1242 modal.classList.add("is-active"); 1243}; 1244 1245const closeModal = (neverShowAgain) => { 1246 if (!neverShowAgain) { 1247 modal.classList.remove("is-active"); 1248 } 1249 if (neverShowAgain) { 1250 modal.classList.remove("is-active"); 1251 localStorage.setItem(getStorageKey("modalHiddenForever"), "true"); 1252 localStorage.removeItem(getStorageKey("lastModalTime")); 1253 } 1254}; 1255 1256//ãã¢ã¼ãã«ã®å¤å´ããã¯ãªãã¯ãã¦ã¢ã¼ãã«ãéãã 1257addEventListener("click", (e) => { 1258 if (e.target == modal) { 1259 modal.classList.remove("is-active"); 1260 clickModalCloseArea(); 1261 } 1262}); 1263 1264//ãéãããã¿ã³ããã¯ãªãã¯ãã¦ã¢ã¼ãã«ãéãã 1265close.addEventListener("click", () => { 1266 modal.classList.remove("is-active"); 1267 clickModalCloseArea(); 1268}); 1269 1270// ã¢ã¼ãã«ã®è¡¨ç¤ºãã©ã°ããã§ãã¯ãã24æéçµéãã¦ããå ´åã«å表示ããé¢æ° 1271const checkModalVisibility = () => { 1272 const modalExpirationTime = 24 * 60 * 60 * 1000; // 24æéã®ããªç§æ° 1273 const lastModalTime = localStorage.getItem(getStorageKey("lastModalTime")); 1274
1275 // ãã¼ã«ã«ã¹ãã¬ã¼ã¸ã«ä¿åãããã¢ã¼ãã«è¡¨ç¤ºæå»ãåå¨ãã24æéçµéãã¦ããªãå ´åã¯ã¢ã¼ãã«ãé表示ã«ãã 1276 if (lastModalTime && Date.now() - lastModalTime < modalExpirationTime) { 1277 closeModal(); 1278 } else { 1279 showModal(); 1280 } 1281 1282 if (localStorage.getItem(getStorageKey("modalHiddenForever")) === "true") { 1283 modal.classList.remove("is-active"); 1284 return; 1285 } 1286}; 1287 1288const clickModalCloseArea = () => { 1289 localStorage.setItem(getStorageKey("lastModalTime"), Date.now()); // ã¢ã¼ãã«è¡¨ç¤ºæå»ãä¿å 1290 localStorage.setItem(getStorageKey("modalHiddenForever"), "false"); 1291 if (checkbox.checked) { 1292 closeModal(true); 1293 } else { 1294 closeModal(false); 1295 } 1296}; 1297 1298checkModalVisibility(); 1299 1300// ç»åã®æ¯çãè¨æ¸¬ãã¦ã¯ã©ã¹ãä»ä¸ããé¢æ° 1301const checkImageAspectRatio = () => { 1302 const swiperSlides = document.querySelectorAll('.top-main-swiper .swiper-slide'); 1303 1304 swiperSlides.forEach((slide, index) => { 1305 const source = slide.querySelector('.sample source[media="(min-width: 768px)"]'); 1306 if (source) { 1307 // sourceã¿ã°ã®ç»åURLãåå¾ 1308 const imageUrl = source.getAttribute('srcset'); 1309 if (imageUrl) { 1310 // æ°ããç»åãªãã¸ã§ã¯ããä½æãã¦æ¯çãè¨æ¸¬ 1311 const img = new Image(); 1312 img.onload = () => { 1313 addAspectRatioClass(slide, img); 1314 }; 1315 img.onerror = () => { 1316 console.warn('ç»åã®èªã¿è¾¼ã¿ã«å¤±æãã¾ãã:', imageUrl); 1317 }; 1318 img.src = imageUrl; 1319 } 1320 } 1321 }); 1322}; 1323 1324// ã¢ã¹ãã¯ãæ¯ã«åºã¥ãã¦ã¯ã©ã¹ãä»ä¸ããé¢æ° 1325const addAspectRatioClass = (slide, img) => { 1326 const imageAspectRatio = img.naturalWidth / img.naturalHeight; 1327 1328 // ã¹ã©ã¤ãã¼è¡¨ç¤ºé åã®ã¢ã¹ãã¯ãæ¯ï¼1500Ã808ï¼ 1329 const sliderAspectRatio = 1500 / 808; // â 1.856 1330 1331 // æ¢åã®ã¯ã©ã¹ãåé¤ 1332 slide.classList.remove('horizontal', 'vertical'); 1333 1334 // ã¢ã¹ãã¯ãæ¯ã«åºã¥ãã¦ã¯ã©ã¹ãä»ä¸ 1335 if (imageAspectRatio > sliderAspectRatio) { 1336 // ç»åãã¹ã©ã¤ãã¼é åãã横é·ã®å ´å 1337 slide.classList.add('horizontal'); 1338 slide.setAttribute('data-aspect-ratio', 'horizontal'); 1339 } else { 1340 // ç»åãã¹ã©ã¤ãã¼é åãã縦é·ã®å ´å 1341 slide.classList.add('vertical'); 1342 slide.setAttribute('data-aspect-ratio', 'vertical'); 1343 } 1344}; 1345 1346let topMainSwiper; 1347const initSwiper = () =>{ 1348 // Swiperåæååã«ç»åã®æ¯çããã§ã㯠1349 checkImageAspectRatio(); 1350 1351 topMainSwiper = new Swiper('.top-main-swiper', { 1352 // Optional parameters 1353 direction: 'horizontal', 1354 loop: true, 1355 slidesPerView: 1, 1356 autoplay: { 1357 delay: 3000, 1358 }, 1359 effect: 'fade', 1360 speed: 2250, 1361 1362 // If we need pagination 1363 pagination: { 1364 el: '.sw-pagination', 1365 clickable: false, 1366 type: 'bullets', 1367 dynamicBullets: true, 1368 }, 1369 1370 // Navigation arrows 1371 navigation: { 1372 nextEl: '.sw-button-next', 1373 prevEl: '.sw-button-prev', 1374 }, 1375 watchOverflow: false, 1376 }); 1377} 1378initSwiper(); 1379window.addEventListener('resize', () => { 1380 // æ¢åã®Swiperã¤ã³ã¹ã¿ã³ã¹ãå¿ è¦ã«å¿ãã¦ç ´æ£ãã 1381 if (topMainSwiper) { 1382 topMainSwiper.destroy(true, true); 1383 } 1384 1385 // Swiperãååæå 1386 initSwiper(); 1387}); 1388$('#toggleShowMore').click(function() { 1389 $(this).toggleClass('is-open'); 1390 $('.hidden-list').slideToggle(); 1391});
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.