hhh-page-dev/columns.js

// $(".popular").hide();

$(document).on("click", ".likeSee__state__filter--item", function (event) {
    // $(".News").toggle();
    // $(".popular").toggle();
    $(".likeSee__state__filter--item").removeClass('active');
    $(this).addClass("active");
});

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

function get_data() {
    $.ajax({
        method: "GET",
        // url: `json/Columns-${id}.json`,
        url: `https://m3.hhh.com.tw:18686/gencolumn?id=${id}&sort=new&page=1`,
        // url:`json/Columns.json`,
        dataType: "json",
    })

        .done(function (msg) {
            console.log(msg);

            let ColumnsContent = "";
            let ColumnsTag = "";
            let breadcrumbTitle = "";
            let article_info = "";
            let OtherColumns = "";
            let PopularColumns = "";



            breadcrumbTitle = `<a href="#">${msg[0].Columnstitle}</a>`

            article_info = `
        <h1 class="article__title mt-4">${msg[0].Columnstitle}</h1>
        <div class="small">${msg[0].ColumnsDate}｜ 人氣:${msg[0].ColumnsViews}</div>
        `;


            ColumnsContent = `${msg[0].ColumnsContent}`;

            for (let j = 0; j < msg[0].ColumnsTag.length; j++) {
                ColumnsTag += ' \
                <a target="_blank" href="https://hhh.com.tw/cases/lists/' + msg[0].ColumnsTag[j].Tag + '-keyword/" \
                class="btn btn-outline-custom rounded-0">'
                    + msg[0].ColumnsTag[j].Tag + '</a>';
            }


            for (let i = 0; i < 12; i++) {
                OtherColumns +=
                    '<div class="col-12 col-md-4 ps-0"><div class="cardList__items">\
                <a target="_blank" href="https://hhh.com.tw/columns/detail/'+ msg[0].OtherColumns[i].Columnsid + '/"> <img src="' + msg[0].OtherColumns[i].ColumnsCoverImg + '" alt="">\
            <div class="cardList__items__content">\
                <a href="https://hhh.com.tw/columns/detail/'+ msg[0].OtherColumns[i].Columnsid + '/"" target="_blank">\
                    <div class="cardList__items--title cardList__items--ellipse">\
                        '+ msg[0].OtherColumns[i].Columnstitle + '\
                    </div>\
                </a>'
                OtherColumns += '<p>'
                for (k = 0; k < msg[0].OtherColumns[i].ColumnsTag.length; k++) {
                    OtherColumns += '\
                    <a class="likeSee__tag--item" href="https://hhh.com.tw/columns/lists/'+ msg[0].OtherColumns[i].ColumnsTag[k].tag + '-keyword/all-columntypea/" arget="_blank">' + msg[0].OtherColumns[i].ColumnsTag[k].Tag + '</a>'
                }
                OtherColumns += '</p>'
                OtherColumns += '</div></div></div>'

            }


            // for(let i=0; i<msg[0].PopularColumns.length; i++){
            //     PopularColumns+=
            //     '<div class="col-12 col-md-4 ps-0"><div class="cardList__items">\
            //         <a target="_blank" href="https://hhh.com.tw/columns/detail/'+msg[0].PopularColumns[i].Columnsid+'/"> <img src="'+msg[0].PopularColumns[i].ColumnsCoverImg+'" alt="">\
            //     <div class="cardList__items__content">\
            //         <a href="https://hhh.com.tw/columns/detail/'+msg[0].PopularColumns[i].Columnsid+'/"" target="_blank">\
            //             <div class="cardList__items--title cardList__items--ellipse">\
            //                 '+msg[0].PopularColumns[i].Columnstitle+'\
            //             </div>\
            //         </a>'
            //         PopularColumns+='<p>'
            //         for(k=0; k<msg[0].PopularColumns[i].ColumnsTag.length; k++){
            //             PopularColumns+='\
            //             <a class="likeSee__tag--item" href="https://hhh.com.tw/columns/lists/'+msg[0].PopularColumns[i].ColumnsTag[k].tag+'-keyword/all-columntypea/" arget="_blank">'+msg[0].PopularColumns[i].ColumnsTag[k].Tag+'</a>'
            //         }
            //         PopularColumns+='</p>'
            //         PopularColumns+='</div></div></div>'

            // }
            $('.article_info').html(article_info);

            $('.breadcrumb-title').html(breadcrumbTitle);

            $('.ColumnsContent').html(ColumnsContent);

            $('.ColumnsTag').html(ColumnsTag);

            $('.OtherColumns').html(OtherColumns);

            // $('.PopularColumns').html(PopularColumns);

        });
}

function renderSec07() {

    $.ajax({
        method: "GET",
        // url: `json/bannerAds-${id}.json`,
        url: `json/bannerAds.json`,
        dataType: "json",
    })

        .done(function (msg) {

            console.log(msg);

            let str = '';

            for (let i = 0; i < msg[0].data.length; i++) {
  
                str += `<div class="sec-07__slider-${i + 1} slide-item" onclick="window.open('${msg[0].data[i].link}');" data-bg="${msg[0].data[i].imgUrl}"><img class="img-fluid" src="${msg[0].data[i].imgUrl}"></div>`

            }

            $(`.sec-07__slider`).html(str);

            $(".sec-07__slider").slick({
                dots: false,
                autoplay: true,
                arrows: true,
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplaySpeed: 7000,
                initialSlide: 0,
                infinite: 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>'
            });

        });

}

