調整搜尋判斷

builder/detail/index.html

@@ -204,6 +204,97 @@
           <div class="tag-list"></div>
         </div>
       </div>
+
+      <div class="col-12">
+        <h5 class="me-5 my-4">推薦建案</h5>
+        <!-- 瀑布流排版 Masonry -->
+        <div class="other-list">
+          <div class="container">
+            <div class="row" data-masonry='{"percentPosition": true }'>
+              <div class="col-6 col-md-3 mb-3">
+                <div class="card">
+                  <img
+                    src="https://github.com/hexschool/2022-web-layout-training/blob/main/week8-202207/art09.jpg?raw=true"
+                    alt="" class="img-fluid card-img-top">
+                  <div class="card-body">
+                    <h5 class="card-title">區塊戀-他的私生活</h5>
+                  </div>
+                </div>
+              </div>
+              <div class="col-6 col-md-3 mb-3">
+                <div class="card">
+                  <img
+                    src="https://github.com/hexschool/2022-web-layout-training/blob/main/week8-202207/art10.jpg?raw=true"
+                    alt="" class="img-fluid card-img-top">
+                  <div class="card-body">
+                    <h5 class="card-title">夏娃的醜聞</h5>
+                  </div>
+                </div>
+              </div>
+              <div class="col-6 col-md-3 mb-3">
+                <div class="card">
+                  <img
+                    src="https://github.com/hexschool/2022-web-layout-training/blob/main/week8-202207/art02.jpg?raw=true"
+                    alt="" class="img-fluid card-img-top">
+                  <div class="card-body">
+                    <h5 class="card-title">藍色啤酒海</h5>
+                  </div>
+                </div>
+              </div>
+              <div class="col-6 col-md-3 mb-3">
+                <div class="card">
+                  <img
+                    src="https://github.com/hexschool/2022-web-layout-training/blob/main/week8-202207/art11.jpg?raw=true"
+                    alt="" class="img-fluid card-img-top">
+                  <div class="card-body">
+                    <h5 class="card-title">沒有人愛我</h5>
+                  </div>
+                </div>
+              </div>
+              <div class="col-6 col-md-3 mb-3">
+                <div class="card">
+                  <img
+                    src="https://github.com/hexschool/2022-web-layout-training/blob/main/week8-202207/art12.jpg?raw=true"
+                    alt="" class="img-fluid card-img-top">
+                  <div class="card-body">
+                    <h5 class="card-title">不哭不哭眼淚是珍珠</h5>
+                  </div>
+                </div>
+              </div>
+              <div class="col-6 col-md-3 mb-3">
+                <div class="card">
+                  <img
+                    src="https://github.com/hexschool/2022-web-layout-training/blob/main/week8-202207/art03.jpg?raw=true"
+                    alt="" class="img-fluid card-img-top">
+                  <div class="card-body">
+                    <h5 class="card-title">十分鐘就到</h5>
+                  </div>
+                </div>
+              </div>
+              <div class="col-6 col-md-3 mb-3">
+                <div class="card">
+                  <img
+                    src="https://github.com/hexschool/2022-web-layout-training/blob/main/week8-202207/art04.jpg?raw=true"
+                    alt="" class="img-fluid card-img-top">
+                  <div class="card-body">
+                    <h5 class="card-title">我這樣有美嗎</h5>
+                  </div>
+                </div>
+              </div>
+              <div class="col-6 col-md-3 mb-3">
+                <div class="card">
+                  <img
+                    src="https://github.com/hexschool/2022-web-layout-training/blob/main/week8-202207/art27.jpg?raw=true"
+                    alt="" class="img-fluid card-img-top">
+                  <div class="card-body">
+                    <h5 class="card-title">我真的受傷了</h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 
@@ -213,6 +304,8 @@
 
   <!-- jQuery -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>
+
   <!-- Slick -->
   <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
   <!-- Bootstrap -->
@@ -222,6 +315,7 @@
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
     integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
     crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
   <!-- Chart -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
   <script src="../../js/lists.js"></script>

builder/detail/js/main.js

