hhh_index_dev/hhh_index/js/index.js

let userAgent;
let isSafari = false;
let browserName;

// pagination variables
let num_per_page = 9;
let n = 0;
let totalPages = {
  intro: 0,
  video: 0,
  columns: 0,
  vr360: 0,
  company: 0,
};

window.onload = function () {
  hhh_user_api();
  // if(screen.width < 900) {
  //    window.location.href = "../index_designerList_mb.html";
  // }
  userAgent = navigator.userAgent;
  detectBrowser(userAgent);
  detectDirection();
  let result;
  $.ajax({
    method: "GET",
    url: "./hhh_index/json/realtime.json",
    dataType: "json",
  }).done(function (msg) {
    result = [...msg];
    console.log('result', result);
    renderSec00(result);
    // renderBanner(result);
  });

  $('#navbar').load('./hhh_index/template/nav-new.html');
  $('#footer').load('./hhh_index/template/footer.html');
  $('#btn-box').load('./hhh_index/template/button.html');
};

function hhh_user_api_login() {
  window.location.href = `https://hhh.com.tw/users`;
}

let user_data = [];

function hhh_user_api() {
  $.ajax({
    method: "post",
    url: "https://hhh.com.tw/adapter/index?http_method=GET&api_url=/base/v1/member/index",
    async: false,
    dataType: "json",
  }).done(function (msg) {
    user_data = msg;
    let app_user = "";
    console.log('hhh_user_msg', msg);
    if (msg.status == "Success") {
      app_user += `
      <div class="dropdown">
        <button class="btn dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false" onclick="hhh_user_api_login()">
          <div class="d-flex align-items-center">
            <img src="${msg.data["user_avatar"]}" alt="" style="height: 32px; width: 32px;border-radius: 100px;">
            <p class="ms-2">${msg.data["name"]}</p>
          </div>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
          <li><a class="dropdown-item" href="https://hhh.com.tw/users">會員專區</a></li>
        </ul>
      </div>`;
    } else {
      app_user += `
      <a class="nav-link" href="javascript:;" onclick="hhh_user_api_login()">
        <section class="d-flex align-items-center">
          <img src="./hhh_index/images/icon/material-people.svg" alt="login" class="me-2" style="padding-top: 2px;" />
          <span class="pt-1">登入</span>
        </section>
      </a>`;
    }
    $("#app_user").html(app_user);
  }).fail(function (err) {
    console.log('err', err);
  });
}

function detectDirection() {
  let height = (window.screen.width * 5) / 12;
  $(".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;
  }
}

function renderSec00(data) {
  let temp = data[0]["data"];
  renderBullet(temp);
  renderBannerStr("sec-00-slider", temp);
  $(".sec-00-slider").slick({
    dots: false,
    infinite: true,
    speed: 500,
    autoplay: true,
    autoplaySpeed: 3000,
    slidesToScroll: 1,
    arrows: false,
    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>',
  });
  $(".sec-00-bullet").removeClass("bullet-active");
  $(".sec-00-bullet")
    .eq($(".slick-active").data("slick-index"))
    .addClass("bullet-active");
  $(".sec-00-slider").on("afterChange", function (event, slick, currentSlide) {
    $(".sec-00-bullet").removeClass("bullet-active");
    $(`.sec-00-bullet.item-${currentSlide}`).addClass("bullet-active");
    // $('.sec-00-bullet').eq(currentSlide).addClass("bullet-active");
  });
}

