hhh-home-mb/js/index1.js

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

let result;
/* $.ajax({
  method: "GET",
  url: "/hhh-home-mb/json/data.json",
  dataType: "json",
}).done(function (msg) {
  alert(msg);
  result = [...msg];
  console.log(result);
  renderSec00(result);
  renderSec02(result);
  renderSec03(result);
  renderSec06(result);
  renderSec07(result);
  renderSec08(result);
  renderSec09(result);
  renderSec10(result);
  renderSec11(result);
}); */
axios.get('http://localhost:8000/genjson').then(({ data }) => {
  //alert(data);
  result = [...data];
  console.log(result);
  renderSec00(result);
  renderSec02(result);
  renderSec03(result);
  renderSec06(result);
  renderSec07(result);
  renderSec08(result);
  renderSec09(result);
  renderSec10(result);
  renderSec11(result);
});

function renderSec00(data) {
  let temp = data[0]['data'];
  //alert(temp.length);
  let str = '';
  for (let i = 0; i < temp.length; i++) {
    console.log(temp[i]['imgUrl']);
    str += `<div class="sec-00__slider-${i + 1}" onclick="window.open('${temp[i]['link']}');" style="background-image: url('${temp[i]['imgUrl']}');"></div>`
  }
  $('.sec-00__slider').html(str);
  $(".sec-00__slider").slick({
    dots: false,
    speed: 800,
    autoplay: true,
  });
}

function renderSec02(data) {
  let temp = data[1]['data'];
  let str = '';
  for (let i = 0; i < temp.length; i++) {
    console.log(temp[i]['imgUrl']);
    str += `<div class="sec-02__slider-${i + 1}" onclick="window.open('${temp[i]['link']}');" style="background-image: url('${temp[i]['imgUrl']}');"></div>`
  }
  $('.sec-02__slider').html(str);
  $(".sec-02__slider").slick({
    dots: false,
    autoplay: true,
    arrows: true,
    fade: true,
    autoplaySpeed: 4000,
  });
}

function renderSec03(data) {
  let randomIdx = Math.floor(Math.random() * 3);
  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');
  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"><img class="tabpar__card__img" src="${sub[j]['imgUrl']}" alt=""></div>
                  <p class="mt-2 pe-2">${sub[j]['description']}</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"><img class="tabpar__card__img" src="${sub[j]['imgUrl']}" alt=""><img class="tabpar__card__play" src="images/Play-Button.png"></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"><img class="tabpar__card__img" src="${sub[j]['imgUrl']}" alt=""></div>
                  <p class="mt-2 pe-2">${sub[j]['description']}</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;
    }
  })
}
function renderSec06(data) {
  let temp = data[3]['data'];
  let str = '';
  for (let i = 0; i < temp.length; i++) {
    console.log(temp[i]['imgUrl']);
    if (i === 0) {
      str += `<div class="carousel-item active" onclick="window.open('${temp[i]['link']}');"
                  style="background-image: url('${temp[i]['imgUrl']}');">
                </div>`
    } else {
      str += `<div class="carousel-item" onclick="window.open('${temp[i]['link']}');"
                  style="background-image: url('${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++) {
    console.log(temp[i]['imgUrl']);
    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"><img src="${temp[i]['imgUrl']}" alt=""></div>
                <p class="sec-07__cardtxt">${temp[i]['description']}</p>
              </div>`
  }
  $('.sec-07__slider').html(str);
  $(".sec-07__slider").slick({
    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" style="width: 70vw; background-image: url('${temp[i]['imgUrl']}');" onclick="window.open('${temp[i]['link']}');"></div>`
  }
  $('.sec-08__slider').html(str);
  $(".sec-08__slider").slick({
    arrows: false,
    slidesToShow: 1,
    centerMode: true,
    infinite: false,
    dots: false,
    centerPadding: '12px'
  });
}
function renderSec09(data) {
  let temp = data[6]['data'];
  let str = '';
  for (let i = 0; i < temp.length; i++) {
    str += `<div class="sec-09__card" onclick="window.open('${temp[i]['link']}');">
                    <div class="sec-09__card__imgfr"><img src="${temp[i]['imgUrl']}" alt=""></div>
                    <p>${temp[i]['description']}</p>
                    </div>`
  }
  $('.sec-09__cardgrp').html(str);
}
function renderSec10(data) {
  let temp = data[7]['data'];
  let str = '';
  for (let i = 0; i < temp.length; i++) {
    str += `<div class="sec-10__card col-12 mx-1" onclick="window.open('${temp[i]['link']}');">
                    <div class="sec-10__slider-${i + 1} mb-2" style="background-image: url('${temp[i]['imgUrl']}');"></div>
                    <p class="sec-10__cardtxt">${temp[i]['description']}</p>
                    </div>`
  }
  $('.sec-10__slider').html(str);
  $(".sec-10__slider").slick({
    arrows: false,
    slidesToShow: 1,
    centerMode: true,
    infinite: false,
    dots: false,
    centerPadding: '12px'
  });
}
function renderSec11(data) {
  let temp = data[8]['data'];
  let str = '';
  for (let i = 0; i < temp.length; i++) {
    str += `<div class="sec-11__card col-12 mx-1" onclick="window.open('${temp[i]['link']}');">
                    <div class="sec-11__slider-${i + 1} mb-2" style="background-image: url('${temp[i]['imgUrl']}');"></div>
                    <p class="sec-11__cardtxt">${temp[i]['description']}</p>
                    </div>`
  }
  $('.sec-11__slider').html(str);
  $(".sec-11__slider").slick({
    arrows: false,
    slidesToShow: 1,
    centerMode: true,
    infinite: false,
    dots: false,
    centerPadding: '12px'
  });
}

window.addEventListener('scroll', fixedOnScroll);

const navbar = document.querySelector('.navbar-main');

function fixedOnScroll() {
  const sticky = 110;
  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');
});

$('.navbar-back').click(function () {
  $(".sec-menu").css('display', 'none');
  $(".wholeBody").css('overflow-y', 'scroll');
});

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

$('#videoModal').on('shown.bs.modal', function () {
  $('#videoModal iframe').attr('src', 'https://www.youtube.com/embed/G7baBXAhC_I?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');
});

$('.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() {
  console.log(searchBar.value);
  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();
  }
}

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

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