New-Bhouse-Web/themes/hugo-universal-theme-master/static/js/bhouse.js

// $(".responsive").slick({
//   dots: true,
//   slidesToShow: 1,
//   slidesToScroll: 1,
//   autoplay: true,
//   autoplaySpeed: 3000,
//   arrows: false,
// });

document.addEventListener('DOMContentLoaded', function() {
  $(".responsive").slick({
    dots: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 3000,
    arrows: false,
  });
});

// 直式輪播圖動態更改高度
function changeHeight() {
  let firstImg = $('.style_house_sec02_slide div:first-child img');
  let firstImgHeight = firstImg.css('height');
  $('.style_house_sec02_slide .vertical-img').css("height", `${firstImgHeight}`)
}
changeHeight();
$(window).resize(function () {
  setTimeout(() => {
    changeHeight();
  }, 100)
});

let imgCount = $(".slide_single_img").length;
let heightImg = [];

window.onload = function () {
  console.log('onload');
  $('.slide_single_img').each(function (i, array) { // jquery.each() 循環讀取所有圖片
    let height = $(this).height();
    let width = $(this).width();
    let x = (height / width);
    console.log('height / width = ', x);
    if (x >= 1) {
      if (i === 0) {
        $(this).addClass("img-height-vw");
        // $(this).css({
        //   'height': 500 + 'px',
        //   "margin": 'auto',
        // });
      } else {
        // 預設高度為 0
        $(this).css({
          'height': 0 + 'px',
          'object-fit': 'contain',
          // 'margin': 'auto',
        });
      }
      heightImg.push($(this));
    } 
    // else {
    //   $(this).css({
    //     'height': 580 + 'px',
    //     'object-fit': 'cover'
    //   });
    //   console.log('this',this);
    // }

    if (i === imgCount - 1) {
      $('#slider-loading').addClass("slider_loading");
      $('.style_house_sec02').css("height", "auto");
      $('.style_house_sec02 .content').css('opacity', '1');

    }
  });

  let heightImgIndex = [];

  function getAllIndex(arr) {
    // 篩選符合條件 Index
    for (i = 0; i < arr.length; i++) {
      if (arr[i].height === 0)
        heightImgIndex.push(i);
    }
    return heightImgIndex;
  }
  let allSlideImg = document.querySelectorAll('.slide_single_img');
  getAllIndex(allSlideImg);

  // 取得 slick 當前的 Index
  $('.style_house_sec02 .slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
    for (i = 0; i < heightImgIndex.length; i++) {
      console.log(heightImgIndex[i]);
      if (nextSlide == heightImgIndex[i]) {
       //   allSlideImg[nextSlide].style.cssText = `
        //   height: 500px; 
        //   margin: auto;
        // `;
      allSlideImg[nextSlide].classList.add("img-height-vw");
      } else {
        allSlideImg[heightImgIndex[i]].style.height = '0px';
      }
    }
  });

  $('.slide_img').each(function () { // jquery.each() 循環讀取所有圖片
    var height = $(this).height();
    var width = $(this).width();
    let x = (height / width);
    if (x > 1) {
      $(this).css({
        'width': 130 + 'px',
        "margin": 'auto',
        "padding": "5px",
      });
    } else {
      $(this).css({
        "margin-top": '30px',
        "padding": "5px",
      });
    }
  });
}
// $('.slide_single_img').each(function (i) { // jquery.each() 循環讀取所有圖片
//   let height = $(this).height();
//   let width = $(this).width();
//   let x = (height / width);
//   console.log('index', i);
//   console.log('height / width = ', x);
//   if (x >= 1) {
//     console.log('長圖',i);
//     if (i===0) {
//       return;
//     }
//     heightImg.push($(this));
//     // 預設高度為 0
//     $(this).css({
//       'height': 0 + 'px',
//       "margin": 'auto',
//     });
//   }
// });

// let heightImgIndex = [];

// function getAllIndex(arr) {
//   // 篩選符合條件 Index
//   for (i = 0; i < arr.length; i++) {
//     if (arr[i].height === 0)
//       heightImgIndex.push(i);
//   }
//   return heightImgIndex;
// }
// let allSlideImg = document.querySelectorAll('.slide_single_img');
// getAllIndex(allSlideImg);

// // 取得 slick 當前的 Index
// $('.style_house_sec02 .slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
//   for (i = 0; i < heightImgIndex.length; i++) {
//     console.log(heightImgIndex[i]);
//     if (nextSlide == heightImgIndex[i]) {
//       allSlideImg[nextSlide].style.cssText = `
//       height: 500px; 
//       margin: auto;
//     `;
//     } else {
//       allSlideImg[heightImgIndex[i]].style.height = '0px';
//     }
//   }
// });