function renderBanner(data) {
  let temp = data[1]["data"];
  // renderBullet(temp);
  // renderBannerStr("banner-slider", temp);

  let str = "";
  let img = "";

  if (window.innerWidth < 767) {
    // 手機版
    img = "imgUrl";
  } else {
    // 電腦版
    img = "Dwebp";
  }

  for (let i = 0; i < temp.length; i++) {
    str += `
      <a href="${temp[i]["link"]}" target="_blank">
        <section class="info-item">
          <span class="logo-img">
            <img class="img-${temp[i].logo_icon} ${temp[i].logo_icon === "" ? "d-none" : ""}" src="./hhh_index/images/index/banner_logo/${temp[i].logo_icon}.png">
          </span>
          <section class="${temp[i].index_char_1 === "" || temp[i].index_char_2_1 === "" || temp[i].index_char_2_2 === "" ? "d-none" : ""}">
            <h3>${temp[i].index_char_1}</h3>
            <div>
              <h2>${temp[i].index_char_2_1}</h2>
              <h2>
                ${temp[i].index_char_2_2}
                <small>${temp[i].index_char_2_3}</small>
              </h2>
            </div>
         </section>
        </section>
        <img class="banner-slider-${i + 1} slide-item img-fluid" src="${temp[i][`${img}`]}" data-bg="${temp[i][`${img}`]}">
      </a>`;
  }

  $(`.banner-slider`).html(str);
  // 輪播設定
  $('.banner-slider').slick({
    dots: true,
    infinite: true,
    speed: 300,
    arrows: true,
    autoplay: true,
    autoplaySpeed: 4000,
    slidesToShow: 1,
    slidesToScroll: 1,
    centerMode: true,
    variableWidth: true,
    prevArrow:
      '<button type="button" class="slick-prev"><i class="fas fa-chevron-left" style="color: white;transform: translateY(-10px);"></i></button>',
    nextArrow:
      '<button type="button" class="slick-next"><i class="fas fa-chevron-right" style="color: white;transform: translateY(-10px);"></i></button>',
    responsive: [
      {
        breakpoint: 575,
        settings: {
          dots: false,
          arrows: false,
        }
      }
    ]
  });

  // On before slide change
  $('.banner-slider').on('beforeChange', function (event, { slideCount: count }, currentSlide, nextSlide) {
    let selectors = [nextSlide, nextSlide - count, nextSlide + count].map(n => `[data-slick-index="${n}"]`).join(', ');
    $('.slick-now').removeClass('slick-now');
    $(selectors).addClass('slick-now');
  });

  $('[data-slick-index="0"]').addClass('slick-now');
}

function renderBullet(data) {
  let str = "";
  for (let i = 0; i < data.length; i++) {
    str += `<div class="sec-00-bullet item-${i}"></div>`;
  }
  $(".sec-00-bulletList").html(str);
}

function renderBannerStr(sec, data) {
  let str = "";
  for (let i = 0; i < data.length; i++) {
    if (data[i]["Dwebp"]) {
      str += `
      <a href="${data[i]["link"]}">
        <img class="${sec}-${i + 1} slide-item img-fluid" src="${data[i]["Dwebp"]}" data-bg="${data[i]["Dwebp"]}">
      </a>`;
    } else {
      str += `
      <a href="${data[i]["link"]}">
        <img class="${sec}-${i + 1} slide-item img-fluid" src="${data[i]["DimgUrl"]}" data-bg="${data[i]["DimgUrl"]}">
      </a>`;
    }
  }
  $(`.${sec}`).html(str);
}

let sticky = document.querySelector(".sec-00").offsetHeight;
window.addEventListener("scroll", fixedOnScroll);

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

