hhh-page-dev/js/index.js

let userAgent;
let isSafari = false;
let browserName;


// pagination variables
let num_per_page = 9;
let n = 0;
let totalPages = {
    intro: 0,
    video: 0,
    columns: 0,
    vr360: 0,
    company: 0,
};

window.onload = function(){
    // if(screen.width < 900){
    //     window.location.href = "../index_designerList_mb.html";   
    // }
    userAgent = navigator.userAgent;
    detectBrowser(userAgent);
    detectDirection ();
    let result;
    let designer;
    let id = 0;
    $.ajax({
        method: "GET",
        url: "./json/realtime.json",
        dataType: "json",
    }).done(function (msg) {
        result = [...msg];
        renderSec00(result);
    });
}
  

function detectDirection () {
    let height = (window.screen.width * 5) / 12;
    console.log(height);
    $('.sec-02 .slide-item').css('height', `${height}px`);
}

function detectBrowser(agent){
    if(userAgent.match(/chrome|chromium|crios/i)){
      browserName = "chrome";
    }else if(userAgent.match(/firefox|fxios/i)){
      browserName = "firefox";
    }  else if(userAgent.match(/safari/i)){
      browserName = "safari";
    }else if(userAgent.match(/opr\//i)){
      browserName = "opera";
    } else if(userAgent.match(/edg/i)){
      browserName = "edge";
    }else{
      browserName="No browser detection";
    }
  
    if(browserName === 'safari'){
      isSafari = true;
    }
    console.log(isSafari);
  }



function renderSec00(data) {
    let temp = data[0]['data'];
    renderBullet(temp);
    renderBannerStr('sec-00__slider', temp);
    $(".sec-00__slider").slick({
        dots: false,
        speed: 500,
        autoplay: true,
        autoplaySpeed: 4000,
        arrows: true,
        prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>',
        nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 32px;color: white;transform: translateY(-10px);"></i></button>'
    });
    $('.sec-00__bullet').removeClass('bullet-active');
    $('.sec-00__bullet').eq($('.slick-active').data('slick-index')).addClass('bullet-active');
    // $('.sec-00__slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    //     console.log(currentSlide);
    //     console.log($('.slick-active').data('slick-index'));
    //   });
    $('.sec-00__slider').on('afterChange', function(event, slick, currentSlide){
        console.log(currentSlide);
        console.log($('.slick-active').data('slick-index'));
        $('.sec-00__bullet').removeClass('bullet-active');
        $('.sec-00__bullet').eq(currentSlide).addClass('bullet-active');
    });
}

function renderBullet(data) {
    let str = '';
    for(let i = 0; i < data.length; i++){
       str += '<div class="sec-00__bullet"></div>'     
    }
    console.log('bullet');
    $('.sec-00__bulletList').html(str);
}

// function renderBannerStr(sec, data) {
//     let str = '';
//     for(let i = 0; i < data.length; i++){
//         if(data[i]['Dwebp'] && !isSafari) {
//             str+= `<img class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['Dwebp']}');" data-bg="${data[i]['Dwebp']}"></img>`
//         } else {
//             str+= `<img class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['DimgUrl']}');" data-bg="${data[i]['DimgUrl']}"></img>`
//         }
        
//     }
//     $(`.${sec}`).html(str);
// }

function renderBannerStr(sec, data) {
    let str = '';
    for(let i = 0; i < data.length; i++){
        if(data[i]['Dwebp'] && !isSafari) {
            str+= `<img class="${sec}-${i+1} slide-item img-fluid" src="${data[i]['Dwebp']}" onclick="window.open('${data[i]['link']}');" data-bg="${data[i]['Dwebp']}">`
        } else {
            str+= `<img class="${sec}-${i+1} slide-item img-fluid" src="${data[i]['DimgUrl']}" onclick="window.open('${data[i]['link']}');" data-bg="${data[i]['DimgUrl']}">`
        }
        
    }
    $(`.${sec}`).html(str);
}

let sticky = document.querySelector('.sec-00').offsetHeight;
window.addEventListener('scroll', fixedOnScroll);
    
const navbar = document.querySelector('.navbar-main');
    
function fixedOnScroll() {
    if(window.pageYOffset >= 344){
        navbar.classList.add('sticky');
    } else {
        navbar.classList.remove('sticky');
    }
}

$(window).scroll(function() {
    if ( $(this).scrollTop() > 800 ){
        $('.fixed-btn').fadeIn(222);
    } else {
        $('.fixed-btn').stop().fadeOut(222);
    }

}).scroll();


$('.btn-gotop').click(function () {
    $('html, body').animate({
        scrollTop: 0
    }, 500)
});


$('.sec-00__close').click(function(){
    $(this).css('display', 'none');
    $('.sec-00').addClass('bannerClose');
    //$('.sec-02').css('padding-top', '53px');
    sticky = 0;
});


document.addEventListener('lazybeforeunveil', function(e){
    var bg = e.target.getAttribute('data-bg');
    if(bg){
        e.target.style.backgroundImage = 'url(' + bg + ')';
    }
});