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 = 100;
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`,
        url: `https://m3.hhh.com.tw:18686/gendesigner?id=${cid}&sort=new&page=1`,
        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();
        // })

        $(window).scroll(function () {
            var scrollTop = $(this).scrollTop();
            var scrollHeight = $('body').prop("scrollHeight");
            var clientHeight = document.documentElement.clientHeight;
            let last = document.querySelector('#pills-intro .work__row>div:last-child');
            // if (scrollTop + clientHeight >= scrollHeight - 5) {
            let bottom = $("body").height() - $(window).height() - 1;
            if ($(window).scrollTop() >= bottom) {
                loadMoretest();
            }

        })
    });


}


function scroll_bottom_load_data(page) {

    $.ajax({
        method: "GET",
        url: `https://m3.hhh.com.tw:18686/gendesigner?id=${cid}&sort=new&page=${page}`,
    }).done(function (msg) {
        result = [...msg];
        let append = '';
        let d = result[0].Content[0].Carddata;
        // let cardcontent=[]
        let nowTab = document.querySelector('.infoContent .tab-pane.show');
        if (nowTab === document.querySelector('#pills-intro')) {
            for (let j = 0; j < d.length; j++) {

                let tagStr = ''
                for (let k = 0; k < d[j]['tag'].length; k++) {
                    tagStr += `<a href="${d[j]['tag'][k]['link']}" class="card__tag" target="_blank">${d[j]['tag'][k]['name']}</a>`
                }
                append += `<div class="col-lg-6 col-xl-4">
                                    <a href="${d[j]['url']}" 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>`

                // var cardcontent2=cardcontent.push.d;
            }
            if (d.length === 0) {
                $('#loading_img').css("display", "none")
            }
            // console.log(cardcontent2);

            $('#pills-intro .work__row').append(append);
        }else if (nowTab === document.querySelector('#pills-video')) {
                let append = '';
                let d = result[0].Content[0].Carddata;
                for(let j = 0;j < d.length; j ++) {
                    let tagStr = ''
                    for(let k = 0;k < d[j]['tag'].length; k ++) {
                        tagStr += `<a href="${d[j]['tag'][k]['link']}" class="card__tag" target="_blank">${d[j]['tag'][k]['name']}</a>`
                    }
                    append += `<div class="col-lg-6 col-xl-4">
                                    <a href="${d[j]['url']}" 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>`
                }
                if (d.length === 0) {
                    $('#loading_img').css("display", "none")
                }
                $('#pills-video .work__row').append(append);
            
          }else if (nowTab === document.querySelector('#pills-columns')) {
            let append = '';
            let d = result[0].Content[0].Carddata;
            for(let j = 0;j < d.length; j ++) {
                let tagStr = ''
                for(let k = 0;k < d[j]['tag'].length; k ++) {
                    tagStr += `<a href="${d[j]['tag'][k]['link']}" class="card__tag" target="_blank">${d[j]['tag'][k]['name']}</a>`
                }
                append += `<div class="col-lg-6 col-xl-4">
                                <a href="${d[j]['url']}" 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);
          }


    });

}

var page = 1;
function loadMoretest() {

    setTimeout(function () {
        // let pageNum = 2;
        // if(page<=pageNum){
        //     pageNum++;
        //     page++;
        // }else{

        // }
        scroll_bottom_load_data(page);
        page++;
        return page


    }, 500);
}


function loadMore(page) {
    var scrollTop = $(this).scrollTop();
    var scrollHeight = $('body').prop("scrollHeight");
    var clientHeight = document.documentElement.clientHeight;

    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 / 12) - 1;
        // if (scrollTop + clientHeight >= scrollHeight - 5) {
        if ($(this).scrollTop() > last.offsetTop) {
            // n=1;
            // n ++;
            // console.log(n);
            // $.ajax({
            //     method: "GET",
            //     url: `https://m3.hhh.com.tw:18686/gendesigner?id=${cid}&sort=new&page=${b}`,
            // }).done(function (msg) {
            //     result = [...msg];
            //     // console.log(result);
            //     let append = '';
            //     let d = result[0].Content[0].Carddata;

            //     for (let j = 0; j < d.length; j++) {
            //         console.log(d);
            //         let tagStr = ''
            //         for (let k = 0; k < d[j]['tag'].length; k++) {
            //             tagStr += `<a href="${d[j]['tag'][k]['link']}" class="card__tag" target="_blank">${d[j]['tag'][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-12 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);
    //         }

    //     }
    // }
}




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').html(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>分公司地址：</div>
                    </div>
                    <div class="infoCard__detail__r">
                        <a href="${designer['Branches'][i].link}" >${designer['Branches'][i].address}</a>
                    </div>
                </aside>
                <aside class="d-flex">
                    <div class="infoCard__detail__l">
                        <div>分公司電話：</div>
                    </div>
                    <div class="infoCard__detail__r">
                        <a href="tel:${designer['Branches'][i].tel}" >${designer['Branches'][i].tel}</a>
                    </div>
                </aside>`
                if(designer['Branches'][i].fax==""){
                    otherStr +=  `<aside class="d-flex">
                  
                </aside>
                    `
                }else{
                    otherStr += `<aside class="d-flex"><div class="infoCard__detail__l">
                    <div>分公司傳真：</div>
                </div>
                <div class="infoCard__detail__r">
                    <a href="fax:${designer['Branches'][i].fax}" >${designer['Branches'][i].fax}</a>
                </div>   </aside>`
                }
         
    }
    $('.infoCard__branches').html(otherStr);
    let currentURL = window.location.href;

    // 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 === 1) {
            mediaStr += `<a target="_blank" href="https://social-plugins.line.me/lineit/share?url=${currentURL}}">
            <img src="${designer['scMedia'][i].img}" alt="">
             </a>`;
        } else if (i === 2) {
            mediaStr += `<a target="_blank" href="https://www.addtoany.com/ext/wechat/share/#url=url=${currentURL}}">
            <img src="${designer['scMedia'][i].img}" alt="">
             </a>`;
        } 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 target="_blank" 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 (content[i]['Carddata'] == "" & content[i]['info'] == undefined) {
            tabTitleStr += ``
        } else {
            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>
                   `
            // $('#loading_img').css("display", "none")
        }
        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].tag.length; k++) {
                    tagStr += `<a href="${content[i].Carddata[j].tag[k]['link']}" class="card__tag" target="_blank">${content[i].Carddata[j].tag[k]['name']}</a>`
                }
                cardData += `<div class="col-12 col-lg-6 col-xl-4">
                                <a href="${content[i].Carddata[j]['url']}" 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").append(`              <div class="d-flex justify-content-center py-1 py-md-5">
    <div  id="loading_img">
        <svg class="loading-move" xmlns="http://www.w3.org/2000/svg" width="40" height="41.965"
            viewBox="0 0 40 41.965">
            <defs>
                <style>
                    .a {
                        fill: #ee751b;
                    }
                </style>
            </defs>
            <circle class="a" cx="4.89" cy="4.89" r="4.89" transform="translate(16.094)" />
            <ellipse class="a" cx="2.933" cy="2.933" rx="2.933" ry="2.933"
                transform="translate(18.05 36.099)" />
            <ellipse class="a" cx="4.401" cy="4.401" rx="4.401" ry="4.401" transform="translate(4.487 5.464)" />
            <circle class="a" cx="2.445" cy="2.445" r="2.445" transform="translate(30.626 31.609)" />
            <ellipse class="a" cx="3.911" cy="3.911" rx="3.911" ry="3.911" transform="translate(0 18.056)" />
            <circle class="a" cx="1.955" cy="1.955" r="1.955" transform="translate(36.091 20.01)" />
            <path class="a" d="M5.065,20.213a3.422,3.422,0,1,0,4.839,0A3.419,3.419,0,0,0,5.065,20.213Z"
                transform="translate(1.403 11.424)" />
            <ellipse class="a" cx="1.466" cy="1.466" rx="1.466" ry="1.466"
                transform="translate(31.603 8.434)" />
        </svg>
    </div>
</div>`)
$("#pills-video").append(`              <div class="d-flex justify-content-center py-1 py-md-5">
<div  id="loading_img">
    <svg class="loading-move" xmlns="http://www.w3.org/2000/svg" width="40" height="41.965"
        viewBox="0 0 40 41.965">
        <defs>
            <style>
                .a {
                    fill: #ee751b;
                }
            </style>
        </defs>
        <circle class="a" cx="4.89" cy="4.89" r="4.89" transform="translate(16.094)" />
        <ellipse class="a" cx="2.933" cy="2.933" rx="2.933" ry="2.933"
            transform="translate(18.05 36.099)" />
        <ellipse class="a" cx="4.401" cy="4.401" rx="4.401" ry="4.401" transform="translate(4.487 5.464)" />
        <circle class="a" cx="2.445" cy="2.445" r="2.445" transform="translate(30.626 31.609)" />
        <ellipse class="a" cx="3.911" cy="3.911" rx="3.911" ry="3.911" transform="translate(0 18.056)" />
        <circle class="a" cx="1.955" cy="1.955" r="1.955" transform="translate(36.091 20.01)" />
        <path class="a" d="M5.065,20.213a3.422,3.422,0,1,0,4.839,0A3.419,3.419,0,0,0,5.065,20.213Z"
            transform="translate(1.403 11.424)" />
        <ellipse class="a" cx="1.466" cy="1.466" rx="1.466" ry="1.466"
            transform="translate(31.603 8.434)" />
    </svg>
</div>
</div>`)
$("#pills-columns").append(`              <div class="d-flex justify-content-center py-1 py-md-5">
<div  id="loading_img">
    <svg class="loading-move" xmlns="http://www.w3.org/2000/svg" width="40" height="41.965"
        viewBox="0 0 40 41.965">
        <defs>
            <style>
                .a {
                    fill: #ee751b;
                }
            </style>
        </defs>
        <circle class="a" cx="4.89" cy="4.89" r="4.89" transform="translate(16.094)" />
        <ellipse class="a" cx="2.933" cy="2.933" rx="2.933" ry="2.933"
            transform="translate(18.05 36.099)" />
        <ellipse class="a" cx="4.401" cy="4.401" rx="4.401" ry="4.401" transform="translate(4.487 5.464)" />
        <circle class="a" cx="2.445" cy="2.445" r="2.445" transform="translate(30.626 31.609)" />
        <ellipse class="a" cx="3.911" cy="3.911" rx="3.911" ry="3.911" transform="translate(0 18.056)" />
        <circle class="a" cx="1.955" cy="1.955" r="1.955" transform="translate(36.091 20.01)" />
        <path class="a" d="M5.065,20.213a3.422,3.422,0,1,0,4.839,0A3.419,3.419,0,0,0,5.065,20.213Z"
            transform="translate(1.403 11.424)" />
        <ellipse class="a" cx="1.466" cy="1.466" rx="1.466" ry="1.466"
            transform="translate(31.603 8.434)" />
    </svg>
</div>
</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) {
//     console.log(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 / 12) - 1;
//         if ($(this).scrollTop() > last.offsetTop) {
//             if(n >= pageNum) {
//                 n = pageNum;
//                 return;
//               } else {
//                 n ++;
//                 console.log(n);
//                 let append = '';
//                 let d = designer['Content'][0].Carddata.slice(12*n, (12*n)+12);
//                 console.log(d);
//                 for(let j = 0;j < d.length; j ++) {
//                     let tagStr = ''
//                     for(let k = 0;k < d[j]['tag'].length; k ++) {
//                         tagStr += `<a href="${d[j]['tag'][k]['link']}" class="card__tag" target="_blank">${d[j]['tag'][k]['name']}</a>`
//                     }
//                     append += `<div class="col-12 col-lg-6 col-xl-4">
//                                     <a href="${d[j]['url']});" 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-12 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 格式有誤');
    }

}