function fixedOnScroll() {
  if (navbar) {
    if (window.pageYOffset >= 344) {
      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();

$("#top-btn").click(function () {
  $("html, body").animate(
    {
      scrollTop: 0,
    },
    500
  );
});

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

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

function addToFavorite(cid) {
  if (user_data.data["uid"] == undefined) {
    Swal.fire({
      title: "請先登入",
      showConfirmButton: false,
    });

    $.ajax({
      url: "https://hhh.com.tw/hhhajax/save_http_referer",
      type: "post",
      datatype: "json",
      data: { http_referer: location.href },
      success: function () {
        location.href = "/login/index";
      },
    });
  }

  $.ajax({
    url: `https://hhh.com.tw/favorite/set?type=column&id=${cid}`,
  }).done(function (data) {
    if (data == 1) {
      $(".like").css("display", "block");
      $(".like-o").css("display", "none");
    } else {
      $(".like").css("display", "none");
      $(".like-o").css("display", "block");
    }
  });
}

function putEmail() {
  const emailPattern =
    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  if ($("#email").val() !== null && emailPattern.test($("#email").val())) {
    $("#error").hide();
    $("#putEmail_hidden").css("display", "block");
    $("#add_email").text($("#email").val());
    $("#email").val("");
  } else {
    $("#error").show();
    $("#error").text("email 格式有誤");
  }
}

$(".fm-close").click(() => {
  $("#putEmail_hidden").css("display", "none");
  $("#add_email").text("");
});

$("#putEmail").click(function (event) {
  $("#putEmail_hidden").show();
  const vm = $("#email").val();
  const emailPattern =
    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

  if (vm.length == 0) {
    $("#error").show();
    $("#error").text("請輸入Email");
    $("#email").addClass("border-revise");
    $("#button-fm").addClass("fm-btn-border");

    $("#email").focus();
    return false;
  } else if (!emailPattern.test(vm)) {
    $("#error").show();
    $("#error").text("email 格式有誤");
    $("#email").addClass("border-revise");
    $("#button-fm").addClass("fm-btn-border");
    $("#email").focus();
    return false;
    // } else if (vm.length >= 5) {
    //     $('#error').show();
    //     $('#error').text('最多一次轉寄 5 封');
    //     $('#email').addClass('border-revise');
    //     $('#button-fm').addClass('fm-btn-border');
    //
    //     $('#email').focus();
    //     return false;
  } else {
    $("#email").removeClass("border-revise");
    $("#button-fm").removeClass("fm-btn-border");
    $("#error").hide();
    $("#add_email").text($("#email").val());
    $("#email").val("");
  }
});

$("#doSend").click(function (event) {
  stop = 0;
  var emailPattern =
    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  let this_url = window.location.href;
  // 如果 uid 為空代表沒登入(由於此寄信功能需要 uid 故需要先登入)
  if (user_data.data["uid"] == undefined) {
    $("#error").text("請先登錄/註冊會員帳號");
    stop = 1;
  } else if ($("#email").val() == "") {
    $("#error").text("收件人不得為空");
    stop = 1;
  } else {
    if (!emailPattern.test($("#email").val())) {
      $("#error").text("請以 email 格式填寫");
      stop = 1;
    }
  }

  if (stop == 0) {
    $("#error").text();
    $.ajax({
      url: "https://hhh.com.tw/adapter/index?http_method=POST&api_url=/base/v1/member/forward",
      type: "post",
      datatype: "json",
      data: {
        data: JSON.stringify({
          uid: user_data.data["uid"],
          sender: user_data.data["email"],
          recipient: $("#email").val(),
          url: this_url,
          subject: $("#title").val(),
          content: $("#content").val(),
        }),
      },
      success: function (result) {
        $("#forward_modal").modal("hide");
        Swal.fire({
          title: "發送成功",
          showConfirmButton: false,
        });
        $("#emailModal").modal("hide");
      },
    });
  }
});

/* 手機版輪播進度條 */

$('.banner-slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) { // 頂部輪播
  let calc = ((nextSlide) / (slick.slideCount - 1)) * 100;
  $('.banner-content .progress')
    .css('background-size', calc + '% 100%')
    .attr('aria-valuenow', calc);
});

$('.ad-slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) { // 廣告區塊
  let calc = ((nextSlide) / (slick.slideCount - 1)) * 100;
  $('.ad-content .progress')
    .css('background-size', calc + '% 100%')
    .attr('aria-valuenow', calc);
});

let optionsSliderList = document.querySelectorAll('.options-slider'); // 廣告上方列表
for (let i = 0; i < optionsSliderList.length; i++) {
  let count;
  let element;
  const progressBar = $(`.progress.item-0${i}`);
  const progressBarLabel = $('.slider-label');

  if (i === 0) {
    count = 2;
    element = $(`.space-slider.slider-0${i}`);
  } else {
    window.innerWidth < 415 ? count = 2 : count = 3;
    element = $(`.options-slider.slider-0${i}`);
  }

  element.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
    let calc = ((nextSlide) / (slick.slideCount - count)) * 100;
    progressBar
      .css('background-size', calc + '% 100%')
      .attr('aria-valuenow', calc);
    progressBarLabel.text(calc + '% completed');
  });
}

let mainSliderList = document.querySelectorAll('.main-content .slider'); // 廣告下方列表
let count;
window.innerWidth < 415 ? count = 1 : count = 2;
for (let i = 0; i < mainSliderList.length; i++) {
  let element = $(`.main-content .slider.item-0${i}`);
  const progressBar = $(`.main-content .progress.item-0${i}`);
  const progressBarLabel = $('.main-content .slider-label');

  element.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
    let calc = ((nextSlide) / (slick.slideCount - count)) * 100;
    progressBar
      .css('background-size', calc + '% 100%')
      .attr('aria-valuenow', calc);
    progressBarLabel.text(calc + '% completed');
  });
}

