https://yokohama-mores.jp/assets/js/dist.js

1const spMediaQuery = window.matchMedia("(max-width: 768px)"),
2  pcMediaQuery = window.matchMedia(
3    "(min-width: 769px) and (max-width: 1024px)"
4  );
5
6/*  stack
7------------------------------------------------------------------------------------------------------------------------*/
8$(function () {
9  slideBanner();
10  itemMore(12);
11  noImg();
12  recruitAcc();
13  modal();
14  anchorScroll();
15  if (window.location.hash) {
16    const scrollPos = $(window.location.hash).offset().top - getScrollOffset();
17    $("html, body").animate({ scrollTop: scrollPos }, 400, "swing");
18  }
19});
20
21/*  詳細ページ　スライダー
22------------------------------------------------------------------------------------------------------------------------*/
23function slideBanner() {
24  if (!$(".js-slider").length) {
25    return;
26  }
27  const slideLength = document.querySelectorAll(
28    ".js-slider .splide__slide"
29  ).length;
30
31  // スライド登録が0枚の時はエリアごとトルツメ
32  if (!slideLength) {
33    document.querySelector(".left--info").remove();
34    document.querySelector(".floor__cnt1--container").classList.add("no-slide");
35    return;
36  }
37
38  // スライド登録が1枚の時はスライドさせない
39  if (slideLength == 1) {
40    document.querySelector(".js-slider").classList.add("no-slide");
41    document.querySelector(".js-thumbnails").remove();
42    return;
43  }
44
45  // 以下、スライダー設定
46  const slider = ".js-slider";
47  const slider_options = {
48    pagination: false,
49    arrows: false,
50    perPage: 1,
51    perMove: 1,
52    gap: "1",
53    type: "loop",
54    autoplay: true,
55    interval: 4000,
56    speed: 800,
57    updateOnMove: true,
58    pauseOnHover: false,
59  };
60
61  const sliderSplide = new Splide(slider, slider_options);
62
63  const thumbnails = document.querySelectorAll(".js-thumbnails .thumbnail");
64  let current;
65
66  const initThumbnail = (thumbnail, index) => {
67    thumbnail.addEventListener("click", () => {
68      sliderSplide.go(index);
69    });
70  };
71
72  for (let i = 0; i < thumbnails.length; i++) {
73    initThumbnail(thumbnails[i], i);
74  }
75
76  sliderSplide.on("mounted move", () => {
77    if (current) {
78      current.classList.remove("is-active");
79    }
80
81    const thumbnail = thumbnails[sliderSplide.index];
82    if (thumbnail) {
83      thumbnail.classList.add("is-active");
84      current = thumbnail;
85    }
86  });
87
88  sliderSplide.mount();
89}
90
91/*  itemMore
92------------------------------------------------------------------------------------------------------------------------*/
93function itemMore(num) {
94  const count = num,
95    moreBtn = $(".js-morebtn"),
96    moreTraget = moreBtn.prev(".js-morelist");
97
98  let moreItem = $(".js-morelist > *"),
99    all = moreItem.length,
100    nowCount;
101
102  if (all <= count) {
103    moreBtn.hide();
104    moreItem.show();
105  } else {
106    for (let i = 0; i < count; i++) {
107      moreItem.eq(i).show();
108    }
109    nowCount = count;
110  }
111
112  moreBtn.on("click", function () {
113    nowCount += count;
114    if (all <= nowCount) {
115      moreBtn.hide();
116      moreItem.show();
117    } else {
118      for (let i = 0; i < nowCount; i++) {
119        moreItem.eq(i).show();
120      }
121    }
122  });
123}
124
125/* detail no-image
126------------------------------------------------------------------------------------------------------------------------*/
127function noImg() {
128  if (!$(".js-noimg").length) {
129    return;
130  }
131  const itemLength = document.querySelectorAll(".js-noimg .info--item").length;
132
133  if (itemLength == 1) {
134    document.querySelector(".cmn__cnt1--container").classList.add("no-img");
135    // document.querySelector('.js-thumbnails').remove();
136    return;
137  }
138}
139
140/* recruit acc
141------------------------------------------------------------------------------------------------------------------------*/
142const recruitAcc = () => {
143  const accBlock = $(".js-recruit-acc");
144
145  accBlock.each(function () {
146    let btn = $(this).find(".js-recruit-accbtn"),
147      area = $(this).find(".js-recruit-accarea"),
148      accTxt = $(this).find(".js-txt");
149
150    btn.on("click", function () {
151      $(this).toggleClass("is-active");
152      area.slideToggle();
153
154      if ($(this).hasClass("is-active")) {
155        accTxt.text("CLOSE");
156      } else {
157        accTxt.text("VIEW MORE");
158      }
159    });
160  });
161};
162
163/*  modal モーダル
164------------------------------------------------------------------------------------------------------------------------*/
165function modal() {
166  const modal = ".js-modal",
167    modalOpen = ".js-modalopen",
168    modalClose = ".js-modalclose";
169
170  $(document).on("click", modalOpen, function () {
171    $(document).find(modal).hide(); //モーダルリセット
172
173    let target = $(this).attr("data-modal");
174    $("." + target).fadeIn(400);
175    // imgSlider("." + target);
176    $("body").css("overflow", "hidden");
177  });
178
179  $(document).on("click", modalClose, function () {
180    $("body").removeAttr("style");
181    // $(document).find('.slick-initialized').slick('unslick');
182    $(document).find(modal).hide();
183  });
184}
185
186/*  anchorScroll
187------------------------------------------------------------------------------------------------------------------------*/
188const anchorBtn = ".js-anchor";
189
190function getScrollOffset() {
191  const isMobile = window.matchMedia("(max-width: 768px)").matches;
192  return isMobile ? 76 : 200;
193}
194
195function anchorScroll() {
196  $(document).on("click", anchorBtn, function () {
197    const btnUrl = $(this).attr("href"),
198      scrollPos = $(btnUrl).offset().top - getScrollOffset(),
199      speed = 400;
200
201    $("html, body").animate({ scrollTop: scrollPos }, speed, "swing");
202
203    // ＃を消すおまじない
204    return false;

205  });
206}