hhh-page-dev/js/index.js

let userAgent;
let isSafari = false;
let browserName;
window.onload = function(){
    if(screen.width < 900){
        window.location.href = "../index_designerList_mb.html";   
    }
    userAgent = navigator.userAgent;
    detectBrowser(userAgent);
    detectDirection ();
    let result;
      $.ajax({
          method: "GET",
          url: "./json/realtime.json",
          dataType: "json",
      }).done(function (msg) {
          result = [...msg];
          renderSec00(result);
          renderSec02(result);
          renderSec05(result);
          renderSec06(result);
          renderSec07(result);
          renderSec08(result);
          renderSec09(result);
          renderSec10(result);
          //renderSec11(result);
          renderVideo(result);
          renderTrending(result);
      });
}
  

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

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



    function renderSec00(data) {
        let temp = data[0]['data'];
        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 renderSec02(data) {
        let temp = data[1]['data'];
        renderBannerStr('sec-02__slider', temp);
        $(".sec-02__slider").slick({
            dots: false,
            autoplay: true,
            arrows: true,
            fade: true,
            autoplaySpeed: 4000,
            prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 33px;color: white;transform: translateY(-10px);"></i></button>',
            nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 33px;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 renderSec05(data) {
        let randomIdx = Math.floor(Math.random()*3);
        const ran = $('.sec-05__tabdiv .nav-pills li').eq(randomIdx);
        const ranDiv = $('.sec-05tab-content>div').eq(randomIdx);
        $('.sec-05tab-content>div').hide();
        ranDiv.show();
        ran.addClass('active');
        ran.children().addClass('active');
        $('.sec-05 .morelink').attr('href', $('.sec-05__tabdiv .nav-item-link.active').data('link'));
          let temp = data[2]['data'];
          for(let i = 0; i < temp.length; i++){
            if(temp[i]["tab"] == '最夯設計'){
              let str = '';
              let sub = temp[i]["data"];
              for(let j = 0; j < sub.length; j++){
                str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}');">
                    <div class="tabpar__card__imgfr mb-2" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"></div>
                    <h5 class="mb-2 me-2">${sub[j]['title']}</h5>
                    <p class="mt-2">${sub[j]['description']}</p>
                </div>`;
              }
              $('#pills-hot-tab .tabpar').html(str);
            }
            if(temp[i]["tab"] == '影音實錄'){
              let str = '';
              let sub = temp[i]["data"];
              for(let j = 0; j < sub.length; j++){
                str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}');">
                <div class="tabpar__card__imgfr mb-2" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"><img data-src="images/Play-Button.webp" alt="" class="tabpar__card__play lazyload"></div>
                <h5 class="mb-2  me-2">${sub[j]['title']}</h5>
                <p class="mt-2">${sub[j]['description']}</p>
            </div>`;
              }
              $('#pills-video-tab .tabpar').html(str);
            }
            if(temp[i]["tab"] == '專欄文章'){
              let str = '';
              let sub = temp[i]["data"];
              for(let j = 0; j < sub.length; j++){
                str+= `<div class="tabpar__card" onclick="window.open('${sub[j]['link']}');">
                <div class="tabpar__card__imgfr mb-2" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"></div>
                <h5 class="mb-2  me-2">${sub[j]['title']}</h5>
                <p class="mt-2">${sub[j]['description']}</p>
            </div>`;
              }
              $('#pills-blog-tab .tabpar').html(str);
            }
          }
          const cardText = document.querySelectorAll('.tabpar__card p');
          cardText.forEach((item, i) => {
            let len = item.textContent.length;
            if(len > 18) {
              let str = item.textContent.substring(0, 18) + '...';
              item.textContent = str;
            }
          })
          $('.sec-05__tabdiv .nav-pills button').on('click', function(event){
            event.preventDefault();
            $('.sec-05__tabdiv .nav-pills li').removeClass('active');
            $('.sec-05__tabdiv .nav-pills li button').removeClass('active');
            $(this).addClass('active');
            $(this).parent().addClass('active');
            $('.sec-05tab-content>div').hide();
            var target = $(this).attr('id');
            $(`#pills-tab #${target}`).show();
            $('.sec-05tab-content .tabpar').slick('setPosition');
        });

        $(`.sec-05tab-content .tabpar`).slick({
            arrows: true,
            slidesToShow: 3,
            infinite: false,
            dots: false,
            slidesToScroll: 1,
            prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 35px;color: black;"></i></button>',
            nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 35px;color: black;"></i></button>'
        });

        $('.sec-05__tabdiv .nav-item-link').click(function() {
            $('.sec-05 .morelink').attr('href',$('.sec-05__tabdiv .nav-item-link.active').data('link'));
        });
    }

    function renderSec06(data) {
        let temp = data[3]['data'];
        let str = '';
        for(let i = 0; i < temp.length; i++){
            if(temp[i].video == 'true'){
                str+= `<div class="sec-06__card" onclick="window.open('${temp[i]['link']}');">
                    <div class="sec-06__card__outer"><div class="sec-06__card__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"><img class="sec-06__card__play lazyload" data-src="images/Play-Button.webp"></div></div>
                    <h5 class="mb-2 mt-2">${temp[i]['title']}</h5>
                    <p class="mt-2">${temp[i]['description']}</p>
                    </div>`;
            } else {
                str+= `<div class="sec-06__card" onclick="window.open('${temp[i]['link']}');">
                    <div class="sec-06__card__outer"><div class="sec-06__card__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"></div></div>
                    <h5 class="mb-2 mt-2">${temp[i]['title']}</h5>
                    <p class="mt-2">${temp[i]['description']}</p>
                    </div>`;
            }
        }
        $('.sec-06 .sec-06__slider').html(str);
        $('.sec-06__slider').slick({
            arrows: true,
            dots: false,
            speed: 800,
            prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 30px;color: white;"></i></button>',
            nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 30px;color: white;"></i></button>'
        });
        const cardText = document.querySelectorAll('.sec-06__card p');
        cardText.forEach((item, i) => {
            let len = item.textContent.length;
            if(len > 20) {
              let str = item.textContent.substring(0, 40) + '...';
              item.textContent = str;
            }
        });
    }

    function renderSec07(data) {
        let temp = data[5]['data'];
        let str = '';
        for(let i = 0; i < temp.length; i++){
            str+= `<div class="sec-07__slider-${i+1} slide-item" onclick="window.open('${temp[i]['link']}');" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"></div>`
        }
        $(`.sec-07__slider`).html(str);
        $(".sec-07__slider").slick({
            dots: false,
            autoplay: true,
            arrows: false,
            slidesToShow: 4,
            slidesToScroll: 1,
            autoplaySpeed: 7000,
            initialSlide: 0,
            infinite: true,
        });
    }

    function renderSec08(data) {
        let temp = data[4]['data'];
        let str = '';
        for(let i = 0; i < temp.length; i++){
            if(temp[i].video == 'true'){
                str+= `<div class="sec-08__slider-${i+1} sec-08__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
                        <div class="sec-08__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"><img class="sec-08__card__play lazyload" data-src="images/Play-Button.webp"></div>
                        <h5 class="mb-2 me-2">${temp[i]['title']}</h5>
                        <p class="mb-2 me-2">${temp[i]['description']}</p>
                    </div>`;
            } else {
                str+= `<div class="sec-08__slider-${i+1} sec-08__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
                        <div class="sec-08__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"></div>
                        <h5 class="mb-2 me-2">${temp[i]['title']}</h5>
                        <p class="mb-2 me-2">${temp[i]['description']}</p>
                    </div>`;
            }
        }
        $('.sec-08__slider').html(str);
        $(".sec-08__slider").slick({
          arrows: true,
          slidesToShow: 1,
          infinite: false,
          dots: false,
          slidesToShow: 3,
          centerPadding: '12px',
          prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 35px;color: black;"></i></button>',
            nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 35px;color: black;"></i></button>'
      });
      const cardText = document.querySelectorAll('.sec-08__card p');
        cardText.forEach((item, i) => {
          let len = item.textContent.length;
          if(len > 20) {
            let str = item.textContent.substring(0, 20) + '...';
            item.textContent = str;
          }
        })
    }

    function renderSec09(data) {
        let temp = data[6]['data'];
        let str = '';
        for(let i = 0; i < temp.length; i++){
            if(temp[i].video !== 'false') {
                str+= `<div class="sec-09__slider-1 sec-09__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
                      <div class="sec-09__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"><img class="sec-09__card__play lazyload" data-src="images/Play-Button.webp"></div>
                      <p class="sec-09__cardtxt">${temp[i]['title']}</p>
                    </div>`
            } else {
                str+= `<div class="sec-09__slider-1 sec-09__card col-12 mx-2" onclick="window.open('${temp[i]['link']}');">
                      <div class="sec-09__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"></div>
                      <p class="sec-09__cardtxt">${temp[i]['title']}</p>
                    </div>`
            }
            
        }
        $('.sec-09__slider').html(str);
        $(".sec-09__slider").slick({
            autoplay: true,
            autoplaySpeed: 7000,
            arrows: true,
            slidesToShow: 4,
            infinite: true,
            dots: false,
            slidesToScroll: 1,
            prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="font-size: 35px;color: black;"></i></button>',
            nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="font-size: 35px;color: black;"></i></button>'
        });
    }
    function renderSec10(data) {
        renderRecStr("sec-10", data[7]['data'].slice(0, 6));
        renderRecStr("sec-11", data[8]['data'].slice(0, 6));
    }

    function renderRecStr(sec, data) {
        let str = '';
        for(let i = 0; i < data.length; i++){
            //console.log(data[i]['description'].length);
            if(data[i]['description'].length > 0) {
                data[i]['description'].split('，');
                data[i]['description'] = data[i]['description'].split('，').slice(1).join("");
            }
            if(data[i].video !== 'false') {
                str+= `<div class="${sec}__card col-4 mb-3" onclick="window.open('${data[i]['link']}');">
                        <div class="${sec}__card-img mb-2" style="background-image: url('${data[i]['imgUrl']}');" data-bg="${data[i]['imgUrl']}"><img class="${sec}__card__play lazyload" data-src="images/Play-Button.webp"></div>
                        <h5 class="me-2">${data[i]['title']}</h5>
                        <p class="${sec}__cardtxt me-2">${data[i]['description']}</p>
                    </div>`
            } else {
                str+= `<div class="${sec}__card col-4 mb-3" onclick="window.open('${data[i]['link']}');">
                        <div class="${sec}__card-img mb-2" style="background-image: url('${data[i]['imgUrl']}');" data-bg="${data[i]['imgUrl']}"></div>
                        <h5 class="me-2">${data[i]['title']}</h5>
                        <p class="${sec}__cardtxt me-2">${data[i]['description']}</p>
                    </div>`
            }
            
        }
        $(`.${sec} .row`).html(str);
        const cardText = document.querySelectorAll(`.${sec}__card p`);
        cardText.forEach((item, i) => {
          let len = item.textContent.length;
          if(len > 18) {
            let str = item.textContent.substring(0, 18) + '...';
            item.textContent = str;
          }
        })
    }

    function renderVideo(data) {
        let temp = data[9];
        console.log(data[9]);
        $('.sec-06__videotxt').text(temp['title']);
        console.log('test');
        $('.sec-06__video__imgfr').css('background-image', `url(https://img.youtube.com/vi/${temp['yt']}/hqdefault.jpg)`);
        $('#videoModal').on('shown.bs.modal', function () {
            $('#videoModal iframe').attr('src', `https://www.youtube.com/embed/${temp['yt']}?controls=0&autoplay=1&amp;enablejsapi=1&amp;origin=https%3A%2F%2Fm.hhh.com.tw&amp;widgetid=1`);
        });
        $('#videoModal').on('hidden.bs.modal', function () {
          $('#videoModal iframe').removeAttr('src');
        });
    }

    function renderTrending(result){
        let temp = result[10]['data'];
        let str = '';
        for(let i = 0; i < temp.length; i++){
            str += `<a class="dropbox__hots__link" href="https://hhh.com.tw/search/lists/case/${temp[i]}-keyword/">${temp[i]}</a>`
        }
        $('.dropbox__hots').html(`<strong class="dropbox__hots__title">熱搜關鍵字：</strong>${str}`);
    }


function tab2 () {
    if(('.dropbox__tabdiv').length){
        // Show the first tab by default
    $('.dropbox-tab-content>div').hide();
    $('.dropbox-tab-content>div:first').show();
    $('.dropbox__tabdiv .nav-pills li:first').addClass('active');
    $('.dropbox__tabdiv .nav-pills li:first button').addClass('active');

    // Change tab class and display content
    $('.dropbox__tabdiv .nav-pills button').on('click', function(event){
        event.preventDefault();
        $('.dropbox__tabdiv .nav-pills li').removeClass('active');
        $('.dropbox__tabdiv .nav-pills li button').removeClass('active');
        $(this).addClass('active');
        $(this).parent().addClass('active');
        $('.dropbox-tab-content>div').hide();
        var target = $(this).attr('id');
        $(`#pills-tab-2 #${target}`).show();
    });
    }
}

tab2();

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

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

$('.navbar-search img').click(function(){
    $('.navbar-search .dropbox').toggleClass('open');
     if($('.navbar-search .dropbox').hasClass('open')) {
        $('.navbar-nav .nav-item>.dropbox').addClass('d-none');
    } else {
        $('.navbar-nav .nav-item>.dropbox').removeClass('d-none');
    } 
});

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

// search
const imageSearch = document.querySelector('.image-search');
const imagesSelect = document.querySelectorAll('#pills-img-tab select');

imageSearch.addEventListener("click", function() {
    searchQueryStr(imagesSelect, 'photos');
})

const newsSearch = document.querySelector('.news-search');
const newsSelect = document.querySelectorAll('#pills-news-tab select');

newsSearch.addEventListener("click", function() {
    searchQueryStr(newsSelect, 'builder');
});

const caseSearch= document.querySelector('.case-search');
const caseSelect = document.querySelectorAll('#pills-case-tab select');

caseSearch.addEventListener("click", function() {
    let query = ''
    let str = 'https://hhh.com.tw/cases/lists/1-page/new-sort/';
    if($('#case-shui').val() == '風水') {
        caseSelect.forEach((item, i) => {
            if(i < 2) {
                if(item.value !== ''){ 
                    query += `/${item.value}`;
                }
            }
        });
        str = `https://hhh.com.tw/cases/lists${query}/風水-keyword/1-page/`;
        window.open(str);
        return;
    } 
    caseSelect.forEach((item, i) => {
        if(item.value !== ''){
            query += `/${item.value}`;
        }
    });
    str = `https://hhh.com.tw/cases/lists${query}/1-page/`;
    window.open(str);
})

const designerSearch = document.querySelector('.designer-search');
const designerSelect = document.querySelectorAll('#pills-designer-tab select');

designerSearch.addEventListener("click", function() {
    searchQueryStr(designerSelect, 'designers');
})

function searchQueryStr(block, link){
    let query = ''
    let str = `https://hhh.com.tw/${link}/lists/1-page/`;
    block.forEach((item, i) => {
        if(item.value !== ''){
            query += `/${item.value}`;
        }
    });
    str = `https://hhh.com.tw/${link}/lists${query}/1-page/`;
    window.location.href = str;
}

const searchBtn = document.querySelector('.dropbox__searchBar__submit');
const searchBar = document.querySelector('.dropbox__searchBar__input');

searchBtn.addEventListener('click', search);
searchBar.addEventListener('keyup', pressSearch);
function search() {
  if(searchBar.value == '') {
    window.location.href = 'https://m.hhh.com.tw/search/lists/case/';
  } else {
    window.location.href = `https://m.hhh.com.tw/search/lists/case/${searchBar.value}-keyword/`;
    console.log(`https://m.hhh.com.tw/search/lists/case/${searchBar.value}-keyword/`)
  }
}

function pressSearch(e) {
  if (e.keyCode === 13) {
    e.preventDefault();
    search();
  }
}

function todayTV() {
    var utc = new Date().toJSON().slice(0,10).replace(/-/g,'-');
    window.location.href=`https://hhh.com.tw/program/?tv=gstv&date=${utc}&type=tv`;
}

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

// city result
let cityResult;
$.ajax({
    method: "GET",
    url: "../json/taiwan_districts.json",
    dataType: "json",
}).done(function (msg) {
    cityResult = [...msg];
    let str = '';
    for(let i = 0; i < cityResult.length; i++){
        str += `<option value="${cityResult[i]['zip']}-city">${cityResult[i]['name']}</option>`;
    }
    $('#designer-city').html(`<option value="" selected="selected" disabled>所在縣市</option>${str}`);
    $('#designer-city').on('change', function() {
        let selected = $(this).val().split('-')[0];
        let countyStr = '';
        for(let i = 0; i < cityResult.length; i++){
            if(cityResult[i]['zip'] == selected) {
                for(let j = 0; j < cityResult[i]['districts'].length; j++){
                    countyStr += `<option value="${cityResult[i]['districts'][j]['zip']}-county">${cityResult[i]['districts'][j]['name']}</option>`;
                }
            }
        }
        $('#designer-country').html(`<option value="" selected="selected" disabled>所在地區</option>${countyStr}`);
    });
});

    //jQuery time
    var current_fs, next_fs, previous_fs; //fieldsets
    var left, opacity, scale; //fieldset properties which we will animate
    var animating; //flag to prevent quick multi-click glitches
    
    $(".next").click(function(){
         if(animating) return false;
         animating = true;
        
        current_fs = $(this).parent().parent();
        next_fs = $(this).parent().parent().next();
        
        //activate next step on progressbar using the index of next_fs
        $(".form-progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
        
        //show the next fieldset
        next_fs.animate({opacity: 1}, {
            step: function(now, mx) {
                //as the opacity of current_fs reduces to 0 - stored in "now"
                //1. scale current_fs down to 80%
                scale = 0 + (1 + now) * .5 ;
                //2. bring next_fs from the right(50%)
                left = (now * 50)+"%";
                //3. increase opacity of next_fs to 1 as it moves in
                opacity = 0 + now;
                next_fs.css({
            'transform': 'scale('+scale+')',
          });
                next_fs.css({'opacity': opacity});
            }, 
            duration: 400, 
            complete: function(){
                next_fs.show();
                animating = false;
            }, 
            //this comes from the custom easing plugin
            easing: 'easeInOutBack'
      }); 
        //hide the current fieldset with style
         current_fs.animate({opacity: 0}, {
            step: function(now, mx) {
                //as the opacity of current_fs reduces to 0 - stored in "now"
                //1. scale current_fs down to 80%
                scale = 1 - (1 - now) * 0.2;
                //2. bring next_fs from the right(50%)
                left = (now * 50)+"%";
                //3. increase opacity of next_fs to 1 as it moves in
                opacity = 1 - now;
                current_fs.css({
            'transform': 'scale('+scale+')',
          });
                next_fs.css({'opacity': opacity});
            }, 
            duration: 400, 
            complete: function(){
                current_fs.hide();
                animating = false;
            }, 
            //this comes from the custom easing plugin
            easing: 'easeInOutBack'
      }); 
    });