// 廣告彈跳視窗 Modal
(function createModal() {
  const newDiv = document.createElement("div");
  let str = `
    <div class="modal fade" id="adModal" tabindex="-1" aria-labelledby="adModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body p-0">
            <a href="https://hhh.com.tw/HHH_NEW/columns_detail/7088.php?utm_source=GS&utm_medium=POPUP2&utm_campaign=15thanniversary_A" target="_blank">
              <img src="./hhh_index/images/230215_幸福空間15週年慶_1200x800.jpg" alt="" class="img-fluid">
            </a>
          </div>
        </div>
      </div>
    </div>`;

  newDiv.innerHTML = str;
  document.body.appendChild(newDiv);
})();

/* 判斷閒置 */
let defaultNum = 60; // 60 秒
let maxTime = defaultNum;
let intervalId;

let time = maxTime;

$('body').on('keydown mousemove mousedown', function (e) {
  maxTime = defaultNum; // Seconds        
  time = maxTime; // Reset
});
runSetInterval();

function runSetInterval() {
  intervalId = setInterval(function () {
    time--;
    if (time <= 0) {
      ShowInvalidLoginMessage();
      clearInterval(intervalId);
    }
  }, 1000)
}
$('#adModal').on('hide.bs.modal', function () {
  dialogTimeclose();
  runSetInterval();
  $('body').addClass('scrollable');
});

function dialogTimeclose() {
  time = maxTime;
}

function ShowInvalidLoginMessage() {
  $('#adModal').modal('show');
}

/* genjson_new 新版首頁 */

let result;

$.ajax({
  method: "get",
  url: "./hhh_index/json/data_index.json",
  // url: "https://m3.hhh.com.tw:18689/genjson_new?filename=realtime.json",
  dataType: "json",
}).done((data) => {
  result = [...data];
  // 隱藏 loading
  $('body').removeClass('unscrollable');
  $('.loading-item').addClass('loading-hide');

  let ad = localStorage.getItem('ad');
  if (!ad) {
    localStorage.setItem('ad', true);
    $('#adModal').modal('show');
  } else {
    $('#adModal').modal('hide');
    $('body').addClass('scrollable');
  }

  renderBanner(result);
  renderData(result); // 廣告上方列表
  renderEventAd(result); // 廣告輪播
  renderTopic(); // 主題企劃
  renderDesigner(result); // 推薦設計師
  renderTabContent(result); // 最夯設計, 影音實錄, 專欄文章
}).fail((error) => {
  console.log('genjson_new error', error);
});

$.ajax({
  method: "get",
  url: "./hhh_index/json/index-slider.json",
  async: false,
  dataType: "json",
}).done((data) => {
  renderJsonData(data); // 依照空間尋找商品, 依照專長尋找設計師
}).fail((error) => {
  console.log('error', error);
});

function renderJsonData(data) {
  data.map(e => {
    if (e.tab === "依照空間尋找商品") {
      let str = "";
      for (let i = 0; i < e.data.length; i++) {
        let item = e.data[i];
        str += `
        <div>
          <section>
            <span class="slide-img">
              <a href="${item.url}" target="_blank">
                <img class="slide-item img-fluid" src="${item.image}" alt="${item.name}">
                <h3>${item.name}</h3>
              </a>
            </span>
          </section>
        </div>`
      }
      $(".space-slider").html(str);
      // 輪播設定
      $('.space-slider').slick({
        infinite: false,
        slidesToShow: 4,
        slidesToScroll: 1,
        variableWidth: false,
        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>',
        responsive: [
          {
            breakpoint: 991,
            settings: {
              slidesToShow: 3,
              slidesToScroll: 1
            }
          },
          {
            breakpoint: 767,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 1,
            }
          },
          {
            breakpoint: 575,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 1,
              variableWidth: true,
              arrows: false,
            }
          }
        ]
      });
    } else {
      let str = "";
      for (let i = 0; i < e.data.length; i++) {
        let item = e.data[i];
        str += `
        <div>
          <section>
            <span class="slide-img">
              <a href="${item.url}" target="_blank">
                <img class="slide-item img-fluid" src="${item.image}" alt="${item.name}">
                <h3>${item.name}</h3>
              </a>
            </span>
          </section>
        </div>`
      }
      $(".options-slider.designer").html(str);
    }

    hideSlickArrow();
  })
}

