hhh-page-dev/js/index-designer.js

let userAgent;
let isSafari = false;
let browserName;

let filter;

const urlParams = new URLSearchParams(window.location.search);
let getfilter = urlParams.get('q');
let cid = urlParams.get('cid');
console.log(getfilter, cid);

$('.likeSee__views').click(function() {
    window.location.href = `./index_designerList.html?q=views&cid=${cid}`
    $(this).css('color', '#EE7800');
})

$('.likeSee__sort').click(function() {
    window.location.href = `./index_designerList.html?cid=${cid}`
    $(this).css('color', '#EE7800');
})


function getQuery() {
    let query = getfilter;
    if(query == 'views'){
        filter = 'views';
        $('.likeSee__views').css('color', '#EE7800');
    } else {
        filter = 'dateSort';
        $('.likeSee__sort').css('color', '#EE7800');
    }
}

getQuery();


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

window.onload = function(){
    if(screen.width < 600){
        window.location.href = `../index_designerList_mb.html?cid=${cid}`;   
    }
    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-${cid}.json`,
        dataType: "json",
    }).done(function (msg) {
        designer = [...msg][0];
        console.log(designer)
        if(filter == 'views'){
            designer['Content'][0]['Carddata'].sort(function (a, b){
                return a[filter] > b[filter]? -1:1;
            })
        } else {
            designer['Content'][0]['Carddata'].sort(function (a, b){
                return a[filter] > b[filter]? 1:-1;
            })
        }

        console.log(designer['Content'][0]['Carddata']);
        renderinfoCard(designer);
        renderTab(designer['Content']);
        renderTabContent(designer['Content'], designer);
        renderModalTitle(designer['CompanyName']);
        $(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'];
    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+= `<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 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);
}

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 if (i === 3) {
            mediaStr += `<span class="send" data-bs-toggle="modal" data-bs-target="#emailModal">
                            <img src="${designer['scMedia'][i].img}" 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 " 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 if (content[i]['isActive']) {
            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 renderCard(content, i = 0){
    let cardData = '';
    let data = content[i];
    for(let j = 0;j < data.length; j ++) {
        let tagStr = '';
        for(let k = 0;k < data[i]['tags'].length; k ++) {
            tagStr += `<a href="${data[i]['tags'][k]['link']}" class="card__tag" target="_blank">${data[i]['tags'][k]['name']}</a>`
        }
        cardData += `<div class="col-md-4">
                        <a href="" target="_blank">
                        <div class="card">
                                <div class="card__bgImg" style="background-image: url(${data[i]['imgURL']});"></div>
                            <div class="card-body">
                            <h5 class="card-title card__title mt-0">${data[i]['title']}</h5>
                            <p class="card-text mb-0">
                                ${tagStr}
                            </p>
                            </div>
                        </div>
                        </a>
                    </div>`
        $('#pills-intro .work__row').append(cardData);
    }
}


function renderTabContent(content, meta) {
    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 class="col-md-4 fb__block">
                            <div id="fb-container">
                                <div class="fb-page" data-href="${meta['FB_link']}" data-tabs="timeline" data-width="320" data-height="700" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
                                    <blockquote cite="${meta['FB_link']}" class="fb-xfbml-parse-ignore">
                                        <a href="${meta['FB_link']}">${meta['CompanyName']}</a>
                                    </blockquote>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v9.0" nonce="7TsDzQN7"></script>
                   `
                    
        } else {
            for(let j = 0;j < (content[i].Carddata.length < num_per_page? content[i].Carddata.length: num_per_page); j ++) {
            // for(let j = 0;j < content[i].Carddata.length; j ++) {
                let tagStr = '';
                for(let k = 0;k < content[i].Carddata[j].tags.length; k ++) {
                    tagStr += `<a href="${content[i].Carddata[j].tags[k]['link']}" class="card__tag" target="_blank">${content[i].Carddata[j].tags[k]['name']}</a>`
                }
                cardData += `<div class="col-lg-6 col-xl-4">
                                <a href="" target="_blank">
                                <div class="card">
                                    <div style="overflow: hidden;">
                                        <div class="card__bgImg" style="background-image: url(${content[i].Carddata[j]['imgURL']});">
                                        </div>
                                    </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">
                                        ${tagStr}
                                    </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-tabContent').append('<div style="padding: 40px;"></div>');
    $('#pills-intro').addClass('active');
    $('#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 renderFB(data) {
    let str = '';
    for(let i = 0; i < data.length; i++){
        
    }
    $('.fb__block').html(str);
}

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

$(document).on("click","#pills-tab .nav-item-link",function() {
    console.log($(this));
    console.log($(this).attr('id'));
    let className = $(this).attr('id');
    $(`#pills-tab .nav-item-link`).removeClass('active');
    $(`#${className}`).addClass('active');
    $(`.pill-aside #${className}`).addClass('active');
});

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();

