hhh_new/videos/lists/js/main.js

// 載入共用 template
$('#navbar').load('../../template/navbar.html');
$('#footer').load('../../template/footer.html');
$('#btn-box').load('../../template/button.html');
$('#topCarousel').load('../../template/top_carousel.html');

$('#removeResultBtn').hide(); // 隱藏全部清除按鈕

// 處理 radio 選取狀態
$('.filter-list .form-check').click(function (e) {
  e.preventDefault();
  $(this).find('.form-check-input').prop('checked', true);

  // 取得 radio 按鈕的 label
  let radioLabel = $(this).find('.form-check-label').text().trim().replace(/\s+/g, ' '); // 移除換行空白

  // 取上一層 search-tab 按鈕文字
  let buttonValue = $(this).closest('.dropdown').find('.search-tab').text().trim();
  let buttonId = $(this).closest('.dropdown').find('.search-tab').attr('id');

  updateSelectedOptions(buttonId, buttonValue, radioLabel);
});

let filterList = []; // 篩選條件

// 更新篩選狀態
function updateSelectedOptions(id, button, radio) {
  page = 1;
  console.log('更新篩選狀態', button, radio);

  if (filterList.length) {
    let exists = false; // 判斷是否已存在

    for (let index = 0; index < filterList.length; index++) {
      const element = filterList[index];

      // 如有重複 button 只改 radio 狀態
      if (element.text === button) {
        element.value = radio;
        exists = true;
        // 更新篩選的值
        $(`.search-tab-result .budget:contains(${button})`).find('p').text(`${button}：${radio}`);
      }
    }

    // 如果 filterList 中不存在則新增
    if (!exists) {
      const newItem = {
        id: id,
        text: button,
        value: radio
      };

      filterList.push(newItem);
      createFilterHtml(newItem);
    }


  } else {
    // 儲存篩選條件
    filterList.push({
      id: id,
      text: button,
      value: radio
    })

    for (let index = 0; index < filterList.length; index++) {
      const element = filterList[index];
      createFilterHtml(element);
    }
  }

  videoSearch(); // 搜尋

  console.log('filterList', filterList);

  // 切換按鈕選取狀態
  $('.dropdown').each(function () {
    let hasCheckedRadio = $(this).find('input[type="radio"]:checked').length > 0;
    $(this).find('.search-tab').toggleClass('active', hasCheckedRadio);
  });
}

// 新增篩選條件 HTML
function createFilterHtml(item) {
  let dom = `
    <span class="me-3">
      <span class="d-flex budget">
        <p class="me-1">${item.text}：${item.value}</p>
        <img onclick="removeBtn(this, '${item.id}', '${item.text}')" src="https://hhh.com.tw/assets/images/section/icon/close-btn-search.svg" alt="close-btn-search">
      </span>
    </span>`;

  $('.search-tab-result').append(dom);
  $('#removeResultBtn').show();
}

// 清除單一篩選條件
function removeBtn(element, id, val) {
  filterList = filterList.filter(item => item.text !== val);

  ; // 移除 div & active
  $(element).closest('.me-3').remove();
  $(`#${id}`).removeClass('active');
  // 移除同一層級 ul 內所有 radio 的選取狀態
  $(`#${id}`).siblings('.dropdown-menu').find('input[type="radio"]').prop('checked', false);

  if (filterList.length === 0) {
    $('#removeResultBtn').hide();
  }

  videoSearch();
}

let assignOrder = ""; // 當前排序

// new, hot, recommend 排序 (預設推薦)
$(".search-btn-filter button").click(function () {
  // 切換選取狀態
  $('.search-btn-filter').find('.active').removeClass('active');
  $(this).addClass('active');
  assignOrder = $(this).attr('id');
  videoSearch("order_by");
});

let page = 1; // 當前頁數
let pageSize = 18; // 每頁數量
let isFirstLoad = true; // 初始載入

