hhh-home-pc/js/index_match.js

let userAgent;
let isSafari = false;
let browserName;
window.onload = function(){
    userAgent = navigator.userAgent;
    detectBrowser(userAgent);
    detectDirection ();
    let result;
    let matchData;
      $.ajax({
          method: "GET",
          url: "./json/realtime.json",
          dataType: "json",
      }).done(function (msg) {
          result = [...msg];
      });
      $.ajax({
        method: "GET",
        url: "./json/match.json",
        dataType: "json",
    }).done(function (msg) {
        matchData = [...msg];
        renderMatch(matchData);
        renderMatchMb(matchData);
    });
}


function renderMatch(matchData){
    let str = '';
    for(let i = 0; i < matchData.length; i++){
        str += `<div class="row align-items-center py-3 justify-content-center text-center container__row">
                    <div class="col">
                        <div style="overflow: hidden;">
                            <div class="sec-match__imgfr mx-auto" style="background-image: url('${matchData[i].WorkImg}');"
                            onclick="window.open('${matchData[i].DesignerLink}');"></div>
                        </div>
                    </div>
                    <div class="col">
                    <div class="sec-match__designer mx-auto" style="background-image: url('${matchData[i].DesignerImg}');">
                    </div>
                    </div>
                    <div class="col">
                    <div style="width: 100%;" class="text-start mx-auto">
                        <p>${matchData[i].Name} 設計師</p>
                        <p class="mb-2">${matchData[i].CompanyName}</p>
                        <p>擅長風格 ${matchData[i].CompanyName}</p>
                        <p>接案坪數 ${matchData[i].Square} </p>
                        <p>接案地區 ${matchData[i].Area}</p>
                    </div>
                    </div>
                    <div class="col sec-match__consult d-none d-md-block">
                        <p>${matchData[i].Consulting} 人正在諮詢</p>
                    </div>
                    <div class="col sec-match__like d-none d-md-block">
                        <button class="btn-match">我有興趣</button>
                    </div>
                    <div class="col sec-match__like d-block d-md-none">
                        <p class="mb-3">${matchData[i].Consulting} 人正在諮詢</p>
                        <button class="btn-match">我有興趣</button>
                    </div>
                </div>`
    }

    $('.container__match').html(str);
    
}

function renderMatchMb(matchData) {
    let str = '';
    for(let i = 0; i < matchData.length; i++){
        str += `<div class="row align-items-center py-4 justify-content-center text-center container__row" style="border-bottom: 1px solid #B2B2B2;">
                    <div class="col-12 mb-4">
                        <div class="sec-result__imgfr mx-auto" style="background-image: url('${matchData[i].WorkImg}');"
                        onclick="window.open('${matchData[i].DesignerLink}');"></div>
                        </div>
                    <div class="row">
                        <div class="col-5">
                            <div class="sec-result__designer mx-auto mb-4" style="background-image: url('${matchData[i].DesignerImg}');">
                            </div>
                        </div>
                        <div class="col-7">
                            <div class="text-start mx-auto">
                                <p>${matchData[i].Name} 設計師</p>
                                <p class="mb-2">${matchData[i].CompanyName}</p>
                                <p>擅長風格 ${matchData[i].Style}</p>
                                <p>接案坪數 ${matchData[i].Square}</p>
                                <p class="mb-2">接案地區 ${matchData[i].Area}</p>
                                <span class="sec-result__consulting"><strong class="sec-result__num">${matchData[i].Consulting}</strong> 人正在諮詢</span>
                            </div>
                    </div>
                    <div class="col-12 mt-4">
                        <button class="btn-match">我有興趣</button>
                    </div>
                </div>
            </div>
                `
    }

    $('.container__mb').html(str);
    
}
  
$(document).on("click", ".btn-match", function (event) {
    if(!$(this).hasClass('clicked')) {
        Swal.fire({
            icon: 'success',
            text: '我們已收到您的訊息，將有幸福經紀人與您聯繫',
            confirmButtonText: '關閉',
        })
    }
    $(this).addClass('clicked');

});


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



window.addEventListener('scroll', fixedOnScroll);
    
const navbar = document.querySelector('.navbar-main');
    
function fixedOnScroll() {
   
}

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

$('.container_match2').hide();
$('.match__next').click(function() {
    $('.container_match').fadeOut(0);
    $('.container_match2').fadeIn(500);
})


$('.close').click(function () {
    window.close();
})