hhh-home-mb/js/index.js

let userAgent;
let isSafari = false;
let browserName;
window.onload = function(){
  /* if(screen.width >= 901){
      window.location.href = "https://www2.hhh.com.tw/";   
  } */
  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);
          renderSec03(result);
          renderSec06(result);
          renderSec07(result);
          renderSec08(result);
          renderSec09(result);
          renderSec10(result);
          renderSec11(result);
          renderVideo(result);
      });
}

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 detectDirection () {
  let height = (window.screen.width * 2) / 3;
  
  $('.sec-02 .slide-item').css('height', `${height}px`);
  let topHeight = (window.screen.width * 30) / 131;
  
  $('.sec-00 .slide-item').css('height', `${topHeight}px`);
  $('.sec-00 .container-fluid').css('height', `${topHeight}px`);
}

$(".sec-01__slider").slick({
        dots: true,
        autoplay: false,
        arrows: false,
    });


      function renderSec00(data) {
          let temp = data[0]['data'];
          renderBannerStr('sec-00__slider', temp);
          $(".sec-00__slider").slick({
            dots: false,
            speed: 800,
            autoplay: true,
          });
      }

      function renderSec02(data) {
          let temp = data[1]['data'];
          renderBannerStr('sec-02__slider', temp);
          let str = '';
          $(".sec-02__slider").slick({
              dots: false,
              autoplay: true,
              arrows: true,
              fade: true,
          });
      }

      function renderBannerStr(sec, data) {
        let str = '';
        console.log(isSafari);
        for(let i = 0; i < data.length; i++){
            if(data[i]['webp'] && !isSafari) {
              str+= `<div class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['webp']}');" data-bg="${data[i]['webp']}"></div>`
            } else {
              str+= `<div class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['imgUrl']}');" data-bg="${data[i]['imgUrl']}"></div>`
            }
        }
        $(`.${sec}`).html(str);
    }

      function renderSec03(data) {
        let randomIdx = Math.floor(Math.random()*3);
        let moreLinks = ['https://hhh.com.tw/cases/lists/', 'https://hhh.com.tw/videos/lists/', 'https://hhh.com.tw/columns/lists/'];
        const ran = $('.sec-03__tabdiv .nav-item-link').eq(randomIdx);
        const ranDiv = $('#pills-tabContent .tab-pane').eq(randomIdx);
        ran.addClass('active');
        ranDiv.addClass('active');
        ranDiv.addClass('show');
        $('.sec-03 .morelink').attr('href', $('.sec-03__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" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"></div>
                  <p class="mt-2 pe-2">${sub[j]['title']}</p>
                </div>`
              }
              $('#pills-hot .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" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"><img class="tabpar__card__play lazyload" data-src="images/Play-Button.webp"></div>
                  <p class="mt-2 pe-2">${sub[j]['description']}</p>
                </div>`
              }
              $('#pills-video .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" style="background-image: url('${sub[j]['imgUrl']}');" data-bg="${sub[j]['imgUrl']}"></div>
                  <p class="mt-2 pe-2">${sub[j]['title']}</p>
                </div>`
              }
              $('#pills-blog .tabpar').html(str);
            }
          }
          const cardText = document.querySelectorAll('.tabpar__card p');
          cardText.forEach((item, i) => {
            let len = item.textContent.length;
            if(len > 20) {
              let str = item.textContent.substring(0, 20) + '...';
              item.textContent = str;
            }
          });
         $('.sec-03__tabdiv .nav-item-link').click(function() {
          $('.sec-03 .morelink').attr('href',$('.sec-03__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(i === 0) {
                str+= `<div class="carousel-item active" onclick="window.open('${temp[i]['link']}');"
                  style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}">
                </div>`
              } else {
                str+= `<div class="carousel-item" onclick="window.open('${temp[i]['link']}');"
                  style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}">
                </div>`
              }
          }
          $('.sec-06 .carousel-inner').html(str);
          
      }
      function renderSec07(data) {
          let temp = data[4]['data'];
          let str = '';
          for(let i = 0; i < temp.length; i++){
              str+= `
              <div class="sec-07__slider-${i+1} sec-07__card col-12 mx-1" onclick="window.open('${temp[i]['link']}');">
                <div class="sec-07__imgfr mb-2" style="background-image: url('${temp[i]['imgUrl']}');"></div>
                <p class="sec-07__cardtxt">${temp[i]['description']}</p>
              </div>`
          }
          $('.sec-07__slider').html(str);
          $(".sec-07__slider").slick({
            arrows: false,
            slidesToShow: 3,
            centerMode: true,
            infinite: false,
            dots: false,
            centerPadding: '12px',
            responsive: [
              {
                breakpoint: 480,
                settings: {
                  arrows: false,
                  slidesToShow: 1,
                  centerMode: true,
                  infinite: false,
                  dots: true,
                  centerPadding: '12px',
                }
              }
            ],
        });
        const cardText = document.querySelectorAll('.sec-07__cardtxt');
          cardText.forEach((item, i) => {
            let len = item.textContent.length;
            if(len > 20) {
              let str = item.textContent.substring(0, 25) + '...';
              item.textContent = str;
            }
          })
      }
      function renderSec08(data) {
          let temp = data[5]['data'];
          let str = '';
          for(let i = 0; i < temp.length; i++){
              str+= `<div class="sec-08__slider-${i+1} mx-1 slide-item" style="width: 70vw; background-image: url('${temp[i]['imgUrl']}');" onclick="window.open('${temp[i]['link']}');" data-bg="${temp[i]['imgUrl']}"></div>`
          }
          $('.sec-08__slider').html(str);
          $(".sec-08__slider").slick({
            autoplay: true,
            autoplaySpeed: 8000,
            arrows: false,
            slidesToShow: 3,
            centerMode: true,
            infinite: true,
            dots: false,
            centerPadding: '6px',
            responsive: [
              {
                breakpoint: 480,
                settings: {
                  autoplay: true,
                  autoplaySpeed: 8000,
                  arrows: false,
                  slidesToShow: 1,
                  centerMode: true,
                  infinite: true,
                  dots: false,
                  centerPadding: '12px',
                }
              }
            ],
          });
      }
      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__card" onclick="window.open('${temp[i]['link']}');">
                    <div class="sec-09__card__imgfr" 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>${temp[i]['title']}</p>
                    </div>`
            } else {
              str+= `<div class="sec-09__card" onclick="window.open('${temp[i]['link']}');">
                    <div class="sec-09__card__imgfr" style="background-image: url('${temp[i]['imgUrl']}');" data-bg="${temp[i]['imgUrl']}"></div>
                    <p>${temp[i]['title']}</p>
                    </div>`
            }
          }
          $('.sec-09__cardgrp').html(str);
          $(".sec-09__cardgrp").slick({
            arrows: false,
            slidesToShow: 3,
            slidesToScroll: 1,
            infinite: true,
            dots: false,
            centerPadding: '10px',
            responsive: [
              {
                breakpoint: 480,
                settings: {
                  arrows: false,
                  slidesToShow: 2,
                  slidesToScroll: 1,
                  infinite: true,
                  dots: false,
                  centerPadding: '10px',
                }
              }
            ],
          });
      }
      function renderSec10(data) {
          let temp = data[7]['data'];
          renderRecStr('sec-10', temp);
      }
      function renderSec11(data) {
          let temp = data[8]['data'];
          renderRecStr('sec-11', temp);
      }

      function renderRecStr(sec, data) {
        let str = '';
          for(let i = 0; i < data.length; i++){
            if(data[i].video !== 'false') {
              str+= `<div class="${sec}__card col-12 mx-1" onclick="window.open('${data[i]['link']}');">
                    <div class="${sec}__slider-${i+1} mb-2 slide-item" 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>
                    <p class="${sec}__cardtxt">${data[i]['title']}</p>
                    </div>`;
            } else {
              str+= `<div class="${sec}__card col-12 mx-1" onclick="window.open('${data[i]['link']}');">
                    <div class="${sec}__slider-${i+1} mb-2 slide-item" style="background-image: url('${data[i]['imgUrl']}');" data-bg="${data[i]['imgUrl']}"></div>
                    <p class="${sec}__cardtxt">${data[i]['title']}</p>
                    </div>`;
            }
          }
          $(`.${sec}__slider`).html(str);
          $(`.${sec}__slider`).slick({
            arrows: false,
            slidesToShow: 3,
            centerMode: false,
            infinite: false,
            dots: false,
            centerPadding: '12px',
            responsive: [
              {
                breakpoint: 480,
                settings: {
                  arrows: false,
                  slidesToShow: 1,
                  centerMode: true,
                  infinite: false,
                  dots: false,
                  centerPadding: '12px',
                }
              }
            ],
          });
      }
      function renderVideo(data) {
        let temp = data[9];
        $('.sec-05__video__txt').text(temp['title']);
        $('.sec-05__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');
        });
      }
    
    window.addEventListener('scroll', fixedOnScroll);
    
    const navbar = document.querySelector('.navbar-main');
    
    function fixedOnScroll() {
      if(window.innerHeight < window.innerWidth){
        $('.sec-02 .slide-item').css('height', `130vh`);
        $('.sec-00 .slide-item').css('height', `200px`);
        $('.sec-00 .container-fluid').css('height', `200px`);
      } else {
        detectDirection ();
      }

      const sticky = document.querySelector('.sec-00 .container-fluid').offsetHeight;
        if(window.pageYOffset >= sticky){
            navbar.classList.add('sticky');
        } else {
            navbar.classList.remove('sticky');
        }
    }
    
    $('.navbar-toggler').click(function(){
        $(".sec-menu").css('display', 'block');
        $(".wholeBody").css('overflow-y', 'hidden');
        $('.sec-menu-block').addClass('slidein');
        $('.sec-menu-block').removeClass('slideout');
    });
    
    $('.navbar-back').click(function(){
        $(".sec-menu").css('display', 'none');
        $(".wholeBody").css('overflow-y', 'scroll');
        $('.sec-menu-block').removeClass('slidein');
        $('.sec-menu-block').addClass('slideout');
    });
    
    $('.subexpand').click(function(){
        $(this).parent().next().toggleClass('show');
        $(this).parent().toggleClass('show');
    });
    
    $('.navbar-search').click(function(){
        $(".sec-search").css('display', 'block');
        $(".wholeBody").css('overflow-y', 'hidden');
    })
    
    $('.navbar-backs').click(function(){
        $(".sec-search").css('display', 'none');
        $(".wholeBody").css('overflow-y', 'scroll');
    });

    $('.navbar-back-fav').click(function(){
      $(".sec-favor").css('display', 'none');
    })

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

    $(window).scroll(function() {
		if ( $(this).scrollTop() > 500 ){
		    $('.fixed-btn').fadeIn(222);
		} else {
			$('.fixed-btn').stop().fadeOut(222);
		}
    }).scroll();
    
const searchBtn = document.querySelector('.searchBtn');
const searchBar = document.querySelector('.searchBar');
const searchHotLink = document.querySelectorAll('.sec-search-hots__link');
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/`;
  }
}

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

searchHotLink.forEach((item, i) => {
  item.addEventListener('click', function() {
    window.location.href = `https://m.hhh.com.tw/search/lists/case/${this.textContent}-keyword/`;
  })
})

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

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