https://natori-theater.com/assets/js/site.natori_1st-theatre.js

1'use strict';
2const documentBODY = document.querySelector('html');
3let scrollEffect = null;
4let smoothScroll = null;
5const mqlPc = window.matchMedia('(min-width: 767px)');
6const mqlMobile = window.matchMedia('(max-width: 768px)');
7let cvfix = null;
8
9// smooth scroll
10const setSmoothScroll = () => {
11  smoothScroll = new SCROLL_MODULE('[href^="#"]', {
12    duration: 1000,
13  });
14};
15
16// scrolleffect
17const setScrollEffect = () => {
18  scrollEffect = new SCROLL_EFFECT_MODULE({
19    elem: '.js-animation',
20    firstElem: '.js-hero-animation',
21    displayRatio: 0.8,
22    firstDelaySteps: 0,
23  });
24};
25
26// nav
27const nav = () => {
28  const targetWrap = document.querySelector('.js-nav');
29
30  if (!targetWrap) {
31    return;
32  }
33
34  const targetHookWrap = targetWrap.querySelector('.js-nav__hook');
35  const targetHook = targetWrap.querySelector('.js-nav__btn');
36  const targetLinks = targetWrap.querySelectorAll('.js-nav__link');
37  const targetOuter = targetWrap.querySelector('.js-nav__content');
38  const targetHookTxt = targetWrap.querySelector('.js-nav__btn_text');
39  const targetBg = targetWrap.querySelector('.js-nav__bg');
40
41  // ナビ展開
42  const navOpen = (e) => {
43    documentBODY.classList.add('is-lock');
44    targetHookWrap.classList.add('is-open');
45    targetWrap.classList.add('is-open');
46    setTimeout(() => {
47      targetOuter.classList.add('is-open');
48      targetHookTxt.innerHTML = 'CLOSE';
49    }, 0);
50  };
51
52  // ナビ閉扉
53  const navClose = () => {
54    targetHookWrap.classList.remove('is-open');
55    targetOuter.classList.remove('is-open');
56    targetWrap.classList.remove('is-open');
57    documentBODY.classList.remove('is-lock');
58    targetHookTxt.innerHTML = 'MENU';
59  };
60
61  // クリック時の動作
62  const navClick = () => {
63    if (targetWrap.classList.contains('is-sliding')) {
64      return;
65    }
66
67    targetWrap.classList.add('is-sliding');
68    if (!targetWrap.classList.contains('is-open') || !targetOuter.classList.contains('is-open')) {
69      navOpen();
70    } else {
71      navClose();
72    }
73    targetWrap.classList.remove('is-sliding');
74  };
75
76  // ナビボタンのクリックの検知
77  targetHook.addEventListener('click', (e) => {
78    navClick();
79  });
80
81  // ナビ内のリンククリック検知
82  targetLinks.forEach((targetLink) => {
83    targetLink.addEventListener('click', (e) => {
84      navClick();
85    });
86  });
87
88  // 展開時の黒背景クリック検知
89  targetBg.addEventListener('click', (e) => {
90    e.preventDefault();
91    navClick();
92  });
93};
94
95// modal
96const modal = () => {
97  const documentBODY = document.querySelector('html');
98
99  const _template =
100    '\n<section class="m-modal {{ defaultClassName }}" id="{{ id }}" data-modal-type>\n  <div class="m-modal__bg {{ defaultClassName }}__bg"></div>\n  <div class="m-modal__content {{ defaultClassName }}__content swiper">\n    {{ content }}\n  </div>\n  <div class="m-modal__close-btn {{ defaultClassName }}__close-btn" data-modal-ui-close></div>\n</section>';
101
102  new MODAL_MODULE({
103    customModalHtml: _template,
104    zIndex: 1000,
105    defaultClassName: 'm-nmnl_rule-modal',
106    on: {
107      prepOpen: function () {
108        documentBODY.classList.add('is-nmnl_rule-fixed');
109      },
110
111      beforeClose: function () {
112        documentBODY.classList.remove('is-nmnl_rule-fixed');
113      },
114    },
115  });
116};
117
118// movie slide
119const movieSlide = () => {
120  new Swiper('.p-release-movie_list', {
121    speed: 800,
122    autoplay: {
123      delay: 5000,
124      disableOnInteraction: false,
125    },
126    loop: true,
127    slideActiveClass: 'is-active',
128    slidePrevClass: 'is-prev',
129    slideNextClass: 'is-next',
130    slidesPerView: 1.24,
131    spaceBetween: 12,
132    centeredSlides: true,
133    speed: 500,
134    breakpoints: {
135      768: {
136        autoplay: {
137          delay: 5000,
138          disableOnInteraction: false,
139        },
140        slidesPerView: 2.15,
141        spaceBetween: 25,
142        speed: 500,
143      },
144    },
145    on: {
146      init: function () {
147        modal();
148      },
149    },
150  });
151};
152
153// release product slide
154const releaseSlide = () => {
155  const slideThumb = () => {
156    const thumbWrap = document.querySelector('.p-release-thumb_slide');
157
158    if (!thumbWrap) {
159      return;
160    }
161
162    const targetItems = thumbWrap.querySelectorAll('.p-release-thumb_slide__item');
163

164    targetItems.forEach((targetItem) => {
165      targetItem.addEventListener('click', (e) => {
166        const clickTarget = e.currentTarget;
167        const targetIndex = clickTarget.getAttribute('data-count') - 1;
168
169        sliderContent.slideTo(targetIndex);
170      });
171    });
172  };
173
174  const sliderContent = new Swiper('.p-release-slide', {
175    speed: 500,
176    // autoplay: {
177    //   delay: 5000,
178    //   disableOnInteraction: false,
179    // },
180    loop: false,
181    slideActiveClass: 'is-active',
182    slidePrevClass: 'is-prev',
183    slideNextClass: 'is-next',
184    slidesPerView: 1,
185    spaceBetween: 15,
186    // thumbs: {
187    //   swiper: thumbSlide,
188    //   slideThumbActiveClass: 'is-current',
189    // },
190    breakpoints: {
191      768: {
192        slidesPerView: 1,
193        spaceBetween: 78,
194      },
195    },
196    on: {
197      init: function () {
198        slideThumb();
199      },
200    },
201  });
202
203  // sliderContent();
204};
205
206// KV scroll Watch
207const scrollKv = () => {
208  const kv = document.querySelector('.l-entry');
209  const targetMask = document.querySelector('.p-entry-mask');
210  const targetCover = document.querySelector('.l-entry-cover');
211  const targetVisual = document.querySelector('.l-entry_kv__base');
212  const targetDeco = document.querySelector('.l-outer-deco');
213  const targetKvImg = document.querySelector('.l-entry_kv__img-item');
214  const targetScrollSp = document.querySelector('.l-entry-scrolldown--sp');
215
216  if (!kv && !targetMask) {
217    return;
218  }
219
220  const kvHeight = kv.clientHeight;
221  const windowHeight = window.innerHeight;
222  const visualScaleVal = 2.2;
223  const widthVal = 5;
224  let scrollHeight = window.scrollY;
225  let scrollPar = null;
226  let transformPar = null;
227  let maxWid = null;
228  let transfromVal = null;
229  let kvTop = null;
230  let imgRatio = null;
231  let kvImgHeight = null;
232
233  transfromVal = 100;
234
235  // TOPからのスクロール量取得
236  const scrollHandle = () => {
237    let kvWid = null;
238    let kvTransformEnd = null;
239
240    if (mqlMobile.matches) {
241      kvWid = 80;
242      kvTransformEnd = 0;
243      kvImgHeight = 470;
244    }
245
246    if (mqlPc.matches) {
247      kvWid = 36;
248      kvTop = 20;
249      kvTransformEnd = 50;
250      kvImgHeight = 1932;
251    }
252
253    imgRatio = 3635 / 2880;
254
255    const scrollKv = (top) => {
256      document.querySelector('.l-entry').style.height = kvImgHeight * 1.2 + 'px';
257
258      let ratio = top / (document.querySelector('.l-entry').clientHeight - window.innerHeight);
259      if (ratio < 0) ratio = 0;
260      if (ratio > 1) ratio = 1;
261      let _fixW = (100 - kvWid) * ratio;
262      // let _fixT = kvTransformEnd * ratio;
263
264      const adjustTop = ((window.innerHeight - document.body.clientWidth * 0.36 * imgRatio) / 2) * (1 - ratio);
265
266      document.querySelector('.l-entry_kv__base').style.transform = 'translate(-50%, '.concat(adjustTop, 'px) scale(').concat((_fixW + kvWid) * 0.01, ')');
267
268      scrollHeight = top;
269      scrollPar = Math.floor((scrollHeight / windowHeight) * 100);
270
271      if (ratio === 0) {
272        targetMask.classList.remove('is-hidden');
273      } else if (ratio === 1) {
274        targetMask.classList.add('is-hidden');
275      }
276
277      // if ((_fixW + kvWid) * 0.01 === 1) {
278      // } else {
279      // }
280
281      if (scrollPar > 100) {
282        return;
283      }
284
285      scroll2Cover();
286      scroll2Visual();
287    };
288
289    new SCROLL_EFFECT_MODULE({
290      on: {
291        Scroll: function (top) {
292          scrollKv(top);
293        },
294      },
295    });
296
297    scrollKv(0);
298  };
299
300  // スクロール量から変形値の割合計算
301  const scroll2Sample = () => {
302    transformPar = Math.round(transfromVal * (scrollPar / 100) * 1000) / 1000;
303  };
304
305  const scroll2Visual = () => {
306    let activeMaxWidth = null;
307    activeMaxWidth = getComputedStyle(targetVisual).maxWidth.replace(/[^0-9a-z]/gi, '');
308
309    targetVisual.style.maxWidth = maxWid + '%';
310  };
311
312  const scroll2Mask = () => {
313    transformPar = Math.round(transfromVal * (scrollPar / 100) * 1000) / 1000 + 1;
314    targetMask.style.transform = 'scale(' + transformPar + ')';
315  };
316
317  const scroll2Cover = () => {
318    if (scrollPar > 0) {
319      targetCover.classList.add('is-animate');
320      targetDeco.classList.add('is-animate');
321      targetScrollSp.classList.add('is-animate');
322      document.querySelector('.l-header').classList.add('is-hidden');
323    } else if (scrollPar < 0.5) {
324      targetCover.classList.remove('is-animate');
325      targetDeco.classList.remove('is-animate');
326      targetScrollSp.classList.remove('is-animate');
327      document.querySelector('.l-header').classList.remove('is-hidden');
328    }
329  };
330
331  scrollHandle();
332};
333
334// floor nav
335const floorNav = () => {
336  const target = document.querySelector('.p-header-nav-list__list');
337
338  new SCROLL_EFFECT_MODULE({
339    elem: '.js-floor_steps',
340    displayRatio: 0.2,
341    firstDelaySteps: 0,
342    addClassNameActive: null,
343    displayReverse: true,
344
345    on: {
346      Change: function (item, pos) {
347        if (!item) {
348          return;
349        }
350
351        const currentContent = item.getAttribute('id');
352
353        if (!item) {
354          target.setAttribute('data-nav-current', currentContent);
355
356          return;
357        }
358
359        target.setAttribute('data-nav-current', currentContent);
360      },
361    },
362  });
363};
364
365// kv hidden
366const kvHidden = () => {
367  const root = document.querySelector('.js-kv_item');
368
369  if (!root) {
370    return;
371  }
372
373  new SCROLL_EFFECT_MODULE({
374    elem: '.js-content-scroll',
375    displayRatio: 0,
376    firstDelaySteps: 0,
377    addClassNameActive: null,
378    displayReverse: true,
379
380    on: {
381      Change: function (item, pos) {
382        const targets = document.querySelectorAll('.js-kv_item');
383
384        if (!item) {

385          targets.forEach((target) => {
386            document.querySelector('.l-header').classList.remove('is-visible');
387
388            target.classList.remove('is-hidden');
389            // if (!target.classList.contains('is-hidden')) {
390            //   return;
391            // }
392          });
393        }
394
395        if (item) {
396          targets.forEach((target) => {
397            document.querySelector('.l-header').classList.add('is-visible');
398
399            target.classList.add('is-hidden');
400            // if (!target.classList.contains('is-hidden')) {
401            //   return;
402            // }
403          });
404        }
405      },
406    },
407  });
408};
409
410window.addEventListener('load', () => {
411  'use strict';
412
413  setSmoothScroll();
414  documentBODY.classList.add('is-loaded');
415  smoothScroll.anime('body');
416
417  setScrollEffect();
418  nav();
419  scrollKv();
420  releaseSlide();
421  movieSlide();
422  floorNav();
423  kvHidden();
424});