// 列表篩選
async function videoSearch(type = "") {
  let url;
  $('#videoSpinner').show();
  $('#videoList').hide();

  if (isFirstLoad) {
    // 第一次載入使用本地 JSON 文件
    // url = './json/designers_lists_data.json';
    url = `https://m3.hhh.com.tw:18673/video_search?page=${page}&page_size=${pageSize}&order_by=new`;
  } else {
    // 後續使用 API (預設排序為 recommend)
    url = `https://m3.hhh.com.tw:18673/video_search?page=${page}&page_size=${pageSize}`;

    if (type === "order_by") {
      url += `&${type}=${assignOrder}`;
    }

    if (assignOrder === "") {
      url += "&order_by=new";
    }

    let input = $(".keywords").val();

    if (input !== "") {
      let isExist = filterList.some((item) => item.id === "keyword"); // 判斷是否已存在關鍵字

      const newItem = {
        id: "keyword",
        text: "關鍵字",
        value: input
      };

      if (!isExist) {
        filterList.push(newItem);
        createFilterHtml(newItem);
      } else {
        // 移除原本關鍵字
        $('.budget p.me-1').each(function () {
          if ($(this).text().includes('關鍵字')) {
            $(this).closest('.me-3').remove();
          }
        });

        if (filterList.length === 0) {
          $('#removeResultBtn').hide();
        }

        filterList = filterList.filter(item => item.text !== "關鍵字");

        filterList.push(newItem);
        createFilterHtml(newItem);

      }
      $(".keywords").val("")
      // url += `&keyword=${input}`;
    }

    if (filterList.length) {
      filterList.map(item => {
        url += `&${item.id}=${item.value}`;
      });
    }
  }

  try {
    const response = await axios.get(url);
    console.log('response.data.videos', response.data.videos);

    let totalCount = response.data.total_count;
    let totalPages = Math.ceil(totalCount / pageSize);

    $("#totalCount").html(totalCount);

    if (totalPages) {
      $('.filter-list .pagination').show();
      setPagination(totalPages); // 分頁處理
    } else {
      $('.filter-list .pagination').hide();
    }

    let resultHtml = '';

    if (response.data.videos.length) {
      response.data.videos.forEach((item) => {
        let tagsHtml = '';

        item.VideoTag.forEach((tag) => {
          tagsHtml += `<span>${tag}</span>`;
        });

        console.log('tagsHtml', tagsHtml);

        resultHtml += `
          <div class="col-md-4 mb-4">
            <a href="${item.DesignerLink}">
              <div class="card lists-card">
                <img src="${item.VideoCoverImg}" class="video-cover-img" alt="${item.DesignerName} ${item.DesignerTitle}">
                  <div class="card-body d-flex flex-column align-items-center">
                    <section class="d-flex align-items-center w-100">
                      <div class="person-img me-3 me-md-2 me-lg-3" style="background-image: url('${item.DesignerCoverImg}');"></div>
                      <h5 class="text-muted mb-2">${item.DesignerTitle}</h5>
                    </section>
                    <h3 class="my-3 video-title">${item.VideoTitle}</h3>
                    <div class="tags-container mt-2 me-auto">${tagsHtml}</div>
                  </div>
              </div>
            </a>
          </div>`;
      });
    } else {
      resultHtml += "<p class='text-center mt-5'>找不到符合的資料，請重新搜尋。</p>"
    }

    $('#videoList').html(resultHtml);

    setTimeout(() => {
      $('#videoList').show();
      $('#videoSpinner').hide();
    }, 100)

    // 更新初始載入狀態
    if (isFirstLoad) {
      isFirstLoad = false;
    }
  } catch (error) {
    console.log("error", error);
  }
}

videoSearch();

$('.keywords').on('keydown', function (event) {
  if (event.key === 'Enter') {
    videoSearch();
  }
});

let maxPagesMobile = 5; // 手機板最多顯示 5 頁
let maxPagesDesktop = 10; // 電腦版最多顯示 10 頁

