hhh_new/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 < 991) {
    window.location.href = `https://m.hhh.com.tw/`;
  }
  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);
  //   renderTopCarousel(result);
  //   // renderBanner(result);
  // });

  $('#navbar').load('../../template/navbar.html');
  $('#footer').load('../../template/footer.html');
  $('#btn-box').load('../../template/button.html');
  $('#topCarousel').load('../../template/top_carousel.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="./img/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);
  });
}

hhh_user_api();

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

// 範圍內取隨機整數(0-8)
function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

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";
  }
  let adNamesMain = [];
  for (let i = 0; i < temp.length; i++) {

    let adNameMain = `${temp[i]["id"]}${temp[i]["alt"]}`;
    adNamesMain.push(adNameMain);

    str += `
      <a href="${temp[i]["link"]}" target="_blank"   data-ga4="${temp[i]["id"]}${temp[i]["alt"]}">
        <section class="info-item">
          <span class="logo-img">
            <img class="img-${temp[i].logo_icon} ${temp[i].logo_icon === "" ? "d-none" : ""}" src="./img/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}`]}" alt="${temp[i]["alt"]}" data_id="${temp[i]["id"]}${temp[i]["alt"]}">
      </a>`;
  }

  $(`.banner-slider`).html(str);

  //ga4-banners
  adNamesMain.forEach((adNameMain) => {
    document.querySelectorAll(`a[data-ga4="${adNameMain}"]`).forEach((element) => {
      element.addEventListener('click', function () {
        dataLayer.push({
          'event': 'Banner_Click',
          'ad_name': adNameMain,
          'ad_location': '首頁大Banner'
        });
      });
    });
  });

  let randomInt = getRandomInt(8);
  let list_Top_Banner;
  let ad_first;

  //首頁大Banner ga4(一開始近來先送)剩下輪播送
  list_Top_Banner = document.querySelectorAll('.banner-slider .slide-item');

  //console.log('list_TOP:',list_Top_Banner[randomInt].getAttribute('data_id'))


  try {
    ad_first = list_Top_Banner[randomInt].getAttribute('data_id');
  } catch (e) {
    ad_first = '加載問題，所以請無視';
    console.log(ad_first);

  }


  dataLayer.push({
    'event': 'Banner_Impression',
    'ad_name': ad_first,
    'ad_location': '首頁大Banner'
  });


  // 輪播設定
  $('.banner-slider').slick({
    dots: true,
    infinite: true,
    speed: 300,
    arrows: true,
    autoplay: true,
    autoplaySpeed: 4000,
    slidesToShow: 1,
    slidesToScroll: 1,
    centerMode: true,
    variableWidth: true,
    initialSlide: randomInt, // 起始順序
    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,
        }
      }
    ]
  });


  // 初始輪播外層新增 className
  try {
    list_Top_Banner[randomInt].parentNode.classList.add("slick-now");

  } catch (e) {

    console.log(e);

  }


  // 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 renderBannerStr(sec, data) {
  let adNamesTop = [];
  let str = "";
  for (let i = 0; i < data.length; i++) {
    let adNameTop = `${data[i]["id"]}${data[i]["alt"]}`;
    adNamesTop.push(adNameTop);

    if (data[i]["Dwebp"]) {
      str += `
      <a href="${data[i]["link"]}" data-ga4="${data[i]["id"]}${data[i]["alt"]}">
        <img class="${sec}-${i + 1} slide-item img-fluid" src="${data[i]["Dwebp"]}" data-bg="${data[i]["Dwebp"]}" alt="${data[i]["alt"]}"  data_id="${data[i]["id"]}${data[i]["alt"]}">
      </a>`;
    } else {
      str += `
      <a href="${data[i]["link"]}" data-ga4="${data[i]["id"]}${data[i]["alt"]}">
        <img class="${sec}-${i + 1} slide-item img-fluid" src="${data[i]["DimgUrl"]}" data-bg="${data[i]["DimgUrl"]}" alt="${data[i]["alt"]}" data_id="${data[i]["id"]}${data[i]["alt"]}">
      </a>`;
    }
  }
  $(`.${sec}`).html(str);
  //ga4-banners
  adNamesTop.forEach((adNameTop) => {
    document.querySelectorAll(`a[data-ga4="${adNameTop}"]`).forEach((element) => {
      element.addEventListener('click', function () {
        dataLayer.push({
          'event': 'Banner_Click',
          'ad_name': adNameTop,
          'ad_location': '新刊頭'
        });
      });
    });
  });
}

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

$(".slider-close-btn").click(function () {
  $(this).css("display", "none");
  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");
      },
    });
  }
});

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

//ga4-頂部廣告banner參數  
let adTop_count = []
let time_top_count = 0
$('.banner-slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) { // 頂部輪播(首頁大Banner)
  let list = document.querySelectorAll('.banner-slider .slide-item');

  //console.log(list[nextSlide+2].getAttribute('data_id'))
  let ad1 = list[nextSlide + 2].getAttribute('data_id');

  //由於剛進來就會送首頁大Banner的ga4,所以之後輪播時就不再送出
  if (time_top_count == 0) {
    let ad2 = list[nextSlide + 1].getAttribute('data_id');
    adTop_count.push(ad2);
    time_top_count = 1
  }
  //送dataLayer(要看得到廣告才送(電腦手機板不一樣))
  if ($('.banner-slider .slide-item').offset().top - $(window).scrollTop() > -330) {
    if (!adTop_count.includes(ad1)) {

      dataLayer.push({
        'event': 'Banner_Impression',
        'ad_name': ad1,
        'ad_location': '首頁大Banner'
      });

      adTop_count.push(ad1);
    }
  }
  // 以下才是輪播
  let calc = ((nextSlide) / (slick.slideCount - 1)) * 100;
  $('.banner-content .progress')
    .css('background-size', calc + '% 100%')
    .attr('aria-valuenow', calc);
});




//ga4-中間廣告banner參數
let ad_count = []
$('.sub-banner-slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) { // 廣告區塊
  //ga4-送參數(電腦手機不一樣)
  let list = document.querySelectorAll('.sub-banner-slider .slide-item');
  let max_v = (list.length - 2) / 2
  let ad1 = list[currentSlide > 0 ? currentSlide - 1 : max_v - 1].getAttribute('data_id')

  let ad2 = list[currentSlide].getAttribute('data_id')
  //console.log(currentSlide-1,currentSlide)
  //console.log(ad1,ad2)
  //廣告位置(電腦手機不一樣)
  if ($('.container-fluid.py-4.sub-banner-content').offset().top - $(window).scrollTop() < 800 && $('.container-fluid.py-4.sub-banner-content').offset().top - $(window).scrollTop() > -154) {
    //送dataLayer
    if (!ad_count.includes(ad1)) {

      dataLayer.push({
        'event': 'Banner_Impression',
        'ad_name': ad1,
        'ad_location': '首頁列表'
      });

      ad_count.push(ad1);
    }
    if (!ad_count.includes(ad2)) {
      dataLayer.push({
        'event': 'Banner_Impression',
        'ad_name': ad2,
        'ad_location': '首頁列表'
      });
      ad_count.push(ad2);
    }
  }
  // 以下才是輪播
  let calc = ((nextSlide) / (slick.slideCount - 1)) * 100;
  $('.sub-banner-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');
  });
}

/* 2024/02/21關閉 */
// 廣告彈跳視窗 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"  style="max-width: 900px;">
        <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.style/hh12fMF7i" target="_blank">
              <img src="./img/20240207year.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: "./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');
  }

  // renderTopCarousel(result);
  renderBanner(result);
  renderData(result); // 廣告上方列表
  renderEventAd(result); // 廣告輪播
  renderTopic(); // 主題企劃
  renderDesigner(result); // 推薦設計師
  renderTabContent(result); // 最夯設計, 影音實錄, 專欄文章

  //ga4_Click
  document.querySelectorAll('a[data-ga4="By_Style"]').forEach(function (element) {
    element.addEventListener('click', function () {
      dataLayer.push({
        'event': 'Inner_Click',
        'section_name': '依照風格瀏覽設計'
      });
    });
  });

  document.querySelectorAll('a[data-ga4="By_Space"]').forEach(function (element) {
    element.addEventListener('click', function () {
      dataLayer.push({
        'event': 'Inner_Click',
        'section_name': '依照空間瀏覽設計'
      });
    });
  });

  document.querySelectorAll('a[data-ga4="By_Specialty"]').forEach(function (element) {
    element.addEventListener('click', function () {
      dataLayer.push({
        'event': 'Inner_Click',
        'section_name': '依照專長尋找專家'
      });
    });
  });
  document.querySelectorAll('a[data-ga4="By_Topic"]').forEach(function (element) {
    element.addEventListener('click', function () {
      dataLayer.push({
        'event': 'Inner_Click',
        'section_name': '主題企劃'
      });
    });
  });
  document.querySelectorAll('a[data-ga4="By_Designer"]').forEach(function (element) {
    element.addEventListener('click', function () {
      dataLayer.push({
        'event': 'Inner_Click',
        'section_name': '本週推薦設計師'
      });
    });
  });
  document.querySelectorAll('a[data-ga4="By_Editor"]').forEach(function (element) {
    element.addEventListener('click', function () {
      dataLayer.push({
        'event': 'Inner_Click',
        'section_name': '編輯精選'
      });
    });
  });
  document.querySelectorAll('a[data-ga4="Best_Design"]').forEach(function (element) {
    element.addEventListener('click', function () {
      dataLayer.push({
        'event': 'Inner_Click',
        'section_name': '最夯設計'
      });
    });
  });
  document.querySelectorAll('a[data-ga4="Latest_Video"]').forEach(function (element) {
    element.addEventListener('click', function () {
      dataLayer.push({
        'event': 'Inner_Click',
        'section_name': '最新影音實錄'
      });
    });
  });




}).fail((error) => {
  console.log('genjson_new error', error);
});

$.ajax({
  method: "get",
  url: "./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 = "";
      let SpaceProducts = [];

      for (let i = 0; i < e.data.length; i++) {
        let item = e.data[i];
        let SpaceProduct = `${item.name}`;
        SpaceProducts.push(SpaceProduct);

        str += `
        <div>
          <section>
            <span class="slide-img">
              <a href="${item.url}" target="_blank"  data-ga4="${item.name}">
                <img class="slide-item img-fluid" src="${item.image}" alt="${item.name}">
                <h3>${item.name}</h3>
              </a>
            </span>
          </section>
        </div>`
      }
      $(".space-slider").html(str);

      //ga4-banners
      SpaceProducts.forEach((SpaceProduct) => {
        document.querySelectorAll(`a[data-ga4="${SpaceProduct}"]`).forEach((element) => {
          element.addEventListener('click', function () {
            dataLayer.push({
              'event': 'ShopBanner_Click',
              'product_name': SpaceProduct

            });
          });
        });
      });


      // 輪播設定
      $('.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" data-ga4="By_Specialty">
                <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" && sec == "slider-02") {
    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" data-ga4="By_Style">
            <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 if (sec !== "slider-01" && sec == "slider-03") {
    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" data-ga4="By_Space">
            <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 = "";
    ShopProducts = [];
    for (let i = 0; i < data.length; i++) {
      let ShopProduct = `${data[i]["title"]}`;
      ShopProducts.push(ShopProduct);
      str += `
      <div>
        <section>
          <span class="slide-img">
            <a href="${data[i]["link"]}" target="_blank" data-ga4="${data[i]["title"]}">
              <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);

    //ga4-banners
    ShopProducts.forEach((ShopProduct) => {
      document.querySelectorAll(`a[data-ga4="${ShopProduct}"]`).forEach((element) => {
        element.addEventListener('click', function () {
          dataLayer.push({
            'event': 'ShopBanner_Click',
            'product_name': ShopProduct

          });
        });
      });
    });
  }

}

