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);
    });
    $.ajax({
        method: "GET",
        url: "./json/designers.json",
        dataType: "json",
    }).done(function (msg) {
        designer = [...msg][id];
        console.log(designer)
        renderinfoCard(designer)
        renderTab(designer['Content'])
        renderTabContent(designer['Content'])
        $(window).scroll(function() {
            loadMore(designer);
        })
    });
}
  

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'];
    renderBannerStr('sec-00__slider', temp);
    $(".sec-00__slider").slick({
        dots: false,
        speed: 800,
        autoplay: true,
        autoplaySpeed: 5000,
        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>'
    });
}

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

function renderinfoCard(designer) {
    $('.hero__img').attr('src', designer['BannerImg']);
    $('.infoCard__avatar').css('backgroundImage', `url(${designer['Designerimg']})`)
    $('.infoCard__name').text(designer['DesignerName']);
    $('.infoCard__seo').text(designer['Description']);
    $('.infoCard__company').text(designer['CompanyName']);
    if(designer['Approve'] !== '') {
        $('.infoCard__approve').text(designer['Approve']);
    }
    // Basics
    let str = '';
    for(let i = 0;i < designer['Basics'].length; i ++) {
        str += `<aside class="d-flex">
                    <div class="infoCard__detail__l">
                        <div>${designer['Basics'][i].title}</div>
                    </div>
                    <div class="infoCard__detail__r">
                        <a href="${designer['Basics'][i].link}">${designer['Basics'][i].data}</a>
                    </div>
                </aside>`
    }
    $('.infoCard__basics').html(str);

    // Branches
    let otherStr = '';
    for(let i = 0;i < designer['Branches'].length; i ++) {
        otherStr += `<aside class="d-flex">
                    <div class="infoCard__detail__l">
                        <div>${designer['Branches'][i].title}</div>
                    </div>
                    <div class="infoCard__detail__r">
                        <a href="${designer['Branches'][i].link}" >${designer['Branches'][i].data}</a>
                    </div>
                </aside>`
    }
    $('.infoCard__branches').html(otherStr);

    // scMedia
    let mediaStr = '';
    for(let i = 0;i < designer['scMedia'].length; i ++) {
        if(i === 4) {
            mediaStr += `<span>
                        <img src="${designer['scMedia'][i].img}" class="dislike" alt="">
                        <img src="https://hhh.com.tw/assets/images/rv_web/like.svg" class="like" alt="">
                    </span>`;
        } else {
            mediaStr += `<a href="${designer['scMedia'][i].link}">
                        <img src="${designer['scMedia'][i].img}" alt="">
                    </a>`;
        }
    }
    $('.scMedia').html(mediaStr);

    document.querySelector('.dislike').addEventListener('click', function() {
        $('.dislike').css('display', 'none');
        $('.like').css('display', 'block');
    })

    document.querySelector('.like').addEventListener('click', function() {
        $('.dislike').css('display', 'block');
        $('.like').css('display', 'none');
    })


    // term condition
    let termStr = '';
    for(let i = 0;i < designer['Terms'].length; i ++) {
        termStr += `<aside class="d-flex">
                        <div class="infoCard__detail__l">
                            <div>${designer['Terms'][i].title}</div>
                        </div>
                        <div class="infoCard__detail__r">
                            <div>${designer['Terms'][i].data}</div>
                        </div>
                    </aside>`
    }
    $('.infoCard__terms').html(termStr);
}

function renderTab(content) {
    let tabTitleStr = '';
    for(let i = 0;i < content.length; i ++) {
        if(i == 0) {
            tabTitleStr += `<li class="nav-item p-0 active" role="presentation">
                                <a class="nav-item-link nav-item-active bg-transparent active" id="pills-${content[i]['Tabtag']}-tab"
                                data-bs-toggle="pill" data-bs-target="#pills-${content[i]['Tabtag']}" type="button" role="tab"
                                aria-controls="pills-${content[i]['Tabtag']}" aria-selected="false" data-link="https://hhh.com.tw/videos/lists/">${content[i]['Title']}</a>
                            </li>`
        } else {
            tabTitleStr += `<li class="nav-item p-0" role="presentation">
                            <a class="nav-item-link nav-item-active bg-transparent" id="pills-${content[i]['Tabtag']}-tab"
                            data-bs-toggle="pill" data-bs-target="#pills-${content[i]['Tabtag']}" type="button" role="tab"
                            aria-controls="pills-${content[i]['Tabtag']}" aria-selected="false" data-link="https://hhh.com.tw/videos/lists/">${content[i]['Title']}</a>
                        </li>`
        }
    }
    $('#pills-tab').html(tabTitleStr);
    $('.pill-aside').html(tabTitleStr);
}


