Browse Source

seperate index.js

huai-sian 3 years ago
parent
commit
7e39312333
6 changed files with 463 additions and 324 deletions
  1. 1 1
      cases.html
  2. 1 1
      goto.js
  3. 1 1
      index_designerList.html
  4. 460 0
      js/index-designer.js
  5. 0 321
      js/index.js
  6. BIN
      json/designers.json.zip

+ 1 - 1
cases.html

@@ -1729,7 +1729,7 @@
         crossorigin="anonymous"></script>
         crossorigin="anonymous"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
-    <script async defer src="js/index.js"></script>
+    <script async defer src="js/index_copy.js"></script>
     <script async defer src="./goto.js"></script>
     <script async defer src="./goto.js"></script>
 
 
     <!-- <script src="js/lazy-load.js" async></script> -->
     <!-- <script src="js/lazy-load.js" async></script> -->

+ 1 - 1
goto.js

@@ -23,7 +23,7 @@ function get_data() {
     // $("#version").html(desid);
     // $("#version").html(desid);
     $.ajax({
     $.ajax({
         method: "GET",
         method: "GET",
-        url: `json/cases-${id}.json`,
+        url: `json/cases.json`,
         dataType: "json",
         dataType: "json",
     })
     })
         .done(function (msg) {
         .done(function (msg) {

+ 1 - 1
index_designerList.html

@@ -1738,7 +1738,7 @@
         crossorigin="anonymous"></script>
         crossorigin="anonymous"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
-    <script async defer src="js/index.js"></script>
+    <script async defer src="js/index-designer.js"></script>
     <script async defer src="js/index-list.js"></script>
     <script async defer src="js/index-list.js"></script>
     <script src="js/lazy-load.js" async></script>
     <script src="js/lazy-load.js" async></script>
 </body>
 </body>

+ 460 - 0
js/index-designer.js

@@ -0,0 +1,460 @@
+let userAgent;
+let isSafari = false;
+let browserName;
+
+let filter;
+
+$('.likeSee__views').click(function() {
+    window.location.href = './index_designerList.html'
+})
+
+$('.likeSee__sort').click(function() {
+    window.location.href = './index_designerList.html?q=dateSort'
+})
+
+function getpathId(){
+    let query = window.location.search.split('?').pop();
+    return query.split('=')[1];
+}
+
+function getQuery() {
+    let query = getpathId();
+    if(query == 'dateSort'){
+        filter = 'dateSort';
+    } else {
+        filter = 'views';
+    }
+}
+
+getQuery();
+
+// 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(){
+    if(screen.width < 900){
+        window.location.href = "../index_designerList_mb.html";   
+    }
+    userAgent = navigator.userAgent;
+    detectBrowser(userAgent);
+    detectDirection ();
+    let result;
+    let designer;
+    let id = 0;
+    $.ajax({
+        method: "GET",
+        url: "./json/realtime.json",
+        dataType: "json",
+    }).done(function (msg) {
+        result = [...msg];
+        renderSec00(result);
+    });
+    $.ajax({
+        method: "GET",
+        url: "./json/designers.json",
+        dataType: "json",
+    }).done(function (msg) {
+        designer = [...msg][id];
+        console.log(designer)
+        designer['Content'][0]['Carddata'].sort(function (a, b){
+            return a[filter] > b[filter]? -1:1;
+        })
+        console.log(designer['Content'][0]['Carddata']);
+        renderinfoCard(designer);
+        renderTab(designer['Content']);
+        renderTabContent(designer['Content']);
+        $(window).scroll(function() {
+            loadMore(designer);
+        })
+    });
+}
+  
+
+function detectDirection () {
+    let height = (window.screen.width * 5) / 12;
+    console.log(height);
+    $('.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;
+    }
+    console.log(isSafari);
+  }
+
+
+
+function renderSec00(data) {
+    let temp = data[0]['data'];
+    renderBannerStr('sec-00__slider', temp);
+    $(".sec-00__slider").slick({
+        dots: false,
+        speed: 800,
+        autoplay: true,
+        autoplaySpeed: 5000,
+        arrows: true,
+        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>'
+    });
+}
+
+function renderBannerStr(sec, data) {
+    let str = '';
+    for(let i = 0; i < data.length; i++){
+        if(data[i]['Dwebp'] && !isSafari) {
+            str+= `<div class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['Dwebp']}');" data-bg="${data[i]['Dwebp']}"></div>`
+        } else {
+            str+= `<div class="${sec}-${i+1} slide-item" onclick="window.open('${data[i]['link']}');" style="background-image: url('${data[i]['DimgUrl']}');" data-bg="${data[i]['DimgUrl']}"></div>`
+        }
+            
+    }
+    $(`.${sec}`).html(str);
+}
+
+function renderinfoCard(designer) {
+    $('.hero__img').attr('src', designer['BannerImg']);
+    $('.infoCard__avatar').css('backgroundImage', `url(${designer['Designerimg']})`)
+    $('.infoCard__name').text(designer['DesignerName']);
+    $('.infoCard__seo').text(designer['Description']);
+    $('.infoCard__company').text(designer['CompanyName']);
+    if(designer['Approve'] !== '') {
+        $('.infoCard__approve').text(designer['Approve']);
+    }
+    // Basics
+    let str = '';
+    for(let i = 0;i < designer['Basics'].length; i ++) {
+        str += `<aside class="d-flex">
+                    <div class="infoCard__detail__l">
+                        <div>${designer['Basics'][i].title}</div>
+                    </div>
+                    <div class="infoCard__detail__r">
+                        <a href="${designer['Basics'][i].link}">${designer['Basics'][i].data}</a>
+                    </div>
+                </aside>`
+    }
+    $('.infoCard__basics').html(str);
+
+    // Branches
+    let otherStr = '';
+    for(let i = 0;i < designer['Branches'].length; i ++) {
+        otherStr += `<aside class="d-flex">
+                    <div class="infoCard__detail__l">
+                        <div>${designer['Branches'][i].title}</div>
+                    </div>
+                    <div class="infoCard__detail__r">
+                        <a href="${designer['Branches'][i].link}" >${designer['Branches'][i].data}</a>
+                    </div>
+                </aside>`
+    }
+    $('.infoCard__branches').html(otherStr);
+
+    // scMedia
+    let mediaStr = '';
+    for(let i = 0;i < designer['scMedia'].length; i ++) {
+        if(i === 4) {
+            mediaStr += `<span>
+                        <img src="${designer['scMedia'][i].img}" class="dislike" alt="">
+                        <img src="https://hhh.com.tw/assets/images/rv_web/like.svg" class="like" alt="">
+                    </span>`;
+        } else {
+            mediaStr += `<a href="${designer['scMedia'][i].link}">
+                        <img src="${designer['scMedia'][i].img}" alt="">
+                    </a>`;
+        }
+    }
+    $('.scMedia').html(mediaStr);
+
+    document.querySelector('.dislike').addEventListener('click', function() {
+        $('.dislike').css('display', 'none');
+        $('.like').css('display', 'block');
+    })
+
+    document.querySelector('.like').addEventListener('click', function() {
+        $('.dislike').css('display', 'block');
+        $('.like').css('display', 'none');
+    })
+
+
+    // term condition
+    let termStr = '';
+    for(let i = 0;i < designer['Terms'].length; i ++) {
+        termStr += `<aside class="d-flex">
+                        <div class="infoCard__detail__l">
+                            <div>${designer['Terms'][i].title}</div>
+                        </div>
+                        <div class="infoCard__detail__r">
+                            <div>${designer['Terms'][i].data}</div>
+                        </div>
+                    </aside>`
+    }
+    $('.infoCard__terms').html(termStr);
+}
+
+function renderTab(content) {
+    let tabTitleStr = '';
+    for(let i = 0;i < content.length; i ++) {
+        if(i == 0) {
+            tabTitleStr += `<li class="nav-item p-0 active" role="presentation">
+                                <a class="nav-item-link nav-item-active bg-transparent active" id="pills-${content[i]['Tabtag']}-tab"
+                                data-bs-toggle="pill" data-bs-target="#pills-${content[i]['Tabtag']}" type="button" role="tab"
+                                aria-controls="pills-${content[i]['Tabtag']}" aria-selected="false" data-link="https://hhh.com.tw/videos/lists/">${content[i]['Title']}</a>
+                            </li>`
+        } else if (content[i]['isActive']) {
+            tabTitleStr += `<li class="nav-item p-0" role="presentation">
+                            <a class="nav-item-link nav-item-active bg-transparent" id="pills-${content[i]['Tabtag']}-tab"
+                            data-bs-toggle="pill" data-bs-target="#pills-${content[i]['Tabtag']}" type="button" role="tab"
+                            aria-controls="pills-${content[i]['Tabtag']}" aria-selected="false" data-link="https://hhh.com.tw/videos/lists/">${content[i]['Title']}</a>
+                        </li>`
+        }
+    }
+    $('#pills-tab').html(tabTitleStr);
+    $('.pill-aside').html(tabTitleStr);
+}
+
+
+function renderTabContent(content) {
+    let tabStr = '';
+    for(let i = 0;i < content.length; i ++) {
+        let cardData = ''
+        if(content[i].info) {
+            for(let j = 0;j < content[i].info.length; j ++) {
+                cardData += `<div class="company__block">
+                                <h4 class="company__title">${content[i].info[j].title}</h4>
+                                <div class="company__text">
+                                    ${content[i].info[j].data}
+                                </div>
+                            </div>`
+            }
+            tabStr +=  `<div class="tab-pane fade " id="pills-${content[i]['Tabtag']}" role="tabpanel"
+                        aria-labelledby="pills-${content[i]['Tabtag']}-tab">
+                        <div class="row justfy-content-between">
+                            <div class="col-md-8">
+                                <article class="company__article">
+                                    ${cardData}
+                                </article>
+                            </div>
+                        </div>
+                    </div>`
+        
+        } else {
+            for(let j = 0;j < (content[i].Carddata.length < num_per_page? content[i].Carddata.length: num_per_page); j ++) {
+                cardData += `<div class="col-md-4">
+                                <a href="" target="_blank">
+                                <div class="card">
+                                    <div class="card__bgImg" style="background-image: url(${content[i].Carddata[j]['imgURL']});">
+                                    </div>
+                                    <div class="card-body">
+                                    <h5 class="card-title card__title mt-0">${content[i].Carddata[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>`
+            }
+            tabStr +=  `<div class="tab-pane fade " id="pills-${content[i]['Tabtag']}" role="tabpanel"
+                        aria-labelledby="pills-${content[i]['Tabtag']}-tab">
+                        <div class="row work__row">
+                            ${cardData}
+                        </div>
+                    </div>`
+                    let key = content[i]['Tabtag'];
+                    totalPages[key] = content[i].Carddata.length;
+        }
+        
+        
+    }
+    console.log(tabStr);
+    console.log(totalPages);
+    $('#pills-tabContent').html(tabStr);
+    $('#pills-intro').addClass('active', 'show');
+    $('#pills-intro').addClass('show');
+    $('#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();
+}
+
+function checkTab() {
+    if($('#pills-intro-tab').hasClass('active')) {
+      $('.likeSee').attr('hidden', false)
+    } else {
+      $('.likeSee').attr('hidden', true)
+    }
+}
+
+
+let sticky = document.querySelector('.sec-00').offsetHeight;
+window.addEventListener('scroll', fixedOnScroll);
+    
+const navbar = document.querySelector('.navbar-main');
+    
+function fixedOnScroll() {
+    if(window.pageYOffset >= sticky){
+        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();
+
+function loadMore(designer) {
+    let nowTab = document.querySelector('.infoContent .tab-pane.show')
+    if(nowTab === document.querySelector('#pills-intro')) {
+        let pageNum = Math.ceil(totalPages.intro / 9);
+        if ($(this).scrollTop() > 1800) {
+            if(n >= pageNum) {
+                n = pageNum;
+                return;
+              } else {
+                n ++;
+                console.log('test');
+                let append = '';
+                let d = designer['Content'][0].Carddata.slice(9*n, (9*n)+9);
+                for(let j = 0;j < d.length; j ++) {
+                    append += `<div class="col-md-4">
+                                    <a href="" target="_blank">
+                                    <div class="card">
+                                        <div class="card__bgImg" style="background-image: url(${d[j]['imgURL']});">
+                                        </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.intro / 9);
+        if ($(this).scrollTop() > 1800) {
+            if(n >= pageNum) {
+                n = pageNum;
+                return;
+              } else {
+                n ++;
+                console.log('test');
+                let append = '';
+                let d = designer['Content'][0].Carddata.slice(9*n, (9*n)+9);
+                for(let j = 0;j < d.length; j ++) {
+                    append += `<div class="col-md-4">
+                                    <a href="" target="_blank">
+                                    <div class="card">
+                                        <div class="card__bgImg" style="background-image: url(${d[j]['imgURL']});">
+                                        </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 pageNum = Math.ceil(totalPages.intro / 9);
+        if ($(this).scrollTop() > 1800) {
+            if(n >= pageNum) {
+                n = pageNum;
+                return;
+              } else {
+                n ++;
+                console.log('test');
+                let append = '';
+                let d = designer['Content'][0].Carddata.slice(9*n, (9*n)+9);
+                for(let j = 0;j < d.length; j ++) {
+                    append += `<div class="col-md-4">
+                                    <a href="" target="_blank">
+                                    <div class="card">
+                                        <div class="card__bgImg" style="background-image: url(${d[j]['imgURL']});">
+                                        </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);
+            }
+        
+        }
+    }
+}
+
+$('.btn-gotop').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 + ')';
+    }
+});
+

+ 0 - 321
js/index.js

@@ -2,31 +2,6 @@ let userAgent;
 let isSafari = false;
 let isSafari = false;
 let browserName;
 let browserName;
 
 
-let filter;
-
-$('.likeSee__views').click(function() {
-    window.location.href = './index_designerList.html'
-})
-
-$('.likeSee__sort').click(function() {
-    window.location.href = './index_designerList.html?q=dateSort'
-})
-
-function getpathId(){
-    let query = window.location.search.split('?').pop();
-    return query.split('=')[1];
-}
-
-function getQuery() {
-    let query = getpathId();
-    if(query == 'dateSort'){
-        filter = 'dateSort';
-    } else {
-        filter = 'views';
-    }
-}
-
-getQuery();
 
 
 // pagination variables
 // pagination variables
 let num_per_page = 9;
 let num_per_page = 9;
@@ -57,24 +32,6 @@ window.onload = function(){
         result = [...msg];
         result = [...msg];
         renderSec00(result);
         renderSec00(result);
     });
     });
-    $.ajax({
-        method: "GET",
-        url: "./json/designers.json",
-        dataType: "json",
-    }).done(function (msg) {
-        designer = [...msg][id];
-        console.log(designer)
-        designer['Content'][0]['Carddata'].sort(function (a, b){
-            return a[filter] > b[filter]? -1:1;
-        })
-        console.log(designer['Content'][0]['Carddata']);
-        renderinfoCard(designer);
-        renderTab(designer['Content']);
-        renderTabContent(designer['Content']);
-        $(window).scroll(function() {
-            loadMore(designer);
-        })
-    });
 }
 }
   
   
 
 
@@ -134,180 +91,6 @@ function renderBannerStr(sec, data) {
     $(`.${sec}`).html(str);
     $(`.${sec}`).html(str);
 }
 }
 
 
-function renderinfoCard(designer) {
-    $('.hero__img').attr('src', designer['BannerImg']);
-    $('.infoCard__avatar').css('backgroundImage', `url(${designer['Designerimg']})`)
-    $('.infoCard__name').text(designer['DesignerName']);
-    $('.infoCard__seo').text(designer['Description']);
-    $('.infoCard__company').text(designer['CompanyName']);
-    if(designer['Approve'] !== '') {
-        $('.infoCard__approve').text(designer['Approve']);
-    }
-    // Basics
-    let str = '';
-    for(let i = 0;i < designer['Basics'].length; i ++) {
-        str += `<aside class="d-flex">
-                    <div class="infoCard__detail__l">
-                        <div>${designer['Basics'][i].title}</div>
-                    </div>
-                    <div class="infoCard__detail__r">
-                        <a href="${designer['Basics'][i].link}">${designer['Basics'][i].data}</a>
-                    </div>
-                </aside>`
-    }
-    $('.infoCard__basics').html(str);
-
-    // Branches
-    let otherStr = '';
-    for(let i = 0;i < designer['Branches'].length; i ++) {
-        otherStr += `<aside class="d-flex">
-                    <div class="infoCard__detail__l">
-                        <div>${designer['Branches'][i].title}</div>
-                    </div>
-                    <div class="infoCard__detail__r">
-                        <a href="${designer['Branches'][i].link}" >${designer['Branches'][i].data}</a>
-                    </div>
-                </aside>`
-    }
-    $('.infoCard__branches').html(otherStr);
-
-    // scMedia
-    let mediaStr = '';
-    for(let i = 0;i < designer['scMedia'].length; i ++) {
-        if(i === 4) {
-            mediaStr += `<span>
-                        <img src="${designer['scMedia'][i].img}" class="dislike" alt="">
-                        <img src="https://hhh.com.tw/assets/images/rv_web/like.svg" class="like" alt="">
-                    </span>`;
-        } else {
-            mediaStr += `<a href="${designer['scMedia'][i].link}">
-                        <img src="${designer['scMedia'][i].img}" alt="">
-                    </a>`;
-        }
-    }
-    $('.scMedia').html(mediaStr);
-
-    document.querySelector('.dislike').addEventListener('click', function() {
-        $('.dislike').css('display', 'none');
-        $('.like').css('display', 'block');
-    })
-
-    document.querySelector('.like').addEventListener('click', function() {
-        $('.dislike').css('display', 'block');
-        $('.like').css('display', 'none');
-    })
-
-
-    // term condition
-    let termStr = '';
-    for(let i = 0;i < designer['Terms'].length; i ++) {
-        termStr += `<aside class="d-flex">
-                        <div class="infoCard__detail__l">
-                            <div>${designer['Terms'][i].title}</div>
-                        </div>
-                        <div class="infoCard__detail__r">
-                            <div>${designer['Terms'][i].data}</div>
-                        </div>
-                    </aside>`
-    }
-    $('.infoCard__terms').html(termStr);
-}
-
-function renderTab(content) {
-    let tabTitleStr = '';
-    for(let i = 0;i < content.length; i ++) {
-        if(i == 0) {
-            tabTitleStr += `<li class="nav-item p-0 active" role="presentation">
-                                <a class="nav-item-link nav-item-active bg-transparent active" id="pills-${content[i]['Tabtag']}-tab"
-                                data-bs-toggle="pill" data-bs-target="#pills-${content[i]['Tabtag']}" type="button" role="tab"
-                                aria-controls="pills-${content[i]['Tabtag']}" aria-selected="false" data-link="https://hhh.com.tw/videos/lists/">${content[i]['Title']}</a>
-                            </li>`
-        } else if (content[i]['isActive']) {
-            tabTitleStr += `<li class="nav-item p-0" role="presentation">
-                            <a class="nav-item-link nav-item-active bg-transparent" id="pills-${content[i]['Tabtag']}-tab"
-                            data-bs-toggle="pill" data-bs-target="#pills-${content[i]['Tabtag']}" type="button" role="tab"
-                            aria-controls="pills-${content[i]['Tabtag']}" aria-selected="false" data-link="https://hhh.com.tw/videos/lists/">${content[i]['Title']}</a>
-                        </li>`
-        }
-    }
-    $('#pills-tab').html(tabTitleStr);
-    $('.pill-aside').html(tabTitleStr);
-}
-
-
-function renderTabContent(content) {
-    let tabStr = '';
-    for(let i = 0;i < content.length; i ++) {
-        let cardData = ''
-        if(content[i].info) {
-            for(let j = 0;j < content[i].info.length; j ++) {
-                cardData += `<div class="company__block">
-                                <h4 class="company__title">${content[i].info[j].title}</h4>
-                                <div class="company__text">
-                                    ${content[i].info[j].data}
-                                </div>
-                            </div>`
-            }
-            tabStr +=  `<div class="tab-pane fade " id="pills-${content[i]['Tabtag']}" role="tabpanel"
-                        aria-labelledby="pills-${content[i]['Tabtag']}-tab">
-                        <div class="row justfy-content-between">
-                            <div class="col-md-8">
-                                <article class="company__article">
-                                    ${cardData}
-                                </article>
-                            </div>
-                        </div>
-                    </div>`
-        
-        } else {
-            for(let j = 0;j < (content[i].Carddata.length < num_per_page? content[i].Carddata.length: num_per_page); j ++) {
-                cardData += `<div class="col-md-4">
-                                <a href="" target="_blank">
-                                <div class="card">
-                                    <div class="card__bgImg" style="background-image: url(${content[i].Carddata[j]['imgURL']});">
-                                    </div>
-                                    <div class="card-body">
-                                    <h5 class="card-title card__title mt-0">${content[i].Carddata[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>`
-            }
-            tabStr +=  `<div class="tab-pane fade " id="pills-${content[i]['Tabtag']}" role="tabpanel"
-                        aria-labelledby="pills-${content[i]['Tabtag']}-tab">
-                        <div class="row work__row">
-                            ${cardData}
-                        </div>
-                    </div>`
-                    let key = content[i]['Tabtag'];
-                    totalPages[key] = content[i].Carddata.length;
-        }
-        
-        
-    }
-    console.log(tabStr);
-    console.log(totalPages);
-    $('#pills-tabContent').html(tabStr);
-    $('#pills-intro').addClass('active', 'show');
-    $('#pills-intro').addClass('show');
-    $('#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();
-}
-
-function checkTab() {
-    if($('#pills-intro-tab').hasClass('active')) {
-      $('.likeSee').attr('hidden', false)
-    } else {
-      $('.likeSee').attr('hidden', true)
-    }
-}
-
 
 
 let sticky = document.querySelector('.sec-00').offsetHeight;
 let sticky = document.querySelector('.sec-00').offsetHeight;
 window.addEventListener('scroll', fixedOnScroll);
 window.addEventListener('scroll', fixedOnScroll);
@@ -331,109 +114,6 @@ $(window).scroll(function() {
 
 
 }).scroll();
 }).scroll();
 
 
-function loadMore(designer) {
-    let nowTab = document.querySelector('.infoContent .tab-pane.show')
-    if(nowTab === document.querySelector('#pills-intro')) {
-        let pageNum = Math.ceil(totalPages.intro / 9);
-        if ($(this).scrollTop() > 1800) {
-            if(n >= pageNum) {
-                n = pageNum;
-                return;
-              } else {
-                n ++;
-                console.log('test');
-                let append = '';
-                let d = designer['Content'][0].Carddata.slice(9*n, (9*n)+9);
-                for(let j = 0;j < d.length; j ++) {
-                    append += `<div class="col-md-4">
-                                    <a href="" target="_blank">
-                                    <div class="card">
-                                        <div class="card__bgImg" style="background-image: url(${d[j]['imgURL']});">
-                                        </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.intro / 9);
-        if ($(this).scrollTop() > 1800) {
-            if(n >= pageNum) {
-                n = pageNum;
-                return;
-              } else {
-                n ++;
-                console.log('test');
-                let append = '';
-                let d = designer['Content'][0].Carddata.slice(9*n, (9*n)+9);
-                for(let j = 0;j < d.length; j ++) {
-                    append += `<div class="col-md-4">
-                                    <a href="" target="_blank">
-                                    <div class="card">
-                                        <div class="card__bgImg" style="background-image: url(${d[j]['imgURL']});">
-                                        </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 pageNum = Math.ceil(totalPages.intro / 9);
-        if ($(this).scrollTop() > 1800) {
-            if(n >= pageNum) {
-                n = pageNum;
-                return;
-              } else {
-                n ++;
-                console.log('test');
-                let append = '';
-                let d = designer['Content'][0].Carddata.slice(9*n, (9*n)+9);
-                for(let j = 0;j < d.length; j ++) {
-                    append += `<div class="col-md-4">
-                                    <a href="" target="_blank">
-                                    <div class="card">
-                                        <div class="card__bgImg" style="background-image: url(${d[j]['imgURL']});">
-                                        </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);
-            }
-        
-        }
-    }
-}
 
 
 $('.btn-gotop').click(function () {
 $('.btn-gotop').click(function () {
     $('html, body').animate({
     $('html, body').animate({
@@ -442,7 +122,6 @@ $('.btn-gotop').click(function () {
 });
 });
 
 
 
 
-
 $('.sec-00__close').click(function(){
 $('.sec-00__close').click(function(){
     $(this).css('display', 'none');
     $(this).css('display', 'none');
     $('.sec-00').addClass('bannerClose');
     $('.sec-00').addClass('bannerClose');

BIN
json/designers.json.zip