let locationUrl = '';
window.innerWidth > 767 ? locationUrl = "https://hhh.com.tw" : locationUrl = "https://m.hhh.com.tw";

// 首頁廣告上方列表
function renderData(data) {
  data.map((e) => {
    if (e._comment === "加好物商品") {
      renderDom("slider-01", e.data);
    } else if (e._comment === "首頁photo頁") {
      e.data.map((list, index) => {
        renderDom(`slider-0${index + 2}`, list.data);
        // $(`.slider-0${index + 1}-title`).text(list.tab);
      })
    }
  })

  // 輪播設定
  $('.options-slider').slick({
    infinite: false,
    slidesToShow: 6,
    slidesToScroll: 6,
    variableWidth: false,
    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>',
    responsive: [
      {
        breakpoint: 1200,
        settings: {
          slidesToShow: 5,
          slidesToScroll: 5,
        }
      },
      {
        breakpoint: 991,
        settings: {
          slidesToShow: 4,
          slidesToScroll: 4
        }
      },
      {
        breakpoint: 767,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 1,
        }
      },
      {
        breakpoint: 575,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 1,
          variableWidth: true,
          arrows: false,
        }
      },
      {
        breakpoint: 415,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 1,
          variableWidth: true,
          arrows: false,
        }
      }
    ]
  });

  hideSlickArrow();
}

function renderDom(sec, data) {
  if (sec !== "slider-01") {
    data = data.sort((a, b) => a.order - b.order);
    let str = "";
    for (let i = 0; i < data.length; i++) {
      str += `
    <div>
      <section>
        <span class="slide-img">
          <a href="${locationUrl + data[i]["url"]}" target="_blank">
            <img class="${sec}-${i + 1} slide-item img-fluid" src="${locationUrl + data[i]["image"]}" alt="${data[i]["name"]}">
            <h3>${data[i]["name"]}</h3>
          </a>
        </span>
      </section>
    </div>`
    }
    $(`.${sec}`).html(str);
  } else {
    data = data.sort(() => Math.random() - 0.5); // 隨機排序
    data = data.slice(0, 12); // 取前 12 筆
    let str = "";
    for (let i = 0; i < data.length; i++) {
      str += `
      <div>
        <section>
          <span class="slide-img">
            <a href="${data[i]["link"]}" target="_blank">
              <img class="${sec}-${i + 1} slide-item img-fluid" src="${data[i]["imgUrl"]}" alt="${data[i]["title"]}">
              <h3>
                <strong>${data[i]["title"]}</strong>
              </h3>
            </a>
          </span>
        </section>
      </div>`
    }
    $(`.${sec}`).html(str);
  }

}

// let timer;

// $(window).resize(function () {
//   // 延遲縮放
//   window.clearTimeout(timer);
//   timer = window.setTimeout(() => {
//     renderTopic();
//   }, 100);
// })

// 首頁主題企劃
function renderTopic() {
  if (result) {
    result.map(list => {
      if (list._comment === "主題企劃區") {
        let webData = [];
        let mobileData = [];

        list.data.filter(e => {
          if (e.tab === "web") {
            webData = e.data;
          } else {
            mobileData = e.data;
          }
        });

        let arr;
        let str = "";
        // 固定取手機版第一筆
        let linkHref = `https://m.hhh.com.tw${mobileData[0].link}`;

        window.innerWidth > 767 ? arr = webData : arr = mobileData;

        let topicLink = document.querySelector(".topic-content .more-link");
        topicLink.setAttribute("href", linkHref);

        for (let i = 0; i < arr.length; i++) {
          str += `
          <div>
            <section>
              <span class="slide-img">
                <a href="${locationUrl + arr[i]["link"]}" target="_blank">
                  <div class="img-box slide-img"> <img src="${arr[i]["imgUrl"]}" alt="${arr[i]["title"]}" class="img-fluid"></div>
                </a>
              </span>
              <a href="${locationUrl + arr[i]["link"]}" target="_blank">
                <h3 class="mt-2 ellipsis-title">${arr[i]["title"]}</h3>
              </a>
            </section>
          </div>`;
        }

        $('.topic-slider').html(str);
        // 輪播設定
        $('.topic-slider').slick({
          infinite: false,
          slidesToShow: 4,
          slidesToScroll: 4,
          variableWidth: false,
          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>',
          responsive: [
            {
              breakpoint: 991,
              settings: {
                slidesToShow: 2,
                slidesToScroll: 2,
              }
            },
            {
              breakpoint: 767,
              settings: {
                slidesToShow: 2,
                slidesToScroll: 1,
                // variableWidth: true,
                // arrows: false,
              }
            },
            {
              breakpoint: 575,
              settings: {
                slidesToShow: 2,
                slidesToScroll: 1,
                variableWidth: true,
                arrows: false,
              }
            },
            {
              breakpoint: 415,
              settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
                variableWidth: true,
                arrows: false,
              }
            }
          ]
        });
      }
    });
  }
}

