let userAgent; let isSafari = false; let browserName; window.onload = function(){ if(screen.width < 900){ window.location.href = "https://m3.hhh.com.tw/"; } userAgent = navigator.userAgent; detectBrowser(userAgent); detectDirection (); let result; let matchData; $.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); }); $.ajax({ method: "GET", url: "./json/match.json", dataType: "json", }).done(function (msg) { matchData = [...msg]; renderMatch(matchData); }); } function renderMatch(matchData){ let str = ''; for(let i = 0; i < matchData.length; i++){ str += `

${matchData[i].Name} 設計師

${matchData[i].CompanyName}

擅長風格 ${matchData[i].CompanyName}

接案坪數 ${matchData[i].Square}

接案地區 ${matchData[i].Area}

${matchData[i].Consulting} 人正在諮詢

` } $('.container__match').html(str); } $(document).on("click", ".btn-match", function (event) { Swal.fire({ icon: 'success', text: '我們已收到您的訊息,將有幸福經紀人與您聯繫', confirmButtonText: '關閉', }) }); 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: '', nextArrow: '' }); } 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: '', nextArrow: '' }); } function renderBannerStr(sec, data) { let str = ''; for(let i = 0; i < data.length; i++){ if(data[i]['Dwebp'] && !isSafari) { str+= `
` } else { str+= `
` } } $(`.${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+= `
${sub[j]['title']}

${sub[j]['description']}

`; } $('#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+= `
${sub[j]['title']}

${sub[j]['description']}

`; } $('#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+= `
${sub[j]['title']}

${sub[j]['description']}

`; } $('#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: '', nextArrow: '' }); $('.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+= `
${temp[i]['title']}

${temp[i]['description']}

`; } else { str+= `
${temp[i]['title']}

${temp[i]['description']}

`; } } $('.sec-06 .sec-06__slider').html(str); $('.sec-06__slider').slick({ arrows: true, dots: false, speed: 800, prevArrow: '', nextArrow: '' }); 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+= `
` } $(`.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+= `
${temp[i]['title']}

${temp[i]['description']}

`; } else { str+= `
${temp[i]['title']}

${temp[i]['description']}

`; } } $('.sec-08__slider').html(str); $(".sec-08__slider").slick({ arrows: true, slidesToShow: 1, infinite: false, dots: false, slidesToShow: 3, centerPadding: '12px', prevArrow: '', nextArrow: '' }); 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+= `

${temp[i]['title']}

` } else { str+= `

${temp[i]['title']}

` } } $('.sec-09__slider').html(str); $(".sec-09__slider").slick({ autoplay: true, autoplaySpeed: 7000, arrows: true, slidesToShow: 4, infinite: true, dots: false, slidesToScroll: 1, prevArrow: '', nextArrow: '' }); } 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+= `
${data[i]['title']}

${data[i]['description']}

` } else { str+= `
${data[i]['title']}

${data[i]['description']}

` } } $(`.${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&enablejsapi=1&origin=https%3A%2F%2Fm.hhh.com.tw&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 += `${temp[i]}` } $('.dropbox__hots').html(`熱搜關鍵字:${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(); 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); }) // 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 += ``; } $('#designer-city').html(`${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 += ``; } } } $('#designer-country').html(`${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' }); }); $('.close').click(function () { window.close(); })