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`,
    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() {
      loadMore(designer);
    })
  });
}
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').text(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);

  // 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 === 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(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 ++) {
          // 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">
                                  <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>`
          }
          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: 60px;"></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 格式有誤');
  }
  
}