hhh-page-dev/js/index-list-mb.js

let userAgent;
let isSafari = false;
let browserName;

// pagination variables
let num_per_page = 10;
let n = 0;
let n_video = 0;
let n_columns = 0;
let totalPages = {
  intro: 0,
  video: 0,
  columns: 0,
  vr360: 0,
  company: 0,
};

let filter;

const urlParams = new URLSearchParams(window.location.search);
let getfilter = urlParams.get('q');
let cid = urlParams.get('cid');
console.log(getfilter, cid);

$('.likeSee__views').click(function () {
  window.location.href = `./index_designerList_mb.html?q=views&cid=${cid}`
  $(this).css('color', '#EE7800');
})

$('.likeSee__sort').click(function () {
  window.location.href = `./index_designerList_mb.html?cid=${cid}`
  $(this).css('color', '#EE7800');
})

function getpathId() {
  let query = window.location.search.split('?').pop();
  return query.split('=')[1];
}

function getQuery() {
  let query = getfilter;
  console.log(query);
  if (query == 'views') {
    filter = 'views';
    $('.likeSee__views').css('color', '#EE7800');
  } else {
    filter = 'dateSort';
    $('.likeSee__sort').css('color', '#EE7800');
  }
}



window.onload = function () {
  //window.scrollBy(0, 1);
  if (screen.width >= 901) {
    window.location.href = `../index_designerList.html?cid=${cid}`;
  }
  userAgent = navigator.userAgent;
  detectBrowser(userAgent);
  detectDirection();
  let result;
  let designer;
  let id = 0;
  $.ajax({
    method: "GET",
    // url: `./json/designers-${cid}.json`,
    url: `https://m3.hhh.com.tw:18686/gendesigner?id=${cid}&sort=new&page=1`,
    dataType: "json",
  }).done(function (msg) {
    getQuery();
    designer = [...msg][id];
    console.log(designer['Content']);
    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'], designer);
    renderModalTitle(designer['CompanyName']);
    console.log(filter);
    console.log(designer['Content'][0]['Carddata']);
    $(window).scroll(function () {
      let bottom = $("body").height() - $(window).height() - 1;
      if ($(window).scrollTop() >= bottom) {
          loadMoretest();
      }
    })
    // let bottom = $("body").height() - $(window).height() - 1;
    // if ($(window).scrollTop() >= bottom) {
    //   loadMoretest();
    // }
  });
}

// var page = 1;
// function loadMoretest() {

//     setTimeout(function () {
//         scroll_bottom_load_data(page);
//         page++;
//         return page


//     }, 500);
// }
function scroll_bottom_load_data(page) {

  $.ajax({
      method: "GET",
      url: `https://m3.hhh.com.tw:18686/gendesigner?id=${cid}&sort=new&page=${page}`,
  }).done(function (msg) {
      result = [...msg];
      let append = '';
      let d = result[0].Content[0].Carddata;
      // let cardcontent=[]
      let nowTab = document.querySelector('.infoContent .tab-pane.show');
      if (nowTab === document.querySelector('#pills-intro')) {
          for (let j = 0; j < d.length; j++) {

              let tagStr = ''
              for (let k = 0; k < d[j]['tag'].length; k++) {
                  tagStr += `<a href="${d[j]['tag'][k]['link']}" class="card__tag" target="_blank">${d[j]['tag'][k]['name']}</a>`
              }
              append += `<div class="col-6 col-md-4">
                                  <a href="${d[j]['url']}" 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">
                                                      ${tagStr}
                                                  </p>
                                          </div>
                                      </div>
                                  </a>
                               </div>`

              // var cardcontent2=cardcontent.push.d;
          }
          if (d.length === 0) {
              $('#loading_img').css("display", "none")
          }
          // console.log(cardcontent2);

          $('#pills-intro .work__row').append(append);
      }else if (nowTab === document.querySelector('#pills-video')) {
              let append = '';
              let d = result[0].Content[0].Carddata;
              for(let j = 0;j < d.length; j ++) {
                  let tagStr = ''
                  for(let k = 0;k < d[j]['tag'].length; k ++) {
                      tagStr += `<a href="${d[j]['tag'][k]['link']}" class="card__tag" target="_blank">${d[j]['tag'][k]['name']}</a>`
                  }
                  append += `<div class="col-6 col-md-4">
                                  <a href="${d[j]['url']}" 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">
                                          ${tagStr}
                                      </p>
                                      </div>
                                  </div>
                                  </a>
                              </div>`
              }
              if (d.length === 0) {
                  $('#loading_img').css("display", "none")
              }
              $('#pills-video .work__row').append(append);
          
        }else if (nowTab === document.querySelector('#pills-columns')) {
          let append = '';
          let d = result[0].Content[0].Carddata;
          for(let j = 0;j < d.length; j ++) {
              let tagStr = ''
              for(let k = 0;k < d[j]['tag'].length; k ++) {
                  tagStr += `<a href="${d[j]['tag'][k]['link']}" class="card__tag" target="_blank">${d[j]['tag'][k]['name']}</a>`
              }
              append += `<div class="col-6 col-md-4">
                              <a href="${d[j]['url']}" 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">
                                      ${tagStr}
                                  </p>
                                  </div>
                              </div>
                              </a>
                          </div>`
          }
          $('#pills-columns .work__row').append(append);
        }


  });

}

