add tab view

cases.html

@@ -1554,6 +1554,7 @@
         crossorigin="anonymous"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/waterfall.js/1.0.2/waterfall.min.js"></script>
     <script async defer src="js/index.js"></script>
     <script async defer src="./goto.js"></script>
     <!-- <script src="/assets/js/swiper.min.js"></script> -->

css/list-style-mb.css

@@ -725,6 +725,10 @@ a {
   margin: 0 0 2rem;
 }
 
+.infoContent .company__block:nth-of-type(2) {
+  margin-top: 2rem;
+}
+
 .infoContent .company__title {
   color: #AAAAAA;
   font-size: 1.12rem;

css/list-style-mb.scss

@@ -607,6 +607,9 @@ a {
   .company {
       &__block {
           margin: 0 0 2rem;
+          &:nth-of-type(2) {
+              margin-top: 2rem;
+          }
       }
       &__title {
           color: #AAAAAA;

css/list-style.css

@@ -787,7 +787,7 @@ a {
 
 @media screen and (max-width: 1200px) {
   .infoContent .nav-item-link {
-    padding: 0.5rem 1.8rem;
+    padding: 0.5rem .8rem;
   }
 }
 
@@ -807,6 +807,9 @@ a {
 @media screen and (max-width: 1200px) {
   .infoContent .likeSee {
     width: 12%;
+    position: absolute;
+    right: -1.5rem;
+    bottom: -1.5rem;
   }
 }
 

css/list-style.scss

@@ -657,8 +657,8 @@ a {
             color: #727679;
             transition: all .3s;
             @media screen and (max-width: 1200px) {
-                padding: 0.5rem 1.8rem;
-              }
+                padding: 0.5rem .8rem;
+            }
             &:hover {
                 color: #EE7800;
             }
@@ -672,6 +672,9 @@ a {
         margin-top: .8rem;
         @media screen and (max-width: 1200px) {
             width: 12%;
+            position: absolute;
+            right: -1.5rem;
+            bottom: -1.5rem;
         }
         span {
             color: #727679;

goto.js

@@ -654,7 +654,7 @@ function get_views_data() {
 
             for (var k = 0; k < msg[0].DesignerProfile.length; k++) {
                 CaseNews +=
-                    '<div class="col-6 col-md-4 ps-0"\
+                    '<div class="col-6 col-md-4 ps-0" >\
                         <div class="vue-waterfall-slot">\
                          <div class="card CaseNews-Card">\
                              <a href="'+ msg[0].DesignerProfile[k].ProfileLink + '">\
@@ -676,7 +676,7 @@ function get_views_data() {
             };
 
             $('.CaseNews-Card').html(CaseNews);
-
+            
         });
 
 };
@@ -699,4 +699,5 @@ function get_views_data() {
 //         // }
 
 //     });
-// });
+// });
+

index_designerList.html

@@ -1090,7 +1090,7 @@
             </div>
             <div class="col-12 col-lg-8 col-xl-9">
               <div class="infoContent">
-                <div class="d-flex justify-content-between">
+                <div class="d-flex justify-content-between position-relative">
                   <ul class="nav d-flex nav-pills flex-wrap" id="pills-tab" role="tablist">
                     <!-- <li class="nav-item active p-0" role="presentation">
                       <a class="nav-item-link nav-item-active bg-transparent active" id="pills-intro-tab"

js/index-designer.js

@@ -33,20 +33,6 @@ function getQuery() {
 
 getQuery();
 
-// group data
-function group(data) {
-    var result = [];
-    var groupItem;
-    for (var i = 0; i < data.length; i++ ) {
-        if (i % 18 == 0) {
-            groupItem != null && result.push(groupItem);
-            groupItem = [];
-        }
-        groupItem.push(data[i]);
-    }
-    result.push(groupItem);
-    return result;
-}
 
 // pagination variables
 let num_per_page = 9;
@@ -96,11 +82,6 @@ window.onload = function(){
             })
         }
 
-        for(let i = 0; i < designer['Content'].length; i++){
-            let testArr = group(designer['Content'][i]['Carddata']);
-            console.log(testArr);
-            
-        }
         console.log(designer['Content'][0]['Carddata']);
         renderinfoCard(designer);
         renderTab(designer['Content']);
@@ -110,9 +91,12 @@ window.onload = function(){
             loadMore(designer);
         })
     });
+
 }
   
 
+
+
 function detectDirection () {
     let height = (window.screen.width * 5) / 12;
     console.log(height);

js/index-list-mb.js

@@ -2,8 +2,11 @@ let userAgent;
 let isSafari = false;
 let browserName;
 
-let num_per_page = 9;
+// pagination variables
+let num_per_page = 10;
 let n = 0;
+let n_video = 0;
+let n_columns = 0;
 let totalPages = {
     intro: 0,
     video: 0,
@@ -67,15 +70,24 @@ window.onload = function(){
     getQuery();
     designer = [...msg][id];
     console.log(designer['Content']);
-    designer['Content'][0]['Carddata'].sort(function (a, b){
-      return a[filter] > b[filter]? -1:1;
-    })
+    if(filter == 'views'){
+      designer['Content'][0]['Carddata'].sort(function (a, b){
+          return a[filter] > b[filter]? -1:1;
+      })
+    } else {
+        designer['Content'][0]['Carddata'].sort(function (a, b){
+            return a[filter] > b[filter]? 1:-1;
+        })
+    }
     renderinfoCard(designer);
     renderTab(designer['Content']);
-    renderTabContent(designer['Content']);
+    renderTabContent(designer['Content'], designer);
     renderModalTitle(designer['CompanyName']);
     console.log(filter);
     console.log(designer['Content'][0]['Carddata']);
+    $(window).scroll(function() {
+      loadMore(designer);
+    })
   });
 }
 let over = document.querySelector('.infoContent__navBlock').offsetTop;
@@ -217,7 +229,7 @@ function renderTab(content) {
 }
 
 
-function renderTabContent(content) {
+function renderTabContent(content, meta) {
   let tabStr = '';
   for(let i = 0;i < content.length; i ++) {
       let cardData = ''
@@ -242,7 +254,8 @@ function renderTabContent(content) {
                   </div>`
       
       } else {
-          for(let j = 0;j < content[i].Carddata.length; j ++) {
+        for(let j = 0;j < (content[i].Carddata.length < num_per_page? content[i].Carddata.length: num_per_page); j ++) {
+          // for(let j = 0;j < content[i].Carddata.length; j ++) {
               cardData += `<div class="col-6 col-md-4">
                               <a href="" target="_blank">
                               <div class="card">
@@ -284,6 +297,16 @@ function renderTabContent(content) {
   $('#pills-video .card__bgImg').append('<img src="https://hhh.com.tw/assets/images/rv_web/play.svg" alt="" width="50" height="50">')
   $('.infoContent .nav-item-link').click(checkTab);
   checkTab();
+  $(`<div id="fb-container" style="width: 320px;" class="mx-auto">
+      <div class="fb-page" data-href="${meta['FB_link']}" data-tabs="timeline" data-width="320" data-height="700" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
+          <blockquote cite="${meta['FB_link']}" class="fb-xfbml-parse-ignore">
+              <a href="${meta['FB_link']}">${meta['CompanyName']}</a>
+          </blockquote>
+      </div>
+    </div>
+    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v9.0" nonce="7TsDzQN7"></script>
+  `).insertAfter($('.company__article > .company__block:nth-of-type(1)'));
+
 }
 
     window.addEventListener('scroll', fixedOnScroll);
@@ -407,6 +430,124 @@ function renderModalTitle(title) {
   $('#emailModal #title').val(title);
 }
 
+function loadMore(designer) {
+  let nowTab = document.querySelector('.infoContent .tab-pane.show');
+  if(nowTab === document.querySelector('#pills-intro')) {
+      let last = document.querySelector('#pills-intro .work__row>div:last-child');
+      let pageNum = Math.ceil(totalPages.intro / 10) - 1;
+      if ($(window).scrollTop() + $(window).height() >= ($(document).height() - 100)) {
+          console.log('over');
+          if(n >= pageNum) {
+              n = pageNum;
+              return;
+            } else {
+              n ++;
+              let append = '';
+              let d = designer['Content'][0].Carddata.slice(10*n, (10*n)+10);
+              for(let j = 0;j < d.length; j ++) {
+                  append += `<div class="col-6 col-md-4">
+                                  <a href="" target="_blank">
+                                  <div class="card">
+                                      <div style="overflow: hidden;">
+                                          <div class="card__bgImg" style="background-image: url(${d[j]['imgURL']});">
+                                          </div>
+                                      </div>
+                                      <div class="card-body">
+                                      <h5 class="card-title card__title mt-0">${d[j]['title']}</h5>
+                                      <p class="card-text mb-0">
+                                          <a href="" class="card__tag" target="_blank">混搭風</a>
+                                          <a href="" class="card__tag" target="_blank">混搭風</a>
+                                          <a href="" class="card__tag" target="_blank">混搭風</a>
+                                      </p>
+                                      </div>
+                                  </div>
+                                  </a>
+                              </div>`
+              }
+              $('#pills-intro .work__row').append(append);
+          }
+      
+      }
+  } else if (nowTab === document.querySelector('#pills-video')) {
+      let pageNum = Math.ceil(totalPages.video / 10) - 1;
+      console.log(totalPages.video);
+      let last = document.querySelector('#pills-video .work__row>div:last-child');
+      if ($(window).scrollTop() + $(window).height() >= ($(document).height() - 100)) {
+          if(n_video >= pageNum) {
+              n_video = pageNum;
+              console.log('n-video:', n_video);
+              console.log('pageNum', pageNum);
+              return;
+            } else {
+              console.log('pass-video');
+              n_video ++;
+              console.log('test');
+              let append = '';
+              let d = designer['Content'][1].Carddata.slice(10*n_video, (10*n_video)+10);
+              for(let j = 0;j < d.length; j ++) {
+                  append += `<div class="col-6 col-md-4">
+                                  <a href="" target="_blank">
+                                  <div class="card">
+                                      <div style="overflow: hidden;">
+                                          <div class="card__bgImg" style="background-image: url(${d[j]['imgURL']});">
+                                              <img src="https://hhh.com.tw/assets/images/rv_web/play.svg" alt="" width="50" height="50">
+                                          </div>
+                                      </div>
+                                      <div class="card-body">
+                                      <h5 class="card-title card__title mt-0">${d[j]['title']}</h5>
+                                      <p class="card-text mb-0">
+                                          <a href="" class="card__tag" target="_blank">混搭風</a>
+                                          <a href="" class="card__tag" target="_blank">混搭風</a>
+                                          <a href="" class="card__tag" target="_blank">混搭風</a>
+                                      </p>
+                                      </div>
+                                  </div>
+                                  </a>
+                              </div>`
+              }
+              $('#pills-video .work__row').append(append);
+          }
+      
+      }
+  } else if (nowTab === document.querySelector('#pills-columns')) {
+      let last = document.querySelector('#pills-columns .work__row>div:last-child');
+      let pageNum = Math.ceil(totalPages.columns / 10) - 1;
+      if ($(window).scrollTop() + $(window).height() >= ($(document).height() - 100)) {
+          if(n_columns >= pageNum) {
+              n_columns = pageNum;
+              return;
+            } else {
+              n_columns ++;
+              console.log('test');
+              let append = '';
+              let d = designer['Content'][2].Carddata.slice(10*n_columns, (10*n_columns)+10);
+              for(let j = 0;j < d.length; j ++) {
+                  append += `<div class="col-6 col-md-4">
+                                  <a href="" target="_blank">
+                                  <div class="card">
+                                      <div style="overflow: hidden;">
+                                          <div class="card__bgImg" style="background-image: url(${d[j]['imgURL']});">
+                                          </div>
+                                      </div>
+                                      <div class="card-body">
+                                      <h5 class="card-title card__title mt-0">${d[j]['title']}</h5>
+                                      <p class="card-text mb-0">
+                                          <a href="" class="card__tag" target="_blank">混搭風</a>
+                                          <a href="" class="card__tag" target="_blank">混搭風</a>
+                                          <a href="" class="card__tag" target="_blank">混搭風</a>
+                                      </p>
+                                      </div>
+                                  </div>
+                                  </a>
+                              </div>`
+              }
+              $('#pills-columns .work__row').append(append);
+          }
+      
+      }
+  } 
+}
+
 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())) {

js/index-list.js

@@ -1,4 +1,4 @@
-let over = document.querySelector('.infoContent .tab-content').offsetHeight+100;
+let over = document.querySelector('.infoContent .tab-content').offsetHeight+200;
 window.addEventListener('scroll', fixedOnOver);
     
 const navCollapse = document.querySelector('#nav-collapse');
@@ -11,3 +11,33 @@ function fixedOnOver() {
     }
 }
 
+function scrollTest() {
+  let page = 2;
+    let cardData;
+    let is_update = 0;
+
+$(window).scroll(function() {
+    if($(window).scrollTop() + $(window).height() >= ($(document).height() - 400) && is_update == 0) {
+        is_update = 1;
+        if(is_update == 1) {
+            $.ajax({
+                method: "GET",
+                url: `https://m3.hhh.com.tw:18686/gencase?id=14151&sort=new&page=${page}`,
+                headers: {'accept': 'application/json'}
+                }).done(function (msg) {
+                    
+                    $('.CaseNews-Card').append(CaseNews);
+
+                    if(cardData.length > 0) {
+                        is_update = 0;
+                        page ++;
+                    } else {
+                        is_update = 1;
+                    }
+                });
+        }
+    }
+})
+
+
+}