// 按鈕 hover
$(function () {
  $('.top-card a, .center-card a')
    .on('mouseenter', function (e) {
      var parentOffset = $(this).offset(),
        relX = e.pageX - parentOffset.left,
        relY = e.pageY - parentOffset.top;
      $(this).find('span').css({ top: relY, left: relX })
    })
    .on('mouseout', function (e) {
      var parentOffset = $(this).offset(),
        relX = e.pageX - parentOffset.left,
        relY = e.pageY - parentOffset.top;
      $(this).find('span').css({ top: relY, left: relX })
    });
});

// 首頁廣告輪播
function renderEventAd(data) {
  data.map(list => {
    if (list._comment === "活動頁banners區") {
      let str = "";
      list.data = list.data.sort(() => Math.random() - 0.5); // 隨機排序
      for (let i = 0; i < list.data.length; i++) {
        str += `
        <div>
          <a href="${list.data[i]["link"]}" target="_blank">
            <img class="slide-item img-fluid" src="${list.data[i]["webp"]}" alt="">
          </a>
        </div>`
      }

      $('.ad-content .ad-slider').html(str);
    }
  });

  // 輪播設定
  $('.ad-content .ad-slider').slick({
    dots: false,
    infinite: true,
    speed: 300,
    arrows: true,
    autoplay: true,
    autoplaySpeed: 4000,
    slidesToShow: 2,
    slidesToScroll: 1,
    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>',
    responsive: [
      {
        breakpoint: 767,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
        }
      },
      {
        breakpoint: 575,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          arrows: false
        }
      }
    ]
  });
}

// 隨機對調前後順序(e.g. 5678 1234)
function randomArr(ary, num) {
  // 取得隨機整數
  let randomVal;
  (Math.random() > 0.5) ? randomVal = 1 : randomVal = 0;

  let data = [...ary]; // 深拷貝
  let list = [];

  // index < 拆分的次數
  // 如陣列長度為 8 跟 12，拆分次數即為 2 跟 3 
  // 例如：[8] => [4,4] or [12] => [4,4,4]
  for (let index = 0; index < num; index++) {
    list.push(data.splice(4, 4));
    // list.push(test.splice(4, 4));
  }

  list = list.sort(() => Math.random() - 0.5); // 隨機排序

  let finalData = [];

  if (randomVal) {
    finalData = data.concat(list);
  } else {
    finalData = list.concat(data);
  }

  return finalData.flat(Infinity) // 展開陣列
}


function renderDesigner(data) {
  data.map(list => {
    if (list._comment === "推薦設計師") {
      let randomData = randomArr(list.data, 2);
      let str = "";

      for (let i = 0; i < randomData.length; i++) {
        const item = randomData[i];

        str += `
        <div>
          <section>
            <span class="slide-img">
              <a href="${locationUrl + item.link}" target="_blank">
                <img class="slide-item img-fluid" src="${item.imgUrl}" alt="${item.name}｜${item.designers_name}">
                <span class="img-border"></span>
              </a>
            </span>
            <a href="${locationUrl + item.link}" target="_blank">
              <h3 class="ellipsis-title">
                ${item.name}
              </h3>
              <h3 class="name">
                ${item.designers_name}
                <small>設計師</small>
              </h3>
            </a>
          </section>
        </div>`;
      }

      $('.designer-slider').html(str);
      // 輪播設定
      $('.designer-slider').slick({
        infinite: false,
        slidesToShow: 6,
        slidesToScroll: 6,
        variableWidth: false,
        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>',
        responsive: [
          {
            breakpoint: 1200,
            settings: {
              slidesToShow: 4,
              slidesToScroll: 4,
            }
          },
          {
            breakpoint: 767,
            settings: {
              slidesToShow: 3,
              slidesToScroll: 3,
            }
          },
          {
            breakpoint: 575,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 1,
              variableWidth: true,
              arrows: false,
            }
          },
        ]
      });

      hideSlickArrow();

      $(".designer-content h3").hover(
        function () {
          $(this).parent().prev().children().children('.img-border').css('opacity', '1');
        }, function () {
          $(this).parent().prev().children().children('.img-border').css('opacity', '0');
        }
      );
    }
  });
}