// 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" data-ga4="By_Topic">
                  <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" data-ga4="By_Topic">
                <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) {
  let adNames = [];
  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++) {
        let adName = `${list.data[i]["id"]}${list.data[i]["alt"]}`;
        adNames.push(adName);

        str += `
        <div>
          <a href="${list.data[i]["link"]}" target="_blank" data-ga4="${list.data[i]["id"]}${list.data[i]["alt"]}">
            <img class="slide-item img-fluid" src="${list.data[i]["webp"]}" alt="${list.data[i]["alt"]}" data_id="${list.data[i]["id"]}${list.data[i]["alt"]}">
          </a>
        </div>`
      }

      $('.sub-banner-content .sub-banner-slider').html(str);

      //ga4-banners
      adNames.forEach((adName) => {
        document.querySelectorAll(`a[data-ga4="${adName}"]`).forEach((element) => {
          element.addEventListener('click', function () {
            dataLayer.push({
              'event': 'Banner_Click',
              'ad_name': adName,
              'ad_location': '首頁列表'
            });
          });
        });
      });

    }
  });

  // 輪播設定
  $('.sub-banner-content .sub-banner-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 = 4) {
  // 取得隨機整數
  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 < 1; index++) {
    list.push(data.splice(num, num));
    // 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, 6);
      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" data-ga4="By_Designer">
                <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" data-ga4="By_Designer">
              <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);
          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" data-ga4="By_Editor">
                    <img class="slide-item img-fluid" src="${item.imgUrl}" alt="${item.title}">
                  </a>
                </span>
                <a href="${locationUrl + item.link}" target="_blank" class="title" data-ga4="By_Editor">
                  <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);
          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" data-ga4="Best_Design">
                    <img class="slide-item img-fluid" src="${item.imgUrl}" alt="${item.title}">
                  </a>
                  <a href="${locationUrl + item.link}" target="_blank" class="designer-item"  data-ga4="Best_Design">
                    <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" data-ga4="Best_Design">
                    <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);
          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" data-ga4="Latest_Video">
                    <img class="slide-item img-fluid" src="${item.imgUrl}" alt="${item.description}">
                    <span class="play-btn">
                      <img class="slide-item img-fluid" src="./img/icon/material-play-circle-outline.svg" alt="">
                    </span>
                  </a>
                </span>
                <a href="${item.link}" target="_blank" class="title" data-ga4="Latest_Video">
                  <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();
  }
});