@@ -335,4 +335,9 @@ getData();
 $(".article-read-more").on("click", () => {
   $(".article-content").css("height", "100%");
   $(".article-read-more").hide();
+});
+
+// 確保圖片都載入完成，避免造成剛進入頁面時圖片被覆蓋
+$('.other-list .row').imagesLoaded().progress(function () {
+  $('.other-list .row').masonry(); // 渲染整體畫面
 });

builder/lists/js/main.js

@@ -5,49 +5,37 @@ $('#btn-box').load('../../template/button.html');
 $('#topCarousel').load('../../template/top_carousel.html');
 
 // window.onload = function () {
-
-//     if (screen.width < 991) {
-
-//         window.location.href = `https://m.hhh.com.tw/builder/lists/`;
-//     }
+//   if (screen.width < 991) {
+//     window.location.href = `https://m.hhh.com.tw/builder/lists/`;
+//   }
 // }
 
 // window.onload = function () {
-//   //hhh_user_api();
-//     if (screen.width >= 991) {
-
-//     window.location.href =`https://hhh.com.tw/builder/lists/`;
+//   // hhh_user_api();
+//   if (screen.width >= 991) {
+//     window.location.href = `https://hhh.com.tw/builder/lists/`;
 //   }
-
 // }
 
-
-
-
-
-
 let page = 1; // 當前頁數
 let pageSize = 18; // 每頁數量
 let isFirstLoad = true; // 初始載入
 