function renderTabContent(data) {
  data.map(list => {
    if (list._comment === "tab區塊-最夯設計, 影音實錄, 專欄文章") {
      list.data.map(item => {
        if (item.tab === "編輯精選") {
          let randomData = randomArr(item.data, 1);
          let str = "";
          let tagList = [];

          for (let i = 0; i < randomData.length; i++) {
            const item = randomData[i];
            str += `
            <div>
              <section>
                <span class="slide-img">
                  <a href="${locationUrl + item.link}" target="_blank">
                    <img class="slide-item img-fluid" src="${item.imgUrl}" alt="${item.title}">
                  </a>
                </span>
                <a href="${locationUrl + item.link}" target="_blank" class="title">
                  <h3 class="mb-0 ellipsis-title">${item.title}</h3>
                </a>
                <div class="tab-block tag-list-${i}"></div>
              </section>
            </div>`;
            tagList.push(item.ctag);

          }

          $('.featured-slider').html(str);
          // 輪播設定
          $('.featured-slider').slick({
            infinite: false,
            slidesToShow: 4,
            slidesToScroll: 4,
            variableWidth: false,
            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>',
            responsive: [
              {
                breakpoint: 991,
                settings: {
                  slidesToShow: 2,
                  slidesToScroll: 2,
                }
              },
              {
                breakpoint: 767,
                settings: {
                  slidesToShow: 2,
                  slidesToScroll: 2,
                  // variableWidth: true,
                  // arrows: false,
                }
              },
              {
                breakpoint: 575,
                settings: {
                  slidesToShow: 2,
                  slidesToScroll: 2,
                  variableWidth: true,
                  arrows: false,
                }
              },
              {
                breakpoint: 415,
                settings: {
                  slidesToShow: 1,
                  slidesToScroll: 1,
                  variableWidth: true,
                  arrows: false,
                }
              }
            ]
          });

          hideSlickArrow();  // 判斷輪播按鈕顯示
          randomTag(randomData, tagList, "featured-content"); // 渲染標籤

        } else if (item.tab === "最夯設計") {
          let randomData = randomArr(item.data, 1);
          let str = "";
          let tagList = [];

          for (let i = 0; i < randomData.length; i++) {
            const item = randomData[i];
            str += `
            <div>
              <section>
                <span class="slide-img">
                  <a href="${locationUrl + item.link}" target="_blank">
                    <img class="slide-item img-fluid" src="${item.imgUrl}" alt="${item.title}">
                  </a>
                  <a href="${locationUrl + item.link}" target="_blank" class="designer-item">
                    <img class="slide-item img-fluid" src="${item.img_designer}" alt="${item.title_designer}">
                    <h2>${item.title_designer}</h2>
                  </a>
                  <a href="${locationUrl + item.link}" target="_blank" class="title">
                    <h3 class="mb-0 ellipsis-title">${item.title}</h3>
                  </a>
                </span>
                <div class="tab-block tag-list-${i}"></div>
              </section>
            </div>`;
            tagList.push(item.ctag);
          }

          $('.popular-slider').html(str);
          // 輪播設定
          $('.popular-slider').slick({
            infinite: false,
            slidesToShow: 4,
            slidesToScroll: 4,
            variableWidth: false,
            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>',
            responsive: [
              {
                breakpoint: 991,
                settings: {
                  slidesToShow: 2,
                  slidesToScroll: 2,
                }
              },
              {
                breakpoint: 767,
                settings: {
                  slidesToShow: 2,
                  slidesToScroll: 2,
                  // variableWidth: true,
                  // arrows: false,
                }
              },
              {
                breakpoint: 575,
                settings: {
                  slidesToShow: 2,
                  slidesToScroll: 2,
                  variableWidth: true,
                  arrows: false,
                }
              },
              {
                breakpoint: 415,
                settings: {
                  slidesToShow: 1,
                  slidesToScroll: 1,
                  variableWidth: true,
                  arrows: false,
                }
              },
            ]
          });

          hideSlickArrow();  // 判斷輪播按鈕顯示
          randomTag(randomData, tagList, "popular-content"); // 渲染標籤

        } else if (item.tab === "最新影音實錄") {
          let randomData = randomArr(item.data, 1);
          let str = "";

          for (let i = 0; i < randomData.length; i++) {
            const item = randomData[i];
            // <a href="javascript:;" onclick="videoSet('${item.link}','${item.description}')" data-bs-toggle="modal" data-src="${item.link}" data-bs-target="#youtubeModal">
            //   <img class="slide-item img-fluid" src="${item.imgUrl}" alt="">
            // </a>
            str += `
            <div>
              <section>
                <span class="slide-img">
                  <a href="${item.link}" target="_blank">
                    <img class="slide-item img-fluid" src="${item.imgUrl}" alt="${item.description}">
                    <span class="play-btn">
                      <img class="slide-item img-fluid" src="./hhh_index/images/icon/material-play-circle-outline.svg" alt="">
                    </span>
                  </a>
                </span>
                <a href="${item.link}" target="_blank" class="title">
                  <h3 class="mb-0 mt-3 ellipsis-title">${item.description}</h3>
                </a>
              </section>
            </div>`;
          }

          $('.video-slider').html(str);
          // 輪播設定
          $('.video-slider').slick({
            infinite: false,
            slidesToShow: 4,
            slidesToScroll: 4,
            variableWidth: false,
            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>',
            responsive: [
              {
                breakpoint: 991,
                settings: {
                  slidesToShow: 2,
                  slidesToScroll: 2,
                }
              },
              {
                breakpoint: 767,
                settings: {
                  slidesToShow: 2,
                  slidesToScroll: 2,
                }
              },
              {
                breakpoint: 575,
                settings: {
                  slidesToShow: 2,
                  slidesToScroll: 1,
                  variableWidth: true,
                  arrows: false,
                }
              },
              {
                breakpoint: 415,
                settings: {
                  slidesToShow: 1,
                  slidesToScroll: 1,
                  variableWidth: true,
                  arrows: false,
                }
              }
            ]
          });

          hideSlickArrow();  // 判斷輪播按鈕顯示
        }
      })
    }
  })

  // hover 事件
  $(".main-content h3").hover(
    function () {
      $(this).parent().parent().addClass('img-scale');
    }, function () {
      $(this).parent().parent().removeClass('img-scale');
    }
  );

  $(".main-content .slide-img").hover(
    function () {
      $(this).parent().parent().find('h3').css('color', '#ee751b');
    }, function () {
      ;
      $(this).parent().parent().find('h3').css('color', '#727272');
    }
  );
}

