1/* 2 * File : js/sub.js 3 * Author : STUDIO-JT (HEE) 4 * Guideline : JTstyle.1.0 5 * 6 * SUMMARY: 7 * 1) Global Variable 8 * 2) JT Default Functions INIT 9 * 3) Other Functions INIT 10 * 4) ON LOAD 11 * 5) ON RESIZE 12 * 6) JT Default Functions 13 * 7) Other Functions 14 */ 15 16 17 18jQuery(function($) { 19 20 21 22about_fullpage(); 23about_info_slider(); 24 25map_init(); 26 27faci_guidance_slider(); 28 29 30/* **************************************** * 31 * JT Functions 32 * **************************************** */ 33// About illua Fullpage 34function about_fullpage(){ 35 36 if( !$('body').hasClass('page-template-about-illua') ) { return; } 37 38 var $body = $('body'); 39 var $header = $('#header'); 40 var $footer = $('#footer'); 41 var $fullpage = $('.about-illua-fullpage'); 42 var section_footer_flag = false; 43 var section_scroll_loading = true; 44 45 var fullpage_slider = "undefined"; 46 var about_scroll_timeline = null; 47 48 function about_fullpage_resize(){ 49 50 var screenWidth = $(window).width(); 51 52 if( screenWidth < 1024 ){ 53 54 if(fullpage_slider != "undefined"){ 55 fullpage_slider.destroy(); 56 } 57 58 if($body.hasClass('page-template-about-illua')){ 59 $('body').removeClass('fullpage main-footer-view').addClass('color-invert'); 60 } 61 62 if( $('.scroll-down').length && $('.scroll-down').hasClass('scroll-down--fullpage')){ 63 $('.scroll-down').removeClass('scroll-down--fullpage') 64 } 65 66 $fullpage.removeAttr('style'); 67 $fullpage.find('.about-illua-fullpage__inner').removeAttr('style'); 68 $fullpage.find('.about-illua-section'); 69 $footer.removeAttr('style'); 70 71 // set small screen motion 72 about_scroll_timeline = gsap.timeline({paused: true}); 73 74 $('.about-illua-section.color-invert').each(function(){ 75 76 var $this = $(this); 77 var $content = $(this).find('.about-illua-section__content-inner > .wrap'); 78 var $title = $this.find('.about-illua-section__title'); 79 var $desc = $this.find('.about-illua-section__desc'); 80 var lines = undefined; 81 82 if( $desc.find('.lines').length <= 0 ) { 83 var mySplitText = new SplitText($desc, {type: "lines", linesClass: 'lines'}); 84 lines = mySplitText.lines; 85 } else { 86 lines = $desc.find('.lines'); 87 } 88 89 if(!$title.length || !$desc.length) return; 90 91 // title fade motion 92 if (!$title.hasClass('animate')){ 93 94 gsap.set($title, {autoAlpha: 0}); 95 96 ScrollTrigger.create({ 97 trigger: $title, 98 start: "top 90%", 99 onEnter: function(){ 100 gsap.to($title, 2, {autoAlpha: 1, ease: Power3.easeOut, onStart: function(){ 101 $title.addClass('animate'); 102 } 103 }) 104 } 105 }) 106 } 107 108 // desc fade motion 109 if (!$desc.hasClass('animate')){ 110 111 gsap.set(lines, {autoAlpha: 0}); 112 113 ScrollTrigger.create({ 114 trigger: $desc, 115 start: "top 90%", 116 onEnter: function(){ 117 gsap.to(lines, 2, {autoAlpha: 1, stagger: 0.05, ease: Power3.easeOut, onStart: function(){ 118 $desc.addClass('animate'); 119 } 120 }) 121 } 122 }) 123 } 124 125 }); 126 127 fullpage_slider = "undefined"; 128 129 } else if ( screenWidth >= 1024 ){ 130 131 if( fullpage_slider != "undefined" ) { return; } 132 133 // destroy small screen motion 134 if( about_scroll_timeline != null ) { 135 $.each( ScrollTrigger.getAll() , function(idx,st ){ st.kill(); }); 136 about_scroll_timeline.kill(); 137 138 $('.about-illua-section__title').removeAttr('style'); 139 $('.about-illua-section__desc .lines').removeAttr('style'); 140 141 about_scroll_timeline = null; 142 } 143 144 $fullpage.removeAttr('style'); 145 $fullpage.find('.main-fullpage__inner').removeAttr('style'); 146 $fullpage.find('.main-section').removeAttr('style'); 147 148 if($body.hasClass('page-template-about-illua')){ 149 $('body').addClass('color-invert fullpage'); 150 } 151 152 if( $('.scroll-down').length && !$('.scroll-down').hasClass('scroll-down--fullpage')){ 153 $('.scroll-down').addClass('scroll-down--fullpage') 154 } 155 156 fullpage_slider = new Swiper($fullpage[0], { 157 speed: 1000, 158 autoplay: false, 159 direction: 'vertical', 160 effect: 'slide', 161 slidesPerView: 1, 162 spaceBetween: 0, 163 preventInteractionOnTransition: true, 164 simulateTouch: false, 165 allowTouchMove: false, 166 followFinger: false, 167 mousewheel: { 168 forceToAxis: true, 169 invert: true, 170 releaseOnEdges: true 171 }, 172 }); 173 174 fullpage_slider.on('transitionStart', function(){ 175 176 if( fullpage_slider.progress != 1 ){ 177 section_footer_flag = false; 178 } 179 }); 180 181 fullpage_slider.on('transitionEnd', function(){ 182 183 if( fullpage_slider.progress == 1 ){ 184 section_footer_flag = true; 185 } 186 }); 187 188 fullpage_slider.on('slideNextTransitionStart', function(){ 189 190 if( fullpage_slider.activeIndex == 4 ){ 191 TweenMax.set($('.go-top'), {autoAlpha: 1}); 192 } 193 194 setTimeout(function(){ 195 196 var idx = 'js-curr-' + fullpage_slider.activeIndex; 197 $body.removeClass( 'js-curr-0 js-curr-1 js-curr-2 js-curr-3 js-curr-4 js-curr-5 js-curr-6 js-curr-7 js-curr-8 js-curr-9' ); 198 $body.addClass( idx ); 199 200 about_fullpage_color_invert(); 201 },600) 202 203 about_fullpage_motion(); 204 }) 205 206 fullpage_slider.on('slidePrevTransitionStart', function(){ 207 208 if( fullpage_slider.activeIndex == 3 ){ 209 TweenMax.set($('.go-top'), {autoAlpha: 0}); 210 } 211 212 var idx = 'js-curr-' + fullpage_slider.activeIndex; 213 $body.removeClass( 'js-curr-0 js-curr-1 js-curr-2 js-curr-3 js-curr-4 js-curr-5 js-curr-6 js-curr-7 js-curr-8 js-curr-9' ); 214 $body.addClass( idx ); 215 216 about_fullpage_color_invert(); 217 }) 218 219 // footer show/hide 220 if( $('html').hasClass('mobile') && $(window).width () >= 1024) { // Mobile 221 222 if( !$('html').hasClass('kakao') ) { 223 224 var section_footer_return_flag = false; 225 var xDown = null; 226 var yDown = null; 227 228 JT.globals.about_fullpage_touch_start = function(evt){ 229 230 xDown = evt.originalEvent.touches[0].clientX; 231 yDown = evt.originalEvent.touches[0].clientY; 232 } 233 234 JT.globals.about_fullpage_touch_move = function(evt){ 235 236 if ( ( ! xDown || ! yDown ) ) { return; } 237 238 var xUp = evt.originalEvent.touches[0].clientX; 239 var yUp = evt.originalEvent.touches[0].clientY; 240 241 var xDiff = xDown - xUp; 242 var yDiff = yDown - yUp; 243 244 if ( (Math.abs( xDiff ) <= Math.abs( yDiff )) && section_scroll_loading ) { 245 246 if ( yDiff > 0 ) { 247 248 if( section_footer_flag ) { 249 section_scroll_loading = false; 250 section_footer_return_flag = true; 251 $body.addClass('fullpage-footer-view'); 252 253 TweenMax.to($header, .4, {autoAlpha: 0,force3D: true,ease: Power2.easeOut}); 254 TweenMax.to($fullpage, .8, {y: -$footer.outerHeight(),force3D: true,ease: Power2.easeOut}); 255 TweenMax.to($footer, .8, { 256 y: '0%', 257 force3D: true, 258 ease: Power2.easeOut, 259 onComplete: function() { 260 section_scroll_loading = true; 261 } 262 });
263 } else { 264 fullpage_slider.slideNext(); 265 } 266 } else { 267 268 if( section_footer_return_flag ) { 269 section_scroll_loading = false; 270 section_footer_return_flag = false; 271 $body.removeClass('fullpage-footer-view'); 272 273 TweenMax.to($header, .4, {autoAlpha: 1,force3D: true,ease: Power2.easeOut,delay: .5}); 274 TweenMax.to($fullpage, .8, {y: 0,force3D: true,ease: Power2.easeOut}); 275 TweenMax.to($footer, .8, { 276 y: '100%', 277 force3D: true, 278 ease: Power2.easeOut, 279 onComplete: function() { 280 section_scroll_loading = true; 281 } 282 }); 283 } else { 284 fullpage_slider.slidePrev(); 285 } 286 } 287 } 288 289 /* reset values */ 290 xDown = null; 291 yDown = null; 292 } 293 294 $(window).on('touchstart', JT.globals.about_fullpage_touch_start); 295 $(window).on('touchmove', JT.globals.about_fullpage_touch_move); 296 } 297 298 } else { // Other 299 300 // footer show/hide 301 JT.globals.about_fullpage_scroll = function(e){ 302 303 if( section_footer_flag && section_scroll_loading ) { 304 if( e.originalEvent.deltaY > 0 ){ // scroll down 305 306 section_scroll_loading = false; 307 $body.addClass('fullpage-footer-view'); 308 309 fullpage_slider.mousewheel.disable(); 310 311 TweenMax.to($header, .4, {autoAlpha: 0,force3D: true,ease: Power2.easeOut}); 312 TweenMax.to($fullpage, 1, {y: -$footer.outerHeight(),force3D: true,ease: Power2.easeOut}); 313 TweenMax.to($footer, 1, {y: '0%',ease: Power2.easeOut, 314 onComplete: function() { 315 section_scroll_loading = true; 316 } 317 }); 318 319 } else { // scroll up 320 321 section_scroll_loading = false; 322 $body.removeClass('fullpage-footer-view'); 323 324 TweenMax.to($header, .4, {autoAlpha: 1,force3D: true,ease: Power2.easeOut,delay: .5}); 325 TweenMax.to($fullpage, 1, {y: 0,force3D: true,ease: Power2.easeOut}); 326 TweenMax.to($footer, 1, {y: '100%',force3D: true,ease: Power2.easeOut, 327 onComplete: function() { 328 section_scroll_loading = true;fullpage_slider.mousewheel.enable(); 329 } 330 }); 331 332 } 333 } 334 } 335 $(window).on('DOMMouseScroll mousewheel wheel', JT.globals.about_fullpage_scroll); 336 } 337 338 function about_fullpage_color_invert(){ 339 340 var curr_slide = fullpage_slider.slides[fullpage_slider.activeIndex]; 341 342 // color invert 343 if( $(curr_slide).hasClass('color-invert') ){ 344 if(!$body.hasClass('color-invert')){ 345 $body.addClass('color-invert'); 346 } 347 }else{ 348 $body.removeClass('color-invert'); 349 } 350 } 351 352 function about_fullpage_motion(){ 353 354 if(fullpage_slider.activeIndex == 0){ return; } 355 356 var about_fullpage_timeline = new TimelineLite({paused: true}); 357 var $el = $(fullpage_slider.slides[fullpage_slider.activeIndex]); 358 var $el_content = $el.find('.about-illua-section__content-inner'); 359 var $el_title = $el_content.find('.about-illua-section__title'); 360 var $el_desc = $el_content.find('.about-illua-section__desc'); 361 var lines = undefined; 362 363 if( $el_desc.find('.lines').length <= 0 ) { 364 var mySplitText = new SplitText($el_desc, {type: "lines", linesClass: 'lines'}); 365 lines = mySplitText.lines; 366 } else { 367 lines = $el_desc.find('.lines'); 368 } 369 370 if(!!$el_title.length) { TweenLite.set($el_title, {autoAlpha: 0, y: $el_title.outerHeight() / 2}); } 371 TweenLite.set(lines, {autoAlpha: 0, rotation: 0.1, y: $el_desc.children().outerHeight() / 2}); 372 373 about_fullpage_timeline.to($el_title, 1, {force3D: true,autoAlpha: 1,y: 0, delay: .4, ease: Power1.easeOut}); 374 about_fullpage_timeline.staggerTo(lines, 1, motion_args({ 375 delay: .4, 376 force3D: true, 377 autoAlpha: 1, 378 rotation: 0, 379 y: 0, 380 ease: Power1.easeOut 381 }), 0.1, "-=1.2"); 382 383 about_fullpage_timeline.play(); 384 } 385 } 386 } 387 about_fullpage_resize(); 388 $(window).on('resize', about_fullpage_resize); 389 390} 391 392 393 394function about_info_slider(){ 395 396 var $slider = $('.about-illua-info'); 397 var about_info_slide = "undefined"; 398 var $scrollbar = $slider.find('.swiper-scrollbar'); 399 400 if( !$slider.length ){ return; } 401 402 function about_info_resize(){ 403 404 var screenWidth = $(window).width(); 405 406 if( screenWidth > 540 ){ 407 408 if(about_info_slide != "undefined"){ 409 about_info_slide.destroy(); 410 about_info_slide = "undefined"; 411 } 412 413 $slider.removeAttr('style').removeClass('swiper-container'); 414 $slider.find('.about-illua-info__list').removeAttr('style').removeClass('swiper-wrapper'); 415 $slider.find('.about-illua-info__list-item').removeAttr('style').removeClass('swiper-slide'); 416 $slider.removeAttr('style'); 417 418 } else if ( screenWidth <= 540 && about_info_slide == "undefined" ){ 419 420 $slider.removeAttr('style').addClass('swiper-container'); 421 $slider.find('.about-illua-info__list').removeAttr('style').addClass('swiper-wrapper'); 422 $slider.find('.about-illua-info__list-item').removeAttr('style').addClass('swiper-slide'); 423 424 about_info_slide = new Swiper($slider, { 425 effect : 'slide', 426 loop: false, 427 slidesPerView: 1, 428 speed: 600, 429 preventInteractionOnTransition: true, 430 //followFinger: false, 431 preloadImages: false, 432 lazy: { 433 loadOnTransitionStart: true 434 }, 435 scrollbar: { 436 el: $scrollbar, 437 draggable: true, 438 }, 439 }); 440 } 441 } 442 about_info_resize(); 443 $(window).on('resize', about_info_resize); 444} 445 446 447 448function naver_map_init(){ 449 450 if(!$('#location-map').length) return; 451 452 var mapContainer = document.getElementById('location-map'), // ì§ë를 íìí div 453 lat = parseFloat( mapContainer.getAttribute( 'data-map-lat' ) ), 454 lng = parseFloat( mapContainer.getAttribute( 'data-map-lng' ) ), 455 marker_lat = parseFloat( mapContainer.getAttribute( 'data-marker-lat' ) ), 456 marker_lng = parseFloat( mapContainer.getAttribute( 'data-marker-lng' ) ), 457 mapOption = { 458 $scale: false, 459 scrollwheel : false, 460 draggable: true, 461 disableDoubleClickZoom: false, 462 center: new kakao.maps.LatLng( lat, lng ), // ì§ëì ì¤ì¬ì¢í 463 level: 3 // ì§ëì íë ë 벨 464 }; 465 466 467 if ( lat && lng ) { 468 mapOption.center = new kakao.maps.LatLng( 35.15919988127355, marker_lng ); 469 } 470 471 if ( marker_lat && marker_lng ) { 472 var markerPos = new kakao.maps.LatLng( marker_lat, marker_lng ); 473 } 474 475 var map = new kakao.maps.Map(mapContainer, mapOption); // ì§ë를 ìì±í©ëë¤ 476 477 // pinch to zoom on mobile 478 if($('html').hasClass('mobile')){ 479 map.setZoomable(true) 480 } 481 482 var imageSrc = '/wp-content/themes/illua/images/sub/location/location-map-marker.svg', // ë§ì»¤ì´ë¯¸ì§ì 주ìì ëë¤ 483 imageSize, 484 imageOption; 485 486 if($(window).width() > 860){ 487 imageSize = new kakao.maps.Size(92, 112) // ë§ì»¤ì´ë¯¸ì§ì í¬ê¸°ì ëë¤ 488 //imageOption = {offset: new kakao.maps.Point(46, 112)}; // ë§ì»¤ì´ë¯¸ì§ì ìµì ì ëë¤. ë§ì»¤ì ì¢íì ì¼ì¹ìí¬ ì´ë¯¸ì§ ìììì ì¢í를 ì¤ì í©ëë¤. 489 }else{ 490 imageSize = new kakao.maps.Size(60, 74) // ë§ì»¤ì´ë¯¸ì§ì í¬ê¸°ì ëë¤ 491 //imageOption = {offset: new kakao.maps.Point(30, 74)}; // ë§ì»¤ì´ë¯¸ì§ì ìµì ì ëë¤. ë§ì»¤ì ì¢íì ì¼ì¹ìí¬ ì´ë¯¸ì§ ìììì ì¢í를 ì¤ì í©ëë¤. 492 } 493 494 // ë§ì»¤ì ì´ë¯¸ì§ì 보를 ê°ì§ê³ ìë ë§ì»¤ì´ë¯¸ì§ë¥¼ ìì±í©ëë¤ 495 var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption), 496 markerPosition = markerPos; // new kakao.maps.LatLng(35.1749357, 129.1246745);
497 498 // ë§ì»¤ë¥¼ ìì±í©ëë¤ 499 var marker = new kakao.maps.Marker({ 500 position: markerPos, 501 image: markerImage // ë§ì»¤ì´ë¯¸ì§ ì¤ì 502 }); 503 504 505 // ë§ì»¤ê° ì§ë ìì íìëëë¡ ì¤ì í©ëë¤ 506 marker.setMap(map); 507 508 // ì§ë íë, ì¶ì 컨í¸ë¡¤ìì íë ë²í¼ì ë르면 í¸ì¶ëì´ ì§ë를 íëíë í¨ìì ëë¤ 509 $('.location-map__control-btn--zoom-in').on('click',function(e){ 510 e.preventDefault(); 511 map.setLevel(map.getLevel() - 1); 512 }) 513 514 // ì§ë íë, ì¶ì 컨í¸ë¡¤ìì ì¶ì ë²í¼ì ë르면 í¸ì¶ëì´ ì§ë를 íëíë í¨ìì ëë¤ 515 $('.location-map__control-btn--zoom-out').on('click',function(e){ 516 e.preventDefault(); 517 map.setLevel(map.getLevel() + 1); 518 }) 519 520} 521 522 523 524/** 525 * custom map plugin (mapbox) 526 * 527 * @version 1.0.0 528 * @author STUDIO-JT (NICO, KMS) 529 * @requires https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css 530 */ 531function mapbox_init(){ 532 533 if($('#location-map').length > 0){ 534 535 var map_url = "https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js"; 536 537 $('head').append('<link href="https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css" rel="stylesheet">'); 538 539 $.getScript( map_url ).done(function( script, textStatus ) { 540 541 $('#location-map').each(function(){ 542 543 var $el = $(this), 544 el_id = $el.attr('data-id'), 545 $el_obj = $('#'+el_id), 546 id = el_id, 547 image_w = '112', 548 image_h = '92', 549 image = $el_obj.attr('data-map-marker'), 550 lat = $el_obj.attr('data-map-lat'), 551 lng = $el_obj.attr('data-map-lng'), 552 zoom = 13, 553 center = [35.15919988127355, lng]; 554 555 if($(window).width() <= 860){ 556 image_w = '74'; 557 image_h = '60'; 558 } 559 560 L.mapbox.accessToken = 'pk.eyJ1Ijoic2VvbGppc2VvayIsImEiOiJjajJ1Nm9tOGowMDc5MzJtcjRvdzdxZm91In0.-UAvk7ElQFu0u8Ahf8LI9Q'; 561 562 var map = L.mapbox.map(id) 563 .setView(center, zoom); 564 565 map.scrollWheelZoom.disable(); 566 567 // disable draggable Mobile only 568 if($('html').hasClass('mobile')){ 569 map.dragging.disable(); 570 } 571 572 // Use styleLayer to add a Mapbox style created in Mapbox Studio 573 L.mapbox.styleLayer('mapbox://styles/seoljiseok/ckuqjnvl715ew17pizx9xqowx').addTo(map); 574 575 var myLayer = L.mapbox.featureLayer().addTo(map); 576 577 var geoJson = { 578 type: 'FeatureCollection', 579 features: [{ 580 "type": "Feature", 581 "geometry": { 582 "type": "Point", 583 "coordinates": [lng, lat] 584 }, 585 properties: { 586 //title: 'title', 587 //description: 'addr', 588 icon: { 589 iconUrl: image, 590 iconSize: [image_w, image_h], // size of the icon 591 iconAnchor: [image_w/2, image_h], // point of the icon which will correspond to marker's location 592 popupAnchor: [0, -image_h], // point from which the popup should open relative to the iconAnchor 593 className: "jt-marker" 594 } 595 } 596 }] 597 }; 598 599 // Set a custom icon on each marker based on feature properties. 600 myLayer.on('layeradd', function(e) { 601 var marker = e.layer, 602 feature = marker.feature; 603 604 marker.setIcon(L.icon(feature.properties.icon)); 605 }); 606 607 // Add features to the map. 608 myLayer.setGeoJSON(geoJson); 609 }); // each 610 611 }).fail(function( jqxhr, settings, exception ) { 612 613 // Handle Error 614 615 }); 616 617 } // ENDIF 618 619} 620 621 622 623function faci_guidance_slider(){ 624 625 var $slider = $('.single-guidance__list-wrap'); 626 var faci_guidance_slide = "undefined"; 627 var $scrollbar = $slider.find('.swiper-scrollbar'); 628 629 if( !$slider.length ){ return; } 630 631 function faci_guidance_resize(){ 632 633 var screenWidth = $(window).width(); 634 635 if( screenWidth > 540 ){ 636 637 if(faci_guidance_slide != "undefined"){ 638 faci_guidance_slide.destroy(); 639 faci_guidance_slide = "undefined"; 640 } 641 642 $slider.removeAttr('style').removeClass('swiper-container'); 643 $slider.find('.single-guidance__list').removeAttr('style').removeClass('swiper-wrapper'); 644 $slider.find('.single-guidance__list-item').removeAttr('style').removeClass('swiper-slide'); 645 $slider.removeAttr('style'); 646 647 } else if ( screenWidth <= 540 && faci_guidance_slide == "undefined" ){ 648 649 $slider.removeAttr('style').addClass('swiper-container'); 650 $slider.find('.single-guidance__list').removeAttr('style').addClass('swiper-wrapper'); 651 $slider.find('.single-guidance__list-item').removeAttr('style').addClass('swiper-slide'); 652 653 faci_guidance_slide = new Swiper($slider, { 654 effect : 'slide', 655 loop: false, 656 slidesPerView: 1, 657 speed: 600, 658 preventInteractionOnTransition: true, 659 //followFinger: false, 660 preloadImages: false, 661 lazy: { 662 loadOnTransitionStart: true 663 }, 664 scrollbar: { 665 el: $scrollbar, 666 draggable: true, 667 }, 668 }); 669 } 670 } 671 faci_guidance_resize(); 672 $(window).on('resize', faci_guidance_resize); 673} 674 675 676 677// Debug ie not smoothy text motion 678function motion_args(args){ 679 680 if($('html').hasClass('ie')){ 681 args.rotation = 0.1; 682 } 683 684 return args 685 686} 687 688 689 690// map init 691function map_init(){ 692 693 if($('body').hasClass('lang-ko')){ 694 naver_map_init(); 695 }else{ 696 mapbox_init(); 697 } 698 699} 700 701 702 703}); // End jQuery
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.