// $('.slide_img').each(function () { // jquery.each() 循環讀取所有圖片
//   var height = $(this).height();
//   var width = $(this).width();
//   let x = (height / width);
//   if (x > 1) {
//     $(this).css({
//       'width': 100 + 'px',
//       "margin": 'auto',
//       "padding": "0px",
//     });
//   } else {
//     $(this).css({
//       "margin-top": '30px',
//       "padding": "5px",
//     });
//   }
// });

$('.style_house_sec02 .slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: true,
  fade: true,
  asNavFor: '.slider-nav',
  prevArrow: '<button type="button" class="slick-prev"><img src="/img/arrow_left.png" alt="" width="50"></button>',
  nextArrow: '<button type="button" class="slick-next"><img src="/img/arrow_right.png" alt="" width="50"></button>'
});
$('.style_house_sec02 .slider-nav').slick({
  slidesToShow: 5,
  slidesToScroll: 3,
  asNavFor: '.slider-for',
  dots: false,
  arrows: false,
  // centerMode: true,
  focusOnSelect: true
});

$(document).on("click", ".article__readMore", function (event) {
  $('.bhouseweb_loc_sec02').css('height', 'auto');
  $('.article__readMore').hide();

});

$(document).on("click", ".bhouseweb_loc_type>label", function (event) {
  $(this).siblings().removeClass('select');

  $(this).toggleClass("select");

});

$(".bt_slogan_portfolio").click(function () {
  $(".bt_slogan_portfolio").fadeOut();
});


$(".bt_slogan").click(function () {
  $(".bt_slogan_portfolio").fadeIn();
});

// Navbar Icon
function changeIcon(e) {
  const item = document.querySelector('[data-toggle-class]');
  item.className === "close-btn" ? item.className = "navbar-toggler-icon" : item.className = "close-btn";
}

$('.furniture_design_content .slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.furniture_design_content .slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  focusOnSelect: true
});

// 外部連結
let fb_link = `https://www.facebook.com/sharer.php?u=${location.href}`;
let fb_list = document.querySelectorAll('#collection_icon_fb');
for (let i = 0; i < fb_list.length; i++) {
  const item = fb_list[i];
  item.setAttribute("href", fb_link);
}

let line_link = `http://line.naver.jp/R/msg/text/?${location.href}`;
let line_list = document.querySelectorAll('#collection_icon_line');
for (let i = 0; i < line_list.length; i++) {
  const item = line_list[i];
  item.setAttribute("href", line_link);
}

// blog 分類篩選
function getCategories(item) {
  // 將分類名稱儲存至 localStorage
  localStorage.setItem('category', item);
}

// 錨點
$("*").each(function (index, element) {
  $(this).click(function (e) {
    var target = $(this).attr("data-gt-target");
    var duration = $(this).attr("data-gt-duration");
    var offset = $(this).attr("data-gt-offset");

    if (target) {
      //console.log("目標：" + target);
      //console.log("時間：" + duration);
      //console.log("位移：" + offset);

      // 上方位置 = 目標區塊.位移().上方位置
      var top = $(target).offset().top;

      $("html").stop().animate({
        scrollTop: top - offset
      }, parseInt(duration));
    }
  });
});

let tagList = [];

(function getContentsData() {
  // 線上版網址 https://bhouse3.ptt.cx:9002/api/contents?url=/blog
  // 本地端網址 http://localhost:9001/api/
  fetch('https://bhouse3.ptt.cx:9002/api/contents?url=/blog').then(res => res.json()).then(list => {
    list.map(({ blog_tag }) => {
      if (blog_tag) {
        let tagText = blog_tag.replace("[", "").replace("]", "");
        let tagArr = tagText.split(',');
        tagArr.map(e => {
          tagList.push(e);
        })
        // 移除重複字串
        tagList = tagList.filter((item, index) => tagList.indexOf(item) === index);
        // 隨機排序
        tagList = tagList.sort(() => 0.5 - Math.random());

        const dom = document.querySelectorAll('.blog-tags');
        let tagTemplate = [];

        // 標籤顯示兩排
        let count = 0;
        if (document.body.offsetWidth<767) {
          count = 8;
        } else {
          count = 10;
        }
        for (let i = 0; i < count; i++) {
          const element = tagList[i];
          let content = `<a href="/blog?tags=${element}">${element}</a>`;
          tagTemplate.push(content);
        }

        // 移除陣列逗號
        if (dom) {
          for (let i = 0; i < dom.length; i++) {
            const element = dom[i];
            element.innerHTML = tagTemplate.join("");
          }
        }
      }

    })
  })
})();