// 參數需帶入(隨機排序清單, 標籤陣列, 外層className)
function randomTag(randomData, tagList, content) {
  let tagLink;
  if (content === "featured-content") {
    // 編輯精選
    tagLink = "column";
  } else {
    // 最夯設計
    tagLink = "case";
  }

  for (let index = 0; index < tagList.length; index++) {
    const element = tagList[index];
    randomData.map((e, i) => {
      if (i === index) {
        let list = [];
        for (let i = 0; i < element.length; i++) {
          const item = element[i];
          if (item !== "") {
            let tag = `
            <a href=https://hhh.com.tw/search/lists/${tagLink}/${item}-keyword/" target="_blank">
              <h4>${item}</h4>
            </a>
          `;
            list.push(tag);
          }

        }
        $(`.${content} .tag-list-${index}`).html(list);
      }
    })
  }
}

function hideSlickArrow() {
  /* 隱藏輪播 disabled 按鈕，後續改為點擊判斷 */
  $('.slick-arrow.slick-disabled').css('display', 'none');
  $('.slick-arrow').click(function () {
    $('.slick-arrow').css('display', 'block');
    $('.slick-arrow.slick-disabled').css('display', 'none');
  });
}

// 影音實錄 Modal
function videoSet(src, title) {
  let url = new URL(src);
  let id = url.searchParams.get('v');
  $("#video").attr('src', `https://www.youtube-nocookie.com/embed/${id}`);
  $("#youtubeModal h2").text(`${title}`);
}

// Back to top
$(window).scroll(function () {
  if ($(this).scrollTop()) {
    $('.btn-box').fadeIn();
  } else {
    $('.btn-box').fadeOut();
  }
});