function renderTabContent(content) {
    let tabStr = '';
    for(let i = 0;i < content.length; i ++) {
        let cardData = ''
        if(content[i].info) {
            for(let j = 0;j < content[i].info.length; j ++) {
                cardData += `<div class="company__block">
                                <h4 class="company__title">${content[i].info[j].title}</h4>
                                <div class="company__text">
                                    ${content[i].info[j].data}
                                </div>
                            </div>`
            }
            tabStr +=  `<div class="tab-pane fade " id="pills-${content[i]['Tabtag']}" role="tabpanel"
                        aria-labelledby="pills-${content[i]['Tabtag']}-tab">
                        <div class="row justfy-content-between">
                            <div class="col-md-8">
                                <article class="company__article">
                                    ${cardData}
                                </article>
                            </div>
                        </div>
                    </div>`
        
        } else {
            for(let j = 0;j < (content[i].Carddata.length < num_per_page? content[i].Carddata.length: num_per_page); j ++) {
                cardData += `<div class="col-md-4">
                                <a href="" target="_blank">
                                <div class="card">
                                    <div class="card__bgImg" style="background-image: url(${content[i].Carddata[j]['imgURL']});">
                                    </div>
                                    <div class="card-body">
                                    <h5 class="card-title card__title mt-0">${content[i].Carddata[j]['title']}</h5>
                                    <p class="card-text mb-0">
                                        <a href="" class="card__tag" target="_blank">混搭風</a>
                                        <a href="" class="card__tag" target="_blank">混搭風</a>
                                        <a href="" class="card__tag" target="_blank">混搭風</a>
                                    </p>
                                    </div>
                                </div>
                                </a>
                            </div>`
            }
            tabStr +=  `<div class="tab-pane fade " id="pills-${content[i]['Tabtag']}" role="tabpanel"
                        aria-labelledby="pills-${content[i]['Tabtag']}-tab">
                        <div class="row work__row">
                            ${cardData}
                        </div>
                    </div>`
                    let key = content[i]['Tabtag'];
                    totalPages[key] = content[i].Carddata.length;
        }
        
        
    }
    console.log(tabStr);
    console.log(totalPages);
    $('#pills-tabContent').html(tabStr);
    $('#pills-intro').addClass('active', 'show');
    $('#pills-intro').addClass('show');
    $('#pills-video .card__bgImg').append('<img src="https://hhh.com.tw/assets/images/rv_web/play.svg" alt="" width="50" height="50">')
    $('.infoContent .nav-item-link').click(checkTab);
    checkTab();
}

function checkTab() {
    if($('#pills-intro-tab').hasClass('active')) {
      $('.likeSee').attr('hidden', false)
    } else {
      $('.likeSee').attr('hidden', true)
    }
}


let sticky = document.querySelector('.sec-00').offsetHeight;
window.addEventListener('scroll', fixedOnScroll);
    
const navbar = document.querySelector('.navbar-main');
    
function fixedOnScroll() {
    if(window.pageYOffset >= sticky){
        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();

function loadMore(designer) {
    let nowTab = document.querySelector('.infoContent .tab-pane.show')
    if(nowTab === document.querySelector('#pills-intro')) {
        let pageNum = Math.ceil(totalPages.intro / 9);
        if ($(this).scrollTop() > 2300) {
            if(n >= pageNum) {
                n = pageNum;
                return;
              } else {
                n ++;
                console.log('test');
                let append = '';
                let d = designer['Content'][0].Carddata.slice(9*n, (9*n)+9);
                for(let j = 0;j < d.length; j ++) {
                    append += `<div class="col-md-4">
                                    <a href="" target="_blank">
                                    <div class="card">
                                        <div class="card__bgImg" style="background-image: url(${d[j]['imgURL']});">
                                        </div>
                                        <div class="card-body">
                                        <h5 class="card-title card__title mt-0">${d[j]['title']}</h5>
                                        <p class="card-text mb-0">
                                            <a href="" class="card__tag" target="_blank">混搭風</a>
                                            <a href="" class="card__tag" target="_blank">混搭風</a>
                                            <a href="" class="card__tag" target="_blank">混搭風</a>
                                        </p>
                                        </div>
                                    </div>
                                    </a>
                                </div>`
                }
                $('.work__row').append(append);
            }
        
        }
    }
}

$('.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 + ')';
    }
});