-
-
 // 列表篩選
 async function dataSearch(type = "") {
   let url;
+  let input = $(".keywords").val();
+
   $('#builderSpinner').show();
   $('#builderList').hide();
 
-  if (isFirstLoad) {
+  if (isFirstLoad && input === "") {
     // 第一次載入使用本地 JSON 文件
     url = './json/builders_lists_data.json';
-    //url = `https://m3.hhh.com.tw:18673/builder_search?page=${page}&page_size=${pageSize}`;
   } else {
     // 後續使用 API (預設排序為 recommend)
     url = `https://m3.hhh.com.tw:18673/builder_search?page=${page}&page_size=${pageSize}`;
 
-    let input = $(".keywords").val();
-
     if (input !== "") {
       let isExist = filterList.some((item) => item.id === "keyword"); // 判斷是否已存在關鍵字
 
@@ -78,7 +66,7 @@ async function dataSearch(type = "") {
         createFilterHtml(newItem);
 
       }
-      $(".keywords").val("")
+      // $(".keywords").val("");
       // url += `&keyword=${input}`;
     }
 

cases/lists/js/main.js

@@ -4,23 +4,17 @@ $('#footer').load('../../template/footer.html');
 $('#btn-box').load('../../template/button.html');
 $('#topCarousel').load('../../template/top_carousel.html');
 
-
-
 // window.onload = function () {
-
-//     if (screen.width < 991) {
-
-//         window.location.href = `https://m.hhh.com.tw/cases/lists/`;
-//     }
+//   if (screen.width < 991) {
+//     window.location.href = `https://m.hhh.com.tw/cases/lists/`;
+//   }
 // }
 
 // window.onload = function () {
-//   //hhh_user_api();
-//     if (screen.width >= 991) {
-
-//     window.location.href =`https://hhh.com.tw/cases/lists/`;
+//   // hhh_user_api();
+//   if (screen.width >= 991) {
+//     window.location.href = `https://hhh.com.tw/cases/lists/`;
 //   }
-
 // }
 
 let assignOrder = ""; // 當前排序
@@ -43,13 +37,14 @@ let isFirstLoad = true; // 初始載入
 // 列表篩選
 async function dataSearch(type = "") {
   let url;
+  let input = $(".keywords").val();
+
   $('#dataSpinner').show();
   $('#dataList').hide();
 
-  if (isFirstLoad) {
+  if (isFirstLoad && input === "") {
     // 第一次載入使用本地 JSON 文件
     url = './json/cases_lists_data.json';
-    //url = `https://m3.hhh.com.tw:18673/case_search?page=${page}&page_size=${pageSize}`;
   } else {
     // 後續使用 API
     url = `https://m3.hhh.com.tw:18673/case_search?page=${page}&page_size=${pageSize}`;
@@ -64,8 +59,6 @@ async function dataSearch(type = "") {
       url += `&order_by=${assignOrder}`;
     }
 
-    let input = $(".keywords").val();
-
     if (input !== "") {
       let isExist = filterList.some((item) => item.id === "keyword"); // 判斷是否已存在關鍵字
 
@@ -96,7 +89,7 @@ async function dataSearch(type = "") {
         createFilterHtml(newItem);
 
       }
-      $(".keywords").val("")
+      // $(".keywords").val("");
       // url += `&keyword=${input}`;
     }
 

columns/lists/js/main.js

@@ -4,34 +4,19 @@ $('#footer').load('../../template/footer.html');
 $('#btn-box').load('../../template/button.html');
 $('#topCarousel').load('../../template/top_carousel.html');
 
-
 // window.onload = function () {
-
-//     if (screen.width < 991) {
-
-//         window.location.href = `https://m.hhh.com.tw/columns/lists/`;
-//     }
+//   if (screen.width < 991) {
+//     window.location.href = `https://m.hhh.com.tw/columns/lists/`;
+//   }
 // }
 
 // window.onload = function () {
-//   //hhh_user_api();
-//     if (screen.width >= 991) {
-
-//     window.location.href =`https://hhh.com.tw/columns/lists/`;
+//   // hhh_user_api();
+//   if (screen.width >= 991) {
+//     window.location.href = `https://hhh.com.tw/columns/lists/`;
 //   }
-
 // }
 
-
-
-
-
-
-
-
-
-
-
 // $("#columnLoading").hide(); // 隱藏讀取動畫
 
 let assignOrder = ""; // 當前排序
@@ -143,15 +128,13 @@ let noData = false; // 無資料
 
 // 列表篩選
 async function dataSearch(type = "") {
-  console.log('type', type);
-
   let url;
+  let input = $(".keywords").val();
 
-  if (isFirstLoad) {
+  if (isFirstLoad && input === "") {
     $('#dataSpinner').show();
     // 第一次載入使用本地 JSON 文件
     url = './json/columns_lists_data.json';
-    //url = `https://m3.hhh.com.tw:18673/column_search?page=${page}&page_size=${pageSize}`;
   } else {
     // 後續使用 API
     url = `https://m3.hhh.com.tw:18673/column_search?page=${page}&page_size=${pageSize}`;
@@ -162,8 +145,6 @@ async function dataSearch(type = "") {
       url += `&order_by=${assignOrder}`;
     }
 
-    let input = $(".keywords").val();
-
     if (input !== "") {
       url += `&keyword=${input}`;
     }
@@ -203,14 +184,9 @@ async function dataSearch(type = "") {
       const threeDaysAgo = new Date();
       threeDaysAgo.setDate(currentDate.getDate() - 3);
 
-
       response.data.columns.forEach((item, index) => {
-        // 將 ColumnDate 轉換成日期物件
-        const columnDate = new Date(item.ColumnDate);
-
-        // 判斷 ColumnDate 是否在三天內
-        const isNew = columnDate >= threeDaysAgo && columnDate <= currentDate;
-
+        const columnDate = new Date(item.ColumnDate); // 將 ColumnDate 轉換成日期物件
+        const isNew = columnDate >= threeDaysAgo && columnDate <= currentDate; // 判斷 ColumnDate 是否在三天內
         const newItemClass = isNew ? '' : 'd-none'; // 非三天內則隱藏 New 標籤
 
         let tagList = item.ColumnTag.split(',');

designers/lists/js/main.js

@@ -4,7 +4,6 @@ $('#footer').load('../../template/footer.html');
 $('#btn-box').load('../../template/button.html');
 $('#topCarousel').load('../../template/top_carousel.html');
 
-
 // window.onload = function () {
 //   if (screen.width < 991) {
 //     window.location.href = `https://m.hhh.com.tw/designers/lists/`;
@@ -36,10 +35,12 @@ let isFirstLoad = true; // 初始載入
 // 列表篩選
 async function dataSearch(type = "") {
   let url;
+  let input = $(".keywords").val();
+
   $('#dataSpinner').show();
   $('#dataList').hide();
 
-  if (isFirstLoad) {
+  if (isFirstLoad && input === "") {
     // 第一次載入使用本地 JSON 文件
     url = './json/designers_lists_data.json';
   } else {
@@ -56,8 +57,6 @@ async function dataSearch(type = "") {
       url += `&order_by=${assignOrder}`;
     }
 
-    let input = $(".keywords").val();
-
     if (input !== "") {
       let isExist = filterList.some((item) => item.id === "keyword"); // 判斷是否已存在關鍵字
 
@@ -88,7 +87,7 @@ async function dataSearch(type = "") {
         createFilterHtml(newItem);
 
       }
-      $(".keywords").val("")
+      // $(".keywords").val("");
       // url += `&keyword=${input}`;
     }
 

js/lists.js

@@ -325,14 +325,10 @@ const urlParams = new URLSearchParams(queryString);
 if (urlParams.has('keyword')) {
   const keywordValue = urlParams.get('keyword');
   console.log('網址 keyword', keywordValue);
-
-  $('#keywordInput').val(keywordValue);
-
-  setTimeout(() => {
-    page = 1;
-    isFirstLoad = false;
-    dataSearch();
-  }, 0)
+  $(".keywords").val(keywordValue);
+  //   page = 1;
+  //   isFirstLoad = false;
+  //   // dataSearch();
 }
 
 // 發送 GA

search/lists/js/main.js

@@ -24,6 +24,7 @@ let assignTab = "caseTab"; // 指定類別 (預設為空間靈感)
 // 列表篩選
 async function dataSearch(type = "") {
   let url;
+  
   $('#dataSpinner').show();
   $('#dataList').hide();
 
@@ -84,7 +85,7 @@ async function dataSearch(type = "") {
       createFilterHtml(newItem);
 
     }
-    $(".keywords").val("")
+    // $(".keywords").val("");
   }
 
   if (filterList.length) {

videos/lists/js/main.js

@@ -5,20 +5,16 @@ $('#btn-box').load('../../template/button.html');
 $('#topCarousel').load('../../template/top_carousel.html');
 
 // window.onload = function () {
-
-//     if (screen.width < 991) {
-
-//         window.location.href = `https://m.hhh.com.tw/videos/lists/`;
-//     }
+//   if (screen.width < 991) {
+//     window.location.href = `https://m.hhh.com.tw/videos/lists/`;
+//   }
 // }
 
 // window.onload = function () {
 //   //hhh_user_api();
-//     if (screen.width >= 991) {
-
-//     window.location.href =`https://hhh.com.tw/videos/lists/`;
+//   if (screen.width >= 991) {
+//     window.location.href = `https://hhh.com.tw/videos/lists/`;
 //   }
-
 // }
 
 let assignOrder = ""; // 當前排序
@@ -39,10 +35,12 @@ let isFirstLoad = true; // 初始載入
 // 列表篩選
 async function dataSearch(type = "") {
   let url;
+  let input = $(".keywords").val();
+
   $('#videoSpinner').show();
   $('#dataList').hide();
 
-  if (isFirstLoad) {
+  if (isFirstLoad && input === "") {
     // 第一次載入使用本地 JSON 文件
     url = './json/videos_lists_data.json';
   } else {
@@ -59,8 +57,6 @@ async function dataSearch(type = "") {
       url += `&order_by=${assignOrder}`;
     }
 
-    let input = $(".keywords").val();
-
     if (input !== "") {
       let isExist = filterList.some((item) => item.id === "keyword"); // 判斷是否已存在關鍵字
 
@@ -91,7 +87,7 @@ async function dataSearch(type = "") {
         createFilterHtml(newItem);
 
       }
-      $(".keywords").val("")
+      // $(".keywords").val("");
       // url += `&keyword=${input}`;
     }