var page = 1;
function loadMoretest() {

    setTimeout(function () {
        // let pageNum = 2;
        // if(page<=pageNum){
        //     pageNum++;
        //     page++;
        // }else{

        // }
        scroll_bottom_load_data(page);
        page++;
        return page


    }, 500);
}

let over = document.querySelector('.infoContent__navBlock').offsetTop;

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 detectDirection() {
  let height = (window.screen.width * 2) / 3;

  $('.sec-02 .slide-item').css('height', `${height}px`);
  let topHeight = (window.screen.width * 30) / 131;

  $('.sec-00 .slide-item').css('height', `${topHeight}px`);
  $('.sec-00 .container-fluid').css('height', `${topHeight}px`);
}

function renderinfoCard(designer) {
  $('.mb__hero__bgImg').attr('backgroundImage', `url(${designer['BannerImg']})`);
  $('.mb__infoCard__avatar').css('backgroundImage', `url(${designer['Designerimg']})`)
  $('.mb__infoCard__name').text(designer['DesignerName']);
  $('.mb__infoCard__seo').text(designer['Description']);
  $('.mb__infoCard__cmy').text(designer['CompanyName']);
  if (designer['Approve'] !== '') {
    $('.mb__infoCard__approve').html(designer['Approve']);
  }
  // Basics
  let str = '';
  for (let i = 0; i < designer['Basics'].length; i++) {
    str += `<aside class="d-flex">
                  <div class="mb__infoCard__detail__l">
                      <div>${designer['Basics'][i].title}</div>
                  </div>
                  <div class="mb__infoCard__detail__r">
                      <a href="${designer['Basics'][i].link}">${designer['Basics'][i].data}</a>
                  </div>
              </aside>`
  }
  $('.mb__infoCard__basics').html(str);

  // Branches
  let otherStr = '';
  for (let i = 0; i < designer['Branches'].length; i++) {
    otherStr += `<aside class="d-flex">
                  <div class="mb__infoCard__detail__l">
                      <div>${designer['Branches'][i].title}</div>
                  </div>
                  <div class="mb__infoCard__detail__r">
                      <a href="${designer['Branches'][i].link}" >${designer['Branches'][i].data}</a>
                  </div>
              </aside>`
  }
  $('.mb__infoCard__branches').html(otherStr);
  let currentURL = window.location.href;
  // 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 if (i === 1) {
      mediaStr += `<a target="_blank" href="https://social-plugins.line.me/lineit/share?url=${currentURL}}">
      <img src="${designer['scMedia'][i].img}" alt="">
       </a>`;
  } else if (i === 2) {
      mediaStr += `<a target="_blank" href="https://www.addtoany.com/ext/wechat/share/#url=url=${currentURL}}">
      <img src="${designer['scMedia'][i].img}" alt="">
       </a>`;
  } 
    else if (i === 3) {
      mediaStr += `<span class="send" data-bs-toggle="modal" data-bs-target="#emailModal">
                      <img src="${designer['scMedia'][i].img}" 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="mb__infoCard__detail__l">
                          <div>${designer['Terms'][i].title}</div>
                      </div>
                      <div class="mb__infoCard__detail__r">
                          <div>${designer['Terms'][i].data}</div>
                      </div>
                  </aside>`
  }
  $('.mb__infoCard__terms').html(termStr);
}

function renderTab(content) {
  let tabTitleStr = '';
  for (let i = 0; i < content.length; i++) {
    if (content[i]['Carddata'] == "" & content[i]['info'] == undefined) {
      tabTitleStr += ``
    } else {
      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]['mb_title']}</a>
                        </li>`
      } else if (content[i]['Display_mb']) {
        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]['mb_title']}</a>
                    </li>`
      }
    }
  }
  $('#pills-tab').html(tabTitleStr);
  $('.pill-aside').html(tabTitleStr);
}