get_data();

// renderSec07();

let filter;

$(".views").click(function () {
    console.log(1);
    filter = "hot";
    get_views_data();
});

$(".recently").click(function () {
    console.log(2);
    filter = "new";
    get_views_data();
});



function get_views_data() {
    $.ajax({
        method: "GET",
        url:`https://m3.hhh.com.tw:18686/gencolumn?id=${id}&sort=${filter}&page=1`,
        // url: `json/Columns-${id}.json`,
        // url:`json/cases.json`,
        dataType: "json",
    })
        .done(function (msg) {

            console.log(msg);
            // msg[0].OtherColumns.sort(function (a, b) {
            //     return a['Views'] > b['Views'] ? -1 : 1;
            // });

            console.log(msg[0].OtherColumns);
            let OtherColumns = "";

            for (let i = 0; i < msg[0].OtherColumns.length; i++) {
                OtherColumns +=
                    '<div class="col-12 col-md-4 ps-0"><div class="cardList__items">\
                    <a target="_blank" href="https://hhh.com.tw/columns/detail/'+ msg[0].OtherColumns[i].Columnsid + '/"> <img src="' + msg[0].OtherColumns[i].ColumnsCoverImg + '" alt="">\
                <div class="cardList__items__content">\
                    <a href="https://hhh.com.tw/columns/detail/'+ msg[0].OtherColumns[i].Columnsid + '/"" target="_blank">\
                        <div class="cardList__items--title cardList__items--ellipse">\
                            '+ msg[0].OtherColumns[i].Columnstitle + '\
                        </div>\
                    </a>'
                OtherColumns += '<p>'
                for (k = 0; k < msg[0].OtherColumns[i].ColumnsTag.length; k++) {
                    OtherColumns += '\
                        <a class="likeSee__tag--item" href="https://hhh.com.tw/columns/lists/'+ msg[0].OtherColumns[i].ColumnsTag[k].tag + '-keyword/all-columntypea/" arget="_blank">' + msg[0].OtherColumns[i].ColumnsTag[k].Tag + '</a>'
                }
                OtherColumns += '</p>'
                OtherColumns += '</div></div></div>'

            }

            $('.OtherColumns').html(OtherColumns);

        });

};


if ($(".views").hasClass("active")) {
    filter = "hot";
    // alert('1');
} else {
    filter = "new";
    // alert('2');
}


function scroll_bottom_load_data(page) {

    $.ajax({
        method: "GET",
        // url: `json/cases-${id}.json`,
        // url:`json/cases.json`,
        url: `https://m3.hhh.com.tw:18686/gencolumn?id=${id}&sort=${filter}&page=${page}`,

        dataType: "json",
    })
        .done(function (msg) {
            let OtherColumns = "";
            for (let i = 0; i < msg[0].OtherColumns.length; i++) {
                OtherColumns +=
                    '<div class="col-12 col-md-4 ps-0"><div class="cardList__items">\
                    <a target="_blank" href="https://hhh.com.tw/columns/detail/'+ msg[0].OtherColumns[i].Columnsid + '/"> <img src="' + msg[0].OtherColumns[i].ColumnsCoverImg + '" alt="">\
                <div class="cardList__items__content">\
                    <a href="https://hhh.com.tw/columns/detail/'+ msg[0].OtherColumns[i].Columnsid + '/"" target="_blank">\
                        <div class="cardList__items--title cardList__items--ellipse">\
                            '+ msg[0].OtherColumns[i].Columnstitle + '\
                        </div>\
                    </a>'
                OtherColumns += '<p>'
                for (k = 0; k < msg[0].OtherColumns[i].ColumnsTag.length; k++) {
                    OtherColumns += '\
                        <a class="likeSee__tag--item" href="https://hhh.com.tw/columns/lists/'+ msg[0].OtherColumns[i].ColumnsTag[k].tag + '-keyword/all-columntypea/" arget="_blank">' + msg[0].OtherColumns[i].ColumnsTag[k].Tag + '</a>'
                }
                OtherColumns += '</p>'
                OtherColumns += '</div></div></div>'

            }

            // $('.OtherColumns').html(OtherColumns);
            $('.OtherColumns').append(OtherColumns);


        });

}


$(window).scroll(function () {
    var scrollTop = $(this).scrollTop();
    var scrollHeight = $('body').prop("scrollHeight");
    var clientHeight = document.documentElement.clientHeight;
    if (jQuery(window).width() < 767) {
       
        //一樣 var scrollHeight2 = document.documentElement.scrollHeight;
   

        if (scrollTop + clientHeight >= scrollHeight - 5) {
            loadMore_m();
            console.log(page);
        }
    } else {

        if (scrollTop + clientHeight >= scrollHeight - 5) {
            loadMore();
            console.log(page);

        }
    }


})


var page = 1;
function loadMore() {

    setTimeout(function () {
        page++;
        // console.log(page);
        scroll_bottom_load_data(page);

        return page
    }, 500);
}


function loadMore_m() {

    // console.log(page);

    setTimeout(function () {
        page++;
        // console.log(page);
        scroll_bottom_load_data(page);

        return page
    }, 500);
}
// function loadMore_m() {

//     // console.log(page);

//     setTimeout(function () {
//         page++;
//         // console.log(page);
//         scroll_bottom_load_data(page);

//         return page
//     }, 500);
// }