// 分頁
function setPagination(pages) {
  let screenWidth = $(window).width();
  let maxPages = screenWidth > 991 ? maxPagesDesktop : maxPagesMobile;

  function renderPagination(currentPage) {
    let dom = `
      <li class="page-item" onclick="handlePagination(this, 'previous')">
        <a class="page-link previous hidden" href="#" aria-label="Previous">
          <span aria-hidden="true">＜</span>
        </a>
      </li>`;

    let startPage = Math.max(currentPage - Math.floor(maxPages / 2), 1);
    let endPage = Math.min(startPage + maxPages - 1, pages);

    if (endPage - startPage < maxPages) {
      startPage = Math.max(endPage - maxPages + 1, 1);
    }

    for (let index = startPage; index <= endPage; index++) {
      dom += `
        <li class="page-item ${index === currentPage ? 'active' : ''}" onclick="handlePagination(this)">
          <a class="page-link" href="#">${index}</a>
        </li>`;
    }

    dom += `
      <li class="page-item" onclick="handlePagination(this, 'next')">
        <a class="page-link next" href="#" aria-label="Next">
          <span aria-hidden="true">＞</span>
        </a>
      </li>`;

    $('.filter-list .pagination').html(dom);
    updateVisibility(currentPage, pages);
  }

  // 更新上頁 & 下頁的按鈕顯示狀態
  function updateVisibility(page, pages) {
    if (page === 1) {
      $('.page-link.previous').addClass('hidden');
    } else {
      $('.page-link.previous').removeClass('hidden');
    }

    if (page === pages) {
      $('.page-link.next').addClass('hidden');
    } else {
      $('.page-link.next').removeClass('hidden');
    }
  }

  window.handlePagination = function (item, type = "") {
    if (type === "previous" && page > 1) {
      page--;
    } else if (type === "next" && page < pages) {
      page++;
    } else if (!type) {
      page = parseInt($(item).find('.page-link').text());
    }
    renderPagination(page);
    videoSearch();
  }

  renderPagination(page);

  $(window).on('resize', function () {
    let newScreenWidth = $(window).width();
    if ((newScreenWidth > 991 && maxPages !== maxPagesDesktop) ||
      (newScreenWidth <= 991 && maxPages !== maxPagesMobile)) {
      maxPages = newScreenWidth > 991 ? maxPagesDesktop : maxPagesMobile;
      renderPagination(page);
    }
  });
}

// 頁碼處理
function handlePagination(item, type = "") {
  if (type === "previous") {
    // 往前一頁
    if (page > 1) {
      page--;
    }
    console.log(page);
  } else if (type === "next") {
    // 往後一頁
    page++;
    console.log(page);
  } else {
    // 直接點擊頁碼
    page = parseInt($(item).find('.page-link')[0].innerText);
  }

  // 切換選取狀態
  $('.filter-list .page-item').removeClass('active');
  $('.filter-list .page-item').eq(page).addClass('active');

  // 設定上一頁按鈕的顯示狀態
  if (page === 1) {
    $('.page-link.previous').addClass('hidden');
  } else {
    $('.page-link.previous').removeClass('hidden');
  }

  videoSearch(); // 搜尋
}

// 熱搜關鍵字搜尋
$(".search-bar-keyword a").click(function () {
  let keyword = $(this).text();
  $('.keywords').val(keyword);
  videoSearch();
});

// 全部清除
$("#removeResultBtn").click(function () {
  console.log('全部清除');
  filterList.length = 0; // 清空篩選陣列
  $('.keywords').val(''); // 清空搜尋欄位
  $('#removeResultBtn').hide(); // 隱藏全部清除按鈕
  $('.search-tab-result').empty(); // 清空篩選條件 dom
  // 取消選取狀態
  $('.filter-list input[type="radio"]').prop('checked', false);
  $('.search-tab').removeClass('active');
  videoSearch();
});