function renderTabContent(content, meta) {
  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++) {
        let tagStr = '';
        for (let k = 0; k < content[i].Carddata[j].tag.length; k++) {
          tagStr += `<a href="${content[i].Carddata[j].tag[k]['link']}" class="card__tag" target="_blank">${content[i].Carddata[j].tag[k]['name']}</a>`
      }
      
        // for(let j = 0;j < content[i].Carddata.length; j ++) {
        cardData += `<div class="col-6 col-md-4">
                              <a href="${content[i].Carddata[j]['url']}" 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">
                                  ${tagStr}
                                  </p>
                                  </div>
                              </div>
                              </a>
                          </div>`
      }
      if (content[i].Display_mb) {
        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-tabContent').append('<div style="padding: 20px;"></div>');
  $("#pills-intro").append(`              <div class="d-flex justify-content-center py-1 py-md-5">
  <div  id="loading_img">
      <svg class="loading-move" xmlns="http://www.w3.org/2000/svg" width="40" height="41.965"
          viewBox="0 0 40 41.965">
          <defs>
              <style>
                  .a {
                      fill: #ee751b;
                  }
              </style>
          </defs>
          <circle class="a" cx="4.89" cy="4.89" r="4.89" transform="translate(16.094)" />
          <ellipse class="a" cx="2.933" cy="2.933" rx="2.933" ry="2.933"
              transform="translate(18.05 36.099)" />
          <ellipse class="a" cx="4.401" cy="4.401" rx="4.401" ry="4.401" transform="translate(4.487 5.464)" />
          <circle class="a" cx="2.445" cy="2.445" r="2.445" transform="translate(30.626 31.609)" />
          <ellipse class="a" cx="3.911" cy="3.911" rx="3.911" ry="3.911" transform="translate(0 18.056)" />
          <circle class="a" cx="1.955" cy="1.955" r="1.955" transform="translate(36.091 20.01)" />
          <path class="a" d="M5.065,20.213a3.422,3.422,0,1,0,4.839,0A3.419,3.419,0,0,0,5.065,20.213Z"
              transform="translate(1.403 11.424)" />
          <ellipse class="a" cx="1.466" cy="1.466" rx="1.466" ry="1.466"
              transform="translate(31.603 8.434)" />
      </svg>
  </div>
</div>`)
$("#pills-video").append(`              <div class="d-flex justify-content-center py-1 py-md-5">
<div  id="loading_img">
  <svg class="loading-move" xmlns="http://www.w3.org/2000/svg" width="40" height="41.965"
      viewBox="0 0 40 41.965">
      <defs>
          <style>
              .a {
                  fill: #ee751b;
              }
          </style>
      </defs>
      <circle class="a" cx="4.89" cy="4.89" r="4.89" transform="translate(16.094)" />
      <ellipse class="a" cx="2.933" cy="2.933" rx="2.933" ry="2.933"
          transform="translate(18.05 36.099)" />
      <ellipse class="a" cx="4.401" cy="4.401" rx="4.401" ry="4.401" transform="translate(4.487 5.464)" />
      <circle class="a" cx="2.445" cy="2.445" r="2.445" transform="translate(30.626 31.609)" />
      <ellipse class="a" cx="3.911" cy="3.911" rx="3.911" ry="3.911" transform="translate(0 18.056)" />
      <circle class="a" cx="1.955" cy="1.955" r="1.955" transform="translate(36.091 20.01)" />
      <path class="a" d="M5.065,20.213a3.422,3.422,0,1,0,4.839,0A3.419,3.419,0,0,0,5.065,20.213Z"
          transform="translate(1.403 11.424)" />
      <ellipse class="a" cx="1.466" cy="1.466" rx="1.466" ry="1.466"
          transform="translate(31.603 8.434)" />
  </svg>
</div>
</div>`)
$("#pills-columns").append(`              <div class="d-flex justify-content-center py-1 py-md-5">
<div  id="loading_img">
  <svg class="loading-move" xmlns="http://www.w3.org/2000/svg" width="40" height="41.965"
      viewBox="0 0 40 41.965">
      <defs>
          <style>
              .a {
                  fill: #ee751b;
              }
          </style>
      </defs>
      <circle class="a" cx="4.89" cy="4.89" r="4.89" transform="translate(16.094)" />
      <ellipse class="a" cx="2.933" cy="2.933" rx="2.933" ry="2.933"
          transform="translate(18.05 36.099)" />
      <ellipse class="a" cx="4.401" cy="4.401" rx="4.401" ry="4.401" transform="translate(4.487 5.464)" />
      <circle class="a" cx="2.445" cy="2.445" r="2.445" transform="translate(30.626 31.609)" />
      <ellipse class="a" cx="3.911" cy="3.911" rx="3.911" ry="3.911" transform="translate(0 18.056)" />
      <circle class="a" cx="1.955" cy="1.955" r="1.955" transform="translate(36.091 20.01)" />
      <path class="a" d="M5.065,20.213a3.422,3.422,0,1,0,4.839,0A3.419,3.419,0,0,0,5.065,20.213Z"
          transform="translate(1.403 11.424)" />
      <ellipse class="a" cx="1.466" cy="1.466" rx="1.466" ry="1.466"
          transform="translate(31.603 8.434)" />
  </svg>
</div>
</div>`)
  $('#pills-intro').addClass('active');
  $('#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();
  $(`<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);
const navBlock = document.querySelector('.infoContent__navBlock');
function fixedOnScroll() {
  if (window.innerHeight < window.innerWidth) {
  } else {
    detectDirection();
  }

  if (window.pageYOffset >= over) {
    navBlock.classList.add('tab_sticky');
  } else if (window.pageYOffset < over) {
    navBlock.classList.remove('tab_sticky');
  }
}

$('.navbar-toggler').click(function () {
  $(".sec-menu").css('display', 'block');
  $(".wholeBody").css('overflow-y', 'hidden');
  $('.sec-menu-block').addClass('slidein');
  $('.sec-menu-block').removeClass('slideout');
});

$('.navbar-back').click(function () {
  $(".sec-menu").css('display', 'none');
  $(".wholeBody").css('overflow-y', 'scroll');
  $('.sec-menu-block').removeClass('slidein');
  $('.sec-menu-block').addClass('slideout');
});

$('.subexpand').click(function () {
  $(this).parent().next().toggleClass('show');
  $(this).parent().toggleClass('show');
});

$('.navbar-search').click(function () {
  $(".sec-search").css('display', 'block');
  $(".wholeBody").css('overflow-y', 'hidden');
})

$('.navbar-backs').click(function () {
  $(".sec-search").css('display', 'none');
  $(".wholeBody").css('overflow-y', 'scroll');
});

$('.navbar-back-fav').click(function () {
  $(".sec-favor").css('display', 'none');
})

$('.btn-gotop').click(function () {
  $('html, body').animate({
    scrollTop: 0
  }, 500)
});

$(window).scroll(function () {
  if ($(this).scrollTop() > 500) {
    $('.fixed-btn').fadeIn(222);
    $('.freeCall').fadeIn(222);
  } else {
    $('.fixed-btn').stop().fadeOut(222);
    $('.freeCall').stop().fadeOut(222);
  }
}).scroll();


const searchBtn = document.querySelector('.searchBtn');
const searchBar = document.querySelector('.searchBar');
const searchHotLink = document.querySelectorAll('.sec-search-hots__link');
searchBtn.addEventListener('click', search);
searchBar.addEventListener('keyup', pressSearch);
function search() {
  if (searchBar.value == '') {
    window.location.href = 'https://m.hhh.com.tw/search/lists/case/';
  } else {
    window.location.href = `https://m.hhh.com.tw/search/lists/case/${searchBar.value}-keyword/`;
  }
}

function pressSearch(e) {
  if (e.keyCode === 13) {
    e.preventDefault();
    search();
  }
}

searchHotLink.forEach((item, i) => {
  item.addEventListener('click', function () {
    window.location.href = `https://m.hhh.com.tw/search/lists/case/${this.textContent}-keyword/`;
  })
})

document.addEventListener('lazybeforeunveil', function (e) {
  var bg = e.target.getAttribute('data-bg');
  if (bg) {
    e.target.style.backgroundImage = 'url(' + bg + ')';
  }
});

$('.mb__infoCard__more').click(function () {
  $(this).hide();
  $('.other').css('display', 'block');
  over = document.querySelector('.infoContent__navBlock').offsetTop;
})


checkTab()
$('.infoContent .nav-item-link').click(checkTab);

function checkTab() {
  if ($('#pills-intro-tab').hasClass('active')) {
    $('.likeSee').attr('hidden', false)
  } else {
    $('.likeSee').attr('hidden', true)
  }
}


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())) {
    $('#error').hide();
    $('#putEmail_hidden').css('display', 'block');
    $('#add_email').text($('#email').val());
    $('#email').val('');
  } else {
    $('#error').show();
    $('#error').text('email 格式有誤');
  }

}

// $(function(){
//   var len = 10;
//   $(".JQellipsis").each(function(i){
//       if($(this).text().length>len){
//           $(this).attr("title",$(this).text());
//           var text=$(this).text().substring(0,len-1)+"...";
//           $(this).text(text);
//       }
//   });
// });