// Javascript
var scrollTop = $(window).scrollTop()
, visualH = $('#visualArea').innerHeight()
, headerH = $('.ms-header').innerHeight()
, winH = $(window).height()
function initMainSwiper() {
// main visual swiper
var mainSwiper = new Swiper('#main-swiper',{
effect: "fade",
speed: 1000,
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true,
},
});
$('#main-swiper .swiper-pagination').append(' ');
$('#main-swiper .swiper-pagination .pause').on('click',function(){
if($(this).hasClass('play')){
$(this).removeClass('play');
mainSwiper.autoplay.start();
}else{
$(this).addClass('play');
mainSwiper.autoplay.stop();
}
});
}
$(document).ready(function(){
headerFloat();
// main
if($('.main-block').length){
mainLine();
benefitPrx();
}
// sub
if($('.cont-visual').length){
contPrx();
}
// select style
$('.select').each(function(){
var $this = $(this), numberOfOptions = $(this).children('option').length;
$this.addClass('select-hidden');
$this.wrap('
');
$this.after('
');
var $styledSelect = $this.next('div.select-styled');
$styledSelect.text($this.children('option').eq(0).text()).after(' ');
var $select = $styledSelect.parent('.select');
var $list = $('', {
'class': 'select-options'
}).insertAfter($styledSelect);
for (var i = 0; i < numberOfOptions; i++) {
$(' ', {
text: $this.children('option').eq(i).text(),
rel: $this.children('option').eq(i).val()
}).appendTo($list);
}
var $listItems = $list.children('li');
$select.click(function(e){
e.stopPropagation();
$('div.select.active').not(this).each(function(){
$(this).removeClass('active');
});
if($(this).hasClass('active'))
$(this).removeClass('active');
else
$(this).addClass('active');
});
$listItems.click(function(e) {
e.stopPropagation();
$styledSelect.text($(this).text());
$this.val($(this).attr('rel'));
$select.removeClass('active');
});
$(document).click(function() {
$select.removeClass('active');
});
});
// calendar
$('.btn-calendar').on('click',function(){
if($(this).hasClass('active')){
$(this).removeClass('active');
$('.layer-calendar').removeClass('active');
}else{
$(this).addClass('active');
$('.layer-calendar').addClass('active');
}
});
// tab
$('.tab-btn a').on('click',function(e){
var cont = $(this).attr('href');
e.preventDefault();
if(!$(this).hasClass('active')){
$('.tab-btn a, .tab-cont').removeClass('active');
$(this).addClass('active');
$(cont).addClass('active');
}
});
// space swiper
var processSwiper1 = new Swiper('#processSwiper1',{
speed: 1000,
slidesPerView: 'auto',
centeredSlides: true,
loop: true,
autoplay: {
delay: 4500,
disableOnInteraction: false,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
});
var spaceSwiper2 = new Swiper('#spaceSwiper2',{
speed: 1000,
slidesPerView: 'auto',
centeredSlides: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
});
var spaceSwiper3 = new Swiper('#spaceSwiper3',{
speed: 1000,
slidesPerView: 'auto',
centeredSlides: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
});
$('.cont-space .cont-tab a').on('click',function(e){
var slide = $(this).attr('href')
, index = $(slide).index()
, wrap = $(this).parents('.swiper-container-4').attr('id')
, container = $('#' + wrap).parents('.cont-space')
, swiper = eval(wrap);
e.preventDefault();
$('#' + wrap).find('.cont-tab a').removeClass('active');
$(this).addClass('active');
swiper.slideTo(index, 1000);
});
processSwiper1.on('slideChangeTransitionEnd', function(){
var wrap = $('#processSwiper1')
, slide = wrap.find('.swiper-slide-active').attr('id');
wrap.find('.cont-tab a').removeClass('active');
wrap.find('.cont-tab a[data-tab="'+ slide +'"]').addClass('active');
});
spaceSwiper2.on('slideChangeTransitionEnd', function(){
var wrap = $('#spaceSwiper2')
, slide = wrap.find('.swiper-slide-active').attr('id');
wrap.find('.cont-tab a').removeClass('active');
wrap.find('.cont-tab a[data-tab="'+ slide +'"]').addClass('active');
});
spaceSwiper3.on('slideChangeTransitionEnd', function(){
var wrap = $('#spaceSwiper3')
, slide = wrap.find('.swiper-slide-active').attr('id');
wrap.find('.cont-tab a').removeClass('active');
wrap.find('.cont-tab a[data-tab="'+ slide +'"]').addClass('active');
});
// service count
if($('.ms-contents').hasClass('service')){
var count = $('.cont-service li').length;
for(var i = 0; i < count; i++){
serviceCount(i + 1);
}
}
// product swiper
var productSwiper = new Swiper('.swiper-product',{
speed: 1000,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
},
});
// layer open
$('a[data-btn="layer"]').on('click',function(e){
e.preventDefault();
var layer = $(this).attr('href');
console.log(layer)
$(layer).addClass('active');
$('body').addClass('hide');
});
$('button[data-btn="close"]').on('click',function(e){
var wrap = $(this).parent('.layer');
wrap.removeClass('active');
$('body').removeClass('hide');
});
});
// window scroll
$(window).on('scroll',function(){
scrollTop = $(window).scrollTop();
headerFloat();
// main
if($('.main-block').length){
mainLine();
benefitPrx();
}
// sub
if($('.cont-visual').length){
contPrx();
}
});
// window resize
$(window).resize(function(){
winH = $(window).height();
});
// header float
function headerFloat(){
if(scrollTop > visualH - headerH){
$('.ms-header').addClass('float');
}else{
$('.ms-header').removeClass('float');
}
}
// main block active
function mainLine(){
$('.main-block .line').each(function(){
var $this = $(this)
, $thisT = $this.offset().top;
if($thisT < scrollTop + winH) $this.addClass('active');
else $this.removeClass('active');
});
}
// main benefit parallax
function benefitPrx(){
var $wrap = $('.main-benefit')
, $wrapT = $wrap.offset().top
, $wrapH = $wrap.innerHeight()
$wrap.find('.prx').each(function(){
var $this = $(this)
, $thisT = $(this).offset().top
, $thisH = $(this).innerHeight();
if($this.hasClass('txt')){
if($thisT - winH + $thisH < scrollTop){
$this.addClass('active');
if($thisT - $thisH < scrollTop){
$this.addClass('bot');
}else{
$this.removeClass('bot');
}
}else{
$this.removeClass('active');
}
}
if($wrapT - winH < scrollTop && $wrapT + $wrapH > scrollTop){
if($this.hasClass('ms')) $this.css('transform','translateY('+ ($thisT - $thisH - scrollTop)/4 +'px)');
if($this.hasClass('vs')) $this.css('transform','translateY('+ ($thisT - $thisH - scrollTop)/6 +'px)');
if($this.hasClass('op')) $this.css('transform','translateY('+ ($thisT - $thisH - scrollTop)/8 +'px)');
}
});
}
// nav menu active
function navAct(data){
$('.ms-header a[data-menu="'+ data +'"]').addClass('active');
}
// sub visual prallax
function contPrx(){
var $visualH = $('.cont-visual').innerHeight();
if(scrollTop < $visualH) $('.cont-visual .bg').css('transform','translateY('+ scrollTop/2 +'px)');
}
// service count
function serviceCount(i){
setTimeout(function(){
$('#count').text(i);
}, 60 * i);
}
// community info
function floatInfo(){
if(scrollTop + headerH + margin > infoTop){
info.addClass('float').css('top', fltTop + 'px');
if(viewH - infoH - fltTop < scrollTop - visualH){
info.addClass('bot').css('top',viewH - infoH + 'px');
}else{
info.removeClass('bot').css('top', fltTop + 'px');
}
}else{
info.removeClass('float').css('top', orgTop + 'px');
}
}
// visit complete
function visitCom(){
$('#formVisit').css('display','none');
$('#comVisit').css('display','block').addClass('complete');
}
if($('#mapStudio').length){
// add map
mapboxgl.accessToken = 'pk.eyJ1Ijoic255dnYiLCJhIjoiY2pmbHNzazIzMGdlYTMzcGI2ZXh2d2xhYiJ9.vqInq20wfH8FiAUNj00iNQ';
var studio = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
127.007678,
37.568879
]
}
}
]
};
// add position to map
var map = new mapboxgl.Map({
container:'mapStudio',
style:'mapbox://styles/mapbox/light-v9',
center: [127.010240, 37.568265],
zoom: 15,
maxBounds: [
[125.010240, 35.568265], // Southwest coordinates
[129.010240, 39.568265] // Northeast coordinates
]
});
map.scrollZoom.disable();
map.addControl(new mapboxgl.NavigationControl());
// add markers to map
studio.features.forEach(function(marker) {
var el = document.createElement('div');
el.className = 'marker icon';
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.addTo(map);
});
}