function loadMore(designer) {
    let nowTab = document.querySelector('.infoContent .tab-pane.show');
    if(nowTab === document.querySelector('#pills-intro')) {
        let last = document.querySelector('#pills-intro .work__row>div:last-child');
        let pageNum = Math.ceil(totalPages.intro / 9) - 1;
        if ($(this).scrollTop() > last.offsetTop) {
            if(n >= pageNum) {
                n = pageNum;
                return;
              } else {
                n ++;
                let append = '';
                let d = designer['Content'][0].Carddata.slice(9*n, (9*n)+9);
                for(let j = 0;j < d.length; j ++) {
                    let tagStr = ''
                    for(let k = 0;k < d[j]['tags'].length; k ++) {
                        tagStr += `<a href="${d[j]['tags'][k]['link']}" class="card__tag" target="_blank">${d[j]['tags'][k]['name']}</a>`
                    }
                    append += `<div class="col-lg-6 col-xl-4">
                                    <a href="" target="_blank">
                                    <div class="card">
                                        <div style="overflow: hidden;">
                                            <div class="card__bgImg" style="background-image: url(${d[j]['imgURL']});">
                                            </div>
                                        </div>
                                        <div class="card-body">
                                        <h5 class="card-title card__title mt-0">${d[j]['title']}</h5>
                                        <p class="card-text mb-0">
                                            ${tagStr}
                                        </p>
                                        </div>
                                    </div>
                                    </a>
                                </div>`
                }
                $('#pills-intro .work__row').append(append);
            }
        
        }
    } else if (nowTab === document.querySelector('#pills-video')) {
        let pageNum = Math.ceil(totalPages.video / 9) - 1;
        console.log(totalPages.video);
        let last = document.querySelector('#pills-video .work__row>div:last-child');
        if ($(this).scrollTop() > last.offsetTop) {
            if(n_video >= pageNum) {
                n_video = pageNum;
                console.log('n-video:', n_video);
                console.log('pageNum', pageNum);
                return;
              } else {
                console.log('pass-video');
                n_video ++;
                console.log('test');
                let append = '';
                let d = designer['Content'][1].Carddata.slice(9*n_video, (9*n_video)+9);
                for(let j = 0;j < d.length; j ++) {
                    let tagStr = ''
                    for(let k = 0;k < d[j]['tags'].length; k ++) {
                        tagStr += `<a href="${d[j]['tags'][k]['link']}" class="card__tag" target="_blank">${d[j]['tags'][k]['name']}</a>`
                    }
                    append += `<div class="col-lg-6 col-xl-4">
                                    <a href="" target="_blank">
                                    <div class="card">
                                        <div style="overflow: hidden;">
                                            <div class="card__bgImg" style="background-image: url(${d[j]['imgURL']});">
                                                <img src="https://hhh.com.tw/assets/images/rv_web/play.svg" alt="" width="50" height="50">
                                            </div>
                                        </div>
                                        <div class="card-body">
                                        <h5 class="card-title card__title mt-0">${d[j]['title']}</h5>
                                        <p class="card-text mb-0">
                                            ${tagStr}
                                        </p>
                                        </div>
                                    </div>
                                    </a>
                                </div>`
                }
                $('#pills-video .work__row').append(append);
            }
        
        }
    } else if (nowTab === document.querySelector('#pills-columns')) {
        let last = document.querySelector('#pills-columns .work__row>div:last-child');
        let pageNum = Math.ceil(totalPages.columns / 9) - 1;
        if ($(this).scrollTop() > last) {
            if(n_columns >= pageNum) {
                n_columns = pageNum;
                return;
              } else {
                n_columns ++;
                console.log('test');
                let append = '';
                let d = designer['Content'][2].Carddata.slice(9*n_columns, (9*n_columns)+9);
                for(let j = 0;j < d.length; j ++) {
                    let tagStr = ''
                    for(let k = 0;k < d[j]['tags'].length; k ++) {
                        tagStr += `<a href="${d[j]['tags'][k]['link']}" class="card__tag" target="_blank">${d[j]['tags'][k]['name']}</a>`
                    }
                    append += `<div class="col-lg-6 col-xl-4">
                                    <a href="" target="_blank">
                                    <div class="card">
                                        <div style="overflow: hidden;">
                                            <div class="card__bgImg" style="background-image: url(${d[j]['imgURL']});">
                                            </div>
                                        </div>
                                        <div class="card-body">
                                        <h5 class="card-title card__title mt-0">${d[j]['title']}</h5>
                                        <p class="card-text mb-0">
                                            ${tagStr}
                                        </p>
                                        </div>
                                    </div>
                                    </a>
                                </div>`
                }
                $('#pills-columns .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 + ')';
    }
});

function renderModalTitle(title) {
    $('#emailModal #title').val(title);
}

function putEmail() {
    const emailPattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if($('#email').val() !== null && emailPattern.test($('#email').val())) {
        $('#error').hide();
        $('#putEmail_hidden').css('display', 'block');
        $('#add_email').text($('#email').val());
        $('#email').val('');
    } else {
        $('#error').show();
        $('#error').text('email 格式有誤');
    }
    
}